123

2 years ago · b180871037
7 changed files with 86 additions and 10 deletions
--- a/package.json
+++ b/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",
--- a/src/common/utils.js
+++ b/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})`
  }
 }

--- a/src/components/Video/index.vue
+++ b/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>
--- a/src/views/Index/components/CaseDetails/index.vue
+++ b/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;
--- a/src/views/Index/components/Cooperation/index.vue
+++ b/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%;
--- a/src/views/Index/components/HardwareDetails/index.vue
+++ b/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;
--- a/yarn.lock
+++ b/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==