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

Style(购物车)：UI样式调整

Browse Source
This commit is contained in:
linxi
2024-09-03 17:27:07 +08:00
parent 992c4a7ba5
commit ee04a02cb6
8 changed files with 111 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/v12-style.less
+13
View File
@@ -17,6 +17,9 @@ each(@colors, {
.v12-@{classname}-text{
color: @color !important;
}
.v12-@{classname}-border{
border: 1px solid @color !important;
}
});
/*===================字体大小======================*/
@@ -100,6 +103,8 @@ each(@colors, {
.generateRadius(100);
/*=========================================*/
/*====================flex 函数表达式=====================*/
.v12-d-flex{
display: flex !important;
}
@@ -110,6 +115,14 @@ each(@colors, {
display: flex;
align-items: center;
}
.v12-align-start{
display: flex;
align-items: start;
}
.v12-align-end{
display: flex;
align-items: end;
}
.v12-justify-center{
display: flex;
justify-content: center;
components/CheckboxIcon.vue
+4 -4
View File
@@ -1,6 +1,7 @@
<template>
<view class="components-checkbox-icon jc-center ai-center" :class="{'isSelected':isSelected}" @click="change">
<image class="icon-hook" :src="webUrl + '/20240109175325131970.png'" mode="scaleToFill" v-if="isSelected"/>
<!-- <image class="icon-hook" :src="webUrl + '/20240109175325131970.png'" mode="scaleToFill" v-if="isSelected"/> -->
<u-icon name="checkmark-circle-fill" color="#C52733" v-if="isSelected"></u-icon>
</view>
</template>
@@ -43,7 +44,7 @@ export default {
width: 32rpx;
height: 32rpx;
box-sizing: border-box;
border: 2rpx solid #D5D7D8;
border: 2px solid #D5D7D8;
border-radius: 50%;
}
@@ -53,7 +54,6 @@ export default {
}
.isSelected {
border: 3px solid #FD5749;
background: #FD5749;
border: 3px solid #C52733;
}
</style>
pages.json
+1
View File
@@ -836,6 +836,7 @@
},
"tabBar": {
"color": "#8B8F99",
"custom": true,
"selectedColor": "#FF564A",
"borderStyle": "black",
"backgroundColor": "#ffffff",
pages/cart.vue
+92 -50
View File
@@ -41,49 +41,51 @@
class="store-cover"
mode="scaleToFill"
/>
<view class="mer-name">{{ item['merName'] }}</view>
<view class="mer-name v12-font-24 v12-font-bold">{{ item['merName'] }}</view>
</view>
<view
class="flex ai-center hotle-btn"
class="flex ai-center hotle-btn v12-primary-text"
@click="navToStore(item['hotelId'])"
>
进店逛逛
<image
进店逛逛>
<!-- <image
:src="$VUE_APP_RESOURCES_URL + '/20240109234706982937.png'"
style="width: 24rpx;height: 24rpx"
mode="scaleToFill"
/>
/> -->
</view>
</view>
<view class="good-box">
<view
v-for="(good, gIndex) in item['carts']"
:key="gIndex"
class="good flex ai-center"
class="good flex v12-align-start"
>
<CheckboxIcon
:default-state="good['state']"
:mark="[index, gIndex]"
style="margin-right: 24rpx;"
@change="onChange"
/>
<image
v-if="good['productInfo']['attrInfo']['image']"
:src="good['productInfo']['attrInfo']['image']"
class="good-cover flex-0"
mode="scaleToFill"
@click="navToGood(good)"
/>
<image
v-else
:src="good['productInfo']['image']"
mode="scaleToFill"
class="good-cover flex-0"
@click="navToGood(good)"
/>
<view class="v12-align-center">
<CheckboxIcon
:default-state="good['state']"
:mark="[index, gIndex]"
style="margin-right: 24rpx;"
@change="onChange"
/>
<image
v-if="good['productInfo']['attrInfo']['image']"
:src="good['productInfo']['attrInfo']['image']"
class="good-cover flex-0 v12-radius-16"
mode="scaleToFill"
@click="navToGood(good)"
/>
<image
v-else
:src="good['productInfo']['image']"
mode="scaleToFill"
class="good-cover flex-0"
@click="navToGood(good)"
/>
</view>
<view style="width: 100%">
<view
class="one-t"
class="one-t v12-font-28"
@click="navToGood(good)"
>{{ good['productInfo']['storeName'] }}</view>
<view
@@ -92,16 +94,24 @@
>
规格：{{ good['productInfo']['attrInfo']['sku'] }}
</view>
<!-- <view class="v12-mt-1 v12-align-center">
<view class="v12-primary-text v12-primary-border v12-radius-8 v12-font-24 v12-px-1">
<text>券</text>
</view>
<view class="v12-primary-text v12-primary-border v12-radius-8 v12-font-24 v12-px-1">
<text>满100-30</text>
</view>
</view> -->
<view
class="flex jc-between ai-center"
style="width: 100%;margin-top: 26rpx;"
style="width: 100%;margin-top: 4rpx;"
>
<view
style="color:#E92727;font-size: 32rpx;"
class="v12-font-bold v12-primary-text"
@click="navToGood(good)"
>
<text class="bold" style="font-size: 24rpx">￥</text>
{{ good['truePrice'] }}
<text class="bold v12-font-22">￥</text>
<text class="v12-font-36">{{ good['truePrice'] }}</text>
</view>
<u-number-box
:value="good.cartNum"
@@ -113,15 +123,15 @@
@change="e => changeNumHandle(index, gIndex, good, e)"
>
<template v-slot:minus>
<view class="num-btn flex jc-center ai-center">
<view class="v12-minus-btn v12-font-bold flex jc-center ai-center">
<u-icon name="minus" size="12" color="#FFFFFF"/>
</view>
</template>
<template v-slot:input>
<view class="num-input tc">{{ good['cartNum'] }}</view>
<view class="num-input tc v12-num-input">{{ good['cartNum'] }}</view>
</template>
<template v-slot:plus>
<view class="num-btn flex jc-center ai-center">
<view class="v12-plus-btn v12-font-bold flex jc-center ai-center v12-primary">
<u-icon name="plus" size="12" color="#FFFFFF"/>
</view>
</template>
@@ -139,13 +149,15 @@
:mark="[-1]"
@change="onChange"
/>
<text style="color:#666666;font-size: 32rpx">全选({{ selectCount }})</text>
<text class="v12-dark-text v12-font-32 v12-font-bold">全选({{ selectCount }})</text>
</view>
<view class="flex ai-center">
<view style="margin-right: 20rpx;color:#666666;font-size: 32rpx">合计:
<text class="bold" style="color:#E92727">￥{{ total }}</text>
<view >
<text class="v12-font-24 v12-dark-text v12-font-weight-550"> 合计:</text>
<text class="v12-font-22 v12-primary-text v12-font-bold">￥</text>
<text class="v12-font-26 v12-primary-text v12-font-bold">{{ total }}</text>
</view>
<view class="btn-submit bold flex jc-center ai-center" @click="submit">结算</view>
<view class="btn-submit v12-mx-3 bold flex jc-center ai-center v12-radius-80 v12-primary" @click="submit">结算</view>
</view>
</view>
<view
@@ -550,6 +562,36 @@ export default {
</script>
<style scoped lang="less">
.v12-minus-btn{
border-radius: 28rpx 0rpx 0rpx 28rpx;
border: 1px solid #E6E6E6;
background-color: rgba(208,208,208,0.39);
height: 40rpx;
width: 40rpx;
padding: 0 20rpx;
font-weight: bold;
}
.v12-plus-btn{
border-radius: 0rpx 28rpx 28rpx 0rpx;
border: 1px solid #C52733;
background-color: #C52733;
height: 40rpx;
width: 40rpx;
padding: 0 20rpx;
font-weight: bold;
}
.v12-num-input{
height: 40rpx;
// width: 40rpx;
border: 1px solid #E6E6E6;
line-height: 40rpx;
font-weight: bold;
font-size: 28rpx;
color: #333;
display: flex;
align-items: center;
justify-content: center;
}
view {
box-sizing: border-box;
}
@@ -593,10 +635,10 @@ view {
margin-top: 24rpx;
.good-cover {
width: 160rpx;
height: 160rpx;
width: 140rpx;
height: 140rpx;
margin-right: 16rpx;
border-radius: 8rpx;
border-radius: 16rpx;
}
.one-t {
@@ -609,20 +651,20 @@ view {
.sku {
display: inline-flex;
margin-top: 12rpx;
margin: 4rpx;
padding: 10rpx 20rpx;
border-radius: 22rpx;
background: #FDF1F3;
color: #999999;
font-size: 28rpx;
border-radius: 60rpx;
background: rgba(240,240,240,0.6);
color: #666666;
font-size: 24rpx;
}
.num-btn {
width: 40rpx;
height: 40rpx;
background: rgba(236, 236, 238, 1);
border: 2px solid rgba(236, 236, 238, 1);
border-radius: 50%;
// border: 2px solid rgba(236, 236, 238, 1);
border-radius: 40rpx;
}
.num-input {
@@ -644,8 +686,8 @@ view {
.btn-submit {
width: 196rpx;
height: 100rpx;
background: #FD5749;
height: 64rpx;
background: #C52733;
color: #FFFFFF;
font-size: 32rpx;
}
pages/home/index.vue
+1 -1
View File
@@ -299,7 +299,7 @@ export default {
}
},
onLoad() {
uni.hideTabBar()
// uni.hideTabBar()
const _this = this
_this.init()
uni.getSystemInfo({
static/tabbar/icon-cart-hot.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

static/tabbar/icon-home.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 656 B

static/tabbar/icon-user.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 934 B