网站banner部分

src/App.vue

@@ -23,7 +23,8 @@
 </script>
 <style lang="scss">
     #app {
-        /*font-family: 'Avenir', Helvetica, Arial, sans-serif;*/
+        font-family: "Helvetica Neue",Helvetica,Arial,"微软雅黑",sans-serif;
+        font-size: 16px;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
         color: #2C3E50;

src/assets/css/base/utils.scss

@@ -156,3 +156,13 @@
 @mixin bgImg($link) {
   background: url("~@/assets/images/" + $link);
 }
+
+/*  网站字体样式  */
+$website-font-size:20;
+//传入改变数值及是否加粗
+@mixin setFontStyle($fix, $isBold: false) {
+  font-size: #{$website-font-size + $fix}px;
+  @if $isBold == true {
+    font-weight: bold;
+  }
+}

src/assets/css/cus-website/cus-website-common.scss

@@ -1,6 +1,13 @@
 @import "../base/utils";
 
 /************************ 通用class样式 author: TX  date:2020-07-30 **********************/
+
+/* 去掉列表前的标识, li 会继承 */
+ol,ul{list-style:none;}
+
+/* 让标题都自定义, 适应多个系统应用 */
+h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;margin: 0;}
+
 /* 外边距 */
 .m5{margin:5px;}
 .m10 {margin: 10px;}
@@ -90,16 +97,6 @@
 
 
 /************************ 网站公共class样式 author: TX  date:2020-07-30 **********************/
-/*  网站字体样式  */
-$website-font-size:20;
-//传入改变数值及是否加粗
-@mixin setFontStyle($fix, $isBold: false) {
-  font-size: #{$website-font-size + $fix}px;
-  @if $isBold == true {
-    font-weight: bold;
-  }
-}
-
 
 /*  网站主体部分 */
 .website-container{width: 1200px;margin: 0 auto;}
