JSY/jsy-app
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

.

Browse Source
This commit is contained in:
王丹 2024-09-19 17:44:14 +08:00
parent 83797b5ed3
commit 000e62c0fd
2 changed files with 194 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
pages/index.vue
View File

@ -1,7 +1,7 @@
<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>
<view @click="openLand">选择地块</view>
<view @click="openLand">地块</view>
</block>
<view>西安设备测试</view>
<block v-slot:right>
@ -223,11 +223,86 @@
<view class="text">
<view class="left">-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="bottom">-99.63</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>
</view>
<view>
@ -357,7 +432,7 @@
border-color: #ffffff !important;
}
}
.content{background-color: #fff;min-height: 100%;}
.content-section {
position: relative;
top: -92px;

126
static/scss/app.css
View File

@ -24,24 +24,32 @@
.u-button--square {
border-radius: 5px !important;
}
.u-button--normal {
height: 28px !important;
}
.u-button--small {
height: 25px !important;
}
.u-button--success {
background-color: #39ac4f !important;
border-color: #39ac4f !important;
}
.u-button--plain{
background-color: transparent !important;
.u-button--plain {
background-color: transparent !important;
}
/* 卡片线 */
.u-collapse > .u-line{border: none !important;}
.u-collapse>.u-line {
border: none !important;
}
/* 列表 */
.u-collapse-item > .u-line {
border-bottom: none !important;
.u-collapse-item>.u-line {
border-bottom: none !important;
}
/* fixed */
@ -50,10 +58,26 @@
align-items: center;
flex-direction: row;
}
/* 按钮 */
.btn{ color: #39ac4f;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;}
.btn {
color: #39ac4f;
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 {
color: #e60012;
@ -76,7 +100,8 @@
box-shadow: 0 1px 9px rgb(209, 209, 209, 0.5);
}
.card-grey {background-color: #f3f3f3;
.card-grey {
background-color: #f3f3f3;
box-shadow: none;
}
@ -92,10 +117,87 @@
.card-grey .card-title .u-row {
margin-bottom: 0 !important;
}
/* 首页阀门 */
.control {
padding: 10px;
}
.valve > view{display: flex;justify-content: center;}
.valve .btn-img{margin: 5px; position: relative;}
.valve .btn-img .text{position: absolute; z-index: 2;}
.valve{display: flex;
align-items: center;
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;}