qiubinghui
/
zhywpt-sp
Tarkkaile 1
Äänestä 0
Fork 0
Koodi Ongelmat 0 Pull-pyynnöt 0 Julkaisut 0 Wiki Activity
Selaa lähdekoodia

[Feature]修改圈存逻辑

yxb
杨毅 2 vuotta sitten
vanhempi
80a3fd55aa
commit
e5e2075276
1 muutettua tiedostoa jossa 393 lisäystä ja 385 poistoa
Jaettu näkymä Näytä diff tilastot
  1. 393
    385
      pages/service/service.vue

+ 393
- 385
pages/service/service.vue Näytä tiedosto

@@ -1,386 +1,394 @@
<template>

<view class="wrapper">
<navBar title="九州ETC"></navBar>
<view class="search-box">
<image :src="`${$imgUrl}service/icon-search.png`" class="icon"></image>
<input class="search" placeholder="请输入业务名称" />
</view>
<view class="content">
<view class="left">
<view :class="activeTab === '业务服务' ? 'menu active' : 'menu'" @click="tabHandle('业务服务')">
<view :class="activeTab === '业务服务' ?'border on':'border'"></view>
<view class="menu-text">业务服务</view>
</view>
<view :class="activeTab === '资金服务' ? 'menu active' : 'menu'" @click="tabHandle('资金服务')">
<view :class="activeTab === '资金服务' ?'border on':'border'"></view>
<view class="menu-text">资金服务</view>
</view>
<view :class="activeTab === '查询服务' ? 'menu active' : 'menu'" @click="tabHandle('查询服务')">
<view :class="activeTab === '查询服务' ?'border on':'border'"></view>
<view class="menu-text">查询服务</view>
</view>
<view :class="activeTab === '信息管理' ? 'menu active' : 'menu'" @click="tabHandle('信息管理')">
<view :class="activeTab === '信息管理' ?'border on':'border'"></view>
<view class="menu-text">信息管理</view>
</view>
<view :class="activeTab === '其他服务' ? 'menu active' : 'menu'" @click="tabHandle('其他服务')">
<view :class="activeTab === '其他服务' ?'border on':'border'"></view>
<view class="menu-text">其他服务</view>
</view>
</view>
<view class="right">
<view class="right-content" v-if="activeTab === '业务服务'">
<view class="item-box" @click="toNext('/after-sale/card-deactivation-activation/select-car')">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/kqty.png`" />
</view>
<view class="text">卡签停用</view>
</view>
<view class="item-box" @click="toNext('/after-sale/card-loss-reporting/select-car')">
<view class="item bg-orange" :style="{'--background':bgOrange}">
<image :src="`${$imgUrl}service/imgs/gs.png`" />
</view>
<view class="text text-orange">卡签挂失解除挂失</view>
</view>
<view class="item-box" @click="toNext('/after-sale/ETC-log-off/select-car')">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/zx.png`" />
</view>
<view class="text">卡签注销</view>
</view>
<view class="item-box">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/xxcx.png`" />
</view>
<view class="text">卡签信息重写</view>
</view>
<view class="item-box" @click="toNext('/after-sale/card-supplement/reissueForm')">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/hkhq.png`" />
</view>
<view class="text">补卡换卡补签换签</view>
</view>
<view class="item-box" @click="toNext('/after-sale/additional-equipment/additional-equipment-confirm')">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/zbOBUsb.png`" />
</view>
<view class="text">增补OBU设备</view>
</view>
<view class="item-box" @click="toNext('/after-sale/transfer-ownership/select-car-transfer')">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/etcgh.png`" />
</view>
<view class="text">ETC过户</view>
</view>
<view class="item-box" @click="toNext('/after-sale/pin-code-deblocking/select-car')">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/kpinjs.png`" />
</view>
<view class="text">卡Pin码解锁</view>
</view>
<view class="item-box" @click="toNext('/after-sale/equipment-upgrade/select-car')">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/kpinjs.png`" />
</view>
<view class="text">设备升级</view>
</view>
<view class="item-box" @click="toNext('/after-sale/card-Renewal/select-car')">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/kxq.png`" />
</view>
<view class="text">卡签续期</view>
</view>
<view class="item-box" @click="toNext('/after-sale/replace-equipment/select-car')">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}huan-icon.png`" />
</view>
<view class="text">更换设备</view>
</view>
<view class="item-box" @click="toNext('/after-sale/account-change/select-car')">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src='`${$imgUrl}huan-icon.png`' />
</view>
<view class="text">扣款账户变更</view>
</view>
<view class="item-box" @click="$util.navTo('/invoice/Invoice-mannager',true)">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src='`${$imgUrl}fa-icon.png`' />
</view>
<view class="text">发票管理</view>
</view>
<view class="item-box" @click="toNext('/after-sale/rescind-carId/rescind-carId-select')">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/jcclzy.png`" />
</view>
<view class="text">解除车牌占用</view>
</view>
<view class="item-box" @click="toNext('/after-sale/card-release-pending/select-car')">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/jcgq.png`" />
</view>
<view class="text">卡签解除挂起</view>
</view>
<view class="item-box" @click="toNext('/after-sale/activation-once-again/select-car')">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/obucxjh.png`" />
</view>
<view class="text">OBU重新激活</view>
</view>
<view class="item-box" @click="$util.navTo('/issueActivation/install-activation-order',true)">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/sbjh.png`" />
</view>
<view class="text">设备激活</view>
</view>
<view class="item-box" @click="$util.navTo('/issueActivation/old-user',true)">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/gwcfx.png`" />
</view>
<view class="text">公务车发行</view>
</view>
<view class="item-box" @click="$util.navTo('/after-sale/to-bookkeeping-card/select-car')">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/czkzjzk.png`" />
</view>
<view class="text">储值卡转记账卡</view>
</view>
</view>
<view class="right-content" v-if="activeTab === '资金服务'">
<view class="item-box">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/ktf.png`" />
</view>
<view class="text">卡退费</view>
</view>
<view class="item-box">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/qctf.png`" />
</view>
<view class="text">圈存退费</view>
</view>
<view class="item-box" @click="$util.navTo(`/service/capital/card-loop`)">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/czkqc.png`" />
</view>
<view class="text">储值卡圈存</view>
</view>
<view class="item-box" @click="$util.navTo('/after-sale/arrears/arrears')">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/qfbj.png`" />
</view>
<view class="text">欠费补缴</view>
</view>
<view class="item-box" @click="$util.navTo('/after-sale/refund-order-balance/select-car')">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/yebl.png`" />
</view>
<view class="text">余额补领</view>
</view>
<view class="item-box" @click="toNext('/orders/flowingWater')">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/bukae.png`" />
</view>
<view class="text">补卡额</view>
</view>
</view>
<view class="right-content" v-if="activeTab === '查询服务'">
<view class="item-box" @click="toNext('/service/search/etcFlowingWater')">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/etctxls.png`" />
</view>
<view class="text">ETC通行流水记录</view>
</view>
</view>
<view class="right-content" v-if="activeTab === '信息管理'">
<view class="item-box" @click="$util.navTo('/pages/bluetooth/bluetooth?routeType=4',true)">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/pj.png`" />
</view>
<view class="text">卡签信息</view>
</view>
</view>
<view class="right-content" v-if="activeTab === '其他服务'">
<view class="item-box" @click="$util.navTo('/service/remind/satisfaction-evaluate',true)">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/pj.png`" />
</view>
<view class="text">满意度评价</view>
</view>
<view class="item-box" @click="$util.navTo('/invoice/Invoice-mannager')">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/etctxls.png`" />
</view>
<view class="text">发票服务</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
import navBar from "@/components/nav-bar/nav-bar.vue";
import {ref} from "vue"
import {onLoad} from "@dcloudio/uni-app";
import {fileURL} from "@/datas/fileURL.js";
import {
msg,
} from "@/utils/utils";
const bgOrange = `url(${fileURL}image/service/bg-orange.png) center center no-repeat`;
const bgBlue = `url(${fileURL}image/service/bg-blue.png) center center no-repeat`;
const activeTab = ref("业务服务");
// 切换
function tabHandle(val) {
activeTab.value = val;
}

