Style:界面细节调整

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
+1 -1
View File
@@ -183,7 +183,6 @@
.title {
width: 160rpx;
padding: 16rpx;
border-right: 2rpx solid #D2D2D2;
color: #ADADAD;
}
}
@@ -195,6 +194,7 @@
.value {
width: 100%;
padding: 16rpx;
border-left: 2rpx solid #D2D2D2;
}
}
}
+2 -1
View File
@@ -843,6 +843,8 @@ page {
}
.goodWrapper .item .text {
display: flex;
flex-flow: column;
width: 5.37*100rpx;
position: relative;
}
@@ -866,7 +868,6 @@ page {
.goodWrapper .item .text .money {
font-size: 0.26*100rpx;
margin-top: 0.17*100rpx;
}
.goodWrapper .item .text .evaluate {
+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>
+1 -1
View File
@@ -2,7 +2,7 @@
<view class="pkg-product-list">
<view class="first-half">
<view class="search-box flex jc-between ai-center">
<input type="text" v-model="keyword" placeholder="搜索商品" placeholder-style="color:#949494" @confirm="search">
<input type="text" v-model="keyword" placeholder="搜索内容" placeholder-style="color:#949494" @confirm="search">
<image class="icon" :src="webUrl+'/20220903142935869059.png'" mode="scaleToFill" @click="search"></image>
</view>
+1
View File
@@ -193,6 +193,7 @@ export default {
}
.img-top {
display: block;
width: 100vw;
}