123

src/components/Trumbs/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="trumbs_container">
     <swiper
-      :slidesPerView="7"
+      :slidesPerView="9"
       :freeMode="true"
       :modules="modules"
       :autoHeight="true"
@@ -78,7 +78,6 @@ const onSwiper = swiper => {
     height: 108px;
     position: relative;
     .img {
-      // width: 100%;
       width: 194px;
     }
     .dialog_text {

src/views/Index/components/CaseDetails/index.vue

@@ -186,8 +186,8 @@ const mouseleave = function () {
               }
             }
             .header_intro {
-              min-height: 80px;
-              padding: 26px 43px;
+              height: 80px;
+              padding: 0 43px;
               display: flex;
               justify-content: space-between;
               align-items: center;
@@ -195,6 +195,7 @@ const mouseleave = function () {
               font-family: DFPYuanW7-GB;
               box-sizing: border-box;
               font-weight: 400;
+              z-index: 333;
               background: linear-gradient(90deg, #283fe7, #4b17e1);
               color: #fafafa;
               .p_text {
@@ -208,6 +209,7 @@ const mouseleave = function () {
             flex: 1;
             position: relative;
             height: 656px;
+            z-index: 999;
             .right_detail {
               transition-property: all;
               transition-duration: 0.7s;
@@ -216,6 +218,7 @@ const mouseleave = function () {
               top: 0;
               right: 0;
               flex: 1;
+              z-index: 999;
               overflow: scroll;
               z-index: 100;
               height: 100%;
@@ -224,12 +227,12 @@ const mouseleave = function () {
               overflow-x: auto;
               .detail_header {
                 position: sticky;
-                z-index: 999;
                 top: 0;
                 left: 0;
                 right: 0;
                 width: 100%;
-                padding: 30px 25px;
+                padding: 0 25px;
+                height: 80px;
                 background: linear-gradient(90deg, #283fe7, #4b17e1);
                 font-size: 20px;
                 font-family: DFPYuanW7-GB;
@@ -253,6 +256,7 @@ const mouseleave = function () {
               .article {
                 min-height: 100%;
                 background: #fff;
+                z-index: 222;
                 .card_container {
                   background: linear-gradient(#f9f9f9, #fff);
                 }

src/views/Index/components/IntroVideo/index.vue

@@ -1,37 +1,22 @@
 <template>
   <div class="intro_video_container">
-    <div class="init_bg">
-      <div class="play_btn" @click="showDialog">
-        <img :src="Play" class="play" alt="" />
-      </div>
-    </div>
-    <div class="dialog_black" v-if="dialogVisible">
-      <div class="video_dialog">
-        <!-- <p class="close" @click="cancleDialog">
-          <img :src="Close" class="img_c" alt="" />
-        </p> -->
-        <video controls style="width: 100%; height: 100%; object-fit: fill">
-          <source :src="Movie" />
-        </video>
-        <!-- <Video :videoUrl="Movie" :autoPlay="true" /> -->
-      </div>
-    </div>
+    <video
+      controls
+      style="width: 100%; height: 100%; object-fit: fill"
+      controlslist="nodownload"
+      :loop="true"
+      :poster="Play"
+      :autoplay="true"
+      :muted="true"
+    >
+      <source :src="Movie" />
+    </video>
   </div>
 </template>
 
 <script setup>
-import Play from '@/assets/img/intro/play.png'
-// import Close from '@/assets/img/intro/close.png'
+import Play from '@/assets/img/intro/bg.jpg'
 import Movie from '@/assets/a.m4v'
-import Video from 'cpns/Video'
-import { ref } from 'vue'
-const dialogVisible = ref(false)
-const showDialog = () => {
-  dialogVisible.value = true
-}
-const cancleDialog = e => {
-  dialogVisible.value = false
-}
 </script>
 
 <style lang="scss" scoped>
@@ -39,57 +24,5 @@ const cancleDialog = e => {
   width: 100%;
   height: 100%;
   position: relative;
-  background: url(../../../../assets/img/intro/bg.JPG) no-repeat;
-  background-size: 100% 100%;
-  .init_bg {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: rgb(0, 0, 0, 0.68);
-    .play_btn {
-      width: 100px;
-      height: 100px;
-      cursor: pointer;
-      .play {
-        width: 100px;
-        height: 100px;
-      }
-    }
-  }
-
-  .dialog_black {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    background: rgba(0, 0, 0, 0.8);
-    width: 100%;
-    height: 100%;
-    left: 0;
-    right: 0;
-    top: 0;
-    .video_dialog {
-      width: 100vw;
-      height: auto;
-      position: relative;
-      .close {
-        position: absolute;
-        right: -50px;
-        top: 0;
-        width: 30px;
-        height: 30px;
-        cursor: pointer;
-        .img_c {
-          width: 30px;
-          height: 30px;
-        }
-      }
-    }
-  }
 }
 </style>