chuangte/suta
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
db501fdc40
suta/pages/index/index.vue

1238 lines
28 KiB
Vue
Raw Normal View History

aa
2024-05-11 10:06:09 +08:00
<template>
<view class="flex-col page">
<view class="padding-box">
<!-- <view class="loading" v-if="showloading">
<view class="loading_box">
<u-loading-icon color='#fff'></u-loading-icon>
<text>loading...</text>
</view>
</view> -->
<view class="flex-col group">
<view class="mt-14 flex-row justify-between">
</view>
</view>
<view class="mt-22 flex-col">
<view class="flex-row justify-center top-img">
<view @click="fxyujin" class="flex-col section left-card">
<!-- 左上模块 -->
<view class="flex-row">
<view class="flex-col">
<view class="flex-row self-stretch top-jinbaoqi top-jinbaoqi-top-t">
<!-- 警报灯 -->
<view class="img-lef">
<image class="shrink-0 self-center image_7" src="../../static/jinbao.png" />
<text class="self-start text_5">24H</text>
</view>
<!-- 22 -->
aaa
2024-05-16 18:01:54 +08:00
<text class="self-start text_3 text_4 ml-19">{{formData.warning_count == undefined ? 0 : formData.warning_count}}</text>
aa
2024-05-11 10:06:09 +08:00
<!-- 左上的箭头 -->
<image class="ml-28 self-start image_8 image_9" src="../../static/shouye-you.png" />
</view>
</view>
</view>
<view class="top-jinbaoqi top-jinbaoqi-top-t">
<view class="flex-row group_3 tac-dainlaing">
<text class="font_3 text_8 padding-top-bootm">电量不足</text>
<text
:id="formData.battery_low_count < 1 ? 'color-text-shu1' : formData.battery_low_count < 5 ? 'color-text-shu2' : 'color-text-shu3'"
aaa
2024-05-16 18:01:54 +08:00
class="font_5 text_12">{{formData.battery_low_count == undefined ? 0 : formData.battery_low_count}}</text>
aa
2024-05-11 10:06:09 +08:00
</view>
<view class="flex-row group_5 tac-dainlaing">
<text class="ml-30 font_3 text_9 padding-top-bootm">震动异常</text>
<text
:id="formData.shake_count < 1 ? 'color-text-shu1' : formData.shake_count < 5 ? 'color-text-shu2' : 'color-text-shu3'"
aaa
2024-05-16 18:01:54 +08:00
class="ml-68 font_5">{{formData.shake_count == undefined ? 0 : formData.shake_count}}</text>
aa
2024-05-11 10:06:09 +08:00
</view>
</view>
<view class="top-jinbaoqi top-jinbaoqi-top-t">
<view class="flex-row group_3 tac-dainlaing">
<text class="font_3 text_13 padding-top-bootm">出勤异常</text>
<text
:id="formData.work_count < 1 ? 'color-text-shu1' : formData.work_count < 5 ? 'color-text-shu2' : 'color-text-shu3'"
aaa
2024-05-16 18:01:54 +08:00
class="font_5 ml-67">{{formData.work_count== undefined ? 0 :formData.work_count}}</text>
aa
2024-05-11 10:06:09 +08:00
</view>
<view class="flex-row group_5 tac-dainlaing">
<text class="font_3 ml-31 padding-top-bootm">重量异常</text>
<text
:id="formData.weight_count < 1 ? 'color-text-shu1' : formData.weight_count < 5 ? 'color-text-shu2' : 'color-text-shu3'"
aaa
2024-05-16 18:01:54 +08:00
class="font_5 text_14">{{formData.weight_count== undefined ? 0 :formData.weight_count}}</text>
aa
2024-05-11 10:06:09 +08:00
</view>
</view>
<view class="top-jinbaoqi top-jinbaoqi-top-t">
<view class="flex-row tac-dainlaing">
<text class="font_3 text_16 padding-top-bootm">温度异常</text>
<text
:id="formData.temperature_count < 1 ? 'color-text-shu1' : formData.temperature_count < 5 ? 'color-text-shu2' : 'color-text-shu3'"
aaa
2024-05-16 18:01:54 +08:00
class="font_5 text_19">{{formData.temperature_count== undefined ? 0 :formData.temperature_count}}</text>
aa
2024-05-11 10:06:09 +08:00
</view>
<view class="flex-row group_7 tac-dainlaing">
<text class="font_3 text_17 ml-31 padding-top-bootm">湿度异常</text>
<text
:id="formData.humidity_count < 1 ? 'color-text-shu1' : formData.humidity_count < 5 ? 'color-text-shu2' : 'color-text-shu3'"
aaa
2024-05-16 18:01:54 +08:00
class="font_5 text_20 ml-61">{{formData.humidity_count== undefined? 0 :formData.humidity_count}}</text>
aa
2024-05-11 10:06:09 +08:00
</view>
</view>
</view>
<!-- 右上 -->
<view class="ml-16 flex-col right-top-img left-card">
<view class="flex-col section_2 box-rie">
<!-- 房子图片 -->
<view class="flex-row group_2 top-img">
<view class="flex-col items-center tac-dainlaing">
<image class="shrink-0 " style="width: 80rpx;height: 102rpx;"
src="../../static/fx11.png" mode=""></image>
<!-- <image class="shrink-0 image_6" src="../../static/shouye-fangzi-shang.png" />
<image class="shrink-0 image_11" src="../../static/shouye-fangzi-xia.png" /> -->
</view>
<image class="ml-90 self-start image_8 image_10" src="../../static/shouye-you.png" />
</view>
<view class="top-jinbaoqi" @click="topage(1)">
<view class="mt-8 flex-row tac-dainlaing">
<text class="font text_6 padding-top-bootm">蜂箱数量</text>
aaa
2024-05-16 18:01:54 +08:00
<text class="self-center font_4 text_3 text_10">{{formData.beehive_count==undefined?0:formData.beehive_count}}</text>
aa
2024-05-11 10:06:09 +08:00
</view>
<view class="mt-8 flex-row tac-dainlaing">
<text
class="ml-30 font_2 text_7 padding-top-bootm">在线：{{formData.beehive_online_count == undefined ? 0 : formData.beehive_online_count}}</text>
<text
class="self-start font_2 text_11 ml-39 ">离线：{{formData.beehive_offline_count == undefined ? 0 : formData.beehive_offline_count}}</text>
</view>
</view>
</view>
<view class="flex-col section_2 mt-13 box-rie top-jinbaoqi" @click="topage(2)">
<!-- 左 -->
<view class="flex-row items-center tac-dainlaing">
<image class="image_12" src="../../static/shouye-fangchang-shuliang.png" />
<text class="font padding-top-bootm">蜂场数量</text>
aaa
2024-05-16 18:01:54 +08:00
<text class="font_4 text_3 text_10 padding-top-bootm">{{formData.apiary_count==undefined?0:formData.apiary_count}}</text>
aa
2024-05-11 10:06:09 +08:00
</view>
<!-- 右 -->
<view class="ml-18 flex-col items-end">
<view class="right-jainto">
<image class="image_8 image_13 padding-top-bootm"
src="../../static/shouye-you.png" />
<!-- </view>
<text class="font_2 text_15 mt-13 hg-num" v-for="item in formData.apiary_data" :key="item.id">{{item.name}}：{{item.count}}</text>
</view> -->
</view>
<view class="font_2 text_15 mt-13 hg-num" v-if="formData.apiary_data[0]">
aaa
2024-05-16 18:01:54 +08:00
<view>{{formData.apiary_data[0].name==undefined?0:formData.apiary_data[0].name}}</view>
aa
2024-05-11 10:06:09 +08:00
<view class="taxt-wen">：</view>
aaa
2024-05-16 18:01:54 +08:00
<view class="taxt-wen-1">{{formData.apiary_data[0].count==undefined?0:formData.apiary_data[0].count}}</view>
aa
2024-05-11 10:06:09 +08:00
</view>
<view class="font_2 text_15 mt-13 hg-num" v-if="formData.apiary_data[1]">
aaa
2024-05-16 18:01:54 +08:00
<view>{{formData.apiary_data[1].name==undefined?0:formData.apiary_data[1].name}}</view>
aa
2024-05-11 10:06:09 +08:00
<view class="taxt-wen">：</view>
aaa
2024-05-16 18:01:54 +08:00
<view class="taxt-wen-1">{{formData.apiary_data[1].count==undefined?0:formData.apiary_data[1].count}}</view>
aa
2024-05-11 10:06:09 +08:00
</view>
<view class="font_2 text_15 mt-13 hg-num" v-if="formData.apiary_data[2]">
aaa
2024-05-16 18:01:54 +08:00
<view>{{formData.apiary_data[2].name==undefined?0:formData.apiary_data[2].name}}</view>
aa
2024-05-11 10:06:09 +08:00
<view class="taxt-wen">：</view>
aaa
2024-05-16 18:01:54 +08:00
<view class="taxt-wen-1">{{formData.apiary_data[2].count==undefined?0:formData.apiary_data[2].count}}</view>
aa
2024-05-11 10:06:09 +08:00
</view>
</view>
</view>
</view>
</view>
<!-- 卡片图表 -->
<!-- 柱状 -->
aaa
2024-05-16 18:01:54 +08:00
<view class="xin-box" style="margin-top: 20rpx;">
<view class="xin-box-title" @click="chuqingbianhua" v-if="logoflag">
aa
2024-05-11 10:06:09 +08:00
<view style="flex: 1;display: flex;align-items: center;">
<image style="width: 40rpx;height: 40rpx;"
src="../../static/e5e18447349367492c81f64ccec7ebcb.png"></image>
<text style="margin-left: 10rpx;">近7天蜜蜂总出勤变化</text>
</view>
<image class="image_8 image_13 padding-top-bootm" src="../../static/shouye-you.png" />
</view>
aaa
2024-05-16 18:01:54 +08:00
<view class="charts-box" >
<qiun-data-charts v-if="logoflag" type="column" :opts="optsZhu" :chartData="chartDataZhu" :errorShow="false" :errorReload="false" :animation="false" :tooltipShow="false" :tapLegend="false" />
aaa
2024-05-17 18:11:32 +08:00
<view class="" v-else style="color: #ccc;font-size: 36rpx;width: 100%;text-align: center;margin-top: 50rpx;">暂无蜂箱...
<view @click="djdl" style="width: 200rpx;height: 80rpx;text-align: center;line-height: 80rpx;background-color: #3CA272;margin: auto;margin-top: 30rpx;border-radius: 30rpx;color: #fff;padding: 0rpx 20rpx;box-sizing: border-box;">点击登录</view> </view>
aa
2024-05-11 10:06:09 +08:00
</view>
</view>
<!-- 折线 -->
aaa
2024-05-16 18:01:54 +08:00
<view class="xin-box" v-if="logoflag">
<view class="xin-box-title" @click="zhongliangbianhua" v-if="logoflag">
aa
2024-05-11 10:06:09 +08:00
<view style="flex: 1;display: flex;align-items: center;">
<image style="width: 40rpx;height: 40rpx;" src="../../static/kg.png"></image>
<text style="margin-left: 10rpx;">近7天蜂箱总重量变化(KG)</text>
</view>
<image class="image_8 image_13 padding-top-bootm" src="../../static/shouye-you.png" />
</view>
<view class="charts-box">
aaa
2024-05-16 18:01:54 +08:00
<qiun-data-charts v-if="logoflag" type="line" :opts="optsZhe" :chartData="chartDataZhe" :animation="false" :tooltipShow="false" :tapLegend="false" />
<view class="" v-else style="color: #ccc;font-size: 36rpx;width: 100%;text-align: center;margin-top: 50rpx;">暂无蜂箱...</view>
aa
2024-05-11 10:06:09 +08:00
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import share from "uview-ui/libs/mixin/mpShare.js"
import request from '../../utils/request'
export default {
components: {},
props: {},
data() {
return {
aaa
2024-05-16 18:01:54 +08:00
logoflag:true,
aa
2024-05-11 10:06:09 +08:00
showloading: false,
uchartsData: {}, // ucharts 数据
formData: {}, // 上方三个盒子的数据
// 折线图
chartDataZhe: {},
optsZhe: {
timing: "easeOut",
duration: 1000,
rotate: false,
rotateLock: false,
color: ["#89c28c", "#23693f", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
"#ea7ccc"
],
padding: [0, 0, 0, 0],
fontSize: 12,
fontColor: "#666666",
dataLabel: false,
dataPointShape: false,
dataPointShapeType: "solid",
touchMoveLimit: 60,
enableScroll: false,
enableMarkLine: false,
legend: {
show: true,
position: "top",
float: "right",
padding: 5,
margin: 5,
backgroundColor: "rgba(0,0,0,0)",
borderColor: "rgba(0,0,0,0)",
borderWidth: 0,
fontSize: 12,
fontColor: "#666666",
lineHeight: 11,
hiddenColor: "#CECECE",
itemGap: 20
},
xAxis: {
disableGrid: true,
disabled: false,
axisLine: true,
axisLineColor: "#CCCCCC",
calibration: false,
fontColor: "#666666",
fontSize: 12,
lineHeight: 20,
marginTop: 0,
rotateLabel: false,
rotateAngle: 45,
itemCount: 5,
boundaryGap: "center",
splitNumber: 5,
gridColor: "#CCCCCC",
gridType: "solid",
dashLength: 4,
gridEval: 1,
scrollShow: false,
scrollAlign: "left",
scrollColor: "#A6A6A6",
scrollBackgroundColor: "#EFEBEF",
title: "",
titleFontSize: 13,
titleOffsetY: 0,
titleOffsetX: 0,
titleFontColor: "#666666",
format: ""
},
extra: {
line: {
type: "curve",
width: 2,
activeType: "hollow",
linearType: "none",
onShadow: false,
animation: "vertical"
},
tooltip: {
showBox: true,
showArrow: true,
showCategory: false,
borderWidth: 0,
borderRadius: 0,
borderColor: "#000000",
borderOpacity: 0.7,
bgColor: "#000000",
bgOpacity: 0.7,
gridType: "solid",
dashLength: 4,
gridColor: "#CCCCCC",
boxPadding: 3,
fontSize: 13,
lineHeight: 20,
fontColor: "#FFFFFF",
legendShow: true,
legendShape: "auto",
splitLine: true,
horizentalLine: false,
xAxisLabel: false,
yAxisLabel: false,
labelBgColor: "#FFFFFF",
labelBgOpacity: 0.7,
labelFontColor: "#666666"
},
markLine: {
type: "solid",
dashLength: 4,
data: []
}
}
},
// 柱状图
chartDataZhu: {},
optsZhu: {
timing: "linear",
duration: 1000,
rotate: false,
rotateLock: false,
color: ["#89c28c", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
"#ea7ccc"
],
padding: [0, 0, 0, 0],
fontSize: 13,
fontColor: "#666666",
dataLabel: false,
dataPointShape: false,
dataPointShapeType: "solid",
touchMoveLimit: 60,
enableScroll: false,
enableMarkLine: false,
legend: {
show: false,
position: "bottom",
float: "center",
padding: 5,
margin: 5,
backgroundColor: "rgba(0,0,0,0)",
borderColor: "rgba(0,0,0,0)",
borderWidth: 0,
fontSize: 13,
fontColor: "#666666",
lineHeight: 11,
hiddenColor: "#CECECE",
itemGap: 10
},
xAxis: {
disableGrid: true,
disabled: false,
axisLine: false,
axisLineColor: "#CCCCCC",
calibration: false,
fontColor: "#666666",
fontSize: 10,
lineHeight: 20,
marginTop: 10,
rotateLabel: false,
rotateAngle: 45,
itemCount: 5,
boundaryGap: "center",
splitNumber: 5,
gridColor: "#CCCCCC",
gridType: "dash",
dashLength: 4,
gridEval: 1,
scrollShow: false,
scrollAlign: "left",
scrollColor: "#A6A6A6",
scrollBackgroundColor: "#EFEBEF",
title: "",
titleFontSize: 13,
titleOffsetY: 0,
titleOffsetX: 0,
titleFontColor: "#666666",
format: ""
},
yAxis: {
data: [{
min: 0,
disabled: false,
axisLine: false,
position: "left",
calibration: false,
title: "",
textAlign: "left",
titleFontSize: 13,
max: null,
format: "",
titleOffsetY: 0,
titleOffsetX: 0,
type: "value"
}],
disabled: false,
disableGrid: false,
splitNumber: 5,
gridType: "dash",
dashLength: 4,
gridColor: "#CCCCCC",
padding: 10,
showTitle: true
},
extra: {
column: {
type: "group",
width: 20,
activeBgColor: "#000000",
activeBgOpacity: 0.08,
seriesGap: 2,
categoryGap: 3,
barBorderCircle: false,
barBorderRadius: [
50,
50,
50,
50
],
linearType: "none",
linearOpacity: 1,
colorStop: 0,
meterBorder: 1,
meterFillColor: "#FFFFFF",
labelPosition: "outside"
},
tooltip: {
showBox: false,
showArrow: false,
showCategory: false,
borderWidth: 0,
borderRadius: 0,
borderColor: "#000000",
borderOpacity: 0.7,
bgColor: "#000000",
bgOpacity: 0.7,
gridType: "solid",
dashLength: 4,
gridColor: "#CCCCCC",
boxPadding: 3,
fontSize: 13,
lineHeight: 20,
fontColor: "#FFFFFF",
legendShow: true,
legendShape: "auto",
splitLine: true,
horizentalLine: false,
xAxisLabel: false,
yAxisLabel: false,
labelBgColor: "#FFFFFF",
labelBgOpacity: 0.7,
labelFontColor: "#666666"
},
markLine: {
type: "solid",
dashLength: 4,
data: []
}
}
},
tokenflag: false
};
},
onLoad() {
},
//分享
onShareAppMessage: function() {
return {
title: "苏他数字蜂箱 首页",
};
},
onShow() {
this.cheshi();
this.intervalId = setInterval(() => {
this.cheshi();
}, 5000);
this.getServerDataZhe();
this.getServerDataZhu();
},
mounted() {},
onHide() {
// Clear the interval when the component is destroyed
clearInterval(this.intervalId);
},
methods: {
aaa
2024-05-17 18:11:32 +08:00
djdl(){
uni.navigateTo({
url:'/pages/login/index'
})
},
aa
2024-05-11 10:06:09 +08:00
topage(num) {
if (this.tokenflag == true) {
if (num == 1) {
uni.switchTab({
url: '/pages/fengxiang/index'
});
} else if (num == 2) {
uni.switchTab({
url: '/pages/fengchang/index'
});
}
}else{
uni.navigateTo({
url:'/pages/login/index'
})
}
},
// 图表数据请求
async echartsFn() {
this.showloading = true
await request.get('/api/index/statistics', ).then(res => {
if (res.code == 401) {
this.showloading = false
this.tokenflag = false
} else {
this.uchartsData = {
...res.data.data
}
this.tokenflag = true
}
this.showloading = false
})
// this.showloading=true
// const eres = await request.get('/api/index/statistics') // echarts数据
},
// 数据请求
async cheshi() {
try {
const res = await request.get('/api/index') // 基本数据
console.log(res)
// console.log(eres,'图')
this.formData = {
...res.data.data
}
aaa
2024-05-16 18:01:54 +08:00
this.logoflag = true
aa
2024-05-11 10:06:09 +08:00
// console.log(this.formData,'101010')
} catch (error) {
aaa
2024-05-16 18:01:54 +08:00
this.logoflag = false
aa
2024-05-11 10:06:09 +08:00
// setTimeout(()=> {
// wx.navigateTo({
// url: '/pages/login/index'
// })
// },10000)
// console.log(error)
}
},
// 跳转预警
fxyujin() {
// console.log("风向预警");
if (this.tokenflag == true) {
uni.navigateTo({
url: "/pagesFengXiang/pages/fengxiang-yujin/index"
})
}else{
uni.navigateTo({
url:'/pages/login/index'
})
}
},
// 跳转折线图
zhongliangbianhua() {
if (this.tokenflag == true) {
wx.navigateTo({
url: '../echartszhe/index'
})
}else{
uni.navigateTo({
url:'/pages/login/index'
})
}
},
// 跳转柱状图
chuqingbianhua() {
if (this.tokenflag == true) {
wx.navigateTo({
url: '../echartszhu/index'
})
}else{
uni.navigateTo({
url:'/pages/login/index'
})
}
},
// 图表数据
// 折线
async getServerDataZhe() {
await this.echartsFn()
//模拟从服务器获取数据时的延时
setTimeout(async () => {
// console.log(this.uchartsData)
if(this.uchartsData != ''){
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
let res = {
categories: [...this.uchartsData.weight_statistics.xData.slice(-7)],
series: [{
name: "总重量",
data: [...this.uchartsData.weight_statistics.yData.slice(-7)]
},
{
name: "日增量",
data: [...this.uchartsData.weight_statistics.yData_day.slice(-7)]
}
]
};
this.chartDataZhe = JSON.parse(JSON.stringify(res));
}else{
let res = {
categories: [],
series: [{
name: "",
data: []
},
{
name: "",
data: []
}
]
};
this.chartDataZhe = JSON.parse(JSON.stringify(res));
}
}, 500);
},
// 柱状
async getServerDataZhu() {
await this.echartsFn()
//模拟从服务器获取数据时的延时
setTimeout(() => {
if(this.uchartsData != ''){
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
let res = {
categories: [...this.uchartsData.work_count_statistics.xData.slice(-7)], // X 轴
series: [{
name: "目标值",
data: [...this.uchartsData.work_count_statistics.yData.slice(-
7)] // Y 轴
}]
};
aaa
2024-05-16 18:01:54 +08:00
this.chartDataZhu = JSON.parse(JSON.stringify(res));
aa
2024-05-11 10:06:09 +08:00
console.log(this.chartDataZhu, '柱状图数据');
}else{
let res = {
categories: [], // X 轴
series: [{
name: "",
data: [] // Y 轴
}]
};
this.chartDataZhu = JSON.parse(JSON.stringify(res));
}
}, 500);
},
},
};
</script>
<style scoped lang="scss">
.loading {
z-index: 10074;
width: 224rpx;
height: 224rpx;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 40rpx 40rpx 40rpx 40rpx;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.loading_box {
width: 100%;
height: 100%;
padding: 40rpx;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
image {
width: 108rpx;
height: 108rpx;
display: block;
}
text {
margin-top: 12rpx;
width: 100%;
text-align: center;
display: block;
font-size: 24rpx;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #fff;
line-height: 24rpx;
}
}
}
.items-end {
text-align: right;
}
// 图标的样式
.charts-box {
width: 100%;
height: 600rpx;
}
.charts-h {
height: 100%;
}
// 卡片盒子
.xin-box {
// height: 300rpx;
margin-top: 20rpx;
background-color: #fff;
padding: 30rpx;
border-radius: 30rpx;
.xin-box-title {
display: flex;
align-items: center;
}
}
.text-wen {
width: 15rpx;
}
#color-text-shu1 {
color: #89c28c;
}
#color-text-shu2 {
color: #ff8f19;
}
#color-text-shu3 {
color: #ff5733;
}
.padding-box {
padding: 0 24rpx;
}
.right-jainto {
padding-bottom: 20rpx;
// text-align: right;
padding-left: 120rpx;
}
.hg-num {
margin: 10rpx 0;
display: flex;
justify-content: center;
}
.taxt-wen {
flex: 1;
}
.taxt-wen-1 {
width: 30rpx;
text-align: center;
}
.padding-top-bootm {
margin: 18rpx 0;
}
.tac-dainlaing {
display: flex;
flex-direction: column;
align-items: center;
}
.top-img {
display: flex;
justify-content: space-between;
}
.right-top-img {
width: 40%;
}
.left-card {
width: 45%;
border-radius: 5%;
}
.box-rie {
border-radius: 5%;
}
.top-jinbaoqi {
display: flex;
justify-content: space-between;
}
.top-jinbaoqi-top-t {
margin-top: 10rpx;
}
.img-lef {
display: flex;
flex-direction: column;
}
.page {
height: 100%;
width: 100%;
top: 0px;
bottom: 0px;
background-color: #f7f7f7;
padding: 36rpx 0rpx 10rpx;
overflow-y: auto;
overflow-x: hidden;
.group {
padding-left: 40rpx;
.text {
color: #7d7d7d;
font-size: 28rpx;
font-family: SourceHanSansCN;
font-weight: 700;
line-height: 21.5rpx;
}
.image {
width: 34rpx;
height: 22rpx;
}
.image_2 {
width: 30rpx;
height: 22rpx;
}
.image_3 {
width: 48rpx;
height: 22.66rpx;
}
.image_4 {
width: 64rpx;
height: 64rpx;
}
.text_2 {
color: #000000;
font-size: 36rpx;
font-family: AlibabaPuHuiTi;
line-height: 33.52rpx;
}
.image_5 {
filter: drop-shadow(0rpx 4rpx 4rpx #00000040);
border-radius: 120rpx;
width: 158rpx;
height: 60rpx;
}
}
.section {
padding: 16rpx 20rpx 16rpx 28rpx;
background-color: #ffffff;
height: 426rpx;
.image_7 {
width: 76rpx;
height: 68rpx;
}
.text_4 {
margin-top: 24rpx;
color: #ff5733;
font-size: 72rpx;
line-height: 51.9rpx;
}
.text_5 {
margin-left: 12rpx;
margin-top: 10rpx;
color: #ff8d1a;
font-size: 28rpx;
line-height: 20.18rpx;
}
.image_9 {
margin-top: 6rpx;
}
.group_3 {
padding: 0 4rpx;
.text_8 {
line-height: 22.04rpx;
}
.text_9 {
line-height: 22.22rpx;
}
}
.view {
margin-top: 36rpx;
}
.group_5 {
// margin-top: 20rpx;
// padding: 0 40rpx;
.text_12 {
color: #89c28c;
line-height: 29.22rpx;
}
// .text_14 {
// line-height: 28.44rpx;
// }
}
.view_2 {
margin-top: 28rpx;
}
.group_6 {
margin-top: 28rpx;
.text_16 {
line-height: 22.28rpx;
}
.text_17 {
line-height: 22.28rpx;
}
}
.font_3 {
font-size: 24rpx;
font-family: 微软雅黑;
line-height: 22.18rpx;
color: #888888;
}
.group_7 {
// margin-top: 20rpx;
// padding: 0 28rpx;
.text_19 {
color: #ff5733;
}
.text_20 {
line-height: 28.58rpx;
}
}
.font_5 {
font-size: 40rpx;
line-height: 28.82rpx;
}
}
.section_2 {
margin-bottom: 23rpx;
padding: 8rpx 16rpx 16rpx 24rpx;
background-color: #ffffff;
.group_2 {
padding-left: 12rpx;
.image_6 {
width: 70rpx;
height: 56rpx;
}
.image_11 {
margin-top: -8rpx;
width: 54rpx;
height: 46rpx;
}
.image_10 {
margin-top: 16rpx;
}
}
.font {
font-size: 24rpx;
font-family: Nunito;
line-height: 22.18rpx;
font-weight: 600;
color: #42484a;
}
.text_6 {
line-height: 22.24rpx;
}
.font_2 {
font-size: 24rpx;
font-family: Nunito;
line-height: 22.18rpx;
font-weight: 600;
color: #888888;
}
.text_7 {
color: #23693f;
line-height: 22.06rpx;
}
.group_4 {
padding: 0 16rpx;
.text_11 {
line-height: 22.22rpx;
}
}
.image_12 {
width: 80rpx;
height: 90rpx;
}
.image_13 {
margin-right: 4rpx;
}
.text_15 {
font-size: 22rpx;
line-height: 20.3rpx;
}
.text_18 {
font-size: 22rpx;
line-height: 20.28rpx;
}
.group_8 {
padding-left: 36rpx;
.text_21 {
font-size: 22rpx;
line-height: 20.24rpx;
}
}
.font_4 {
font-size: 40rpx;
font-family: AlimamaShuHeiTi;
line-height: 28.82rpx;
color: #23693f;
}
.text_10 {
line-height: 29.04rpx;
}
}
.image_8 {
width: 18rpx;
height: 36rpx;
}
.text_3 {
text-transform: uppercase;
}
.group_9 {
padding-bottom: 30rpx;
.view_3 {
margin: 0 16rpx;
}
.image_17 {
width: 36rpx;
height: 58rpx;
}
.pos_2 {
position: absolute;
left: 0;
top: 74rpx;
}
.image_18 {
opacity: 0.1;
filter: blur(1rpx);
width: 104rpx;
height: 322rpx;
}
.pos_3 {
position: absolute;
left: 0;
bottom: 30rpx;
}
.image_16 {
width: 134rpx;
height: 340rpx;
}
.pos {
position: absolute;
left: 0;
bottom: 30rpx;
}
}
.group_10 {
overflow: hidden;
.view_4 {
margin: 0 14rpx;
}
.image-wrapper {
background-image: url('https://ide.code.fun/api/image?token=655ec7f0fcfbac0011348c61&name=0846bd627e035104ba6a5edd32fd7538.png');
background-size: 100% 100%;
background-repeat: no-repeat;
width: 58rpx;
.image_20 {
width: 60rpx;
height: 346rpx;
}
}
.pos_4 {
position: absolute;
right: 0;
top: 0;
}
.image_22 {
opacity: 0.5;
width: 44rpx;
height: 50rpx;
}
.pos_5 {
position: absolute;
left: 0;
bottom: 46.38rpx;
}
}
.section_3 {
padding: 10rpx 20rpx 0 38rpx;
background-color: #ffffff;
border-radius: 30rpx;
.image_14 {
width: 42rpx;
height: 40rpx;
}
.font_6 {
font-size: 30rpx;
font-family: HarmonyOSSansSC;
line-height: 28.82rpx;
color: #42484a;
}
.text_22 {
transform: rotate(0deg);
}
.text_23 {
line-height: 28.42rpx;
}
.image_15 {
margin-top: 10rpx;
}
.image_19 {
margin-left: 52rpx;
width: 22rpx;
height: 32rpx;
}
.image_21 {
width: 40rpx;
height: 40rpx;
}
.text_24 {
margin-left: 16rpx;
margin-top: 12rpx;
line-height: 28.36rpx;
}
.section_4 {
margin-left: 12rpx;
margin-top: 20rpx;
background-color: #89c28c;
border-radius: 50%;
width: 12rpx;
height: 12rpx;
}
.font_7 {
font-size: 20rpx;
font-family: HarmonyOSSansSC;
}
.text_25 {
margin-top: 16rpx;
color: #89c28c;
line-height: 18.18rpx;
}
.section_5 {
margin-top: 20rpx;
background-color: #23693f;
border-radius: 50%;
width: 12rpx;
height: 12rpx;
}
.text_26 {
margin-left: 4rpx;
margin-top: 16rpx;
color: #23693f;
line-height: 18.66rpx;
}
.image_23 {
margin-left: 56rpx;
width: 22rpx;
height: 38rpx;
}
}
}
</style>
Reference in New Issue Copy Permalink