|
|
@@ -0,0 +1,179 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <u-navbar title="设备信息" title-color="#101010"></u-navbar>
|
|
|
+ <!-- 下拉框 -->
|
|
|
+ <view class="dropdown">
|
|
|
+ <view class="dropdown-item" @click="show1=true">
|
|
|
+ {{device}} <u-icon name="arrow-down" color="#999999" v-if="show1==false" ></u-icon>
|
|
|
+ <u-icon name="arrow-up" color="#999999" v-else></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="dropdown-item" @click="show2=true">
|
|
|
+ {{company}} <u-icon name="arrow-down" color="#999999" v-if="show2==false"></u-icon>
|
|
|
+ <u-icon name="arrow-up" color="#999999" v-else></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <u-select v-model="show1" mode="single-column" :list="deviceList" ></u-select>
|
|
|
+
|
|
|
+ <u-select v-model="show2" mode="single-column" :list="companyList" ></u-select>
|
|
|
+
|
|
|
+ <!-- 设备信息 -->
|
|
|
+ <view class="infos-content">
|
|
|
+ <view class="item" >
|
|
|
+ <view class="item-icon">
|
|
|
+ <image class="img" src="@/assets/img/energy1.svg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="item-name">
|
|
|
+ <view class="name1">
|
|
|
+ 楚之源费控电表
|
|
|
+ </view>
|
|
|
+ <view class="name2">
|
|
|
+ 智能费控电量计量仪
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="more">
|
|
|
+ <u-icon name="arrow-right" color="#acacac" size="28"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item" >
|
|
|
+ <view class="item-icon">
|
|
|
+ <image class="img" src="@/assets/img/transformer2.svg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="item-name">
|
|
|
+ <view class="name1">
|
|
|
+ 鹏育优电专变
|
|
|
+ </view>
|
|
|
+ <view class="name2">
|
|
|
+ 变压器智能监控及巡检仪
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="more">
|
|
|
+ <u-icon name="arrow-right" color="#acacac" size="28"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 底部 -->
|
|
|
+ <view class="bottom">
|
|
|
+ <button class="scan" >
|
|
|
+ <image class="img" src="@/assets/img/riLine-qr-scan-2-line.svg" mode=""></image>
|
|
|
+ 扫码识别</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ device: '全部设备',
|
|
|
+ company: '全部公司',
|
|
|
+ show1: false, // 设备选择
|
|
|
+ show2: false, // 状态选择
|
|
|
+ deviceList: [
|
|
|
+ {label: '全部设备', value: ''},
|
|
|
+ {label: '设备1', value: '0'},
|
|
|
+ {label: '设备2', value: '1'},
|
|
|
+ {label: '设备3', value: '2'},
|
|
|
+ {label: '设备4', value: '3'},
|
|
|
+ {label: '设备5', value: '4'}
|
|
|
+ ],
|
|
|
+ companyList: [
|
|
|
+ {label: '全部公司', value: ''},
|
|
|
+ {label: '公司1', value: '0'},
|
|
|
+ {label: '公司2', value: '1'},
|
|
|
+ {label: '公司3', value: '2'},
|
|
|
+ {label: '公司4', value: '3'},
|
|
|
+ {label: '公司5', value: '4'}
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ page{
|
|
|
+ padding-bottom: 100px;
|
|
|
+ }
|
|
|
+ // 下拉框
|
|
|
+ .dropdown {
|
|
|
+ background-color: #fff;
|
|
|
+ position: sticky;
|
|
|
+ top: 88rpx;
|
|
|
+ z-index: 999;
|
|
|
+ padding: 18rpx 46rpx;
|
|
|
+ display: flex;
|
|
|
+ border-bottom: 1px solid rgba(245, 245, 245, 1);
|
|
|
+ .dropdown-item{
|
|
|
+ width: 50%;
|
|
|
+ text-align: center;
|
|
|
+ height: 60rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 设备信息
|
|
|
+ .infos-content{
|
|
|
+ background-color: #fff;
|
|
|
+ .item{
|
|
|
+ padding: 24rpx 32rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px solid rgba(245,245,245,1);
|
|
|
+ .item-icon{
|
|
|
+ width: 72rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(219,234,255,1);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ .img{
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-name{
|
|
|
+ margin-left: 30rpx;
|
|
|
+ name1{
|
|
|
+ color: rgba(51,51,51,1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ .name2{
|
|
|
+ color: rgba(119,119,119,1);
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .more{
|
|
|
+ margin-left: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // 底部
|
|
|
+ .bottom{
|
|
|
+ background-color: rgba(255,255,255,1);
|
|
|
+ border: 1px solid rgba(232,232,232,1);
|
|
|
+ padding: 24rpx 32rpx;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ .scan{
|
|
|
+ color: rgba(255,255,255,1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: 50px;
|
|
|
+ background: linear-gradient(-88.46deg, rgba(34,109,198,1) 2.59%,rgba(9,158,237,1) 97.02%);
|
|
|
+ .img{
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
