.
This commit is contained in:
Iruka
parent
cef307048e
commit
a3c9f1ce94
263
pages/index.vue
263
pages/index.vue
@ -13,6 +13,7 @@
|
||||
</uni-nav-bar>
|
||||
<custom-select-land ref="refLand" :data="landList" @select=""></custom-select-land>
|
||||
<view class="content">
|
||||
<!-- 顶部搜索框 -->
|
||||
<view class="header-section">
|
||||
<u-row justify="space-between" gutter="10">
|
||||
<u-col span="8">
|
||||
@ -28,6 +29,7 @@
|
||||
</u-row>
|
||||
</view>
|
||||
<view class="content-section">
|
||||
<!-- 统计吸顶效果 -->
|
||||
<view v-if="isSticky" class="grey-box ceiling"
|
||||
:style="[isSticky ? 'position: sticky;':'','z-index: 10','top: 50px']">
|
||||
<u-grid :border="false" col="4">
|
||||
@ -81,7 +83,9 @@
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</view>
|
||||
<!-- 列表 -->
|
||||
<view class="grey-box" style="border-radius: 0 0 15px 15px;">
|
||||
<!-- 基站 -->
|
||||
<view class="card">
|
||||
<u-collapse accordion>
|
||||
<u-collapse-item>
|
||||
@ -174,6 +178,7 @@
|
||||
|
||||
</u-collapse>
|
||||
</view>
|
||||
<!-- 阀门列表 -->
|
||||
<view class="card">
|
||||
<u-collapse accordion>
|
||||
<u-collapse-item>
|
||||
@ -186,6 +191,7 @@
|
||||
</view>
|
||||
</template>
|
||||
<view class="u-collapse-content">
|
||||
<!-- 蝶阀 -->
|
||||
<u-row>
|
||||
<u-col span="4">
|
||||
<view class="fixed">
|
||||
@ -205,6 +211,7 @@
|
||||
activeColor="#39ac4f"></u-switch>
|
||||
</u-col>
|
||||
</u-row>
|
||||
<!-- 阀门 -->
|
||||
<view class="card-grey">
|
||||
<view class="card-title">
|
||||
<u-row>
|
||||
@ -233,7 +240,7 @@
|
||||
</view>
|
||||
<view class="control">
|
||||
<u-row>
|
||||
<u-col span="3" style=" align-items: flex-end;">
|
||||
<u-col span="3" style=" align-items: flex-end;" @click="showAnglePopupel">
|
||||
<view class="buttons">
|
||||
<view class="btn fixed active">
|
||||
<text>①</text>
|
||||
@ -241,60 +248,10 @@
|
||||
<view class="iconfont icon-suoding icon"></view>
|
||||
</view>
|
||||
</view>
|
||||
<u-line-progress height="8" :showText="false" :percentage="60" activeColor="#74ffd4"
|
||||
inactiveColor="#c7c7c7" style="width: 75px;margin-top: 5px;"
|
||||
@click="show = true">
|
||||
<u-line-progress height="8" :showText="false" :percentage="60"
|
||||
activeColor="#74ffd4" inactiveColor="#c7c7c7"
|
||||
style="width: 75px;margin-top: 5px;">
|
||||
</u-line-progress>
|
||||
<view>
|
||||
<u-popup :show="show" :mode="mode">
|
||||
<view class="dialog-container">
|
||||
<view class="dialog-title">
|
||||
<view>1-2</view>
|
||||
<view>①开</view>
|
||||
<view class="close-btn">
|
||||
<u-icon name="close" color="#333"
|
||||
size="20"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="dialog-body">
|
||||
<view class="grid">
|
||||
<view class="grid-time">
|
||||
<view>-</view>
|
||||
</view>
|
||||
<view class="grid-time">
|
||||
<view class="logs-data-box">
|
||||
<view class="content" style="height: 100%;">
|
||||
<view>
|
||||
<view style="text-align: center;">
|
||||
52%</view>
|
||||
<view style="width: 100%;">
|
||||
<u-slider :value="value"
|
||||
height="100" blockSize="28"
|
||||
min="0" max="100"
|
||||
activeColor="#15d99b"
|
||||
:step="step"
|
||||
:showValue="false"
|
||||
@changing="changing"
|
||||
@change="change"></u-slider>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="grid-time">
|
||||
<view>+</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="buttons">
|
||||
<u-button type="success" size="large"
|
||||
text="确定"></u-button>
|
||||
<u-button type="info" size="large"
|
||||
text="取消"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</u-col>
|
||||
<u-col span="6">
|
||||
<view class="valve">
|
||||
@ -341,7 +298,7 @@
|
||||
<view class="card-title">
|
||||
<u-row>
|
||||
<u-col span="2">
|
||||
<view><text class="font-green">●</text>1-1</view>
|
||||
<view><text class="font-green">●</text>1-2</view>
|
||||
</u-col>
|
||||
<u-col span="5">
|
||||
<view class="fixed">
|
||||
@ -420,6 +377,12 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 弹窗 -->
|
||||
<view>
|
||||
<!-- 角度 -->
|
||||
<angle-progress-bar ref="angleBarRef" mode="bottom" @close="" @confirm="swiperConfirm" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -432,6 +395,7 @@
|
||||
show: false,
|
||||
landList: [1, 2, 3],
|
||||
value: false,
|
||||
sliderValue: 1,
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
@ -465,6 +429,15 @@
|
||||
})
|
||||
},
|
||||
toQRCode() {},
|
||||
showAnglePopupel() {
|
||||
this.$refs.angleBarRef.show("1-1", "①开", 10, {
|
||||
// item: e.row,
|
||||
// index: e.index,
|
||||
});
|
||||
},
|
||||
swiperConfirm(e) {
|
||||
console.error("swiperConfirm:", e);
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -829,113 +802,115 @@
|
||||
}
|
||||
|
||||
/* 弹出进度条 */
|
||||
.dialog-container {
|
||||
min-width: 300px;
|
||||
// .dialog-container {
|
||||
// min-width: 300px;
|
||||
|
||||
.dialog-title {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
// .dialog-title {
|
||||
// position: relative;
|
||||
// text-align: center;
|
||||
// height: 34px;
|
||||
// line-height: 34px;
|
||||
// border-bottom: 1px solid #ddd;
|
||||
|
||||
&>uni-view {
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
// &>uni-view {
|
||||
// display: inline-block;
|
||||
// font-weight: bold;
|
||||
// font-size: 16px;
|
||||
// }
|
||||
|
||||
&>uni-view:nth-child(2) {
|
||||
font-size: 14px;
|
||||
color: #5bc724;
|
||||
margin-left: 10px;
|
||||
}
|
||||
// &>uni-view:nth-child(2) {
|
||||
// font-size: 14px;
|
||||
// color: #5bc724;
|
||||
// margin-left: 10px;
|
||||
// }
|
||||
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
// .close-btn {
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// right: 10px;
|
||||
// transform: translateY(-50%);
|
||||
// }
|
||||
|
||||
|
||||
}
|
||||
movable-area {
|
||||
// }
|
||||
|
||||
height: 30rpx;
|
||||
width: 210px;
|
||||
margin: auto;
|
||||
border-radius: 5px;
|
||||
background-color: #D8D8D8;
|
||||
overflow: hidden;
|
||||
}
|
||||
// movable-area {
|
||||
|
||||
movable-view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// height: 30rpx;
|
||||
// width: 210px;
|
||||
// margin: auto;
|
||||
// border-radius: 5px;
|
||||
// background-color: #D8D8D8;
|
||||
// overflow: hidden;
|
||||
// }
|
||||
|
||||
width: 10px;
|
||||
height: 100%;
|
||||
background-color: #15d99b;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
// movable-view {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
|
||||
::v-deep .uni-slider-handle-wrapper {
|
||||
height: 30px !important;
|
||||
}
|
||||
// width: 10px;
|
||||
// height: 100%;
|
||||
// background-color: #15d99b;
|
||||
// color: #fff;
|
||||
// text-align: center;
|
||||
// }
|
||||
|
||||
// ::v-deep .uni-slider-handle-wrapper {
|
||||
// height: 30px !important;
|
||||
// }
|
||||
|
||||
|
||||
::v-deep .uni-slider-thumb {
|
||||
width: 24px !important;
|
||||
height: 24px !important;
|
||||
box-shadow: 0 0 0px 4px #74ffd4 !important;
|
||||
margin-top: -12px !important;
|
||||
}
|
||||
// ::v-deep .uni-slider-thumb {
|
||||
// width: 24px !important;
|
||||
// height: 24px !important;
|
||||
// box-shadow: 0 0 0px 4px #74ffd4 !important;
|
||||
// margin-top: -12px !important;
|
||||
// }
|
||||
|
||||
::v-deep uni-slider {
|
||||
margin: 10px 18px 0 18px !important;
|
||||
}
|
||||
// ::v-deep uni-slider {
|
||||
// margin: 10px 18px 0 18px !important;
|
||||
// }
|
||||
|
||||
::v-deep uni-slider .uni-slider-tap-area {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.dialog-body {
|
||||
.grid {
|
||||
margin: 20px;
|
||||
display: grid;
|
||||
grid-template-columns: 0.5fr 2fr 0.5fr;
|
||||
// ::v-deep uni-slider .uni-slider-tap-area {
|
||||
// padding: 0 !important;
|
||||
// }
|
||||
|
||||
.grid-time:first-child,
|
||||
.grid-time:last-child {
|
||||
display: grid;
|
||||
justify-items: end;
|
||||
align-items: end;
|
||||
// .dialog-body {
|
||||
// .grid {
|
||||
// margin: 20px;
|
||||
// display: grid;
|
||||
// grid-template-columns: 0.5fr 2fr 0.5fr;
|
||||
|
||||
&>uni-view {
|
||||
width: 35px;
|
||||
height: 30px;
|
||||
background-color: #eaecf0;
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
line-height: 26px;
|
||||
color: #564556;
|
||||
}
|
||||
}
|
||||
// .grid-time:first-child,
|
||||
// .grid-time:last-child {
|
||||
// display: grid;
|
||||
// justify-items: end;
|
||||
// align-items: end;
|
||||
|
||||
.grid-time:last-child {
|
||||
justify-items: left;
|
||||
// &>uni-view {
|
||||
// width: 35px;
|
||||
// height: 30px;
|
||||
// background-color: #eaecf0;
|
||||
// text-align: center;
|
||||
// font-size: 30px;
|
||||
// line-height: 26px;
|
||||
// color: #564556;
|
||||
// }
|
||||
// }
|
||||
|
||||
}
|
||||
}
|
||||
// .grid-time:last-child {
|
||||
// justify-items: left;
|
||||
|
||||
.buttons {
|
||||
margin: 40px 10px 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
// }
|
||||
// }
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
// .buttons {
|
||||
// margin: 40px 10px 10px;
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user