901 lines
22 KiB
Vue
901 lines
22 KiB
Vue
<template>
|
||
<view style="padding-bottom: 40rpx;">
|
||
<u-navbar :background="background" :is-back="false" :title="title" :border-bottom="false">
|
||
</u-navbar>
|
||
<!-- 登录信息 -->
|
||
<view class="info flex align-center justify-center">
|
||
<view class="info-box">
|
||
<view @click="token?goNav('/pages/me/userinfo'):goNav('/pages/login/login')"
|
||
class="info-box-c flex align-center justify-between">
|
||
<view class="info-box-c-l flex align-center">
|
||
<view class="info-box-c-l-avatar">
|
||
<image :src="avatar?avatar:'../../static/images/me/default_avatar.png'" mode=""></image>
|
||
</view>
|
||
<view class="info-box-c-l-name">
|
||
<view class="info-box-c-l-name-t">
|
||
{{userName?userName:'未登录'}}
|
||
</view>
|
||
<view class="info-box-c-l-name-b" v-if="invitationCode">
|
||
ID:{{invitationCode}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="info-box-c-r">
|
||
<u-icon name="arrow-right" color="#F6F6F6" size="28"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 统计 -->
|
||
<view class="statistics flex align-center justify-center">
|
||
<view class="statistics-box flex align-center justify-between">
|
||
<view class="statistics-box-item" @click="goNav('/me/jilu/myLove')">
|
||
<view class="statistics-box-item-top">
|
||
{{myLoveNum}}
|
||
</view>
|
||
<view class="statistics-box-item-btn">
|
||
我的喜欢
|
||
</view>
|
||
</view>
|
||
<view class="statistics-box-item" @click="goNav('/me/jilu/histor')">
|
||
<view class="statistics-box-item-top">
|
||
{{myZhui}}
|
||
</view>
|
||
<view class="statistics-box-item-btn">
|
||
我的追剧
|
||
</view>
|
||
</view>
|
||
<!-- <view class="statistics-box-item" @click="goNav('/me/jifen/jifen')">
|
||
<view class="statistics-box-item-top">
|
||
{{jifen}}
|
||
</view>
|
||
<view class="statistics-box-item-btn">
|
||
我的积分
|
||
</view>
|
||
</view> -->
|
||
<view v-if="isShowMoneyPay" class="statistics-box-item" @click="goNav('/me/invite/cashDetail')">
|
||
<view class="statistics-box-item-top">
|
||
{{userInfo.amount || '0.00'}}
|
||
</view>
|
||
<view class="statistics-box-item-btn">
|
||
我的红包
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view v-if="isVips == '是' && isWxIosPay == true" class="vip flex align-center justify-center">
|
||
<view class="vip-box flex align-center justify-between">
|
||
<view class="vip-box-l">
|
||
<view class="vip-box-l-l flex align-center">
|
||
{{isVIP?'会员用户':'开通会员'}}
|
||
<image src="../../static/images/me/Vips.png" mode=""></image>
|
||
</view>
|
||
|
||
<view class="vip-box-l-r" v-if="isVIP">
|
||
{{endTime?endTime+'到期':'您是尊贵的永久会员'}}
|
||
</view>
|
||
<view class="vip-box-l-r" v-else>
|
||
{{endTime?endTime+'到期':'升级VIP，省更多钱'}}
|
||
</view>
|
||
</view>
|
||
<view v-if="!isVIP" @click="goNav('/pages/me/vip/index')"
|
||
class="vip-box-r flex align-center justify-center">
|
||
立即开通
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
<!-- 钱包 -->
|
||
<view class="money flex align-center justify-center" v-if="isWxIosPay == true">
|
||
<view class="money-box flex align-center justify-between">
|
||
<view class="">
|
||
<view class="money-box-title flex align-center">
|
||
<view class="money-box-title-l">
|
||
金币余额
|
||
</view>
|
||
<!-- <view @click="isShoMoney = !isShoMoney" class="money-box-title-r" style="margin-left: 12rpx;">
|
||
<u-icon :name="isShoMoney?'eye':'eye-off'" color="#5A4A32" size="40"></u-icon>
|
||
</view> -->
|
||
</view>
|
||
<view class="money-box-price">
|
||
<block v-if="isShoMoney">
|
||
{{formatNumber(moneyNum)}}
|
||
</block>
|
||
<block v-else>
|
||
****
|
||
</block>
|
||
</view>
|
||
</view>
|
||
<view class="money-box-btn" @click="goNav('/me/invite/moneyList?moneyType=2&viewType=2')">
|
||
金币明细
|
||
</view>
|
||
<!-- <view class="money-box-btn" @click="goNav('/me/wallet/wallet')">
|
||
立即充值
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
<!-- 常用工具 -->
|
||
<view class="tool flex align-center justify-center">
|
||
<view class="tool-box">
|
||
<view class="tool-box-content flex align-center justify-between flex-wrap">
|
||
<!-- #ifdef MP-TOUTIAO -->
|
||
<view class="tool-box-content-item flex align-center justify-center flex-wrap"
|
||
@click="goNav('/me/wallet/mingxi')">
|
||
<view class="tool-box-content-item-img">
|
||
<image src="../../static/images/me/mingxi.png" mode=""></image>
|
||
</view>
|
||
<view class="tool-box-content-item-txt">
|
||
钱包明细
|
||
</view>
|
||
</view>
|
||
<!-- #endif -->
|
||
<!-- <view v-if="kmPaySel != '否'" @click="openKaMiShow()"
|
||
class="tool-box-content-item flex align-center justify-center flex-wrap">
|
||
<view class="tool-box-content-item-img">
|
||
<image src="../../static/images/me/kami.png" mode=""></image>
|
||
</view>
|
||
<view class="tool-box-content-item-txt">
|
||
卡密兑换
|
||
</view>
|
||
</view> -->
|
||
<!-- <view class="tool-box-content-item flex align-center justify-center flex-wrap"
|
||
@click="goNav('/me/choujiang/choujiang')">
|
||
<view class="tool-box-content-item-img">
|
||
<image src="../../static/images/me/zhuanpan.png" mode=""></image>
|
||
</view>
|
||
<view class="tool-box-content-item-txt">
|
||
转盘抽奖
|
||
</view>
|
||
</view> -->
|
||
<view v-if="isShowMoneyPay" class="tool-box-content-item flex align-center justify-center flex-wrap"
|
||
@click="goNav('/me/invite/index')">
|
||
<view class="tool-box-content-item-img">
|
||
<image src="../../static/images/me/vfx.png" mode=""></image>
|
||
</view>
|
||
<view class="tool-box-content-item-txt">
|
||
分享好友
|
||
</view>
|
||
</view>
|
||
<view class="tool-box-content-item flex align-center justify-center flex-wrap"
|
||
@click="goNav('/me/message/index')">
|
||
<view class="tool-box-content-item-img">
|
||
<image src="../../static/images/me/messige.png" mode=""></image>
|
||
</view>
|
||
<view class="tool-box-content-item-txt">
|
||
消息中心
|
||
</view>
|
||
<u-badge :offset="[0,20]" type="error" :count="numCount"></u-badge>
|
||
</view>
|
||
<view class="tool-box-content-item flex align-center justify-center flex-wrap"
|
||
@click="goNav('/pages/task/index','tabbar')">
|
||
<view class="tool-box-content-item-img">
|
||
<image src="../../static/images/me/task.png" mode=""></image>
|
||
</view>
|
||
<view class="tool-box-content-item-txt">
|
||
任务中心
|
||
</view>
|
||
<u-badge :offset="[0,20]" type="error" :count="numCount"></u-badge>
|
||
</view>
|
||
<view class="tool-box-content-item flex align-center justify-center flex-wrap"
|
||
@click="goNav('/me/jilu/jilu')">
|
||
<view class="tool-box-content-item-img">
|
||
<image src="../../static/images/me/vlishi.png" mode=""></image>
|
||
</view>
|
||
<view class="tool-box-content-item-txt">
|
||
观看历史
|
||
</view>
|
||
</view>
|
||
<view v-if="rate>0 && isShowMoneyPay" class="tool-box-content-item flex align-center justify-center flex-wrap"
|
||
@click="goNav('/me/invite/inviteDet')">
|
||
<view class="tool-box-content-item-img">
|
||
<image src="../../static/images/me/vtd.png" mode=""></image>
|
||
</view>
|
||
<view class="tool-box-content-item-txt">
|
||
我的团队
|
||
</view>
|
||
</view>
|
||
<view class="tool-box-content-item flex align-center justify-center flex-wrap" @click="goMsg()">
|
||
<view class="tool-box-content-item-img">
|
||
<image src="../../static/images/me/vkf.png" mode=""></image>
|
||
</view>
|
||
<view class="tool-box-content-item-txt">
|
||
联系客服
|
||
</view>
|
||
</view>
|
||
<view class="tool-box-content-item flex align-center justify-center flex-wrap"
|
||
@click="goNav('/me/feedbackIndex/feedbackIndex')">
|
||
<view class="tool-box-content-item-img">
|
||
<image src="../../static/images/me/bangzhu.png" mode=""></image>
|
||
</view>
|
||
<view class="tool-box-content-item-txt">
|
||
帮助中心
|
||
</view>
|
||
</view>
|
||
<view class="tool-box-content-item flex align-center justify-center flex-wrap"
|
||
@click="goNav('/me/feedback/index')">
|
||
<view class="tool-box-content-item-img">
|
||
<image src="../../static/images/me/yijian.png" mode=""></image>
|
||
</view>
|
||
<view class="tool-box-content-item-txt">
|
||
意见反馈
|
||
</view>
|
||
</view>
|
||
<view class="tool-box-content-item flex align-center justify-center flex-wrap"
|
||
@click="goNav('/me/setting/index')">
|
||
<view class="tool-box-content-item-img">
|
||
<image src="../../static/images/me/setting.png" mode=""></image>
|
||
</view>
|
||
<view class="tool-box-content-item-txt">
|
||
设置中心
|
||
</view>
|
||
</view>
|
||
<view class="tool-box-content-item flex align-center justify-center flex-wrap" style="height: 0;">
|
||
</view>
|
||
<view class="tool-box-content-item flex align-center justify-center flex-wrap" style="height: 0;">
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 卡密兑换弹窗 -->
|
||
<u-popup @close="kami = ''" v-model="showCard" mode="center" border-radius="14" :closeable="true">
|
||
<view class="kami">
|
||
<view class="kami-title">
|
||
卡密兑换
|
||
</view>
|
||
<view class="kami-input">
|
||
<u-input v-model="kami" placeholder="请输入卡密" type="text" :border="true" />
|
||
</view>
|
||
<view @click="exchangeKaMi()" class="kami-btn flex align-center justify-center">
|
||
确认兑换
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<!-- 抖音im客服 -->
|
||
<ttMsg />
|
||
|
||
|
||
<other-xuanfu></other-xuanfu>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import ttMsg from '../../components/ttMsg/ttMsg.vue'
|
||
import httpsRequest from '../../common/httpRequest.js'
|
||
import otherXuanfu from '@/components/other-xuafu.vue'
|
||
|
||
|
||
export default {
|
||
components: {
|
||
ttMsg,otherXuanfu
|
||
},
|
||
data() {
|
||
return {
|
||
title: '',
|
||
background: {
|
||
backgroundImage: 'linear-gradient(to right, #FFE5EA 0%, #E4F5FB 49%, #FFF0EE 100%)'
|
||
},
|
||
kami: '', //卡密
|
||
isShoMoney: true, //是否显示余额
|
||
avatar: '../../static/images/logo.png',
|
||
img: '../../static/images/me/huiyuan.png',
|
||
swiperList: [{
|
||
imageUrl: '../../static/images/me/banner.png',
|
||
}],
|
||
isLogin: false,
|
||
userName: '未登录',
|
||
isVIP: false,
|
||
invitationCode: '',
|
||
token: '',
|
||
endTime: '', //会员到期时间
|
||
moneyNum: 0, //余额
|
||
jifen: 0, //积分
|
||
isVips: '否', //是否显示会员
|
||
myLoveNum: 0, //我的喜欢个数
|
||
myZhui: 0, //我的追剧数量
|
||
showCard: false,
|
||
numCount: 0,
|
||
rate: 0,
|
||
twoRate:0,
|
||
kmPaySel: '否',
|
||
isWxIosPay: true, //微信下是否显示支付功能
|
||
userInfo: {},
|
||
isShowMoneyPay: true,
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getBannerList()
|
||
},
|
||
onShow() {
|
||
|
||
this.isWxIosPay = uni.getStorageSync('isWxIosPay')
|
||
this.kmPaySel = this.$queue.getData('kmPaySel');
|
||
this.numCount = uni.getStorageSync('numCount')
|
||
this.isVips = uni.getStorageSync('isVips') ? uni.getStorageSync('isVips') : '否'
|
||
this.token = uni.getStorageSync('token')
|
||
if (this.token) {
|
||
this.getMyMoney()
|
||
this.getJifen()
|
||
this.$u.api.userinfo().then(res => {
|
||
if (res.code == 0 && res.data) {
|
||
uni.setStorageSync('zhiFuBao', res.data.zhiFuBao)
|
||
uni.setStorageSync('zhiFuBaoName', res.data.zhiFuBaoName)
|
||
uni.setStorageSync('userName', res.data.userName)
|
||
uni.setStorageSync('avatar', res.data.avatar)
|
||
this.userName = res.data.userName
|
||
this.avatar = res.data.avatar
|
||
this.invitationCode = res.data.invitationCode
|
||
this.rate = res.data.rate||0
|
||
this.twoRate = res.data.twoRate||0
|
||
}
|
||
})
|
||
|
||
let data = {
|
||
userId: uni.getStorageSync('userId')
|
||
}
|
||
this.$u.api.userVip(data).then(res => {
|
||
if (res.code == 0 && res.data && res.data.isVip == 2) {
|
||
this.isVIP = true;
|
||
this.endTime = res.data.endTime
|
||
uni.setStorageSync('isVIP', true)
|
||
} else {
|
||
this.isVIP = false;
|
||
this.endTime = ''
|
||
uni.setStorageSync('isVIP', false)
|
||
}
|
||
})
|
||
|
||
this.isLogin = true
|
||
this.userName = uni.getStorageSync('userName')
|
||
this.isVIP = uni.getStorageSync('isVIP')
|
||
this.getMyLoveNum()
|
||
this.getMyZhuiNum()
|
||
} else {
|
||
this.isLogin = false
|
||
this.isVIP = false
|
||
this.endTime = '' //会员到期时间
|
||
this.moneyNum = 0 //余额
|
||
this.jifen = 0 //积分
|
||
this.userName = '未登录'
|
||
this.invitationCode = ''
|
||
this.myLoveNum = 0
|
||
this.myZhui = 0
|
||
this.rate = 0
|
||
}
|
||
this.avatar = uni.getStorageSync('avatar') ? uni.getStorageSync('avatar') : '../../static/images/logo.png'
|
||
|
||
httpsRequest.getT("app/common/type/919", {}).then(res => {
|
||
console.log(res);
|
||
if (res.code == 0) {
|
||
const sysInfo = uni.getSystemInfoSync();
|
||
let isIos = sysInfo.platform == 'ios'
|
||
this.isShowMoneyPay = !(res.data.value == '1' && isIos)
|
||
}
|
||
});
|
||
},
|
||
methods: {
|
||
//兑换卡密
|
||
exchangeKaMi() {
|
||
if (!this.kami) {
|
||
uni.showToast({
|
||
title: '请输入卡密',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
let data = {
|
||
sdkContent: this.kami
|
||
}
|
||
this.$Request.postT('/app/sdkInfo/sdkExchange', data).then(res => {
|
||
if (res.code == 0) {
|
||
uni.showToast({
|
||
title: '兑换成功'
|
||
})
|
||
this.showCard = false
|
||
let datas = {
|
||
userId: uni.getStorageSync('userId')
|
||
}
|
||
this.$u.api.userVip(datas).then(rest => {
|
||
if (rest.code == 0 && rest.data && rest.data.isVip == 2) {
|
||
this.isVIP = true;
|
||
this.endTime = rest.data.endTime
|
||
uni.setStorageSync('isVIP', true)
|
||
} else {
|
||
this.isVIP = false;
|
||
this.endTime = ''
|
||
uni.setStorageSync('isVIP', false)
|
||
}
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
openKaMiShow() {
|
||
if (uni.getStorageSync('token')) {
|
||
this.showCard = true
|
||
} else {
|
||
uni.navigateTo({
|
||
url: "/pages/login/login"
|
||
})
|
||
}
|
||
|
||
},
|
||
//获取我喜欢的数量
|
||
getMyLoveNum() {
|
||
let data = {
|
||
page: 1,
|
||
limit: 1,
|
||
classify: 2
|
||
}
|
||
this.$Request.getT('/app/courseCollect/selectByUserId', data).then(res => {
|
||
if (res.code == 0) {
|
||
this.myLoveNum = res.data.total
|
||
} else {
|
||
this.myLoveNum = 0
|
||
}
|
||
})
|
||
},
|
||
//获取我追剧的数量
|
||
getMyZhuiNum() {
|
||
let data = {
|
||
page: 1,
|
||
limit: 1,
|
||
classify: 1
|
||
}
|
||
this.$Request.getT('/app/courseCollect/selectByUserId', data).then(res => {
|
||
if (res.code == 0) {
|
||
this.myZhui = res.data.total
|
||
} else {
|
||
this.myZhui = 0
|
||
}
|
||
})
|
||
},
|
||
/**
|
||
* 获取积分
|
||
*/
|
||
getJifen() {
|
||
this.$Request.getT('/app/integral/selectByUserId').then(res => {
|
||
if (res.code == 0) {
|
||
this.jifen = res.data.integralNum
|
||
} else {
|
||
this.jifen = 0
|
||
}
|
||
})
|
||
},
|
||
/**
|
||
* @param {Number} num
|
||
* @param 保留两位小数
|
||
*/
|
||
formatNumber(num) {
|
||
// 判断是否为整数
|
||
if (Number.isInteger(num)) {
|
||
return num.toFixed(2);
|
||
} else {
|
||
return num.toFixed(2).replace(/\.?0+$/, '');
|
||
}
|
||
},
|
||
/**
|
||
* 获取余额
|
||
*/
|
||
getMyMoney() {
|
||
this.$Request.getT('/app/moneyDetails/selectUserMoney').then(res => {
|
||
if (res.code == 0) {
|
||
this.moneyNum = res.data.money
|
||
this.userInfo = res.data
|
||
// this.$Request.getT('/app/invite/selectInviteMoney').then(ret => {
|
||
// if (ret.code == 0) {
|
||
// if (ret.data.inviteMoney && ret.data.inviteMoney.money) {
|
||
// this.moneyNum = Number(res.data.money) + Number(ret.data.inviteMoney
|
||
// .money)
|
||
// } else {
|
||
// this.moneyNum = Number(res.data.money)
|
||
// }
|
||
// }
|
||
// })
|
||
} else {
|
||
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
goPage(url) {
|
||
if (url) {
|
||
if (url.indexOf('/pages/') !== -1 || url.indexOf('/me/') !== -1) {
|
||
uni.navigateTo({
|
||
url
|
||
});
|
||
} else {
|
||
//#ifndef H5
|
||
uni.navigateTo({
|
||
url: '/pages/index/webView?url=' + url
|
||
});
|
||
//#endif
|
||
//#ifdef H5
|
||
window.location.href = url;
|
||
//#endif
|
||
}
|
||
}
|
||
},
|
||
goMsg() {
|
||
let kefu = uni.getStorageSync('kefu'); // 用户端联系方式 1 手机号 2企业微信
|
||
let kefuPhone = uni.getStorageSync('kefuPhone');
|
||
if (kefu == 1) {
|
||
uni.navigateTo({
|
||
url: '/me/setting/kefu'
|
||
})
|
||
} else if (kefu == 3) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: kefuPhone //仅为示例
|
||
});
|
||
} else if (kefu == 2) {
|
||
// #ifdef MP-WEIXIN
|
||
let that = this
|
||
try {
|
||
wx.openCustomerServiceChat({
|
||
extInfo: {
|
||
url: uni.getStorageSync('kefuUrl')
|
||
},
|
||
corpId: uni.getStorageSync('kefuAppId'),
|
||
success(res) {},
|
||
fail(res) {
|
||
console.error(res)
|
||
}
|
||
})
|
||
} catch (error) {
|
||
console.error("catchcatch" + error)
|
||
uni.showToast({
|
||
title: '请更新至微信最新版本'
|
||
});
|
||
}
|
||
// #endif
|
||
// #ifndef MP-WEIXIN
|
||
let url = uni.getStorageSync('kefuUrl');
|
||
if (url.indexOf('/pages/') !== -1 || url.indexOf('/my/') !== -1) {
|
||
uni.navigateTo({
|
||
url
|
||
});
|
||
} else {
|
||
//#ifndef H5
|
||
uni.navigateTo({
|
||
url: '/pages/index/webView?url=' + url
|
||
});
|
||
//#endif
|
||
//#ifdef H5
|
||
window.location.href = url;
|
||
//#endif
|
||
}
|
||
// #endif
|
||
}
|
||
},
|
||
goNav(e,type) {
|
||
console.log(e)
|
||
let token = uni.getStorageSync('token')
|
||
if (token) {
|
||
if (type == 'tabbar') {
|
||
uni.switchTab({
|
||
url: e
|
||
})
|
||
} else {
|
||
uni.navigateTo({
|
||
url: e
|
||
})
|
||
}
|
||
|
||
} else {
|
||
uni.navigateTo({
|
||
url: "/pages/login/login"
|
||
})
|
||
}
|
||
|
||
},
|
||
// 获取轮播图列表
|
||
getBannerList() {
|
||
this.$u.api.bannerList({
|
||
classify: '3'
|
||
}).then(res => {
|
||
if (res.code == 0 && res.data) {
|
||
let arr = []
|
||
res.data.forEach(ret => {
|
||
if (ret.state == 1) {
|
||
arr.push(ret)
|
||
}
|
||
})
|
||
this.swiperList = arr
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
});
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #F5F7FF;
|
||
}
|
||
|
||
/deep/.u-navbar-inner {
|
||
/* #ifdef H5 */
|
||
background: linear-gradient(to right, #FFE5EA 0%, #E4F5FB 49%, #FFF0EE 100%);
|
||
/* #endif */
|
||
}
|
||
|
||
.kami {
|
||
width: 500rpx;
|
||
height: auto;
|
||
background-color: #FFFFFF;
|
||
|
||
.kami-title {
|
||
width: 100%;
|
||
text-align: center;
|
||
margin-top: 30rpx;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.kami-input {
|
||
padding: 30rpx;
|
||
}
|
||
|
||
.kami-btn {
|
||
width: calc(100% - 60rpx);
|
||
height: 80rpx;
|
||
margin: 0 auto;
|
||
background-color: #ff7581;
|
||
border-radius: 44rpx;
|
||
color: #FFFFFF;
|
||
margin-top: 10rpx;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
}
|
||
|
||
.info::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: linear-gradient(to right, #FFE5EA 0%, #E4F5FB 49%, #FFF0EE 100%);
|
||
z-index: 1;
|
||
/* 确保在垂直渐变之上 */
|
||
}
|
||
|
||
.info::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: linear-gradient(to bottom, transparent, #F5F7FF);
|
||
/* 垂直渐变，结束颜色为透明 */
|
||
z-index: 2;
|
||
/* 确保在水平渐变之上 */
|
||
}
|
||
|
||
.info {
|
||
width: 100%;
|
||
height: auto;
|
||
// height: 400rpx;
|
||
background: #F5F7FF;
|
||
position: relative;
|
||
border-radius: 0 0 80rpx 80rpx;
|
||
|
||
.info-box {
|
||
width: 686rpx;
|
||
height: 100%;
|
||
position: relative;
|
||
z-index: 3;
|
||
}
|
||
|
||
.info-box-c {
|
||
width: 100%;
|
||
height: 94rpx;
|
||
// margin-top: 60rpx;
|
||
margin-bottom: 140rpx;
|
||
}
|
||
|
||
.info-box-c-l-avatar {
|
||
width: 94rpx;
|
||
height: 94rpx;
|
||
border-radius: 50%;
|
||
|
||
image {
|
||
width: 94rpx;
|
||
height: 94rpx;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
.info-box-c-l-name {
|
||
margin-left: 16rpx;
|
||
|
||
.info-box-c-l-name-t {
|
||
color: #333333;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.info-box-c-l-name-b {
|
||
color: #333333;
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
}
|
||
|
||
.statistics {
|
||
width: 100%;
|
||
height: auto;
|
||
margin-top: -100rpx;
|
||
position: relative;
|
||
z-index: 3;
|
||
|
||
.statistics-box {
|
||
width: 686rpx;
|
||
// height: 184rpx;
|
||
// background-color: #FFFFFF;
|
||
border-radius: 24rpx;
|
||
}
|
||
|
||
.statistics-box-item {
|
||
// width: calc(100% / 3);
|
||
// height: 100%;
|
||
}
|
||
|
||
.statistics-box-item-top {
|
||
width: 100%;
|
||
text-align: center;
|
||
color: #333333;
|
||
font-size: 38rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.statistics-box-item-btn {
|
||
width: 100%;
|
||
text-align: center;
|
||
color: #999999;
|
||
font-size: 26rpx;
|
||
// margin-top: 20rpx
|
||
}
|
||
}
|
||
|
||
.vip {
|
||
width: 100%;
|
||
// height: 84rpx;
|
||
margin-top: 30rpx;
|
||
|
||
.vip-box {
|
||
width: 686rpx;
|
||
height: 100%;
|
||
background: linear-gradient(90deg, #FEF5E4 0%, #FBECD7 100%);
|
||
border-radius: 24rpx;
|
||
padding: 26rpx 30rpx;
|
||
}
|
||
|
||
.vip-box-l {
|
||
image {
|
||
width: 24rpx;
|
||
height: 22rpx;
|
||
margin-left: 6rpx;
|
||
}
|
||
}
|
||
|
||
.vip-box-l-l {
|
||
font-size: 32rpx;
|
||
font-weight: 800;
|
||
color: #5A4A32;
|
||
line-height: 32rpx;
|
||
}
|
||
|
||
.vip-box-l-r {
|
||
color: #817858;
|
||
font-size: 26rpx;
|
||
margin-top: 6rpx;
|
||
}
|
||
|
||
.vip-box-r {
|
||
width: 130rpx;
|
||
height: 50rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx -3rpx 9rpx 0rpx rgba(255, 255, 255, 0.46);
|
||
border-radius: 25rpx;
|
||
color: #5A4A32;
|
||
font-size: 22rpx;
|
||
}
|
||
}
|
||
|
||
.money {
|
||
width: 100%;
|
||
height: auto;
|
||
margin-top: 20rpx;
|
||
|
||
.money-box {
|
||
width: 686rpx;
|
||
height: 100%;
|
||
border-radius: 24rpx;
|
||
background: #ffffff;
|
||
padding: 30rpx;
|
||
}
|
||
|
||
.money-box-btn {
|
||
background: linear-gradient(90deg, #FF7581 0%, #F8A5AF 100%);
|
||
border-radius: 44rpx;
|
||
padding: 18rpx 30rpx;
|
||
font-size: 24rpx;
|
||
color: #ffffff;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.money-box-title-l {
|
||
color: #333333;
|
||
font-size: 28rpx;
|
||
font-weight: normal;
|
||
}
|
||
|
||
.money-box-price {
|
||
color: #333333;
|
||
font-size: 48rpx;
|
||
font-weight: 800;
|
||
margin-top: 20rpx;
|
||
|
||
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.tool {
|
||
width: 100%;
|
||
height: auto;
|
||
margin-top: 20rpx;
|
||
|
||
.tool-box {
|
||
width: 686rpx;
|
||
height: 100%;
|
||
background-color: #FFFFFF;
|
||
border-radius: 24rpx;
|
||
}
|
||
|
||
.tool-box-content {
|
||
width: 100%;
|
||
height: auto;
|
||
padding: 30rpx 30rpx 0 30rpx;
|
||
}
|
||
|
||
.tool-box-content-item {
|
||
width: 130rpx;
|
||
height: auto;
|
||
margin-bottom: 46rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.tool-box-content-item-img {
|
||
width: 66rpx;
|
||
height: 66rpx;
|
||
|
||
image {
|
||
width: 66rpx;
|
||
height: 66rpx;
|
||
}
|
||
}
|
||
|
||
.tool-box-content-item-txt {
|
||
width: 100%;
|
||
text-align: center;
|
||
margin-top: 10rpx;
|
||
color: #333333;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
</style> |