|
|
@@ -6,17 +6,17 @@
|
|
|
<view class="dis ">
|
|
|
<view class="avatar">
|
|
|
<image
|
|
|
- :src="userInfo.sysUser.headSculpture? userInfo.sysUser.headSculpture :'/static/image/avatar.png'"
|
|
|
+ :src="userInfo.sysUser.headSculpture ? userInfo.sysUser.headSculpture : '/static/image/avatar.png'"
|
|
|
mode="">
|
|
|
</image>
|
|
|
</view>
|
|
|
<view class="relatedInfo dis f-c ">
|
|
|
<view class="title dis a-c mb-1">
|
|
|
- <text>{{this.userInfo.sysUser.name}}</text>
|
|
|
+ <text>{{ this.userInfo.sysUser.name }}</text>
|
|
|
<image src="/static/image/my/tag1.png" mode=""></image>
|
|
|
<image src="/static/image/my/tag2.png" mode=""></image>
|
|
|
</view>
|
|
|
- <text>{{this.userInfo.sysUser.deptName || '暂无机构'}}</text>
|
|
|
+ <text>{{ this.userInfo.sysUser.deptName || '暂无机构' }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<image class="edit mt-1 mr-1" src="/static/icon/my/icon9.png" mode=""></image>
|
|
|
@@ -28,17 +28,17 @@
|
|
|
<view class="balance dis j-s a-c">
|
|
|
<view class="item dis f-c a-c">
|
|
|
<text>余额(元)</text>
|
|
|
- <text>{{walletInfo.walletBalanceRemoveWithdraw}}</text>
|
|
|
+ <text>{{ walletInfo.walletBalanceRemoveWithdraw }}</text>
|
|
|
</view>
|
|
|
<u-line length="35" color="#EEEEEE" direction="col" :hairline="false"></u-line>
|
|
|
<view class="item dis f-c a-c">
|
|
|
<text>提现中(元)</text>
|
|
|
- <text>{{walletInfo.withdrawingBalance}}</text>
|
|
|
+ <text>{{ walletInfo.withdrawingBalance }}</text>
|
|
|
</view>
|
|
|
<u-line length="35" color="#EEEEEE" direction="col" :hairline="false"></u-line>
|
|
|
<view class="item dis f-c a-c">
|
|
|
<text>积分</text>
|
|
|
- <text>{{walletInfo.integral}}</text>
|
|
|
+ <text>{{ walletInfo.integral }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -51,42 +51,42 @@
|
|
|
<text class="title">我的业绩</text>
|
|
|
<view class="totalPremium dis f-c a-c j-end">
|
|
|
<text>签单保费(元)</text>
|
|
|
- <text>{{walletInfo.signPremium}}</text>
|
|
|
+ <text>{{ walletInfo.signPremium }}</text>
|
|
|
<view class="tag"></view>
|
|
|
<view class="tag2"></view>
|
|
|
</view>
|
|
|
<view class="Details dis a-c j-s">
|
|
|
<view class="item">
|
|
|
- <text>{{walletInfo.orderCount}}</text>
|
|
|
+ <text>{{ walletInfo.orderCount }}</text>
|
|
|
<text>车险订单(笔)</text>
|
|
|
</view>
|
|
|
<view class="item">
|
|
|
- <text>{{walletInfo.totalIncome}}</text>
|
|
|
+ <text>{{ walletInfo.totalIncome }}</text>
|
|
|
<text>累计收入(元)</text>
|
|
|
</view>
|
|
|
<view class="item">
|
|
|
- <text>{{walletInfo.totalInviteCount}}</text>
|
|
|
+ <text>{{ walletInfo.totalInviteCount }}</text>
|
|
|
<text>累计邀请(人)</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 工具 -->
|
|
|
<view class="myTools mt-2">
|
|
|
- <view class="toolsItem dis f-c a-c j-c" v-for="(item,index) in ToolsList" :key="index"
|
|
|
+ <view class="toolsItem dis f-c a-c j-c" v-for="(item, index) in ToolsList" :key="index"
|
|
|
@click="toolClick(item)">
|
|
|
<image :src="item.icon" mode=""></image>
|
|
|
- <text>{{item.text}}</text>
|
|
|
+ <text>{{ item.text }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class=" mt-2 ">
|
|
|
<uni-Cell :celllist="celllist" round="20rpx">
|
|
|
<template #customContent="{ item }">
|
|
|
- <view v-if="item.title=='新版本'" class="dis a-c customContent">
|
|
|
+ <view v-if="item.title == '新版本'" class="dis a-c customContent">
|
|
|
<template v-if="hasUpdate">
|
|
|
<view class="newtag dis a-c j-c">
|
|
|
New
|
|
|
</view>
|
|
|
- <text style="font-size: 28rpx;color: #666;">{{version || '1.0.0'}}</text>
|
|
|
+ <text style="font-size: 28rpx;color: #666;">{{ version || '1.0.0' }}</text>
|
|
|
</template>
|
|
|
</view>
|
|
|
</template>
|
|
|
@@ -99,440 +99,449 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import appUpdate from "@/components/yzhua006-update/app-update.vue"; //app更新组件
|
|
|
- import {
|
|
|
- mapState,
|
|
|
- mapMutations
|
|
|
- } from "vuex"
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- appUpdate,
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- version: "", //版本
|
|
|
- dateShow: false,
|
|
|
- hasUpdate: false, //有无更新
|
|
|
- ToolsList: [{
|
|
|
- text: "邀请码",
|
|
|
- url: "/pages/tool/invitationCode",
|
|
|
- icon: "/static/icon/my/icon1.png",
|
|
|
- },
|
|
|
- {
|
|
|
- text: "分销中心",
|
|
|
- url: "/pages/tool/distributionCenter",
|
|
|
- icon: "/static/icon/my/icon2.png",
|
|
|
- },
|
|
|
- {
|
|
|
- text: "订单管理",
|
|
|
- url: "",
|
|
|
- icon: "/static/icon/my/icon3.png",
|
|
|
- },
|
|
|
- {
|
|
|
- text: "保单查询",
|
|
|
- url: "",
|
|
|
- icon: "/static/icon/my/icon4.png",
|
|
|
- },
|
|
|
- {
|
|
|
- text: "自主报案",
|
|
|
- url: "/pages/tool/selfReport",
|
|
|
- icon: "/static/icon/my/icon5.png",
|
|
|
- },
|
|
|
- {
|
|
|
- text: "海报管理",
|
|
|
- url: "/pages/tool/poster",
|
|
|
- icon: "/static/icon/my/icon6.png",
|
|
|
- },
|
|
|
- {
|
|
|
- text: "佣金测算",
|
|
|
- url: "",
|
|
|
- icon: "/static/icon/my/icon7.png",
|
|
|
- },
|
|
|
- {
|
|
|
- text: "帮助与客服",
|
|
|
- url: "/pages/tool/helpAndSupport",
|
|
|
- icon: "/static/icon/my/icon8.png",
|
|
|
- },
|
|
|
-
|
|
|
- ],
|
|
|
- celllist: [{
|
|
|
- title: "设置",
|
|
|
- icon: "/static/icon/my/icon10.png",
|
|
|
- useSlot: false, //是否插槽,
|
|
|
- url: "/pages/set/set",
|
|
|
- clickType: 'navigate',
|
|
|
- },
|
|
|
- {
|
|
|
- title: "新版本",
|
|
|
- icon: "/static/icon/my/icon11.png",
|
|
|
- useSlot: true,
|
|
|
- url: "/pages/quote/quoteInfo",
|
|
|
- clickType: 'checkVersion',
|
|
|
-
|
|
|
- }, {
|
|
|
- title: "关于我们",
|
|
|
- icon: "/static/icon/my/icon12.png",
|
|
|
- useSlot: false,
|
|
|
- url: "/pages/set/aboutSet",
|
|
|
- clickType: 'navigate',
|
|
|
- }
|
|
|
- ],
|
|
|
- walletInfo: {},
|
|
|
- }
|
|
|
- },
|
|
|
- async onLoad() {
|
|
|
-
|
|
|
- // #ifdef APP-PLUS
|
|
|
- plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {
|
|
|
- this.version = widgetInfo.version;
|
|
|
- })
|
|
|
- setTimeout(() => {
|
|
|
- this.$refs.app_update.update(); //调用子组件检查更新方法
|
|
|
- }, 500)
|
|
|
- // #endif
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- this.getUserInfo();
|
|
|
- this.userPerformance();
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState(['userInfo']),
|
|
|
- },
|
|
|
- methods: {
|
|
|
- updateStatus(item) {
|
|
|
- this.hasUpdate = item;
|
|
|
+import appUpdate from "@/components/yzhua006-update/app-update.vue"; //app更新组件
|
|
|
+import {
|
|
|
+ mapState,
|
|
|
+ mapMutations
|
|
|
+} from "vuex"
|
|
|
+import store from '@/store';
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ appUpdate,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ version: "", //版本
|
|
|
+ dateShow: false,
|
|
|
+ hasUpdate: false, //有无更新
|
|
|
+ ToolsList: [{
|
|
|
+ text: "邀请码",
|
|
|
+ url: "/pages/tool/invitationCode",
|
|
|
+ icon: "/static/icon/my/icon1.png",
|
|
|
},
|
|
|
- //我的业绩
|
|
|
- async userPerformance() {
|
|
|
- let res = await this.$http.get('/userAccount/userWallet'); //获取钱包信息
|
|
|
- if (res.code == '200') {
|
|
|
- this.walletInfo = res.data;
|
|
|
- }
|
|
|
+ {
|
|
|
+ text: "分销中心",
|
|
|
+ url: "/pages/tool/distributionCenter",
|
|
|
+ icon: "/static/icon/my/icon2.png",
|
|
|
},
|
|
|
- async getUserInfo() {
|
|
|
- let res = await this.$http.get('/appUser/userInfoGet'); //获取人员信息
|
|
|
- if (res.code == '200') {
|
|
|
-
|
|
|
- }
|
|
|
+ {
|
|
|
+ text: "订单管理",
|
|
|
+ url: "",
|
|
|
+ icon: "/static/icon/my/icon3.png",
|
|
|
},
|
|
|
- //个人信息
|
|
|
- checkInfo() {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/my/userInfo'
|
|
|
- })
|
|
|
+ {
|
|
|
+ text: "保单查询",
|
|
|
+ url: "",
|
|
|
+ icon: "/static/icon/my/icon4.png",
|
|
|
},
|
|
|
- //工具跳转
|
|
|
- toolClick(item) {
|
|
|
- uni.navigateTo({
|
|
|
- url: item.url,
|
|
|
- })
|
|
|
+ {
|
|
|
+ text: "自主报案",
|
|
|
+ url: "/pages/tool/selfReport",
|
|
|
+ icon: "/static/icon/my/icon5.png",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "海报管理",
|
|
|
+ url: "/pages/tool/poster",
|
|
|
+ icon: "/static/icon/my/icon6.png",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "佣金测算",
|
|
|
+ url: "",
|
|
|
+ icon: "/static/icon/my/icon7.png",
|
|
|
},
|
|
|
- //跳转钱包
|
|
|
- walletBalance() {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/wallet/myWallet?info=' + JSON.stringify(this.walletInfo)
|
|
|
+ {
|
|
|
+ text: "帮助与客服",
|
|
|
+ url: "/pages/tool/helpAndSupport",
|
|
|
+ icon: "/static/icon/my/icon8.png",
|
|
|
+ },
|
|
|
+
|
|
|
+ ],
|
|
|
+ celllist: [{
|
|
|
+ title: "设置",
|
|
|
+ icon: "/static/icon/my/icon10.png",
|
|
|
+ useSlot: false, //是否插槽,
|
|
|
+ url: "/pages/set/set",
|
|
|
+ clickType: 'navigate',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "新版本",
|
|
|
+ icon: "/static/icon/my/icon11.png",
|
|
|
+ useSlot: true,
|
|
|
+ url: "/pages/quote/quoteInfo",
|
|
|
+ clickType: 'checkVersion',
|
|
|
+
|
|
|
+ }, {
|
|
|
+ title: "关于我们",
|
|
|
+ icon: "/static/icon/my/icon12.png",
|
|
|
+ useSlot: false,
|
|
|
+ url: "/pages/set/aboutSet",
|
|
|
+ clickType: 'navigate',
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ walletInfo: {},
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async onLoad() {
|
|
|
+
|
|
|
+ // #ifdef APP-PLUS
|
|
|
+ plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {
|
|
|
+ this.version = widgetInfo.version;
|
|
|
+ })
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$refs.app_update.update(); //调用子组件检查更新方法
|
|
|
+ }, 500)
|
|
|
+ // #endif
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.getUserInfo();
|
|
|
+ this.userPerformance();
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['userInfo']),
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ updateStatus(item) {
|
|
|
+ this.hasUpdate = item;
|
|
|
+ },
|
|
|
+ //我的业绩
|
|
|
+ async userPerformance() {
|
|
|
+ let res = await this.$http.get('/userAccount/userWallet'); //获取钱包信息
|
|
|
+ if (res.code == '200') {
|
|
|
+ this.walletInfo = res.data;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async getUserInfo() {
|
|
|
+ let res = await this.$http.get('/appUser/userInfoGet'); //获取人员信息
|
|
|
+ if (res.code == '200') {
|
|
|
+ store.commit('setUserModules', { //用户信息
|
|
|
+ title: 'userInfo',
|
|
|
+ data: {
|
|
|
+ sysUser: {
|
|
|
+ ...res.data
|
|
|
+ }
|
|
|
+ }
|
|
|
})
|
|
|
}
|
|
|
+ },
|
|
|
+ //个人信息
|
|
|
+ checkInfo() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/my/userInfo'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //工具跳转
|
|
|
+ toolClick(item) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: item.url,
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //跳转钱包
|
|
|
+ walletBalance() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/wallet/myWallet?info=' + JSON.stringify(this.walletInfo)
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .page {
|
|
|
- background-color: #F8F8F8;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .header {
|
|
|
- width: 100%;
|
|
|
- height: 420rpx;
|
|
|
- background: white;
|
|
|
- background-image: url('../../static/image/my/bg1.png');
|
|
|
- background-size: 100% 100%;
|
|
|
- aspect-ratio: 25 / 14;
|
|
|
- padding: 176rpx 30rpx 0;
|
|
|
- box-sizing: border-box;
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- z-index: 999;
|
|
|
+.page {
|
|
|
+ background-color: #F8F8F8;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.header {
|
|
|
+ width: 100%;
|
|
|
+ height: 420rpx;
|
|
|
+ background: white;
|
|
|
+ background-image: url('../../static/image/my/bg1.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ aspect-ratio: 25 / 14;
|
|
|
+ padding: 176rpx 30rpx 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 999;
|
|
|
+
|
|
|
+ //头部信息
|
|
|
+ .person {
|
|
|
+ .avatar {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 4rpx solid #fff;
|
|
|
+ margin-left: 7rpx;
|
|
|
|
|
|
- //头部信息
|
|
|
- .person {
|
|
|
- .avatar {
|
|
|
- width: 80rpx;
|
|
|
- height: 80rpx;
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
border-radius: 50%;
|
|
|
- border: 4rpx solid #fff;
|
|
|
- margin-left: 7rpx;
|
|
|
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- border-radius: 50%;
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .relatedInfo {
|
|
|
- color: #1F1F1F;
|
|
|
- margin-left: 25rpx;
|
|
|
-
|
|
|
- .title {
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: bold;
|
|
|
-
|
|
|
- image:nth-child(2) {
|
|
|
- width: 95rpx;
|
|
|
- height: 40rpx;
|
|
|
- margin: 0 10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- image:nth-child(3) {
|
|
|
- width: 62rpx;
|
|
|
- height: 26rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- >text {
|
|
|
- font-size: 22rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .edit {
|
|
|
- width: 30rpx;
|
|
|
- height: 30rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- //钱包
|
|
|
- .walletContent {
|
|
|
- width: 100%;
|
|
|
- height: 207rpx;
|
|
|
- position: relative;
|
|
|
+ .relatedInfo {
|
|
|
+ color: #1F1F1F;
|
|
|
+ margin-left: 25rpx;
|
|
|
|
|
|
.title {
|
|
|
- width: 180rpx;
|
|
|
- height: 105rpx;
|
|
|
- padding: 13rpx 24rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- color: #333;
|
|
|
- font-size: 32rpx;
|
|
|
- position: relative;
|
|
|
- border-top-left-radius: 20rpx;
|
|
|
- border-bottom-left-radius: 20rpx;
|
|
|
- background: #FDE935;
|
|
|
- border-top: 2rpx solid #fff;
|
|
|
- border-left: 2rpx solid #fff;
|
|
|
-
|
|
|
- &::after {
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- top: 1px;
|
|
|
- right: -48px;
|
|
|
- height: 100%;
|
|
|
- width: 50px;
|
|
|
- z-index: 2;
|
|
|
- background-color: #FDE935;
|
|
|
- clip-path: path("M0 0 C12.5 0 10.5 25 25 50 L0 50 Z");
|
|
|
- // clip-path: path("M0 0 C17.5 0 13.5 25 25 50 L0 50 Z");
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
|
|
|
+ image:nth-child(2) {
|
|
|
+ width: 95rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ margin: 0 10rpx;
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .balance {
|
|
|
- position: absolute;
|
|
|
- top: 66rpx;
|
|
|
- width: 100%;
|
|
|
- padding: 30rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- z-index: 2;
|
|
|
- background: linear-gradient(to left,
|
|
|
- #fff 60%,
|
|
|
- rgba(255, 255, 255, 0.7) 70%);
|
|
|
- border-radius: 20rpx;
|
|
|
- border: 2rpx solid #FFFFFF;
|
|
|
- backdrop-filter: blur(30rpx);
|
|
|
-
|
|
|
- /* 背景模糊 */
|
|
|
- .item {
|
|
|
- width: 32%;
|
|
|
-
|
|
|
- text:first-child {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #666;
|
|
|
- margin-bottom: 10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- text:last-child {
|
|
|
- color: #333;
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
|
|
|
+ image:nth-child(3) {
|
|
|
+ width: 62rpx;
|
|
|
+ height: 26rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ >text {
|
|
|
+ font-size: 22rpx;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .placeholder {
|
|
|
- width: 100%;
|
|
|
- height: 420rpx;
|
|
|
+ .edit {
|
|
|
+ width: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- //我的业绩
|
|
|
- .myPerformance {
|
|
|
+ //钱包
|
|
|
+ .walletContent {
|
|
|
width: 100%;
|
|
|
- margin-top: 72rpx;
|
|
|
- background: linear-gradient(180deg, rgba(253, 233, 53, 0.05) 0%, rgba(253, 233, 53, 0) 100%), #FFFFFF;
|
|
|
- border-radius: 20rpx;
|
|
|
- padding: 72rpx 30rpx 20rpx;
|
|
|
- box-sizing: border-box;
|
|
|
+ height: 207rpx;
|
|
|
position: relative;
|
|
|
|
|
|
.title {
|
|
|
- position: absolute;
|
|
|
- top: 27rpx;
|
|
|
- left: 20rpx;
|
|
|
- font-size: 32rpx;
|
|
|
+ width: 180rpx;
|
|
|
+ height: 105rpx;
|
|
|
+ padding: 13rpx 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- .totalPremium {
|
|
|
+ font-size: 32rpx;
|
|
|
position: relative;
|
|
|
- width: 390rpx;
|
|
|
- height: 180rpx;
|
|
|
- background: transparent;
|
|
|
- padding: 0 62rpx;
|
|
|
- box-sizing: border-box;
|
|
|
+ border-top-left-radius: 20rpx;
|
|
|
+ border-bottom-left-radius: 20rpx;
|
|
|
+ background: #FDE935;
|
|
|
+ border-top: 2rpx solid #fff;
|
|
|
+ border-left: 2rpx solid #fff;
|
|
|
|
|
|
- >text:nth-child(1) {
|
|
|
- font-size: 28rpx;
|
|
|
- color: #666;
|
|
|
- margin-bottom: 8rpx;
|
|
|
- }
|
|
|
-
|
|
|
- >text:nth-child(2) {
|
|
|
- font-size: 50rpx;
|
|
|
- color: #333;
|
|
|
- font-weight: bold;
|
|
|
- margin-bottom: 8rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .tag {
|
|
|
+ &::after {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
- bottom: -7rpx;
|
|
|
- left: 0;
|
|
|
- width: 14rpx;
|
|
|
- height: 14rpx;
|
|
|
- border-radius: 50%;
|
|
|
- background: rgba(253, 233, 53, 0.4);
|
|
|
- }
|
|
|
+ top: 1px;
|
|
|
+ right: -48px;
|
|
|
+ height: 100%;
|
|
|
+ width: 50px;
|
|
|
+ z-index: 2;
|
|
|
+ background-color: #FDE935;
|
|
|
+ clip-path: path("M0 0 C12.5 0 10.5 25 25 50 L0 50 Z");
|
|
|
+ // clip-path: path("M0 0 C17.5 0 13.5 25 25 50 L0 50 Z");
|
|
|
|
|
|
- .tag2 {
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- bottom: -7rpx;
|
|
|
- right: 0;
|
|
|
- width: 14rpx;
|
|
|
- height: 14rpx;
|
|
|
- border-radius: 50%;
|
|
|
- background-color: rgba(253, 233, 53, 0.4);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .totalPremium::before {
|
|
|
- content: "";
|
|
|
+ .balance {
|
|
|
position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
+ top: 66rpx;
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
- border: 7px solid rgba(253, 233, 53, 0.5);
|
|
|
- border-radius: 195rpx 195rpx 0 0;
|
|
|
+ padding: 30rpx;
|
|
|
box-sizing: border-box;
|
|
|
- border-bottom: transparent;
|
|
|
+ z-index: 2;
|
|
|
+ background: linear-gradient(to left,
|
|
|
+ #fff 60%,
|
|
|
+ rgba(255, 255, 255, 0.7) 70%);
|
|
|
+ border-radius: 20rpx;
|
|
|
+ border: 2rpx solid #FFFFFF;
|
|
|
+ backdrop-filter: blur(30rpx);
|
|
|
+
|
|
|
+ /* 背景模糊 */
|
|
|
+ .item {
|
|
|
+ width: 32%;
|
|
|
+
|
|
|
+ text:first-child {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #666;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ }
|
|
|
|
|
|
+ text:last-child {
|
|
|
+ color: #333;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.placeholder {
|
|
|
+ width: 100%;
|
|
|
+ height: 420rpx;
|
|
|
+}
|
|
|
+
|
|
|
+//我的业绩
|
|
|
+.myPerformance {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 72rpx;
|
|
|
+ background: linear-gradient(180deg, rgba(253, 233, 53, 0.05) 0%, rgba(253, 233, 53, 0) 100%), #FFFFFF;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 72rpx 30rpx 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ position: absolute;
|
|
|
+ top: 27rpx;
|
|
|
+ left: 20rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
|
|
|
+ .totalPremium {
|
|
|
+ position: relative;
|
|
|
+ width: 390rpx;
|
|
|
+ height: 180rpx;
|
|
|
+ background: transparent;
|
|
|
+ padding: 0 62rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
- .Details {
|
|
|
- width: 100%;
|
|
|
- height: 152rpx;
|
|
|
- background-image: url('../../static/image/my/bg2.png');
|
|
|
- background-size: 100% 100%;
|
|
|
- padding: 48rpx 30rpx 20rpx;
|
|
|
- box-sizing: border-box;
|
|
|
+ >text:nth-child(1) {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #666;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ }
|
|
|
|
|
|
- .item {
|
|
|
- width: 33%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
+ >text:nth-child(2) {
|
|
|
+ font-size: 50rpx;
|
|
|
+ color: #333;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ }
|
|
|
|
|
|
- text:first-child {
|
|
|
- font-size: 36rpx;
|
|
|
- color: #333;
|
|
|
- font-weight: bold;
|
|
|
- margin-bottom: 6rpx;
|
|
|
- }
|
|
|
+ .tag {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ bottom: -7rpx;
|
|
|
+ left: 0;
|
|
|
+ width: 14rpx;
|
|
|
+ height: 14rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: rgba(253, 233, 53, 0.4);
|
|
|
+ }
|
|
|
|
|
|
- text:last-child {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
- }
|
|
|
+ .tag2 {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ bottom: -7rpx;
|
|
|
+ right: 0;
|
|
|
+ width: 14rpx;
|
|
|
+ height: 14rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: rgba(253, 233, 53, 0.4);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- //工具
|
|
|
- .myTools {
|
|
|
- padding: 35rpx 30rpx;
|
|
|
+ .totalPremium::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border: 7px solid rgba(253, 233, 53, 0.5);
|
|
|
+ border-radius: 195rpx 195rpx 0 0;
|
|
|
box-sizing: border-box;
|
|
|
- background: #fff;
|
|
|
- border-radius: 20rpx;
|
|
|
- display: grid;
|
|
|
- /* 启用网格布局 */
|
|
|
- grid-template-columns: repeat(4, 1fr);
|
|
|
- /* 3 列,每列等宽 */
|
|
|
- grid-template-rows: auto;
|
|
|
- /* 行高自适应 */
|
|
|
- row-gap: 40rpx;
|
|
|
- /* 只设置行间距(上下) */
|
|
|
- column-gap: 10px;
|
|
|
- /* 列间距设为 0(可选) */
|
|
|
-
|
|
|
- /* 网格间距 */
|
|
|
- .toolsItem {
|
|
|
- image {
|
|
|
- width: 58rpx;
|
|
|
- height: 58rpx;
|
|
|
+ border-bottom: transparent;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .Details {
|
|
|
+ width: 100%;
|
|
|
+ height: 152rpx;
|
|
|
+ background-image: url('../../static/image/my/bg2.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ padding: 48rpx 30rpx 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ width: 33%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ text:first-child {
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #333;
|
|
|
+ font-weight: bold;
|
|
|
margin-bottom: 6rpx;
|
|
|
}
|
|
|
|
|
|
- text {
|
|
|
- font-size: 28rpx;
|
|
|
- color: #333;
|
|
|
+ text:last-child {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #666;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
+//工具
|
|
|
+.myTools {
|
|
|
+ padding: 35rpx 30rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ display: grid;
|
|
|
+ /* 启用网格布局 */
|
|
|
+ grid-template-columns: repeat(4, 1fr);
|
|
|
+ /* 3 列,每列等宽 */
|
|
|
+ grid-template-rows: auto;
|
|
|
+ /* 行高自适应 */
|
|
|
+ row-gap: 40rpx;
|
|
|
+ /* 只设置行间距(上下) */
|
|
|
+ column-gap: 10px;
|
|
|
+ /* 列间距设为 0(可选) */
|
|
|
+
|
|
|
+ /* 网格间距 */
|
|
|
+ .toolsItem {
|
|
|
+ image {
|
|
|
+ width: 58rpx;
|
|
|
+ height: 58rpx;
|
|
|
+ margin-bottom: 6rpx;
|
|
|
+ }
|
|
|
|
|
|
- .customContent {
|
|
|
- .newtag {
|
|
|
- width: auto;
|
|
|
- height: 100%;
|
|
|
- padding: 5rpx 12rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- background: #FF4545;
|
|
|
- border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
|
- font-size: 18rpx;
|
|
|
- color: #fff;
|
|
|
- margin-right: 18rpx;
|
|
|
+ text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333;
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
+.customContent {
|
|
|
+ .newtag {
|
|
|
+ width: auto;
|
|
|
+ height: 100%;
|
|
|
+ padding: 5rpx 12rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #FF4545;
|
|
|
+ border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
|
+ font-size: 18rpx;
|
|
|
+ color: #fff;
|
|
|
+ margin-right: 18rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|