Files

117 lines
2.9 KiB
Vue

<template>
<view>
<scroll-view scroll-y class="page">
<cu-custom bgColor="bg-cyan" :isBack="true"><block slot="backText">返回</block><block slot="content">异常预警</block></cu-custom>
<view class="cu-bar bg-white solid-bottom">
<view class="action">
<text class="cuIcon-title text-green"></text>
<text>异常预警</text>
</view>
</view>
<view class="cu-list menu" :class="[menuBorder?'sm-border':'',menuCard?'card-menu margin-top':'']">
<view class="cu-item" :class="menuArrow?'arrow':''" @click="onListOne">
<view class="content">
<text class="cuIcon-warn text-green"></text>
<text class="text-grey text-custom">出库超时</text>
</view>
</view>
<view class="cu-list menu-avatar" :class="itemShow?'show':'no-show'">
<view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://lekapi.opmonitor.com/static/image/medical.jpg);"></view>
<view class="content">
<view class="text-grey">编号</view>
<view class="text-gray text-sm flex">
<view class="text-cut">
1234567890
</view>
</view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
</view>
</view>
</view>
<view class="cu-item" :class="menuArrow?'arrow':''" @click="onListTwo">
<view class="content">
<text class="cuIcon-warn text-green"></text>
<text class="text-grey text-custom">重量异常</text>
</view>
</view>
<view class="cu-list menu-avatar" :class="itemShow2?'show':'no-show'">
<view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(/static/medical.jpg);"></view>
<view class="content">
<view class="text-grey">编号</view>
<view class="text-gray text-sm flex">
<view class="text-cut">
2413587216
</view>
</view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
</view>
</view>
</view>
<view class="cu-item" :class="menuArrow?'arrow':''">
<view class="content">
<text class="cuIcon-warn text-green"></text>
<text class="text-grey text-custom">入库超时</text>
</view>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
menuBorder: false,
menuCard: false,
menuArrow: true,
menuArrowList: false,
itemShow: false,
itemShow2: false
}
},
methods: {
onListOne() {
if (this.itemShow === true) {
this.itemShow = false
} else {
this.itemShow = true
}
},
onListTwo() {
if (this.itemShow2 === true) {
this.itemShow2 = false
} else {
this.itemShow2 = true
}
}
}
}
</script>
<style>
.page {
width: 100vw;
height: 100Vh;
}
.text-custom {
font-weight: 600;
font-size: 30rpx;
}
.show {
display: block;
}
.no-show {
display: none;
}
</style>