From 7b363bacd0d7576a97af5cbc3f0d4b6e2e2b093c Mon Sep 17 00:00:00 2001
From: wangqing <smalljop@foxmail.com>
Date: Fri, 25 Jun 2021 15:03:22 +0800
Subject: [PATCH] fix views\official index

---
 src/App.vue                  |  38 +------
 src/views/official/index.vue | 208 +++++++++++++++++++++++------------
 2 files changed, 140 insertions(+), 106 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 57ac97b..aeaff04 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -39,40 +39,4 @@ export default {
     }
 }
 </script>
-<style lang="scss">
-.github-btn {
-  a {
-    font-weight: bold;
-    color: #303133;
-    padding: 4px 12px;
-    border: solid 1px #DCDFE6;
-    margin-left: 8px;
-    position: relative;
-    border-radius: 4px;
-  }
-  a:hover{
-    color: #2C67E3;
-  }
-  a:last-child:before {
-      position: absolute;
-      display: inline-block;
-      border-width: 7px;
-      border-style: solid;
-      border-color: transparent rgba(255, 255, 255, 0.4) transparent transparent;
-      left: -15px;
-      top: 25%;
-      content: '';
-  }
-  /* 小角的背景填充*/
-  a:last-child:after {
-      position: absolute;
-      display: inline-block;
-      border-width: 6px;/*与before的三角形重叠差1px，和元素边框是边框宽度一致*/
-      border-style: solid;
-      border-color: transparent #eee transparent transparent;/*边框颜色（小角的填充色）要与整体元素背景一致*/
-      left: -12px;
-      top: 25%;
-      content: '';
-  }
-}
-</style>
+
diff --git a/src/views/official/index.vue b/src/views/official/index.vue
index 0ca6c9f..3bd09ca 100644
--- a/src/views/official/index.vue
+++ b/src/views/official/index.vue
@@ -13,7 +13,7 @@
                     @click="$router.push({path:'/'})"
                 >
                     <img
-                        src="https://demo.tduckapp.com/img/TDUCK@2x.8b6c71be.png"
+                        src="@/assets/images/official/TDUCK@2x.png"
                         alt="img"
                     >
                 </div>
@@ -29,7 +29,7 @@
                         </div>
                     </a>
                 </div>
-  
+
                 <div class="header-btn">
                     <el-button v-if="isLogin" @click="$router.push({path:'/home'})">控 制 台</el-button>
                     <el-button v-if="!isLogin" @click="$router.push({path:'/login'})">登 录</el-button>
@@ -75,7 +75,7 @@
                     </el-col>
                 </el-row>
                 <div data-aos="zoom-in" data-aos-duration="1000" class="content-wrapper-image">
-                    <img src="/img/desc1.b1b39e1f.png">
+                    <img src="@/assets/images/official/desc1.png">
                 </div>
                 <div class="content-wrapper-solutions">
                     <p class="title">我们的解决方案</p>
@@ -170,6 +170,7 @@
 
 <script>
 import store from '@/store'
