liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style:界面细节调整

Browse Source
This commit is contained in:
lifizer
2024-04-24 14:36:24 +08:00
parent 5fffc98955
commit 8bc9558828
5 changed files with 82 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/OrderGoods.vue
+77 -38
View File
@@ -1,39 +1,57 @@
<template>
<view class="orderGoods">
<view v-if="title.length>0" class="total acea-row row-middle" >
<view class="acea-row row-left row-middle" style="position: relative;">
<image style="width: 32rpx;height: 32rpx;margin-right: 12rpx;" src="http://admin-api.xdd618.com/file/pic/20210807230759738342.png" mode=""></image>
<text class="title">{{title}}</text>
<!-- <text class="pink-dot"></text> -->
</view>
</view>
<view v-else class="total">共{{ cartInfo.length }}件商品</view>
<view
v-if="title.length > 0"
class="total acea-row row-middle"
>
<view
style="position: relative;"
class="acea-row row-left row-middle"
>
<image
style="width: 32rpx;height: 32rpx;margin-right: 12rpx;"
src="http://admin-api.xdd618.com/file/pic/20210807230759738342.png" mode=""
/>
<text class="title">
{{ title }}
</text>
</view>
</view>
<view
v-else
class="total"
>共{{ cartInfo.length }}件商品</view>
<view class="goodWrapper">
<view class="item acea-row row-between-wrapper" style="flex-wrap: nowrap;" v-for="cart in cartInfo" :key="cart.id">
<view
v-for="cart in cartInfo"
:key="cart.id"
class="item acea-row row-between-wrapper"
style="flex-wrap: nowrap;"
>
<view class="pictrue" style="margin-right: 20rpx;">
<image :src="cart.productInfo.image" class="image" />
</view>
<view class="text">
<view class="acea-row row-between-wrapper">
<view class="name line1">{{ cart.productInfo.storeName }}</view>
<!-- <view class="num">x {{ cart.cartNum }}</view> -->
<view class="name line1 one-t">{{ cart.productInfo.storeName }}</view>
</view>
<!-- <view
class="attr line1"
v-if="cart.productInfo.attrInfo"
>{{ cart.productInfo.attrInfo.sku }}</view> -->
<view class="acea-row row-middle row-between">
<view
class="attr"
style="height: 38rpx;line-height:38rpx;background-color: #FFF3F2;border-radius: 19rpx;padding: 4rpx 20rpx;"
v-if="cart.productInfo.attrInfo"
>规格：{{ cart.productInfo.attrInfo.sku }}</view>
<view v-if="evaluate == 3" class="evaluate" style="bottom: 0 !important;position: relative;height: 36rpx !important;width: 90rpx !important;line-height: 36rpx !important;font-size: 32rpx;border-radius: 18rpx;" @click="routerGo(cart)">评价</view>
</view>
<view class="acea-row row-middle row-between attr-wrap">
<view
v-if="cart.productInfo.attrInfo"
class="attr more-t"
>
规格：{{ cart.productInfo.attrInfo.sku }}
</view>
<view
v-if="evaluate == 3"
class="evaluate"
@click="routerGo(cart)"
>评价</view>
</view>
<view class="money font-color-lightred acea-row row-between">
<text>￥{{ cart.truePrice }}</text>
<text class="num" style="margin-left: 10rpx;">x{{ cart.cartNum }}</text>
</view>
<text>￥{{ cart.truePrice }}</text>
<text class="num">x{{ cart.cartNum }}</text>
</view>
</view>
</view>
</view>
@@ -68,21 +86,42 @@ export default {
};
</script>
<style scoped>
.pink-dot{
width:24rpx;
height:24rpx;
background:rgba(255,86,74,0.4);
border-radius:50%;
position: absolute;
z-index: 0;
bottom: 24rpx;
right: -12rpx;
}
.title{
font-size:26rpx;
color:#080F1A;
font-weight: bold;
}
.goodWrapper .item .pictrue {
width: 160rpx;
height: 160rpx;
}
.goodWrapper .item .pictrue .image {
display: block;
width: 160rpx;
height: 160rpx;
}
.attr-wrap {
position: relative;
min-height: 80rpx;
margin-top: 8rpx;
align-items: flex-start;
}
.text .attr {
max-width: calc(100% - 130rpx);
margin: 0 !important;
padding: 4rpx 20rpx;
border-radius: 19rpx;
line-height:38rpx;
box-sizing: border-box;
background-color: #FFF3F2;
}
.evaluate {
position: relative;
top: 0;
height: 36rpx;
width: 90rpx;
border-radius: 36rpx !important;
line-height: 36rpx;
font-size: 28rpx;
}
</style>