首页第一屏

package.json

@@ -8,10 +8,12 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "animate.css": "^3.5.1",
     "core-js": "^3.6.5",
     "element-ui": "^2.15.1",
     "vue": "^2.6.11",
-    "vue-router": "^3.5.1"
+    "vue-router": "^3.5.1",
+    "vue-video-player": "^5.0.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
@@ -20,8 +22,8 @@
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
-    "node-sass": "^5.0.0",
-    "sass-loader": "^10.1.1",
+    "node-sass": "^4.14.1",
+    "sass-loader": "^8.0.2",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {

src/components/Footer.vue

 <template>
   <div class="footer">
-    <div>安泰乐官网 I 福建福鼎姿国寺 I 江苏沭阳圆觉禅林</div>
+    <div>安泰乐官网 ｜ 福建福鼎姿国寺 ｜ 江苏沭阳圆觉禅林</div>
     <div class="tip">
       安泰乐集团有限公司 ｜ Copyright ATL All Rights Reserved
       闽ICP备16020886号-3
@@ -25,6 +25,7 @@ export default {
 }
 .tip{
   font-size: 16px;
+  margin-top: 10px;
 }
 
 </style>

src/components/Header.vue

 <template>
   <div class="header">
-    <img src="@/assets/logo.png" alt="" class="logo" />
+    <img src="@/assets/images/logo.png" alt="" class="logo" />
     <ul class="right-ul">
-      <li><img src="@/assets/logo.png" alt="" class="avatar" />登录</li>
+      <li><img src="@/assets/images/Signin.png" alt="" class="avatar" />登录</li>
       <li>用户协议</li>
       <li>隐私协议</li>
     </ul>
@@ -26,7 +26,7 @@ export default {
   align-items: center;
   padding: 0 calc((100% - 1200px) / 2);
   .logo{
-     width: 72px; 
+     width: 200px; 
   }
  
 }

src/main.js

@@ -3,7 +3,9 @@ import App from './App.vue'
 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);
 new Vue({

src/views/Home/index.vue

 <template>
-  <div >
+  <div>
     <Header></Header>
+    <div class="show-bg">
+      <img src="@/assets/images/writtenwords.png" alt="" class="show-title" />
+      <div class="show-video">
+        <!-- animated flipInX -->
+        <video
+          autoplay
+          loop
+          :class="[{ 'animate-video': scrollTop }, '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"/>
+        浏览器不支持 video 标签，建议升级浏览器。 -->
+        </video>
+      </div>
+    </div>
     <Footer></Footer>
   </div>
 </template>
-
 <script>
-import Header from "@/components/Header"
-import Footer from "@/components/Footer"
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
 export default {
-  name: 'index',
+  name: "index",
   components: {
     Header,
-    Footer
+    Footer,
+  },
+  props: {},
+  created() {
+    window.addEventListener("scroll", this.handleScroll);
+  },
+
+  data() {
+    return {
+      vedioCanPlay: false,
+      PATH_TO_MP4: "https://atlimg.oss-cn-hangzhou.aliyuncs.com/web/2574.mp4",
+      scrollTop: 0,
+    };
+  },
+  methods: {
+    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);
+    },
   },
-  props: {
+};
+</script>
+
+<style lang="scss" scoped>
+.show-bg {
+  background: #091a38;
+  color: #ffffff;
+  padding: 100px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.show-video {
+  width: 1200px;
+  margin-top: 140px;
+  border-radius: 20px;
+  -webkit-backface-visibility: visible !important;
+  backface-visibility: visible !important;
+  .video {
+     height: 430px;
+    object-fit: fill;
+    border-radius: 10px;
+    width: 100%;
+    height: 100%;
+    transform: perspective(400px) rotate3d(1, 0, 0, 20deg);
+  }
+  .animate-video {
+    transform: perspective(400px);
+    width: 1200px;
+    height: 800px;
   }
 }
-</script>
 
-<style scoped>
+.show-title {
+  margin: 0 auto;
+  text-align: center;
+  width: 30%;
+}
+
+@-webkit-keyframes flipInX {
+  from {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 20deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, 20deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  to {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+}
+
+@keyframes flipInX {
+  from {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+
+  80% {
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+  }
+
+  to {
+    -webkit-transform: perspective(400px);
+    transform: perspective(400px);
+  }
+}
+
+/*动画持续时间*/
+.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;
+}
 </style>
+

src/views/Login/register.vue

 <template>
-  <div >
-    <Header></Header>
-    <Footer></Footer>
+  <div>
+    <section ref="qudao" class="qudao">
+      <div class="subtitle">
+        <h2>连接230万家庭</h2>
+        <p>您的设备接入零壹平台后，可直接上线零壹各大渠道和商城</p>
+      </div>
+      <div class="content">
+        <div class="earth-wrap">
+          <div
+            v-show="qudaoShow"
+            ref="earth"
+            class="earth animated bounceInDown delay-1"
+          ></div>
+          <div v-show="qudaoShow" class="left-con animated fadeInLeft delay-1">
+            <h4>海外渠道</h4>
+            <p class="dec">
+              零壹正在大力发展海外渠道，产品套装即将登陆亚马逊、Shopee等海外电商平台，同时布设大量线下经销商，远销美国、欧洲、东南亚等地。
+            </p>
+          </div>
+          <div
+            v-show="qudaoShow"
+            class="right-con animated fadeInRight delay-1"
+          >
+            <h4>国内渠道</h4>
+            <p class="dec">
+              零壹小区物业系统已实际部署超7000个小区，线上商城覆盖超230万个家庭，线下体验店遍布各大城市。超300个城市和行业合伙人负责大型项目落地，统一从零壹渠道采购设备。
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section ref="time" class="time">
+      <div class="subtitle">
+        <h2>接入，最快6小时完成</h2>
+        <p>
+          我们相信，效率就是生命，为您准备了多种上云途径，零壹专家实时进行技术支援
+        </p>
+      </div>
+      <ul class="flexbox">
+        <li v-show="timeShow" class="animated flipInY delay">
+          <img src="@/assets/images/logo.png" />
+        </li>
+        <li v-show="timeShow" class="animated flipInY delay-2">
+          <img src="@/assets/images/logo.png" />
+        </li>
+        <li v-show="timeShow" class="animated flipInY delay-4">
+          <img src="@/assets/images/logo.png" />
+        </li>
+      </ul>
+      <p class="timeTxt">按照快速引导 修改MCU固件代码适配即可完成接入</p>
+    </section>
   </div>
 </template>
 
 <script>
-import Header from "@/components/Header"
-import Footer from "@/components/Footer"
 export default {
-  name: 'index',
-  components: {
-    Header,
-    Footer
+  name: "home",
+  data() {
+    return {
+      close: true,
+      qudaoShow: false,
+      deviceShow: false,
+      sceneShow: false,
+      oemShow: false,
+      productShow: false,
+      timeShow: false,
+      dixianShow: false,
+      loading: false,
+    };
   },
-  props: {
-  }
-}
+  mounted() {
+    window.addEventListener("scroll", this.handleScroll);
+  },
+  methods: {
+    handleScroll() {
+      // 实现当滚动到指定位置，触发动画
+      // let scrollTop =  window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 获取窗口滚动条高度
+      // this.gdjz('earth', 'earth animated bounceInDown', 50)
+      let _this = this;
+      let refArray = [
+        { ref: "qudao", show: "qudaoShow" },
+        { ref: "device", show: "deviceShow" },
+        { ref: "scene", show: "sceneShow" },
+        { ref: "oem", show: "oemShow" },
+        { ref: "product", show: "productShow" },
+        { ref: "time", show: "timeShow" },
+        { ref: "dixian", show: "dixianShow" },
+      ];
+      refArray.forEach(r => {
+        _this.gdjz(r.ref, 20, () => {
+          _this[r.show] = true;
+        });
+      });
+    },
+    gdjz(div, offset, callback) {
+      let dom = this.$refs[div]; // 等同于document.querySelector('.earth') true
+      if (dom) {
+        var a, b, c, d;
+        d = dom.offsetTop; // 元素距离相对父级的高度，这里父级指的是body
+        a = eval(d + offset);
+        b =
+          window.pageYOffset ||
+          document.documentElement.scrollTop ||
+          document.body.scrollTop; //  获取窗口滚动条高度
+        c = document.documentElement.clientHeight || document.body.clientHeight; // 获取浏览器可视区的高度
+        if (b + c > a) {
+          callback && callback();
+        }
+      }
+    },
+  },
+};
 </script>
 
 <style scoped>
-
 </style>