123

package.json

@@ -19,6 +19,7 @@
     "swiper": "^9.0.0",
     "vue": "^3.2.45",
     "vue-router": "^4.0.13",
+    "vue3-marquee": "^3.1.2",
     "vue3-video-play": "^1.3.1-beta.6"
   },
   "devDependencies": {

src/common/utils.js

@@ -84,22 +84,22 @@ const handleContactUs = (id, scale) => {
 }
 
 const handleSwiper = (id, scale) => {
-  if (id == '#case_picture') {
-    document.querySelector('#wrapper_case_picture_id').style[
-      'transform-origin'
-    ] = 'center top'
-    document.getElementById(
-      'wrapper_case_picture_id',
-    ).style.transform = `scale(${1 / scale})`
-  }
-  if (id == '#hardware_picture_list') {
-    document.querySelector('#hardware_swiper_scale_id').style[
-      'transform-origin'
-    ] = 'center top'
-    document.getElementById(
-      'hardware_swiper_scale_id',
-    ).style.transform = `scale(${1 / scale})`
-  }
+  // if (id == '#case_picture') {
+  //   document.querySelector('#wrapper_case_picture_id').style[
+  //     'transform-origin'
+  //   ] = 'center top'
+  //   document.getElementById(
+  //     'wrapper_case_picture_id',
+  //   ).style.transform = `scale(${1 / scale})`
+  // }
+  // if (id == '#hardware_picture_list') {
+  //   document.querySelector('#hardware_swiper_scale_id').style[
+  //     'transform-origin'
+  //   ] = 'center top'
+  //   document.getElementById(
+  //     'hardware_swiper_scale_id',
+  //   ).style.transform = `scale(${1 / scale})`
+  // }
 }
 
 const handleCooperation = (id, scale) => {

src/style.scss

@@ -175,54 +175,3 @@ body {
   stroke-dashoffset: calc(480 * (1 - var(--progress)));
   stroke-dasharray: 480;
 }
-
-/*Plugin CSS*/
-.str_wrap {
-  overflow: hidden;
-  width: 100%;
-  position: relative;
-  -moz-user-select: none;
-  -khtml-user-select: none;
-  user-select: none;
-  white-space: nowrap;
-}
-
-.str_wrap.str_active {
-}
-.str_move {
-  display: flex;
-  position: absolute;
-  height: 100%;
-  top: 0;
-  left: 0;
-  cursor: move;
-}
-.str_move_clone {
-  display: inline-block;
-  display: flex;
-  vertical-align: top;
-  position: absolute;
-  left: 100%;
-  top: 0;
-}
-.str_vertical .str_move_clone {
-  left: 0;
-  top: 100%;
-}
-.str_down .str_move_clone {
-  left: 0;
-  bottom: 100%;
-}
-.str_vertical .str_move,
-.str_down .str_move {
-  white-space: normal;
-  width: 100%;
-}
-.str_static .str_move,
-.no_drag .str_move,
-.noStop .str_move {
-  cursor: inherit;
-}
-.str_wrap img {
-  max-width: none !important;
-}

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

@@ -58,29 +58,48 @@
             </div>
           </div>
           <div class="pic_list" id="wrapper_case_picture_id">
-            <div class="scroll_container_case mb4" id="scroll_container_case_1">
-              <div class="img_card" v-for="item in 30" :key="item">
-                <img class="pic" :src="A1" alt="" />
-                <div class="dialog_text">
-                  <div class="btn">查看详情</div>
+            <div class="scroll_container_case mb4">
+              <Vue3Marquee
+                duration="100"
+                :pauseOnHover="true"
+                :pauseOnClick="true"
+              >
+                <div class="img_card" v-for="item in 30" :key="item">
+                  <img class="pic" :src="A1" alt="" />
+                  <div class="dialog_text">
+                    <div class="btn">查看详情</div>
+                  </div>
                 </div>
-              </div>
+              </Vue3Marquee>
             </div>
-            <div class="scroll_container_case mb4" id="scroll_container_case_2">
-              <div class="img_card" v-for="item in 20" :key="item">
-                <img class="pic" :src="A1" alt="" />
-                <div class="dialog_text">
-                  <div class="btn">查看详情</div>
+            <div class="scroll_container_case mb4">
+              <Vue3Marquee
+                direction="reverse"
+                duration="100"
+                :pauseOnHover="true"
+                :pauseOnClick="true"
+              >
+                <div class="img_card" v-for="item in 20" :key="item">
+                  <img class="pic" :src="A1" alt="" />
+                  <div class="dialog_text">
+                    <div class="btn">查看详情</div>
+                  </div>
                 </div>
-              </div>
+              </Vue3Marquee>
             </div>
-            <div class="scroll_container_case mb4" id="scroll_container_case_3">
-              <div class="img_card" v-for="item in 30" :key="item">
-                <img class="pic" :src="A1" alt="" />
-                <div class="dialog_text">
-                  <div class="btn">查看详情</div>
+            <div class="scroll_container_case mb4">
+              <Vue3Marquee
+                duration="100"
+                :pauseOnHover="true"
+                :pauseOnClick="true"
+              >
+                <div class="img_card" v-for="item in 30" :key="item">
+                  <img class="pic" :src="A1" alt="" />
+                  <div class="dialog_text">
+                    <div class="btn">查看详情</div>
+                  </div>
                 </div>
-              </div>
+              </Vue3Marquee>
             </div>
             <p class="zhezhao_right"></p>
             <p class="zhezhao_left"></p>
@@ -92,8 +111,8 @@
 </template>
 
 <script setup>
-import '@/assets/js/jquery-1.8.3.min.js'
-import '@/assets/js/jquery.liMarquee.js'
+import { Vue3Marquee } from 'vue3-marquee'
+import 'vue3-marquee/dist/style.css'
 import CountTo from 'cpns/CountTo'
 import { ref, onMounted } from 'vue'
 import A1 from '@/assets/img/case/anli1.png'
@@ -112,18 +131,6 @@ const modules = ref([Autoplay])
 onMounted(() => {
   handleScreenAuto('#case_picture')
   window.onresize = handleScreenAuto('#case_picture')
-  $('#scroll_container_case_1').liMarquee({
-    direction: 'left',
-    scrollamount: 70,
-  })
-  $('#scroll_container_case_2').liMarquee({
-    direction: 'right',
-    scrollamount: 30,
-  })
-  $('#scroll_container_case_3').liMarquee({
-    direction: 'left',
-    scrollamount: 70,
-  })
 })
 const showEmpty = ref(true)
 </script>
@@ -165,7 +172,7 @@ const showEmpty = ref(true)
         flex-direction: column;
         font-family: 'SourceHanSans';
         background-size: 100% 100%;
-        padding: 40px;
+        padding: 40px 0 0 0;
         box-sizing: border-box;
         position: relative;
         white-space: nowrap;
@@ -238,6 +245,7 @@ const showEmpty = ref(true)
             right: 70px;
             bottom: 0px;
             width: 163px;
+            z-index: 999;
             height: 100%;
             background: url(../../../../assets/img/case/zhezhao.png) no-repeat;
             background-size: 100% 100%;
@@ -245,6 +253,7 @@ const showEmpty = ref(true)
           .zhezhao_left {
             position: absolute;
             left: 70px;
+            z-index: 999;
             top: 0;
             bottom: 0;
             width: 163px;
@@ -258,6 +267,8 @@ const showEmpty = ref(true)
           }
           .scroll_container_case {
             flex: 1;
+            display: flex;
+            align-items: center;
             .img_card {
               width: auto;
               height: 100%;

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

@@ -67,7 +67,7 @@ const showEmpty = ref(true)
         flex-direction: column;
         font-family: 'SourceHanSans';
         background-size: 100% 100%;
-        padding: 40px;
+        padding: 60px 0 20px 0;
         box-sizing: border-box;
         position: relative;
         white-space: nowrap;

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

@@ -59,28 +59,47 @@
           </div>
           <div class="pic_list" id="hardware_swiper_scale_id">
             <div class="scroll_container_case mb4" id="scroll_container_case_4">
-              <div class="img_card" v-for="item in 20" :key="item">
-                <img class="pic" :src="A1" alt="" />
-                <div class="dialog_text">
-                  <div class="btn">查看详情</div>
+              <Vue3Marquee
+                duration="100"
+                :pauseOnHover="true"
+                :pauseOnClick="true"
+              >
+                <div class="img_card" v-for="item in 20" :key="item">
+                  <img class="pic" :src="A1" alt="" />
+                  <div class="dialog_text">
+                    <div class="btn">查看详情</div>
+                  </div>
                 </div>
-              </div>
+              </Vue3Marquee>
             </div>
             <div class="scroll_container_case mb4" id="scroll_container_case_5">
-              <div class="img_card" v-for="item in 20" :key="item">
-                <img class="pic" :src="A1" alt="" />
-                <div class="dialog_text">
-                  <div class="btn">查看详情</div>
+              <Vue3Marquee
+                direction="reverse"
+                duration="100"
+                :pauseOnHover="true"
+                :pauseOnClick="true"
+              >
+                <div class="img_card" v-for="item in 20" :key="item">
+                  <img class="pic" :src="A1" alt="" />
+                  <div class="dialog_text">
+                    <div class="btn">查看详情</div>
+                  </div>
                 </div>
-              </div>
+              </Vue3Marquee>
             </div>
             <div class="scroll_container_case mb4" id="scroll_container_case_6">
-              <div class="img_card" v-for="item in 20" :key="item">
-                <img class="pic" :src="A1" alt="" />
-                <div class="dialog_text">
-                  <div class="btn">查看详情</div>
+              <Vue3Marquee
+                duration="100"
+                :pauseOnHover="true"
+                :pauseOnClick="true"
+              >
+                <div class="img_card" v-for="item in 20" :key="item">
+                  <img class="pic" :src="A1" alt="" />
+                  <div class="dialog_text">
+                    <div class="btn">查看详情</div>
+                  </div>
                 </div>
-              </div>
+              </Vue3Marquee>
             </div>
             <p class="zhezhao_right"></p>
             <p class="zhezhao_left"></p>
@@ -92,8 +111,8 @@
 </template>
 
 <script setup>
-import '@/assets/js/jquery-1.8.3.min.js'
-import '@/assets/js/jquery.liMarquee.js'
+import { Vue3Marquee } from 'vue3-marquee'
+import 'vue3-marquee/dist/style.css'
 import CountTo from 'cpns/CountTo'
 import { ref, onMounted } from 'vue'
 import A1 from '@/assets/img/case/anli1.png'
@@ -112,18 +131,6 @@ const modules = ref([Autoplay])
 onMounted(() => {
   handleScreenAuto('#hardware_picture_list')
   window.onresize = handleScreenAuto('#hardware_picture_list')
-  $('#scroll_container_case_4').liMarquee({
-    direction: 'left',
-    scrollamount: 70,
-  })
-  $('#scroll_container_case_5').liMarquee({
-    direction: 'right',
-    scrollamount: 30,
-  })
-  $('#scroll_container_case_6').liMarquee({
-    direction: 'left',
-    scrollamount: 70,
-  })
 })
 const showEmpty = ref(true)
 </script>
@@ -165,7 +172,7 @@ const showEmpty = ref(true)
         flex-direction: column;
         font-family: 'SourceHanSans';
         background-size: 100% 100%;
-        padding: 40px 55px 20px 55px;
+        padding: 40px 0 0 0;
         box-sizing: border-box;
         position: relative;
         white-space: nowrap;
@@ -237,6 +244,7 @@ const showEmpty = ref(true)
             position: absolute;
             right: 70px;
             bottom: 0px;
+            z-index: 999;
             width: 163px;
             height: 100%;
             background: url(../../../../assets/img/case/zhezhao.png) no-repeat;
@@ -247,6 +255,7 @@ const showEmpty = ref(true)
             left: 70px;
             top: 0;
             bottom: 0;
+            z-index: 999;
             width: 163px;
             height: 100%;
             transform: rotate(180deg);

yarn.lock

@@ -2984,6 +2984,11 @@ vue-router@^4.0.13:
   dependencies:
     "@vue/devtools-api" "^6.0.0"
 
+vue3-marquee@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.npmmirror.com/vue3-marquee/-/vue3-marquee-3.1.2.tgz#a168523944738b3bb59e60a154a94f8c3013c47d"
+  integrity sha512-qorZUAakbQqxHmgFBpunQ4WNcdgclG8XRTWjA9Rg+LSLIBWUFYL8LP7Ozf/CQPiZrFxP3PK2GtfN1uCDA/FoiA==
+
 vue3-video-play@^1.3.1-beta.6:
   version "1.3.1-beta.6"
   resolved "https://registry.npmmirror.com/vue3-video-play/-/vue3-video-play-1.3.1-beta.6.tgz#bca3f55a11053eaa37053835e4610c04d9cc509e"