123

2 years ago · 01c76962b4
12 changed files with 129 additions and 29 deletions
--- a/index.html
+++ b/index.html
@ -7,6 +7,7 @@
      content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;"
    />
    <title>产品梦工厂</title>
+    <link rel="shortcut icon" href="./logo.ico" />
  </head>
  <body>
    <div id="app"></div>
--- a/logo.ico
+++ b/logo.ico
--- a/src/assets/img/intro/a.m4v
+++ b/src/assets/img/intro/a.m4v
--- a/src/assets/img/intro/bg.jpg
+++ b/src/assets/img/intro/bg.jpg
--- a/src/assets/img/intro/close.png
+++ b/src/assets/img/intro/close.png
--- a/src/assets/img/intro/play.png
+++ b/src/assets/img/intro/play.png
--- a/src/common/utils.js
+++ b/src/common/utils.js
@ -142,7 +142,7 @@ export const totalPageAni = async (activeIndex, previousIndex) => {
  if (activeIndex == 14) {
    animateCSS('#post_page_title_ani', aniName)
  }
-  if (activeIndex == 15) {
+  if (activeIndex == 16) {
    animateCSS('#contract_info_ani', aniName)
    animateCSS('#contact_hand', aniName)
  }
--- a/src/components/TopNav/index.vue
+++ b/src/components/TopNav/index.vue
@ -12,7 +12,7 @@
      <li :class="getActiveClass(10)" @click="scrollToPage(10)">结构开发</li>
      <li :class="getActiveClass(13)" @click="scrollToPage(13)">企业文化</li>
      <li :class="getActiveClass(14)" @click="scrollToPage(14)">加入我们</li>
-      <li :class="getActiveClass(15)" @click="scrollToPage(15)">联系我们</li>
+      <li :class="getActiveClass(16)" @click="scrollToPage(16)">联系我们</li>
    </ul>
  </div>
 </template>
--- a/src/components/Video/index.vue
+++ b/src/components/Video/index.vue
@ -1,9 +1,6 @@
 <template>
  <div class="video_container">
-    <vue3videoPlay
-      v-bind="options"
-      poster="https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/ironMan.jpg"
-    />
+    <vue3videoPlay v-bind="options" :poster="Post" />
  </div>
 </template>

@ -11,16 +8,24 @@
 import vue3videoPlay from 'vue3-video-play' // 引入组件
 import 'vue3-video-play/dist/style.css' // 引入css
 import { reactive } from 'vue'
+import Post from '@/assets/img/intro/bg.jpg'
+const props = defineProps({
+  videoUrl: String,
+  autoPlay: {
+    default: false,
+    type: Boolean,
+  },
+})
 const options = reactive({
  width: '100%', //播放器高度
  height: 'auto', //播放器高度
-  color: '#409eff', //主题色
+  color: '#283fe7', //主题色
  title: '', //视频名称
-  src: 'https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4', //视频源
-  muted: true, //静音
+  src: props.videoUrl, //视频源
+  muted: false, //静音
  webFullScreen: false,
  speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
-  autoPlay: false, //自动播放
+  autoPlay: props.autoPlay, //自动播放
  loop: false, //循环播放
  mirror: false, //镜像画面
  ligthOff: false, //关灯模式
@ -31,9 +36,7 @@ const options = reactive({
    'quality',
    'speedRate',
    'volume',
-    'setting',
    'pip',
-    'pageFullScreen',
    'fullScreen',
  ], //显示所有按钮,
 })
--- a/src/views/Index/components/IntroVideo/index.vue
+++ b/src/views/Index/components/IntroVideo/index.vue
@ -0,0 +1,91 @@
+<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 videoUrl="/src/assets/img/intro/a.m4v" :autoPlay="true" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Play from '@/assets/img/intro/play.png'
+import Close from '@/assets/img/intro/close.png'
+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>
+.intro_video_container {
+  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: 50vw;
+      height: auto;
+      position: relative;
+      .close {
+        position: absolute;
+        right: -50px;
+        top: -50px;
+        width: 30px;
+        height: 30px;
+        cursor: pointer;
+        .img_c {
+          width: 30px;
+          height: 30px;
+        }
+      }
+    }
+  }
+}
+</style>
--- a/src/views/Index/components/Recruit/index.vue
+++ b/src/views/Index/components/Recruit/index.vue
@ -18,7 +18,7 @@
          <Card
            :merge="item.isMerge"
            :handleDetail="handleDetail"
-            :i="index + 1"
+            :i="index + 1 + ''"
            :postInfo="item"
          />
        </div>
--- a/src/views/Index/index.vue
+++ b/src/views/Index/index.vue
@ -18,52 +18,55 @@
    :modules="modules"
    class="home_swiper"
  >
-    <swiper-slide :key="0" :virtualIndex="0">
+    <swiper-slide key="0" virtualIndex="0">
      <HeaderSwiper />
    </swiper-slide>
-    <swiper-slide :key="1" :virtualIndex="1">
+    <swiper-slide key="1" virtualIndex="1">
      <Service />
    </swiper-slide>
-    <swiper-slide :key="2" :virtualIndex="2">
+    <swiper-slide key="2" virtualIndex="2">
      <Cooperation />
    </swiper-slide>
-    <swiper-slide :key="3" :virtualIndex="3">
+    <swiper-slide key="3" virtualIndex="3">
      <CasePictureList />
    </swiper-slide>
-    <swiper-slide :key="4" :virtualIndex="4">
+    <swiper-slide key="4" virtualIndex="4">
      <CaseDetails />
    </swiper-slide>
-    <swiper-slide :key="5" :virtualIndex="5">
+    <swiper-slide key="5" virtualIndex="5">
      <HardwareSummary />
    </swiper-slide>
-    <swiper-slide :key="6" :virtualIndex="6">
+    <swiper-slide key="6" virtualIndex="6">
      <HardwareDetails />
    </swiper-slide>
-    <swiper-slide :key="7" :virtualIndex="7">
+    <swiper-slide key="7" virtualIndex="7">
      <SoftHardwareSummary />
    </swiper-slide>
-    <swiper-slide :key="8" :virtualIndex="8">
+    <swiper-slide key="8" virtualIndex="8">
      <SoftHardwareDetail />
    </swiper-slide>
-    <swiper-slide :key="9" :virtualIndex="9">
+    <swiper-slide key="9" virtualIndex="9">
      <WebOfThing />
    </swiper-slide>
-    <swiper-slide :key="10" :virtualIndex="10">
+    <swiper-slide key="10" virtualIndex="10">
      <MechanicalControl />
    </swiper-slide>
-    <swiper-slide :key="11" :virtualIndex="11">
+    <swiper-slide key="11" virtualIndex="11">
      <MechanicalDrive />
    </swiper-slide>
-    <swiper-slide :key="12" :virtualIndex="12">
+    <swiper-slide key="12" virtualIndex="12">
      <ReadWidely />
    </swiper-slide>
-    <swiper-slide :key="13" :virtualIndex="13">
+    <swiper-slide key="13" virtualIndex="13">
      <Culture />
    </swiper-slide>
-    <swiper-slide :key="14" :virtualIndex="14">
+    <swiper-slide key="14" virtualIndex="14">
      <Recruit />
    </swiper-slide>
-    <swiper-slide :key="15" :virtualIndex="15">
+    <swiper-slide key="15" virtualIndex="15">
+      <IntroVideo />
+    </swiper-slide>
+    <swiper-slide key="16" virtualIndex="16">
      <ContactUs />
    </swiper-slide>
  </swiper>
@ -92,6 +95,7 @@ import HardwareDetails from '@/views/Index/components/HardwareDetails'
 import SoftHardwareDetail from '@/views/Index/components/SoftHardwareDetail'
 import Cooperation from '@/views/Index/components/Cooperation'
 import MechanicalDrive from '@/views/Index/components/MechanicalDrive'
+import IntroVideo from '@/views/Index/components/IntroVideo'
 import { totalPageAni } from '@/common/utils'
 // Import Swiper styles
 import 'swiper/css'
@ -112,6 +116,7 @@ export default {
    Culture,
    Cooperation,
    CaseDetails,
+    IntroVideo,
    HeaderSwiper,
    Service,
    SoftHardwareDetail,