function toNext(url) {
uni.navigateTo({
url: url
});
// msg("该功能正在开发中，敬请期待！")
}
</script>

<style>
page {
height: 100%;
}

.wrapper {
display: flex;
background: linear-gradient(to left, #43A1E0 0%, #13E7C1 100%);
flex-direction: column;
height: 100%;
}

.search-box {
margin: 50rpx 40rpx;
height: 72rpx;
border-radius: 36rpx;
background: #F7F7F7;
display: flex;
justify-content: center;
align-items: center;
}

.search-box .icon {
width: 48rpx;
height: 48rpx;
margin: 0 20rpx;
}

.search-box .search {
flex: 1;
margin-right: 20rpx;
height: 100%;
padding: 0 10rpx;
font-size: 28rpx;
color: #00B38B;
}

.content {
display: flex;
flex: 1;
flex-grow: 1;
background: #fff;
border-radius: 30rpx 30rpx 0 0;
padding-top: 40rpx;
}

.left {
width: 180rpx;
border-right: 1px solid #DCDCDC;
margin-right: 29rpx;
}

.left .menu-text {
font-size: 26rpx;
color: #666666;
width: 120rpx;
}

.left .menu {
padding-left: 15rpx;
display: flex;
align-items: center;
margin: 20rpx 0 60rpx 0;
}

.left .active .menu-text {
font-weight: bold;
color: #00B38B;
font-size: 28rpx;
line-height: 32rpx;
}

.left .border {
width: 9rpx;
height: 26rpx;
border-radius: 4rpx;
margin-right: 20rpx;
}

.left .on {
background: linear-gradient(0deg, #43A1E0 0%, #13E7C1 100%);
font-size: 28rpx;
}

.right {
flex: 1;
}

.right-content {
display: flex;
flex-wrap: wrap;
}

.right .item-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-right: 30rpx;
margin-bottom: 39rpx;

}

.item {
width: 105rpx;
height: 105rpx;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20rpx;
}

.item image {
width: 64rpx;
height: 64rpx;
}

.right .text {
width: 105rpx;
font-size: 22rpx;
text-align: center;
height: 60rpx;
display: flex;
justify-content: center;
align-items: center;
margin-top: 19rpx;
color: #666666
}

.bg-blue {
background: var(--background);
}

.bg-orange {
background: var(--background);
}
.right .text-orange {
color: #FD8362
}
<template>
<view class="wrapper">
<navBar title="九州ETC"></navBar>
<view class="search-box">
<image :src="`${$imgUrl}service/icon-search.png`" class="icon"></image>
<input class="search" placeholder="请输入业务名称" />
</view>
<view class="content">
<view class="left">
<view :class="activeTab === '业务服务' ? 'menu active' : 'menu'" @click="tabHandle('业务服务')">
<view :class="activeTab === '业务服务' ?'border on':'border'"></view>
<view class="menu-text">业务服务</view>
</view>
<view :class="activeTab === '资金服务' ? 'menu active' : 'menu'" @click="tabHandle('资金服务')">
<view :class="activeTab === '资金服务' ?'border on':'border'"></view>
<view class="menu-text">资金服务</view>
</view>
<view :class="activeTab === '查询服务' ? 'menu active' : 'menu'" @click="tabHandle('查询服务')">
<view :class="activeTab === '查询服务' ?'border on':'border'"></view>
<view class="menu-text">查询服务</view>
</view>
<view :class="activeTab === '信息管理' ? 'menu active' : 'menu'" @click="tabHandle('信息管理')">
<view :class="activeTab === '信息管理' ?'border on':'border'"></view>
<view class="menu-text">信息管理</view>
</view>
<view :class="activeTab === '其他服务' ? 'menu active' : 'menu'" @click="tabHandle('其他服务')">
<view :class="activeTab === '其他服务' ?'border on':'border'"></view>
<view class="menu-text">其他服务</view>
</view>
</view>
<view class="right">
<view class="right-content" v-if="activeTab === '业务服务'">
<view class="item-box" @click="toNext('/after-sale/card-deactivation-activation/select-car')">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/kqty.png`" />
</view>
<view class="text">卡签停用</view>
</view>
<view class="item-box" @click="toNext('/after-sale/card-loss-reporting/select-car')">
<view class="item bg-orange" :style="{'--background':bgOrange}">
<image :src="`${$imgUrl}service/imgs/gs.png`" />
</view>
<view class="text text-orange">卡签挂失解除挂失</view>
</view>
<view class="item-box" @click="toNext('/after-sale/ETC-log-off/select-car')">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/zx.png`" />
</view>
<view class="text">卡签注销</view>
</view>
<view class="item-box">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/xxcx.png`" />
</view>
<view class="text">卡签信息重写</view>
</view>
<view class="item-box" @click="toNext('/after-sale/card-supplement/reissueForm')">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/hkhq.png`" />
</view>
<view class="text">补卡换卡补签换签</view>
</view>
<view class="item-box"
@click="toNext('/after-sale/additional-equipment/additional-equipment-confirm')">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/zbOBUsb.png`" />
</view>
<view class="text">增补OBU设备</view>
</view>
<view class="item-box" @click="toNext('/after-sale/transfer-ownership/select-car-transfer')">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/etcgh.png`" />
</view>
<view class="text">ETC过户</view>
</view>
<view class="item-box" @click="toNext('/after-sale/pin-code-deblocking/select-car')">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/kpinjs.png`" />
</view>
<view class="text">卡Pin码解锁</view>
</view>
<view class="item-box" @click="toNext('/after-sale/equipment-upgrade/select-car')">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/kpinjs.png`" />
</view>
<view class="text">设备升级</view>
</view>
<view class="item-box" @click="toNext('/after-sale/card-Renewal/select-car')">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/kxq.png`" />
</view>
<view class="text">卡签续期</view>
</view>
<view class="item-box" @click="toNext('/after-sale/replace-equipment/select-car')">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}huan-icon.png`" />
</view>
<view class="text">更换设备</view>
</view>
<view class="item-box" @click="toNext('/after-sale/account-change/select-car')">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src='`${$imgUrl}huan-icon.png`' />
</view>
<view class="text">扣款账户变更</view>
</view>
<view class="item-box" @click="$util.navTo('/invoice/Invoice-mannager',true)">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src='`${$imgUrl}fa-icon.png`' />
</view>
<view class="text">发票管理</view>
</view>
<view class="item-box" @click="toNext('/after-sale/rescind-carId/rescind-carId-select')">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/jcclzy.png`" />
</view>
<view class="text">解除车牌占用</view>
</view>
<view class="item-box" @click="toNext('/after-sale/card-release-pending/select-car')">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/jcgq.png`" />
</view>
<view class="text">卡签解除挂起</view>
</view>
<view class="item-box" @click="toNext('/after-sale/activation-once-again/select-car')">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/obucxjh.png`" />
</view>
<view class="text">OBU重新激活</view>
</view>
<view class="item-box" @click="$util.navTo('/issueActivation/install-activation-order',true)">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/sbjh.png`" />
</view>
<view class="text">设备激活</view>
</view>
<view class="item-box" @click="$util.navTo('/issueActivation/old-user',true)">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/gwcfx.png`" />
</view>
<view class="text">公务车发行</view>
</view>
<view class="item-box" @click="$util.navTo('/after-sale/to-bookkeeping-card/select-car')">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/czkzjzk.png`" />
</view>
<view class="text">储值卡转记账卡</view>
</view>
</view>
<view class="right-content" v-if="activeTab === '资金服务'">
<view class="item-box">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/ktf.png`" />
</view>
<view class="text">卡退费</view>
</view>
<view class="item-box">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/qctf.png`" />
</view>
<view class="text">圈存退费</view>
</view>
<view class="item-box" @click="$util.navTo(`/pages/recharge/recharge`)">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/czkqc.png`" />
</view>
<view class="text">储值卡圈存</view>
</view>
<view class="item-box" @click="$util.navTo('/after-sale/arrears/arrears')">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/qfbj.png`" />
</view>
<view class="text">欠费补缴</view>
</view>
<view class="item-box" @click="$util.navTo('/after-sale/refund-order-balance/select-car')">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/yebl.png`" />
</view>
<view class="text">余额补领</view>
</view>
<view class="item-box" @click="toNext('/orders/flowingWater')">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/bukae.png`" />
</view>
<view class="text">补卡额</view>
</view>
</view>
<view class="right-content" v-if="activeTab === '查询服务'">
<view class="item-box" @click="toNext('/service/search/etcFlowingWater')">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/etctxls.png`" />
</view>
<view class="text">ETC通行流水记录</view>
</view>
</view>
<view class="right-content" v-if="activeTab === '信息管理'">
<view class="item-box" @click="$util.navTo('/pages/bluetooth/bluetooth?routeType=4',true)">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/pj.png`" />
</view>
<view class="text">卡签信息</view>
</view>
</view>
<view class="right-content" v-if="activeTab === '其他服务'">
<view class="item-box" @click="$util.navTo('/service/remind/satisfaction-evaluate',true)">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/pj.png`" />
</view>
<view class="text">满意度评价</view>
</view>
<view class="item-box" @click="$util.navTo('/invoice/Invoice-mannager')">
<view class="item bg-blue" :style="{'--background':bgBlue}">
<image :src="`${$imgUrl}service/imgs/etctxls.png`" />
</view>
<view class="text">发票服务</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
import navBar from "@/components/nav-bar/nav-bar.vue";
import {
ref
} from "vue"
import {
onLoad
} from "@dcloudio/uni-app";
import {
fileURL
} from "@/datas/fileURL.js";
import {
msg,
} from "@/utils/utils";
const bgOrange = `url(${fileURL}image/service/bg-orange.png) center center no-repeat`;
const bgBlue = `url(${fileURL}image/service/bg-blue.png) center center no-repeat`;
const activeTab = ref("业务服务");
// 切换
function tabHandle(val) {
activeTab.value = val;
}
function toNext(url) {
uni.navigateTo({
url: url
});
// msg("该功能正在开发中，敬请期待！")
}
</script>
<style>
page {
height: 100%;
}
.wrapper {
display: flex;
background: linear-gradient(to left, #43A1E0 0%, #13E7C1 100%);
flex-direction: column;
height: 100%;
}
.search-box {
margin: 50rpx 40rpx;
height: 72rpx;
border-radius: 36rpx;
background: #F7F7F7;
display: flex;
justify-content: center;
align-items: center;
}
.search-box .icon {
width: 48rpx;
height: 48rpx;
margin: 0 20rpx;
}
.search-box .search {
flex: 1;
margin-right: 20rpx;
height: 100%;
padding: 0 10rpx;
font-size: 28rpx;
color: #00B38B;
}
.content {
display: flex;
flex: 1;
flex-grow: 1;
background: #fff;
border-radius: 30rpx 30rpx 0 0;
padding-top: 40rpx;
}
.left {
width: 180rpx;
border-right: 1px solid #DCDCDC;
margin-right: 29rpx;
}
.left .menu-text {
font-size: 26rpx;
color: #666666;
width: 120rpx;
}
.left .menu {
padding-left: 15rpx;
display: flex;
align-items: center;
margin: 20rpx 0 60rpx 0;
}
.left .active .menu-text {
font-weight: bold;
color: #00B38B;
font-size: 28rpx;
line-height: 32rpx;
}
.left .border {
width: 9rpx;
height: 26rpx;
border-radius: 4rpx;
margin-right: 20rpx;
}
.left .on {
background: linear-gradient(0deg, #43A1E0 0%, #13E7C1 100%);
font-size: 28rpx;
}
.right {
flex: 1;
}
.right-content {
display: flex;
flex-wrap: wrap;
}
.right .item-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-right: 30rpx;
margin-bottom: 39rpx;
}
.item {
width: 105rpx;
height: 105rpx;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20rpx;
}
.item image {
width: 64rpx;
height: 64rpx;
}
.right .text {
width: 105rpx;
font-size: 22rpx;
text-align: center;
height: 60rpx;
display: flex;
justify-content: center;
align-items: center;
margin-top: 19rpx;
color: #666666
}
.bg-blue {
background: var(--background);
}
.bg-orange {
background: var(--background);
}
.right .text-orange {
color: #FD8362
}
</style>

Write Preview
Loading…
Peruuta
Tallenna