init:first commit of plus-ui

src/views/gisHome/component/carousel.vue

@@ -0,0 +1,148 @@
+<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>
+console.log(window.innerWidth);
+</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>