root/zyejMAll-mobile
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

提交优化 #9

Merged
root merged 6 commits from Branch_ccc into master 2024-10-22 18:25:38 +08:00
Conversation 0 Commits 6 Files Changed 32 +483 -479
4 changed files with 483 additions and 479 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a82dc51924 - Show all commits

12
.env
View File

@ -3,11 +3,19 @@ SHOPRO_VERSION = v1.8.3
# 后端接口 - 正式环境（通过 process.env.NODE_ENV 非 development）
SHOPRO_BASE_URL = https://zysc.fjptzykj.com
#SHOPRO_BASE_URL = http://192.168.1.20:6127
#SHOPRO_BASE_URL = http://192.168.1.12:6127
#SHOPRO_BASE_URL = http://124.222.208.27:6127
#SHOPRO_BASE_URL = http://192.168.1.9:6127
#SHOPRO_BASE_URL = http://192.168.1.8:6127
#SHOPRO_BASE_URL = http://192.168.1.7:6127
# 后端接口 - 测试环境（通过 process.env.NODE_ENV = development）
SHOPRO_DEV_BASE_URL = https://zysc.fjptzykj.com
#SHOPRO_DEV_BASE_URL = http://192.168.1.20:6127
#SHOPRO_DEV_BASE_URL = http://192.168.1.12:6127
#SHOPRO_DEV_BASE_URL = http://124.222.208.27:6127
#SHOPRO_DEV_BASE_URL = http://192.168.1.9:6127
#SHOPRO_DEV_BASE_URL = http://192.168.1.8:6127
#SHOPRO_DEV_BASE_URL = http://192.168.1.7:6127
# 后端接口前缀（一般不建议调整）
SHOPRO_API_PATH = /app-api

2
pages/coupon/list.vue
View File

@ -48,7 +48,7 @@
class="ss-reset-button card-btn ss-flex ss-row-center ss-col-center"
:class="item.status !== 1 ? 'disabled-btn' : ''"
:disabled="item.status !== 1"
@click.stop="sheep.$router.go('/pages/index/category', { couponId: item.id })"
@click.stop="sheep.$router.go('/pages/goods/list')"
>
{{ item.status === 1 ? '立即使用' : item.status === 2 ? '已使用' : '已过期' }}
</button>

307
pages/subscribe/subscribe.vue
View File

