拉取叶代码

This commit is contained in:
duan
2024-09-26 11:00:57 +08:00
50 changed files with 9527 additions and 1095 deletions

View File

@@ -52,6 +52,11 @@
icon: '/static/indexImg/icon-cashier.svg',
pageUrl: 'PAGES_QUICK_PAY',
},
{
title: '设置中心',
icon: '/static/indexImg/icon-cashier.svg',
pageUrl: 'PAGES_SHOP_SETUP',
},
{
title: '商品管理',
icon: '/static/indexImg/icon-product-control.svg',
@@ -152,8 +157,7 @@
{
title: '成员管理',
icon: '/static/indexImg/icon-staff.svg',
pageUrl: 'PAGES_USER',
entId: 'ENT_UR_USER_LIST'
pageUrl: 'PAGES_USER'
},
{
title: '数据中心',

View File

@@ -0,0 +1,59 @@
<template>
<view class="page-wrapper">
<view class="content">
<up-textarea v-model="vdata.value" placeholder="请输入内容" maxlength="20" border="none" placeholderStyle="font-size: 28rpx" count></up-textarea>
</view>
<view class="save" @tap="save">保存</view>
</view>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
const vdata = reactive({
value: "",
name: ""
});
onLoad((options) => {
vdata.value = options.value;
vdata.name = options.name;
})
let save = (e) => {
// console.log(e)
uni.$emit('refreshPreviousPage', {name: vdata.name, value: vdata.value});
uni.navigateBack();
}
</script>
<style lang="scss" scoped>
.page-wrapper {
min-height: calc(100vh - 90rpx);
padding: 32rpx 28rpx;
box-sizing: border-box;
.content{
width: 100%;
background-color: #fff;
border-radius: 18rpx;
}
.save{
width: 100%;
height: 80rpx;
line-height: 80rpx;
text-align: center;
background: #318AFE;
border-radius: 12rpx;
font-weight: bold;
font-size: 32rpx;
color: #FFFFFF;
margin-top: 48rpx;
}
}
</style>

523
pages/shopSetUp/index.vue Normal file
View File

@@ -0,0 +1,523 @@
<template>
<view class="page-wrapper">
<view class="page-cell">
<view class="label">头像</view>
<view class="right" @tap="uploadImg.preview()">
<up-avatar class="fileImg" :src="vdata.shopInfo.coverImg?vdata.shopInfo.coverImg:''"></up-avatar>
<view class="file" @tap="chooseAndUploadAvatar('coverImg')"></view>
</view>
</view>
<!-- <view class="page-cell m" @tap="updateValue('商户名称','shopName',vdata.shopInfo.shopName)"> -->
<view class="page-cell m" @tap="go.to('PAGES_SHOP_EDITVAL',{name:'shopName',value: vdata.shopInfo.shopName})">
<view class="label">商户名称</view>
<view class="right"><view>{{ vdata.shopInfo.shopName }}</view><up-icon name="arrow-right" color="#999999" size="15"></up-icon></view>
</view>
<view class="page-cell m" @tap="go.to('PAGES_SHOP_EDITVAL',{name:'phone',value: vdata.shopInfo.phone})">
<view class="label">商户电话</view>
<view class="right"><view>{{ vdata.shopInfo.phone }}</view><up-icon name="arrow-right" color="#999999" size="15"></up-icon></view>
</view>
<!-- <view class="page-cell m" >
<view class="label">到期时间</view>
<view class="right"><view>{{ vdata.shopInfo.realname }}</view><up-icon name="arrow-right" color="#999999" size="15"></up-icon></view>
</view> -->
<view class="page-cell m">
<view class="label">营业状态</view>
<view class="right"><up-switch v-model="vdata.shopInfo.status" size="20" :inactiveValue="2" :activeValue="1" activeColor="#0FC161" @change="switchChange('status')"></up-switch></view>
</view>
<view class="page-cell m" @tap="showMap">
<view class="label">门店详细地址</view>
<view class="right"><view>{{ vdata.shopInfo.address }}</view><up-icon name="arrow-right" color="#999999" size="15"></up-icon></view>
</view>
<view class="page-cell">
<view class="label">堂食功能</view>
<view class="right"><up-switch v-model="vdata.dineIn" size="20" activeColor="#0FC161" @change="switchChange('eatModel')"></up-switch></view>
</view>
<view class="page-cell">
<view class="label">允许打包</view>
<view class="right"><up-switch v-model="vdata.takeout" size="20"activeColor="#0FC161" @change="switchChange('eatModel')"></up-switch></view>
</view>
<view class="page-cell m">
<view class="label">是否开启会员支付</view>
<view class="right"><up-switch v-model="vdata.shopInfo.isUseVip" size="20" :inactiveValue="0" :activeValue="1" activeColor="#0FC161" @change="switchChange('isUseVip')"></up-switch></view>
</view>
<view class="page-cell">
<view class="label">桌位费<view v-if="vdata.isTableFee" class="tableFee" @tap="go.to('PAGES_SHOP_EDITVAL',{name:'tableFee',value: vdata.shopInfo.tableFee})">{{vdata.shopInfo.tableFee}}</view></view>
<view class="right">
<view>
<up-checkbox-group><up-checkbox label="免桌位费" v-model:checked="vdata.isTableFee" activeColor="#0FC161" shape="circle" @change="isTableFeeChange"> </up-checkbox></up-checkbox-group>
</view><up-icon name="arrow-right" color="#999999" size="15"></up-icon>
</view>
</view>
<view class="page-cell" @tap="go.to('PAGES_SHOP_QRCODE',{paymentQrcode: vdata.shopInfo.paymentQrcode})">
<view class="label">店铺收款码</view>
<view class="right"><up-icon name="arrow-right" color="#999999" size="15"></up-icon></view>
</view>
<view class="page-cell column" >
<view class="label">店铺图片</view>
<view class="extendList">
<view class="extendTab">
<view class="extendTab_item"
v-for="(item,index) in vdata.extendList" :key="index"
:class="{'active':vdata.extendIndex==index}"
@click="extendTabClick(item,index)"
>{{item.title}}</view>
</view>
<view class="extend_content">
<view class="preview">
<up-image class="index_bg" v-if="'index_bg' == vdata.extendInfo.autokey" :src="vdata.extendInfo.value"></up-image>
<up-image class="my_bg" v-if="'my_bg' == vdata.extendInfo.autokey" :src="vdata.extendInfo.value"></up-image>
<up-image class="bg" v-if="'member_bg' == vdata.extendInfo.autokey" :src="'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/cashier_admin_app_shopSet/'+vdata.extendInfo.autokey+'1.png'" ></up-image>
<up-image class="member_bg" v-if="'member_bg' == vdata.extendInfo.autokey" :src="vdata.extendInfo.value"></up-image>
<up-image class="shopinfo_bg" v-if="'shopinfo_bg' == vdata.extendInfo.autokey" :src="vdata.extendInfo.value"></up-image>
<view class="shopinfo_bg_f" v-if="'shopinfo_bg' == vdata.extendInfo.autokey"></view>
<up-image class="bg" :src="'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/cashier_admin_app_shopSet/'+vdata.extendInfo.autokey+'.png'" ></up-image>
</view>
<view class="extend_img">
<view class="extend_title">{{vdata.extendInfo.title}}背景图片</view>
<view class="fileUp">
<up-image :src="vdata.extendInfo.value"></up-image>
<view class="file" @tap="chooseAndUploadAvatar('extendUp')"></view>
</view>
</view>
</view>
</view>
</view>
<view class="cutShop" @tap="go.to('PAGES_SHOP_LIST')">切换门店</view>
</view>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app';
import { getShopInfo , editShopInfo, getShopExtend, editShopExtend } from '@/http/yskApi/shop.js'
import storageManage from '@/commons/utils/storageManage.js'
import go from '@/commons/utils/go.js'
import infoBox from '@/commons/utils/infoBox.js'
import { $uploadFile } from '@/http/yskApi/file.js'
const uploadImg = ref()
const phone = ref(null)
const vdata = reactive({
shopInfo: {},
extendList: [],
extendIndex: 0,
extendInfo: {},
dineIn: false,
takeout: false,
isTableFee: false,
label: "",
type: "",
inputValue: "",
inputType: "text",
maxLength: '999',
})
onMounted(() => {
shopExtend();
})
onShow(() => {
shopInfo();
uni.$on('refreshPreviousPage', (params) => {
// 这里执行刷新数据的操作例如重新调用API获取数据
refreshData(params);
});
})
let refreshData = (e) => {
let params = {
id : vdata.shopInfo.id,
}
for(let item in params){
params[e.name] = e.value;
}
vdata.type = e.name;
vdata.inputValue = e.value;
updateShopInfo(params,'input')
}
/**
* 获取店铺信息
*/
const shopInfo = () => {
getShopInfo(storageManage.shopId()).then((res) => {
vdata.isTableFee = res.isTableFee == 1 ? true: false;
if (res.eatModel.join(",").indexOf("dine-in") != -1) {
vdata.dineIn = true
}
if (res.eatModel.join(",").indexOf("take-out") != -1) {
vdata.takeout = true
}
vdata.shopInfo = res;
})
}
/**
* 获取店铺图片
*/
let shopExtend = () => {
getShopExtend({
autokey: "index_bg",
}).then((res) => {
if ( res.content && res.content.length > 0 ) {
vdata.extendList = res.content;
vdata.extendIndex = 0;
vdata.extendInfo = res.content[0];
}
})
}
/**
* 修改
*/
let updateShopInfo = (params,type) => {
editShopInfo(params).then((res) => {
if (type && type == "input") {
console.log(vdata.type)
switch ( vdata.type ){
case "shopName":
vdata.shopInfo.shopName = vdata.inputValue;
break;
case "phone":
vdata.shopInfo.phone = vdata.inputValue;
break;
case "tableFee":
vdata.shopInfo.tableFee = vdata.inputValue;
break;
}
}
})
}
/**
* 修改
*/
let updateShopExtend = () => {
editShopExtend(vdata.extendInfo).then((res) => {
})
}
/**
* 上传头像
*/
let chooseAndUploadAvatar = ( type ) => {
// 选择图片
uni.chooseImage({
count: 1, // 默认为1只选择一张图片
sizeType: ['original', 'compressed'], // 图片质量,原图或压缩
sourceType: ['album', 'camera'], // 图片来源,相册或相机
success: (res) => {
let file = res.tempFiles[0];
console.log(res)
$uploadFile(file).then(res => {
console.log(res);
if ( type == "coverImg") {
vdata.shopInfo.coverImg = res.data[0];
let params = {
id : vdata.shopInfo.id,
coverImg : vdata.shopInfo.coverImg,
}
updateShopInfo(params)
}
if ( type == "extendUp") {
vdata.extendInfo.value = res.data[0];
updateShopExtend()
}
}).catch(res=>{
console.log(res);
if(res.errMsg){
uni.showToast({
title:'图片大小超出限制',
icon:'error'
})
}
})
},
fail: chooseImageError => {
// 选择图片失败处理逻辑
console.log('choose image fail:', chooseImageError);
}
});
}
/**
* 店铺图片TAB切换
*/
let extendTabClick = (item,index) => {
vdata.extendInfo = item;
vdata.extendIndex = index;
}
/**
* 是否免桌位费
*/
let isTableFeeChange = (e) => {
if ( e ) {
vdata.isTableFee = true;
} else {
vdata.isTableFee = false;
}
switchChange('isTableFee')
}
/**
* 修改
*/
let switchChange = ( type ) => {
let params = {
id : vdata.shopInfo.id,
}
switch ( type ){
case "isUseVip":
params.lng = vdata.shopInfo.lng;
params.lat = vdata.shopInfo.lat;
params.address = vdata.shopInfo.address;
break;
case "status":
params.status = vdata.shopInfo.status;
break;
case "eatModel":
params.eatModel = [];
if ( vdata.dineIn ) {
params.eatModel.push('dine-in');
}
if ( vdata.takeout ) {
params.eatModel.push('take-out');
}
break;
case "isUseVip":
params.isUseVip = vdata.shopInfo.isUseVip;
break;
case "isTableFee":
if ( vdata.isTableFee ) {
params.isTableFee = 1;
} else {
params.isTableFee = 0;
}
break;
}
updateShopInfo(params);
}
/**
* 选择地图
*/
let showMap = () => {
// 本地 测试选择
// return test();
// 打开地图 && 获取省市县
uni.chooseLocation().then((res) => {
console.log(res);
vdata.shopInfo.lng = res.longitude.toFixed(6); // IOS 小程序中: 经纬度12位。
vdata.shopInfo.lat = res.latitude.toFixed(6);
vdata.shopInfo.address = res.name;
switchChange('address')
});
}
</script>
<style lang="scss" scoped>
.page-wrapper{
background-color: #F8F8F8;
padding-bottom: 32rpx;
.page-cell {
display: flex;
justify-content: space-between;
align-items: center;
padding: 32rpx 28rpx;
box-sizing: border-box;
background-color: #fff;
.label {
font-weight: bold;
font-size: 28rpx;
color: #333333;
display: flex;
align-items: center;
.tableFee {
width: 186rpx;
height: 54rpx;
line-height: 54rpx;
margin-left: 10rpx;
font-size: 28rpx;
color: #333;
border-radius: 8rpx 8rpx 8rpx 8rpx;
border: 2rpx solid #E5E5E5;
text-align: left;
padding: 0 18rpx;
box-sizing: border-box;
}
}
.extendList{
width: 100%;
display: flex;
flex-direction: column;
margin-top: 24rpx;
.extendTab{
display: flex;
justify-content: space-around;
.extendTab_item{
font-size: 24rpx;
font-weight: 400;
padding: 4rpx 12rpx;
border-radius: 4rpx;
border: 2rpx solid #E5E5E5;
}
.active{
background: #318AFE;
border: 2rpx solid #318AFE;
color: #fff;
}
}
.extend_content{
display: flex;
margin-top: 32rpx;
.preview{
width: 146rpx;
height: 342rpx;
position: relative;
margin-right: 32rpx;
background-color: #f7f7f7;
::v-deep .bg,::v-deep .bg .u-image,::v-deep .bg .u-image__image{
width: 146rpx!important;
height: 342rpx!important;
position: absolute;
top: 0;
}
::v-deep .index_bg .u-image,::v-deep .index_bg .u-image__image{
width: 146rpx!important;
height: 242rpx!important;
position: absolute;
top: 0;
}
::v-deep .my_bg .u-image,::v-deep .my_bg .u-image__image{
width: 146rpx!important;
height: 90rpx!important;
position: absolute;
top: 0;
}
::v-deep .member_bg .u-image,::v-deep .member_bg .u-image__image{
width: 134rpx!important;
height: 63rpx!important;
position: absolute;
top: 22rpx;
left: 0;
right: 0;
margin: auto;
border-radius: 5rpx!important;
}
::v-deep .shopinfo_bg .u-image,::v-deep .shopinfo_bg .u-image__image{
width: 146rpx!important;
height: 50rpx!important;
position: absolute;
top: 0;
}
.shopinfo_bg_f{
width: 146rpx;
height: 290rpx;
position: absolute;
bottom: 0;
background-color: #fff;
}
}
.extend_img{
display: flex;
flex-direction: column;
.extend_title{
font-weight: 400;
font-size: 24rpx;
color: #333333;
margin-bottom: 16rpx;
}
.fileUp{
width: 148rpx;
height: 148rpx;
position: relative;
.file{
width: 148rpx;
height: 148rpx;
position: absolute;
top: 0;
}
}
::v-deep .u-image,::v-deep .u-image__image{
width: 148rpx!important;
height: 148rpx!important;
}
}
}
}
}
.column{
flex-direction: column;
.label{
align-self: flex-start;
}
}
.m{
margin-bottom: 12rpx;
}
.cutShop{
width: 530rpx;
height: 80rpx;
line-height: 80rpx;
background: #318AFE;
border-radius: 56rpx;
font-weight: 500;
font-size: 32rpx;
color: #FFFFFF;
margin: 48rpx auto 0 auto;
text-align: center;
}
.right {
display: flex;
align-items: center;
font-weight: 400;
font-size: 28rpx;
color: #999999;
position: relative;
.file{
width: 112rpx;
height: 112rpx;
line-height: 112rpx;
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
.fileImg{
width: 112rpx!important;
height: 112rpx!important;
::v-deep .u-avatar__image{
width: 112rpx!important;
height: 112rpx!important;
}
}
}
}
</style>

View File

@@ -0,0 +1,161 @@
<template>
<view class="page-wrapper">
<view class="shopList">
<view class="tip">选择你要登录的门店</view>
<view class="shopList_item" @tap="createStore(item)" v-for="(item,index) in vdata.shopList" :key="index">
<view class="shopList_item_top">
<view class="shopList_item_top_left">
<text class="sort">{{index+1}}</text>
<up-avatar class="fileImg" :src="vdata.coverImg?vdata.coverImg:''"></up-avatar>
<view class="shopList_item_top_left_info">
<text class="shopName">双屿</text>
<text class="phone">15333333333</text>
</view>
</view>
<up-icon name="arrow-right" color="#999999" size="15"></up-icon>
</view>
<view class="shopList_item_bom">
<viwe class="shopList_item_bom_i">
<text class="name">今日实收</text>
<text class="num">0.00</text>
</viwe>
<viwe class="shopList_item_bom_i">
<text class="name">今日实收</text>
<text class="num">0.00</text>
</viwe>
<viwe class="shopList_item_bom_i">
<text class="name">今日实收</text>
<text class="num">0.00</text>
</viwe>
</view>
</view>
</view>
</view>
</template>
<script setup>
import { nextTick, reactive, ref } from 'vue';
import { onReachBottom, onShow, onUnload } from '@dcloudio/uni-app';
import ak from '@/commons/utils/ak.js';
import { getShopList } from '@/http/yskApi/shop.js'
const vdata = reactive({
shopList:[
{name: 1},
{name: 2},
]
});
onShow(() => {
// getshopList()
})
let getshopList = () => {
getShopList().then((res) => {
console.log(res)
})
}
let createStore = () => {
ak.go.back(1)
};
</script>
<style lang="scss" scoped>
.page-wrapper {
min-height: calc(100vh - 90rpx);
.shopList{
padding: 32rpx 28rpx;
box-sizing: border-box;
.tip{
width: 100%;
text-align: center;
font-weight: 500;
font-size: 28rpx;
color: #333333;
margin-bottom: 32rpx;
}
.shopList_item{
background-color: #fff;
border-radius: 12rpx;
padding: 32rpx 24rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
margin-bottom: 32rpx;
.shopList_item_top{
display: flex;
align-items: center;
justify-content: space-between;
.shopList_item_top_left{
display: flex;
align-items: center;
.sort{
margin-right: 28rpx;
font-weight: 500;
font-size: 28rpx;
color: #333333;
margin-left: 12rpx;
}
.fileImg{
width: 72rpx!important;
height: 72rpx!important;
margin-right: 24rpx;
::v-deep .u-avatar__image{
width: 72rpx!important;
height: 72rpx!important;
}
}
.shopList_item_top_left_info{
display: flex;
flex-direction: column;
.shopName{
font-weight: 500;
font-size: 28rpx;
color: #333333;
}
.phone{
font-weight: 400;
font-size: 24rpx;
color: #999999;
margin-top: 8rpx;
}
}
}
}
.shopList_item_bom{
display: flex;
align-items: center;
justify-content: space-between;
background: #F9F9F9;
border-radius: 12rpx;
padding: 32rpx 0 ;
box-sizing: border-box;
margin-top: 24rpx;
.shopList_item_bom_i{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.name{
font-weight: 400;
font-size: 24rpx;
color: #999999;
margin-bottom: 5rpx;
}
.num{
font-weight: 500;
font-size: 28rpx;
color: #333333;
}
}
}
}
}
}
</style>

View File

@@ -0,0 +1,208 @@
<template>
<view class="page-wrapper">
<view class="content">
<view class="title">门店收款码</view>
<view ref="qrcode" class="qrcode">
<up-qrcode :size="vdata.size" @result="result" :val="vdata.paymentQrcode"></up-qrcode>
</view>
<view class="bom">
<view @click="download">下载收款码</view>
<view>下载收款码样式</view>
</view>
</view>
</view>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import ak from '@/commons/utils/ak.js';
import { getShopList } from '@/http/yskApi/shop.js'
const vdata = reactive({
size: 0,
qrcodeUrl: null,
paymentQrcode: null,
});
onLoad((options) => {
vdata.paymentQrcode = options.paymentQrcode;
})
onShow(() => {
// getshopList()
})
onMounted(() => {
// 设置二维码大小
let query = uni.createSelectorQuery().in(this);
query.select('.qrcode').boundingClientRect(data => {
if (data) {
vdata.size = data.width
}
}).exec();
})
/**
* 二维码图片
*/
let result = (e) => {
vdata.qrcodeUrl = e;
console.log(vdata.qrcodeUrl)
let blob = dataURLtoBlob()
console.log(blob)
}
let dataURLtoBlob = (dataurl) => {
var arr = vdata.qrcodeUrl.split(',')
var mime = arr[0].match(/:(.*?);/)[1]
var bstr = atob(arr[1])
var n = bstr.length
var u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], { type: mime })
}
let saveImageToPhotosAlbum = (imgSrc) => {
let base64 = imgSrc.replace(/^data:image\/\w+;base64,/, ""); //图片替换
let filePath = '123' + '/qrcode.png';
uni.getFileSystemManager().writeFile({
filePath: filePath, //创建一个临时文件名
data: base64, //写入的文本或二进制数据
encoding: 'base64', //写入当前文件的字符编码
success: (res) => {
uni.saveImageToPhotosAlbum({
filePath: filePath,
success: () => {
uni.showToast({
title: '保存成功',
icon: "none",
duration: 5000
})
},
fail: (err) => {
console.log(err);
uni.showToast({
title: '保存失败',
icon: "none",
duration: 5000
})
}
})
},
fail: (err) => {
console.log(err)
}
})
}
let getUrlBase64 = (url) => {
return new Promise(resolve => {
let canvas = document.createElement('canvas')
let ctx = canvas.getContext('2d')
let img = new Image()
img.crossOrigin = 'Anonymous' //允许跨域
img.src = vdata.qrcodeUrl
img.onload = function() {
canvas.height = 300
canvas.width = 300
ctx.drawImage(img, 0, 0, 300, 300)
let dataURL = canvas.toDataURL('image/png')
canvas = null
resolve(dataURL)
}
})
}
let download = () => {
// 这里是获取到的图片base64编码
let link = document.createElement('a')
let url = vdata.qrcodeUrl//要下载的路径
// 这里是将url转成blob地址
fetch(url).then(res => res.blob()).then(blob => { //将链接地址字符内容转变成blob地址
link.href = URL.createObjectURL(blob)
console.log(link.href)
link.download ='QrCode'
document.body.appendChild(link)
link.click()
})
}
</script>
<style lang="scss" scoped>
.page-wrapper {
min-height: calc(100vh - 90rpx);
padding: 48rpx 52rpx;
box-sizing: border-box;
.content{
width: 100%;
background-color: #fff;
border-radius: 40rpx;
display: flex;
flex-direction: column;
align-items: center;
padding: 64rpx 0;
box-sizing: border-box;
.title{
font-weight: bold;
font-size: 40rpx;
color: #333333;
}
.qrcode{
width: 416rpx;
height: 416rpx;
margin-top: 50rpx;
border: 2rpx solid #333;
padding: 15rpx;
box-sizing: border-box;
border-radius: 20rpx;
display: flex;
align-items: center;
justify-content: center;
}
::v-deep .u-qrcode,::v-deep .u-qrcode__content,::v-deep .u-qrcode__canvas{
width: 100%!important;
height: 100%!important;
}
.bom{
display: flex;
margin-top: 110rpx;
view{
width: 218rpx;
height: 64rpx;
line-height: 64rpx;
text-align: center;
font-weight: 500;
font-size: 28rpx;
color: #318AFE;
border-radius: 8rpx;
}
view:nth-child(1){
color: #318AFE;
border: 2rpx solid #318AFE;
margin-right: 80rpx;
}
view:nth-child(2){
color: #7074A0;
border: 2rpx solid #7074A0;
}
}
}
}
</style>