+
 export default {
     name: 'AppIndex',
     data() {
@@ -296,7 +297,7 @@ export default {
         },
         onStart() {
             // window.location.href = 'https://gitee.com/TDuckApp/tduck-platform'
-            window.open('https://gitee.com/TDuckApp/tduck-platform', '_blank') 
+            window.open('https://gitee.com/TDuckApp/tduck-platform', '_blank')
         },
         msgCard() {
             // <a href="https://gitee.com/TDuckApp/tduck-platform" target="_blank">3798</a>
@@ -304,6 +305,7 @@ export default {
                 title: '关注下 Star 数',
                 duration: 0,
                 position: 'bottom-left',
+                customClass: 'notify-success',
                 dangerouslyUseHTMLString: true,
                 message: '<div style="line-height: 30px">我们需要您的支持，请点击按钮帮助我们增加 gitee star。<span class="github-btn"><a href="https://gitee.com/TDuckApp/tduck-platform" target="_blank">Start</a></span></div>'
             })
@@ -313,41 +315,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.github-btn {
-  a {
-    font-weight: bold;
-    color: #303133;
-    padding: 4px 12px;
-    border: solid 1px #DCDFE6;
-    margin-left: 8px;
-    position: relative;
-    border-radius: 4px;
-  }
-  a:hover{
-    color: #2C67E3;
-  }
-  a:last-child:before {
-      position: absolute;
-      display: inline-block;
-      border-width: 7px;
-      border-style: solid;
-      border-color: transparent rgba(255, 255, 255, 0.4) transparent transparent;
-      left: -15px;
-      top: 25%;
-      content: '';
-  }
-  /* 小角的背景填充*/
-  a:last-child:after {
-      position: absolute;
-      display: inline-block;
-      border-width: 6px;/*与before的三角形重叠差1px，和元素边框是边框宽度一致*/
-      border-style: solid;
-      border-color: transparent #eee transparent transparent;/*边框颜色（小角的填充色）要与整体元素背景一致*/
-      left: -12px;
-      top: 25%;
-      content: '';
-  }
-}
+
 .header-page {
   max-width: 1280px;
   // box-shadow: rgb(0 0 0 / 5%) 0px 4px 6px;
@@ -356,21 +324,25 @@ export default {
   padding: 0 24px;
   justify-content: space-between;
   flex-wrap: wrap;
+
   .header-logo {
     display: inline-block;
     position: relative;
     width: 150px;
     min-width: 150px;
     line-height: 64px;
+
     img {
       width: 100%;
       vertical-align: middle;
       display: inline-block;
     }
   }
+
   .header-btn {
     position: relative;
     text-align: right;
+
     button {
       font-size: 12px;
       font-weight: 400;
@@ -387,28 +359,35 @@ export default {
       em:nth-child(1) {
         transform: translateY(6px) rotate(45deg);
       }
+
       em:nth-child(2) {
         opacity: 0;
       }
+
       em:nth-child(3) {
         transform: translateY(-6px) rotate(-45deg);
       }
     }
   }
+
   .header-menu {
     a {
       font-weight: 400;
       color: #fff;
       padding: 0 20px;
     }
-    a:first-child{
+
+    a:first-child {
       padding-left: 0;
     }
-    a:last-child{
+
+    a:last-child {
       padding-right: 0;
     }
+
     .add-contact-me {
       position: relative;
+
       div {
         margin-top: 20px;
         position: absolute;
@@ -419,24 +398,28 @@ export default {
         transform: translateY(100px);
         transition: 0.3s;
       }
+
       img {
         width: 100px;
         height: 100px;
       }
-      
+
     }
+
     :hover {
-        div {
-          visibility: visible;
-          opacity: 1;
-          transform: translateY(0);
-        }
+      div {
+        visibility: visible;
+        opacity: 1;
+        transform: translateY(0);
       }
+    }
   }
+
   .header-menu-open {
     height: calc(48px * 5);
   }
 }
+
 .back-box {
   color: #fff;
   position: absolute;
@@ -447,9 +430,10 @@ export default {
   height: 150vh;
   border-radius: 0 280px;
   transform: rotate(-22deg);
-  background: linear-gradient(60deg,#1E53F4,#1E53F4,#30cffd,#30cffd,#30cffd);
+  background: linear-gradient(60deg, #1E53F4, #1E53F4, #30cffd, #30cffd, #30cffd);
   z-index: -1;
 }
+
 .content-page {
   height: calc(100vh - 64px);
   color: #fff;
@@ -462,6 +446,7 @@ export default {
   // align-items:center;
   // text-align: center;
   position: relative;
+
   .content-explain {
     position: absolute;
     top: 20%;
@@ -471,11 +456,13 @@ export default {
     h1:first-child {
       font-size: 50px;
     }
-    > div{
+
+    > div {
       width: 100% !important;
       margin-top: 40px;
       text-align: center;
-      .banner-button{
+
+      .banner-button {
         &-start {
           min-width: 140px;
           color: #2667f5;
@@ -487,13 +474,15 @@ export default {
           line-height: 40px;
           height: 40px;
           transition: transform .3s, box-shadow .3s;
+
           &:hover {
             transform: translateY(-5px);
             box-shadow: 0 13px 24px fade(#ffffff, 45);
             // background-image: linear-gradient(to right bottom, #82b5ff 0%, #3c89f6 0%);
           }
         }
-        &-preview{
+
+        &-preview {
           box-shadow: 0 8px 24px fade(#ffffff, 35);
           border-radius: 20px;
           padding: 0 42px;
@@ -503,6 +492,7 @@ export default {
           height: 40px;
           background-color: rgba($color: #000000, $alpha: 0);
           transition: transform .3s, box-shadow .3s;
+
           &:hover {
             color: #2667f5;
             background-color: #FFF;
@@ -515,17 +505,20 @@ export default {
       }
     }
   }
+
   .image {
     z-index: -1;
     position: absolute;
     top: 20%;
     right: 0;
     width: 50%;
+
     img {
       width: 100%;
     }
   }
 }
+
 .content-wrapper {
   .title {
     text-align: center;
@@ -534,20 +527,22 @@ export default {
     color: #232323;
     line-height: 76px;
   }
+
   max-width: 1280px;
   margin: auto;
   margin-top: 200px;
   text-align: center;
+
   .en-title {
     width: 100%;
     white-space: nowrap;
     margin: auto;
     margin: 100px 0;
     background: linear-gradient(
-      -32deg,
-      rgba(32, 84, 241, 0.51) 0%,
-      rgba(34, 78, 243, 0.51) 0%,
-      rgba(56, 234, 255, 0.51) 100%
+        -32deg,
+        rgba(32, 84, 241, 0.51) 0%,
+        rgba(34, 78, 243, 0.51) 0%,
+        rgba(56, 234, 255, 0.51) 100%
     );
     line-height: 7vw;
     font-size: 6vw;
@@ -556,6 +551,7 @@ export default {
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
   }
+
   &-features {
     > div {
       p:first-child {
@@ -564,6 +560,7 @@ export default {
         color: #222;
         line-height: 68px;
       }
+
       p:last-child {
         font-size: 10px;
         font-weight: 300;
@@ -572,12 +569,15 @@ export default {
       }
     }
   }
+
   &-image {
     width: 100%;
+
     img {
       width: 100%;
     }
   }
+
   &-solutions {
     p {
       text-align: center;
@@ -592,35 +592,40 @@ export default {
       width: 250px;
       height: 390px;
       background: linear-gradient(
-        -12deg,
-        rgba(32, 84, 241, 0.08),
-        rgba(34, 78, 243, 0.08),
-        rgba(56, 234, 255, 0.08)
+          -12deg,
+          rgba(32, 84, 241, 0.08),
+          rgba(34, 78, 243, 0.08),
+          rgba(56, 234, 255, 0.08)
       );
       border-radius: 15px;
       text-align: center;
       cursor: pointer;
       transition: transform .3s, box-shadow .3s;
+
       &:hover {
         transform: translateY(-5px);
         box-shadow: 0 2px 49px 0 rgba(105, 119, 168, 0.54);
       }
+
       img {
         width: 197px;
         height: 147px;
       }
+
       .title {
         font-size: 16px;
         font-weight: bold;
         color: #276ef6;
         line-height: 69px;
       }
+
       .desc {
         font-size: 9px;
         font-weight: 300;
         color: #222;
         line-height: 15px;
       }
+
       :last-child {
         font-size: 10px;
         font-weight: 300;
@@ -629,6 +634,7 @@ export default {
       }
     }
   }
+
   &-company {
     display: flex;
     flex-direction: column;
@@ -636,34 +642,42 @@ export default {
     align-items: center;
     justify-content: flex-start;
     margin-top: 200px;
+
     img {
       width: 100%;
     }
   }
 }
-.footer-page{
+
+.footer-page {
   max-width: 1280px;
   margin: auto;
-  .footer-content{
+
+  .footer-content {
     padding: 64px 24px 32px 24px;
     color: #FFF;
-    h1{
+
+    h1 {
       font-size: 20px;
       margin-bottom: 24px;
     }
-    a,span, p {
+
+    a, span, p {
       display: block;
       margin-bottom: 12px;
       font-size: 12px;
       font-weight: 400;
     }
+
     .qrcode {
       width: 100%;
       display: flex;
       align-content: center;
+
       div {
         margin: 10px;
       }
+
       img {
         width: 50%;
         margin-top: 30px;
@@ -672,17 +686,20 @@ export default {
       }
     }
   }
-  .footer-copyright{
+
+  .footer-copyright {
     padding-bottom: 12px;
     text-align: center;
     color: #FFF;
     font-weight: 300;
-    p{
+
+    p {
       margin-top: 0;
       margin-bottom: 8px;
     }
   }
 }
+
 // @media screen and (max-width: 576px) {
 @media screen and (max-width: 600px) {
   #back-box {
@@ -701,12 +718,15 @@ export default {
   }
   #content-page {
     padding: 24px 0;
+
     h1:first-child {
       font-size: 30px;
     }
+
     h1:last-child {
       font-size: 24px;
     }
+
     #image {
       top: 53% !important;
       right: 0 !important;
@@ -714,8 +734,9 @@ export default {
     }
   }
 }
+
 @media screen and (max-width: 767px) {
-  .el-header{
+  .el-header {
     overflow: hidden;
   }
   .header-menu {
@@ -723,6 +744,7 @@ export default {
     width: 100%;
     height: 0;
     order: 5;
+
     a {
       padding: 0 20px !important;
       display: block;
@@ -734,6 +756,7 @@ export default {
     button {
       margin-right: 48px;
     }
+
     .header-mobile-menu {
       width: 16px;
       height: 14px;
@@ -743,6 +766,7 @@ export default {
       cursor: pointer;
       float: right;
       z-index: 100;
+
       em {
         display: block;
         width: 100%;
@@ -751,6 +775,7 @@ export default {
         margin-top: 4px;
         transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), opacity;
       }
+
       :first-child {
         margin-top: 0;
       }
@@ -758,6 +783,7 @@ export default {
   }
   #content-page {
     text-align: center;
+
     > div:first-child {
       width: 100%;
       position: unset !important;
@@ -766,6 +792,7 @@ export default {
       padding: 0;
       // top: 10% !important;
     }
+
     #image {
       top: 40%;
       right: 10%;
@@ -775,18 +802,21 @@ export default {
   .content-wrapper-company {
     margin-top: 80px !important;
   }
-  .footer-page{
+  .footer-page {
     text-align: center;
-    .project-url{
+
+    .project-url {
       margin-left: 0;
     }
   }
 }
+
 @media screen and (min-width: 950px) {
   .header-btn {
     width: 150px;
   }
 }
+
 @media screen and (max-width: 1000px) {
   #content-page {
     div:last-child {
@@ -796,4 +826,44 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
+<style lang="scss">
+.github-btn {
+  a {
+    font-weight: bold;
+    color: #303133;
+    padding: 4px 12px;
+    border: solid 1px #DCDFE6;
+    margin-left: 8px;
+    position: relative;
+    border-radius: 4px;
+  }
+
+  a:hover {
+    color: #2C67E3;
+  }
+
+  a:last-child:before {
+    position: absolute;
+    display: inline-block;
+    border-width: 7px;
+    border-style: solid;
+    border-color: transparent rgba(255, 255, 255, 0.4) transparent transparent;
+    left: -15px;
+    top: 25%;
+    content: '';
+  }
+
+  /* 小角的背景填充*/
+  a:last-child:after {
+    position: absolute;
+    display: inline-block;
+    border-width: 6px; /*与before的三角形重叠差1px，和元素边框是边框宽度一致*/
+    border-style: solid;
+    border-color: transparent #eee transparent transparent; /*边框颜色（小角的填充色）要与整体元素背景一致*/
+    left: -12px;
+    top: 25%;
+    content: '';
+  }
+}
+</style>