<template> <view class="page"> <!-- 用户首页显示 --> <view class="useryonghu"> <u-navbar :is-back="false" title="创亿康" :border-bottom="false" :background="bgc" title-color='#3D3D3D' title-size='44' height='44'></u-navbar> <view class="ditu"> <view class="dtxs"> <map class='map' id="map" :latitude="latitude" :longitude="longitude" @markertap="handleMarkerClick" :show-location="true" :markers="covers" :scale="mapScale" /> </view> <!-- 正在进行中的订单 --> <view class="ongoing_order" v-if="sylist.length > 0"> <view class="order_top"> <view class="order_lt"> <image src="https://api.ccttiot.com/smartmeter/img/static/uFNuOet0fB5Bwe1c26sk" mode=""> </image> <text>您有正在使用中的设备...</text> </view> <image @click="btnorder" v-if="!listflag" src="https://api.ccttiot.com/smartmeter/img/static/ublEB3HEjyfZbnKS2Ai9" mode=""></image> <image @click="btnorders" v-if="listflag" style="transform: rotate(180deg);margin-top: 20rpx;" src="https://api.ccttiot.com/smartmeter/img/static/ublEB3HEjyfZbnKS2Ai9" mode=""></image> </view> <view class="order_list" v-for="(item,index) in sylist" :key="index" v-if="listflag" @click="btnitem(item.billId)"> <text>{{item.deviceName}}</text> <image src="https://api.ccttiot.com/smartmeter/img/static/uZoBXJ0MLrGUSBFk5lGp" mode=""></image> </view> </view> <!-- 正在进行中的订单结束 --><!-- 正在进行中的订单结束 --> <view class="fujin"> <image src="https://api.ccttiot.com/smartmeter/img/static/uThUUsa3Zs1tMF9Bpdl9" mode="" @click="btnindex(5)" v-if="userType != 1"></image> <image @click="onControltap" style="width: 76rpx;height: 76rpx;position: absolute;right: 40rpx;top: 25rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uOS9p7Sy1K9WpVQgD3b9" mode=""></image> </view> <view class="box_li"> <view class="tubiao"> <view class="gr" @click="btnindex(1)"> <image src="https://api.ccttiot.com/smartmeter/img/static/uUkWehGbVIW9dD9pTK8T" mode=""> </image> </view> <view class="gr" @click="btnindex(2)"> <image src="https://api.ccttiot.com/smartmeter/img/static/uIE8vfQcxM8Nd3dJiyG0" mode=""> </image> </view> <view class="gr" @click="btnindex(3)"> <image src="https://api.ccttiot.com/smartmeter/img/static/u5vQMf81rA959U1TEifd" mode=""> </image> </view> <view class="gr" @click="btnindex(4)"> <image src="https://api.ccttiot.com/smartmeter/img/static/u6b3JhYt7Kq4HvMXmp97" mode=""> </image> </view> <view class="gr" @click="btnindex(6)"> <image src="https://api.ccttiot.com/smartmeter/img/static/uieYSps1EsP2foR7WegN" mode=""> </image> </view> </view> <view class="guangg"> <swiper style="height: 218rpx;" class="swiper" circular :indicator-dots="indicatorDots" indicator-color="#ccc" indicator-active-color="#fff" :autoplay="autoplay" :interval="interval" :duration="duration"> <swiper-item v-for="(item,index) in imgad" :key="index" @click="btnswiper(item)"> <view class="swiper-item uni-bg-red"> <image style="height: 218rpx;" :src="item.picture" mode=""></image> </view> </swiper-item> </swiper> </view> <view class="saoma" @click="scanQRCode"> <view> <image src="https://api.ccttiot.com/smartmeter/img/static/uBh15vzRx6gV0wRQj7gi" mode=""> </image> 扫一扫 </view> </view> </view> </view> <view class="tip_box" v-if="czflag"> <view class="top"> <view class="txt"> 请您核对以下信息! </view> </view> <view class="bd"> <view class="xiao"> <view class="">推广用户角色:</view> <view class="" v-if="tgobj.userType == 2">代理商</view> <view class="" v-if="tgobj.userType == 3">业务员</view> <view class="" v-if="tgobj.userType == 4">投资人</view> <view class="" v-if="tgobj.userType == 5">场所负责人</view> </view> <view class="xiao" v-if="tgobj.userType == 5"> <view class="">选择场所:</view> <view class="" style="color:#8883f0;" @click="btnxz">{{xztxt}}</view> </view> <view class="xiao"> <view class="">分成比例:</view> <view class="">{{tgobj.point == undefined ? '--' : tgobj.point}}</view> </view> </view> <view class="bot"> <view class="bot_left" @click="czflag = false"> 取消 </view> <view class="bot_right" @click="tocz"> 确定 </view> </view> </view> <view class="mask" v-if="czflag"></view> <!-- 所有店铺 --> <u-select v-model="shows" :list="dianpulist" @confirm="confirms"></u-select> </view> </view> </template> <script> export default { data() { return { listflag: false, params: { year: true, month: true, day: true, hour: false, minute: false, second: false }, dateindex: 1, latitude: '', // 初始纬度 longitude: '', // 初始经度 covers: [], // 覆盖物数组 jinweidu: '', userType: '', isMch: false, imgad: [], listmap: [], mapScale: 15, czflag: false, datetime: 0, dingobj: '', mapContext: null, mapScaleInterval: null, bgc: { background: 'linear-gradient(to right, #FFEFEF 20%, #D9F6FF 100%)' }, deviceobj: {}, deviceCount: 0, sylist: [], networkInterval: null, wangluo: true, indicatorDots: true, autoplay: true, interval: 6000, duration: 2000, c: '', //推广码 tgobj: {}, userId: '', storeId: '', dianpulist: [], shows: false, xztxt: '点击选择' }; }, onLoad(option) { if (option.q) { function getQueryParam(url, paramName) { let regex = new RegExp(`[?&]${paramName}=([^&]*)`) let results = regex.exec(url); return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null } let sceneValue = option.q let decodedValue = decodeURIComponent(sceneValue) let id = getQueryParam(decodedValue, 'c') this.c = id console.log('接收到的参数:', this.c) this.$u.get(`/app/shareCode/byCode/${this.c}`).then((res) => { if (res.code == 200) { this.tgobj = res.data this.czflag = true } }) } }, // 分享到好友(会话) onShareAppMessage: function() { return { title: '创亿康', path: '/pages/index/index' } }, // 分享到朋友圈 onShareTimeline: function() { return { title: '创亿康', query: '', path: '/pages/index/index' } }, onShow() { this.logins() this.getad() this.gethuidaio() this.getshiy() this.getdianpu() }, onReady() { this.mapContext = uni.createMapContext('map', this) this.mapScaleInterval = setInterval(this.updateMarkers, 1000) }, beforeDestroy() { // 在组件卸载前清除定时器 if (this.mapScaleInterval) { clearInterval(this.mapScaleInterval) this.mapScaleInterval = null } // 检测网络状态 if (this.networkInterval) { clearInterval(this.networkInterval) this.networkInterval = null } }, methods: { // 获取所有本人店铺 getdianpu() { this.$u.get(`/app/store/listCount`).then((res) => { if (res.code == 200) { res.data.forEach(item => { if (item.name != '全部') { this.dianpulist.push({ label: item.name, value: item.storeId }) } }) } }) }, // 确定店铺 confirms(e) { this.storeId = e[0].value this.xztxt = e[0].label }, // 如果是经营场所 点击选择店铺 btnxz() { if (this.dianpulist.length == 0) { uni.navigateTo({ url: '/page_user/dianpu' }) } else { this.shows = true } }, // 点击成为推广人 tocz() { // 判断是否为经营场所 if (this.tgobj.userType == 5 && this.xztxt == '点击选择') { uni.showToast({ title: '请选择店铺', icon: 'none', duration: 1500 }) } else { let data = { codeNo: this.c, storeId: this.storeId, userId: this.userId } this.$u.put(`/app/shareCode/use`, data).then((res) => { if (res.code == 200) { uni.showToast({ title: res.msg, icon: 'success', duration: 1500 }) this.czflag = false } else { uni.showToast({ title: res.msg, icon: 'none', duration: 2000 }) } }) } }, startNetworkCheck() { this.networkInterval = setInterval(() => { uni.getNetworkType({ success: (res) => { // console.log(res); if (res.networkType == "none") { this.wangluo = false } else { this.wangluo = true } }, fail: (err) => { console.error('获取网络类型失败', err); } }); }, 3000) }, // 请求正在使用的设备列表 getshiy() { this.$u.get("/app/bill/usingList").then((res) => { if (res.code == 200) { this.sylist = res.data } }) }, btnitem(deviceId) { console.log(deviceId); uni.navigateTo({ url: '/page_user/mydetail?billId=' + deviceId }) }, // 点击显示使用中设备 btnorder() { this.listflag = true }, btnorders() { this.listflag = false }, btnswiper(item) { let adId = item.adId this.$u.get("/app/ad/allList").then((res) => { if (res.code == 200) { res.data.forEach(item => { if (item.adId == adId) { if (item.urlType == 1) { uni.navigateTo({ url: '/pages/webview?url=' + item.url }) } else { uni.navigateTo({ url: item.url }) } } }) } }) }, calculateAnchorX(name) { let chineseLength = 0 let englishLength = 0 for (let i = 0; i < name.length; i++) { const charCode = name.charCodeAt(i) if (charCode >= 0x4e00 && charCode <= 0x9fa5) { chineseLength++ } else if (/[a-zA-Z]/.test(name[i])) { englishLength = englishLength + 0.3 // 英文长度加1,但视为两个中文字符长度 } } const totalLength = chineseLength + englishLength * 2 return -totalLength * 6.5 // 假设每个中文字符对应的 anchorX 偏移是 -6.5 }, scanQRCode() { this.$u.get('/app/user/userInfo').then(res => { if (res.code == 200) { if (this.wangluo == true) { uni.scanCode({ onlyFromCamera: true, scanType: ['qrCode'], success: res => { function getQueryParam(url, paramName) { let regex = new RegExp(`[?&]${paramName}=([^&]*)`) let results = regex.exec(url); return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null } let sceneValue = res.result let decodedValue = decodeURIComponent(sceneValue) let id = getQueryParam(decodedValue, 's') uni.navigateTo({ url: '/page_user/fuwu?id=' + id }) // console.log(res, id) let that = this let data = { deviceNo: id } that.$u.get(`/app/device/isBind?deviceNo=${id}`).then(res => { if (res.data == 2) { that.$u.get(`/app/device/${id}/withSuitList`).then( (res) => { if (res.code == 200) { uni.navigateTo({ url: '/page_user/fuwu?id=' + id }) } }) }else if (res.data == 0) { uni.showModal({ title: '提示', content: '该设备未录入,你需进行录入吗?', success: function(res) { if (res.confirm) { uni.navigateTo({ url: '/pages/zhuce?sn=' + id }) } else if (res.cancel) { } } }) } }) }, fail: err => { console.error('扫描失败:', err) uni.showToast({ title: '扫描失败', icon: 'none' }) } }) } else { uni.showModal({ title: '提示', content: '请打开网络再进行操作', success: function(res) { if (res.confirm) { } else if (res.cancel) { } } }) } } else { uni.navigateTo({ url: '/pages/login/login' }) } }) }, getad() { this.$u.get("/app/ad/allList").then((res) => { if (res.code == 200) { // res.data.forEach(item => { // this.imgad.push(item.picture) // }) this.imgad = res.data } }) }, btnindex(num) { if (this.wangluo = true) { //判断是否有网络在进行点击 if (num == 2) { uni.navigateTo({ url: '/page_fenbao/shiyong' }) } else if (num == 3) { uni.navigateTo({ url: '/pages/nearbystores/index' }) } else if (num == 1) { uni.navigateTo({ url: '/page_user/mydingdan' }) } else if (num == 4) { uni.navigateTo({ url: '/page_user/guzhang' }) } else if (num == 5) { uni.navigateTo({ url: '/page_user/homepage' }) } else if (num == 6) { uni.navigateTo({ url: '/page_user/sjhezuo' }) } // else if (num == 7) { // uni.navigateTo({ // url: '/page_fenbao/statulist/fault/yichang/index' // }) // } } else { uni.showModal({ title: '提示', content: '请打开网络再进行操作', success: function(res) { if (res.confirm) { } else if (res.cancel) { } } }) } }, onControltap(control) { this.setMapScale() }, // 地图回正 async setMapScale(e, val) { let mapContext = uni.createMapContext('map', this); let setScale = () => { return new Promise((resolve, reject) => { mapContext.getScale({ success: r => { resolve() } }) }) }; await setScale(); mapContext.moveToLocation({ success: (res) => { const timer = setTimeout(() => { clearTimeout(timer); }, 500) } }) }, getMyLocation() { uni.getLocation({ type: 'wgs84', success: (res) => { this.jinweidu = res.longitude + ',' + res.latitude this.latitude = Number(res.latitude.toFixed(5)) - 0.005 this.longitude = Number(res.longitude.toFixed(5)) + 0.005 this.setMapScale() // 请求附近的店铺 this.$u.get("/app/store/listNearBy?center=" + this.jinweidu + '&radius=' + 1000).then( res => { if (res.code == 200) { this.listmap = res.data res.data.forEach(item => { // if (item.deviceCount !== null && item.deviceCount > 0) { const shopCover = { id: parseFloat(item.storeId), latitude: item.lat, longitude: item.lng, width: 25, height: 30, iconPath: 'https://api.ccttiot.com/smartmeter/img/static/ukj9VG7nQkBdZ4SKfQ6E', // iconPath:item.picture label: { content: item.name, anchorX: (() => { if (item.name.length <= 2) { return -12 } else if (item.name.length <= 3) { return -20 } else if (item.name.length <= 4) { return -25 } else if (item.name.length <= 5) { return -30 } else if (item.name.length <= 6) { return -35 } else if (item.name.length <= 8) { return -40 } else if (item.name.length <= 10) { return -45 } else { return -item.name.length * 6 } })(), fontWeight: 700, color: '#8883F0', borderColor: '#fff', borderRadius: 5, bgColor: '#fff' } } this.covers.push(shopCover) // } }) } }) }, fail: (err) => { console.error('获取位置失败:', err); } }) }, updateMarkers() { this.mapContext.getScale({ success: (res) => { this.covers = [] // 清空之前的覆盖物 if (res.scale <= 14) { this.addMarkersWithoutLabels() } else { this.addMarkersWithLabels() } }, fail: (error) => { // console.error('获取地图缩放级别失败:', error); }, }) }, addMarkersWithoutLabels() { this.listmap.forEach((item) => { // if (item.deviceCount !== null && item.deviceCount > 0) { const shopCover = { id: parseFloat(item.storeId), latitude: item.lat, longitude: item.lng, width: 25, height: 30, iconPath: 'https://api.ccttiot.com/smartmeter/img/static/ukj9VG7nQkBdZ4SKfQ6E', borderColor: '#fff', borderRadius: 5, bgColor: '#fff' } this.covers.push(shopCover) // } }) }, addMarkersWithLabels() { this.listmap.forEach((item) => { // if (item.deviceCount !== null && item.deviceCount > 0) { const shopCover = { id: parseFloat(item.storeId), latitude: item.lat, longitude: item.lng, width: 25, height: 30, iconPath: 'https://api.ccttiot.com/smartmeter/img/static/ukj9VG7nQkBdZ4SKfQ6E', label: { content: item.name, anchorX: this.calculateAnchorX(item.name), fontWeight: 700, color: '#8883F0', textShadow: '2px 2px 0px white, -2px -2px 0px white, 2px -2px 0px white, -2px 2px 0px white', borderColor: '#fff', borderRadius: 5, bgColor: '#fff' } } this.covers.push(shopCover) // } }) }, handleMarkerClick(event) { let markerId = event.markerId uni.navigateTo({ url: '/pages/myorder/index?markerId=' + markerId }) }, logins() { this.getuserinfo() }, getuserinfo() { this.$u.get("/app/user/userInfo").then((res) => { if (res.code == 200) { this.userId = res.data.userId this.isMch = res.data.isMch uni.setStorageSync('userType', res.data) this.userType = res.data.type this.deviceCount = res.data.deviceCount } else { this.jmlogin() } }) }, jmlogin() { let taht = this wx.login({ success(res) { if (res.code) { let data = { loginCode: res.code, deptId: "101" } taht.$u.post('/app/auth/wxLogin', data).then(res => { if (res.code == 10003) { // uni.navigateTo({ // url: '/pages/login/login' // }) } else if (res.code == 200) { uni.setStorageSync('token', res.token) taht.logins() } }) } }, }) }, gethuidaio() { this.$u.get('/app/bill/recharge/device/fail/list').then(res => { if (res.code == 200) { if (res.data.length > 0) { this.dingobj = res.data } else { uni.removeStorageSync('time') } } }) }, // tocz() { // uni.navigateTo({ // url: '/page_fenbao/chongzhi?dingobj=' + JSON.stringify(this.dingobj) // }) // }, }, mounted() { this.getMyLocation() // 获取并设置自身位置的覆盖物 this.startNetworkCheck() //检测网络 } }; </script> <style lang="scss"> /deep/ .u-title { padding-bottom: 15rpx; } /deep/ .u-icon__icon { // padding-bottom: 22rpx; } /deep/ .u-swiper-image { height: 248rpx !important; } /deep/ .map { width: 100%; height: 100%; } .bjimg { position: fixed; top: 0; left: 0; width: 100%; height: 210rpx; image { width: 100%; height: 210rpx; } } .box_li { padding: 0 38rpx; box-sizing: border-box; height: 100%; background-color: #fff; border-radius: 50rpx; position: relative; bottom: 150rpx; } .dateactive { background: #E1F3ED; } .mask { width: 100%; height: 100vh; position: fixed; top: 0; left: 50%; transform: translateX(-50%); background-color: #000; opacity: .6; } page { border-radius: 0rpx 0rpx 0rpx 0rpx; } .page { width: 750rpx; box-sizing: border-box; height: 100vh; overflow: hidden; .tip_box { position: fixed; left: 72rpx; top: 700rpx; width: 610rpx; background: #F7FAFE; border-radius: 30rpx 30rpx 30rpx 30rpx; z-index: 999; .top { padding: 52rpx 38rpx 20rpx 36rpx; .txt { width: 100%; text-align: center; font-weight: 500; font-size: 32rpx; color: #3D3D3D; } } .bd { margin-bottom: 20rpx; padding-left: 30rpx; .xiao { display: flex; margin-top: 20rpx; view { font-size: 26rpx; color: #000; margin-right: 10rpx; } } } .bot { border-top: 2rpx solid #D8D8D8; display: flex; flex-wrap: nowrap; height: 100%; .bot_left { width: 50%; height: 98rpx; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 36rpx; color: #3D3D3D; } .bot_right { width: 50%; height: 98rpx; display: flex; align-items: center; justify-content: center; border-left: 2rpx solid #D8D8D8; font-weight: 500; font-size: 36rpx; color: #8883F0; } } } .userdaili { .gongneng { width: 680rpx; height: 304rpx; background: #FFFFFF; border-radius: 24rpx 24rpx 24rpx 24rpx; padding: 0 50rpx; box-sizing: border-box; .icons { display: inline-block; width: 145rpx; text-align: center; image { margin-top: 34rpx; width: 50px; height: 50px; } } } .ordertongji { width: 680rpx; height: 342rpx; background: #FFFFFF; border-radius: 24rpx 24rpx 24rpx 24rpx; .shuju { display: flex; justify-content: space-between; padding: 0 40rpx; box-sizing: border-box; margin-top: 24rpx; .ddje { text-align: center; .shu { font-weight: 500; font-size: 40rpx; color: #3D3D3D; } .sb { margin-top: 20rpx; font-weight: 500; font-size: 20rpx; color: #3D3D3D; } } } .date { padding-left: 80rpx; padding-right: 80rpx; box-sizing: border-box; display: flex; justify-content: space-between; margin-top: 26rpx; text { padding: 6rpx 18rpx; box-sizing: border-box; background: #eee; border-radius: 10rpx 10rpx 10rpx 10rpx; font-size: 26rpx; color: #808080; } } .orderday { display: flex; justify-content: space-between; width: 100%; padding: 10rpx 12rpx; box-sizing: border-box; text { margin-right: 10rpx; border-radius: 20rpx; text-align: center; display: inline-block; width: 148rpx; height: 84rpx; text-align: center; line-height: 84rpx; } } } .dttitle { margin: 36rpx 0; font-weight: 500; font-size: 36rpx; color: #3D3D3D; } .zhanghu { margin-top: 32rpx; width: 680rpx; height: 264rpx; background: #FFFFFF; border-radius: 24rpx 24rpx 24rpx 24rpx; padding: 36rpx 38rpx; box-sizing: border-box; .zhtitle { display: flex; justify-content: space-between; .sj { display: flex; justify-content: space-between; text { font-size: 26rpx; color: #3D3D3D; } } .tx { font-size: 26rpx; color: #27D089; } } .zhje { margin-top: 20rpx; display: flex; justify-content: space-between; border-bottom: 1px solid #ccc; padding-bottom: 20rpx; text { font-weight: 500; font-size: 48rpx; color: #3D3D3D; } .btntx { width: 156rpx; height: 42rpx; background: linear-gradient(270deg, #54DAA1 0%, #19CD82 100%); border-radius: 40rpx 40rpx 40rpx 40rpx; font-size: 26rpx; color: #FFFFFF; text-align: center; line-height: 42rpx; margin-top: 10rpx; } } .buc { margin-top: 20rpx; font-size: 26rpx; color: #979797; } } } //样式结束 .title { font-weight: 500; font-size: 36rpx; color: #3D3D3D; line-height: 50rpx; text-align: left; font-style: normal; text-transform: none; } .guangg { // margin-top: 10rpx; margin-bottom: 10rpx; image { border-radius: 30rpx; width: 680rpx; height: 218rpx; } } .saoma { width: 750rpx; height: 230rpx; background: #FFFFFF; position: relative; left: -38rpx; bottom: 0; padding-top: 30rpx; border-radius: 54rpx 54rpx 0 0; margin-top: 20rpx; box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2); view { text-align: center; width: 676rpx; height: 102rpx; background: linear-gradient(270deg, #8883F0 0%, #8883F0 100%); border-radius: 54rpx 54rpx 54rpx 54rpx; font-weight: 500; font-size: 40rpx; color: #FFFFFF; margin: auto; line-height: 102rpx; } image { width: 56rpx; height: 56rpx; vertical-align: middle; margin-right: 10rpx; margin-bottom: 10rpx; } } .ditu { width: 100%; height: 980rpx; // background: #FFFFFF; border-radius: 38rpx 38rpx 38rpx 38rpx; // padding-top: 16rpx; position: relative; .ongoing_order { width: 622rpx; max-height: 100%; background-color: rgba(0, 0, 0, 0.4); // background: linear-gradient(to right, #FFEFEF 20%, #D9F6FF 100%); border-radius: 40rpx 40rpx 40rpx 40rpx; // opacity: 0.6; position: absolute; top: 48rpx; left: 50%; transform: translateX(-50%); .order_list { width: 100%; height: 110rpx; // background-color: rgba(0, 0, 0, 0.6); border-radius: 40rpx 40rpx 40rpx 40rpx; display: flex; align-items: center; justify-content: space-between; font-size: 36rpx; color: #fff; padding: 0 38rpx; padding-right: 56rpx; box-sizing: border-box; line-height: 110rpx; animation: fadeInDown .5s ease-out forwards; image { width: 17rpx; height: 34rpx; } } .order_top { width: 622rpx; height: 94rpx; background: rgba(0, 0, 0, 0.4); // background: linear-gradient(to right, #FFEFEF 20%, #D9F6FF 100%); box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.3); border-radius: 40rpx 40rpx 40rpx 40rpx; display: flex; align-items: center; justify-content: space-between; padding: 18rpx 42rpx; box-sizing: border-box; font-weight: 400; font-size: 36rpx; color: #fff; .order_lt { display: flex; align-items: center; image { width: 44rpx; height: 62rpx; margin-right: 20rpx; } } image { width: 47rpx; height: 47rpx; padding-bottom: 10rpx; box-sizing: border-box; } } } .fujin { position: absolute; top: 730rpx; padding-left: 30rpx; width: 100%; image { width: 76rpx; height: 96rpx; } } .dtxs { width: 100%; height: 1000rpx; margin: auto; // border-radius: 30rpx; overflow: hidden; } .tubiao { display: flex; justify-content: space-between; padding: 30rpx 0; box-sizing: border-box; // padding-bottom: ; .gr { text-align: center; width: 100%; font-weight: 400; font-size: 26rpx; color: #3D3D3D; image { display: block; margin: auto; // margin-bottom: 14rpx; width: 104rpx; height: 122rpx; } } } } } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } </style>