From b7ce92d35fde3704297163010c320e336a5dd681 Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期二, 13 一月 2026 10:17:16 +0800
Subject: [PATCH] 页面调整优化
---
pages/tabbar/user/my.vue | 764 ++++++++++++++++++++++++++++++++++++++--------------------
1 files changed, 495 insertions(+), 269 deletions(-)
diff --git a/pages/tabbar/user/my.vue b/pages/tabbar/user/my.vue
index eaf717e..90c3ead 100644
--- a/pages/tabbar/user/my.vue
+++ b/pages/tabbar/user/my.vue
@@ -1,159 +1,156 @@
<template>
<view class="user">
<!-- 涓汉淇℃伅 -->
- <view class="status_bar">
- <!-- 杩欓噷鏄姸鎬佹爮 -->
- </view>
- <view class="header" @click="userDetail">
- <view class="head-1">
- <image v-if="userInfo.face" :src="endpoint + '/' + userInfo.face"></image>
- <image v-else :src="userImage"></image>
+ <view class="header-wrapper" @click="userDetail"
+ :style="{ backgroundColor: '#e9cc80', backgroundImage: `url(${base64image2.userInfoBg})` }">
+ <view class="status_bar">
+ <!-- 杩欓噷鏄姸鎬佹爮 -->
</view>
- <view class="head-2" v-if="userInfo.id">
- <view class="user-name">{{ userInfo.nickName }}</view>
+ <view class="header">
+ <view class="head-1">
+ <image v-if="userInfo.face" :src="endpoint + '/' + userInfo.face"></image>
+ <image v-else :src="userImage"></image>
+ </view>
+ <view class="head-2" v-if="userInfo.id">
+ <view class="user-name">{{ userInfo.nickName }}</view>
+ <!-- <view class="member-name"> 浼氬憳鍚�: {{ userInfo.username ? userInfo.username : '鏈缃�' }}</view> -->
+ </view>
+ <view class="head-2" v-else>
+ <view class="user-name">鐧诲綍/娉ㄥ唽</view>
+ </view>
+ <u-icon style="display: flex;align-items: flex-start;" name="arrow-right"></u-icon>
</view>
- <view class="head-2" v-else>
- <view class="user-name">鐧诲綍/娉ㄥ唽</view>
- </view>
- <u-icon style="display: flex;align-items: flex-start;" name="arrow-right"></u-icon>
- </view>
- <!-- <button type="default" @click="goTOSuccess">绔嬪嵆鏌ョ湅</button> -->
- <view class="member-gradient-bg">
- <view class="member-content">
- <view class="vip-icon">
- <image src="/static/tabbar/vip.png" mode="widthFix"></image>
- </view>
- <view class="vip-info">
- <p class="vip-level">缁挎弧绛愪細鍛�</p>
- <p class="vip-validity">闀挎湡鏈夋晥</p>
- </view>
-
- <!-- 浼氬憳鏍囪瘑瑁呴グ -->
- <view class="vip-badge">
- <text class="badge-text">灏婁韩鐗规潈</text>
- </view>
- </view>
-
- </view>
- <!-- 绉垎锛屼紭鎯犲埜锛屽叧娉紝 -->
- <div class="pointBox box">
- <u-row text-align="center" gutter="16" class="point">
- <u-col text-align="center" span="4" @click="navigateTo('/pages/mine/deposit/operation')">
- <view>棰勫瓨娆�</view>
- <view class="money">{{ walletNum | unitPrice }}</view>
- </u-col>
- <u-col text-align="center" span="4" @click="navigateTo('/pages/cart/coupon/myCoupon')">
- <view>浼樻儬鍒�</view>
- <view>{{ couponNum || 0 }}</view>
- </u-col>
+ <!-- 绉垎锛屼紭鎯犲埜锛屽叧娉紝 -->
+ <div class="pointBox1">
+ <view class="point">
+ <view class="point-col" @click="navigateTo('/pages/cart/coupon/myCoupon')">
+ <view class="point-item">
+ <text class="label">浼樻儬鍒�</text>
+ <text class="value">{{ couponNum || 0 }}</text>
+ <text class="label">寮�</text>
+ </view>
+ </view>
+ <view class="point-col" @click="navigateTo('/pages/mine/deposit/operation')">
+ <view class="point-item">
+ <text class="label">浣欓</text>
+ <text class="value">{{ walletNum | unitPrice }}</text>
+ </view>
+ </view>
+ </view>
+ <!-- 鎴戠殑璁㈠崟锛屼唬浠樻 -->
+ <view class="order">
+ <view class="order-header" @click="navigateTo('/pages/order/myOrder?status=0')">
+ <view class="left">鎴戠殑璁㈠崟</view>
+ <view class="right">
+ <text>鍏ㄩ儴璁㈠崟</text>
+ <u-icon name="arrow-right" size="24" color="#999"></u-icon>
+ </view>
+ </view>
+ <view class="order-content">
+ <view class="order-item" @click="navigateTo('/pages/order/myOrder?status=1')">
+ <view class="icon-box">
+ <image src="/static/tool/寰呬粯娆�.png" mode="aspectFit"></image>
+ </view>
+ <view>寰呬粯娆�</view>
+ </view>
+ <view class="order-item" @click="navigateTo('/pages/order/myOrder?status=2')">
+ <view class="icon-box">
+ <image src="/static/tool/寰呭彂璐�.png" mode="aspectFit"></image>
+ </view>
+ <view>寰呭彂璐�</view>
+ </view>
+ <view class="order-item" @click="navigateTo('/pages/order/myOrder?status=3')">
+ <view class="icon-box">
+ <image src="/static/tool/寰呮敹璐�.png" mode="aspectFit"></image>
+ </view>
+ <view>寰呮敹璐�</view>
+ </view>
+ <view class="order-item" @click="navigateTo('/pages/order/evaluate/myEvaluate')">
+ <view class="icon-box">
+ <image src="/static/tool/璇勪环涓績.png" mode="aspectFit"></image>
+ </view>
+ <view>寰呰瘎浠�</view>
+ </view>
+ <view class="order-item" @click="navigateTo('/pages/order/afterSales/afterSales')">
+ <view class="icon-box">
+ <image src="/static/tool/鎴戠殑璁㈠崟-閫�璐鍞悗.png" mode="aspectFit"></image>
+ </view>
+ <view>鍞悗</view>
+ </view>
+ </view>
+ </view>
+ </div>
+ </view>
+ <view class="member-gradient-bg" v-if="prizeActivity.enableStatus === 'ON'"
+ :style="{ backgroundImage: `url(${base64image.prizeActivityBg})` }">
+ <view class="member-gradient-bg" @click="gotoPrizeActivity">
+ </view>
+ </view>
- <u-col text-align="center" span="4" @click="navigateTo('/pages/mine/myTracks')">
- <view>瓒宠抗</view>
- <view>{{ footNum || 0 }}</view>
- </u-col>
- </u-row>
- <!-- 鎴戠殑璁㈠崟锛屼唬浠樻 -->
- <view class="order">
- <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>
+
+ <!-- 瑙嗛鐩稿叧锛� -->
+ <!-- <div class="pointBox box" style="margin-top: 20rpx;">
+ <view class="order-content">
+ <view class="order-item" @click="jumpToVideoHome()">
+ <view class="icon-box">
+ <text class="iconfont"></text>
+ </view>
+ <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 class="order-item" @click="navigateTo('/pages/mine/myAttention')">
+ <view class="icon-box">
+ <image src="/static/mine/myfavorite.png" mode="aspectFit"></image>
+ </view>
+ <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 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 class="order-item" @click="navigateTo('/pages/mine/activity/myActivity')">
+ <view class="icon-box">
+ <image src="/static/mine/prize-activity.png" mode="aspectFit"></image>
+ </view>
+ <view>鎴戠殑娲诲姩</view>
</view>
</view>
- </div>
-
- <!-- 瑙嗛鐩稿叧锛� -->
- <div class="pointBox box" style="margin-top: 20rpx;">
- <view class="order">
- <view class="order-item" @click="jumpToVideoHome()">
- <view>
- <text class="iconfont"></text>
- </view>
- <view>瑙嗛涓婚〉</view>
- </view>
- <view class="order-item" @click="navigateTo('/pages/mine/myAttention')">
- <view>
- <text class="iconfont"></text>
- </view>
- <view>鍏虫敞鍒楄〃</view>
- </view>
-<!-- <view class="order-item" @click="navigateTo('/pages/mine/myCollect/myCollect')">
- <view>
- <text class="iconfont"></text>
- </view>
- <view>鏀惰棌鍒楄〃</view>
- </view -->
- <view class="order-item" @click="navigateTo('/pages/mine/activity/myActivity')">
- <view>
- <text class="iconfont"></text>
- </view>
- <view>鎴戠殑娲诲姩</view>
- </view>
- <view class="order-item" @click="navigateTo('/pages/mine/myTracks')">
- <view>
- <text class="iconfont"></text>
- </view>
- <view>娴忚璁板綍</view>
- </view>
- </view>
- </div>
-
+ </div> -->
+
<!-- 甯哥敤宸ュ叿 -->
- <view class="pointBox box" style="margin-top: 20rpx;">
- <tool />
- </view>
+ <view class="pointBox box" style="margin-top: 20rpx;">
+ <tool />
+ </view>
<!-- 鎾戣捣涓嬫柟 -->
- <view style="height:64px;">
-
- </view>
- <custom-tabbar bgColor="#ffffff" selected="my"></custom-tabbar>
-
+ <view style="height:64px;">
+
+ </view>
+ <custom-tabbar bgColor="#ffffff" selected="my"></custom-tabbar>
+
</view>
</template>
<script>
import '@/pages/subComponents/uview-components/uview-ui';
import tool from "@/pages/tabbar/user/utils/tool.vue";
import { getSTSToken } from "@/api/common.js";
-import { getCouponsNum, getFootprintNum,bindMemberAndStore } from "@/api/members.js";
+import { getCouponsNum, getFootprintNum, bindMemberAndStore } from "@/api/members.js";
import { getUserWallet } from "@/api/members";
import configs from '@/config/config'
import storage from '@/utils/storage.js'
import { getSessionId, userAction } from "@/api/userAction.js";
+import { getONPrizeActivity } from "@/api/prize-activity";
+import UIcon from "../../subComponents/uview-components/uview-ui/components/u-icon/u-icon.vue";
+import base64image from '@/static/mine/base64image.js';
+import base64image2 from '@/static/mine/base64image2.js';
export default {
components: {
+ UIcon,
tool
},
data() {
return {
- endpoint: '',
+ base64image,
+ base64image2,
+ prizeActivity: {},
+ endpoint: '',
configs,
- userImage:configs.defaultUserPhoto,
+ userImage: configs.defaultUserPhoto,
coverTransform: "translateY(0px)",
coverTransition: "0s",
moving: false,
@@ -161,19 +158,20 @@
couponNum: "",
footNum: "",
walletNum: "",
- pageSessionNo:"",
- actionParam:{
- sessionId:'',
- actionType:"PAGE",
- joinType:"SELF",
- pageCode:"TBA_BAR_MY",
- pageParams:"{}",
- pageStatus:"JOIN",
- pageType:"DETAIL"
- }
+ pageSessionNo: "",
+ actionParam: {
+ sessionId: '',
+ actionType: "PAGE",
+ joinType: "SELF",
+ pageCode: "TBA_BAR_MY",
+ pageParams: "{}",
+ pageStatus: "JOIN",
+ pageType: "DETAIL"
+ }
};
},
onLoad(option) {
+ this.actionParam.pageParams = JSON.stringify(option)
console.log('-----------鍒嗕韩鍑虹殑鏁版嵁---------->', option)
let shareStoreId = null;
let shareTime = null;
@@ -205,45 +203,38 @@
} catch (e) {
console.error('瀛樺偍澶辫触锛�', e);
}
- }else{
- shareStoreId = uni.getStorageSync('shareStoreId');
- shareStoreId = uni.getStorageSync('shareTime');
- console.log('浠庣紦瀛樿鍙栧弬鏁�:', { shareStoreId, shareTime });
- // this.bindMemberAndStore(shareStoreId, shareTime)
- if (shareStoreId && shareTime) {
- console.log('妫�娴嬪埌鏈夋晥鍙傛暟锛岃皟鐢ㄥ悗绔帴鍙�');
- this.bindMemberAndStore(shareStoreId, shareTime);
- } else {
- console.log('鏃犳湁鏁堝弬鏁帮紝鎵ц姝ｅ父閫昏緫');
- }
}
this.initCOS()
+ },
onUnload() {
- let param = this.actionParam;
- if (this.sendOnShow)return
+ let param = Object.assign({}, this.actionParam);
+ if (this.sendOnShow) return
param.pageStatus = "LEAVE"
userAction(param)
},
onHide() {
this.startHidenTime = Date.now()
- let param = this.actionParam;
+ let param = Object.assign({}, this.actionParam);
this.sendOnShow = true;
param.pageStatus = "LEAVE"
userAction(param)
},
- onLoad(options) {
- this.actionParam.pageParams = JSON.stringify(options)
- this.initCOS()
- },
+ // onLoad(options) {
+ //
+ // this.initCOS()
+ // },
onShow() {
- getSessionId().then(res=>{
- this.pageSessionNo = res.data.data
- if(this.pageSessionNo){
- let param = this.actionParam;
- param.sessionId = this.pageSessionNo
- userAction(param)
- }
- })
+ this.getONPrizeActivity();
+ getSessionId().then(res => {
+ this.pageSessionNo = res.data.data
+ this.actionParam.sessionId = res.data.data
+ if (this.pageSessionNo) {
+ let param = Object.assign({}, this.actionParam);
+ param.sessionId = this.pageSessionNo
+ userAction(param)
+ }
+ })
+
this.userInfo = this.$options.filters.isLogin() || {};
if (this.$options.filters.isLogin("auth")) {
this.getUserOrderNum();
@@ -252,10 +243,21 @@
this.couponNum = 0;
this.footNum = 0;
}
+
+ let shareStoreId = uni.getStorageSync('shareStoreId');
+ let shareTime = uni.getStorageSync('shareTime');
+ console.log('浠庣紦瀛樿鍙栧弬鏁�:', { shareStoreId, shareTime });
+ if (shareStoreId && shareTime) {
+ console.log('妫�娴嬪埌鏈夋晥鍙傛暟锛岃皟鐢ㄥ悗绔帴鍙�');
+ this.bindMemberAndStore(shareStoreId, shareTime);
+ } else {
+ console.log('鏃犳湁鏁堝弬鏁帮紝鎵ц姝ｅ父閫昏緫');
+ }
},
onPullDownRefresh() {
this.getUserOrderNum();
this.userInfo = this.$options.filters.isLogin();
+ this.getONPrizeActivity(); // 涓嬫媺鍒锋柊鍚屾鏈�鏂版椿鍔ㄧ姸鎬�
},
// #ifndef MP
onNavigationBarButtonTap(e) {
@@ -268,8 +270,50 @@
mounted() { },
methods: {
- async bindMemberAndStore(shareStoreId, shareTime){
- let form ={
+ formatDate(isoTime) {
+ if (!isoTime) return '';
+ const date = new Date(isoTime);
+ const year = date.getFullYear();
+ const month = String(date.getMonth() + 1).padStart(2, '0');
+ const day = String(date.getDate()).padStart(2, '0');
+ return `${year}骞�${month}鏈�${day}鏃; // 杞崲涓轰腑鏂囨牸寮�
+ },
+ getONPrizeActivity() {
+ getONPrizeActivity().then(res => {
+ if (res.statusCode === 200) {
+ //鍚庣娌℃煡鍒板紑鍚殑鎶藉娲诲姩 res.data.data.id鍊间负null
+ this.prizeActivity = res.data.data; // 瀛樺偍瀹屾暣娲诲姩鏁版嵁
+ if (this.prizeActivity.endTime) {
+ } else {
+ this.prizeActivity = {}; // 鏃犳椿鍔ㄦ椂娓呯┖
+ }
+ }
+ })
+ },
+ gotoPrizeActivity() {
+ uni.navigateTo({
+ url: '/pages/prize/PrizeDetail/PrizeDetail?id=' + this.prizeActivity.id,
+ });
+ },
+ // 瑙ｆ瀽URL鍙傛暟
+ parseUrlParams(url) {
+ const params = {};
+ // 澶勭悊鍙兘瀛樺湪鐨刪ash锛堝鏋滄湁鐨勮瘽锛�
+ const cleanUrl = url.split('#')[0];
+ const queryStr = cleanUrl.split('?')[1] || '';
+
+ queryStr.split('&').forEach(pair => {
+ const [key, value] = pair.split('=');
+ if (key) {
+ // 濡傛灉鍊煎瓨鍦紝鍒欒В鐮侊紝鍚﹀垯璁句负绌哄瓧绗︿覆
+ params[key] = value ? decodeURIComponent(value) : '';
+ }
+ });
+
+ return params;
+ },
+ async bindMemberAndStore(shareStoreId, shareTime) {
+ let form = {
shareStoreId: shareStoreId,
shareTime: shareTime
}
@@ -279,36 +323,36 @@
// }
try {
const res = await bindMemberAndStore(form);
- if(res.statusCode === 200){
+ if (res.statusCode === 200) {
//娓呴櫎缂撳瓨
uni.removeStorageSync('shareStoreId');
uni.removeStorageSync('shareTime');
}
}
- catch(error) {
+ catch (error) {
console.error('鍑洪敊:', error);
};
},
- // goTOSuccess(){
- // uni.redirectTo({
- // url:"/pages/cart/payment/success?paymentMethod=WECHAT" +
- // "&payPrice=" +
- // 10,
- // });
- // },
- // 鍒濆鍖栬吘璁簯cos瀹㈡埛绔�
- initCOS() {
- // 璋冪敤鍚庣鑾峰彇sts涓存椂璁块棶鍑瘉
- getSTSToken().then(res => {
- this.endpoint = res.data.data.endpoint
- })
- },
- // 璺宠浆瑙嗛涓婚〉
- jumpToVideoHome() {
- uni.navigateTo({
- url: '/pages/video/home-page?authorId=' + storage.getUserInfo().id
- });
- },
+ // goTOSuccess(){
+ // uni.redirectTo({
+ // url:"/pages/cart/payment/success?paymentMethod=WECHAT" +
+ // "&payPrice=" +
+ // 10,
+ // });
+ // },
+ // 鍒濆鍖栬吘璁簯cos瀹㈡埛绔�
+ initCOS() {
+ // 璋冪敤鍚庣鑾峰彇sts涓存椂璁块棶鍑瘉
+ getSTSToken().then(res => {
+ this.endpoint = res.data.data.endpoint
+ })
+ },
+ // 璺宠浆瑙嗛涓婚〉
+ jumpToVideoHome() {
+ uni.navigateTo({
+ url: '/pages/video/home-page?authorId=' + storage.getUserInfo().id
+ });
+ },
/**
* 缁熶竴璺宠浆鎺ュ彛,鎷︽埅鏈櫥褰曡矾鐢�
* navigator鏍囩鐜板湪榛樿娌℃湁杞満鍔ㄧ敾锛屾墍浠ョ敤view
@@ -341,25 +385,150 @@
</script>
<style lang="scss" scoped>
- @import url("/pages/subComponents/static/bgStyle.css");
+@import url("/pages/subComponents/static/bgStyle.css");
+
html,
body {
overflow: auto;
}
-
-.member-gradient-bg {
- width: 98%;
- height: 250rpx;
- margin: 1% 1%;
- background: linear-gradient(135deg, #FF7A45 0%, #FF5252 100%);
- border-radius: 24rpx;
- box-shadow: 0 8rpx 30rpx rgba(255, 82, 82, 0.3);
- transition: all 0.3s ease;
-
- &:active {
- transform: scale(0.98);
- }
+
+.floating-btn-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ z-index: 1;
+ position: relative;
}
+
+.floating-btn-icon {
+ font-size: 75rpx;
+ color: white;
+ filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
+ margin-bottom: 5rpx;
+}
+
+.floating-btn-text {
+ font-size: 20rpx;
+ color: white;
+ z-index: 1;
+ position: relative;
+ text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.2);
+ white-space: nowrap;
+}
+
+.member-gradient-bg {
+ width: 98%;
+ height: 250rpx;
+ margin: 1% 1%;
+ border-radius: 24rpx;
+ box-shadow: 0 8rpx 30rpx rgba(255, 82, 82, 0.3);
+ transition: all 0.3s ease;
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+
+ &:active {
+ transform: scale(0.98);
+ }
+
+ cursor: pointer; // 澧炲姞鐐瑰嚮鎸囬拡鏍峰紡
+ overflow: hidden; // 闃叉鍐呭婧㈠嚭
+
+ .activity-content {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ padding: 0 40rpx;
+ box-sizing: border-box;
+ }
+
+ // 娲诲姩鍥炬爣
+ .activity-icon {
+ width: 130rpx;
+ height: 130rpx;
+ margin-right: 24rpx;
+ border-radius: 16rpx;
+ overflow: hidden;
+
+ image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+ }
+
+ // 娲诲姩淇℃伅鍖哄煙
+ .activity-info {
+ flex: 1;
+
+ .activity-name {
+ font-size: 32rpx;
+ font-weight: bold;
+ color: #fff;
+ margin: 0 0 8rpx 0;
+ text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
+ }
+
+ .activity-desc {
+ font-size: 22rpx;
+ color: rgba(255, 255, 255, 0.9);
+ margin: 0;
+ }
+ }
+
+ // 鍊掕鏃舵牱寮�
+ .activity-countdown {
+ display: flex;
+ align-items: center;
+ margin-top: 12rpx;
+
+ .countdown-label {
+ font-size: 20rpx;
+ color: rgba(255, 255, 255, 0.8);
+ margin-right: 8rpx;
+ }
+
+ .countdown-box {
+ display: flex;
+ align-items: center;
+ }
+
+ .countdown-item {
+ display: inline-block;
+ width: 36rpx;
+ height: 36rpx;
+ line-height: 36rpx;
+ background: rgba(255, 255, 255, 0.3);
+ border-radius: 8rpx;
+ color: #fff;
+ font-size: 20rpx;
+ text-align: center;
+ margin: 0 4rpx;
+ }
+
+ .countdown-sep {
+ color: #fff;
+ font-size: 22rpx;
+ margin: 0 4rpx;
+ }
+ }
+
+ // 绔嬪嵆鍙備笌鍏ュ彛
+ .activity-enter {
+ display: flex;
+ align-items: center;
+
+ .enter-text {
+ font-size: 24rpx;
+ color: #fff;
+ margin-right: 8rpx;
+ font-weight: 500;
+ }
+ }
+}
+
/* 鍐呭鍖哄煙 */
.member-content {
width: 100%;
@@ -369,9 +538,11 @@
padding: 0 40rpx;
box-sizing: border-box;
}
+
/* 浼氬憳淇℃伅 */
.vip-info {
flex: 1;
+
.vip-level {
font-size: 40rpx;
font-weight: bold;
@@ -380,7 +551,7 @@
line-height: 1;
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}
-
+
.vip-validity {
font-size: 26rpx;
color: rgba(255, 255, 255, 0.9);
@@ -404,6 +575,7 @@
width: 60rpx;
height: 60rpx;
}
+
/* 鐗规潈鏍囪瘑 */
.vip-badge {
padding: 8rpx 20rpx;
@@ -425,34 +597,37 @@
}
.user {
- background: #e7e7e7;
+ background: #e7e7e7;
+
+ .header-wrapper {
+ background-size: 100% auto;
+ background-repeat: no-repeat;
+ background-position: bottom;
+ }
+
.header {
max-width: 100%;
- padding: calc(50rpx + var(--status-bar-height)) 30rpx 0 6%;
- height: calc(360rpx);
- background-size: cover;
- border-bottom-left-radius: 30rpx;
- border-bottom-right-radius: 30rpx;
- background-image: var(--main-bg);
- background-position: bottom;
- background-repeat: no-repeat;
- color: #ffffff;
+ padding: 100rpx 30rpx 0 5%;
display: flex;
justify-content: space-between;
+ box-sizing: border-box;
+ position: relative;
+ overflow: hidden;
.head-1 {
text-align: center;
- width: 152rpx;
+ width: 140rpx;
position: relative;
display: flex;
align-items: center;
+ margin-top: 20rpx;
image {
- width: 152rpx;
- height: 144rpx;
+ width: 140rpx;
+ height: 140rpx;
border-radius: 50%;
- margin-bottom: 30rpx;
border: 3px solid #fff;
+ box-sizing: border-box;
}
.edti-head {
@@ -485,30 +660,52 @@
}
.point {
- text-align: center;
- height: 160rpx;
+ width: 100%;
+ height: 120rpx;
+ display: flex;
+ align-items: center;
- font-size: $font-sm;
- // #ifdef MP-WEIXIN
- padding: 24rpx;
+ .point-col {
+ flex: 1;
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
- // #endif
- .u-col {
- view {
- color: $u-main-color;
- font-size: 28rpx;
+ &:not(:last-child)::after {
+ content: "";
+ position: absolute;
+ left: 100%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ height: 40rpx;
+ width: 1rpx;
+ background-color: #ccc;
}
- view:last-child {
- margin-top: 8rpx;
- color: $main-color;
- font-size: $font-lg;
+ .point-item {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: baseline;
+
+ .value {
+ color: #1f1b13;
+ font-size: 34rpx;
+ font-weight: bold;
+ margin: 0 20rpx 0 20rpx;
+ }
+
+ .label {
+ color: #999;
+ font-size: 24rpx;
+ }
}
}
}
- .order {
- height: 140rpx;
+ .order-content {
+ height: 160rpx;
text-align: center;
font-size: $font-sm;
display: flex;
@@ -516,62 +713,91 @@
align-items: center;
padding: 0 3%;
color: #666;
+
+ .order-item {
+ position: relative;
+ line-height: 1.5;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+ .icon-box {
+ width: 60rpx;
+ height: 60rpx;
+ margin-bottom: 10rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ image {
+ width: 100%;
+ height: 100%;
+ }
+ }
+ }
+ }
+
+ .order {
background: #fff;
border-radius: 20rpx;
box-shadow: 0 4rpx 24rpx 0 #f6f6f6;
margin: 0 20rpx;
-
- .order-item {
- position: relative;
- line-height: 2em;
- width: 96rpx;
+ padding-bottom: 20rpx;
- :first-child {
- font-size: 48rpx;
- margin-bottom: 12rpx;
+ .order-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 30rpx 30rpx 10rpx 30rpx;
+
+ .left {
+ font-size: 32rpx;
+ font-weight: bold;
color: #333;
+ }
+
+ .right {
+ display: flex;
+ align-items: center;
+ font-size: 24rpx;
+ color: #999;
+
+ text {
+ margin-right: 4rpx;
+ }
}
}
}
}
+.pointBox1 {
+ position: relative;
+ z-index: 10;
+ background: #f5f5f5;
+ border-radius: 40rpx 40rpx 0 0;
+ box-shadow: 0 -4rpx 24rpx 0 rgba(0, 0, 0, 0.05);
+ margin-top: 40rpx;
+}
+
.box {
- width: 95%;
- margin: auto;
- background: #fff;
- border-radius: 20rpx;
- box-shadow: 0 4rpx 24rpx 0 #f6f6f6;
+ width: 95%;
+ margin: auto;
+ background: #fff;
+ border-radius: 20rpx;
+ box-shadow: 0 4rpx 24rpx 0 #f6f6f6;
}
.user-name {
font-size: 34rpx;
+ font-weight: bolder;
+ color: #1f1b13;
}
-.bag {
- width: 56rpx;
- height: 56rpx;
- border-radius: 50%;
- margin: 0 auto;
-}
-
-.bag1 {
- background: #ff4a48;
-}
-
-.bag2 {
- background: #ff992f;
-}
-
-.bag3 {
- background: #009ee0;
-}
-
-.bag4 {
- background: #00d5d5;
-}
-
-.bag5 {
- background: #28ccb0;
+.member-name {
+ margin-top: 25rpx;
+ font-size: 28rpx;
+ color: #8d867a;
}
</style>
--
Gitblit v1.8.0