@ -1,41 +1,11 @@
<template>
<s-layout color="white" :bgStyle="{ color: '#fff'}" opacityBgUi="" navbarbackgroundColor="transparent">
<view class="new-main">
<view class="top-img">
<image class="img"
src="https://zysc.fjptzykj.com:3000/shangcheng/3148160e2dcb79f1a494ad59229976e31bc9f8e1f13b8da073ad3bcd95a36801.png">
</image>
</view>
<!-- <view class="new-all new-top">
<image class="new-img" :src="brandList.list[selectedClinicIndex].picUrl" mode="aspectFill">
</image>
<view class='new-title'>
<view class='t' v-html="brandList.list[selectedClinicIndex].depict"></view>
<view class='b'>{{ brandList.list[selectedClinicIndex].address }}</view>
</view>
<view class="new-bottom">
<view class="l">
<view class="t">
<image
src="https://zysc.fjptzykj.com:3000/shangcheng/0f3417cd9adec5b7fce6ac74a4525a3b44803137decbf83bb1608f8723f423e8.png"
class="img"></image>
莆田市城厢区万达广场对面
</view>
<view class="t">
<image
src="https://zysc.fjptzykj.com:3000/shangcheng/3160a894c5c816f62574dd66eed01930eaa5c28126c3170eab0f622c3ab88115.png"
class="img"></image>
每周二至周日
</view>
</view>
<view class="r">
<image class="img"
src="https://zysc.fjptzykj.com:3000/shangcheng/a0661763abe4539e376cc22eaf79a6de1e99a253c37281d3d3944abcd81a7227.png">
</image>
</view>
</view>
</view> -->
<view class="new-all">
<view class="title">
<image
@ -45,7 +15,7 @@
</view>
<picker mode="selector" :range="brandNameList" @change="onClinicChange">
<view class="clinic-select-value">
<text>{{ ll}}</text>
<text>{{ll}}</text>
<image src="@/static/images/dayu.png" class="img"></image>
</view>
</picker>
@ -56,9 +26,9 @@
<text class='text'>项目选择</text>
</view>
<picker mode="selector" :range="brandNameList" @change="onClinicChange">
<picker mode="selector" :range="brandNameList2" @change="onClinicChange2">
<view class="clinic-select-value">
<text>{{ ll}}</text>
<text>{{ll2}}</text>
<image src="@/static/images/dayu.png" class="img"></image>
</view>
</picker>
@ -111,7 +81,7 @@
</view>
<picker mode="selector" :range="brandNameList" @change="onClinicChange">
<view class="clinic-select-value">
<text>{{ ll}}</text>
<text>{{ll3}}</text>
<image src="@/static/images/dayu.png" class="img"></image>
</view>
</picker>
@ -188,85 +158,11 @@
</view>
</view>
</view>
<view class="footer" @click="handleSubmit">
立即预约
</view>
</view>
<view class="container">
<!-- <view class="doctor-list">
<view class="doctor-cards">
<image class="doctor-avatars" :src="brandList.list[selectedClinicIndex].picUrl" mode="aspectFill">
</image><br /><br />
<view class="brandr-info">
<text class="doctor-names">
<text class="ygcontent">医馆地址：</text>
{{ brandList.list[selectedClinicIndex].address }}</text><br /><br />
<rich-text class="doctor-specialtys"
:nodes="brandList.list[selectedClinicIndex].depict"></rich-text>
</view>
</view>
</view> -->
<!-- <view class="clinic-select">
<text class="clinic-select-label">医馆选择</text>
<picker mode="selector" :range="brandNameList" @change="onClinicChange">
<view class="clinic-select-value">
<text>{{ ll}}</text>
</view>
</picker>
</view>
<view class="clinic-select">
<text class="clinic-select-label">预约类型</text>
<picker mode="selector" :range="typenameList" @change="ontype">
<view class="clinic-select-value">
<text>{{ gg }}</text>
</view>
</picker>
</view> -->
<!-- <text class="clinic-select-label">套餐选择</text><br>
<image class="doctor-avatar" src="/static/avatar-doctor.png" mode="aspectFill"></image> -->
<!-- <view class="date-card">
<view class="weekdays">
<text v-for="(day, index) in weekdays" :key="index" :class="['weekday', index === selectedDayIndex ? 'active' : '']"
@click="selectDay(index)">{{ day }}</text>
</view>
<swiper class="date-swiper" :current="selectedDayIndex" @change="handleSwiperChange">
<swiper-item v-for="(date, index) in dateList" :key="index">
<view class="date-item" :class="index === selectedDayIndex ? 'active' : ''">
<text class="date">{{ formatDate(date.date) }}</text>
</view>
</swiper-item>
</swiper>
</view> -->
<!-- <radio-group>
<view class="date-list">
<view v-for="(item, index) in dateList" :key="index" @click="selectDate(index)">
<view class="date-item" v-if="addDate==item.addDate" style="background-color: #ff5541;">
<text class="date" style="color: #FFFFFF;">{{ item.formattedDate }}</text>
<text class="weekday" style="color: #FFFFFF;">{{ item.weekday }}</text>
</view>
<view class="date-item" v-if="addDate!=item.addDate">
<text class="date">{{ item.formattedDate }}</text>
<text class="weekday">{{ item.weekday }}</text>
</view>
</view>
</view>
</radio-group> -->
<!-- <view @click="showTime = true"><text v-if="goTime" style="color: #000;">{{goTime }}</text><text v-else>请选择返程时间</text></view> -->
<!-- //通过控制showTime来判断组件是否显示 -->
<!-- <pickerTime :startH="8" :lateH="19" :step="32" v-if="showTime" @close="showTime=false" @chooseTime="bindTime"></pickerTime> -->
<radio-group>
<view class="doctor-list">
<!-- {{techList}} -->
@ -291,35 +187,6 @@
</view>
</radio-group>
<!-- <radio-group>
<view class="date-list">
<view v-for="(item, index) in serviceTime" :key="index" @click="selecthsstr(index)">
<view class="date-itemstr" v-if="hsstr==item.str" style="background-color: #ff5541;">
<text class="weekday">{{ item.str }}</text>
</view>
<view v-if="item.ym==='true'">
<view class="date-itemym" v-if="hsstr!=item.str">
<text class="weekdayym">约满</text><br />
<text class="weekday">{{ item.str }}</text>
</view>
</view>
<view v-if="item.ym==='false'">
<view class="date-itemstr" v-if="hsstr!=item.str">
<text class="weekday">{{ item.str }}</text>
</view>
</view>
</view>
</view>
</radio-group> -->
<!-- <view class="footer">
<button class="appointment-btn" @click="handleSubmit">立即预约</button>
</view> -->
</view>
</s-layout>
</template>
@ -338,28 +205,16 @@
showShareModal,
showAuthModal
} from '@/sheep/hooks/useModal';
// import pickerTime from "@/pages/commission/pickerTime.vue"
// 用户信息
export default {
// components: {
// pickerTime
// },
data() {
return {
isLogin: null,
memberId: null,
// showTime: false,
serviceTime: [],
sjd: {},
ym: [],
// starhour: 8,
// starminute: 0,
// endhour: 18,
// endminute: 0,
// timejg: 70,
hsstr: "",
dateList: [],
typeList: [{
dictValue: 0,
@ -373,27 +228,33 @@
typenameList: [],
addDate: "",
techList: [], // 技师列表
//医馆信息
selectedClinicIndex: 0, // 当前选中的医馆索引
brandList: [{
name: ""
}],
brandNameList: [],
brandId: "",
selectedClinicIndex: 0, // 当前选中的门店索引
selectedClinicIndex2: 0, // 当前选中的项目索引
selectedClinicIndex3: 0, // 当前选中的项目索引
brandList: [], //门店列表数据
brandList2: [], //项目列表数据
brandList3: [], //套餐列表数据
brandNameList: [],//门店列表
brandNameList2: [],//项目列表
brandNameList3: [],//套餐列表
brandId: "",//门店当前选中id
brandName: "",
selectedDayIndex: 0,
selecttypeIndex: 0,
techid: 0,
type: 0,
ll: '请选择',
ll2: '请选择',
ll3: '请选择',
gg: '请选择'
};
},
created() {
this.isLogin = computed(() => sheep.$store('user').isLogin);
this.memberId = computed(() => sheep.$store('user').userInfo).value.id
this.brandlists();
this.brandlists();//调用门店列表
// this.brandlists2();//调用项目列表
// this.brandlists3();//调用套餐列表
this.generateDateList();
this.addDate = this.dateList[0].addDate;
this.gettypeList();
@ -404,11 +265,20 @@
onClinicChange(event) {
const selectedClinicIndex = event.detail.value;
this.selectedClinicIndex = selectedClinicIndex;
this.brandName = this.brandList.list[selectedClinicIndex].name
this.brandId = this.brandList.list[selectedClinicIndex].id
console.log("dddddddddddd")
this.ll = this.brandList.list[selectedClinicIndex].name
this.technicianList();
this.ll = this.brandList[selectedClinicIndex].name
// console.log("dddddddddddd")
// this.ll = this.brandList.list[selectedClinicIndex].name
this.brandId = this.brandList[selectedClinicIndex].id
this.brandlists2();
},
onClinicChange2(event) {
const selectedClinicIndex = event.detail.value;
this.selectedClinicIndex2 = selectedClinicIndex;
this.ll2 = this.brandList2[selectedClinicIndex].name
// this.brandId = this.brandList.list[selectedClinicIndex].id
console.log("------onClinicChange2------")
// this.ll = this.brandList.list[selectedClinicIndex].name
// this.technicianList();
},
ontype(event) {
const selecttypeIndex = event.detail.value;
@ -419,43 +289,55 @@
this.gg = this.typeList[selecttypeIndex].label
this.technicianList();
},
// 查询医馆列表
// 查询门店列表
brandlists() {
request({
url: `${baseUrl}${apiPath}/h5/brand/list`,
url: `${baseUrl}${apiPath}/h5/brand/getBrand`,
method: 'GET',
custom: {
showLoading: false,
},
}).then((res) => {
this.brandList = res.data
console.log(this.brandList, "this.brandList")
for (var i = 0; i < this.brandList.list.length; i++) {
// this.brandList[i].depict=(this.brandList[i].depict).replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
this.brandNameList.push(this.brandList.list[i].name)
for (var i = 0; i < this.brandList.length; i++) {
this.brandNameList.push(this.brandList[i].name)
}
});
},
// 查询项目列表
brandlists2() {
request({
url: `${baseUrl}${apiPath}/h5/project/getProject`,
method: 'GET',
params: {
id: this.brandId
},
custom: {
showLoading: false,
},
}).then((res) => {
// this.brandList2 = res.data
console.log(res,"------brandList2------")
// for (var i = 0; i < this.brandList2.length; i++) {
// this.brandNameList2.push(this.brandList2[i].name)
// }
});
},
// 查询套餐列表
brandlists3() {
request({
url: `${baseUrl}${apiPath}/h5/technician/getTecchnician`,
method: 'GET',
custom: {
showLoading: false,
},
}).then((res) => {
this.brandList3 = res.data
for (var i = 0; i < this.brandList3.length; i++) {
this.brandNameList3.push(this.brandList3[i].name)
}
this.brandId = this.brandList[0].id
this.technicianList();
});
// uni.request({
// url: `${baseUrl}/api/h5/brand/list`,
// success: (res) => {
// this.brandList = res.data
// for (var i = 0; i < this.brandList.length; i++) {
// // this.brandList[i].depict=(this.brandList[i].depict).replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
// this.brandNameList.push(this.brandList[i].name)
// }
// this.brandId = this.brandList[0].id
// this.technicianList();
// },
// fail: (error) => {
// console.log(error)
// }
// })
},
gettypeList() {
request({
url: `${baseUrl}${apiPath}/h5/reservation/type`,
@ -466,28 +348,11 @@
}).then((res) => {
console.log(res, "typeListtypeList")
this.typeList = res.data
// this.typeList.depict=this.typeList.depict.replace(/\<img/gi, '<img style="max-width:100%;float:left; height:auto" ')
for (var i = 0; i < this.typeList.length; i++) {
this.typenameList.push(this.typeList[i].label);
}
console.log(this.typenameList)
});
// uni.request({
// url: `${baseUrl}/api/h5/reservation/type`,
// success: (res) => {
// this.typeList = res.data.data
// // this.typeList.depict=this.typeList.depict.replace(/\<img/gi, '<img style="max-width:100%;float:left; height:auto" ')
// for (var i = 0; i < this.typeList.length; i++) {
// this.typenameList.push(this.typeList[i].dictLabel);
// }
// console.log(this.typenameList)
// },
// fail: (error) => {
// console.log(error)
// }
// })
},
// 查询医生列表
technicianList() {
@ -500,7 +365,6 @@
method: 'GET',
params: {
type: this.type,
// addDate:this.addDate,
brandId: this.brandId
},
custom: {
@ -520,33 +384,6 @@
console.log(this.techList)
});
// uni.request({
// // url: 'https://sfyjk.com/api/h5/technician/list',
// url: `${baseUrl}/app-api/h5/technician/list`,
// data: {
// type: this.type,
// // addDate:this.addDate,
// brandId: this.brandId
// },
// success: (res) => {
// console.log(res)
// this.techList = res.data.rows
// console.log(this.techList)
// if (this.techList.length > 0) {
// this.techid = this.techList[0].id
// var item = {
// id: this.techid
// }
// this.onradio(item);
// }
// console.log(this.techList)
// },
// fail: (error) => {
// console.log(error)
// }
// })
},
onradio(item) {
@ -940,7 +777,7 @@
align-items: center;
&:hover {
background-color: #ff5541;
// background-color: #ff5541;
}
.date {

245
pages/user/wallet/score.vue
View File

@ -1,15 +1,12 @@
<!-- 我的积分 -->
<template>
<s-layout class="wallet-wrap" title="我的积分" navbar="inner">
<view
class="header-box ss-flex ss-flex-col ss-row-center ss-col-center"
:style="[
<view class="header-box ss-flex ss-flex-col ss-row-center ss-col-center" :style="[
{
marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
paddingTop: Number(statusBarHeight + 88) + 'rpx',
},
]"
>
]">
<view class="header-bg">
<view class="bg" />
</view>
@ -19,17 +16,48 @@
</view>
<text class="all-num">{{ userInfo.point || 0 }}</text>
</view>
<view class="new-point">
<view class="l">
<view class="b">1000</view>
<view class="c">累计积分</view>
</view>
<view class="l">
<view class="b">1000</view>
<view class="c">累计消费</view>
</view>
<view class="l">
<view class="b">0</view>
<view class="c">冻结积分</view>
</view>
</view>
<view class='new-tab'>
<view class="l l " :class="state.isShow == 1 ? 'on': ''" @click="state.isShow = 1">
<image
src="https://zysc.fjptzykj.com:3000/shangcheng/6fcdf0863d8665f2857ebfef5bb4a1d13df5d0ac8fa2517b16c3fa06f0b93a8a.png"
class="img2"></image>
<image
src="https://zysc.fjptzykj.com:3000/shangcheng/9e5801a7825e99274b7963f87c2044839640fe3b3e706c49238157449385cc87.png"
class="img"></image>
<text class="tx">分值明细</text>
</view>
<view class="l r" :class="state.isShow == 2 ? 'on': ''" @click="state.isShow = 2">
<image
src="https://zysc.fjptzykj.com:3000/shangcheng/0c9af735ebcd6a6b9c480b237c20331747cf69f8991150be10de4eef1f7c9173.png"
class="img2"></image>
<image
src="https://zysc.fjptzykj.com:3000/shangcheng/00bc0a57ca7f7a9ba79415b6f48a671669e7ed5f930e4b6e5096bcd8101d499e.png"
class="img"></image>
<text class="tx">分值提升</text>
</view>
</view>
</view>
<!-- tab -->
<su-sticky :customNavHeight="sys_navBar">
<!-- 统计 -->
<view class="filter-box ss-p-x-30 ss-flex ss-col-center ss-row-between">
<uni-datetime-picker
v-model="state.date"
type="daterange"
@change="onChangeTime"
:end="state.today"
>
<uni-datetime-picker v-model="state.date" type="daterange" @change="onChangeTime" :end="state.today">
<button class="ss-reset-button date-btn">
<text>{{ dateFilterText }}</text>
<text class="cicon-drop-down ss-seldate-icon"></text>
@ -42,26 +70,32 @@
<!-- <view>总支出￥{{ -state.pagination.expense }}</view>-->
<!-- </view>-->
</view>
<su-tabs
:list="tabMaps"
@change="onChange"
:scrollable="false"
:current="state.currentTab"
></su-tabs>
<!-- <su-tabs :list="tabMaps" @change="onChange" :scrollable="false" :current="state.currentTab"></su-tabs> -->
</su-sticky>
<!-- icon -->
<view class="icon-img" v-if="state.isShow == 2">
<view class="list" @click="sheep.$router.go('/pages/goods/list')">
<image
src="https://zysc.fjptzykj.com:3000/shangcheng/90eef89176c26da9a605a7b22c4b0beea07d970fc5da7204effb51e970546112.png"
class="img"></image>
<view class="c">购买商品可获得积分奖励</view>
<view class="b">赚积分</view>
</view>
<view class="list" @click="sheep.$router.go('/pages/app/sign')">
<image
src="https://zysc.fjptzykj.com:3000/shangcheng/90eef89176c26da9a605a7b22c4b0beea07d970fc5da7204effb51e970546112.png"
class="img"></image>
<view class="c">每日签到可获得积分奖励</view>
<view class="b">赚积分</view>
</view>
</view>
<!-- list -->
<view class="list-box">
<view class="list-box" v-if="state.isShow == 1">
<view v-if="state.pagination.total > 0">
<view
class="list-item ss-flex ss-col-center ss-row-between"
v-for="item in state.pagination.list"
:key="item.id"
>
<view class="list-item ss-flex ss-col-center ss-row-between" v-for="item in state.pagination.list"
:key="item.id">
<view class="ss-flex-col">
<view class="name"
>{{ item.title }}{{ item.description ? ' - ' + item.description : '' }}</view
>
<view class="name">{{ item.title }}{{ item.description ? ' - ' + item.description : '' }}</view>
<view class="time">{{
sheep.$helper.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss')
}}</view>
@ -73,25 +107,28 @@
<s-empty v-else text="暂无数据" icon="/static/data-empty.png" />
</view>
<uni-load-more
v-if="state.pagination.total > 0"
:status="state.loadStatus"
:content-text="{
<uni-load-more v-if="state.pagination.total > 0 && state.isShow == 1" :status="state.loadStatus" :content-text="{
contentdown: '上拉加载更多',
}"
@tap="onLoadMore"
/>
}" @tap="onLoadMore" />
</s-layout>
</template>
<script setup>
import sheep from '@/sheep';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { computed, reactive } from 'vue';
import {
onLoad,
onReachBottom
} from '@dcloudio/uni-app';
import {
computed,
reactive
} from 'vue';
import _ from 'lodash';
import dayjs from 'dayjs';
import PointApi from '@/sheep/api/member/point';
import { resetPagination } from '@/sheep/util';
import {
resetPagination
} from '@/sheep/util';
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
const userInfo = computed(() => sheep.$store('user').userInfo);
@ -108,10 +145,10 @@
loadStatus: '',
date: [],
today: '',
isShow: 1
});
const tabMaps = [
{
const tabMaps = [{
name: '全部',
value: 'all',
},
@ -135,7 +172,10 @@
async function getLogList() {
state.loadStatus = 'loading';
let { code, data } = await PointApi.getPointRecordPage({
let {
code,
data
} = await PointApi.getPointRecordPage({
pageNo: state.pagination.pageNo,
pageSize: state.pagination.pageSize,
addStatus: state.currentTab > 0 ? tabMaps[state.currentTab].value : undefined,
@ -183,14 +223,132 @@
</script>
<style lang="scss" scoped>
.icon-img {
background-color: white;
padding-top: 20px;
display: grid;
.list {
display: flex;
width: 89%;
margin: 0 auto;
padding: 20px 12px;
justify-content: space-around;
align-items: center;
border-radius: 10px;
background: rgba(255, 251, 242);
margin-bottom: 20px;
font-size: 16px;
color: rgba(198, 179, 114);
.img {
width: 40px;
height: 60px;
}
.c {
font-size: 18px;
color: rgba(198, 179, 114);
width: 50%;
font-weight: 700;
line-height: 26px;
}
.b {
border: 1px solid rgba(183, 175, 128);
padding: 4px 18px;
border-radius: 15px;
}
}
}
.header-box {
width: 100%;
background: linear-gradient(180deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%)
no-repeat;
// background: linear-gradient(180deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%)
// no-repeat;
background: rgb(193, 145, 81);
background-size: 750rpx 100%;
padding: 0 0 120rpx 0;
padding: 0 0 0 0;
box-sizing: border-box;
.new-tab {
width: 100%;
display: flex;
justify-content: center;
margin-top: 22px;
.l {
display: flex;
align-items: center;
justify-content: center;
width: 45%;
padding: 16px 0;
background: rgba(247, 247, 247);
border-radius: 10px 0 0 0;
.img2 {
display: none;
}
.img,
.img2 {
width: 25px;
height: 25px;
margin-right: 5px;
}
&.on {
background: white;
.img2 {
display: block;
}
.img {
display: none;
}
.tx {
color: #c19151;
}
}
.tx {
font-size: 18px;
font-weight: 700;
}
}
.r {
border-radius: 0 10px 0 0;
}
}
.new-point {
display: flex;
justify-content: space-around;
width: 100%;
margin-top: 20px;
.l {
&>view {
color: white;
text-align: center;
}
.b {
margin-bottom: 7px;
font-size: 40rpx;
font-weight: 700;
}
.c {
font-size: 25rpx;
font-weight: 700;
}
}
}
.score-box {
height: 100%;
@ -218,6 +376,7 @@
.filter-box {
height: 114rpx;
background-color: $bg-page;
background: rgb(193, 145, 81);
.total-box {
font-size: 24rpx;