123

package.json

@@ -18,7 +18,8 @@
     "postcss-px-to-viewport": "^1.1.1",
     "swiper": "^9.0.0",
     "vue": "^3.2.45",
-    "vue-router": "^4.0.13"
+    "vue-router": "^4.0.13",
+    "vue3-video-play": "^1.3.1-beta.6"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.0.0",

src/common/utils.js

@@ -3,10 +3,6 @@ const scaleFunc = (showEmpty, id, origin, scale, isLow) => {
     document.querySelector(id).style['transform-origin'] = origin
   }
   document.querySelector(id).style.transform = `scale(${scale})`
-  handleBottomFont(id, scale)
-  handleImgScale(id, scale)
-  handleCooperation(id, scale)
-  handleContactUs(id, scale)
   if (id == '#service_container') {
     showEmpty.value = false
   } else {
@@ -20,6 +16,10 @@ const scaleFunc = (showEmpty, id, origin, scale, isLow) => {
       showEmpty.value = true
     }
   }
+  handleBottomFont(id, scale)
+  handleImgScale(id, scale)
+  handleCooperation(id, scale)
+  handleContactUs(id, scale)
 }
 
 export const handleScreenAuto = (showEmpty, id, origin) => {
@@ -33,6 +33,9 @@ export const handleScreenAuto = (showEmpty, id, origin) => {
     if (['#case_picture', '#hardware_picture_list'].includes(id)) {
       scale = ((clientHeight - 300) / 1170).toFixed(3)
     }
+    if (id == '#cooperation_container') {
+      scale = ((clientHeight - 180) / 1080).toFixed(3)
+    }
     scaleFunc(showEmpty, id, 'center 0', scale, false)
   }
 }
