.
@ -15,13 +15,14 @@
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom"
|
||||
// "navigationBarBackgroundColor": "#39ac4f"
|
||||
|
||||
}
|
||||
}, {
|
||||
"path": "pages/index-list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationBarBackgroundColor": "#39ac4f"
|
||||
// "navigationBarBackgroundColor": "#39ac4f"
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
|
148
pages/index.vue
@ -1,32 +1,27 @@
|
||||
<template>
|
||||
<!-- <u-navbar :safeAreaInsetTop="false" bgColor="#39ac4f" :autoBack="false" :leftIconSize="0">
|
||||
</u-navbar> -->
|
||||
<uni-nav-bar backgroundColor="#39ac4f" :border="false"></uni-nav-bar>
|
||||
|
||||
<!-- <uni-nav-bar backgroundColor="#39ac4f" :border="false"></uni-nav-bar> -->
|
||||
<uni-nav-bar :statusBar="true" :fixed="false" backgroundColor="#39ac4f" :border="false" color="#fff">
|
||||
<block v-slot:left>
|
||||
<view @click="openLand">选择地块</view>
|
||||
</block>
|
||||
<view>西安设备测试</view>
|
||||
<block v-slot:right>
|
||||
<view class="fixed">
|
||||
<view align="right" class="iconfont icon-liebiao icon" @click="toList"></view>
|
||||
<view align="right" class="iconfont icon-scan icon" @click="toQRCode"></view>
|
||||
</view>
|
||||
</block>
|
||||
</uni-nav-bar>
|
||||
<custom-select-land ref="refLand" :data="landList" @select=""></custom-select-land>
|
||||
<view class="content">
|
||||
<view class="header-section">
|
||||
<view class="title">
|
||||
<u-row>
|
||||
<u-col span="3">
|
||||
<view @click="openLand">选择地块</view>
|
||||
</u-col>
|
||||
<u-col span="6" align="center">
|
||||
<text>西安设备测试</text>
|
||||
</u-col>
|
||||
<u-col span="3">
|
||||
<view class="fixed">
|
||||
<view align="right" class="iconfont icon-liebiao icon" @click="toList"></view>
|
||||
<view align="right" class="iconfont icon-scan icon" @click="toQRCode"></view>
|
||||
</view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</view>
|
||||
<u-row justify="space-between" gutter="10">
|
||||
<u-col span="9">
|
||||
<u-col span="8">
|
||||
<u-search shape="square" :animation="true" :showAction="false"></u-search>
|
||||
</u-col>
|
||||
<u-col span="3">
|
||||
<u-col span="4">
|
||||
<view class="demo-layout bg-purple-light">
|
||||
<u-checkbox-group placement="row">
|
||||
<u-checkbox :checked="false" label="工作(256)" labelColor="#ffffff"></u-checkbox>
|
||||
@ -83,7 +78,7 @@
|
||||
<view>E0000104</view>
|
||||
</view>
|
||||
</u-col>
|
||||
<u-col span="4">
|
||||
<u-col span="4" style="align-items: center;">
|
||||
<view class="fixed">
|
||||
<view class="signal">
|
||||
<view class="bar"></view>
|
||||
@ -96,6 +91,11 @@
|
||||
</view>
|
||||
</view>
|
||||
<text>(12)</text>
|
||||
<view class="battery-container">
|
||||
<text>60</text>
|
||||
<view class="battery-level battery-level-60">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-col>
|
||||
<u-col span="5">
|
||||
@ -112,7 +112,7 @@
|
||||
<view>E0000104</view>
|
||||
</view>
|
||||
</u-col>
|
||||
<u-col span="4">
|
||||
<u-col span="4" style="align-items: center;">
|
||||
<view class="fixed">
|
||||
<view class="signal">
|
||||
<view class="bar green"></view>
|
||||
@ -178,10 +178,10 @@
|
||||
<view class="card-grey">
|
||||
<view class="card-title">
|
||||
<u-row>
|
||||
<u-col span="3">
|
||||
<u-col span="2">
|
||||
<view><text class="font-green">●</text>1-1</view>
|
||||
</u-col>
|
||||
<u-col span="4">
|
||||
<u-col span="5">
|
||||
<view class="fixed">
|
||||
<view class="battery-container">
|
||||
<text>60</text>
|
||||
@ -202,17 +202,55 @@
|
||||
</u-row>
|
||||
</view>
|
||||
<view class="control">
|
||||
<view class="buttons">
|
||||
<u-button size="small" plain="true" text="大小尺寸"></u-button>
|
||||
</view>
|
||||
<view class="valve">
|
||||
<view class=""></view>
|
||||
<view class="">
|
||||
<image src="../static/images/valves/valve3.png"></image>
|
||||
</view>
|
||||
<view class=""></view>
|
||||
</view>
|
||||
<view class="buttons"></view>
|
||||
<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="text">
|
||||
<view>-99.63</view>
|
||||
<view>-99.63</view>
|
||||
<view>离线</view>
|
||||
<view>-99.63</view>
|
||||
<view>-99.63</view>
|
||||
</view>
|
||||
<image src="../static/images/valves/valve3.png" 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>
|
||||
@ -278,24 +316,31 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
// nav
|
||||
::v-deep.uni-navbar__header-container {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&>view {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep.uni-navbar__header-btns-left {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
::v-deep.uni-navbar__header-btns-right .icon {
|
||||
font-size: 44rpx;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.header-section {
|
||||
padding: 0px 10px 102px 10px;
|
||||
background-color: #39ac4f;
|
||||
color: white;
|
||||
border-radius: 0 0 30px 30px;
|
||||
|
||||
.title {
|
||||
padding: 0px 0 15px 0;
|
||||
|
||||
text {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 44rpx;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep.u-search__content,
|
||||
::v-deep.u-search__content__input {
|
||||
@ -387,14 +432,11 @@
|
||||
.u-row {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.u-button {
|
||||
margin: 0 0 0 10px;
|
||||
margin: 0 0 0 5px;
|
||||
}
|
||||
|
||||
.jz-title {
|
||||
@ -406,7 +448,6 @@
|
||||
}
|
||||
|
||||
text {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
@ -416,7 +457,6 @@
|
||||
color: #999999;
|
||||
|
||||
.text {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
}
|
||||
@ -496,7 +536,7 @@
|
||||
|
||||
// 电池
|
||||
.battery-container {
|
||||
margin: 0 10px;
|
||||
margin: 0 0 0 10px;
|
||||
position: relative;
|
||||
width: 31px;
|
||||
height: 16px;
|
||||
|
Before Width: | Height: | Size: 9.7 KiB After Width: | Height: | Size: 6.0 KiB |
Before Width: | Height: | Size: 6.0 KiB After Width: | Height: | Size: 9.7 KiB |
Before Width: | Height: | Size: 9.8 KiB After Width: | Height: | Size: 6.0 KiB |
Before Width: | Height: | Size: 6.0 KiB After Width: | Height: | Size: 9.8 KiB |
@ -24,21 +24,24 @@
|
||||
.u-button--square {
|
||||
border-radius: 5px !important;
|
||||
}
|
||||
|
||||
.u-button--normal {
|
||||
height: 28px !important;
|
||||
}
|
||||
.u-button--small {
|
||||
height: 25px !important;
|
||||
}
|
||||
|
||||
.u-button--success[data-v-5ce41ee6] {
|
||||
.u-button--success {
|
||||
background-color: #39ac4f !important;
|
||||
border-color: #39ac4f !important;
|
||||
}
|
||||
|
||||
.u-button--plain{
|
||||
background-color: transparent !important;
|
||||
}
|
||||
/* 卡片线 */
|
||||
.u-collapse > .u-line{border: none !important;}
|
||||
/* 列表 */
|
||||
.u-collapse-item {
|
||||
&>.u-line {
|
||||
.u-collapse-item > .u-line {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* fixed */
|
||||
@ -47,7 +50,10 @@
|
||||
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;}
|
||||
/* 字体颜色 */
|
||||
.font-red {
|
||||
color: #e60012;
|
||||
@ -70,35 +76,25 @@
|
||||
box-shadow: 0 1px 9px rgb(209, 209, 209, 0.5);
|
||||
}
|
||||
|
||||
.card-grey {
|
||||
background-color: #f3f3f3;
|
||||
.card-grey {background-color: #f3f3f3;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.card-grey {
|
||||
.card-title {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #c7c7c7;
|
||||
|
||||
.icon {
|
||||
color: #39ac4f;
|
||||
}
|
||||
|
||||
.u-row {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.control {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.buttons {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.card-grey .card-title {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #dedede;
|
||||
}
|
||||
|
||||
.card-grey .card-title .icon {
|
||||
color: #39ac4f;
|
||||
}
|
||||
|
||||
.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;}
|
||||
|