703 lines
19 KiB
Vue
703 lines
19 KiB
Vue
<template>
|
||
<view class="life-mine-page">
|
||
<view class="header-title" :style="{'paddingTop':statusBarHeight}">
|
||
<view class="header-img"></view>
|
||
<view class="title">个人中心</view>
|
||
<image src="@/static/mine/set.png" mode="" class="header-img" @click="set"></image>
|
||
</view>
|
||
<view class="header-info">
|
||
<view class="info">
|
||
<!-- @click="previewImage" -->
|
||
<image :src="infoDetail.avatarResource ? infoDetail.avatarResource.url : 'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/logo.png' " class="avatar-img" mode="aspectFill"></image>
|
||
<view class="info-detail">
|
||
<view class="name">{{infoDetail.nickname||''}}</view>
|
||
<view class="username">ID:{{infoDetail.username | mobileFilter(infoDetail.username)}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="sign-in" @click="sign">
|
||
<image src="@/static/mine/jb.png" class="sign-in-img" mode=""></image>
|
||
充值
|
||
</view>
|
||
</view>
|
||
<view class="goods">
|
||
<view class="goods-item" @click="ponitRecord">
|
||
<view class="item-value">{{infoDetail.points||0}}</view>
|
||
<view class="item-title">积分</view>
|
||
</view>
|
||
<view class="shu"></view>
|
||
<view class="goods-item" @click="coupon">
|
||
<view class="item-value">25</view>
|
||
<view class="item-title">优惠券</view>
|
||
</view>
|
||
<view class="shu"></view>
|
||
<view class="goods-item" @click="warehouse">
|
||
<view class="item-value">{{count||0}}</view>
|
||
<view class="item-title">物品</view>
|
||
</view>
|
||
</view>
|
||
<view class="main">
|
||
<view class="order">
|
||
<view class="order-header">
|
||
<view class="order-header-title">我的订单</view>
|
||
<view class="order-header-right" @click="goOrder">
|
||
全部订单
|
||
<image src="@/static/mine/jt.png" mode="" class="order-arr"></image>
|
||
</view>
|
||
</view>
|
||
<view class="order-list">
|
||
<view class="order-list-item" v-for="(item,index) in orderList" :key="index" @click="goPath(item)">
|
||
<image :src="item.img" mode="" :style="{width:item.width,height:item.height}"></image>
|
||
<view class="order-txt">{{item.label}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="list-main">
|
||
<view class="order-header">
|
||
<view class="order-header-title">我的服务</view>
|
||
</view>
|
||
<view class="list">
|
||
<view class="list-item" v-for="(item,index) in list" :key="index" @click="goPath(item)">
|
||
<image :src="item.img" mode="" :style="{width:item.width,height:item.height}"></image>
|
||
<view class="list-txt">{{item.label}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<!-- <view class="user-info">
|
||
<view class="info">
|
||
<image :src="infoDetail.avatar ? infoDetail.avatar : 'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/logo.png'" mode="aspectFill" class="info-photo"></image>
|
||
<view class="info-detail" v-if="isLogin">
|
||
<view class="detail-name">{{infoDetail.nickname||''}}</view>
|
||
<view class="detail-account">
|
||
账号 {{ infoDetail.username | mobileFilter(infoDetail.username)}}
|
||
<image src="https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/edit.png" mode="" class="detail-edit" @click="copy(infoDetail.phone)"></image>
|
||
</view>
|
||
</view>
|
||
<view class="info-detail" @click="goLogin" v-if="!isLogin">
|
||
立即登录
|
||
</view>
|
||
</view>
|
||
<image src="https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/shezhi.png" mode="" class="setting" @click="goPersonal"></image>
|
||
</view> -->
|
||
<!-- <view class="member">
|
||
<view class="member-label">
|
||
<view class="member-title">人脉变钱脉</view>
|
||
<view class="member-sub">解锁通行证，惊喜不断</view>
|
||
</view>
|
||
<view class="member-btn">立即激活</view>
|
||
</view> -->
|
||
<!-- <view class="goods">
|
||
<view class="goods-item" @click="ponitRecord">
|
||
<view class="item-num">{{infoDetail.points||0}}</view>
|
||
<view class="item-label">蜜豆</view>
|
||
</view>
|
||
<view class="goods-item" @click="warehouse">
|
||
<view class="item-num">{{count||0}}</view>
|
||
<view class="item-label">物品</view>
|
||
</view>
|
||
</view>
|
||
<view class="opc-view">
|
||
<view class="opc-header" @click="goOrder">
|
||
<view class="header-title">我的订单</view>
|
||
<view class="header-right">
|
||
全部订单
|
||
<image src="../../static/index/jt.png" mode="" class="right-jt"></image>
|
||
</view>
|
||
</view>
|
||
<view class="order-opc">
|
||
<template v-for="(item,index) in orderList">
|
||
<view class="opc-item" @click="goPath(item)" :key="index" >
|
||
<image :src="item.img" mode="" :style="{width:item.width,height:item.height}"></image>
|
||
<view class="opc-txt">{{item.label}}</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
<view class="opc" style="margin-top: 20rpx;">
|
||
<template v-for="(item,index) in operationList">
|
||
<view v-if="item.isShow" class="opc-item" @click="goPath(item)" :key="index">
|
||
<image :src="item.img" mode="" :style="{width:item.width,height:item.height}"></image>
|
||
<view class="opc-txt">{{item.label}}</view>
|
||
</view>
|
||
</template>
|
||
</view> -->
|
||
<!-- <aui-loading ref="loading"></aui-loading>
|
||
<login-popup ref="loginPopup"></login-popup> -->
|
||
<!-- 所有页面的弹框 -->
|
||
<page-popup page="/pages/mine/index"></page-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { myMixins } from "@/mixins/mixins.js";
|
||
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight ? `${uni.getSystemInfoSync().statusBarHeight}px` : '20px'
|
||
import { userInfo,boxCount,recordCountApi,customerApi } from '@/API/user.js'
|
||
export default{
|
||
mixins: [myMixins],
|
||
data(){
|
||
return{
|
||
statusBarHeight,
|
||
list:[
|
||
{label:"盲盒订单",img:"../../static/mine/mhdd.png",width:"31rpx",height:"36rpx",page:'/pages/mine/boxOrder'},
|
||
{label:"地址管理",img:"../../static/mine/ddgl.png",width:"31rpx",height:"36rpx",page:'/pages/mine/address'},
|
||
{label:"我的收藏",img:"../../static/mine/wdsc.png",width:"36rpx",height:"35rpx",page:"/pages/mine/collect"},
|
||
{label:"联系客服",img:"../../static/mine/lxkf.png",width:"36rpx",height:"36rpx",page:'customer'},
|
||
// {label:"意见反馈",img:"../../static/mine/yjfk.png",width:"36rpx",height:"36rpx",page:"/pages/mine/feedback"},
|
||
// {label:"系统公告",img:"../../static/mine/xtgg.png",width:"37rpx",height:"38rpx",page:'/pages/mine/notice'},
|
||
// {label:"关于我们",img:"../../static/mine/gywm.png",width:"35rpx",height:"37rpx",page:'/pages/mine/about'},
|
||
],
|
||
operationList:[
|
||
{isShow:true,label:"盲盒订单",img:"https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/new-dd.png",width:"52rpx",height:"52rpx",page:'/pages/lifeOrder/order'},
|
||
{isShow:true,label:"地址管理",img:"https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/new-dz.png",width:"52rpx",height:"52rpx",page:'/pages/mine/address'},
|
||
{isShow:true,label:"我的收藏",img:"https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/new-sc.png",width:"52rpx",height:"52rpx",page:"/pages/mine/collect"},
|
||
{isShow:true,label:"联系客服",img:"https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/new-kf.png",width:"52rpx",height:"52rpx"},
|
||
{isShow:false,label:"劵码核销",img:"https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/new-qm.png",width:"52rpx",height:"52rpx",page:'/pages/lifeCancel/cancel'},
|
||
{isShow:true,label:"意见反馈",img:"https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/new-yj.png",width:"52rpx",height:"52rpx",page:"/pages/mine/feedback"},
|
||
{isShow:true,label:"系统公告",img:"https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/new-xt.png",width:"52rpx",height:"52rpx",page:'/pages/mine/notice'},
|
||
{isShow:true,label:"关于我们",img:"https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/new-gy.png",width:"52rpx",height:"52rpx",page:'/pages/mine/about'},
|
||
],
|
||
orderList:[
|
||
{label:"待发货",img:"../../static/mine/dfh.png",width:"40rpx",height:"40rpx",page:'/pages/order/index?type=WAITING_FOR_SHIPMENT'},
|
||
{label:"待收货",img:"../../static/mine/dsh.png",width:"41rpx",height:"39rpx",page:'/pages/order/index?type=WAITING_FOR_RECEIPT'},
|
||
{label:"已完成",img:"../../static/mine/ywc.png",width:"39rpx",height:"40rpx",page:'/pages/order/index?type=COMPLETED'},
|
||
],
|
||
infoDetail:{
|
||
phone:"",
|
||
avatarResource:{}
|
||
},//用户信息
|
||
boxCountData:{
|
||
boxes: 0,
|
||
items: 0
|
||
},
|
||
isLogin:uni.getStorageSync('box-token') ? true : false,
|
||
count:0,
|
||
customer:''
|
||
}
|
||
},
|
||
filters:{
|
||
// 隐藏手机号
|
||
mobileFilter(val){
|
||
let reg = /^(.{3}).*(.{4})$/
|
||
return val ? val.replace(reg,'$1****$2') : ''
|
||
},
|
||
},
|
||
onShow() {
|
||
if(uni.getStorageSync('box-token')){
|
||
this.getUserInfo()
|
||
this.getRecordCount()
|
||
this.getCustomer()
|
||
}
|
||
|
||
// if(this.$isLogin()){
|
||
// // this.getCount()
|
||
// this.getUserInfo()
|
||
// }else{//未登录
|
||
|
||
// }
|
||
},
|
||
methods:{
|
||
previewImage(){
|
||
let imgUrl = this.infoDetail.avatarResource.url ? this.infoDetail.avatarResource.url : 'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/logo.png'
|
||
console.log(imgUrl)
|
||
uni.previewImage({
|
||
loop: true,
|
||
urls: [imgUrl], //可以展示imgUrl 列表中所有的图片
|
||
// current: index //首先当前index对应图片，左右可以切换其他序号的图片
|
||
});
|
||
},
|
||
|
||
// 设置
|
||
set(){
|
||
uni.navigateTo({
|
||
url:`/pages/mine/setting`
|
||
})
|
||
},
|
||
getCustomer(){
|
||
customerApi().then(res => {
|
||
if(res.code === 200){
|
||
this.customer = res.data
|
||
}else{
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
},
|
||
sign(){
|
||
uni.navigateTo({
|
||
url:`/pages/mine/topUp`
|
||
})
|
||
},
|
||
coupon(){
|
||
uni.navigateTo({
|
||
url:`/pages/mine/coupon`
|
||
})
|
||
},
|
||
ponitRecord(){
|
||
uni.navigateTo({
|
||
url:`/pages/mine/point`
|
||
})
|
||
},
|
||
getRecordCount(){
|
||
recordCountApi().then(res => {
|
||
if(res.code === 200){
|
||
this.count = res.data
|
||
}else{
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
},
|
||
goOrder(){
|
||
uni.navigateTo({
|
||
url:`/pages/order/index?type=''`
|
||
})
|
||
},
|
||
goLogin(){
|
||
uni.navigateTo({
|
||
url:`/pages/lifeLogin/login?type='back'`
|
||
})
|
||
},
|
||
warehouse(){
|
||
// if(this.$isLogin()){
|
||
uni.$emit('updateTabData', {newData:'newData'});
|
||
uni.navigateTo({
|
||
url:`/pages/mine/boxRecrd`
|
||
})
|
||
// }else{
|
||
// // this.$api.msg('请登录！')
|
||
// this.$refs.loginPopup.show()
|
||
// }
|
||
},
|
||
// 复制
|
||
copy(val){
|
||
uni.setClipboardData({
|
||
data: val,
|
||
})
|
||
},
|
||
// 获取礼盒 物品数量
|
||
getCount(){
|
||
boxCount().then(res => {
|
||
console.log(res)
|
||
if(res.code === 200){
|
||
this.boxCountData = res.data
|
||
}
|
||
})
|
||
},
|
||
// 获取用户信息
|
||
getUserInfo(){
|
||
userInfo().then(res => {
|
||
if(res.code === 200){
|
||
this.infoDetail = res.data
|
||
|
||
}else if(res.code == 400){
|
||
uni.removeStorageSync('userInfo')
|
||
uni.removeStorageSync('info')
|
||
this.$api.msg(res.message)
|
||
}else{
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
},
|
||
// 个人中心
|
||
goPersonal(){
|
||
// if(this.$isLogin()){
|
||
uni.navigateTo({
|
||
url:`/pages/lifeMine/personal`
|
||
})
|
||
// }else{
|
||
// this.$refs.loginPopup.show()
|
||
// }
|
||
},
|
||
goPath(item){
|
||
if(item.page === 'customer'){
|
||
// uni.openUrl({url:this.customer})
|
||
window.open(this.customer)
|
||
}else{
|
||
uni.navigateTo({
|
||
url:`${item.page}`
|
||
})
|
||
}
|
||
// if(this.$isLogin()){
|
||
// uni.navigateTo({
|
||
// url:`${item.page}`
|
||
// })
|
||
// }else{
|
||
// this.$refs.loginPopup.show()
|
||
// }
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page{
|
||
background-image: url('@/static/index/bg.png');
|
||
background-size: 100%;
|
||
}
|
||
.life-mine-page{
|
||
// min-height: calc(100vh - var(--window-bottom));
|
||
overflow: hidden;
|
||
// padding: 0 20rpx;
|
||
.header-title{
|
||
font-weight: 500;
|
||
font-size: 34rpx;
|
||
color: #000000;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 23rpx;
|
||
.header-img{
|
||
width: 44rpx;
|
||
height: 42rpx;
|
||
}
|
||
.title{
|
||
|
||
}
|
||
}
|
||
.header-info{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding: 48rpx 80rpx 0 42rpx;
|
||
.info{
|
||
display: flex;
|
||
align-items: center;
|
||
.avatar-img{
|
||
width: 105rpx;
|
||
height: 105rpx;
|
||
border-radius: 50%;
|
||
}
|
||
.info-detail{
|
||
margin-left: 26rpx;
|
||
|
||
.name{
|
||
font-weight: 500;
|
||
font-size: 34rpx;
|
||
color: #333333;
|
||
width: 250rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.username{
|
||
font-size: 24rpx;
|
||
color: #888888;
|
||
margin-top: 14rpx;
|
||
}
|
||
}
|
||
}
|
||
.sign-in{
|
||
width: 178rpx;
|
||
height: 59rpx;
|
||
border-radius: 30rpx;
|
||
border: 2rpx solid #C6C6C6;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
.sign-in-img{
|
||
width: 42rpx;
|
||
height: 43rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
.goods{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 53rpx;
|
||
padding-bottom: 35rpx;
|
||
.goods-item{
|
||
width: 248rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
.item-value{
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
}
|
||
.item-title{
|
||
font-size: 22rpx;
|
||
color: #888888;
|
||
margin-top: 4rpx;
|
||
}
|
||
}
|
||
.shu{
|
||
width: 2rpx;
|
||
height: 38rpx;
|
||
background: #DFDFDF;
|
||
}
|
||
}
|
||
.main{
|
||
width: 750rpx;
|
||
// height: calc(100vh - 470rpx);
|
||
background: #F6F6F6;
|
||
border-radius: 20px 20rpx 0 0;
|
||
padding-top: 21rpx;
|
||
.order{
|
||
width: 706rpx;
|
||
background: #FFFEFE;
|
||
border-radius: 20rpx;
|
||
margin-left: 22rpx;
|
||
box-sizing: border-box;
|
||
padding: 24rpx 39rpx 43rpx 34rpx;
|
||
.order-header{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.order-header-title{
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
}
|
||
.order-header-right{
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 22rpx;
|
||
color: #888888;
|
||
.order-arr{
|
||
margin-left: 10rpx;
|
||
width: 13rpx;
|
||
height: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
.order-list{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 44rpx;
|
||
padding: 0 30rpx;
|
||
.order-list-item{
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
.order-txt{
|
||
font-size: 22rpx;
|
||
color: #888888;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.list-main{
|
||
width: 706rpx;
|
||
background: #FFFEFE;
|
||
border-radius: 20rpx;
|
||
margin-left: 22rpx;
|
||
box-sizing: border-box;
|
||
padding: 32rpx;
|
||
margin-top: 20rpx;
|
||
.order-header{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 30rpx;
|
||
.order-header-title{
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
}
|
||
.order-header-right{
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 22rpx;
|
||
color: #888888;
|
||
.order-arr{
|
||
margin-left: 10rpx;
|
||
width: 13rpx;
|
||
height: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
.list{
|
||
display: grid;
|
||
gap: 48rpx;
|
||
grid-template-rows: 1fr;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
.list-item{
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
.list-txt{
|
||
font-size: 22rpx;
|
||
color: #888888;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.user-info{
|
||
padding: 52rpx 0rpx 40rpx 0rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.info{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 20rpx;
|
||
.info-photo{
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 50%;
|
||
}
|
||
.info-detail{
|
||
display: flex;
|
||
// align-items: center;
|
||
justify-content: space-between;
|
||
flex-direction: column;
|
||
margin-left: 20rpx;
|
||
.detail-name{
|
||
font-size: 36rpx;
|
||
color: #000000;
|
||
}
|
||
.detail-account{
|
||
font-size: 24rpx;
|
||
color: rgba(0,0,0,0.7);;
|
||
display: flex;
|
||
align-items: center;
|
||
.detail-edit{
|
||
margin-left: 12rpx;
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.setting{
|
||
width: 44rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
.member{
|
||
margin-top: 40rpx;
|
||
width: 100%;
|
||
height: 140rpx;
|
||
background-image: url(https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/huiyuan.png);
|
||
background-size: 100%;
|
||
padding: 32rpx 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.member-label{
|
||
.member-title{
|
||
font-size: 32rpx;
|
||
color: #F1C68E;
|
||
}
|
||
.member-sub{
|
||
margin-top: 20rpx;
|
||
color: rgba(255,255,255,0.8);
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
.member-btn{
|
||
width: 140rpx;
|
||
height: 56rpx;
|
||
background: #F1C68E;
|
||
border-radius: 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28rpx;
|
||
color: rgba(0,0,0,0.8);
|
||
}
|
||
}
|
||
// .goods{
|
||
// display: flex;
|
||
// align-items: center;
|
||
// justify-content: space-between;
|
||
// padding: 42rpx 0 48rpx 0;
|
||
// .goods-item{
|
||
// width: 33%;
|
||
// display: flex;
|
||
// align-items: center;
|
||
// justify-content: center;
|
||
// flex-direction: column;
|
||
// .item-num{
|
||
// font-size: 32rpx;
|
||
// color: rgba(0,0,0,0.8);
|
||
// }
|
||
// .item-label{
|
||
// color: rgba(0,0,0,0.8);
|
||
// font-size: 24rpx;
|
||
// margin-top: 12rpx;
|
||
// }
|
||
// }
|
||
// }
|
||
.opc{
|
||
padding: 48rpx 50rpx 48rpx 52rpx;
|
||
display: grid;
|
||
gap: 48rpx;
|
||
grid-template-rows: 1fr;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
background: #FFFFFF;
|
||
box-shadow: 0px 0px 12rpx 0px rgba(218,218,218,0.5);
|
||
border-radius: 20rpx;
|
||
.opc-item{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
.opc-txt{
|
||
margin-top: 12rpx;
|
||
color: rgba(0,0,0,0.8);
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
.opc-view{
|
||
background: #FFFFFF;
|
||
box-shadow: 0px 0px 12rpx 0px rgba(218,218,218,0.5);
|
||
border-radius: 20rpx;
|
||
.opc-header{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 30rpx 40rpx 0 40rpx;
|
||
.header-title{
|
||
|
||
font-size: 24rpx;
|
||
color: #000;
|
||
font-weight: 500;
|
||
}
|
||
.header-right{
|
||
font-size: 24rpx;
|
||
color: #A1A1A1;
|
||
display: flex;
|
||
align-items: center;
|
||
.right-jt{
|
||
width: 12rpx;
|
||
height: 20rpx;
|
||
margin-left: 16rpx;
|
||
}
|
||
}
|
||
}
|
||
.order-opc{
|
||
padding: 30rpx 10rpx 48rpx 10rpx;
|
||
display: grid;
|
||
gap: 48rpx;
|
||
grid-template-rows: 1fr;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
.opc-item{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
.opc-txt{
|
||
margin-top: 12rpx;
|
||
color: rgba(0,0,0,0.8);
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
</style> |