首页修改

src/views/home/index.vue

@@ -48,8 +48,8 @@
         </div>
         <img
               src="../../../static/images/home_bg_1.png"
-              width="590px"
+              width="469px"
-              height="491px"
+              height="425px"
             />
       </div>
       <!-- 向賬戶充值 -->
@@ -65,12 +65,31 @@
           </div>
         </div>
         <img
-              src="../../../static/images/dengl.png"
+              src="../../../static/images/home_bg_2.png"
-              width="607px"
+              width="454px"
-              height="452px"
+              height="482px"
             />
       </div>
     </div>
+    <!-- number count 五百万 -->
+    <div class="num-info d-flex">
+      <div class="num-info-count">
+        <div class="num">{{ $t("home.a13") }}</div>
+        <div class="title">{{ $t("home.a17") }}</div>
+      </div>
+      <div class="num-info-count">
+        <div class="num">{{ $t("home.a14") }}</div>
+        <div class="title">{{ $t("home.a18") }}</div>
+      </div>
+      <div class="num-info-count">
+        <div class="num">{{ $t("home.a15") }}</div>
+        <div class="title">{{ $t("home.a19") }}</div>
+      </div>
+      <div class="num-info-count">
+        <div class="num">{{ $t("home.a16") }}</div>
+        <div class="title">{{ $t("home.a20") }}</div>
+      </div>
+    </div>
     <!-- 市场价行情价 -->
     <div class="section-block">
       <div class="col-xs-8 banner-block-2">
@@ -92,7 +111,7 @@
       </div>
     </div>
     <!-- 系统公告 -->
-    <div class="section-block section-block-4">
+    <div class="section-block section-block-4" v-if="0">
       <div class="d-flex justify-content-between">
           <router-link class="post-link img-box notice-bg" v-for="(item, index) in noticeList" :key="index" :to="`/college/detail/${item.category_id}/${item.id}`">
                 <!-- <div>{{ item.title }}</div> -->
@@ -452,27 +471,9 @@
     <!--        </div>-->
     <!--中间显示4个图标-->
 
-    <!-- number count 五百万 -->
-    <div class="num-info d-flex">
-      <div class="num-info-count">
-        <div class="num">{{ $t("home.a13") }}</div>
-        <div class="title">{{ $t("home.a17") }}</div>
-      </div>
-      <div class="num-info-count">
-        <div class="num">{{ $t("home.a14") }}</div>
-        <div class="title">{{ $t("home.a18") }}</div>
-      </div>
-      <div class="num-info-count">
-        <div class="num">{{ $t("home.a15") }}</div>
-        <div class="title">{{ $t("home.a19") }}</div>
-      </div>
-      <div class="num-info-count">
-        <div class="num">{{ $t("home.a16") }}</div>
-        <div class="title">{{ $t("home.a20") }}</div>
-      </div>
-    </div>
     <!-- build --><!-- 多终端支持 -->
     <div class="build-box">
+      <div class="build-bg"></div>
       <div class="build-bottom d-flex">
         <div class="build-left">
           <!-- applogo -->
@@ -526,31 +527,35 @@
     <!-- 在NVRcoin，交易安全稳定 -->
     <div class="section-block section-block-3">
       <h1>{{ $t("home.a28") }}</h1>
-      <div style="color: #6A6E74;margin-bottom: 30px;">{{ $t("home.a29") }}</div>
+      <div style="color: #6A6E74;">{{ $t("home.a29") }}</div>
       <div class="d-flex justify-content-between" style="flex-wrap: wrap;">
         <div class="box box1">
           <div>
             <div class="txt_1">{{ $t("home.a30") }}</div>
             <div class="txt_2">{{ $t("home.a31") }}</div>
           </div>
+          <img src="../../../static/images/1.png" alt="">
         </div>
         <div class="box box2">
           <div>
             <div class="txt_1">{{ $t("home.a32") }}</div>
             <div class="txt_2">{{ $t("home.a33") }}</div>
           </div>
+          <img src="../../../static/images/2.png" alt="">
         </div>
         <div class="box box3">
           <div>
             <div class="txt_1">{{ $t("home.a34") }}</div>
             <div class="txt_2">{{ $t("home.a35") }}</div>
           </div>
+          <img src="../../../static/images/3.png" alt="">
         </div>
         <div class="box box4">
           <div>
             <div class="txt_1">{{ $t("home.a36") }}</div>
             <div class="txt_2">{{ $t("home.a37") }}</div>
           </div>
+          <img src="../../../static/images/4.png" alt="">
         </div>
       </div>
     </div>
@@ -898,8 +903,12 @@
       </div>
     </div>
     <!-- 立即赚取收益 -->
-    <div class="section-block" style="padding-bottom: 100px;text-align: center;margin-top: 100px;">
+    <div class="section-block section-block-5">
-      <div style="font-size: 40px;font-weight: bold;margin-bottom: 30px;">{{ $t("home.a40") }}</div>
+      <img src="../../../static/images/coin_1.png" alt="" style="width: 80px;height: 80px;margin-right: 10px;">
+      <div style="flex: 1;text-align: left;">
+        <h1 style="font-size: 40px;margin-bottom: 10px;">开启加密之旅</h1>
+        <div style="font-size: 18px;">立即赚取收益</div>
+      </div>
       <router-link :to="`/exchange`" class="btn4" v-if="isLogin">{{ $t("home.a41") }}</router-link>
       <router-link :to="`/sign-in`" class="btn4" v-if="!isLogin">{{ $t("home.a41") }}</router-link>
     </div>
