feat: 增加按钮滑动效果和hover展出二维码

src/sites/doc/views/Main.vue

@@ -6,9 +6,50 @@
       <div class="content-smile"> </div>
       <div class="content-subTitle">一款具有京东风格的VUE组件</div>
       <div class="content-button">
-        <input class="leftButton" type="button" value="开始使用" />
-        <input class="rightButton" type="button" value="扫码体验" />
+        <div class="leftButton">
+          <div class="leftButtonText">开始使用</div>
+        </div>
+        <div class="rightButton">
+          <div class="rightButtonText">扫码体验</div>
+
+          <div class="qrcodepart">
+            <div class="qrcode-text"> 请使用手机扫码体验 </div>
+            <div class="qrcode"> </div>
+          </div>
+        </div>
+        <iframe
+          style="margin-left: 20px"
+          src="https://ghbtns.com/github-btn.html?user=jdf2e&repo=nutui&type=star&count=true&size=large"
+          frameborder="0"
+          scrolling="0"
+          width="170"
+          height="30"
+          title="GitHub"
+        ></iframe>
       </div>
+
+      <!-- <div style="display: flex; align-items: center">
+        <a href="#" class="leftButton">开始使用</a>
+        <a href="javascript:;" class="rightButton ">
+          扫码体验
+          <a>
+            <span>请使用手机扫码体验</span>
+            <img
+              src="https://img12.360buyimg.com/imagetools/jfs/t1/124892/31/7144/6065/5f0d9fe4Ef020d678/cae78d015aa5897c.png"
+              alt
+            />
+          </a>
+        </a>
+        <iframe
+          style="margin-left: 20px"
+          src="https://ghbtns.com/github-btn.html?user=jdf2e&repo=nutui&type=star&count=true&size=large"
+          frameborder="0"
+          scrolling="0"
+          width="170"
+          height="30"
+          title="GitHub"
+        ></iframe>
+      </div> -->
     </div>
     <div class="content-right">
       <div class="content-img"> </div>
@@ -17,7 +58,11 @@
 </template>
 <script lang="ts">
 import { defineComponent, onMounted, reactive } from 'vue';
-import { onBeforeRouteUpdate, RouteLocationNormalized, useRoute } from 'vue-router';
+import {
+  onBeforeRouteUpdate,
+  RouteLocationNormalized,
+  useRoute
+} from 'vue-router';
 import { currentRoute } from '@/sites/assets/util/ref';
 import Header from '@/sites/doc/components/Header.vue';
 export default defineComponent({
@@ -36,6 +81,17 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@keyframes fadeInLeft {
+  from {
+    opacity: 0;
+    transform: translate3d(-100%, 0, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
 .doc-content-index {
   display: flex;
   flex: 1;
@@ -45,46 +101,106 @@ export default defineComponent({
     padding: 15% 0 0 8.8%;
     // margin: auto 0;
     width: 1300px;
-    min-width: 500px;
+    min-width: 1000px;
     .content-title {
       // line-height: 36px;
       font-family: PingFangSC-Medium;
-      font-size: 50px;
+      font-size: 42px;
       color: rgba(255, 255, 255, 1);
+      animation: fadeInLeft 1s both;
     }
     .content-smile {
       margin-top: 10px;
-      width: 69px;
-      height: 27px;
-      background: url(https://storage.360buyimg.com/imgtools/09516173b9-9b32b9d0-3864-11eb-9a56-0104487ad2b0.png) no-repeat;
+      width: 44px;
+      height: 17px;
+      background: url(https://storage.360buyimg.com/imgtools/09516173b9-9b32b9d0-3864-11eb-9a56-0104487ad2b0.png)
+        no-repeat;
       background-size: cover;
+      animation: fadeInLeft 1s both 0.5s;
     }
     .content-subTitle {
       margin-top: 12px;
       font-family: PingFangSC-Regular;
       font-size: 20px;
       color: rgba(255, 255, 255, 1);
+      animation: fadeInLeft 1s both 0.5s;
     }
     .content-button {
+      position: relative;
+      display: flex;
       margin-top: 40px;
+      iframe {
+        align-self: center;
+        animation: fadeInLeft 1s both 1.2s;
+      }
       .leftButton {
+        display: flex;
+        .leftButtonText {
+          align-self: center;
+          margin: auto;
+          font-size: 14px;
+          color: rgba(255, 255, 255, 1);
+        }
         font-family: PingFangSC-Regular;
-        font-size: 20px;
-        color: rgba(255, 255, 255, 1);
-        width: 170px;
-        height: 50px;
-        background: linear-gradient(135deg, rgba(250, 25, 44, 1) 0%, rgba(250, 39, 40, 1) 45%, rgba(250, 56, 31, 1) 83%, rgba(250, 63, 25, 1) 100%);
+        width: 150px;
+        height: 40px;
+        animation: fadeInLeft 1s both 1.2s;
+        background: linear-gradient(
+          135deg,
+          rgba(250, 25, 44, 1) 0%,
+          rgba(250, 39, 40, 1) 45%,
+          rgba(250, 56, 31, 1) 83%,
+          rgba(250, 63, 25, 1) 100%
+        );
         border-radius: 29px;
+        cursor: pointer;
       }
       .rightButton {
-        margin-left: 30px;
-        font-size: 20px;
-        color: rgba(227, 44, 54, 1);
-        width: 170px;
-        height: 50px;
+        display: flex;
+        .rightButtonText {
+          align-self: center;
+          margin: auto;
+          font-size: 14px;
+          color: rgba(227, 44, 54, 1);
+        }
+        margin-left: 26px;
+        width: 150px;
+        height: 40px;
         border: 1px solid rgba(250, 44, 25, 1);
         border-radius: 29px;
         background-color: #000000;
+        cursor: pointer;
+        animation: fadeInLeft 1s both 1.2s;
+        &:hover {
+          .qrcodepart {
+            display: block;
+          }
+        }
+      }
+      .qrcodepart {
+        display: none;
+        position: absolute;
+        left: 0;
+        top: 50px;
+        padding: 4px;
+        width: 166px;
+        border-radius: 6px;
+        background: rgba(255, 255, 255, 1);
+        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.11);
+        .qrcode-text {
+          font-size: 14px;
+          color: rgba(51, 51, 51, 1);
+          margin-top: 10px;
+          margin-left: 6px;
+        }
+        .qrcode {
+          width: 160px;
+          height: 160px;
+          margin: 0 auto;
+          background: url(https://img12.360buyimg.com/imagetools/jfs/t1/124892/31/7144/6065/5f0d9fe4Ef020d678/cae78d015aa5897c.png)
+            no-repeat;
+          background-size: cover;
+        }
       }
     }
   }
@@ -94,7 +210,8 @@ export default defineComponent({
     .content-img {
       width: 900px;
       height: 514px;
-      background: url(https://storage.360buyimg.com/imgtools/732c3242e9-9b1946b0-391a-11eb-8a8d-55c57d054ae1.png) no-repeat;
+      background: url(https://storage.360buyimg.com/imgtools/732c3242e9-9b1946b0-391a-11eb-8a8d-55c57d054ae1.png)
+        no-repeat;
       background-size: cover;
     }
   }