首页

package-lock.json

@@ -3595,6 +3595,11 @@
         }
       }
     },
+    "comutils": {
+      "version": "1.1.19",
+      "resolved": "https://registry.npm.taobao.org/comutils/download/comutils-1.1.19.tgz",
+      "integrity": "sha1-PgfzBqv0joNyZRFxOnKyBWUDREM="
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npm.taobao.org/concat-map/download/concat-map-0.0.1.tgz",
@@ -12201,6 +12206,14 @@
       "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.5.1.tgz?cache=0&sync_timestamp=1617697788171&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.5.1.tgz",
       "integrity": "sha1-7fPPSQeVLR4Fg+B5I3Igxf9utsk="
     },
+    "vue-seamless-scroll": {
+      "version": "1.1.23",
+      "resolved": "https://registry.npm.taobao.org/vue-seamless-scroll/download/vue-seamless-scroll-1.1.23.tgz",
+      "integrity": "sha1-3egbPHmqSZeRs8O//Q/bIv8+Wac=",
+      "requires": {
+        "comutils": "^1.1.9"
+      }
+    },
     "vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.nlark.com/vue-style-loader/download/vue-style-loader-4.1.3.tgz",

package.json

@@ -13,6 +13,7 @@
     "element-ui": "^2.15.1",
     "vue": "^2.6.11",
     "vue-router": "^3.5.1",
