td_official/src/views/gisHome/component/carousel.vue

<template>
  <div class="carousel">
    <div class="title">
      <div class="flex items-center">
        <img src="@/assets/images/ligner.png" alt="" />
        <div class="flex justify-between w100% items-center">
          <div class="subTitle flex items-center">
            <img src="@/assets/images/robot-line.png" alt="" />
            <span>AI安全巡检</span>
          </div>
          <div class="hint">AI SAFETY INSPECTION</div>
        </div>
        <div class="mark"></div>
      </div>
    </div>
    <div class="carousellist flex items-center">
      <div>
        <img src="@/assets/images/toleft.png" alt="" />
      </div>
      <div class="carouselcontainer flex justify-between">
        <div class="carouselItem flex flex-col justify-between" v-for="item in 5">
          <img src="@/assets/images/carousel.png" alt="" />
          <div class="time">03-18 15:00</div>
          <div class="remark">未佩戴安全帽</div>
        </div>
      </div>
      <div>
        <img src="@/assets/images/toright.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup></script>

<style lang="scss" scoped>
@import '../css/gis.scss';

.carousel {
  width: vw(907);
  height: vh(167);
  background-color: rgba(8, 14, 15, 0.3);
  backdrop-filter: blur(vw(4));
  position: absolute;
  bottom: vh(31);
  left: vw(507);
  padding-top: vh(10);
  z-index: 2;
}

.carousellist {
  margin-top: vh(16);
  padding: 0 vw(23);
  width: 100%;
  height: vh(84);

  > div > img {
    width: vw(20);
    cursor: pointer;
  }

  .carouselcontainer {
    flex: 1;
    height: 100%;
    margin: 0 vw(13);

    .carouselItem {
      font-size: vw(12);
      color: #fff;
      width: vw(133);
      position: relative;

      .time {
        text-align: right;
        margin-right: vw(3);

        font-family: 'D-Din';
      }

      .remark {
        text-align: center;
        height: vh(21);
        line-height: vh(21);
        font-family: '思源黑体';
        background: rgba(0, 0, 0, 0.5);
        margin-right: vw(3);
      }

      img {
        width: 100%;
        height: 100%;
        position: absolute;
        object-fit: cover;
        top: 0;
        left: 0;
        z-index: -1;
      }
    }
  }
}

.title {
  > div {
    > img {
      width: vw(14);
      height: vh(35);
      margin-right: vw(8);
    }
  }

  .subTitle {
    img {
      width: vw(18.8);
      margin-right: vw(10);
    }

    span {
      text-shadow: 0 0 vw(8) rgba(2, 3, 7, 0.35);
      font-size: vw(20);
      font-weight: 500;
      letter-spacing: 0;
      color: rgba(255, 255, 255, 1);
    }
  }

  .hint {
    font-size: vw(14);
    font-weight: 400;
    color: rgba(204, 204, 204, 0.5);
    margin-right: vw(20);
  }

  .mark {
    width: vw(2);
    height: vh(14);
    background: rgba(67, 226, 203);
    margin-right: vw(10);
  }

  .ligner {
    height: vh(1);
    background: linear-gradient(to right, transparent 0%, #43e2cb 90%);
    margin-left: vw(14);
  }
}
</style>