@@ -1281,6 +1290,7 @@ export default {
   <style lang="scss" scoped>
 #dowebok {
   background: #121318 !important;
+  padding-bottom: 100px;
   .el_carousel {
     width: 100%;
     .el_carousel_item {
@@ -1532,9 +1542,9 @@ path {
 // num count
 .num-info {
   width: 1200px;
-  height: 150px;
+  height: 110px;
   justify-content: space-between;
-  margin: 50px auto;
+  margin: 50px auto 0px;
   .num-info-count {
     .num {
       font-size: 36px;
@@ -1695,13 +1705,26 @@ path {
   text-align: center;
   color: white;
   padding: 50px 0px;
-  background: url("../../../static/images/home_build_bg1.png");
+  height: 725px;
-  background-size: 100% 100%;
+  box-sizing: border-box;
+  position: relative;
+  .build-bg{
+    width: 1830px;
+    height: 725px;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    z-index: 1;
+    border-radius: 0px 400px 400px 0px;
+    background-color: #0B0FCC;
+  }
   .build-bottom {
     width: 1200px;
     margin: 0px auto;
     justify-content: space-between;
     align-items: center;
+    position: relative;
+    z-index: 2;
     .text-start {
       text-align: start;
     }
@@ -1758,11 +1781,11 @@ path {
       }
     }
     .build-right {
-      width: 297px;
+      width: 800px;
-      height: 599px;
+      height: 578px;
       img {
-        width: 297px;
+        width: 800px;
-        height: 599px;
+        height: 578px;
       }
     }
   }
@@ -2146,8 +2169,10 @@ path {
     text-align: center;
     background: #0B0FCC;
     border-radius: 5px;
-    min-width: 200px;
+    min-width: 340px;
     color: #FFF;
+    font-size: 20px;
+    line-height: 40px;
 
     a{
       color: #FFF;
@@ -2162,6 +2187,7 @@ path {
 }
 .section-block-2{
   padding: 40px 0px 0px;
+  margin-bottom: 60px;
   .th{
     color:#898F9B;
   }
@@ -2177,94 +2203,23 @@ path {
   margin-top: 80px;
 
   .box{
-    border-radius: 10px;
+    width: 570px;
-    box-sizing: border-box;
-  }
-  .box1{
-    width: 802px;
-    min-height: 220px;
-    padding: 20px 40px 20px 20px;
-    background-image: url("../../../static/images/1.png");
-    background-size: 100% 100%;
     display: flex;
-    justify-content: space-between;
+    align-items: center;
-    align-items: end;
 
-    .txt_1, .txt_2{
-      width: 450px;
-    }
     img{
       width: 277px;
-      height: 184px;
+      height: 277px;
     }
   }
-  .box2{
+  .box1{
-    width: 368px;
-    min-height: 220px;
-    padding: 15px 0px 0px 15px;
-    background-image: url("../../../static/images/2.png");
-    background-size: 100% 100%;
-    position: relative;
-
-    .txt_1{
-      width: 285px;
-      line-height: 26px;
-    }
-    .txt_2{
-      width: 200px;
-    }
-    img{
-      width: 167px;
-      height: 167px;
-      position: absolute;
-      right: 0px;
-      bottom: 0px;
-      z-index: 1;
   }
+  .box2{
   }
   .box3{
-    width: 368px;
-    height: 260px;
-    padding: 15px 0px 0px 15px;
-    background-image: url("../../../static/images/3.png");
-    background-size: 100% 100%;
-    margin-top: 30px;
-    position: relative;
 
-    .txt_1{
-      width: 285px;
-      line-height: 26px;
-    }
-    .txt_2{
-      width: 200px;
-    }
-    img{
-      width: 155px;
-      height: 155px;
-      position: absolute;
-      right: 0px;
-      bottom: 0px;
-      z-index: 1;
-    }
   }
   .box4{
-    width: 802px;
-    height: 260px;
-    padding: 20px 50px 20px 20px;
-    background-image: url("../../../static/images/4.png");
-    background-size: 100% 100%;
-    margin-top: 30px;
-    display: flex;
-    justify-content: space-between;
-    align-items: start;
-
-    .txt_1, .txt_2{
-      width: 520px;
-    }
-    img{
-      width: 225px;
-      height: 225px;
-    }
   }
   .txt_1{
     font-size: 20px;
@@ -2274,9 +2229,6 @@ path {
   .txt_2{
     color: #999
   }
-  img{
-    background: #ccc;
-  }
 }
 .section-block-4{
 
@@ -2328,7 +2280,18 @@ path {
       background: #F5F5F6;
   }
 }
+.section-block-5{
+  height: 150px;
+  margin-top: 100px;
+  border-radius: 10px;
+  background-color: #242424;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0px 100px 0px 45px;
 
+}
 .markets__title_span {
   font-size: 16px;
   color: #a1a7ae;