+    "vue-seamless-scroll": "^1.1.23",
     "vue-video-player": "^5.0.2"
   },
   "devDependencies": {

src/assets/styles/element-variables.scss

 /* 改变主题色变量 */
-$--color-primary: #CAA774;
+$--color-primary: #caa774;
 
 /* 改变 icon 字体路径变量，必需 */
-$--font-path: '~element-ui/lib/theme-chalk/fonts';
+$--font-path: "~element-ui/lib/theme-chalk/fonts";
 
-* {
-    margin: 0;
-    padding: 0;
-  }
-  
-  html, body {
-    font-size: 12px;
-    min-height: 100%;
-  }
-  
-  .font12 {
-    font-size: 12px;
-  }
-  
-  .font14 {
-    font-size: 14px;
-  }
-  
-  .font18 {
-    font-size: 18px;
-  }
-  
-  .font24 {
-    font-size: 24px;
-  }
-  
-  .font30 {
-    font-size: 30px;
-  }
-  
-  .bold {
-    font-weight: bold;
-  }
-  
-  a {
-    color: #020202;
-  }
-  
-  a:hover {
-    color: $--color-primary;
-  }
-  
+html,
+body,
+p,
+div,
+ul,
+li {
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body {
+  font-size: 12px;
+  min-height: 100%;
+}
+
+.font12 {
+  font-size: 12px;
+}
+
+.font14 {
+  font-size: 14px;
+}
+
+.font18 {
+  font-size: 18px;
+}
+
+.font24 {
+  font-size: 24px;
+}
+
+.font30 {
+  font-size: 30px;
+}
+
+.bold {
+  font-weight: bold;
+}
+
+a {
+  color: #020202;
+}
+
+a:hover {
+  color: $--color-primary;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+}
+
+.my_icon {
+  width: 15px;
+  margin-right: 5px;
+  vertical-align: middle;
+}
+
+.banner {
   img {
-    width: 100%;
-    object-fit: cover;
-  }
-  
-  .my_icon {
-    width: 15px;
-    margin-right: 5px;
-    vertical-align: middle;
-  }
-  
-  .banner {
-    img {
-      max-height: 300px;
-    }
-  }
-  
-  ul,
-  ol,
-  dl {
-    list-style: none;
-  }
-  
-  .align_left {
-    text-align: left;
-  }
-  
-  .align_center {
-    text-align: center;
-  }
-  
-  .clearFix {
-    zoom: 1;
-  }
-  
-  .clearFix:after {
-    content: '';
-    display: block;
-    height: 0;
-    clear: both;
-  }
-  
-  
-  .flex,
-  .flexRow {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  
-  .flexCol {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
-  }
-  
-  .flex_start {
-    display: flex;
-    align-items: baseline;
-  }
-  
-  .pointer {
-    cursor: pointer;
-  }
-  
-  .right {
-    list-style: none;
-  }
-  
-  .mr_10 {
-    margin-right: 10px;
-  }
-  
-  .mt_10 {
-    margin-top: 10px;
-  }
-  
-  .mt_20 {
-    margin-top: 20px;
-  }
-  
-  .ml_10 {
-    margin-left: 10px;
-  }
-  
-  .mb_10 {
-    margin-bottom: 10px;
+    max-height: 300px;
   }
-  
-  .mr_15 {
-    margin-right: 15px;
-  }
-  
-  .mr_20 {
-    margin-right: 20px;
-  }
-  
-  .position_relative {
-    position: relative;
-  }
-  
-  .primary {
-    color: $--color-primary !important;
-  }
-  
-  .back_primary {
-    background: $--color-primary !important;
-    color: #fff !important;
-  }
-  
-  .border_primary {
-    border: 1px solid $--color-primary;
-  }
-  
-  .back_two {
-    background: #f17123 !important;
-    color: #fff !important;
-  }
-  
-  .back_three {
-    background: #ffb400 !important;
-    color: #fff !important;
-  }
-  
-  //图片放大功能
-  .zoom {
-    width: 220px;
-    height: 220px;
-    overflow: hidden;
-  }
-  
-  .zoom_img {
-    transition: all 1s;
-  }
-  
-  .zoom_img:hover {
-    transform: scale(1.2);
-  }
-  
-@import "~element-ui/packages/theme-chalk/src/index";
+}
+
+ul,
+ol,
+dl {
+  list-style: none;
+}
+
+.align_left {
+  text-align: left;
+}
+
+.align_center {
+  text-align: center;
+}
+
+.clearFix {
+  zoom: 1;
+}
+
+.clearFix:after {
+  content: "";
+  display: block;
+  height: 0;
+  clear: both;
+}
+
+.flex,
+.flexRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.flexCol {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.flex_start {
+  display: flex;
+  align-items: baseline;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.right {
+  list-style: none;
\ No newline at end of file
+}
+
+.mr_10 {
+  margin-right: 10px;
+}
+
+.mt_10 {
+  margin-top: 10px;
+}
+
+.mt_20 {
+  margin-top: 20px;
+}
+
+.ml_10 {
+  margin-left: 10px;
+}
+
+.mb_10 {
+  margin-bottom: 10px;
+}
+
+.mr_15 {
+  margin-right: 15px;
+}
+
+.mr_20 {
+  margin-right: 20px;
+}
+
+.position_relative {
+  position: relative;
+}
+
+.primary {
+  color: $--color-primary !important;
+}
+
+.back_primary {
+  background: $--color-primary !important;
+  color: #fff !important;
+}
+
+.border_primary {
+  border: 1px solid $--color-primary;
+}
+
+.back_two {
+  background: #f17123 !important;
+  color: #fff !important;
+}
+
+.back_three {
+  background: #ffb400 !important;
+  color: #fff !important;
+}
+
+//图片放大功能
+.zoom {
+  width: 220px;
+  height: 220px;
+  overflow: hidden;
+}
+
+.zoom_img {
+  transition: all 1s;
+}
+
+.zoom_img:hover {
+  transform: scale(1.2);
+}
+
+@import "~element-ui/packages/theme-chalk/src/index";

src/components/Header.vue

 <template>
   <div class="header">
-    <img src="@/assets/images/logo.png" alt="" class="logo" />
+    <div style="display: flex;flex: 1;">
+      <img src="@/assets/images/logo.png" alt="" class="logo" />
+      <ul class="right-ul">
+      <li>纪念馆列表</li>
+      <li>APP下载</li>
+    </ul>
+    </div>
     <ul class="right-ul">
       <li><img src="@/assets/images/Signin.png" alt="" class="avatar" />登录</li>
       <li>用户协议</li>
@@ -30,12 +36,15 @@ export default {
   right: 0;
   z-index: 999;
   .logo{
-     width: 200px; 
+    width: 200px;
+    margin-right: 30px;
+    object-fit: contain;
   }
  
 }
 .header .right-ul {
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   > li {
     margin-right: 25px;

src/main.js

@@ -4,7 +4,6 @@ import router from './router'
 import ElementUI from 'element-ui';
 import '@/assets/styles/element-variables.scss'
 import animated from 'animate.css' // npm install animate.css --save安装，在引入
- 
 Vue.use(animated)
 Vue.config.productionTip = false
 Vue.use(ElementUI);

src/views/Home/index.vue

 <template>
-  <div>
-    <div id="wrap" :style="{ height: screenHeight + 'px' }">
-      <Header></Header>
-      <div class="main" id="main" :style="{ top: nowTop + 'px' }">
-        <!-- 第一屏 -->
-        <div class="show-bg page" id="page1">
-          <transition leave-active-class="animateTitle">
-            <img
-              class="show-title"
-              src="@/assets/images/writtenwords.png"
-              alt=""
-              v-if="screenIndex == 1"
-            />
-          </transition>
-          <div
+  <div class="root">
+    <custom-header></custom-header>
+    <!-- 第一屏 -->
+    <div class="page bg-image" id="page1" @mousewheel="scrollFun">
+      <transition leave-active-class="titleHidden">
+        <img
+          class="show-title"
+          src="@/assets/images/writtenwords.png"
+          alt=""
+          v-if="screenIndex == 1"
+        />
+      </transition>
+      <transition
+        :enter-active-class="screenIndex == 2 ? 'fallVideo' : ''"
+        leave-active-class="screenIndex == 1"
+      >
+        <div
+          :class="[
+            {
+              'animate-video':
+                screenIndex == 2 ||
+                screenIndex == 3 ||
+                screenIndex == 4 ||
+                screenIndex == 5,
+            },
+            'show-video',
+          ]"
+        >
+          <video
+            autoplay
+            loop
             :class="[
               {
                 'animate-video':
@@ -22,120 +38,180 @@
                   screenIndex == 4 ||
                   screenIndex == 5,
               },
-              'show-video',
+              'video',
             ]"
+            v-on:canplay="canplay"
+            muted
+            ref="video"
           >
-            <video
-              autoplay
-              loop
-              :class="[{ 'show-border': screenIndex == 4 }, 'video']"
-              v-on:canplay="canplay"
-              muted
-              ref="video"
-            >
-              <source :src="PATH_TO_MP4" type="video/mp4" />
-              浏览器不支持 video 标签，建议升级浏览器。
-              <!-- <source :src="PATH_TO_WEBM" type="video/webm"/>
+            <source :src="PATH_TO_MP4" type="video/mp4" />
+            浏览器不支持 video 标签，建议升级浏览器。
+            <!-- <source :src="PATH_TO_WEBM" type="video/webm"/>
         浏览器不支持 video 标签，建议升级浏览器。 -->
-            </video>
-            <transition
-              enter-active-class="animated mask-video"
-              leave-active-class="animated bounceOutDown"
-            >
-              <div class="show-url" v-if="screenIndex == 4 || screenIndex == 5">
-                <img src="@/assets/images/1605239923175.png" alt="" />
-              </div>
-            </transition>
-          </div>
-          <transition leave-active-class="animated bounceOutDown">
-            <div class="show-mask" v-if="screenIndex == 3"></div>
+          </video>
+          <transition
+            :enter-active-class="screenIndex == 4 ? 'scaleLeftShow' : ''"
+            leave-active-class="scaleLeftHidden"
+          >
+            <div class="show-url" v-if="screenIndex == 4 || screenIndex == 5">
+              <img src="@/assets/images/1605239923175.png" alt="" />
+            </div>
           </transition>
-
           <transition
-            enter-active-class="animated bounceInUp"
-            leave-active-class="animated bounceOutDown"
+            :enter-active-class="screenIndex == 4 ? 'scaleRightShow' : ''"
+            leave-active-class=" scaleRightHidden"
           >
-            <img
-              class="mask-img"
-              src="@/assets/images/writtenwordsone.png"
-              alt=""
-              v-if="screenIndex == 3"
-            />
+            <div
+              class="show-border"
+              v-if="screenIndex == 4 || screenIndex == 5"
+            ></div>
           </transition>
-          <div class="show-mask" v-if="screenIndex == 5">
-            <img src="@/assets/images/writtenwordstwo.png" alt="" />
-          </div>
         </div>
-        <div class="show-bg page" id="page2">
-          <div class="show-tab">
-            <img src="@/assets/images/198A5253.png" alt="" />
-            <div class="my-tab">
-              <ul>
-                <li
-                  @click="changeTab(item.id)"
-                  :class="checkedTab == item.id ? 'checked' : ''"
-                  v-for="(item, index) in tabs"
-                  :key="index"
-                >
-                  {{ item.name }}
-                </li>
-              </ul>
-              <div class="show-tip">
-                我们提供了丰富模版，根据自己喜欢可自由选择
-              </div>
-            </div>
-          </div>
+      </transition>
+      <transition leave-active-class="animated bounceOutDown">
+        <div
+          class="show-mask"
+          v-if="screenIndex == 3 || screenIndex == 5"
+        ></div>
+      </transition>
+      <transition
+        enter-active-class="animated bounceInUp"
+        leave-active-class="animated bounceOutDown"
+      >
+        <img
+          class="mask-img"
+          src="@/assets/images/writtenwordsone.png"
+          alt=""
+          v-if="screenIndex == 3"
+        />
+      </transition>
+      <transition
+        enter-active-class="animated bounceInUp"
+        leave-active-class="animated bounceOutDown"
+      >
+        <img
+          src="@/assets/images/writtenwordstwo.png"
+          v-if="screenIndex == 5"
+          class="mask-img"
+          alt=""
+        />
+      </transition>
+    </div>
+    <div class="page" id="page2">
+      <div class="show-tab">
+        <img src="@/assets/images/Map.png" alt="" class="small" />
+        <div class="tab-mask"></div>
+        <div class="my-tab">
+          <ul>
+            <li
+              @click="changeTab(item.id)"
+              :class="checkedTab == item.id ? 'special-color' : ''"
+              v-for="(item, index) in tabs"
+              :key="index"
+            >
+              {{ item.name }}
+            </li>
+          </ul>
+          <div class="show-tip">我们提供了丰富模版，根据自己喜欢可自由选择</div>
         </div>
-        <div class="show-bg page" id="page3">
-          <img
-            src="@/assets/images/writtenwordssix.png"
-            class="show-moretitle"
-            alt=""
-          />
-          <div class="show-more">
-            <div v-class="'animated bounce'">
-              <img src="@/assets/images/Warehouse.png" alt="" />
-              <p class="show-subtitle">应用仓库</p>
-              <p>不断扩展应用库</p>
-              <p>满足不同用户需求</p>
-            </div>
-            <div v-class="'animated bounce'">
-              <img src="@/assets/images/Administration.png" alt="" />
-              <p class="show-subtitle">轻管理</p>
-              <p>有APP、PC两端</p>
-              <p>管理</p>
-            </div>
-            <div v-class="'animated bounce'">
-              <img src="@/assets/images/security.png" alt="" />
-              <p class="show-subtitle">更安全</p>
-              <p>资料可存入私人</p>
-              <p>oss存储空间</p>
-            </div>
-            <div v-class="'animated bounce'">
-              <img src="@/assets/images/Multiterminal.png" alt="" />
-              <p class="show-subtitle">多端展示</p>
-              <p>手机端、IAPD和</p>
-              <p>TV端</p>
-            </div>
+      </div>
+    </div>
+    <div class="page" id="page3">
+      <div class="show-scrollword">
+        <p>尊重生命</p>
+        <p class="special-color">传承文化</p>
+        <p>
+          无限的数据空间，可以承载无数的文化传承，我们尊重生命，感恩世界，那些曾经的过往，也是我们及子孙后代无价的宝藏！
+        </p>
+      </div>
+      <div class="scroll-table">
+        <p class="title">部分纪念馆案例</p>
+        <vue-seamless-scroll
+          :data="hallList"
+          :class-option="optionLeft"
+          class="seamless-warp2"
+        >
+          <ul class="item">
+            <li v-for="(item, index) in hallList" :key="index">
+              <img :src="item.icon" alt="" />
+            </li>
+          </ul>
+        </vue-seamless-scroll>
+        <vue-seamless-scroll
+          :data="hallList"
+          :class-option="optionRight"
+          class="seamless-warp2"
+        >
+          <ul class="item">
+            <li v-for="(item, index) in hallList" :key="index">
+              <img :src="item.icon" alt="" />
+            </li>
+          </ul>
+        </vue-seamless-scroll>
+        <vue-seamless-scroll
+          :data="hallList"
+          :class-option="optionLeft"
+          class="seamless-warp2"
+        >
+          <ul class="item">
+            <li v-for="(item, index) in hallList" :key="index">
+              <img :src="item.icon" alt="" />
+            </li>
+          </ul>
+        </vue-seamless-scroll>
+      </div>
+    </div>
+    <div class="page bg-image" id="page4">
+      <div class="show-moretitle">
+        <p>突破技术壁垒</p>
+        <p class="special-color">安全、便捷、极致体验</p>
+      </div>
+      <div class="show-more">
+        <transition enter-active-class="animated bounce">
+          <div>
+            <img src="@/assets/images/application.png" alt="" />
+            <p class="show-subtitle">云应用</p>
+            <p>应用商店，不断扩展应用库</p>
+            <p>根据需要可自行安装，满足</p>
+            <p>不同用户需求</p>
           </div>
-          <div class="show-btn">
-            <p>立即创建</p>
-            <p>安泰乐·网上生命记念馆</p>
+        </transition>
+        <transition enter-active-class="animated bounce">
+          <div>
+            <img src="@/assets/images/Deposit.png" alt="" />
+            <p class="show-subtitle">私有云存储</p>
+            <p>可将数据存入个人的云存储</p>
+            <p>空间，保证用户数据安全。</p>
           </div>
-        </div>
+        </transition>
+        <transition enter-active-class="animated bounce">
+          <div>
+            <img src="@/assets/images/Exhibition.png" alt="" />
+            <p class="show-subtitle">多端展示</p>
+            <p>线上生命纪念馆可以展示在</p>
+            <p>手机、电脑、TV上,不同的</p>
+            <p>应用场景可以随时可切换</p>
+          </div>
+        </transition>
+      </div>
+      <div class="show-btn">
+        <p>立即创建</p>
+        <p>安泰乐·网上生命记念馆</p>
       </div>
-      <Footer></Footer>
     </div>
+    <custom-footer></custom-footer>
   </div>
 </template>
 <script>
-import Header from "@/components/Header";
-import Footer from "@/components/Footer";
+import CustomHeader from "@/components/Header";
+import CustomFooter from "@/components/Footer";
+import vueSeamlessScroll from "vue-seamless-scroll";
 export default {
   name: "index",
   components: {
-    Header,
-    Footer,
+    CustomHeader,
+    CustomFooter,
+    vueSeamlessScroll,
   },
   props: {},
 
@@ -143,18 +219,18 @@ export default {
     return {
       vedioCanPlay: false,
       PATH_TO_MP4: "https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/2574.mp4",
-      scrollTop: 0,
       screenWeight: 0, // 屏幕宽度
       screenHeight: 0, // 屏幕高度
-      index: 1, // 用于判断翻页
       screenIndex: 1, //用于记录第一页面内部的顺序
-      curIndex: 1, // 当前页的index
       startTime: 0, // 翻屏起始时间
       endTime: 0, // 上一次翻屏结束时间
-      nowTop: 0, // 翻屏后top的位置
       pageNum: 0, // 一共有多少页
       main: Object,
       obj: Object,
+      hallList: new Array(60).fill({
+        icon:
+          "https://thirdwx.qlogo.cn/mmopen/vi_32/exXiaSqNfYBXic1ibB6Ugfg5OPWBDZibM46VibhlRdSovAIic8uYrgmkQD7HgRrQGuKxhTW56T9NMy28KlwkfkdMvxLg/132",
+      }),
       checkedTab: 1,
       tabs: [
         { id: 1, name: "风格多样化" },
@@ -170,23 +246,9 @@ export default {
     this.obj = document.getElementsByTagName("div");
     for (let i = 0; i < this.obj.length; i++) {
       if (this.obj[i].className.indexOf("page") != -1) {
-        //  console.log("this.obj[i]",this.obj[i].className)
         this.obj[i].style.height = this.screenHeight + "px";
       }
     }
-    this.pageNum = document.querySelectorAll(".page").length;
-    // console.log("page",this.pageNum,this.obj)
-
-    // 浏览器兼容
-    if (navigator.userAgent.toLowerCase().indexOf("firefox") != -1) {
-      document.addEventListener("DOMMouseScroll", this.scrollFun, false);
-    } else if (document.addEventListener) {
-      document.addEventListener("mousewheel", this.scrollFun, false);
-    } else if (document.attachEvent) {
-      document.attachEvent("onmousewheel", this.scrollFun);
-    } else {
-      document.onmousewheel = this.scrollFun;
-    }
   },
   methods: {
     scrollFun(event) {
@@ -196,119 +258,69 @@ export default {
       let delta = event.detail || -event.wheelDelta;
       // 如果当前滚动开始时间和上次滚动结束时间的差值小于1.5s，则不执行翻页动作，这样做是为了实现类似节流的效果
       if (this.startTime - this.endTime > 500) {
-        if (
-          delta > 0 &&
-          parseInt(this.main.offsetTop) >=
-            -(this.screenHeight * (this.pageNum - 2))
-        ) {
-          console.log("向下");
-          if (this.index == 1) {
-            this.screenIndex++;
-          }
-          if (this.screenIndex == 5) {
-            // 向下滚动
-            this.index++;
-            this.toPage(this.index);
-          }
-        } else if (delta < 0 && parseInt(this.main.offsetTop) < 0) {
-          console.log("向上，index", this.index);
-          if (this.index == 1) {
-            this.screenIndex--;
-          }
-          if (this.screenIndex == 5) {
-            // 向上滚动
-            this.index--;
-            this.toPage(this.index);
-          }
+        if (delta > 0 && this.screenIndex < 5) {
+          console.log(1, this.screenIndex);
+          this.screenIndex++;
+        }
+        if (delta < 0 && this.screenIndex > 1) {
+          console.log(2, this.screenIndex);
+          this.screenIndex--;
+        }
+        if (this.screenIndex <= 5) {
+          console.log(3, this.screenIndex);
+          event.preventDefault();
         }
         // 本次翻页结束，记录结束时间，用于下次判断
         this.endTime = new Date().getTime();
-      } else {
-        console.log(
-          "this.index例外",
-          this.index,
-          this.screenIndex,
-          this.main.offsetTop
-        );
-        if (delta < 0 && this.index == 1) {
-          if (this.screenIndex > 1) {
-            console.log(111111);
-            this.screenIndex--;
-          }
-        }
-      }
-    },
-    // 翻页
-    toPage(index) {
-      if (index != this.curIndex) {
-        let delta = index - this.curIndex;
-        this.nowTop = this.nowTop - delta * this.screenHeight;
-        this.curIndex = index;
-        console.log("index", this.curIndex);
       }
     },
     changeTab(id) {
       this.checkedTab = id;
     },
-    handleScroll() {
-      // 实现当滚动到指定位置，触发动画
-      console.log(11111);
-      let scrollHeight =
-        document.documentElement.scrollTop || document.body.scrollTop; //滚动高度
-      this.scrollTop = scrollHeight;
-      console.log("scrollHeight", scrollHeight);
-    },
     canplay() {
       this.vedioCanPlay = true;
       console.log(this.vedioCanPlay);
     },
   },
+  computed: {
+    optionLeft() {
+      return {
+        direction: 2,
+        limitMoveNum: 1,
+      };
+    },
+    optionRight() {
+      return {
+        direction: 3,
+        limitMoveNum: 1,
+      };
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
-html,
-body {
-  height: 100%;
-}
-
-body,
-ul,
-li,
-a,
-p,
-div {
-  /*慎删*/
-  padding: 0px;
-  margin: 0px;
-}
-
-#wrap {
-  overflow: hidden;
+.root {
   width: 100%;
-  background: #091a38;
+  background: #070d1d;
 }
-
-#main {
-  position: relative;
-  width: 100%;
-  text-align: center;
-  margin: 0 auto;
-  margin-bottom: 100px;
-  transition: top 1.5s;
+.bg-image {
+  background: url("~@/assets/images/BG.png") no-repeat;
+  background-size: 100% 100%;
 }
-
 .page {
-  /*谨删*/
   width: 100%;
-  margin: 0;
-}
-.show-bg {
+  padding-top: 70px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   position: relative;
+  box-sizing: border-box;
+  overflow: scroll;
+}
+::-webkit-scrollbar {
+  display: none; /*ChromeSafari*/
 }
 
 .show-video {
@@ -316,56 +328,56 @@ div {
   height: 60%;
   max-width: 800px;
   max-height: 600px;
-  margin-top: 140px;
   border-radius: 30px;
-  -webkit-backface-visibility: visible !important;
-  backface-visibility: visible !important;
   position: relative;
-  transform: perspective(1200px) rotate3d(1, 0, 0, 50deg);
-  .show-border {
-    border: 10px solid #000;
-    box-sizing: border-box;
-  }
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+  -webkit-perspective: 1200px;
+  -moz-perspective: 1200px;
+  perspective: 1200px;
   .video {
     object-fit: fill;
     border-radius: 10px;
     width: 100%;
     height: 100%;
+    transform: translate3d(0px, 0px, 0px) rotateX(59.9972deg);
+    &.animate-video {
+      transform: translate(0px, 0px);
+      -webkit-animation-duration: 0.5s;
+      animation-duration: 0.5s;
+      -webkit-animation-name: fallVideo;
+      animation-name: fallVideo;
+    }
   }
-  &.animate-video {
-    transform: perspective(1200px) scale(1.2);
-    -webkit-animation-duration: 0.5s;
-    animation-duration: 0.5s;
-    -webkit-animation-name: flipInX;
-    animation-name: flipInX;
-  }
-  // .scale-video{
-  //    -webkit-animation-duration: 0.5s;
-  //   animation-duration: 0.5s;
-  //   transform: scale(1.5);
-  // }
   .show-url {
     width: 35%;
     position: absolute;
     left: 0;
     top: 0;
-    bottom: 5px;
+    bottom: 0;
     z-index: 1;
     border: 10px solid #000;
-    transform: translate(0px, 0px);
     img {
       width: 100%;
       height: 100%;
     }
   }
+  .show-border {
+    width: 62%;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+    border: 10px solid #000;
+  }
 }
 
 .show-title {
   width: 30%;
-  transform: translate3d(0px, 129.735px, 0px);
-}
-.animateTitle {
-  transform: translate(0px, -288.333px);
+  padding: 15% 0 140px;
+  box-sizing: border-box;
 }
 .show-mask {
   width: 100%;
@@ -389,15 +401,91 @@ div {
   margin-left: -20%;
   z-index: 2;
 }
+.show-scrollword {
+  width: 80%;
+  margin: 50px auto 80px;
+  text-align: center;
+  color: #cccccc;
+  font-size: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  p:first-child {
+    margin-bottom: 10px;
+    color: #fff;
+    font-size: 60px;
+  }
+  p:nth-child(2) {
+    font-size: 60px;
+  }
+  p:last-child {
+    text-align: left;
+    margin-top: 40px;
+    width: 76%;
+  }
+}
+.scroll-table {
+  width: 70%;
+  // height: 650px;
+  padding: 20px 0;
+  background: #202020;
+  border-radius: 20px;
+  .title {
+    color: #ffffff;
+    padding: 0 30px 10px;
+    font-size: 30px;
+    text-align: left;
+  }
+  // 动画效果
+  .seamless-warp2 {
+    overflow: hidden;
+    width: 100%;
+    ul.item {
+      display: flex;
+      align-items: center;
+      margin-top: 10px;
+      li {
+        img {
+          width: 160px;
+          height: 160px;
+          border-radius: 25px;
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+}
+.tab-mask {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 50%;
+  background-image: linear-gradient(
+    to top,
+    #070d1d,
+    rgba(11, 11, 20, 0.85) 25%,
+    rgba(11, 11, 20, 0.45) 50%,
+    rgba(11, 11, 20, 0)
+  );
+}
 .show-tab {
   width: 100%;
   height: 100%;
   position: relative;
-  img {
+  // background: no-repeat center bottom / 100% 100%;
+  background-image: url("~@/assets/images/ptfdjk.png");
+  .small {
     width: 100%;
-    // max-height: 70%;
-    height: 100%;
+    z-index: 2;
+    position: absolute;
+    left: 50%;
+    top: 10%;
+    transform: translate(-50%);
+    width: 80%;
   }
+
   .my-tab {
     width: 40%;
     position: absolute;
@@ -406,6 +494,7 @@ div {
     transform: translate(-50%, -50%);
     bottom: 30px;
     z-index: 1;
+
     ul {
       display: flex;
       justify-content: space-between;
@@ -418,25 +507,7 @@ div {
       font-size: 26px;
       font-weight: bold;
       cursor: pointer;
-      &.checked {
-        -webkit-background-clip: text;
-        background-clip: text;
-        -webkit-text-fill-color: transparent;
-        background-image: -webkit-gradient(
-          linear,
-          left top,
-          right top,
-          from(#b8832d),
-          to(#f6c943)
-        );
-        background-image: -webkit-linear-gradient(left, #b8832d, #f6c943);
-        background-image: -moz-linear-gradient(left, #b8832d, #f6c943);
-        background-image: linear-gradient(to right, #b8832d, #f6c943);
-        color: linear-gradient(to right, #b8832d, #f6c943);
-        border-bottom: 1px solid linear-gradient(to right, #b8832d, #f6c943);
-        position: relative;
-      }
-      &.checked::after {
+      &.special-color::after {
         content: "";
         // width: 20%;
         height: 2px;
@@ -454,9 +525,11 @@ div {
           from(#b8832d),
           to(#f6c943)
         );
-        background-image: -webkit-linear-gradient(left, #b8832d, #f6c943);
-        background-image: -moz-linear-gradient(left, #b8832d, #f6c943);
-        background-image: linear-gradient(to right, #b8832d, #f6c943);
+        background-image: -webkit-linear-gradient(top, #b8832d, #f6c943);
+        background-image: -moz-linear-gradient(top, #b8832d, #f6c943);
+        background-image: linear-gradient(to bottom, #b8832d, #f6c943);
+        color: linear-gradient(to bottom, #b8832d, #f6c943);
+        border-bottom: 1px solid linear-gradient(to bottom, #b8832d, #f6c943);
       }
     }
     .show-tip {
@@ -467,17 +540,115 @@ div {
     }
   }
 }
-.mask-video {
-  transform: translate3d(-692px, 0px, 576.667px) scale(1.3, 1.3);
+.titleShow {
+  -webkit-animation-duration: 0.5s;
+  animation-duration: 0.5s;
+  -webkit-animation-name: titleShow;
+  animation-name: titleShow;
+}
+.titleHidden {
+  -webkit-animation-duration: 0.5s;
+  animation-duration: 0.5s;
+  -webkit-animation-name: titleHidden;
+  animation-name: titleHidden;
+}
+.scaleLeftShow {
+  -webkit-animation-duration: 0.5s;
+  animation-duration: 0.5s;
+  -webkit-animation-name: scaleLeftShow;
+  animation-name: scaleLeftShow;
+}
+.scaleRightShow {
+  -webkit-animation-duration: 0.5s;
+  animation-duration: 0.5s;
+  -webkit-animation-name: scaleRightShow;
+  animation-name: scaleRightShow;
+}
+.scaleLeftHidden {
+  -webkit-animation-duration: 0.5s;
+  animation-duration: 0.5s;
+  -webkit-animation-name: scaleLeftHidden;
+  animation-name: scaleLeftHidden;
+}
+.scaleRightHidden {
+  -webkit-animation-duration: 0.5s;
+  animation-duration: 0.5s;
+  -webkit-animation-name: scaleRightHidden;
+  animation-name: scaleRightHidden;
+}
+.fallVideo {
   -webkit-animation-duration: 0.5s;
   animation-duration: 0.5s;
-  -webkit-animation-name: scaleHidden;
-  animation-name: scaleHidden;
+  -webkit-animation-name: fallVideo;
+  animation-name: fallVideo;
+}
+
+@keyframes fallVideo {
+  from {
+    -webkit-transform: translate3d(0px, 0px, 0px) rotateX(59.9972deg);
+    transform: translate3d(0px, 0px, 0px) rotateX(59.9972deg);
+    transform-origin: center bottom;
+    -webkit-animation-timing-function: linear;
+    animation-timing-function: linear;
+  }
+
+  to {
+    // transform-origin: center bottom;
+    -webkit-transform: translate(0px, 0px);
+    transform: translate(0px, 0px);
+  }
+}
+
+@keyframes titleShow {
+  from {
+    -webkit-transform: translate(0px, -208.333px);
+    transform: translate(0px, -208.333px);
+
+    // transform-origin: center bottom;
+    -webkit-animation-timing-function: linear;
+    animation-timing-function: linear;
+  }
+
+  to {
+    // transform-origin: center bottom;
+    -webkit-transform: translate3d(0px, 93.7356px, 0px);
+    transform: translate3d(0px, 93.7356px, 0px);
+  }
+}
+@keyframes titleHidden {
+  from {
+    -webkit-transform: translate3d(0px, 93.7356px, 0px);
+    transform: translate3d(0px, 93.7356px, 0px);
+    // transform-origin: center bottom;
+    -webkit-animation-timing-function: linear;
+    animation-timing-function: linear;
+  }
+
+  to {
+    // transform-origin: center bottom;
+    -webkit-transform: translate(0px, -208.333px);
+    transform: translate(0px, -208.333px);
+  }
 }
-@keyframes scaleHidden {
+@keyframes scaleLeftShow {
   from {
+    -webkit-transform: translate3d(-692px, 0px, 576.667px) scale(1.3, 1.3);
+    transform: translate3d(-692px, 0px, 576.667px) scale(1.3, 1.3);
+    // transform-origin: center bottom;
+    -webkit-animation-timing-function: linear;
+    animation-timing-function: linear;
+  }
+
+  to {
+    // transform-origin: center bottom;
     -webkit-transform: translate(0px, 0px);
     transform: translate(0px, 0px);
+  }
+}
+@keyframes scaleRightShow {
+  from {
+    -webkit-transform: translate3d(500px, 0px, 416.667px) scale(1.3, 1.3);
+    transform: translate3d(500px, 0px, 416.667px) scale(1.3, 1.3);
     // transform-origin: center bottom;
     -webkit-animation-timing-function: linear;
     animation-timing-function: linear;
@@ -485,8 +656,38 @@ div {
 
   to {
     // transform-origin: center bottom;
+    -webkit-transform: translate(0px, 0px);
+    transform: translate(0px, 0px);
+  }
+}
+@keyframes scaleLeftHidden {
+  from {
+    -webkit-transform: translate(0px, 0px);
+    transform: translate(0px, 0px);
+    // transform-origin: center bottom;
+    -webkit-animation-timing-function: linear;
+    animation-timing-function: linear;
+  }
+
+  to {
     -webkit-transform: translate3d(-692px, 0px, 576.667px) scale(1.3, 1.3);
     transform: translate3d(-692px, 0px, 576.667px) scale(1.3, 1.3);
+    // transform-origin: center bottom;
+  }
+}
+@keyframes scaleRightHidden {
+  from {
+    -webkit-transform: translate(0px, 0px);
+    transform: translate(0px, 0px);
+    // transform-origin: center bottom;
+    -webkit-animation-timing-function: linear;
+    animation-timing-function: linear;
+  }
+
+  to {
+    -webkit-transform: translate3d(500px, 0px, 416.667px) scale(1.3, 1.3);
+    transform: translate3d(500px, 0px, 416.667px) scale(1.3, 1.3);
+    // transform-origin: center bottom;
   }
 }
 // @-webkit-keyframes flipInX {
@@ -522,99 +723,27 @@ div {
   }
 }
 
-@keyframes bounceOutDown {
-  /*向下，向上，再直接下去：透明度为0*/
-  20% {
-    -webkit-transform: translate3d(0, 10px, 0);
-    transform: translate3d(0, 10px, 0);
-  }
-
-  40%,
-  45% {
-    opacity: 1;
-    -webkit-transform: translate3d(0, -20px, 0);
-    transform: translate3d(0, -20px, 0);
+.show-moretitle {
+  padding-bottom: 50px;
+  p:first-child {
+    font-size: 60px;
+    color: #fff;
   }
-
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(0, 2000px, 0);
-    transform: translate3d(0, 2000px, 0);
+  p:last-child {
+    font-size: 40px;
   }
 }
-/*动画持续时间*/
-.animated {
-  -webkit-animation-duration: 1s;
-  animation-duration: 1s;
-  -webkit-animation-fill-mode: both;
-  animation-fill-mode: both;
-}
-
-/*动画无限循环*/
-.animated.infinite {
-  -webkit-animation-iteration-count: infinite;
-  animation-iteration-count: infinite;
-}
-/*动画延时*/
-.animated.delay-1s {
-  -webkit-animation-delay: 1s;
-  animation-delay: 1s;
-}
-
-.animated.delay-2s {
-  -webkit-animation-delay: 2s;
-  animation-delay: 2s;
-}
-
-.animated.delay-3s {
-  -webkit-animation-delay: 3s;
-  animation-delay: 3s;
-}
-
-.animated.delay-4s {
-  -webkit-animation-delay: 4s;
-  animation-delay: 4s;
-}
-
-.animated.delay-5s {
-  -webkit-animation-delay: 5s;
-  animation-delay: 5s;
-}
-
-.animated.fast {
-  -webkit-animation-duration: 800ms;
-  animation-duration: 800ms;
-}
-
-.animated.faster {
-  -webkit-animation-duration: 500ms;
-  animation-duration: 500ms;
-}
-
-.animated.slow {
-  -webkit-animation-duration: 2s;
-  animation-duration: 2s;
-}
-
-.animated.slower {
-  -webkit-animation-duration: 3s;
-  animation-duration: 3s;
-}
-.show-moretitle {
-  width: 10%;
-  margin: 100px 0;
-}
 .show-more {
   display: flex;
   align-items: center;
   width: 80%;
   > div {
-    width: calc(25% - 30px);
+    width: calc(33.3% - 30px);
     margin: 15px;
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
     img {
       width: 131px;
       height: 131px;
@@ -633,11 +762,11 @@ div {
 }
 
 .show-btn {
-  background: linear-gradient(260deg, #b8832d 0%, #f6c943 100%);
+  background: #bb862e;
   border-radius: 51px;
-  width: 330px;
+  width: 390px;
   padding: 10px 0;
-  margin: 150px auto 300px;
+  margin: 80px auto;
   color: #ffff;
   display: flex;
   flex-direction: column;
@@ -651,6 +780,23 @@ div {
     font-size: 14px;
   }
 }
-// 动画效果
+.special-color {
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-image: -webkit-gradient(
+    linear,
+    left top,
+    right top,
+    from(#b8832d),
+    to(#f6c943)
+  );
+  background-image: -webkit-linear-gradient(left, #b8832d, #f6c943);
+  background-image: -moz-linear-gradient(left, #b8832d, #f6c943);
+  background-image: linear-gradient(to right, #b8832d, #f6c943);
+  color: linear-gradient(to right, #b8832d, #f6c943);
+  border-bottom: 1px solid linear-gradient(to right, #b8832d, #f6c943);
+  position: relative;
+}
 </style>