laboratory_maintenance_app/pages/home/components/swiper.vue

<template>
  <view v-if="list.length > 0">
    <view class="work-title">实验室巡检</view>
    <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>
  </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">
.work-title {
  color: rgba(16, 16, 16, 1);
  font-size: 32rpx;
  padding: 0 0 32rpx 36rpx;
}

.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: 200rpx;
    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>