732 lines
20 KiB
Vue
732 lines
20 KiB
Vue
<template>
|
||
<view class="electricity">
|
||
<view class="electricity-header">
|
||
<view class="electricity-info">
|
||
<view class="electricity-info-title-box">
|
||
<view class="electricity-info-title">
|
||
{{deviceInfoData && deviceInfoData.deviceName}}
|
||
</view>
|
||
<view class="btn-box">
|
||
<span class="diconfont dicon-icon_xiugai" @click="editMenuShow=true"></span>
|
||
</view>
|
||
</view>
|
||
<view class="electricity-info-msg">
|
||
<view class="electricity-info-msg-text">
|
||
<view class="msg-row">
|
||
<view class="msg-row-label">所属项目：</view>
|
||
<view class="msg-row-value">{{deviceInfoData && deviceInfoData.projectName}}</view>
|
||
</view>
|
||
<view class="msg-row">
|
||
<view class="msg-row-label">设备组：</view>
|
||
<view class="msg-row-value">{{deviceInfoData && deviceInfoData.groupName}}</view>
|
||
</view>
|
||
<view class="msg-row">
|
||
<view class="msg-row-label">设备类型：</view>
|
||
<view class="msg-row-value">{{deviceInfoData && deviceInfoData.deviceTypeName}}</view>
|
||
</view>
|
||
<view class="msg-row">
|
||
<view class="msg-row-label">设备编号：</view>
|
||
<view class="msg-row-value ellipsis">{{deviceInfoData && deviceInfoData.deviceKey}}</view>
|
||
</view>
|
||
<view class="msg-row">
|
||
<view class="msg-row-label">注册时间：</view>
|
||
<view class="msg-row-value">{{deviceInfoData && deviceInfoData.createTime}}</view>
|
||
</view>
|
||
<!-- <view class="msg-row">
|
||
<view class="msg-row-label">设备名称：</view>
|
||
<view class="msg-row-value">{{deviceInfoData && deviceInfoData.deviceName}}</view>
|
||
</view> -->
|
||
|
||
<!-- <view class="msg-row">
|
||
<view class="msg-row-label">设备地址：</view>
|
||
<view class="msg-row-value-box">
|
||
<view class="msg-row-address">{{deviceInfoData && deviceInfoData.deviceAddress}}</view>
|
||
<view class="diconfont dicon-dingwei"></view>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
<view class="electricity-info-msg-img">
|
||
<u-image width="160" height="160" v-if="deviceInfoData.deviceImage"
|
||
:src="$tools.getIotFileUrl(deviceInfoData.deviceImage)"></u-image>
|
||
<u-image width="160" height="160" v-else
|
||
src="http://static.drgyen.com/app/hc-app-power/images/switch.png"></u-image>
|
||
<view class="mt20"></view>
|
||
<!-- <u-button size="mini" :custom-style="customStyle" shape="circle" :plain="true" @click="editMenuShow=true">
|
||
<view class="diconfont dicon-icon_bianji" style="font-size: 22rpx;margin-right: 6rpx;"></view>
|
||
修改设备
|
||
</u-button> -->
|
||
</view>
|
||
<!-- <view class="electricity-info-msg-segmentation">
|
||
<view class="electricity-info-msg-segmentation-left"></view>
|
||
<view class="electricity-info-msg-segmentation-right"></view>
|
||
</view> -->
|
||
</view>
|
||
<view class="electricity-info-address-box">
|
||
<view class="msg-row-label">设备地址：</view>
|
||
<view class="msg-row-value-box">
|
||
<view class="msg-row-address">{{deviceInfoData && deviceInfoData.deviceAddress}}</view>
|
||
<view class="diconfont dicon-dingwei"></view>
|
||
</view>
|
||
</view>
|
||
<!-- 空间标签 -->
|
||
<view class="electricity-info-label">
|
||
<u-tag v-for="(val,i) in deviceInfoData.deviceLabel" size="mini" :key="i" :text="val" type="primary"
|
||
style="margin-right: 10rpx;" />
|
||
</view>
|
||
<view class="electricity-info-state">
|
||
<view class="electricity-info-state-box" v-if="deviceInfoData">
|
||
<view class="electricity-info-state-box-text"
|
||
:style="{color:deviceInfoData && deviceInfoData.deviceState=='ONLINE'?'#16D2AF':deviceInfoData.deviceState=='OFFLINE'?'#FE5277':'#aaa'}">
|
||
{{deviceInfoData && deviceInfoData.deviceState=='ONLINE'?"在线":deviceInfoData.deviceState=='OFFLINE'?"离线":"未激活"}}
|
||
</view>
|
||
<view class="electricity-info-state-box-title">设备状态</view>
|
||
</view>
|
||
<!-- <view class="electricity-info-state-box-line"></view> -->
|
||
<view class="electricity-info-state-box">
|
||
<view v-if="deviceInfoData.deviceType == 'GATEWAY_CONTROLLER'" class="electricity-info-state-box-text"
|
||
:style="{color:deviceInfoData && deviceInfoData.tenantAlarmVo?'#FE5277':'#16D2AF'}">
|
||
{{deviceInfoData && deviceInfoData.tenantAlarmVo?"异常":"正常"}}
|
||
</view>
|
||
<view v-else class="electricity-info-state-box-text"
|
||
:style="{color:deviceInfoData && deviceInfoData.deviceAlarmState?'#FE5277':'#16D2AF'}">
|
||
{{deviceInfoData && deviceInfoData.deviceAlarmState?"异常":"正常"}}
|
||
</view>
|
||
<view class="electricity-info-state-box-title">报警状态</view>
|
||
</view>
|
||
<!-- <view class="electricity-info-state-box-line"></view> -->
|
||
<view class="electricity-info-state-box">
|
||
<view class="electricity-info-state-box-text">
|
||
<template v-if="deviceInfoData.signal > 0">
|
||
<template v-if="deviceInfoData.signal == 1">
|
||
<image src="http://static.drgyen.com/app/hc-app-power/images/home/wisdomElectricity/onlieyg.png"
|
||
class="ico-img"></image>
|
||
</template>
|
||
<template v-else-if="deviceInfoData.signal == 2">
|
||
<image src="http://static.drgyen.com/app/hc-app-power/images/home/wisdomElectricity/onlielg.png"
|
||
class="ico-img"></image>
|
||
</template>
|
||
<template v-else-if="deviceInfoData.signal == 3">
|
||
<image src="http://static.drgyen.com/app/hc-app-power/images/home/wisdomElectricity/onliesg.png"
|
||
class="ico-img"></image>
|
||
</template>
|
||
<template v-else-if="deviceInfoData.signal == 4">
|
||
<image src="http://static.drgyen.com/app/hc-app-power/images/home/wisdomElectricity/onliesig.png"
|
||
class="ico-img"></image>
|
||
</template>
|
||
<template v-else-if="deviceInfoData.signal == 5">
|
||
<tuiIcon name="xinhaowuge" color="#16D2AF"></tuiIcon>
|
||
</template>
|
||
</template>
|
||
<template v-else>
|
||
<tuiIcon name="xinhaolx" color="#FE5277"></tuiIcon>
|
||
</template>
|
||
<!-- <tuiIcon :name="deviceInfoData.signal > 0?'xinhao':'xinhaolx'" :color="deviceInfoData.signal > 0?'#16D2AF':'#ff0000'"></tuiIcon> -->
|
||
<text class="pl10"
|
||
:style="{color:deviceInfoData.signal > 0?'#16D2AF':'#FE5277'}">{{deviceInfoData.signal > 0 ? getDictionary('signalType',deviceInfoData.stype) : '异常'}}</text>
|
||
</view>
|
||
<view class="electricity-info-state-box-title">信号状态</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-notice-bar mode="horizontal" type="error" bg-color="transparent" :list="alrmNotice" :is-circular="playState"
|
||
:play-state="playState?'play':'paused'"></u-notice-bar>
|
||
|
||
<view class="home-title">
|
||
<view class="home-title-txt">
|
||
设备信息
|
||
</view>
|
||
<view class="home-title-remark"></view>
|
||
</view>
|
||
|
||
<view class="menu-box">
|
||
<view class="home-menu-item menu-item" v-for="(item,index) in menuList" :key="index"
|
||
@click="goFunction(item,index)">
|
||
<view class="home-menu-item-header">
|
||
<view class="home-menu-item-left">
|
||
<view class="home-menu-item-name">
|
||
{{item.name}}
|
||
</view>
|
||
<view class="home-menu-item-remark">
|
||
{{item.remark}}
|
||
</view>
|
||
</view>
|
||
<view class="home-menu-item-right">
|
||
<u-icon name="arrow-right" color="#d4d4d4" size="24"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="home-menu-item-bg" :class="['diconfont',item.icon]" :style="{backgroundImage:item.background}"></view>
|
||
<view class="home-menu-item-bg-two" :class="['diconfont',item.icon]" :style="{color:item.twoColor}"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<u-popup v-model="uploadImgFlag" mode="center" :closeable="true" border-radius="16">
|
||
<view class="uploadImg">
|
||
<view class="uploadImg-title">
|
||
<text class="pr20">设备图片</text>
|
||
<tuiIcon name="huabanx" color="#FF6600" size="50"></tuiIcon>
|
||
</view>
|
||
<view class="pt20 pb20">
|
||
<u-upload ref="uUpload" max-count="1" :action="action" :header="uploadHeader" :size-type="['compressed']"
|
||
:max-size="1024*1024" @on-success="onUploadSuccessFn"></u-upload>
|
||
</view>
|
||
<u-button @click="onSubmitEditImageFn" type="primary">提交</u-button>
|
||
</view>
|
||
</u-popup>
|
||
<u-action-sheet :list="editMenuList" @click="selectMenu" v-model="editMenuShow"></u-action-sheet>
|
||
<u-modal v-model="editDeviceModalShow" title="修改设备名称" :show-cancel-button="true"
|
||
@confirm="$throttle(editDeviceNameFn, 500)">
|
||
<view class="slot-content">
|
||
<u-input v-model="editDeviceName" :focus="true" border type="text" placeholder="请输入设备名称"></u-input>
|
||
</view>
|
||
</u-modal>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import getDictionary from "@/utils/dataDictionary.js"
|
||
export default {
|
||
data() {
|
||
return {
|
||
menuList:[
|
||
{
|
||
name:'实时状态',
|
||
remark:'掌握运行状态',
|
||
icon:"dicon-icon_shishi",
|
||
url:"/pages/home/wisdomElectricity/realTime/index",
|
||
background:"linear-gradient(180deg, #6596D2, #1E5095);",
|
||
twoColor: "rgba(29, 77, 144, 0.1);"
|
||
},
|
||
{
|
||
name: "报警记录",
|
||
remark: "数智化管理",
|
||
icon: "dicon-icon_gaojingjilu",
|
||
url: "./alarmRecord",
|
||
background: "linear-gradient(0deg, #D94353, #FF887C);",
|
||
twoColor: "rgba(217, 67, 83,0.1);"
|
||
},
|
||
{
|
||
name: "用能分析",
|
||
remark: "一目了然",
|
||
icon: "dicon-icon_yongnengfenxi",
|
||
url: "./energyAnalysis/index",
|
||
background: "linear-gradient(0deg, #7244EF, #9388F9);",
|
||
twoColor: "rgba(114, 68, 239,0.1);"
|
||
},
|
||
{
|
||
name: "历史曲线",
|
||
remark: "数据统计",
|
||
icon: "dicon-icon_jiance",
|
||
url: "./historyCurve/index",
|
||
background: "linear-gradient(0deg, #2365C0, #24B4E9);",
|
||
twoColor: "rgba(35, 101, 192,0.1);"
|
||
},
|
||
{
|
||
name: "维保记录",
|
||
remark: "精准保护",
|
||
icon: "dicon-icon_weibao",
|
||
url: "./wbjl/maintenanceRecord",
|
||
background: "linear-gradient(0deg, #F28E26, #FFC574);",
|
||
twoColor: "rgba(242, 142, 38,0.1);"
|
||
},
|
||
{
|
||
name: "分合闸警示",
|
||
remark: "开关记录",
|
||
icon: "dicon-fenhezhajingshi",
|
||
url: "./switchWarn",
|
||
background: "linear-gradient(0deg, #199582, #6AD6C3);",
|
||
twoColor: "rgba(25, 149, 130,0.1);"
|
||
}
|
||
],
|
||
// 演示地址，请勿直接使用
|
||
action: '',
|
||
uploadHeader: {},
|
||
editImgDataStr: "",
|
||
uploadCode: -1,
|
||
deviceId: "", // 设备ID
|
||
uploadImgFlag: false,
|
||
alrmNotice: [],
|
||
playState: false,
|
||
customStyle: {
|
||
color: '#0066CC',
|
||
borderColor: '#0066CC',
|
||
height: '56rpx'
|
||
},
|
||
editMenuList: [{
|
||
text: '修改设备名称',
|
||
},
|
||
{
|
||
text: '修改设备图片',
|
||
}
|
||
],
|
||
editMenuShow: false,
|
||
editDeviceModalShow: '',
|
||
editDeviceName: '',
|
||
deviceInfoData: {},
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
this.action = this.$config.baseUrl + "/common/upload";
|
||
const userToken = uni.getStorageSync('userToken');
|
||
this.uploadHeader = {
|
||
"Authorization": userToken,
|
||
"Content-Type": "multipart/form-data"
|
||
}
|
||
this.deviceId = e.deviceId;
|
||
this.getDeviceInfoFn();
|
||
},
|
||
methods: {
|
||
getDictionary,
|
||
editDeviceNameFn() {
|
||
let obj = {
|
||
deviceId: this.deviceInfoData.deviceId,
|
||
deviceName: this.editDeviceName
|
||
}
|
||
this.$put("/app/device/edit-image", obj).then((res) => {
|
||
if (res.code == 200) {
|
||
this.$u.toast(res.msg, 3000);
|
||
this.getDeviceInfoFn();
|
||
} else {
|
||
this.$u.toast(res.msg, 3000);
|
||
}
|
||
})
|
||
},
|
||
selectMenu(e) {
|
||
console.log("点击菜单", this.editMenuList[e].text)
|
||
if (this.editMenuList[e].text == '修改设备图片') {
|
||
this.uploadImgFlag = true;
|
||
} else if (this.editMenuList[e].text == '修改设备名称') {
|
||
this.editDeviceName = this.deviceInfoData.deviceName;
|
||
this.editDeviceModalShow = true;
|
||
}
|
||
},
|
||
onUploadSuccessFn(data, index, lists, name) {
|
||
console.log(lists, "成功");
|
||
this.uploadCode = lists[0].response.code;
|
||
this.editImgDataStr = lists[0].response.fileName;
|
||
},
|
||
onSubmitEditImageFn() {
|
||
if (this.uploadCode > -1 && this.uploadCode != 200) {
|
||
this.$tui.toast('图片正在上传，请稍后', 3000);
|
||
return false;
|
||
}
|
||
this.$put("/app/device/edit-image", {
|
||
deviceId: this.deviceId,
|
||
deviceImage: this.editImgDataStr
|
||
}).then((res) => {
|
||
console.log(res, "res");
|
||
this.uploadCode = -1;
|
||
if (res.code === 200) {
|
||
this.$refs.uUpload.clear();
|
||
this.uploadImgFlag = false;
|
||
this.getDeviceInfoFn();
|
||
} else {
|
||
this.$tui.toast(res.msg, 3000)
|
||
}
|
||
})
|
||
},
|
||
// 获取设备信息
|
||
getDeviceInfoFn() {
|
||
// this.$get("/app/device/info",{deviceId:this.deviceId}).then((res)=>{
|
||
this.$get("/app/device/" + this.deviceId).then((res) => {
|
||
console.log(res, "ressda");
|
||
if (res.data.signal) {
|
||
res.data.signal = Number(res.data.signal);
|
||
}
|
||
if (res.data.deviceLabel && res.data.deviceLabel[0] == '空间') {
|
||
res.data.deviceLabel.shift();
|
||
}
|
||
this.deviceInfoData = res.data;
|
||
// this.deviceInfoData.deviceAddr = '啊哈年少多金辣三丁颗粒剂阿卡受打击考拉'
|
||
// 最新报警
|
||
if (res.data.tenantAlarmVo) {
|
||
let {
|
||
projectName,
|
||
spaceName,
|
||
projectAddress,
|
||
deviceName,
|
||
alarmTime,
|
||
typeName
|
||
} = res.data.tenantAlarmVo;
|
||
let alarmStr =
|
||
`${projectAddress || "-"} ${(projectName + spaceName) || "-"}中${deviceName || "-"} 于${alarmTime || "-"}发生${typeName || "-"}`
|
||
this.alrmNotice.push(alarmStr);
|
||
this.playState = true;
|
||
} else {
|
||
this.alrmNotice.push("暂无警报");
|
||
}
|
||
})
|
||
},
|
||
// 跳转
|
||
goFunction(item, index) {
|
||
console.log(item, "item");
|
||
uni.navigateTo({
|
||
url: `${item.url}?deviceId=${this.deviceId}&prodKey=${this.deviceInfoData.prodKey}&deviceKey=${this.deviceInfoData.deviceKey}&projectName=${this.deviceInfoData.projectName}&deviceName=${this.deviceInfoData.deviceName}`
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang='scss' scoped>
|
||
::v-deep .header-bg {
|
||
z-index: 0 !important;
|
||
}
|
||
|
||
.electricity {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 20rpx 45rpx;
|
||
|
||
:not(not) {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
&-header {
|
||
width: 100%;
|
||
position: relative;
|
||
z-index: 1;
|
||
padding-bottom: 0;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
&-info {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 20rpx;
|
||
background-color: #fff;
|
||
|
||
.electricity-info-title-box {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.electricity-info-title-box {
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx;
|
||
padding: 20rpx;
|
||
|
||
.electricity-info-title {
|
||
padding-bottom: 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-weight: 550;
|
||
font-size: 36rpx;
|
||
color: #000000;
|
||
|
||
.btn-box {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.diconfont {
|
||
font-size: 36rpx;
|
||
color: #000000;
|
||
padding: 0 10rpx 10rpx 10rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* z-index: 1; */
|
||
/* margin-bottom: 20rpx; */
|
||
&-id {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
/* padding-bottom: 20rpx; */
|
||
padding: 30rpx;
|
||
padding-bottom: 0;
|
||
}
|
||
}
|
||
|
||
&-info-msg {
|
||
display: flex;
|
||
font-size: 24rpx;
|
||
position: relative;
|
||
padding: 20rpx;
|
||
padding-bottom: 0;
|
||
|
||
.electricity-info-msg-img {
|
||
text-align: center;
|
||
}
|
||
|
||
.electricity-info-msg-text {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
|
||
}
|
||
|
||
.msg-row {
|
||
display: flex;
|
||
padding-bottom: 12rpx;
|
||
width: 460rpx;
|
||
|
||
/* border: 1px solid red; */
|
||
&-label {
|
||
width: 140rpx;
|
||
text-align: right;
|
||
}
|
||
|
||
&-value {
|
||
width: calc(100% - 140rpx);
|
||
}
|
||
|
||
.msg-row-value-box {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.msg-row-address {
|
||
max-width: 278rpx;
|
||
white-space: nowrap;
|
||
/* 确保文本在一行内显示 */
|
||
overflow: hidden;
|
||
/* 隐藏溢出的内容 */
|
||
text-overflow: ellipsis;
|
||
/* 使用省略号表示文本溢出 */
|
||
}
|
||
|
||
.diconfont {
|
||
color: #0066CC;
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
&-segmentation {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: -20rpx;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
&-left,
|
||
&-right {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
background-color: #1C9AFF;
|
||
border-radius: $uni-border-radius-circle;
|
||
}
|
||
|
||
&-left {
|
||
transform: translateX(-20rpx);
|
||
}
|
||
|
||
&-right {
|
||
transform: translateX(20rpx);
|
||
}
|
||
}
|
||
}
|
||
|
||
.electricity-info-address-box {
|
||
display: flex;
|
||
font-size: 24rpx;
|
||
padding: 0 20rpx;
|
||
padding-bottom: 12rpx;
|
||
|
||
.msg-row-label {
|
||
width: 140rpx;
|
||
text-align: right;
|
||
}
|
||
|
||
.msg-row-value-box {
|
||
width: calc(100% - 140rpx);
|
||
}
|
||
|
||
.msg-row-value-box {
|
||
display: flex;
|
||
/* align-items: center; */
|
||
|
||
.msg-row-address {
|
||
/* white-space: nowrap; */
|
||
/* 确保文本在一行内显示 */
|
||
/* overflow: hidden; */
|
||
/* 隐藏溢出的内容 */
|
||
/* text-overflow: ellipsis; */
|
||
/* 使用省略号表示文本溢出 */
|
||
}
|
||
|
||
.diconfont {
|
||
color: #0066CC;
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.electricity-info-label {
|
||
padding: 0 30rpx;
|
||
padding-bottom: 12rpx;
|
||
}
|
||
|
||
.home-title {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 10rpx 15rpx;
|
||
|
||
.home-title-txt {
|
||
font-weight: 600;
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.home-title-remark {
|
||
margin-left: 20rpx;
|
||
font-size: 20rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
.menu-box{
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
margin-top: 20rpx;
|
||
.menu-item{
|
||
width: 320rpx;
|
||
height: 200rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx;
|
||
padding: 30rpx 20rpx 15rpx 30rpx;
|
||
margin-bottom: 20rpx;
|
||
position: relative;
|
||
|
||
&:nth-child(2n-1) {
|
||
margin-right: 20rpx;
|
||
}
|
||
.home-menu-item-header {
|
||
display: flex;
|
||
// align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.home-menu-item-name {
|
||
font-weight: 550;
|
||
font-size: 28rpx;
|
||
}
|
||
.home-menu-item-remark {
|
||
font-size: 20rpx;
|
||
color: #999999;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.home-menu-item-right {
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
background: #EFEFEF;
|
||
border-radius: 50%;
|
||
padding-left: 2rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
.home-menu-item-value{
|
||
position: absolute;
|
||
left: 30rpx;
|
||
bottom: 26rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 550;
|
||
}
|
||
.home-menu-item-bg {
|
||
position: absolute;
|
||
right: 37rpx;
|
||
bottom: 26rpx;
|
||
font-size: 75rpx;
|
||
z-index: 99;
|
||
color: transparent;
|
||
display: inline-block;
|
||
-webkit-background-clip: text;
|
||
}
|
||
.home-menu-item-bg-two{
|
||
position: absolute;
|
||
right: 44rpx;
|
||
bottom: 26rpx;
|
||
font-size: 75rpx;
|
||
z-index: 98;
|
||
}
|
||
}
|
||
.border-box{
|
||
height:1px;
|
||
background: #E0E3E5;
|
||
}
|
||
}
|
||
|
||
&-info-state {
|
||
display: flex;
|
||
padding: 30rpx;
|
||
justify-content: space-between;
|
||
|
||
&-box {
|
||
width: 32%;
|
||
/* padding-top: 30rpx; */
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
&-title {
|
||
padding-bottom: 10rpx;
|
||
}
|
||
|
||
&-text {
|
||
color: #289A00;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.ico-img {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
&-box-line {
|
||
width: 2rpx;
|
||
height: 70rpx;
|
||
background: #ccc;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
|
||
.function-list {
|
||
padding: $paddingTB $paddingLR;
|
||
}
|
||
|
||
.icon-bg-box {
|
||
padding: 20rpx;
|
||
border-radius: 24rpx;
|
||
margin-bottom: 20rpx;
|
||
transform: rotate(45deg);
|
||
|
||
.diconfont {
|
||
transform: rotate(-45deg);
|
||
font-size: 50rpx;
|
||
color: #FFF;
|
||
}
|
||
}
|
||
|
||
.uploadImg {
|
||
padding: 70rpx 30rpx 40rpx 30rpx;
|
||
width: 600rpx;
|
||
|
||
/* height:; */
|
||
&-title {
|
||
font-size: $uni-font-size-lg;
|
||
font-weight: 550;
|
||
display: flex;
|
||
padding-bottom: 20rpx;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
}
|
||
}
|
||
|
||
.slot-content {
|
||
padding: 20rpx 30rpx;
|
||
}
|
||
</style> |