774 lines
21 KiB
Vue
774 lines
21 KiB
Vue
<template>
|
||
<view class="project-box">
|
||
<view class="card-item project-info" @click.stop="enterDetailFn(activeProject)">
|
||
<view class="project-info-header">
|
||
<view class="project-info-left">
|
||
<view class="project-info-name">
|
||
{{activeProject.projectName}}
|
||
</view>
|
||
<view class="project-info-item">
|
||
<view class="diconfont dicon-icon_shijian"></view>
|
||
{{activeProject.createTime}}
|
||
</view>
|
||
<view class="project-info-item">
|
||
<view class="diconfont dicon-icon_weizhi"></view>
|
||
{{activeProject.projectAddress}}
|
||
</view>
|
||
</view>
|
||
<view class="diconfont dicon-mti-qiehuan" @click.stop="openSelectProject"></view>
|
||
</view>
|
||
<view class="alarm-box">
|
||
<view class="alarm-item">
|
||
<view class="item-value" style="color: #FE5277;">
|
||
{{activeProject.tenantIndexVo.alarmTotal||0}}
|
||
</view>
|
||
<view class="item-label">
|
||
报警总数
|
||
</view>
|
||
</view>
|
||
<view class="alarm-item">
|
||
<view class="item-value" style="color: #16D2AF;">
|
||
{{activeProject.tenantIndexVo.processed||0}}
|
||
</view>
|
||
<view class="item-label">
|
||
已处理
|
||
</view>
|
||
</view>
|
||
<view class="alarm-item">
|
||
<view class="item-value" style="color: #FAB64D;">
|
||
{{activeProject.tenantIndexVo.unProcessed||0}}
|
||
</view>
|
||
<view class="item-label">
|
||
未处理
|
||
</view>
|
||
</view>
|
||
<view class="alarm-item">
|
||
<view class="item-value" style="color: #666666;">
|
||
{{activeProject.tenantIndexVo.processedRate||0.00}}%
|
||
</view>
|
||
<view class="item-label">
|
||
已处理率
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="banner-menu-box">
|
||
<view class="banner-menu-item" @click.stop="enterDetailFn(activeProject)">
|
||
<image :src="cdnImgUrl + '/project/bannerbtn1.png'" mode=""></image>
|
||
</view>
|
||
<view class="banner-menu-item" @click.stop="goDeviceList(activeProject)">
|
||
<image :src="cdnImgUrl + '/project/bannerbtn2.png'" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<!-- 默认密码修改提示框 -->
|
||
<view class="password-edit-box" v-if="passwordStatus">
|
||
<div class="password-edit-txt">您的初始密码为：<text style="color: red;font-weight: bold;">888888</text>，如需修改请前往 <text
|
||
style="color: #0066cc;font-weight: bold;"> 我的-密码修改 </text> 菜单进行修改</div>
|
||
<div class="password-edit-btn-box">
|
||
<u-button shape="square" type="primary" size="mini" @click="goPassword">去修改</u-button>
|
||
</div>
|
||
</view>
|
||
<view class="home-title">
|
||
<view class="home-title-txt">
|
||
设备信息
|
||
</view>
|
||
<view class="home-title-remark"></view>
|
||
</view>
|
||
|
||
<view class="home-status-box menu-box">
|
||
<view class="home-status-item menu-item" @click.stop="goDeviceList(activeProject)">
|
||
<view class="home-status-item-name">
|
||
设备总数
|
||
</view>
|
||
<view class="home-status-item-value">
|
||
{{activeProject.tenantIndexVo.deviceTotal||0}}
|
||
</view>
|
||
<view class="home-menu-item-bg diconfont dicon-icon_zongliang"
|
||
:style="{backgroundImage:'linear-gradient(0deg, #45AAFF, #2568FF)'}"></view>
|
||
<view class="home-menu-item-bg-two diconfont dicon-icon_zongliang" :style="{color:'rgba(69, 170, 255, 0.1)'}">
|
||
</view>
|
||
</view>
|
||
<view class="home-status-item menu-item" @click.stop="goDeviceList(activeProject,'ONLINE')">
|
||
<view class="home-status-item-name">
|
||
在线设备
|
||
</view>
|
||
<view class="home-status-item-value">{{activeProject.tenantIndexVo.onlineTotal||0}}</view>
|
||
<view class="item-content-progress-box">
|
||
<qiun-data-charts canvas2d="true" style="width: 162rpx;height:162rpx;" type="arcbar"
|
||
:opts="activeProject.opts" :chartData="activeProject.chartData" />
|
||
</view>
|
||
</view>
|
||
<view class="home-status-item menu-item">
|
||
<view class="home-status-item-name">
|
||
维保记录
|
||
</view>
|
||
<view class="home-status-item-value">{{activeProject.tenantIndexVo.maintenanceRecordTotal||0}}</view>
|
||
<view class="home-menu-item-bg diconfont dicon-icon_weibaojilu"
|
||
:style="{backgroundImage:'linear-gradient(0deg, #33F3FF, #00BCD2)'}"></view>
|
||
<view class="home-menu-item-bg-two diconfont dicon-icon_weibaojilu" :style="{color:'rgba(49, 234, 246, 0.1)'}">
|
||
</view>
|
||
</view>
|
||
<view class="home-status-item menu-item">
|
||
<view class="home-status-item-name">
|
||
今日报警
|
||
</view>
|
||
<view class="home-status-item-value" :style="{color:activeProject.todayAlarmTotal?'#FB3534':'#000'}">
|
||
{{(activeProject && activeProject.todayAlarmTotal) || "0"}}
|
||
</view>
|
||
<view class="home-menu-item-bg diconfont dicon-icon_jinribaojing"
|
||
:style="{backgroundImage:'linear-gradient(0deg, #FFEF65, #FFBA00)'}"></view>
|
||
<view class="home-menu-item-bg-two diconfont dicon-icon_jinribaojing" :style="{color:'rgba(254, 185, 0, 0.1)'}">
|
||
</view>
|
||
</view>
|
||
<view class="home-status-item menu-item">
|
||
<view class="home-status-item-name">
|
||
电量费用(元)
|
||
</view>
|
||
<view class="home-status-item-value">
|
||
{{(activeProject && activeProject.projectPowerRate) || "0"}}
|
||
</view>
|
||
<view class="home-menu-item-bg diconfont dicon-icon_dianliang"
|
||
:style="{backgroundImage:'linear-gradient(0deg, #F9BA98, #7E442E)'}"></view>
|
||
<view class="home-menu-item-bg-two diconfont dicon-icon_dianliang" :style="{color:'rgba(246, 184, 150, 0.1)'}">
|
||
</view>
|
||
</view>
|
||
<view class="home-status-item menu-item">
|
||
<view class="home-status-item-name">
|
||
电流负载(A)
|
||
</view>
|
||
<view class="home-status-item-value">
|
||
{{(activeProject && activeProject.projectCurrent) || "0"}}
|
||
</view>
|
||
<view class="home-menu-item-bg diconfont dicon-icon_dianliu"
|
||
:style="{backgroundImage:'linear-gradient(0deg, #D5D5D5, #828282)'}"></view>
|
||
<view class="home-menu-item-bg-two diconfont dicon-icon_dianliu" :style="{color:'rgba(205, 205, 205, 0.1)'}">
|
||
</view>
|
||
</view>
|
||
<view class="home-status-item menu-item">
|
||
<view class="home-status-item-name">
|
||
温度(°C)
|
||
</view>
|
||
<view class="home-status-item-value">
|
||
{{(activeProject && activeProject.projectTemperature) || "0"}}
|
||
</view>
|
||
<view class="home-menu-item-bg diconfont dicon-icon_dianliu"
|
||
:style="{backgroundImage:'linear-gradient(0deg, #FFE1EE, #FF5757)'}"></view>
|
||
<view class="home-menu-item-bg-two diconfont dicon-icon_dianliu" :style="{color:'rgba(255, 87, 87, 0.1)'}">
|
||
</view>
|
||
</view>
|
||
<view class="home-status-item menu-item">
|
||
<view class="home-status-item-name">
|
||
电压(V)
|
||
</view>
|
||
<view class="home-status-item-value">
|
||
{{(activeProject && activeProject.projectVoltage) || "0"}}
|
||
</view>
|
||
<view class="home-menu-item-bg diconfont dicon-icon_dianliu"
|
||
:style="{backgroundImage:'linear-gradient(0deg, #D5D5D5, #828282)'}"></view>
|
||
<view class="home-menu-item-bg-two diconfont dicon-icon_dianliu" :style="{color:'rgba(205, 205, 205, 0.1)'}">
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<u-modal v-model="addressShow" confirm-text="去设置" @confirm="setProjectAddress">
|
||
<view class="slot-content">
|
||
项目：{{activeProject.projectName}}未设置地址，请前往设置
|
||
</view>
|
||
</u-modal>
|
||
<u-modal v-model="selectProjectShow" class="select-model" title="" :mask-close-able="true"
|
||
:show-confirm-button="false" @confirm="setProjectAddress">
|
||
<view class="slot-content">
|
||
<view class="select-project-box">
|
||
<view class="select-project-title">
|
||
项目列表
|
||
</view>
|
||
<scroll-view scroll-y="true" class="select-project-scroll">
|
||
<view class="project-item" :class="activeIndex==index?'active':''" v-for="(item,index) in projectList"
|
||
:key="item.projectId" @click="changProject(index)">
|
||
{{item.projectName}}
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</u-modal>
|
||
<u-toast ref="uToast" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getLenPx
|
||
} from "@/utils/mapCalculate.js"
|
||
var QQMapWX = require('@/utils/qqmap-wx-jssdk.min');
|
||
// 实例化API核心类
|
||
var qqmapsdk = new QQMapWX({
|
||
key: 'XQTBZ-HP5CG-FRFQN-QCFTJ-LTG76-LSF6G'
|
||
});
|
||
export default {
|
||
data() {
|
||
return {
|
||
addressShow: false,
|
||
passwordStatus: false,
|
||
selectProjectShow: false,
|
||
projectList: null,
|
||
activeProject: {
|
||
"createTime": null,
|
||
"updateTime": null,
|
||
"projectId": null,
|
||
"projectCode": null,
|
||
"projectName": null,
|
||
"contractId": null,
|
||
"industry": null,
|
||
"regionalismCode": 350121,
|
||
"projectAddress": null,
|
||
"projectLng": null,
|
||
"projectLat": null,
|
||
"projectStatus": null,
|
||
"projectPowerRate": null,
|
||
"tenantIndexVo": {
|
||
"deviceTotal": 0,
|
||
"onlineTotal": 0,
|
||
"offlineTotal": 0,
|
||
"onlineRate": "100.00",
|
||
"alarmTotal": 0,
|
||
"processed": 0,
|
||
"unProcessed": 0,
|
||
"processedRate": "0.00",
|
||
"maintenanceRecordTotal": 0,
|
||
"todayAlarmTotal": 0,
|
||
"psTotal": 0,
|
||
"pwTotal": 0.0,
|
||
"userTotal": 0,
|
||
"alarmModelList": [],
|
||
"projectTotal": 1,
|
||
"tenantAlarmRecordVo": null
|
||
},
|
||
"deviceAlarmSimpleVoList": [{
|
||
"deviceId": "a56e1408fa354b9dbd48d6805aa688f3",
|
||
"deviceName": "办公室测试网关",
|
||
"unProcessAlarmTotal": 48
|
||
}],
|
||
"adminFlag": true,
|
||
"projectRole": "root",
|
||
"deviceCount": 0
|
||
},
|
||
activeIndex: 0,
|
||
// 默认仪表盘配置
|
||
opts: {
|
||
color: ["#2897ff"],
|
||
padding: undefined,
|
||
title: {
|
||
name: "80%",
|
||
fontSize: 12,
|
||
color: "#2897ff"
|
||
},
|
||
subtitle: {
|
||
name: "设备在线率",
|
||
fontSize: 10,
|
||
color: "#666666"
|
||
},
|
||
extra: {
|
||
arcbar: {
|
||
type: "default",
|
||
width: 6,
|
||
backgroundColor: "#f3f4f5",
|
||
startAngle: 0.75,
|
||
endAngle: 0.25,
|
||
gap: 2,
|
||
linearType: "none"
|
||
}
|
||
}
|
||
},
|
||
cdnImgUrl: 'http://static.drgyen.com/app/hc-app-power/images',
|
||
defaultProjectId: '',
|
||
}
|
||
},
|
||
onLoad() {
|
||
try {
|
||
const defaultProjectId = uni.getStorageSync('defaultProjectId');
|
||
if (defaultProjectId) {
|
||
this.defaultProjectId = defaultProjectId;
|
||
}
|
||
} catch (e) {
|
||
// error
|
||
}
|
||
this.cdnImgUrl = this.$config.cdnImgUrl;
|
||
this.getUserInfo()
|
||
},
|
||
onShow() {
|
||
if (this.passwordStatus == true) {
|
||
this.getUserInfo()
|
||
}
|
||
this.getProjectList();
|
||
},
|
||
methods: {
|
||
getUserInfo() {
|
||
this.$get("/system/user/profile").then((res) => {
|
||
console.log(res, "res");
|
||
if (!res.data) return;
|
||
if (res.data.updateTime == undefined) {
|
||
this.passwordStatus = true;
|
||
} else {
|
||
this.passwordStatus = false;
|
||
}
|
||
uni.setStorageSync("tenantInfo", res.data.tenant)
|
||
uni.setStorageSync("userInfo", res.data)
|
||
})
|
||
},
|
||
goPassword() {
|
||
uni.navigateTo({
|
||
url: '/pages/tabBar/my/passwordModify'
|
||
})
|
||
},
|
||
getOnlineRate(item) {
|
||
let deviceTotal = item.tenantIndexVo.deviceTotal || 0;
|
||
let onlineTotal = item.tenantIndexVo.onlineTotal || 0;
|
||
let onlineRate = (onlineTotal / deviceTotal);
|
||
return onlineRate;
|
||
},
|
||
getOnlineRateTxt(item) {
|
||
let deviceTotal = item.tenantIndexVo.deviceTotal || 0;
|
||
let onlineTotal = item.tenantIndexVo.onlineTotal || 0;
|
||
if (deviceTotal === 0 && onlineTotal === 0) {
|
||
return '';
|
||
} else {
|
||
let onlineRateTxt = ((onlineTotal / deviceTotal) * 100).toFixed(1) + '%';
|
||
return onlineRateTxt;
|
||
}
|
||
},
|
||
setProjectAddress() {
|
||
this.addressShow = false;
|
||
uni.chooseLocation({
|
||
success: (res) => {
|
||
qqmapsdk.reverseGeocoder({
|
||
location: {
|
||
latitude: res.latitude,
|
||
longitude: res.longitude
|
||
},
|
||
success: (res1) => {
|
||
console.log("res1", res1.result);
|
||
this.$put("/iot/project", {
|
||
...this.activeProject,
|
||
projectLat: res.latitude,
|
||
projectLng: res.longitude,
|
||
projectAddress: res.address + res.name,
|
||
regionalismCode: res1.result.ad_info.adcode
|
||
}).then(editres => {
|
||
this.addressShow = false;
|
||
if (editres.code == 200) {
|
||
this.mescroll.resetUpScroll();
|
||
} else {
|
||
this.$refs.uToast.show({
|
||
title: editres.msg,
|
||
type: 'error',
|
||
})
|
||
}
|
||
}).catch(err => {
|
||
// this.$refs.uToast.show({
|
||
// title: err.msg,
|
||
// type: 'error',
|
||
// })
|
||
})
|
||
},
|
||
fail: (err) => {
|
||
console.log(res);
|
||
}
|
||
})
|
||
}
|
||
});
|
||
},
|
||
getProjectList() {
|
||
let obj = {
|
||
pageSize: 100,
|
||
pageNum: 1,
|
||
}
|
||
if (this.searchValue) obj.projectName = this.searchValue;
|
||
this.$get("/app/project/table", obj).then((res) => {
|
||
if (res.rows && res.rows.length > 0) {
|
||
// 接口返回的当前页数据列表 (数组)
|
||
let curPageData = res.rows || [];
|
||
// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
|
||
let curPageLen = curPageData.length;
|
||
|
||
curPageData.forEach((item, index) => {
|
||
let res = {
|
||
series: [{
|
||
name: "正确率",
|
||
data: this.getOnlineRate(item)
|
||
}]
|
||
};
|
||
if (this.defaultProjectId == item.projectId) {
|
||
this.activeIndex = index;
|
||
}
|
||
let opts = JSON.parse(JSON.stringify(this.opts));
|
||
this.opts.title.name = this.getOnlineRateTxt(item)
|
||
curPageData[index].chartData = JSON.parse(JSON.stringify(res));
|
||
curPageData[index].opts = JSON.parse(JSON.stringify(this.opts));
|
||
})
|
||
|
||
//设置列表数据
|
||
this.projectList = curPageData;
|
||
// this.projectList = [...curPageData,...curPageData,...curPageData,...curPageData,...curPageData,...curPageData];
|
||
if (this.activeIndex >= curPageLen) {
|
||
this.activeProject = curPageData[0];
|
||
this.activeIndex = 0;
|
||
} else {
|
||
this.activeProject = curPageData[this.activeIndex];
|
||
}
|
||
curPageData.forEach((item, index) => {
|
||
if(!item.projectAddress && index!=0){
|
||
this.activeProject = item;
|
||
this.activeIndex = index;
|
||
}
|
||
})
|
||
this.defaultProjectId = this.activeProject.projectId;
|
||
uni.setStorage({
|
||
key: 'defaultProjectId',
|
||
data: this.activeProject.projectId,
|
||
})
|
||
if (res.total >= 1) {
|
||
console.log("this.activeProject",this.activeProject)
|
||
if (this.activeProject.projectAddress=="") {
|
||
this.addressShow = true;
|
||
} else {
|
||
this.addressShow = false;
|
||
}
|
||
}
|
||
} else {
|
||
this.projectList = [];
|
||
}
|
||
}).catch(() => {
|
||
//联网失败, 结束加载
|
||
}).finally(() => {})
|
||
},
|
||
enterDetailFn(item) {
|
||
uni.navigateTo({
|
||
url: `../project/index?projectId=${item.projectId}&projectCode=${item.projectCode}`
|
||
})
|
||
},
|
||
goDeviceList(item,deviceState=false) {
|
||
console.log("deviceState",deviceState)
|
||
if(deviceState){
|
||
uni.navigateTo({
|
||
url: `../project/equipmentStatus/status?projectId=${item.projectId}&adminFlag=${item.adminFlag}&projectRole=${item.projectRole}&deviceState=${deviceState}`
|
||
})
|
||
}else{
|
||
uni.navigateTo({
|
||
url: `../project/equipmentStatus/status?projectId=${item.projectId}&adminFlag=${item.adminFlag}&projectRole=${item.projectRole}`
|
||
})
|
||
}
|
||
|
||
},
|
||
changProject(index) {
|
||
this.activeIndex = index;
|
||
this.activeProject = this.projectList[index];
|
||
this.selectProjectShow = false;
|
||
this.defaultProjectId = this.projectList[index].projectId;
|
||
uni.setStorage({
|
||
key: 'defaultProjectId',
|
||
data: this.projectList[index].projectId,
|
||
})
|
||
},
|
||
openSelectProject() {
|
||
this.selectProjectShow = true;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.project-box {
|
||
font-family: Source Han Sans CN;
|
||
padding: 45rpx;
|
||
|
||
.project-info {
|
||
width: 660rpx;
|
||
height: 290rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx;
|
||
margin-bottom: 30rpx;
|
||
|
||
.project-info-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 30rpx 20rpx 5rpx;
|
||
|
||
.project-info-left {
|
||
.project-info-name {
|
||
font-weight: 550;
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.project-info-item {
|
||
margin-top: 10rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 20rpx;
|
||
color: #8e8e8e;
|
||
|
||
.diconfont {
|
||
font-size: 20rpx;
|
||
color: #8e8e8e;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.dicon-mti-qiehuan {
|
||
font-size: 38rpx;
|
||
// font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.alarm-box {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 5rpx 30rpx;
|
||
|
||
.alarm-item {
|
||
text-align: center;
|
||
font-family: Source Han Sans CN;
|
||
|
||
.item-value {
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.item-label {
|
||
margin-top: 10rpx;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.banner-menu-box {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.banner-menu-item {
|
||
width: 320rpx;
|
||
height: 115rpx;
|
||
border-radius: 20rpx;
|
||
overflow: hidden;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.password-edit-box {
|
||
border-radius: 20rpx;
|
||
background-color: #fff;
|
||
margin-top: 30rpx;
|
||
box-shadow: $box-shadow;
|
||
padding: 25rpx;
|
||
|
||
.password-edit-txt {}
|
||
|
||
.password-edit-btn-box {
|
||
text-align: end;
|
||
}
|
||
}
|
||
|
||
.home-title {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 20rpx 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;
|
||
|
||
.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-status-item-name {
|
||
font-weight: 550;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.home-status-item-value {
|
||
font-weight: bold;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.item-content-progress-box {
|
||
position: absolute;
|
||
right: 10rpx;
|
||
bottom: 0rpx;
|
||
width: 180rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
}
|
||
|
||
.border-box {
|
||
height: 1px;
|
||
background: #E0E3E5;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
::v-deep .u-btn--primary--plain {
|
||
background-color: #fff !important;
|
||
}
|
||
|
||
.slot-content {
|
||
padding: 30rpx;
|
||
font-weight: bold;
|
||
font-size: 26rpx;
|
||
overflow: visible
|
||
}
|
||
|
||
.select-model ::v-deep .u-model {
|
||
background: linear-gradient(180deg, #45AAFF 0, #FFFFFF 268rpx);
|
||
position: relative;
|
||
overflow: visible !important;
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
.select-model ::v-deep .uni-scroll-view,
|
||
.select-model ::v-deep .uni-scroll-view,
|
||
.select-model ::v-deep .u-mode-center-box,
|
||
.select-model ::v-deep .u-drawer-content {
|
||
overflow: visible !important;
|
||
}
|
||
|
||
.select-model ::v-deep .u-mode-center-box {
|
||
&::before {
|
||
position: absolute;
|
||
left: 45rpx;
|
||
top: -82rpx;
|
||
content: '';
|
||
width: 511rpx;
|
||
height: 268rpx;
|
||
background: url("http://static.drgyen.com/app/hc-app-power/images/project/model-top1.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
z-index: 1076;
|
||
}
|
||
}
|
||
|
||
.select-project-box {
|
||
height: 557rpx;
|
||
padding-top: 170rpx;
|
||
|
||
// &::before{
|
||
// position: absolute;
|
||
// left: 45rpx;
|
||
// top: -82rpx;
|
||
// content: '';
|
||
// width: 511rpx;
|
||
// height: 268rpx;
|
||
// background: url("http://static.drgyen.com/app/hc-app-power/images/project/model-top1.png") no-repeat;
|
||
// background-size: 100% 100%;
|
||
// z-index: 1076;
|
||
// }
|
||
.select-project-title {
|
||
width: 538rpx;
|
||
height: 71rpx;
|
||
position: absolute;
|
||
left: 31rpx;
|
||
top: 204rpx;
|
||
background: url("http://static.drgyen.com/app/hc-app-power/images/project/model-top2.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
z-index: 1076;
|
||
font-weight: 450;
|
||
font-size: 34rpx;
|
||
color: #333333;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.select-project-scroll {
|
||
height: 354rpx;
|
||
|
||
.project-item {
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
line-height: 60rpx;
|
||
text-indent: 50rpx;
|
||
position: relative;
|
||
|
||
&::before {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 10rpx;
|
||
content: '';
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
background: url("http://static.drgyen.com/app/hc-app-power/images/project/model-right.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
z-index: 1076;
|
||
}
|
||
|
||
&.active {
|
||
&::after {
|
||
position: absolute;
|
||
right: 20rpx;
|
||
top: 7rpx;
|
||
content: '';
|
||
width: 26rpx;
|
||
height: 26rpx;
|
||
background: url("http://static.drgyen.com/app/hc-app-power/images/project/model-hook.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
z-index: 1076;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |