.
This commit is contained in:
王丹
parent
83797b5ed3
commit
000e62c0fd
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<uni-nav-bar :statusBar="true" :fixed="false" backgroundColor="#39ac4f" :border="false" color="#fff">
|
<uni-nav-bar :statusBar="true" :fixed="true" backgroundColor="#39ac4f" :border="false" color="#fff">
|
||||||
<block v-slot:left>
|
<block v-slot:left>
|
||||||
<view @click="openLand">选择地块</view>
|
<view @click="openLand">地块</view>
|
||||||
</block>
|
</block>
|
||||||
<view>西安设备测试</view>
|
<view>西安设备测试</view>
|
||||||
<block v-slot:right>
|
<block v-slot:right>
|
||||||
@ -223,11 +223,86 @@
|
|||||||
<view class="text">
|
<view class="text">
|
||||||
<view class="left">-99.63</view>
|
<view class="left">-99.63</view>
|
||||||
<view class="top">-99.63</view>
|
<view class="top">-99.63</view>
|
||||||
<view class="content">离线</view>
|
<view class="middle">离线</view>
|
||||||
<view class="right">-99.63</view>
|
<view class="right">-99.63</view>
|
||||||
<view class="bottom">-99.63</view>
|
<view class="bottom">-99.63</view>
|
||||||
</view>
|
</view>
|
||||||
<image src="../static/images/valves/valve3.png" mode="widthFix">
|
<image src="../static/images/valves/valve3-all.gif" mode="widthFix">
|
||||||
|
</image>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<view class="btn fixed">
|
||||||
|
<text>全关</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</u-col>
|
||||||
|
<u-col span="3">
|
||||||
|
<view class="buttons">
|
||||||
|
<view class="btn fixed">
|
||||||
|
<text>④</text>
|
||||||
|
<text>0.00</text>
|
||||||
|
<view class="iconfont icon-suoding icon"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</u-col>
|
||||||
|
</u-row>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="card-grey">
|
||||||
|
<view class="card-title">
|
||||||
|
<u-row>
|
||||||
|
<u-col span="2">
|
||||||
|
<view><text class="font-green">●</text>1-1</view>
|
||||||
|
</u-col>
|
||||||
|
<u-col span="5">
|
||||||
|
<view class="fixed">
|
||||||
|
<view class="battery-container">
|
||||||
|
<text>60</text>
|
||||||
|
<view class="battery-level battery-level-60">
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<view class="iconfont icon-wendu icon"></view>26.2
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</u-col>
|
||||||
|
<u-col span="5" style="align-items: flex-end;">
|
||||||
|
<view class="fixed">
|
||||||
|
<u-button type="success" size="mini" text="刷新"
|
||||||
|
icon="reload"></u-button>
|
||||||
|
</view>
|
||||||
|
</u-col>
|
||||||
|
</u-row>
|
||||||
|
</view>
|
||||||
|
<view class="control">
|
||||||
|
<u-row>
|
||||||
|
<u-col span="3" style=" align-items: flex-end;">
|
||||||
|
<view class="buttons">
|
||||||
|
<view class="btn fixed active">
|
||||||
|
<text>①</text>
|
||||||
|
<text>0.00</text>
|
||||||
|
<view class="iconfont icon-suoding icon"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</u-col>
|
||||||
|
<u-col span="6">
|
||||||
|
<view class="valve">
|
||||||
|
<view>
|
||||||
|
<view class="btn fixed">
|
||||||
|
<text>全开</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="btn-img">
|
||||||
|
<view class="text5">
|
||||||
|
<view class="left">-99.63</view>
|
||||||
|
<view class="top">-99.63</view>
|
||||||
|
<view class="middle">离线</view>
|
||||||
|
<view class="right">-99.63</view>
|
||||||
|
<view class="bottom">-99.63</view>
|
||||||
|
</view>
|
||||||
|
<image src="../static/images/fiveValves/valve5.png" mode="widthFix">
|
||||||
</image>
|
</image>
|
||||||
</view>
|
</view>
|
||||||
<view>
|
<view>
|
||||||
@ -357,7 +432,7 @@
|
|||||||
border-color: #ffffff !important;
|
border-color: #ffffff !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.content{background-color: #fff;min-height: 100%;}
|
||||||
.content-section {
|
.content-section {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -92px;
|
top: -92px;
|
||||||
|
|||||||
@ -24,21 +24,29 @@
|
|||||||
.u-button--square {
|
.u-button--square {
|
||||||
border-radius: 5px !important;
|
border-radius: 5px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.u-button--normal {
|
.u-button--normal {
|
||||||
height: 28px !important;
|
height: 28px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.u-button--small {
|
.u-button--small {
|
||||||
height: 25px !important;
|
height: 25px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.u-button--success {
|
.u-button--success {
|
||||||
background-color: #39ac4f !important;
|
background-color: #39ac4f !important;
|
||||||
border-color: #39ac4f !important;
|
border-color: #39ac4f !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.u-button--plain {
|
.u-button--plain {
|
||||||
background-color: transparent !important;
|
background-color: transparent !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 卡片线 */
|
/* 卡片线 */
|
||||||
.u-collapse > .u-line{border: none !important;}
|
.u-collapse>.u-line {
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
/* 列表 */
|
/* 列表 */
|
||||||
.u-collapse-item>.u-line {
|
.u-collapse-item>.u-line {
|
||||||
border-bottom: none !important;
|
border-bottom: none !important;
|
||||||
@ -50,10 +58,26 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 按钮 */
|
/* 按钮 */
|
||||||
.btn{ color: #39ac4f;padding: 0 5px; border: 1px solid #39ac4f; width: fit-content;height: 28px; border-radius: 5px;}
|
.btn {
|
||||||
.btn text{margin-right:2px;}
|
color: #39ac4f;
|
||||||
.btn.active{background-color: #39ac4f;color: #fff;}
|
padding: 0 5px;
|
||||||
|
border: 1px solid #39ac4f;
|
||||||
|
width: fit-content;
|
||||||
|
height: 28px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn text {
|
||||||
|
margin-right: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.active {
|
||||||
|
background-color: #39ac4f;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
/* 字体颜色 */
|
/* 字体颜色 */
|
||||||
.font-red {
|
.font-red {
|
||||||
color: #e60012;
|
color: #e60012;
|
||||||
@ -76,7 +100,8 @@
|
|||||||
box-shadow: 0 1px 9px rgb(209, 209, 209, 0.5);
|
box-shadow: 0 1px 9px rgb(209, 209, 209, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-grey {background-color: #f3f3f3;
|
.card-grey {
|
||||||
|
background-color: #f3f3f3;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -92,10 +117,87 @@
|
|||||||
.card-grey .card-title .u-row {
|
.card-grey .card-title .u-row {
|
||||||
margin-bottom: 0 !important;
|
margin-bottom: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 首页阀门 */
|
/* 首页阀门 */
|
||||||
.control {
|
.control {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
.valve > view{display: flex;justify-content: center;}
|
.valve{display: flex;
|
||||||
.valve .btn-img{margin: 5px; position: relative;}
|
align-items: center;
|
||||||
.valve .btn-img .text{position: absolute; z-index: 2;}
|
flex-direction: column;}
|
||||||
|
.valve>view {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.valve .btn-img {
|
||||||
|
width: 130px;
|
||||||
|
margin: 10px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.valve .btn-img .text,
|
||||||
|
.valve .btn-img .text5 {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2;
|
||||||
|
width: -webkit-fill-available;
|
||||||
|
height: -webkit-fill-available;
|
||||||
|
}
|
||||||
|
|
||||||
|
.valve .btn-img .text>view,
|
||||||
|
.valve .btn-img .text5>view {
|
||||||
|
position: absolute;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.valve .btn-img .text .left,
|
||||||
|
.valve .btn-img .text5 .left {
|
||||||
|
left: 0;
|
||||||
|
top: 24%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.valve .btn-img .text5 .left {
|
||||||
|
top: 41%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.valve .btn-img .text .top,
|
||||||
|
.valve .btn-img .text5 .top {
|
||||||
|
top: -12px;
|
||||||
|
left: 33%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.valve .btn-img .text5 .top {
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.valve .btn-img .text .middle,
|
||||||
|
.valve .btn-img .text5 .middle {
|
||||||
|
font-size: 18px;
|
||||||
|
top: 36%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
color: #e60012;
|
||||||
|
}
|
||||||
|
|
||||||
|
.valve .btn-img .text5 .middle {
|
||||||
|
top: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.valve .btn-img .text .right,
|
||||||
|
.valve .btn-img .text5 .right {
|
||||||
|
right: 0;
|
||||||
|
top: 24%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.valve .btn-img .text5 .right {
|
||||||
|
top: 41%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.valve .btn-img .text .bottom,
|
||||||
|
.valve .btn-img .text5 .bottom {
|
||||||
|
bottom: -4px;
|
||||||
|
left: 33%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.valve .btn-img .text5 .bottom{bottom: 0px;}
|
||||||
Loading…
Reference in New Issue
Block a user