@@ -118,8 +115,10 @@ $website-font-size:20;
       >.el-menu-item {
         color: rgba(0,0,0,0.85);
         @include setFontStyle(-2);
-        margin: 10px 16px;
-        padding: 0;
+        height: 80px;
+        line-height: 80px;
+        margin: 0 10px;
+        padding: 0 6px;
       }
       >.el-menu-item.is-active{
         @include setThemeColorBase("color", 0);

src/assets/css/cus-website/cus-website-page.scss

@@ -3,7 +3,126 @@
 @mixin setWebsitePage() {
   /********  describe: 网站首页  author: TX  date:2020-07-30  ********/
   .website-index-page{
-    /*@include setThemeColorBase("background", 0);*/
+     width: 100%;
+    .website-banner{
+      width: 100%;
+      height: 480px;
+      background-image: url("~@/assets/images/website/index/" + "index-banner-background.png");
+      background-position-x: center;
+      .banner-left{
+        width:500px;
+        display: inline-block;
+        h1{@include setFontStyle(40);color: #FFF;letter-spacing: 0;padding-top: 150px;}
+        p{@include setFontStyle(4);display: inline-block;background: #6D4FFF;border-radius: 24px;color: #FFF;margin: 24px 5px;padding: 6px 40px;}
+      }
+      .banner-right{
+        width: 611px;
+        height: 432px;
+        float: right;
+        margin-top: 48px;
+        background-image: url("~@/assets/images/website/index/" + "index-banner-img.png");
+        position: relative;
+          .banner-tel-box{
+            width: 284px;
+            height: 328px;
+            background-image: url("~@/assets/images/website/index/" + "index-banner-tel.png");
+            position: absolute;
+            top: -10px;
+            left: 140px;
+              //电视屏幕
+              img{position: absolute;top: 25px;left: 98px;animation: 5s bannerTel ease infinite;-webkit-animation: 5s bannerTel ease infinite;-moz-animation: 5s bannerTel ease infinite;-o-animation: 5s bannerTel ease infinite;}
+              //电视屏幕动画效果
+              @keyframes bannerTel{
+                from {top: 25px;left: 98px;opacity: 1;}
+                to {top: 35px;left: 65px;opacity: 0.1;}
+              }
+          }
+          //饼图
+          .banner-pie{
+            width: 35px;
+            height: 31px;
+            display: block;
+            position: absolute;
+            top: 86px;
+            right: 62px;
+            background-image: url("~@/assets/images/website/index/" + "index-banner-pie.png");
+            animation: 5s webPie ease infinite;-webkit-animation: 5s webPie ease infinite;-moz-animation: 5s webPie ease infinite;-o-animation: 5s webPie ease infinite;
+            }
+            //饼图动画效果
+            @keyframes webPie {
+              from {top: 86px;opacity: 1;}
+              to {top: 50px;opacity: 0;transform: scale(1.3);}
+            }
+
+            //漂浮小圆点
+            .banner-i-run i{
+              width: 16px;
+              height: 16px;
+              display: block;
+              position: absolute;
+              background:#51E2F4;
+              border-radius: 50%;
+              bottom: 150px;
+              left: 80px;
+              opacity: 0;
+            }
+            .banner-i-run i:nth-child(1){animation: 5s bannerRunI1 ease infinite;-webkit-animation: 5s bannerRunI1 ease infinite;-moz-animation: 10s bannerRunI1 ease infinite;-o-animation: 5s bannerRunI1 ease infinite;}
+            .banner-i-run i:nth-child(2){width:8px;height:8px;bottom: 240px;left: 50px;opacity: 0;animation: 5s bannerRunI2 ease 2s infinite;-webkit-animation: 5s bannerRunI2 ease 2s infinite;-moz-animation: 5s bannerRunI2 ease infinite;-o-animation: 5s bannerRunI2 ease infinite;}
+            .banner-i-run i:nth-child(3){width:7px;height:7px;bottom: 220px;left: 110px;opacity: 0;animation: 5s bannerRunI3 ease 3s infinite;-webkit-animation: 5s bannerRunI3 ease 3s infinite;-moz-animation: 5s bannerRunI3 ease infinite;-o-animation: 5s bannerRunI3 ease infinite;}
+            .banner-i-run i:nth-child(4){width:9px;height:9px;bottom: 300px;left: 130px;opacity: 0;animation: 5s bannerRunI4 ease 4s infinite;-webkit-animation: 5s bannerRunI4 ease 4s infinite;-moz-animation: 5s bannerRunI4 ease infinite;-o-animation: 5s bannerRunI4 ease infinite;}
+            .banner-i-run i:nth-child(5){width:6px;height:6px;bottom: 310px;left: 70px;opacity: 0;animation: 5s bannerRunI5 ease 5s infinite;-webkit-animation: 5s bannerRunI5 ease 5s infinite;-moz-animation: 5s bannerRunI5 ease infinite;-o-animation: 5s bannerRunI5 ease infinite;}
+           /* .banner-i-run i:nth-child(6){width:5px;height:5px;top: 150px;left: 150px;opacity: 0;animation: 2s bannerRunI6 ease 5s infinite;-webkit-animation: 2s bannerRunI6 ease 5s infinite;-moz-animation: 5s bannerRunI6 ease infinite;-o-animation: 5s bannerRunI6 ease infinite;}
+            .banner-i-run i:nth-child(7){width:6px;height:6px;top: 110px;left: 170px;opacity: 0;animation: 3s bannerRunI7 ease 6s infinite;-webkit-animation: 3s bannerRunI7 ease 6s infinite;-moz-animation: 5s bannerRunI7 ease infinite;-o-animation: 5s bannerRunI7 ease infinite;}
+            .banner-i-run i:nth-child(8){width:8px;height:8px;top: 80px;left: 120px;opacity: 0;animation: 4s bannerRunI8 ease 7s infinite;-webkit-animation: 4s bannerRunI8 ease 7s infinite;-moz-animation: 5s bannerRunI8 ease infinite;-o-animation: 5s bannerRunI8 ease infinite;}
+            .banner-i-run i:nth-child(9){width:6px;height:6px;top: 50px;left: 140px;opacity: 0;animation: 3s bannerRunI9 ease 8s infinite;-webkit-animation: 3s bannerRunI9 ease 8s infinite;-moz-animation: 5s bannerRunI9 ease infinite;-o-animation: 5s bannerRunI9 ease infinite;}*/
+            @keyframes bannerRunI1 {
+              0%{bottom: 150px;opacity: 1;}
+              100%{bottom: 240px;opacity: 0;left: 70px;}
+            }
+            @keyframes bannerRunI2 {
+              //0%{opacity: 0.5;}
+              0%{opacity: 0;}
+              5%{bottom: 240px;opacity: 0.6;}
+              100%{bottom: 410px;opacity: 0;left: 40px;}
+            }
+            @keyframes bannerRunI3 {
+              0%{opacity: 0;}
+              5%{bottom: 220px;opacity: 0.7;}
+              100%{bottom: 380px;opacity: 0;left: 130px}
+            }
+            @keyframes bannerRunI4 {
+              0%{opacity: 0;}
+              5%{bottom: 300px;opacity: 0.8;}
+              70%{bottom: 400px;opacity: 0;left: 160px}
+            }
+            @keyframes bannerRunI5 {
+              0%{opacity: 0;}
+              5%{bottom: 310px;opacity: 0.5;}
+              100%{bottom: 420px;opacity: 0;left: 110px}
+            }
+           /* @keyframes bannerRunI6 {
+              0%{opacity: 0;}
+              5%{top: 150px;opacity: 0.5;}
+              100%{top: 30px;opacity: 0;}
+            }
+            @keyframes bannerRunI7 {
+              0%{opacity: 0;}
+              5%{top: 110px;opacity: 0.5;}
+              100%{top: 0;opacity: 0;}
+            }
+            @keyframes bannerRunI8 {
+              0%{opacity: 0;}
+              5%{top: 80px;opacity: 0.5;}
+              100%{top: 0;opacity: 0;}
+            }
+            @keyframes bannerRunI9 {
+              0%{opacity: 0;}
+              5%{top: 50px;opacity: 0.5;}
+              100%{top: 0;opacity: 0;}
+            }*/
+      }
+    }
+
   }
 }
 

src/views/client/Index.vue

@@ -1,18 +1,55 @@
 <template>
+    <div class="website-index-page">
+        <!-- 首页导航栏 -->
+        <nav class="website-head">
+            <div class="website-container head-layout">
+                <div class="head-left">
+                    <a></a>
+                    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
+                        <el-menu-item index="首页">首页</el-menu-item>
+                        <el-menu-item index="考试平台">考试平台</el-menu-item>
+                        <el-menu-item index="培训平台">培训平台</el-menu-item>
+                        <el-menu-item index="课程开发">课程开发</el-menu-item>
+                        <el-menu-item index="新闻资讯">新闻资讯</el-menu-item>
+                        <el-menu-item index="帮助中心">帮助中心</el-menu-item>
+                        <el-menu-item index="关于我们">关于我们</el-menu-item>
+                    </el-menu>
+                </div>
+                <div class="head-right">
+                    <i></i><span>4000-522-130</span>
+                </div>
+            </div>
+        </nav>
+        <!-- 首页banner栏 -->
+        <div class="website-banner">
+            <div class="website-container">
+                <!--  banner左侧区域 -->
+                <div class="banner-left">
+                    <h1>让知识更有价值</h1>
+                    <p>考试平台 / 培训平台 / 课程开发</p>
+                </div>
+                <!--  banner右侧区域 -->
+                <div class="banner-right">
+                    <div class="banner-tel-box">
+                        <img :src="bannerTelImg"></img>
+                    </div>
+                    <i class="banner-pie"></i>
+                    <div class="banner-i-run">
+                        <i></i>
+                        <i></i>
+                        <i></i>
+                        <i></i>
+                        <i></i>
+                     <!--   <i></i>
+                        <i></i>
+                        <i></i>
+                        <i></i>-->
+                    </div>
+                </div>
+            </div>
+        </div>
 
-    <div>
-        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
-            <el-menu-item index="首页">首页</el-menu-item>
-            <el-menu-item index="考试平台">考试平台</el-menu-item>
-            <el-menu-item index="培训平台">培训平台</el-menu-item>
-            <el-menu-item index="课程开发">课程开发</el-menu-item>
-            <el-menu-item index="新闻资讯">新闻资讯</el-menu-item>
-            <el-menu-item index="帮助中心">帮助中心</el-menu-item>
-            <el-menu-item index="关于我们">关于我们</el-menu-item>
-        </el-menu>
-
-
-        <div class="mta-index">
+        <!--<div class="mta-index">
             <div class="block">
                 <el-carousel :interval="200000" type="card" height="500px">
                     <el-carousel-item v-for="item in topCarousels" :key="item">
@@ -22,22 +59,19 @@
                     </el-carousel-item>
                 </el-carousel>
             </div>
-        </div>
+        </div>-->
     </div>
 </template>
 
 <script>
-    // import * as commonUtils            from '@/utils/common';
     export default {
         name:       'index',
         props:      {
-            // indexImg: {
-            //     type:    String,
-            //     default: 'http://yangjie-test.oss-cn-beijing.aliyuncs.com/test/headImg/24d6adbd118b4db6913de4009041e787.jpg'
-            // },
         },
         data() {
             return {
+                //
+                bannerTelImg: require(`@/assets/images/website/index/index-banner-screen.png`),
                 activeIndex:  '首页',
                 topCarousels: [],
             };
@@ -45,9 +79,6 @@
         components: {},
         computed:   {},
         methods:    {
-            /*changeNotice() {
-                this.$router.push({ path: '/c/notice/lists' });
-            },*/
             handleSelect(key, keyPath) {
                 if (key === '考试平台') {
                     window.location.href = "https://www.baidu.com";