@@ -76,7 +79,7 @@ const handleCooperation = (id, scale) => {
     })`
     document.getElementById(
       'contract_real_coop',
-    ).style.transform = `scale(${scale})`
+    ).style.transform = `scale(${0.8})`
   }
 }
 

src/components/Video/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="video_container">
+    <vue3videoPlay
+      v-bind="options"
+      poster="https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/ironMan.jpg"
+    />
+  </div>
+</template>
+
+<script setup>
+import vue3videoPlay from 'vue3-video-play' // 引入组件
+import 'vue3-video-play/dist/style.css' // 引入css
+import { reactive } from 'vue'
+const options = reactive({
+  width: '100%', //播放器高度
+  height: 'auto', //播放器高度
+  color: '#409eff', //主题色
+  title: '', //视频名称
+  src: 'https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4', //视频源
+  muted: true, //静音
+  webFullScreen: false,
+  speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
+  autoPlay: false, //自动播放
+  loop: false, //循环播放
+  mirror: false, //镜像画面
+  ligthOff: false, //关灯模式
+  volume: 0.3, //默认音量大小
+  control: true, //是否显示控制
+  controlBtns: [
+    'audioTrack',
+    'quality',
+    'speedRate',
+    'volume',
+    'setting',
+    'pip',
+    'pageFullScreen',
+    'fullScreen',
+  ], //显示所有按钮,
+})
+</script>
+
+<style lang="scss" scoped>
+.video_container {
+}
+</style>

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

@@ -66,6 +66,7 @@
                 />
                 <Paragraph v-if="item?.cardText" :text="item?.cardText" />
                 <Intro v-if="item?.cardIntro" :cardIntro="item?.cardIntro" />
+                <!-- <Video /> -->
               </div>
             </div>
           </div>
@@ -84,6 +85,7 @@ import { Pagination } from 'swiper'
 import { case_detail_list } from '@/mock/case'
 import { useDetailStore, useSwiperStore } from '@/store'
 import { storeToRefs } from 'pinia'
+import Video from 'cpns/Video'
 
 import 'swiper/css'
 import 'swiper/css/pagination'
@@ -132,7 +134,7 @@ const mouseleave = function () {
       width: 100%;
       padding: 77px 153px 130px 153px;
       .content_detail {
-        height: 100%;
+        height: 576px;
         width: 100%;
         box-sizing: border-box;
         margin-top: 30px;
@@ -141,7 +143,7 @@ const mouseleave = function () {
         position: relative;
         .left_swiper {
           width: 1024px;
-          height: 100%;
+          // height: 100%;
           position: relative;
           .img_swiper {
             width: 100%;
@@ -190,6 +192,7 @@ const mouseleave = function () {
           overflow-x: auto;
           .detail_header {
             position: sticky;
+            z-index: 999;
             top: 0;
             left: 0;
             right: 0;

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

@@ -34,6 +34,8 @@ const showEmpty = ref(false)
   height: 100vh;
   background: $common_bg;
   position: relative;
+  display: flex;
+  align-items: flex-end;
   .cooperation_container {
     width: 100%;
     height: 100%;

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

@@ -69,6 +69,7 @@
                 />
                 <Paragraph v-if="item?.cardText" :text="item?.cardText" />
                 <Intro v-if="item?.cardIntro" :cardIntro="item?.cardIntro" />
+                <!-- <Video /> -->
               </div>
             </div>
           </div>
@@ -96,6 +97,7 @@ import CardTitle from 'cpns/CardTitle'
 import Tabs from 'cpns/Tabs'
 import Trumbs from 'cpns/Trumbs'
 import Intro from 'cpns/Intro'
+import Video from 'cpns/Video'
 const showEmpty = ref(false)
 const modules = ref([Pagination])
 const detailStore = useDetailStore()
@@ -131,7 +133,7 @@ const mouseleave = function () {
       width: 100%;
       padding: 77px 153px 130px 153px;
       .content_detail {
-        height: 100%;
+        height: 576px;
         width: 100%;
         box-sizing: border-box;
         margin-top: 30px;
@@ -188,6 +190,7 @@ const mouseleave = function () {
           scrollbar-width: none; /* firefox */
           overflow-x: auto;
           .detail_header {
+            z-index: 999;
             position: sticky;
             top: 0;
             left: 0;

yarn.lock

@@ -1560,6 +1560,11 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+hls.js@^1.0.10:
+  version "1.3.5"
+  resolved "https://registry.npmmirror.com/hls.js/-/hls.js-1.3.5.tgz#0e8b0799ecf2feb7ba199f5e95f35ba9552e04f4"
+  integrity sha512-uybAvKS6uDe0MnWNEPnO0krWVr+8m2R0hJ/viql8H3MVK+itq8gGQuIYoFHL3rECkIpNH98Lw8YuuWMKZxp3Ew==
+
 hosted-git-info@^2.1.4:
   version "2.8.9"
   resolved "https://registry.npmmirror.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
@@ -2809,6 +2814,11 @@ tempfile@^2.0.0:
     temp-dir "^1.0.0"
     uuid "^3.0.1"
 
+throttle-debounce@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-3.0.1.tgz#32f94d84dfa894f786c9a1f290e7a645b6a19abb"
+  integrity sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==
+
 through@^2.3.8:
   version "2.3.8"
   resolved "https://registry.npmmirror.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
@@ -2974,7 +2984,16 @@ vue-router@^4.0.13:
   dependencies:
     "@vue/devtools-api" "^6.0.0"
 
-vue@^3.2.45:
+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"
+  integrity sha512-Olrx2/LNAds7fuor/yX9ZKT9sOcwcfTt2g2YbbCrEaAmZ5Tb0hwBr5z+/CoLwELzzRzXCHPmWWoT0Wm5W/Nwpw==
+  dependencies:
+    hls.js "^1.0.10"
+    throttle-debounce "^3.0.1"
+    vue "^3.2.2"
+
+vue@^3.2.2, vue@^3.2.45:
   version "3.2.47"
   resolved "https://registry.npmjs.org/vue/-/vue-3.2.47.tgz"
   integrity sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==