You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
120 lines
2.4 KiB
120 lines
2.4 KiB
<template> |
|
<view class="notice_bg"> |
|
<view class="line"></view> |
|
<swiper |
|
autoplay="true" |
|
display-multiple-items="1" |
|
vertical="true" |
|
circular |
|
interval="7000" |
|
class="bar-swiper" |
|
> |
|
<swiper-item |
|
v-for="(item, index) in list" |
|
:key="index" |
|
class="swiper-item" |
|
> |
|
<view class="title">{{ item.inspectionName }}</view> |
|
<view class="time">巡检计划时间:{{ item.inspectionTime }}</view> |
|
<view class="name">巡检人:{{ item.inspectionPerson }}</view> |
|
<view class="status"> |
|
<i class="status-name">{{ item.isStart==1?'已开始':'未开始' }}</i><i>预约时间：{{ item.appointTime }}</i> |
|
</view> |
|
<view class="type">{{ item.taskType==1?'周期任务':'单次任务' }}</view> |
|
</swiper-item> |
|
</swiper> |
|
</view> |
|
</template> |
|
<script> |
|
export default { |
|
data() { |
|
return { |
|
list: [ |
|
|
|
], |
|
}; |
|
}, |
|
mounted(){ |
|
this.workList() |
|
}, |
|
methods: { |
|
// 点击通告栏 |
|
click(id) { |
|
// console.log(id, "======>id"); |
|
}, |
|
workList(){ |
|
this.$u.api.workList().then(res=>{ |
|
if(res.code == 200){ |
|
this.list = res.data |
|
} |
|
|
|
}) |
|
} |
|
}, |
|
}; |
|
</script> |
|
<style scoped lang="scss"> |
|
.notice_bg { |
|
margin: 0 40rpx 32rpx; |
|
background-color: #ffffff; |
|
border-radius: 20rpx; |
|
padding: 16rpx 20rpx; |
|
display: flex; |
|
align-items: center; |
|
position: relative; |
|
.icon { |
|
width: 74rpx; |
|
height: 72rpx; |
|
} |
|
|
|
.bar-swiper { |
|
font-size: 24rpx; |
|
font-family: PingFangSC-Regular, PingFang SC; |
|
font-weight: 400; |
|
color: rgba(34, 34, 34, 0.5); |
|
height: 260rpx; |
|
display: flex; |
|
align-items: center; |
|
flex: 1; |
|
margin-left: 12rpx; |
|
} |
|
.swiper-item { |
|
overflow: hidden; |
|
} |
|
|
|
// 内容样式 |
|
.title { |
|
font-size: 32rpx; |
|
color: rgba(16, 16, 16, 1); |
|
text-align: left; |
|
margin-top: 22rpx; |
|
line-height: 38rpx; |
|
} |
|
.time { |
|
margin-top: 20rpx; |
|
margin-bottom: 28rpx; |
|
} |
|
.time, |
|
.name { |
|
font-size: 26rpx; |
|
color: rgba(108, 108, 108, 1); |
|
line-height: 38rpx; |
|
} |
|
.status { |
|
font-size: 26rpx; |
|
line-height: 38rpx; |
|
margin-top: 20rpx; |
|
.status-name { |
|
color: rgba(58, 98, 215, 1); |
|
padding-right: 10rpx; |
|
} |
|
} |
|
.type{ |
|
position: absolute; |
|
top: 20rpx; |
|
right: 20rpx; |
|
color: rgba(58, 98, 215, 1); |
|
font-size: 26rpx; |
|
} |
|
} |
|
</style> |