Files
medicine_app/pages/mine/mine/index.vue
@fawn-nine d46f419846 优惠券
2024-10-17 16:58:54 +08:00

1079 lines
26 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<view style=" position: relative;
padding: 0 0;
font-size: 28rpx;
;
" class="commonPageeeee commonPageBox">
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<view class="setIcon" @click="goSetting">
<u-icon class="" labelColor="#258feb" labelPos="bottom" label="设置" name="setting"
:style="`top:${(10 + statusBarHeight) * 2}rpx`" color="#258feb" size="28"></u-icon>
</view>
<view class="bg_top flex_box flex_between">
<view class="per_mes">
<view class="per_mes_user">
<view class="" style="width: 100rpx; height: 100rpx; display: inline-block;">
<image @click="goUserInfo" :src="userMes.avatar" v-if="userMes.avatar != null"
class="per_mes_img color_shandow"></image>
<image src="@/static/icon/home_icon_logo.png" v-if="userMes.avatar == null"
class="per_mes_img color_shandow"></image>
</view>
<view class="user_vip_box ">
<view v-if="userMes.vip == 1" class="user_vip super">超级VIP</view>
<view v-if="userMes.vip == 3" class="user_vip">众妙之门VIP</view>
<view v-if="userMes.vip == 2" class="user_vip">吴门医述VIP</view>
</view>
</view>
<view class="userInfoBox" style="width: calc(100% - 220rpx)">
<template>
<view class="name">昵称{{ userMes.nickname ? userMes.nickname : "未设置" }}</view>
</template>
<template v-if="userMes.tel">
<view class="phone">手机号({{ userMes.tel }})</view>
</template>
<template v-if="userMes.email">
<view class="phone email">邮箱({{ userMes.email }})</view>
</template>
<template v-if="userMes.userVip && userMes.vip != 0 && !isAndorid">
<view class="phone email">VIP{{userMes.userVip.endTime.split(" ")[0]}}到期</view>
</template>
<!-- <text class="tong">累计读书5本
<span style="margin: 0 20upx;">|</span> 今日读50分钟
</text> -->
</view>
<br clear="both" />
</view>
</view>
<view class="mine_box" :style="`top:${(45 + statusBarHeight) * 2}rpx`">
<view style="
padding: 20rpx; overflow: hidden;
">
<!-- vip 只有安卓才显示-->
<view v-if="isAndorid" class="chong_zhi boxShadow box_fillet vip_box"
@click="onPageJump('/pages/mine/vip/index')">
<view v-if="!userMes.userVip" class="noVip">
<view class="zhanghu PM_font" style="text-align: left">
<image class="vip_image" src="@/static/vip.png" mode="aspectFit">
</image>
<text style="color: #fff; font-size: 60rpx;">VIP</text>
</view>
<view class="" style="width:calc(100% - 200rpx);">
<swiper :autoplay="true" :interval="3000" :duration="1000"
style="width:100%; height: 60rpx">
<swiper-item v-for="(item, index) in swiperList" style="width: 100%; height: 100%">
<view style="
background: linear-gradient(
130deg,
rgb(46, 103, 106) 0%,
rgb(114, 173, 146) 100%
)
text;
text-align: center;
" :style="item.style" v-html="item.name"></view>
<!-- <image :src="curriculumData.explainsImg" mode="widthFix" class="headImage"></image> -->
</swiper-item>
</swiper>
</view>
</view>
<view v-else class="noVip hasVip">
<view class="zhanghu PM_font" style="text-align: center">
<image class="vip_image" src="@/static/vip.png" mode="aspectFit">
</image>
<text style="color: #fff; font-size: 60rpx;">VIP</text>
</view>
<view class="time">{{ userMes.userVip.endTime.split(" ")[0] }}到期</view>
</view>
</view>
<!-- end -->
<view class="chong_zhi boxShadow box_fillet chongzhi_box">
<!-- <view
class="zhanghu"
@click="onPageJump('/pages/mine/wallet/index/index')"
>
我的账户
<image src="@/static/icon/icon_right.png" class="rightArrow"></image>
</view> -->
<view class="chong_list">
<view class="left">
<view class="chong_list_item" style="
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-between;
" @click="onPageJump('/pages/mine/wallet/index/index')">
<view class="pay_item_img">
天医币<u-icon @click.native.stop="openInfo()" name="question-circle"
style="float: right; margin: 0 6rpx"></u-icon>
<!-- <image
style="width: 100%; height: 100%"
src="@/static/icon/pay_3.png"
mode="aspectFil"
>
</image> -->
</view>
<view class="text" style="line-height: 40rpx; display: flex">{{
userMes.peanutCoin ? userMes.peanutCoin : 0
}}</view>
</view>
<view class="chong_list_item" style="
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-between;
" @click="onPageJump('/pages/mine/wallet/jf/index')">
<view class="pay_item_img">
积分
<!-- <image
style="width: 100%; height: 100%"
src="@/static/icon/jifen2.png"
mode="aspectFil"
>
</image> -->
</view>
<view class="text" style="line-height: 40rpx">{{
userMes.jf ? userMes.jf : 0
}}</view>
</view>
<view class="chong_list_item" style="
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-between;
" @click="onPageJump('/pages/mine/wallet/couponList')">
<view class="pay_item_img">
优惠券
</view>
<view class="text" style="line-height: 40rpx">{{
userCouponNum
}}</view>
</view>
</view>
<!-- v-if="iosHide" -->
<!-- <view v-if="iosHide" class="chong_list_item">
<b>{{ userMes.conponsCount }}</b>
优惠券
</view> -->
<!-- <b class="chong_btn" @click="onPageJump('../sdkDemo/pay')"> </b> -->
<view class="chong_list_item" style="
display: flex;
align-items: center;
margin-right: 0;
justify-content: center;
">
<view class="chong_btn" v-if="iosHide"
@click="onPageJump('/pages/mine/wallet/recharge/index')"> </view>
</view>
</view>
</view>
</view>
<view class="list_box">
<view class="xiugai boxShadow box_fillet">
<common-list :dataList="pageList" @hancleClick="handleClickTab" label="name">
<template slot="rightSlot" slot-scope="slotProps">
<text class="fdButtonBox aui-text-success"
style="line-height: 40rpx; font-size: 50rpx;">{{ slotProps.row.content }}</text>
<view> </view>
</template>
</common-list>
</view>
</view>
</view>
<u-modal :show="signShow" :content="signContent" :showCancelButton="true" @cancel="signShow = false"
@confirm="signOut">
</u-modal>
<!-- 分享弹窗 -->
<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
<uni-popup-share @select="haveSelected"></uni-popup-share>
</uni-popup>
<u-popup :show="infoShow" mode="center" round="6" backgroundColor="#fff">
<view class="popup_box">
<view class="title">温馨提示</view>
<view class="content">
<view class="center">
&nbsp;&nbsp;&nbsp;&nbsp;天医币仅为我平台支付使用币种
一人民币=一天医币仅为了方便用户支付使用<br />天医币可以用于在我平台支付书籍或课程使用
<br />天医币这个名称是为适应我们平台的定位属性所起名称与区块链虚拟货币无任何关系
</view>
<view class="bottom">
<view class="button_box" style="
align-items: center;
justify-content: center;
">
<!-- <u-button
size="small"
text="不同意"
@click="protocolShow=false"
></u-button> -->
<u-button style="width: 200rpx; float: center" :plain="true" text="知道啦" color="#9b9b9b"
size="small" @click="infoShow = false"></u-button>
</view>
</view>
</view>
</view>
</u-popup>
<!-- <u-modal :show="infoShow" title="提示信息" :content=""></u-modal> -->
<music-play :playData="playData"></music-play>
<z-navigation></z-navigation>
</view>
</template>
<script>
import musicPlay from "@/components/music.vue";
import $http from "@/config/requestConfig.js";
// import appShare, { closeShare } from '@/uni_modules/zhouWei-APPshare/js_sdk/appShare';
import {
mapState,
mapMutations
} from "vuex";
export default {
data() {
return {
swiperList: [{
name: "开通会员畅享更多活动",
style: "color:#fff;font-size:28rpx"
},
{
name: "众妙之门视频",
style: "color:#fff;font-size:28rpx"
},
{
name: "吴门医述视频",
style: "color:#fff;font-size:28rpx"
},
{
name: "专属视频视听",
style: "color:#fff;font-size:28rpx"
},
{
name: "读书相关权益",
style: "color:#fff;font-size:28rpx"
},
{
name: "活动报名<text style='color:#ffaa7f'>(折扣价)</text>",
style: "color:#fff;font-size:28rpx"
},
],
roleObj: {},
infoShow: false, // 显示电子书相关
showEbook: false, // 显示电子书相关
userMes: {},
signShow: false,
signContent: "是否要退出登录?",
playData: {},
userCouponNum:0, // 优惠券数量
directorShow: false, // 主任是否显示班级入口
monitorShow: false, // 其他管理是否显示班级入口
isAndorid: true,
platform: null, // 设备系统
pageList: [{
name: "我的订单",
url: "/pages/bookShop/orderList?type=mine",
type: "switchTab",
// type: "pageJump",
},
{
name: "我的证书",
url: "/pages/certificate/certificate",
type: "pageJump",
},
// {
// name: "购物车",
// url: "../peanut/shopping",
// type: "pageJump",
// },
{
name: "个人资料",
url: "/pages/mine/userInfo/persData",
type: "pageJump",
},
{
name: "地址管理",
url: "/pages/component/commonComponents/address/index?type=mine",
type: "pageJump",
},
// {
// name: "分享APP",
// type: "share",
// },
{
name: "关于我们",
url: "/pages/mine/aboutUs/index",
type: "pageJump",
},
{
name: "问题反馈/申诉",
url: "/pages/user/workOrder",
type: "workOrder"
},
// { name: "退出登录", type: "quitLogin" },
// { name: "注销帐号", type: "loginOut" },
],
};
},
//第一次加载
onLoad(e) {
// 隐藏原生的tabbar
uni.hideTabBar();
// #ifdef APP-PLUS
this.getOS();
this.platform = uni.getSystemInfoSync().platform;
// console.log('操纵系统',this.platform)
// #endif
},
computed: {
...mapState(["userInfo"]),
},
//页面显示
async onShow() {
// console.log(this.userInfo, "11111111111111");
this.getData();
this.getUserRole()
await this.getUserCouponList()
// 隐藏原生的tabbar
// uni.hideTabBar();
},
components: {
musicPlay,
},
//方法
methods: {
...mapMutations(["setUserInfo"]),
// 获取用户优惠券列表
async getUserCouponList(){
await this.$http
.request({
url: "common/coupon/getCouponHistoryList",
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data: {
"page":1,
"limit":10,
"getType":"",//获取类型 0 后台赠送 1 主动获取
"status":"0",//使用状态 0 未使用 1 已使用 2 已过期
"userInfo":"",//用户信息
"userId":this.userInfo.id
},
header: {
//默认 无 说明:请求头
"Content-Type": "application/json",
},
})
.then(async (res) => {
if(res.code != 0) return this.$commonJS.showToast(res.errMsg);
this.userCouponNum = res.couponList.total
}).catch(e => {
console.log(e);
this.$commonJS.showToast(e.errMsg);
})
},
openInfo() {
this.infoShow = true;
},
goSetting() {
console.log('点击了');
this.onPageJump("/pages/mine/set/index");
},
goUserInfo() {
this.onPageJump("/pages/mine/userInfo/persData");
},
handleClickTab(v) {
console.log("v at line 259:", v);
switch (v.type) {
case "pageJump":
this.onPageJump(v.url);
break;
case "switchTab":
this.switchTab(v.url);
break;
case "share":
//分享
this.newOnShare();
break;
case "quitLogin":
//退出登录
this.signShow = true;
break;
case "loginOut":
//注销账号
this.logout();
break;
case "workOrder":
uni.navigateTo({
url: `${v.url}?name=userPage`
})
// this.onPageJump(v.url);
break;
}
},
// 获得操作系统
getOS() {
let oprateOs = "";
oprateOs = uni.getSystemInfoSync().platform;
// console.log(oprateOs)
if (oprateOs == "android") {
this.isAndorid = true;
} else {
this.isAndorid = false;
}
},
haveSelected(data) {
console.log(data, " 选择的是");
if (data.index == 0) {
// 分享到好友
uni.share({
provider: "weixin",
scene: "WXSceneSession",
type: 0,
href: this.$apkUrl,
title: "吴门医述",
summary: "我正在使用吴门医述提升自己,赶紧跟我一起来体验吧!",
imageUrl: "static/icon/home_icon_logo.png",
success: function(res) {
console.log("success:" + JSON.stringify(res));
},
fail: function(err) {
console.log("fail:" + JSON.stringify(err));
},
});
} else if (data.index == 1) {
// 分享到朋友圈
uni.share({
provider: "weixin",
scene: "WXSceneTimeline",
type: 0,
href: this.$apkUrl,
title: "吴门医述",
summary: "我正在使用吴门医述提升自己,赶紧跟我一起来体验吧!",
imageUrl: "static/icon/home_icon_logo.png",
success: function(res) {
console.log("success:" + JSON.stringify(res));
},
fail: function(err) {
console.log("fail:" + JSON.stringify(err));
},
});
}
},
switchTab(url) {
uni.switchTab({
url: url,
});
},
// 获取用户的角色信息
getUserRole() {
this.$http.post("common/class/getRoleType").then((res) => {
console.log('用户角色信息', res);
this.roleObj = res.result
var zhurenIndex = this.pageList.findIndex(item => {
return item.name == '主任教学'
})
if (zhurenIndex > -1) {
this.pageList.splice(zhurenIndex, 1)
}
var banzhangIndex = this.pageList.findIndex(item => {
return item.name == '班级管理'
})
if (banzhangIndex > -1) {
this.pageList.splice(banzhangIndex, 1)
}
var yonghuIndex = this.pageList.findIndex(item => {
return item.name == '我的班级'
})
if (yonghuIndex > -1) {
this.pageList.splice(yonghuIndex, 1)
}
if (this.roleObj.isDirector) {
var n = this.pageList.find(item => {
return item.name == '主任教学'
})
console.log('主任找到了么', n);
if (!n) {
// this.directorShow = true : this.directorShow = false
var item = {
// { // 主任之外的人显示班级管理
name: "主任教学",
url: "/pages/miniClass/DirectorModalList?type=mine",
type: "pageJump",
// },
}
this.pageList.splice(3, 0, item);
}
}
// 是班长
if (this.roleObj.isCommittee) {
var n = this.pageList.find(item => {
return item.name == '班级管理'
})
console.log('班长n找到了么', n);
if (!n) {
var item = {
name: "班级管理",
url: "/pages/miniClass/MonitorClassList?type=mine",
type: "pageJump",
}
this.pageList.splice(3, 0, item);
}
}
// 是学员
if (this.roleObj.isStudent) {
var n = this.pageList.find(item => {
return item.name == '我的班级'
})
console.log('我的班级找到了么', n);
if (!n) {
var item = {
name: "我的班级",
url: "/pages/miniClass/myClassList?type=mine",
type: "pageJump",
}
this.pageList.splice(3, 0, item);
}
}
}).catch(e => {
console.log('获取角色信息失败');
})
},
getData() {
// 获取个人信息
if (this.userInfo.id != undefined) {
this.$http.post("common/user/getUserInfo").then((res) => {
this.userMes = res.result;
});
}
},
// 新写分享
newOnShare() {
this.$refs.share.open();
},
// 注销账户
logout() {
let that = this;
uni.showModal({
title: "提示",
content: "确定要注销当前账户吗?",
success: function(res) {
if (res.confirm) {
uni.showModal({
title: "提示",
showCancel: false,
content: `注销申请已提交成功,请联系客服进行后续操作022-24142321`,
success: function(res1) {
if (res1.confirm) {
that.signOut();
}
},
});
} else if (res.cancel) {
// 取消操作
}
},
});
},
// 跳转
onGoing() {
uni.showToast({
icon: "none",
title: "开发中,敬请期待...",
});
},
onPageJump(url) {
console.log(url, "url");
uni.navigateTo({
url: url,
});
},
// 退出登录
signOut() {
this.signShow = false;
this.setUserInfo({
token: null,
});
uni.reLaunch({
url: "/pages/user/login/login",
});
},
},
};
</script>
<style lang="scss" scoped>
@import "@/style/mixin.scss";
.per_mes_user {
display: block !important;
}
.per_mes {
width: 100%;
position: relative;
margin: 20rpx 0;
margin-top: 20rpx;
align-items: center;
display: flex;
align-items: center;
justify-content: space-between;
.per_mes_img {
// @include themeBorder(10rpx,10rpx,#4E79A3, #A6D8DC);
width: 100rpx;
height: 100rpx;
// background-color: #fff;
border-radius: 100rpx;
margin: 0 0 0 0;
float: left;
}
view {
// float: left;
// margin-top: 20rpx;
.name {
width: 100%;
// display: inline-block;
font-weight: bold;
font-size: 38upx;
margin-bottom: 10rpx;
color: #6990c7 !important;
}
.phone {
font-size: 28rpx;
color: #6990c7 !important;
}
.tong {
color: #6990c7 !important;
font-size: 25upx;
}
.per_user_img {
display: inline-block;
width: 40upx;
height: 40upx;
margin-left: 10rpx;
vertical-align: super;
}
}
}
.now_vip {
background-color: #fff;
// border-radius: 20upx;
margin: 0 0 30upx 0;
padding: 0 30upx;
height: 120upx;
background-image: linear-gradient(90deg, #feeed6 0%, #f5ce99 100%);
image {
width: 46rpx;
height: 50rpx;
display: inline-block;
vertical-align: text-bottom;
margin: 0 10rpx 0 0;
}
text {
font-size: 30upx;
line-height: 120upx;
color: #977749;
font-weight: bold;
}
.kt_btn {
font-size: 26upx;
display: block;
float: right;
border-radius: 50rpx;
color: #fffbf6;
padding: 12rpx 26rpx;
margin: 33rpx 0 0 0;
background-image: linear-gradient(90deg, #dfa964 0%, #7f5218 100%);
}
}
.commonPageBox {
// background-image: url("@/static/icon/mine_bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: linear-gradient(-60deg, #fdf0ed 0%, #bfe3f0 40%, #e4eefa 60%, #bfe3f0 80%, #fdf0ed 100%);
// background-color: #d8f8e4 !important;
}
.chong_zhi {
box-shadow: none;
// border-bottom-left-radius: 0rpx !important;
// border-bottom-right-radius: 0rpx !important;
// background-color: #d8f8e4;
// margin: 0 0 30upx 0;
padding: 0 30upx;
height: auto;
.zhanghu {
width: 100%;
margin-bottom: 10rpx;
// line-height: 80rpx;
font-weight: bold;
display: flex;
align-items: center;
justify-content: space-between;
color: $themeColor;
font-weight: 700;
}
.noVip {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-around;
// flex-direction: column;
.zhanghu {
font-size: 40rpx;
width: 200rpx;
// margin-top: 20rpx;
margin-bottom: 0rpx;
text-align: center;
display: flex;
align-items: center;
// justify-content: space-around;
image {
width: 100rpx;
height: 100rpx;
}
}
}
.hasVip {
.time {
color: #fff;
padding: 4rpx 20rpx;
font-size: 28rpx;
border-radius: 20rpx;
// background: linear-gradient(
// to right,
// #56B0CE 0%,
// #6DDAEA 100%
// ) !important;
}
}
.chong_list {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 40rpx;
.left {
display: flex;
align-items: center;
}
.chong_list_item {
width: auto;
height: 100rpx;
margin-right: 60rpx;
text-align: center;
display: inline-block;
color: $themeColor;
.text {
font-size: 28rpx;
display: block;
font-weight: 700;
// margin: 0 0 10rpx 0;
color: $themeColor !important;
}
}
.chong_btn {
// position: absolute;
font-size: 26rpx;
display: block;
// top: 0px;
// right: 0px;
float: right;
border-radius: 50rpx;
color: #fffbf6;
padding: 10rpx 32rpx;
// margin-top: -60rpx;
// margin: 20rpx 0 0 0;
background-image: linear-gradient(90deg, #258feb 0%, #d5ecdd 200%);
}
}
}
.xiugai {
border-radius: 20rpx !important;
margin: 0 20rpx;
// padding:0 40rpx;
background: #f0f9fb;
.nav_list {
background-color: #b7e0e2;
padding: 15rpx 0 15rpx 10rpx;
display: flex;
align-items: center;
font-size: 22rpx;
position: relative;
font-weight: bold;
border-bottom: 1px solid #e5e5e5;
&:active {
background-color: #f5f5f5;
}
text {
color: #333;
margin-left: 10rpx;
}
&::after {
content: "";
position: absolute;
right: 20rpx;
top: 50%;
transform: translateY(-50%);
width: 30rpx;
height: 30rpx;
background-image: url("@/static/icon/icon_right.png");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
}
.nav_list:nth-last-child(1) {
border-bottom: 0;
}
}
.box_fillet {
border-radius: 20rpx;
overflow: hidden;
// background: #fff;
}
.chongzhi_box {
position: relative;
width: 100%;
height: 100%;
// float: left;
padding: 30rpx 20rpx 10rpx;
background-color: #f0f9fb;
border-radius: 20rpx;
}
.vip_box {
margin-bottom: 32rpx;
padding: 0;
position: relative;
width: 100%;
height: 100%;
border-radius: 20rx;
background-image: linear-gradient(60deg, #8265f9 30%, #016dea 100%);
// @include themeBorder(6rpx, 20rpx, #258feb, #a6d8dc);
// @include themeBorder(
// 10rpx,
// 20rpx,
// (
// linear-gradient(#DDF2FC, #BFDDF2),
// linear-gradient(to bottom left, #D5EDF8, #a6d8dc)
// )
// );
.zhanghu {
font-size: 80rpx;
text-align: center;
line-height: 100%;
margin-bottom: 0;
}
}
/deep/.scroll-view-item:nth-child(2n-1) {
background-color: transparent !important;
}
uni-page-body {
// background: #d8f8e4 !important;
}
.bg_top {
padding: 0 30rpx;
padding-top: 80rpx;
margin-bottom: 60rpx;
overflow: hidden;
// position: relative;
}
.setIcon {
position: absolute;
right: 30rpx;
top: 70rpx;
z-index: 2;
}
.mine_box {
width: 100%;
padding: 0 0rpx;
}
.list_box {
// background: #d8f8e4 !important;
padding: 20rpx 0;
margin-top: -10rpx;
}
.pay_item_img {
display: flex;
color: #333;
// color: #dac4b7;
align-items: center;
// width: 80rpx;
// height: 80rpx;
padding: 8rpx;
box-sizing: border-box;
font-weight: bold;
// float: left;
// margin-right: 20rpx;
margin: 0 auto;
margin-bottom: 10rpx;
//margin-top:-10rpx;
}
.popup_box {
padding-bottom: 20rpx;
width: 88vw;
overflow: hidden;
position: relative;
height: auto;
.title {
font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
font-weight: normal;
font-size: 46rpx;
color: $themeColor;
background-color: #f5f5f5;
// line-height: 46rpx;
padding: 20rpx;
// border-leradius: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.content {
font-size: 26rpx;
letter-spacing: 0.15rpx;
padding: 20rpx;
color: #3f3f3f;
.top {
margin: 30rpx 0;
}
.center {
line-height: 40rpx;
// padding:0 10rpx;
}
.bottom {
width: 100%;
margin-top: 60rpx;
font-size: 24rpx;
line-height: 26rpx;
color: #b0b0b0;
}
}
.button_box {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20rpx;
.u-button {
margin-left: 40rpx;
}
.u-button:nth-child(1) {
margin-left: 0;
}
}
}
.user_vip_box {
display: block;
// min-width: 100rpx;
// position: absolute;
// bottom: -20rpx;
// display: flex;
align-items: center;
justify-content: center;
view {
font-size: 22rpx;
font-weight: normal;
}
}
.user_vip {
z-index: 1;
color: #fff;
font-size: 24rpx;
width: auto;
padding: 4rpx 10rpx;
font-weight: 800;
border-radius: 20rpx;
background: linear-gradient(60deg, #8265f9 30%, #016dea 100%);
}
.super {
background: linear-gradient(to right, #5bc9c1 0%, #258feb 100%);
color: #f4f2e4;
}
</style>