laboratory_maintenance_app/pages/home/components/swiper.vue

<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=>{
        console.log(1111111111111,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>