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{ .v12-@{classname}-text{
color: @color !important; color: @color !important;
} }
.v12-@{classname}-border{
border: 1px solid @color !important;
}
}); });
/*===================字体大小======================*/ /*===================字体大小======================*/
@@ -100,6 +103,8 @@ each(@colors, {
.generateRadius(100); .generateRadius(100);
/*=========================================*/ /*=========================================*/
/*====================flex 函数表达式=====================*/
.v12-d-flex{ .v12-d-flex{
display: flex !important; display: flex !important;
} }
@@ -110,6 +115,14 @@ each(@colors, {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.v12-align-start{
display: flex;
align-items: start;
}
.v12-align-end{
display: flex;
align-items: end;
}
.v12-justify-center{ .v12-justify-center{
display: flex; display: flex;
justify-content: center; justify-content: center;
components/CheckboxIcon.vue
+4 -4
View File
@@ -1,6 +1,7 @@
<template> <template>
<view class="components-checkbox-icon jc-center ai-center" :class="{'isSelected':isSelected}" @click="change"> <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> </view>
</template> </template>
@@ -43,7 +44,7 @@ export default {
width: 32rpx; width: 32rpx;
height: 32rpx; height: 32rpx;
box-sizing: border-box; box-sizing: border-box;
border: 2rpx solid #D5D7D8; border: 2px solid #D5D7D8;
border-radius: 50%; border-radius: 50%;
} }
@@ -53,7 +54,6 @@ export default {
} }
.isSelected { .isSelected {
border: 3px solid #FD5749; border: 3px solid #C52733;
background: #FD5749;
} }
</style> </style>
pages.json
+1
View File
@@ -836,6 +836,7 @@
}, },
"tabBar": { "tabBar": {
"color": "#8B8F99", "color": "#8B8F99",
"custom": true,
"selectedColor": "#FF564A", "selectedColor": "#FF564A",
"borderStyle": "black", "borderStyle": "black",
"backgroundColor": "#ffffff", "backgroundColor": "#ffffff",
pages/cart.vue
+92 -50
View File
@@ -41,49 +41,51 @@
class="store-cover" class="store-cover"
mode="scaleToFill" mode="scaleToFill"
/> />
<view class="mer-name">{{ item['merName'] }}</view> <view class="mer-name v12-font-24 v12-font-bold">{{ item['merName'] }}</view>
</view> </view>
<view <view
class="flex ai-center hotle-btn" class="flex ai-center hotle-btn v12-primary-text"
@click="navToStore(item['hotelId'])" @click="navToStore(item['hotelId'])"
> >
进店逛逛 进店逛逛>
<image <!-- <image
:src="$VUE_APP_RESOURCES_URL + '/20240109234706982937.png'" :src="$VUE_APP_RESOURCES_URL + '/20240109234706982937.png'"
style="width: 24rpx;height: 24rpx" style="width: 24rpx;height: 24rpx"
mode="scaleToFill" mode="scaleToFill"
/> /> -->
</view> </view>
</view> </view>
<view class="good-box"> <view class="good-box">
<view <view
v-for="(good, gIndex) in item['carts']" v-for="(good, gIndex) in item['carts']"
:key="gIndex" :key="gIndex"
class="good flex ai-center" class="good flex v12-align-start"
> >
<CheckboxIcon <view class="v12-align-center">
:default-state="good['state']" <CheckboxIcon
:mark="[index, gIndex]" :default-state="good['state']"
style="margin-right: 24rpx;" :mark="[index, gIndex]"
@change="onChange" style="margin-right: 24rpx;"
/> @change="onChange"
<image />
v-if="good['productInfo']['attrInfo']['image']" <image
:src="good['productInfo']['attrInfo']['image']" v-if="good['productInfo']['attrInfo']['image']"
class="good-cover flex-0" :src="good['productInfo']['attrInfo']['image']"
mode="scaleToFill" class="good-cover flex-0 v12-radius-16"
@click="navToGood(good)" mode="scaleToFill"
/> @click="navToGood(good)"
<image />
v-else <image
:src="good['productInfo']['image']" v-else
mode="scaleToFill" :src="good['productInfo']['image']"
class="good-cover flex-0" mode="scaleToFill"
@click="navToGood(good)" class="good-cover flex-0"
/> @click="navToGood(good)"
/>
</view>
<view style="width: 100%"> <view style="width: 100%">
<view <view
class="one-t" class="one-t v12-font-28"
@click="navToGood(good)" @click="navToGood(good)"
>{{ good['productInfo']['storeName'] }}</view> >{{ good['productInfo']['storeName'] }}</view>
<view <view
@@ -92,16 +94,24 @@
> >
规格：{{ good['productInfo']['attrInfo']['sku'] }} 规格：{{ good['productInfo']['attrInfo']['sku'] }}
</view> </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 <view
class="flex jc-between ai-center" class="flex jc-between ai-center"
style="width: 100%;margin-top: 26rpx;" style="width: 100%;margin-top: 4rpx;"
> >
<view <view
style="color:#E92727;font-size: 32rpx;" class="v12-font-bold v12-primary-text"
@click="navToGood(good)" @click="navToGood(good)"
> >
<text class="bold" style="font-size: 24rpx">￥</text> <text class="bold v12-font-22">￥</text>
{{ good['truePrice'] }} <text class="v12-font-36">{{ good['truePrice'] }}</text>
</view> </view>
<u-number-box <u-number-box
:value="good.cartNum" :value="good.cartNum"
@@ -113,15 +123,15 @@
@change="e => changeNumHandle(index, gIndex, good, e)" @change="e => changeNumHandle(index, gIndex, good, e)"
> >
<template v-slot:minus> <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"/> <u-icon name="minus" size="12" color="#FFFFFF"/>
</view> </view>
</template> </template>
<template v-slot:input> <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>
<template v-slot:plus> <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"/> <u-icon name="plus" size="12" color="#FFFFFF"/>
</view> </view>
</template> </template>
@@ -139,13 +149,15 @@
:mark="[-1]" :mark="[-1]"
@change="onChange" @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>
<view class="flex ai-center"> <view class="flex ai-center">
<view style="margin-right: 20rpx;color:#666666;font-size: 32rpx">合计: <view >
<text class="bold" style="color:#E92727">￥{{ total }}</text> <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>
<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> </view>
<view <view
@@ -550,6 +562,36 @@ export default {
</script> </script>
<style scoped lang="less"> <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 { view {
box-sizing: border-box; box-sizing: border-box;
} }
@@ -593,10 +635,10 @@ view {
margin-top: 24rpx; margin-top: 24rpx;
.good-cover { .good-cover {
width: 160rpx; width: 140rpx;
height: 160rpx; height: 140rpx;
margin-right: 16rpx; margin-right: 16rpx;
border-radius: 8rpx; border-radius: 16rpx;
} }
.one-t { .one-t {
@@ -609,20 +651,20 @@ view {
.sku { .sku {
display: inline-flex; display: inline-flex;
margin-top: 12rpx; margin: 4rpx;
padding: 10rpx 20rpx; padding: 10rpx 20rpx;
border-radius: 22rpx; border-radius: 60rpx;
background: #FDF1F3; background: rgba(240,240,240,0.6);
color: #999999; color: #666666;
font-size: 28rpx; font-size: 24rpx;
} }
.num-btn { .num-btn {
width: 40rpx; width: 40rpx;
height: 40rpx; height: 40rpx;
background: rgba(236, 236, 238, 1); background: rgba(236, 236, 238, 1);
border: 2px solid rgba(236, 236, 238, 1); // border: 2px solid rgba(236, 236, 238, 1);
border-radius: 50%; border-radius: 40rpx;
} }
.num-input { .num-input {
@@ -644,8 +686,8 @@ view {
.btn-submit { .btn-submit {
width: 196rpx; width: 196rpx;
height: 100rpx; height: 64rpx;
background: #FD5749; background: #C52733;
color: #FFFFFF; color: #FFFFFF;
font-size: 32rpx; font-size: 32rpx;
} }
pages/home/index.vue
+1 -1
View File
@@ -299,7 +299,7 @@ export default {
} }
}, },
onLoad() { onLoad() {
uni.hideTabBar() // uni.hideTabBar()
const _this = this const _this = this
_this.init() _this.init()
uni.getSystemInfo({ 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