143 lines
3.3 KiB
Vue
143 lines
3.3 KiB
Vue
<template>
|
|
<div class="AppEquipment">
|
|
<AiTopFixed>
|
|
<div class="currentLeft-top">
|
|
<div class="left">
|
|
<AiAreaPicker v-model="areaId" :areaId="user.areaId" @select="areaSelect" :name.sync="areaName" selectRoot>
|
|
<span class="label" v-if="areaName">{{ areaName }}</span>
|
|
<span v-else>请选择</span>
|
|
<u-icon name="arrow-down" color="#666" size="24" style="margin-left: 4px" />
|
|
</AiAreaPicker>
|
|
</div>
|
|
<u-search v-model="keyword" :clearabled="true" placeholder="请输入设备名称" :show-action="false" bg-color="#F5F5F5" search-icon-color="#ccc" color="#666" height="58" @search="getList" @clear="handerClear"></u-search>
|
|
</div>
|
|
</AiTopFixed>
|
|
<div class="record">
|
|
<div class="item" @click="toDetail">
|
|
<img src="../img/lb@2x.png" alt="" class="voice-img">
|
|
<div class="info">
|
|
<div class="text">
|
|
<p>村头大喇叭</p>
|
|
<span>刘家河居委会</span>
|
|
</div>
|
|
<div class="status">在线</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<img src="../img/lb@2x.png" alt="" class="voice-img">
|
|
<div class="info">
|
|
<div class="text">
|
|
<p>村头大喇叭</p>
|
|
<span>刘家河居委会</span>
|
|
</div>
|
|
<div class="status">在线</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { mapState } from 'vuex'
|
|
export default {
|
|
name: "AppEquipment",
|
|
data() {
|
|
return {
|
|
areaId: '',
|
|
areaName: '',
|
|
keyword: ''
|
|
}
|
|
},
|
|
computed: { ...mapState(['user']) },
|
|
onLoad(option) {
|
|
this.areaId = this.user.areaId
|
|
this.areaName = this.user.areaName
|
|
},
|
|
methods: {
|
|
areaSelect(e) {
|
|
this.areaId = e
|
|
// this.getList()
|
|
},
|
|
toDetail(item) {
|
|
uni.navigateTo({url: `./detail`})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.AppEquipment {
|
|
|
|
.currentLeft-top {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.left {
|
|
width: 200px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
img {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
}
|
|
}
|
|
.record {
|
|
margin-top: 8px;
|
|
padding-left: 32px;
|
|
background-color: #fff;
|
|
|
|
.item {
|
|
width: 100%;
|
|
display: flex;
|
|
border-bottom: 1px solid #ddd;
|
|
|
|
.check-img {
|
|
width: 44px;
|
|
height: 44px;
|
|
margin: 32px 32px 0 0;
|
|
}
|
|
|
|
.voice-img {
|
|
width: 48px;
|
|
height: 48px;
|
|
margin: 28px 16px 0 0;
|
|
}
|
|
|
|
.info {
|
|
width: calc(100% - 160px);
|
|
padding: 18px 0;
|
|
line-height: 44px;
|
|
font-size: 34px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.text {
|
|
p {
|
|
font-family: PingFang-SC-Medium, PingFang-SC;
|
|
font-weight: 500;
|
|
color: #333;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
span {
|
|
font-size: 26px;
|
|
font-family: PingFang-SC-Medium, PingFang-SC;
|
|
font-weight: 500;
|
|
color: #999;
|
|
line-height: 36px;
|
|
}
|
|
}
|
|
|
|
.status {
|
|
font-size: 34px;
|
|
font-family: PingFang-SC-Medium, PingFang-SC;
|
|
font-weight: 500;
|
|
color: #4E8EEE;
|
|
line-height: 48px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|