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,