zhuce
/
lilishop-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化个人中心页面的样式

master
lemon橪 2021-07-05 15:26:44 +08:00
parent 10d8f25ddf
commit b8e0ddcb5a
3 changed files with 55 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
manifest.json
View File

@ -2,8 +2,8 @@
"name" : "lili商城", "name" : "lili商城",
"appid" : "__UNI__C100675", "appid" : "__UNI__C100675",
"description" : "", "description" : "",
"versionName" : "4.0.22", "versionName" : "4.0.23",
"versionCode" : 4000022, "versionCode" : 4000023,
"transformPx" : false, "transformPx" : false,
"app-plus" : { "app-plus" : {
"compatible" : { "compatible" : {

153
pages/tabbar/user/my.vue
View File

@ -14,13 +14,10 @@
<view class="head-2" v-else> <view class="head-2" v-else>
<view class="user-name">登录/注册</view> <view class="user-name">登录/注册</view>
</view> </view>
<u-icon style="display: flex;align-items: flex-start;" name="arrow-right"></u-icon>
<u-icon style="display: flex;
align-items: flex-start;" name="arrow-right"></u-icon>
</view> </view>
<!-- 积分，优惠券，关注， --> <!-- 积分，优惠券，关注， -->
<div class="pointBox"> <div class="pointBox box">
<u-row text-align="center" gutter="16" class="point"> <u-row text-align="center" gutter="16" class="point">
<u-col text-align="center" span="4" @click="navigateTo('/pages/mine/deposit/operation')"> <u-col text-align="center" span="4" @click="navigateTo('/pages/mine/deposit/operation')">
<view>预存款</view> <view>预存款</view>
@ -37,57 +34,51 @@
<view>{{ footNum || 0 }}</view> <view>{{ footNum || 0 }}</view>
</u-col> </u-col>
</u-row> </u-row>
<!-- 我的订单，代付款 -->
<view class="order">
<view class="order-item" @click="navigateTo('/pages/order/myOrder?status=0')">
<div class="bag bag1">
<u-icon name="order" size="35" color="#fff"></u-icon>
</div>
<view>我的订单</view>
</view>
<view class="order-item" @click="navigateTo('/pages/order/myOrder?status=1')">
<div class="bag bag2">
<u-icon name="bag-fill" size="35" color="#fff"></u-icon>
</div>
<view>待付款</view>
</view>
<view class="order-item" @click="navigateTo('/pages/order/myOrder?status=3')">
<div class="bag bag3">
<u-icon name="car-fill" size="35" color="#fff"></u-icon>
</div>
<view>待收货</view>
</view>
<view class="order-item" @click="navigateTo('/pages/order/evaluate/myEvaluate')">
<div class="bag bag4">
<u-icon name="star-fill" size="35" color="#fff"></u-icon>
</div>
<view>待评价</view>
</view>
<view class="order-item" @click="navigateTo('/pages/order/afterSales/afterSales')">
<div class="bag bag5">
<u-icon name="server-fill" size="35" color="#fff"></u-icon>
</div>
<view>售后服务</view>
</view>
</view>
</div> </div>
<!-- 我的订单，代付款 -->
<view class="order">
<view class="order-item" @click="navigateTo('/pages/order/myOrder?status=0')">
<div class="bag bag1">
<u-icon name="order" size="35" color="#fff"></u-icon>
</div>
<view>我的订单</view>
</view>
<view class="order-item" @click="navigateTo('/pages/order/myOrder?status=1')">
<div class="bag bag2">
<u-icon name="bag-fill" size="35" color="#fff"></u-icon>
</div>
<view>待付款</view>
<!-- <view class="corner" v-if="cornerForm.stay_pay_order > 0">{{ cornerForm.stay_pay_order}}</view> -->
</view>
<view class="order-item" @click="navigateTo('/pages/order/myOrder?status=3')">
<div class="bag bag3">
<u-icon name="car-fill" size="35" color="#fff"></u-icon>
</div>
<view>待收货</view>
<!-- <view class="corner" v-if="cornerForm.stay_receiving_order > 0">{{ cornerForm.stay_receiving_order}}</view> -->
</view>
<view class="order-item" @click="navigateTo('/pages/order/evaluate/myEvaluate')">
<div class="bag bag4">
<u-icon name="star-fill" size="35" color="#fff"></u-icon>
</div>
<view>待评价</view>
<!-- <view class="corner" v-if="cornerForm.pending_comment_count > 0">{{ cornerForm.pending_comment_count}}</view> -->
</view>
<view class="order-item" @click="navigateTo('/pages/order/afterSales/afterSales')">
<div class="bag bag5">
<u-icon name="server-fill" size="35" color="#fff"></u-icon>
</div>
<view>售后服务</view>
<!-- <view class="corner" v-if="cornerForm.after_order > 0">{{ cornerForm.after_order}}</view> -->
</view>
</view>
<!-- 常用工具 --> <!-- 常用工具 -->
<tool /> <tool class="box" />
</view> </view>
</template> </template>
<script> <script>
import storage from "@/utils/storage.js";
import tool from "@/pages/tabbar/user/utils/tool.vue"; import tool from "@/pages/tabbar/user/utils/tool.vue";
import { getCouponsNum, getFootprintNum } from "@/api/members.js"; import { getCouponsNum, getFootprintNum } from "@/api/members.js";
import { getUserInfo, getUserWallet } from "@/api/members"; import { getUserWallet } from "@/api/members";
let startY = 0, let startY = 0,
moveY = 0, moveY = 0,
pageAtTop = true; pageAtTop = true;
@ -205,42 +196,19 @@ body {
} }
.money { .money {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.uiconRed {
position: relative;
&::before {
content: "";
background: red;
width: 10rpx;
height: 10rpx;
border-radius: 50%;
position: absolute;
right: 0;
top: 0;
}
}
.user { .user {
.status_WEIXIN {
background: $light-color;
overflow: hidden;
> .status_WEIXIN_R {
float: right;
margin-right: 20rpx;
}
> .status_WEIXIN_L {
float: left;
margin-left: 20rpx;
}
}
.header { .header {
max-width: 100%; max-width: 100%;
padding: calc(50rpx + var(--status-bar-height)) 30rpx 0 115rpx; padding: calc(50rpx + var(--status-bar-height)) 30rpx 0 6%;
height: calc(var(--status-bar-height) + 360rpx); height: calc(var(--status-bar-height) + 360rpx);
background-size: cover; background-size: cover;
border-bottom-left-radius: 20rpx; border-bottom-left-radius: 30rpx;
border-bottom-right-radius: 20rpx; border-bottom-right-radius: 30rpx;
background-image: url("/static/img/main-bg.png"); background-image: url("/static/img/main-bg.png");
background-position: bottom; background-position: bottom;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -273,14 +241,6 @@ body {
height: 100%; height: 100%;
} }
} }
.certificate {
font-size: 20rpx;
border: 1px solid #ffffff;
border-radius: 1em;
width: 91rpx;
margin: 0 auto;
}
} }
.head-2 { .head-2 {
flex: 1; flex: 1;
@ -294,25 +254,22 @@ body {
} }
} }
.pointBox { .pointBox {
transform: translateY(-30rpx);
width: 94%; width: 94%;
margin: 0 3%; margin: 0 3%;
background: #fff; background: #fff;
border-radius: 0.4em; border-radius: 20rpx;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04); box-shadow: 0 4rpx 24rpx 0 rgba($color: #f6f6f6, $alpha: 1);
height: 160rpx;
} }
.point { .point {
text-align: center; text-align: center;
height: 160rpx; height: 160rpx;
border-bottom: 1px solid $border-color-light;
color: #999;
font-size: $font-sm; font-size: $font-sm;
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
padding: 24rpx; padding: 24rpx;
// #endif // #endif
.u-col { .u-col {
line-height: 1.5em view { view {
color: $u-main-color; color: $u-main-color;
font-size: 28rpx; font-size: 28rpx;
} }
@ -340,29 +297,17 @@ body {
font-size: 48rpx; font-size: 48rpx;
margin-bottom: 10rpx; margin-bottom: 10rpx;
} }
.corner {
position: absolute;
right: 14rpx;
top: -6rpx;
width: 30rpx;
height: 30rpx;
background-color: red;
color: #fff;
border-radius: 50%;
line-height: 30rpx;
}
} }
} }
} }
.box {
transform: translateY(-30rpx);
}
.user-name { .user-name {
font-size: 34rpx; font-size: 34rpx;
} }
.nickname {
font-size: 24rpx;
}
.bag { .bag {
width: 56rpx; width: 56rpx;
height: 56rpx; height: 56rpx;

17
pages/tabbar/user/utils/tool.vue
View File

@ -2,7 +2,7 @@
<view> <view>
<!-- 常用工具 --> <!-- 常用工具 -->
<view class="interact-tools" style="margin-bottom: 15px"> <view class="interact-tools" style="margin-bottom: 15px">
<view class="interact-title">常用工具</view>
<div class="paddingBox"> <div class="paddingBox">
<view class="interact-container"> <view class="interact-container">
<view class="interact-item" @click="navigateTo('/pages/mine/signIn')"> <view class="interact-item" @click="navigateTo('/pages/mine/signIn')">
@ -117,24 +117,15 @@ export default {
border-left: none; border-left: none;
border-right: none; border-right: none;
margin-top: 30rpx; margin-top: 30rpx;
.interact-title {
background: #f2f2f2;
height: 96rpx;
line-height: 96rpx;
font-size: 28rpx;
color: #333;
font-weight: bold;
padding-left: 30rpx;
margin: 0 20rpx;
border-radius: 14rpx 14rpx 0 0;
}
.interactBox { .interactBox {
height: 156rpx; height: 156rpx;
} }
.interact-container { .interact-container {
margin: 0 20rpx; margin: 0 20rpx;
background: #fff; background: #fff;
border-radius: 0 0 14rpx 14rpx; border-radius: 20rpx;
box-shadow: 0 4rpx 24rpx 0 rgba($color: #f6f6f6, $alpha: 1);
.interact-item-img { .interact-item-img {
width: 52rpx !important; width: 52rpx !important;
height: 52rpx !important; height: 52rpx !important;