123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144 |
- <template>
- <view class="home">
- <view class="list-area" v-for="item in dataList" :key="item.id">
- <u-cell :isLink="true">
- <view slot="title" class="u-slot-title">
- <i class="iconfont icon-shijian"></i>
- <text>{{item.updateTime}}</text>
- </view>
- <view slot="label" class="u-slot-label">
- <text class="list-name">设备:{{item.name}}</text>
- <text class="list-status">{{item.status | statusFilter}}</text>
- </view>
- </u-cell>
- </view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- name:"zzzzzssd78",
- dataList:[
- {
- id:1,
- name:"23242524",
- status:0,
- updateTime:"2022-2-2 18:20"
- },
- {
- id:2,
- name:"34dsvsdf2",
- status:1,
- updateTime:"2022-3-2 18:20"
- },
- {
- id:3,
- name:"34dsvsdf2",
- status:1,
- updateTime:"2022-3-2 18:20"
- },
- {
- id:4,
- name:"34dsvsdf2",
- status:1,
- updateTime:"2022-3-2 18:20"
- },
- {
- id:5,
- name:"34dsvsdf2",
- status:1,
- updateTime:"2022-3-2 18:20"
- },
- {
- id:6,
- name:"34dsvsdf2",
- status:1,
- updateTime:"2022-3-2 18:20"
- },
- {
- id:7,
- name:"34dsvsdf2",
- status:1,
- updateTime:"2022-3-2 18:20"
- },
- {
- id:8,
- name:"34dsvsdf2",
- status:1,
- updateTime:"2022-3-2 18:20"
- },
- {
- id:9,
- name:"34dsvsdf2",
- status:1,
- updateTime:"2022-3-2 18:20"
- },
- {
- id:10,
- name:"34dsvsdf2",
- status:1,
- updateTime:"2022-3-2 18:20"
- }
- ]
- };
- },
- filters:{
- statusFilter(val){
- let status;
- switch(val){
- case 0:
- status = "借用中"
- break;
- case 1:
- status = "已归还"
- break;
- default:
- status = "请联系管理员"
- break;
- }
- return status;
- }
- }
- }
- </script>
- <style lang="scss">
- page{
- background-color: #eae9e9;
- }
- .home{
- width: 100%;
- height: 100%;
- padding:20rpx 30rpx;
- background-color: #eae9e9;
- box-sizing: border-box;
- .ul-area{
- padding: 20rpx 30rpx 0;
- box-sizing: border-box;
- }
- }
- .list-area{
- background-color: $uni-bg-color;
- margin: 0 0 20rpx 0;
- line-height: 150%;
- .u-slot-title{
- display: flex;
- align-items: center;
- .iconfont{
- margin-right: 20rpx;
- font-size: 38rpx;
- font-weight: bold;
- }
- }
- .u-slot-label{
- position: relative;
- .list-status{
- position: absolute;
- right: 140rpx;
- }
- }
- }
- </style>
|