增加布展中国风主题

src/assets/styles/index.scss

 @import url('@/assets/fonts/font.css');
 @import url('./animations.scss');
 
+
 /**适应移动端 */
 @media screen and (max-width: 500px) {
 
@@ -34,6 +35,8 @@ li {
 ul,
 li {
   list-style: none;
+  padding: 0;
+  margin: 0;
 }
 
 //一些公共样式 
@@ -61,7 +64,7 @@ li {
   }
 }
 
-.content-wrapper{
+.content-wrapper {
   // width: 1200px;
   width: 100%;
   padding: 0 13%;
@@ -69,4 +72,3 @@ li {
   flex-direction: column;
   align-items: center;
 }
\ No newline at end of file
-

src/components/Video/index.vue

 <template>
-  <video :src="url" class="video-wrapper" controls loop></video>
+  <div class="video-container" @click="hanleClick">
+    <video :src="url" class="video-dom" ref="video"></video>
+    <div class="modal" :style="{ opacity: opacity }">
+      <div class="play-btn">
+        <i class="el-icon-caret-right"></i>
+      </div>
+      <div class="blur"></div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -11,12 +19,87 @@ export default {
       type: String,
     },
   },
+  data() {
+    return {
+      isPlaying: false,
+      opacity: 1,
+    };
+  },
+
+  methods: {
+    // 播放视频
+    play() {
+      this.$refs.video.play();
+    },
+    // 暂停视频
+    pause() {
+      this.$refs.video.pause();
+    },
+    hanleClick() {
+      this.isPlaying = !this.isPlaying;
+      if (this.isPlaying) {
+        this.play();
+        this.opacity = 0;
+      } else {
+        this.pause();
+        this.opacity = 1;
+      }
+    },
+  },
 };
 </script>
 
 <style scoped lang='scss'>
-.video-wrapper {
+.video-container {
+  position: relative;
+  height: 100%;
+  .video-dom {
     height: auto;
     width: 100%;
+  }
+  .modal {
+    width: 100%;
+    height: 100%;
+    background-color: rgba($color: #000000, $alpha: 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    transition: all 0.5s ease;
+    position: absolute;
+    z-index: 9;
+
+    .play-btn {
+      width: 100px;
+      height: 70px;
+      border: 2px solid #892325;
+      // background-color: #fff;
+      border-radius: 20px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #892325;
+      position: absolute;
+      z-index: 1;
+      i {
+        font-size: 50px;
+        z-index: 1;
+      }
+    }
+  }
+
+  .blur {
+    width: 100px;
+    height: 70px;
+    background-color: #fff;
+    position: absolute;
+    left: 50%;
+    bottom: 50%;
+    transform: translate(-50%, 50%);
+    filter: blur(26px);
+    z-index: 0;
+  }
 }
 </style>
\ No newline at end of file

src/main.js

@@ -15,7 +15,7 @@ import {
   WOW
 } from 'wowjs'
 import {
-  getTotalUrl
+  getFullUrl
 } from '@/utils/index'
 // import '@/rem'
 
@@ -38,7 +38,7 @@ Vue.prototype.$wow = new WOW({
   }
 })
 
-Vue.prototype.$getFullUrl = getTotalUrl
+Vue.prototype.$getFullUrl = getFullUrl
 new Vue({
   router,
   store,

src/utils/index.js

@@ -22,16 +22,12 @@ export function debounce(func, wait, immediate = true) {
   }
 }
 
+
 // 获取完整的url，根据环境进行配置
-export function getTotalUrl(url) {
+export function getFullUrl(url) {
   if (url) {
     let fullUrl = ''
     let urlArr = url.split('files')
-    // if (process.env.NODE_ENV == 'development') {
-    //   fullUrl = url
-    // } else {
-    //   fullUrl = '/files' + urlArr[1]
-    // }
     fullUrl = '/files' + urlArr[1]
     return fullUrl
   } else {
@@ -39,3 +35,19 @@ export function getTotalUrl(url) {
   }
 
 }
+
+/**
+ * 预览文件 
+ * @param href 预览地址
+ * @param previewName 预览文件用户看到的名称
+ */
+ export function previewFile(href, previewName) {
+  let a = document.createElement("a");
+  a.href = href;
+  a.target = '_blank'
+  a.download = previewName;
+  a.style.display = "none";
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+}
\ No newline at end of file