wszhyWx/pages/fertilizer_machine/fertilizer_machine.vue

1149 lines
26 KiB
Vue

<template>
<view class="fertilizer_machine">
<u-navbar :background="background" :is-back='true' back-icon-color='#FFFFFF' :border-bottom="false" title="施肥机"
title-color='#FFFFFF' :title-bold='true' title-size='32'></u-navbar>
<view class="content">
<view class="output_valve">
<view class="title">
<image src="../../static/output_valve.png" mode=""></image>
<text>输出电磁阀</text>
</view>
<view class="detail">
<template v-for="(item,index) in 64">
<view class="item" v-if="centerBottom.indexOf(index) != -1" :key="index">
{{ index + 1 }}#
</view>
</template>
</view>
</view>
<view class="dataInfo1">
<view class="item">
<view class="img">
<image src="../../static/PH1.png" mode=""></image>
</view>
<text>目标PH</text>
<text>{{ countData100(inputData['6']) }}</text>
</view>
<view class="item">
<view class="img">
<image src="../../static/PH1.png" mode=""></image>
</view>
<text>实测PH</text>
<text>{{ countData100(inputData['8']) }}</text>
</view>
<view class="item1">
<view class="img">
<image src="../../static/EC.png" mode=""></image>
</view>
<text>目标EC</text>
<text>{{ countData100(inputData['7']) + 'mS/cm' }}</text>
</view>
<view class="item1">
<view class="img">
<image src="../../static/EC.png" mode=""></image>
</view>
<text>实测EC</text>
<text>{{ countData100(inputData['9']) + 'mS/cm' }}</text>
</view>
</view>
<view class="dataInfo2">
<view class="top">
<view class="item" v-for="(item,index) in dataInfo2_list" :key="index">
<image :src="item.image" mode=""></image>
<text>{{ item.title }}</text>
<text>{{ item.timer }}</text>
</view>
</view>
<view class="bottom">
<view class="btn-1" :class="inputData['30'] == 1 || inputData['30'] == 3 ? 'in' : 'out'">
<image v-if="inputData['30'] == 1 || inputData['30'] == 3" src="../../static/in-sel.png"
mode=""></image>
<image v-else src="../../static/in.png" mode=""></image>
<text>进水泵</text>
</view>
<view class="btn-2" :class="inputData['30'] == 2 || inputData['30'] == 3 ? 'in' : 'out'">
<image v-if="inputData['30'] == 2 || inputData['30'] == 3" src="../../static/out-sel.png"
mode=""></image>
<image v-else src="../../static/out.png" mode=""></image>
<text>配肥泵</text>
</view>
</view>
</view>
<view class="signal">
<view :class="right2Index.indexOf(index) != -1?'item_act':'item'" v-for="(item,index) in rightList2"
:key="index">
{{item}}
</view>
</view>
<view class="set">
<view class="item" v-for="(item,index) in 16" :key="index" @click="showPop(index+1)">
<view class="left">
{{index+1}}#灌溉组
</view>
<view class="right">
<text>设置</text>
<image src="../../static/downArrow.png" mode=""></image>
</view>
</view>
</view>
<u-popup v-model="show" mode="center" :mask-close-able='false' width="640rpx" height="880rpx"
:closeable='false'>
<view class="contentPop">
<view class="contentPop_box">
<view class="title">
<!-- 灌溉组#{{indexs}} -->{{readFs_byid_name}}
</view>
<view class="control_model">
<view class="control">
控制模式:
</view>
<view class="model">
<text @click="change00(1)" :class="topActive==1?'stop_act':'stop'"
class="stop">停止</text>
<text @click="change00(2)" :class="topActive==2?'hand_act':'hand'" class="hand"
style="width: 140rpx;">手动启动</text>
<text @click="change00(3)" :class="topActive==3?'auto_act':'auto'">自动</text>
</view>
</view>
<view class="line_pop"></view>
<view class="irrigate_time1">
手动启动时间
<view class="irrigate_input">
<input v-model="inputData1[10 + (indexs - 1) + '01']"
@blur="changeData10(10 + (indexs - 1) + '01', $event)" type="digit" placeholder="0"
step="0.1" />
<!-- <u-input v-model="inputData[10 + (indexs - 1) + '01']" type="text" :border="false" input-align='center'
height='66' :clearable='false' /> -->
</view>
min
</view>
<view class="line_pop"></view>
<view class="irrigate_time1">
灌溉
<view class="irrigate_input">
<input v-model="inputData1[10 + (indexs - 1) + '51']"
@blur="change(10 + (indexs - 1) + '51', $event)" type="number" placeholder="0" />
<!-- <u-input v-model="inputData[10 + (indexs - 1) + '51']" type="text" :border="false" input-align='center'
height='66' :clearable='false' /> -->
</view>
次清水
</view>
<view class="line_pop"></view>
<view class="irrigate_time2">
间隔灌溉
<view class="irrigate_input">
<input v-model="inputData1[10 + (indexs - 1) + '52']"
@blur="change(10 + (indexs - 1) + '52', $event)" type="number" placeholder="0" />
<!-- <u-input v-model="inputData[10 + (indexs - 1) + '52']" type="text" input-align='center' height='66'
:clearable='false' /> -->
</view>
次施肥
</view>
<view class="line_pop"></view>
<view class="changeMoreBtn" @click="toWebView(indexs)">
<image src="../../static/changeMore.png" mode=""></image>
<text>修改更多参数</text>
</view>
</view>
<image src="../../static/closed.png" mode="" @click="closePop"></image>
</view>
</u-popup>
</view>
<u-toast ref="uToast" />
</view>
</template>
<script>
export default {
data() {
return {
// 头部导航背景
background: {
backgroundColor: '#24B383',
},
// 输出电磁阀
dataInfo2_list: [{
image: '../../static/icon_1.png',
title: '灌溉剩余时长',
timer: '0min'
},
{
image: '../../static/icon_2.png',
title: '灌溉瞬时流量',
timer: '0L/h'
},
{
image: '../../static/icon_3.png',
title: '本次灌溉量',
timer: '0L'
},
{
image: '../../static/icon_4.png',
title: '启动方式',
timer: '无'
},
{
image: '../../static/icon_5.png',
title: '使用灌溉配方号',
timer: '0'
},
{
image: '../../static/icon_6.png',
title: '执行灌溉组号',
timer: '0'
},
],
signalCurrent: 0,
show: false,
rightList2: ['外控信号1#',
'外控信号2#',
'外控信号3#',
'外控信号4#',
'高液位信号',
'中液位信号',
'低液位信号',
'电机信号',
],
irrigate_value1: 0,
irrigate_value2: 0,
irrigate_value3: 0,
deviceId: 0,
inputData: [],
centerBottom: [],
right2Index: [],
openType: '',
left1Act: -1,
topActive: 0,
indexs: 1,
inputData1: [],
timer_: null,
readFs_byid_name_obj:{},
readFs_byid_list:[
'solenoidOne',
'solenoidTwo',
'solenoidThree',
'solenoidFour',
'solenoidFive',
'solenoidSix',
'solenoidSeven',
'solenoidEight',
'solenoidNine',
'solenoidTen',
'solenoidElven',
'solenoidTwelve',
'solenoidThirteen',
'solenoidFourteen',
'solenoidFifteen',
'solenoidSixteen'
],
readFs_byid_name:'',
};
},
watch: {
},
onLoad(option) {
this.deviceId = option.id
uni.showLoading({
title: '加载中...'
})
this.dataInit()
let that = this
this.timer_ = setInterval(function() {
that.dataInit();
}, 5000);
// 查看用户施肥机名称信息
this.getReadFs_byid()
},
onUnload() {
let that = this
clearTimeout(that.timer_)
},
onPullDownRefresh() {
uni.showLoading({
title: '加载中...'
})
this.dataInit();
},
methods: {
toWebView(id) {
// console.log(id);
uni.navigateTo({
url: '/pages/web_view/web_view?id=' + id + '&deviceId=' + this.deviceId
})
},
countData10(data) {
if (data) {
return data / 10
} else {
return 0
}
},
dataInit() {
// uni.showLoading({
// title: '加载中...'
// })
const that = this
var deviceId = this.deviceId
var data = {
"equipmentId": deviceId,
"pattern": 0, //需要根据文档填写 //6目标ph-数值
"regNum": 72
}
this.$http({
url: this.api.readFs_state,
data: data
}).then(res => {
if (res.code == 200) {
uni.hideLoading()
uni.stopPullDownRefresh();
this.inputData = res.data;
this.getData30() //数据30/进水出水泵
this.getData29() //数据29 启动方式/信号
this.getDataInfo2()
this.getcenterBottom() //获取电磁阀
} else {
that.$refs.uToast.show({
title: res.msg,
type: 'error',
})
}
})
},
// 查看用户施肥机名称信息
getReadFs_byid(){
let deviceId = this.deviceId;
this.$http({
url:this.api.readFs_byid + '?deviceId=' + deviceId,
method:'GET'
}).then(res=>{
if(res.code == 200){
this.readFs_byid_name_obj = res.data;
}
})
},
getReg() {
uni.showLoading({
title: '加载中...'
})
const that = this
var data = {
equipmentId: this.deviceId,
pattern: 10 + (this.indexs - 1) + "00", //需要根据文档填写 //6目标ph-数值
regNum: 61,
};
this.$http({
url: this.api.readFs_reg,
data: data
}).then((res) => {
// console.log(res, 11);
if (res.code == 200) {
uni.hideLoading()
// uni.stopPullDownRefresh();
this.inputData1 = res.data;
this.getType00();
this.inputData1[10 + (this.indexs - 1) + '01'] = this.countData10(this.inputData1[10 + (
this.indexs - 1) + '01'])
// console.log(this.inputData1[10 + (this.indexs - 1) + '01'], 111);
} else {
that.$refs.uToast.show({
title: res.msg,
type: 'error',
})
}
})
},
padString(str, length) {
return str.padStart(length, '0');
},
getType00() {
var number = this.padString(this.inputData1[10 + (this.indexs - 1) + "00"].toString(2), 3)
// console.log(number);
if (Number(number[0])) {
this.topActive = 1
} else if (Number(number[1])) {
this.topActive = 2
} else if (Number(number[2])) {
this.topActive = 3
} else {
this.topActive = 0
}
},
change00(index) {
uni.showLoading({
title: '加载中...'
})
this.topActive = index
var list = ["0", "0", "0"];
if (index == 1) {
list[0] = "1";
} else {
list[0] = "0";
}
if (index == 2) {
list[1] = "1";
} else {
list[1] = "0";
}
if (index == 3) {
list[2] = "1";
} else {
list[2] = "0";
}
var num = list.join("");
var dataNum = {
target: {
value: parseInt(num, 2),
},
};
this.change(10 + (this.indexs - 1) + "00", dataNum);
},
getDataInfo2() {
var inputData = this.inputData
this.dataInfo2_list[0].timer = this.countData(inputData['36']) + 'min'
this.dataInfo2_list[1].timer = this.countData(inputData['28']) + 'L/h'
this.dataInfo2_list[2].timer = this.countData(inputData['37']) + 'L'
// this.dataInfo2_list[3].timer=this.countData(inputData['28'])
this.dataInfo2_list[4].timer = this.countData(inputData['31'])
this.dataInfo2_list[5].timer = this.countData(inputData['38'])
},
//什么方式启动的灌溉
getData29() {
var number = this.padString(this.inputData['29'].toString(2), 14)
var index = 6
var typeNumber = -1
for (var i = 0; i < index; i++) {
if (Number(number[i])) {
typeNumber = i
}
}
this.openType = this.getType29(typeNumber)
this.dataInfo2_list[3].timer = this.getType29(typeNumber)
var statusIndex = 8
for (var j = 0; j < statusIndex; j++) {
if (Number(number[number.length - 1 - j])) {
if (j == 0) {
this.right2Index.push(1)
} else if (j == 1) {
this.right2Index.push(0)
} else {
this.right2Index.push(j)
}
}
}
},
//进水泵和出水泵状态
getData30() {
// var number = this.padString(this.inputData['30'].toString(2), 2)
// if (this.inputData['30'].bit0 == 1) {
// this.left1Act = 1
// } else if (this.inputData['30'].bit1 == 1) {
// this.left1Act = 2
// } else {
// this.left1Act = 3
// }
},
changeData10(code, el) {
var data = el.target.value * 10
var sendData = {
target: {
value: data
}
}
this.change(code, sendData)
},
//间隔灌溉天数
change(code, el) {
var data = {
equipmentId: this.deviceId,
regAddress: code,
num: el.target.value,
};
this.delayTimer(0, data);
},
//限制 写入停止后j*100毫秒调取函数
delayTimer(i, data) {
const that = this;
//整体接口
let j = 5;
//避免开启多个计时器
this.timer && clearInterval(this.timer);
this.timer = setInterval(() => {
++i;
if (i == j) {
that.changeData(data);
clearInterval(this.timer);
}
}, 100);
},
changeData(data) {
const that = this
this.$http({
url: this.api.writeFs,
data: data
}).then((res) => {
if (res.code == 200) {
uni.hideLoading()
this.getReg()
that.$refs.uToast.show({
title: res.msg,
type: 'success',
})
} else {
that.$refs.uToast.show({
title: res.msg,
type: 'error',
})
}
});
},
getcenterBottom() {
this.centerBottom = []
var inputData = this.inputData
var list1 = this.padString(inputData['32'].toString(2), 16)
var list2 = this.padString(inputData['33'].toString(2), 16)
var list3 = this.padString(inputData['34'].toString(2), 16)
var list4 = this.padString(inputData['35'].toString(2), 16)
var number = 16
for (var i = 0; i < number; i++) {
if (Number(list1[list1.length - 1 - i])) {
this.centerBottom.push(i)
}
}
for (var j = 0; j < number; j++) {
if (Number(list2[list2.length - 1 - j])) {
this.centerBottom.push(j + 16)
}
}
for (var k = 0; k < number; k++) {
if (Number(list3[list3.length - 1 - k])) {
this.centerBottom.push(k + 32)
}
}
for (var l = 0; l < number; l++) {
if (Number(list4[list4.length - 1 - l])) {
this.centerBottom.push(l + 48)
}
}
},
countData(data) {
if (data) {
return data
} else {
return 0
}
},
padString(str, length) {
return str.padStart(length, '0');
},
countData100(data) {
if (data) {
return data / 100
} else {
return 0
}
},
getType29(index) {
if (index == 0) {
return '手动开启动'
} else if (index == 1) {
return '外控模式启动'
} else if (index == 2) {
return '光照积累启动'
} else if (index == 3) {
return '土壤湿度控制'
} else if (index == 4) {
return '间隔启动'
} else if (index == 5) {
return '定时启动'
} else {
return '无'
}
},
//countType计算类型
//0是原数据
//1是原数据-400
//2是原数据/10
//3是(原数据-400) / 10
countType1(data) {
return data - 400
},
countType2(data) {
return data / 10
},
countType3(data) {
return (data - 400) / 10
},
getTypeData(dataCode, typeCode) {
var typeList = this.$store.state.typeList
var countType = 0
typeList.forEach((el, index) => {
if (el.value == this.inputData1[typeCode]) {
console.log(this.inputData1[typeCode], 111, el.countType);
countType = el.countType
}
})
if (countType == 0) {
return this.inputData[dataCode]
} else if (countType == 1) {
return this.countType1(this.inputData[dataCode])
} else if (countType == 2) {
return this.countType2(this.inputData[dataCode])
} else if (countType == 3) {
return this.countType3(this.inputData[dataCode])
}
},
signalHandler(index) {
this.signalCurrent = index
},
showPop(index) {
this.show = true
this.indexs = index
this.getReg()
this.readFs_byid_list.forEach((el,j)=>{
if(index == (j+1)){
this.readFs_byid_name = this.readFs_byid_name_obj[el]
}
})
},
closePop() {
// this.dataInit();
// this.getReg();
this.show = false
}
}
}
</script>
<style lang="scss" scoped>
.fertilizer_machine {
width: 100%;
min-height: 100vh;
background-color: #F5F6FA;
.content {
box-sizing: border-box;
padding: 20rpx 30rpx;
.output_valve {
width: 690rpx;
// height: 160rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(153, 153, 153, 0.1);
border-radius: 20rpx;
box-sizing: border-box;
padding: 20rpx;
.title {
display: flex;
align-items: center;
>image {
width: 50rpx;
height: 50rpx;
margin-right: 16rpx;
}
>text {
font-size: 30rpx;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: #333333;
}
}
.detail {
margin-top: 16rpx;
display: flex;
flex-wrap: wrap;
.item {
flex-shrink: 0;
width: 90rpx;
height: 54rpx;
background: #EFFCF7;
border: 2px solid rgba(58, 187, 144, 0.25);
border-radius: 10rpx;
font-size: 28rpx;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: #24B383;
display: flex;
justify-content: center;
align-items: center;
margin: 5rpx 8rpx;
flex-shrink: 0;
}
}
}
.dataInfo1 {
width: 690rpx;
height: 180rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(153, 153, 153, 0.1);
border-radius: 20rpx;
margin-top: 15rpx;
display: flex;
align-items: center;
justify-content: space-around;
.item,
.item1 {
width: 25%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-shrink: 0;
>text:nth-child(2) {
font-size: 24rpx;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: #333333;
margin: 6rpx 0 8rpx 0;
}
>text:nth-child(3) {
font-size: 28rpx;
font-family: PingFang-SC-Bold;
font-weight: bold;
}
}
.item {
.img {
height: 59rpx;
>image {
width: 45rpx;
height: 59rpx;
}
}
>text:nth-child(3) {
color: #1EA6F5;
}
}
.item1 {
.img {
height: 59rpx;
display: flex;
align-items: center;
>image {
width: 52rpx;
height: 42rpx;
}
}
>text:nth-child(3) {
color: #3EC195;
}
}
}
.dataInfo2 {
width: 690rpx;
height: 480rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(153, 153, 153, 0.1);
border-radius: 20rpx;
margin-top: 15rpx;
box-sizing: border-box;
padding: 9rpx 0rpx 19rpx;
.top {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
.item {
width: 33%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
>image {
width: 108rpx;
height: 108rpx;
}
>text:nth-child(2) {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
}
>text:nth-child(3) {
font-size: 30rpx;
font-family: PingFang SC;
font-weight: bold;
color: #1EA6F5;
}
}
}
.bottom {
box-sizing: border-box;
padding: 8rpx 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
.btn-1 {
>image {
width: 39rpx;
height: 28rpx;
margin-right: 10rpx;
}
}
.btn-2 {
>image {
width: 27rpx;
height: 33rpx;
margin-right: 10rpx;
}
}
.in {
width: 300rpx;
height: 80rpx;
background: linear-gradient(0deg, #54CDA4, #27B584);
border-radius: 10rpx;
display: flex;
justify-content: center;
align-items: center;
text {
font-size: 30rpx;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: #FFFFFF;
}
}
.out {
width: 300rpx;
height: 80rpx;
background: #EFFCF7;
border: 2px solid rgba(58, 187, 144, 0.25);
border-radius: 10rpx;
display: flex;
justify-content: center;
align-items: center;
text {
font-size: 30rpx;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: #24B383;
}
}
}
}
.signal {
width: 690rpx;
height: 180rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(153, 153, 153, 0.1);
border-radius: 20rpx;
margin-top: 15rpx;
display: flex;
flex-wrap: wrap;
align-content: space-between;
justify-content: space-between;
box-sizing: border-box;
padding: 20rpx 30rpx;
.item {
width: 140rpx;
height: 60rpx;
background: #EFFCF7;
border: 2px solid rgba(58, 187, 144, 0.25);
border-radius: 10rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 24rpx;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: #24B383;
}
.item_act {
width: 140rpx;
height: 60rpx;
background: linear-gradient(0deg, #54CDA4, #27B584);
border-radius: 10rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 24rpx;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: #FFFFFF;
}
}
.set {
width: 690rpx;
background-color: #F5F6FA;
margin-top: 15rpx;
.item {
height: 80rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(153, 153, 153, 0.1);
border-radius: 15rpx;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding: 0 30rpx 0 33rpx;
margin-bottom: 15rpx;
.left {
font-size: 30rpx;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: #333333;
}
.right {
display: flex;
align-items: center;
>text {
font-size: 30rpx;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: #999999;
margin-right: 20rpx;
}
>image {
width: 16rpx;
height: 8rpx;
}
}
}
}
/deep/.u-mode-center-box {
background-color: transparent;
}
.contentPop {
width: 100%;
min-height: calc(100% - 70rpx);
position: relative;
.contentPop_box {
width: 100%;
height: 100%;
background-color: #fff;
border-radius: 20rpx;
padding-bottom: 30rpx;
display: flex;
flex-direction: column;
align-items: center;
.title {
width: 100%;
height: 91rpx;
font-size: 34rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
border-bottom: 1rpx solid #DDDDDD;
text-align: center;
line-height: 91rpx;
}
.line_pop{
width: 580rpx;
height: 1rpx;
background-color: #DDDDDD;
}
.control_model {
height: 172rpx;
// border-bottom: 1rpx solid #DDDDDD;
box-sizing: border-box;
padding: 30rpx;
.control {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
}
.model {
width: 100%;
margin-top: 12rpx;
display: flex;
.auto,
.stop,
.hand {
width: 120rpx;
height: 66rpx;
background: #EFFCF7;
border: 2px solid rgba(58, 187, 144, 0.25);
border-radius: 10rpx;
font-size: 28rpx;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: #24B383;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
}
.auto_act,
.stop_act,
.hand_act {
width: 120rpx;
height: 66rpx;
background: linear-gradient(0deg, #54CDA4, #27B584);
border-radius: 10rpx;
font-size: 28rpx;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: #EFFCF7;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
}
.two_min {
width: 140rpx;
height: 66rpx;
background: #F5F6FA;
border: 2px solid #E1E2E6;
border-radius: 10rpx;
font-size: 34rpx;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: #333333;
display: flex;
align-items: center;
justify-content: center;
}
}
}
.irrigate_time1,
.irrigate_time2 {
height: 126rpx;
display: flex;
align-items: center;
// border-bottom: 1rpx solid #DDDDDD;
font-size: 30rpx;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: #333333;
box-sizing: border-box;
padding-left: 30rpx;
.irrigate_input {
width: 90rpx;
height: 66rpx;
background: #F5F6FA;
border: 2px solid #E1E2E6;
border-radius: 10rpx;
margin: 0 15rpx;
>input {
width: 100%;
height: 100%;
text-align: center;
}
}
}
.changeMoreBtn {
width: 340rpx;
height: 80rpx;
background: linear-gradient(0deg, #57CFA6, #25B383);
box-shadow: 0rpx 3rpx 15rpx 0rpx rgba(36, 179, 131, 0.35);
border-radius: 15rpx;
display: flex;
justify-content: center;
align-items: center;
margin: 30rpx auto;
>image {
width: 30rpx;
height: 30rpx;
margin-right: 16rpx;
}
>text {
font-size: 30rpx;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: #FFFFFF;
}
}
}
>image {
width: 50rpx;
height: 50rpx;
position: absolute;
bottom: -59rpx;
left: 50%;
transform: translate(-50%);
}
}
}
}
</style>