init

src/App.vue

@@ -4,11 +4,21 @@
  * @Author: dream
  * @Date: 2021-04-09 13:45:46
  * @LastEditors: dream
- * @LastEditTime: 2021-04-09 14:37:08
+ * @LastEditTime: 2021-04-09 16:44:46
 -->
 <template>
   <div id="app">
-    <iph-header />
+    <el-container>
+      <el-header height="146">
+        <iph-header />
+      </el-header>
+      <el-main>
+        <iph-video />
+      </el-main>
+      <el-footer>
+        <iph-footer />
+      </el-footer>
+    </el-container>
     <!-- <div id="nav">
       <router-link to="/">Home</router-link> |
       <router-link to="/about">About</router-link>
@@ -18,17 +28,26 @@
 </template>
 
 <script>
+import IphFooter from './components/IphFooter.vue'
 import IphHeader from './components/IphHeader.vue'
+import IphVideo from './components/IphVideo.vue'
 export default {
-  components: { IphHeader }
+  components: { IphHeader, IphFooter, IphVideo }
 }
 </script>
 
 <style lang="scss">
+body {
+  margin: 0;
+  padding: 0;
+}
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color: #212121;
+  color: #333333;
+  .el-footer {
+    padding: 0;
+  }
 }
 </style>

src/components/IphFooter.vue

@@ -0,0 +1,89 @@
+<!--
+ * @Descripttion: 底部
+ * @version: 1.0.0
+ * @Author: dream
+ * @Date: 2021-04-09 15:23:37
+ * @LastEditors: dream
+ * @LastEditTime: 2021-04-09 16:13:59
+-->
+<template>
+  <div class="footer">
+    <div class="title">蒙特勒（中国）爵士音乐节</div>
+    <div class="share-line"></div>
+    <div class="content-list">
+      <div class="content-item">
+        <div class="item-title">关于我们</div>
+        <div class="item-content">
+          <div class="content-href">品牌故事</div>
+          <div class="content-href">合作关系</div>
+        </div>
+      </div>
+      <div class="content-item">
+        <div class="item-title">合作与联系</div>
+        <div class="item-content">
+          <div class="content-href">商务合作</div>
+          <div class="content-href">工作机会</div>
+        </div>
+      </div>
+      <div class="content-item">
+        <div class="item-title">最新活动</div>
+        <div class="item-content">
+          <div class="content-href">订阅蒙特勒（中国）爵士音乐节及时了解最新活动资讯</div>
+          <div class="content-href"><button>订阅</button></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'IphFooter'
+}
+</script>
+
+<style lang="scss" scoped>
+@keyframes fade-in {
+  from { bottom: -100px; }
+  to { bottom: 0px; }
+  0% { opacity: 0; }
+  40% { opacity: 0; }
+  100% { opacity: 1; }
+}
+.footer {
+  position:relative;
+  background-color: #f2f2f2;
+  opacity: 1;
+  animation: fade-in;
+  animation-duration: 1.5s;
+  animation-fill-mode: forwards;
+  .title {
+    font-size: 28px;
+    font-weight: 700;
+    text-align: center;
+  }
+  .content-list {
+    display: flex;
+    justify-content: space-around;
+    .content-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 280px;
+      .item-title {
+        margin-bottom: 12px;
+        font-size: 24px;
+      }
+      .item-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        font-size: 20px;
+        .content-href {
+          padding: 12px;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/IphHeader.vue

@@ -4,7 +4,7 @@
  * @Author: dream
  * @Date: 2021-04-09 14:17:59
  * @LastEditors: dream
- * @LastEditTime: 2021-04-09 15:09:28
+ * @LastEditTime: 2021-04-09 15:20:07
 -->
 <template>
   <div class="header">
@@ -13,7 +13,7 @@
       <div class="call-me">{{$t('index.contactUs')}}</div>
     </div>
     <div class="nav">
-      <img class="logo-img" src="https://d1icd6shlvmxi6.cloudfront.net/gsc/E14NP2/e3/bd/34/e3bd34282769491dae12c86cafb22cd5/images/1_引导页/u12.png?token=6e67bcec4e14480ba6cd201339355ff83cf967e9bc14671c9e21e82b8315fa41" />
+      <img class="logo-img" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2939464207,3798916386&fm=26&gp=0.jpg" />
       <ul class="nav-menu-list">
         <li :class="currentNav === index ? 'active' : ''" v-for="(item, index) in navList" :key="index" @click="changeNavTab(index)">{{$t(item)}}</li>
       </ul>

src/components/IphVideo.vue

@@ -0,0 +1,88 @@
+<!--
+ * @Descripttion: 视频播放组件
+ * @version: 1.0.0
+ * @Author: dream
+ * @Date: 2021-04-09 16:34:52
+ * @LastEditors: dream
+ * @LastEditTime: 2021-04-09 18:28:42
+-->
+<template>
+  <div class="iph-video">
+    <video
+      ref="video"
+      src="https://kvideo01.youju.sohu.com/57809bc9-b8d7-4cbd-931b-4f626c72c78f1_0_0.mp4"
+      poster="https://d1icd6shlvmxi6.cloudfront.net/gsc/E14NP2/e3/bd/34/e3bd34282769491dae12c86cafb22cd5/images/2_首页/u50.jpg?token=d3f9e89d19d358dc1cbfc2df7219ec71639c0285e84c953bc2d8b82702bc832c"
+      :controls="playing"
+      width="567px"
+      height="345px"
+      @ended="videoEnd"
+      style="object-fit: cover;"
+    />
+    <div class="cover" v-show="!playing">
+      <img
+        class="play-icon"
+        src="https://d1icd6shlvmxi6.cloudfront.net/gsc/E14NP2/e3/bd/34/e3bd34282769491dae12c86cafb22cd5/images/2_首页/u164.svg?token=33044f8a6dacb3edd16b81de16d921232be2f56b81a00d178bf963930bf72c06"
+        width="142px"
+        height="148px"
+        @click="play"
+      />
+      <img
+        class="full-icon"
+        src="https://d1icd6shlvmxi6.cloudfront.net/gsc/E14NP2/e3/bd/34/e3bd34282769491dae12c86cafb22cd5/images/2_首页/u165.svg?token=3366463f5e2de7278269fe9eb6f59be69977a95c6606ecb45726975c5c5b864f"
+        width="30px"
+        height="30px"
+        @click="openFloating"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'IphVideo',
+  data () {
+    return {
+      playing: false,
+      dialogVisible: false
+    }
+  },
+  methods: {
+    play () {
+      this.playing = true
+      this.$refs.video.play()
+    },
+    videoEnd () {
+      this.playing = false
+      this.$refs.video.load()
+    },
+    openFloating () {
+      this.playing = true
+      this.$refs.video.requestPictureInPicture()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.iph-video {
+  position: relative;
+  .cover {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 567px;
+    height: 345px;
+    background-color: rgba(255, 255, 255, .5);
+    .play-icon {
+      position: absolute;
+      top: 98px;
+      left: 224px;
+    }
+    .full-icon {
+      position: absolute;
+      right: 12px;
+      bottom: 12px;
+    }
+  }
+}
+</style>