|
|
|
<template>
|
|
|
|
<view>
|
|
|
|
<u-navbar title="我的" bgColor="transparent"></u-navbar>
|
|
|
|
<view class="topBgBox">
|
|
|
|
<view class="name flexA">
|
|
|
|
<!-- <image src="../../static/logo.png" mode=""></image>
|
|
|
|
<view>
|
|
|
|
<u-navbar title="我的" bgColor="transparent"></u-navbar>
|
|
|
|
<view class="topBgBox">
|
|
|
|
<view class="name flexA">
|
|
|
|
<!-- <image src="../../static/logo.png" mode=""></image>
|
|
|
|
<text>阅读</text> -->
|
|
|
|
<view class="avatar">
|
|
|
|
<open-data type="userAvatarUrl"></open-data>
|
|
|
|
</view>
|
|
|
|
<view class="nicName">
|
|
|
|
<open-data type="userNickName"></open-data>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="vipBox">
|
|
|
|
<image class="blackBg" src="/static/mineIc/blackBg.png" mode=""></image>
|
|
|
|
<view class="vip flexJ">
|
|
|
|
<view>
|
|
|
|
<view class="title flexA">
|
|
|
|
<image src="/static/mineIc/Vector.png" mode=""></image>
|
|
|
|
会员中心
|
|
|
|
</view>
|
|
|
|
<view class="tip">充值会员享更多权益</view>
|
|
|
|
</view>
|
|
|
|
<view class="btn flexC" @click="toRecharg">立即充值</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="mainBox">
|
|
|
|
<view class="orderClass">
|
|
|
|
<view class="classTitle flexJ" @click="orderStatus(5)">
|
|
|
|
<view class="my">我的订单</view>
|
|
|
|
<view class="all flexA">
|
|
|
|
全部
|
|
|
|
<image src="/static/mineIc/gayRight.png" mode=""></image>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="classBox flexJ">
|
|
|
|
<view class="items flexV" v-for="(item,index) in classList" :key="item.id" @click="orderStatus(index)">
|
|
|
|
<view class="badge">
|
|
|
|
<u-badge absolute :offset="[-4,-10]" color="#FFFFFF" bgColor="#F74637" max="99"
|
|
|
|
:value="item.num"></u-badge>
|
|
|
|
<image :src="item.ic" mode=""></image>
|
|
|
|
</view>
|
|
|
|
<text>{{item.name}}</text>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="functionBox">
|
|
|
|
<view class="item flexJ" v-for="(item,index) in functionList" :key="item.id" @click="functionC(index)">
|
|
|
|
<view class="itemIc flexA">
|
|
|
|
<image :src="item.ic" mode=""></image>
|
|
|
|
<text>{{item.name}}</text>
|
|
|
|
</view>
|
|
|
|
<image src="/static/mineIc/gayRight.png" mode=""></image>
|
|
|
|
</view>
|
|
|
|
<view class="myService flexJ">
|
|
|
|
<view class="service flexA">
|
|
|
|
<image src="/static/indexIc/service.png" mode=""></image>
|
|
|
|
<text>我的客服</text>
|
|
|
|
</view>
|
|
|
|
<image src="/static/mineIc/gayRight.png" mode=""></image>
|
|
|
|
<button open-type="contact"></button>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<!-- <view class="avatar"> -->
|
|
|
|
<img class="avatar" :src="userInfo.avatar" alt="" />
|
|
|
|
<!-- <open-data type="userAvatarUrl"></open-data> -->
|
|
|
|
<!-- </view> -->
|
|
|
|
<view class="nicName">
|
|
|
|
{{ userInfo.nickname }}
|
|
|
|
<!-- <open-data type="userNickName"></open-data> -->
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="vipBox">
|
|
|
|
<image class="blackBg" src="/static/mineIc/blackBg.png" mode=""></image>
|
|
|
|
<view class="vip flexJ">
|
|
|
|
<view>
|
|
|
|
<view class="title flexA">
|
|
|
|
<image src="/static/mineIc/Vector.png" mode=""></image>
|
|
|
|
会员中心
|
|
|
|
</view>
|
|
|
|
<view class="tip">充值会员享更多权益</view>
|
|
|
|
</view>
|
|
|
|
<view class="btn flexC" @click="toRecharg">立即充值</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="mainBox">
|
|
|
|
<view class="orderClass">
|
|
|
|
<view class="classTitle flexJ" @click="orderStatus(5)">
|
|
|
|
<view class="my">我的订单</view>
|
|
|
|
<view class="all flexA">
|
|
|
|
全部
|
|
|
|
<image src="/static/mineIc/gayRight.png" mode=""></image>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="classBox flexJ">
|
|
|
|
<view class="items flexV" v-for="(item, index) in classList" :key="item.id" @click="orderStatus(index)">
|
|
|
|
<view class="badge">
|
|
|
|
<u-badge absolute :offset="[-4, -10]" color="#FFFFFF" bgColor="#F74637" max="99" :value="item.num"></u-badge>
|
|
|
|
<image :src="item.ic" mode=""></image>
|
|
|
|
</view>
|
|
|
|
<text>{{ item.name }}</text>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="functionBox">
|
|
|
|
<view class="item flexJ" v-for="(item, index) in functionList" :key="item.id" @click="functionC(index)">
|
|
|
|
<view class="itemIc flexA">
|
|
|
|
<image :src="item.ic" mode=""></image>
|
|
|
|
<text>{{ item.name }}</text>
|
|
|
|
</view>
|
|
|
|
<image src="/static/mineIc/gayRight.png" mode=""></image>
|
|
|
|
</view>
|
|
|
|
<view class="myService flexJ">
|
|
|
|
<view class="service flexA">
|
|
|
|
<image src="/static/indexIc/service.png" mode=""></image>
|
|
|
|
<text>我的客服</text>
|
|
|
|
</view>
|
|
|
|
<image src="/static/mineIc/gayRight.png" mode=""></image>
|
|
|
|
<button open-type="contact"></button>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
import { ref,reactive} from 'vue'
|
|
|
|
import {onShow,onLoad} from '@dcloudio/uni-app'
|
|
|
|
import { getMine } from '@/api/'
|
|
|
|
onShow(()=>{
|
|
|
|
getMines()
|
|
|
|
})
|
|
|
|
let classList = reactive([{id:1,name:'待付款',num:0,ic:'/static/mineIc/obligation.png'},
|
|
|
|
{id:2,name:'待发货',num:0,ic:'/static/mineIc/shipped.png'},
|
|
|
|
{id:3,name:'待收货',num:0,ic:'/static/mineIc/received.png'},
|
|
|
|
{id:4,name:'待评价',num:0,ic:'/static/mineIc/evaluated.png'},
|
|
|
|
{id:5,name:'售后',num:0,ic:'/static/mineIc/afterSales.png'}])
|
|
|
|
let functionList = reactive([{id:1,name:'我的余额',ic:'/static/mineIc/balance.png'},
|
|
|
|
{id:2,name:'我的积分',ic:'/static/mineIc/collect.png'},
|
|
|
|
{id:3,name:'我的地址',ic:'/static/mineIc/addressBlack.png'}])
|
|
|
|
let info = ref({})
|
|
|
|
// 订单跳转
|
|
|
|
const orderStatus = (index)=> {
|
|
|
|
uni.navigateTo({
|
|
|
|
url:`/pages/mine/myOrder?status=${index==5 ? 0 : Number(index) + 1}`
|
|
|
|
})
|
|
|
|
}
|
|
|
|
// 功能跳转
|
|
|
|
const functionC = (index)=> {
|
|
|
|
// uni.navigateTo({
|
|
|
|
// url:'/pages/mine/' + ( index < 2 ? 'myPoints' : index==1 ? 'myCollection' :'myAddress' )
|
|
|
|
// })
|
|
|
|
if(index < 2) {
|
|
|
|
uni.navigateTo({
|
|
|
|
url:`/pages/mine/myPoints?type=${index}`
|
|
|
|
})
|
|
|
|
} else {
|
|
|
|
uni.navigateTo({
|
|
|
|
url:'/pages/mine/myAddress'
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// 跳转充值中心
|
|
|
|
const toRecharg = ()=> {
|
|
|
|
uni.navigateTo({
|
|
|
|
url:'/pages/mine/recharge'
|
|
|
|
})
|
|
|
|
}
|
|
|
|
// 个人信息
|
|
|
|
const getMines = async ()=>{
|
|
|
|
try {
|
|
|
|
const res = await getMine()
|
|
|
|
classList[0].num = res.dfk
|
|
|
|
classList[1].num = res.dfh
|
|
|
|
classList[2].num = res.dsh
|
|
|
|
classList[3].num = res.ywc
|
|
|
|
classList[4].num = res.yth
|
|
|
|
info.value = res.userInfo
|
|
|
|
console.log('getMine', res)
|
|
|
|
// 保存数据
|
|
|
|
} catch (err) {
|
|
|
|
uni.showToast({ title:err,icon:'none' })
|
|
|
|
console.log('getMine', err)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
import { ref, reactive } from 'vue'
|
|
|
|
import { onShow, onLoad } from '@dcloudio/uni-app'
|
|
|
|
import { getMine } from '@/api/'
|
|
|
|
|
|
|
|
const userInfo = ref({})
|
|
|
|
|
|
|
|
// userInfo.value = uni.getStorageSync('userInfo') ?? {}
|
|
|
|
|
|
|
|
onShow(() => {
|
|
|
|
getMines()
|
|
|
|
})
|
|
|
|
let classList = reactive([
|
|
|
|
{ id: 1, name: '待付款', num: 0, ic: '/static/mineIc/obligation.png' },
|
|
|
|
{ id: 2, name: '待发货', num: 0, ic: '/static/mineIc/shipped.png' },
|
|
|
|
{ id: 3, name: '待收货', num: 0, ic: '/static/mineIc/received.png' },
|
|
|
|
{ id: 4, name: '待评价', num: 0, ic: '/static/mineIc/evaluated.png' },
|
|
|
|
{ id: 5, name: '售后', num: 0, ic: '/static/mineIc/afterSales.png' }
|
|
|
|
])
|
|
|
|
let functionList = reactive([
|
|
|
|
{ id: 1, name: '我的余额', ic: '/static/mineIc/balance.png' },
|
|
|
|
{ id: 2, name: '我的积分', ic: '/static/mineIc/collect.png' },
|
|
|
|
{ id: 3, name: '我的地址', ic: '/static/mineIc/addressBlack.png' }
|
|
|
|
])
|
|
|
|
let info = ref({})
|
|
|
|
// 订单跳转
|
|
|
|
const orderStatus = index => {
|
|
|
|
uni.navigateTo({
|
|
|
|
url: `/pages/mine/myOrder?status=${index == 5 ? 0 : Number(index) + 1}`
|
|
|
|
})
|
|
|
|
}
|
|
|
|
// 功能跳转
|
|
|
|
const functionC = index => {
|
|
|
|
// uni.navigateTo({
|
|
|
|
// url:'/pages/mine/' + ( index < 2 ? 'myPoints' : index==1 ? 'myCollection' :'myAddress' )
|
|
|
|
// })
|
|
|
|
if (index < 2) {
|
|
|
|
uni.navigateTo({
|
|
|
|
url: `/pages/mine/myPoints?type=${index}`
|
|
|
|
})
|
|
|
|
} else {
|
|
|
|
uni.navigateTo({
|
|
|
|
url: '/pages/mine/myAddress'
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// 跳转充值中心
|
|
|
|
const toRecharg = () => {
|
|
|
|
uni.navigateTo({ url: '/pages/mine/recharge' })
|
|
|
|
}
|
|
|
|
// 个人信息
|
|
|
|
const getMines = async () => {
|
|
|
|
try {
|
|
|
|
const res = await getMine()
|
|
|
|
classList[0].num = res.dfk
|
|
|
|
classList[1].num = res.dfh
|
|
|
|
classList[2].num = res.dsh
|
|
|
|
classList[3].num = res.dpj
|
|
|
|
classList[4].num = res.yth
|
|
|
|
userInfo.value = res.userInfo
|
|
|
|
userInfo.value.avatar = res.avatar
|
|
|
|
console.log('getMine', res)
|
|
|
|
// 保存数据
|
|
|
|
} catch (err) {
|
|
|
|
uni.showToast({ title: err, icon: 'none' })
|
|
|
|
console.log('getMine', err)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
.u-icon__icon {
|
|
|
|
display: none !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
page {
|
|
|
|
background-color: #F6F8FA;
|
|
|
|
}
|
|
|
|
|
|
|
|
.topBgBox {
|
|
|
|
width: 100%;
|
|
|
|
height: 520rpx;
|
|
|
|
padding: 202rpx 24rpx 26rpx;
|
|
|
|
box-sizing: border-box;
|
|
|
|
opacity: 1;
|
|
|
|
background: linear-gradient(180deg, #ffece3ff 0%, #f7f8faff 100%);
|
|
|
|
|
|
|
|
.name {
|
|
|
|
margin-bottom: 32rpx;
|
|
|
|
|
|
|
|
.avatar {
|
|
|
|
overflow: hidden;
|
|
|
|
margin-right: 40rpx;
|
|
|
|
width: 120rpx;
|
|
|
|
height: 120rpx;
|
|
|
|
border-radius: 50% !important;
|
|
|
|
}
|
|
|
|
.nicName {
|
|
|
|
color: #000000e6;
|
|
|
|
font-size: 40rpx;
|
|
|
|
font-weight: 700;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.vipBox {
|
|
|
|
position: relative;
|
|
|
|
width: 702rpx;
|
|
|
|
height: 140rpx;
|
|
|
|
|
|
|
|
.blackBg {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.vip {
|
|
|
|
width: 642rpx;
|
|
|
|
position: absolute;
|
|
|
|
top: 28rpx;
|
|
|
|
left: 28rpx;
|
|
|
|
|
|
|
|
.title {
|
|
|
|
color: #ffdcb5ff;
|
|
|
|
font-size: 30rpx;
|
|
|
|
font-weight: 700;
|
|
|
|
|
|
|
|
image {
|
|
|
|
margin-right: 8rpx;
|
|
|
|
width: 58rpx;
|
|
|
|
height: 26rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.btn {
|
|
|
|
width: 136rpx;
|
|
|
|
height: 56rpx;
|
|
|
|
border-radius: 34rpx;
|
|
|
|
color: #361e0dff;
|
|
|
|
font-size: 26rpx;
|
|
|
|
font-weight: 700;
|
|
|
|
background: linear-gradient(142.6deg, #fbcd9bff 0%, #ebc295ff 100%);
|
|
|
|
box-shadow: inset 0 -6rpx 8rpx 0 #9760217d;
|
|
|
|
}
|
|
|
|
|
|
|
|
.tip {
|
|
|
|
color: #ffffffb3;
|
|
|
|
font-size: 22rpx;
|
|
|
|
margin-top: 16rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.mainBox {
|
|
|
|
width: 100%;
|
|
|
|
padding: 0 24rpx;
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
.orderClass {
|
|
|
|
width: 100%;
|
|
|
|
padding: 28rpx 24rpx;
|
|
|
|
box-sizing: border-box;
|
|
|
|
background: #fff;
|
|
|
|
|
|
|
|
.classTitle {
|
|
|
|
margin-bottom: 28rpx;
|
|
|
|
|
|
|
|
.my {
|
|
|
|
color: #323233ff;
|
|
|
|
font-size: 30rpx;
|
|
|
|
font-weight: 700;
|
|
|
|
}
|
|
|
|
|
|
|
|
.all {
|
|
|
|
color: #969799ff;
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
|
|
|
image {
|
|
|
|
margin: 4rpx 0 0 12rpx;
|
|
|
|
width: 16rpx;
|
|
|
|
height: 32rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.classBox {
|
|
|
|
|
|
|
|
.items {
|
|
|
|
.badge {
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
image {
|
|
|
|
width: 48rpx;
|
|
|
|
height: 48rpx;
|
|
|
|
margin-bottom: 16rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
text {
|
|
|
|
color: #646566ff;
|
|
|
|
font-size: 24rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.functionBox {
|
|
|
|
width: 100%;
|
|
|
|
padding: 0 32rpx 0 24rpx;
|
|
|
|
box-sizing: border-box;
|
|
|
|
border-radius: 34rpx;
|
|
|
|
margin-top: 24rpx;
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
|
|
.item {
|
|
|
|
width: 100%;
|
|
|
|
height: 104rpx;
|
|
|
|
|
|
|
|
.itemIc {
|
|
|
|
text {
|
|
|
|
color: #000000e6;
|
|
|
|
font-size: 28rpx;
|
|
|
|
}
|
|
|
|
|
|
|
|
image {
|
|
|
|
margin-right: 24rpx;
|
|
|
|
width: 36rpx;
|
|
|
|
height: 36rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
image {
|
|
|
|
width: 16rpx;
|
|
|
|
height: 32rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.myService {
|
|
|
|
position: relative;
|
|
|
|
width: 100%;
|
|
|
|
height: 104rpx;
|
|
|
|
|
|
|
|
.service {
|
|
|
|
|
|
|
|
image {
|
|
|
|
margin-right: 24rpx;
|
|
|
|
width: 36rpx;
|
|
|
|
height: 36rpx;
|
|
|
|
}
|
|
|
|
|
|
|
|
text {
|
|
|
|
color: #000000e6;
|
|
|
|
font-size: 28rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
button {
|
|
|
|
position: absolute;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
background-color: transparent;
|
|
|
|
&::after {
|
|
|
|
border: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
image {
|
|
|
|
width: 16rpx;
|
|
|
|
height: 32rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.u-icon__icon {
|
|
|
|
display: none !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
page {
|
|
|
|
background-color: #f6f8fa;
|
|
|
|
}
|
|
|
|
|
|
|
|
.topBgBox {
|
|
|
|
width: 100%;
|
|
|
|
height: 520rpx;
|
|
|
|
padding: 202rpx 24rpx 26rpx;
|
|
|
|
box-sizing: border-box;
|
|
|
|
opacity: 1;
|
|
|
|
background: linear-gradient(180deg, #ffece3ff 0%, #f7f8faff 100%);
|
|
|
|
|
|
|
|
.name {
|
|
|
|
margin-bottom: 32rpx;
|
|
|
|
|
|
|
|
.avatar {
|
|
|
|
overflow: hidden;
|
|
|
|
margin-right: 40rpx;
|
|
|
|
width: 120rpx;
|
|
|
|
height: 120rpx;
|
|
|
|
border-radius: 50% !important;
|
|
|
|
}
|
|
|
|
.nicName {
|
|
|
|
color: #000000e6;
|
|
|
|
font-size: 40rpx;
|
|
|
|
font-weight: 700;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.vipBox {
|
|
|
|
position: relative;
|
|
|
|
width: 702rpx;
|
|
|
|
height: 140rpx;
|
|
|
|
|
|
|
|
.blackBg {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.vip {
|
|
|
|
width: 642rpx;
|
|
|
|
position: absolute;
|
|
|
|
top: 28rpx;
|
|
|
|
left: 28rpx;
|
|
|
|
|
|
|
|
.title {
|
|
|
|
color: #ffdcb5ff;
|
|
|
|
font-size: 30rpx;
|
|
|
|
font-weight: 700;
|
|
|
|
|
|
|
|
image {
|
|
|
|
margin-right: 8rpx;
|
|
|
|
width: 58rpx;
|
|
|
|
height: 26rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.btn {
|
|
|
|
width: 136rpx;
|
|
|
|
height: 56rpx;
|
|
|
|
border-radius: 34rpx;
|
|
|
|
color: #361e0dff;
|
|
|
|
font-size: 26rpx;
|
|
|
|
font-weight: 700;
|
|
|
|
background: linear-gradient(142.6deg, #fbcd9bff 0%, #ebc295ff 100%);
|
|
|
|
box-shadow: inset 0 -6rpx 8rpx 0 #9760217d;
|
|
|
|
}
|
|
|
|
|
|
|
|
.tip {
|
|
|
|
color: #ffffffb3;
|
|
|
|
font-size: 22rpx;
|
|
|
|
margin-top: 16rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.mainBox {
|
|
|
|
width: 100%;
|
|
|
|
padding: 0 24rpx;
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
.orderClass {
|
|
|
|
width: 100%;
|
|
|
|
padding: 28rpx 24rpx;
|
|
|
|
box-sizing: border-box;
|
|
|
|
background: #fff;
|
|
|
|
|
|
|
|
.classTitle {
|
|
|
|
margin-bottom: 28rpx;
|
|
|
|
|
|
|
|
.my {
|
|
|
|
color: #323233ff;
|
|
|
|
font-size: 30rpx;
|
|
|
|
font-weight: 700;
|
|
|
|
}
|
|
|
|
|
|
|
|
.all {
|
|
|
|
color: #969799ff;
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
|
|
|
image {
|
|
|
|
margin: 4rpx 0 0 12rpx;
|
|
|
|
width: 16rpx;
|
|
|
|
height: 32rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.classBox {
|
|
|
|
.items {
|
|
|
|
.badge {
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
image {
|
|
|
|
width: 48rpx;
|
|
|
|
height: 48rpx;
|
|
|
|
margin-bottom: 16rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
text {
|
|
|
|
color: #646566ff;
|
|
|
|
font-size: 24rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.functionBox {
|
|
|
|
width: 100%;
|
|
|
|
padding: 0 32rpx 0 24rpx;
|
|
|
|
box-sizing: border-box;
|
|
|
|
border-radius: 34rpx;
|
|
|
|
margin-top: 24rpx;
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
|
|
.item {
|
|
|
|
width: 100%;
|
|
|
|
height: 104rpx;
|
|
|
|
|
|
|
|
.itemIc {
|
|
|
|
text {
|
|
|
|
color: #000000e6;
|
|
|
|
font-size: 28rpx;
|
|
|
|
}
|
|
|
|
|
|
|
|
image {
|
|
|
|
margin-right: 24rpx;
|
|
|
|
width: 36rpx;
|
|
|
|
height: 36rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
image {
|
|
|
|
width: 16rpx;
|
|
|
|
height: 32rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.myService {
|
|
|
|
position: relative;
|
|
|
|
width: 100%;
|
|
|
|
height: 104rpx;
|
|
|
|
|
|
|
|
.service {
|
|
|
|
image {
|
|
|
|
margin-right: 24rpx;
|
|
|
|
width: 36rpx;
|
|
|
|
height: 36rpx;
|
|
|
|
}
|
|
|
|
|
|
|
|
text {
|
|
|
|
color: #000000e6;
|
|
|
|
font-size: 28rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
button {
|
|
|
|
position: absolute;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
background-color: transparent;
|
|
|
|
&::after {
|
|
|
|
border: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
image {
|
|
|
|
width: 16rpx;
|
|
|
|
height: 32rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
