主页修改

src/views/home/home.vue

@@ -29,7 +29,7 @@
             </div>
             <div class="button-line">         
               <button class="btn1">申请代理</button>
-              <button class="btn2">在线咨询</button>
+              <!-- <button class="btn2">在线咨询</button> -->
               <span class="phoneNum">热线电话：4001-566-899</span>
             </div>          
           </div>       
@@ -42,13 +42,13 @@
             <li 
               :class="{lastBlock:i.normal,noCoin:i.nocoin}" 
               v-for="(i,num) in item" 
-              @mouseenter="showBtn2('coinBlock',1,index,num,i)" 
+              ><!-- @mouseenter="showBtn2('coinBlock',1,index,num,i)" 
               @mouseleave="showBtn2('coinBlock',0,index,num,i)"
-              @click="gohelp(i.coinname,i.normal)">
+              @click="gohelp(i.coinname,i.normal)" -->
               <div class="part" v-if="i.state!==1">
-                <p class="name">{{i.name}}</p>
-                <p class="coin-name">{{i.coinname}}</p>
+                <!-- <p class="name">{{i.name}}</p> -->
                 <div class="icon iconfont" :class="i.coin" v-if="!i.nocoin"></div>
+                <p class="coin-name">{{i.coinname}}</p>
               </div>
               <!-- <div class="part2" v-if="i.state===1&&!i.normal">
                 <div class="icon iconfont" :class="i.coin" v-if="!i.nocoin"></div>
@@ -81,6 +81,7 @@ import plat from "./plat.vue"
 import server from "./server-block.vue"
 import contactUs from "../../components/contact.vue"
 import {ajax} from "../../assets/js/common.js"
+
 export default{
   data(){
     return{
@@ -100,59 +101,66 @@ export default{
       coinBlock:[
         [
           {
-            name:"比特现金",
-            coinname:"BCC",
-            coin:"icon-BCC",
+            name:"比特币",
+            coinname:"BTC",
+            coin:"icon-BTC1",
             state:0,
-          },         
+          },
+          {
+            name:"比特元",
+            coinname:"BTY",
+            coin:"icon-bty1",
+            state:0,
+          },   
           {
             name:"以太坊经典",
             coinname:"ETC",
             coin:"icon-ETC",
             state:0,
           },
-          // {
-          //   name:"比特股",
-          //   coinname:"BTS",
-          //   coin:"icon-BTS",
-          //   state:0,
-          // },
-          {
+          /*{
+            name:"比特股",
+            coinname:"BTS",
+            coin:"icon-BTS",
+            state:0,
+          },*/
+          /*{
             state:0,
             nocoin:true,
-          },
+          },*/
         ],
         [
+          {
+            name:"USDT",
+            coinname:"USDT",
+            coin:"icon-meiyuan",
+            state:0,
+          },
           {
             name:"以太坊",
             coinname:"ETH",
-            coin:"icon-ETH",
+            coin:"icon-ETH1",
             state:0,
           },
           {
-            name:"零币",
-            coinname:"ZEC",
-            coin:"icon-ZEC",
+            name:"莱特币",
+            coinname:"LTC",
+            coin:"icon-ltc",
             state:0,
           },
-          // {
-          //   name:"比特币",
-          //   coinname:"BTC",
-          //   coin:"icon-BTC",
-          //   state:0,
-          // },
-          {
+          /*{
             state:0,
             nocoin:true,
-          },
+          },*/
         ],
         [
           {
-            name:"莱特币",
-            coinname:"LTC",
-            coin:"icon-LTC",
+            name:"比特现金",
+            coinname:"BCC",
+            coin:"icon-BCC",
             state:0,
-          },
+          },  
+          
           // {
           //   name:"云储币",
           //   coinname:"SC",
@@ -160,12 +168,19 @@ export default{
           //   state:0,
           // },
           {
+            name:"零币",
+            coinname:"ZEC",
+            coin:"icon-ZEC1",
+            state:0,
+          },
+          /*{
             state:0,
             nocoin:true,
-          },       
+          },*/       
           {
             name:"主流",
-            coinname:"交易币种",
+            coinname:"主流币种",
+            coin:"icon-jiaoyi",
             state:0,
             normal:true,
           },
@@ -415,7 +430,8 @@ export default{
           margin-right: 24px;
           border:1px solid #dcdcdc;
           position: relative;
-          cursor: pointer;       
+          cursor: pointer;   
+          /* transition: all .2s ease; */
           .part{
             position: absolute;
             left:50%;
@@ -447,9 +463,10 @@ export default{
             font-size: 24px;
           }
           .icon{
-            font-size: 50px;
+            font-size: 62px;
             margin-top: 10px;
             margin-bottom: 10px;
+            color: #1a6fa6;
           }
           .price{
             font-size: 16px;
@@ -468,8 +485,8 @@ export default{
             padding-top: 20px;
           }
           .coin-name{
-            font-size: 40px;
-            color: #1a6fa6;
+            font-size: 30px;
+            color: #999;
             margin-top: 20px;
           }
           /* &:hover{
@@ -504,6 +521,10 @@ export default{
         li:last-child{
           margin-right: 0;
         }
+        li:hover{
+          transform: scale(1.1);
+          box-shadow: 2px 2px 50px #1A6FA6;
+        }
       }
       ul:last-child{
         margin-bottom: 0;
@@ -512,59 +533,70 @@ export default{
   }
   .plat-block{
     height: 900px;
-    background: url("../../assets/img/home/platBg.png") no-repeat center bottom;
+    background: url("../../assets/img/home/plat01-1.png") no-repeat center 30px;
     background-size: auto;
     position: relative;
-    .word-box{
-      width: 1200px;
-      height: 250px;
+    .plat-block-back{
+      width: 100%;
+      height: 417px;
       position: absolute;
-      left:50%;
-      transform: translateX(-50%);
-      bottom: 85px;
-      background-color:rgba(2,134,219,0.83);
-      padding-left: 195px;
-      text-align: left;
-      color: #fff;
-      img{
-        position: absolute;
-        top:-37px;
-        left: 158px;
-      }
-      .tip1{
-        line-height: 1;
-      }
-      .word1{
-        font-size: 35px;
-        margin-top: 30px;
-        font-weight: bold;
-      }
-      .word2{
-        font-size: 24px;
-        margin-left: 80px;
-        margin-top: 10px;
-        font-weight: bold;
-      }
-      .word3{
-        margin-top: 16px;
-        font-size: 12px;
-        line-height: 1.5;
-      }
-      hr{
-        width: 45px;
-        height: 2px;
-        background-color: #fff;
-        border:0;
-        margin-top: 20px;
-      }
-      .ins-box{
+      bottom: 0;
+      background: url("../../assets/img/home/plat02-2.png") no-repeat center bottom;
+      .word-box{
+        width: 1200px;
+        height: 250px;
         position: absolute;
-        width: 380px;
-        right: 250px;
-        top:56px;
-        font-size: 18px;
-        text-align: center;
-        line-height: 1.6;
+        left:50%;
+        transform: translateX(-50%);
+        bottom: 85px;
+        background-color:rgba(2,134,219,0.83);
+        padding-left: 195px;
+        text-align: left;
+        color: #fff;
+        img{
+          position: absolute;
+          top:-37px;
+          left: 158px;
+        }
+        .tip1{
+          line-height: 1;
+        }
+        .word1{
+          font-size: 35px;
+          margin-top: 30px;
+          font-weight: bold;
+        }
+        .word2{
+          font-size: 24px;
+          margin-left: 80px;
+          margin-top: 10px;
+          font-weight: bold;
+        }
+        .word3{
+          margin-top: 16px;
+          font-size: 12px;
+          line-height: 1.5;
+        }
+        hr{
+          width: 45px;
+          height: 2px;
+          background-color: #fff;
+          border:0;
+          margin-top: 20px;
+        }
+        .ins-box{
+          position: absolute;
+          width: 400px;
+          right: 250px;
+          top:56px;
+          font-size: 18px;
+          text-align: center;
+          line-height: 1.6;
+          >span{
+            display: block;
+            padding: 5px 0;
+          }
+        }
       }
     }
   }

src/views/home/plat.vue

@@ -1,24 +1,24 @@
 <template>
   <div class="plat-block">
-    <div class="word-box">
-      <img src="../../assets/img/home/platBlock.png" alt="">
-      <div class="tip1">
-        <p class="word1">专业严谨</p>
-        <p class="word2">的交易平台</p>
-        <p class="word3">Professional and rigorous trading <br/> platform</p>
-        <hr />
-      </div>
-      <p class="ins-box">
-        Fx66基于区块链底层技术的数字货币交易所，<br/>
-
-        座落于美丽的西子湖畔-杭州，<br/>
+    <div class="plat-block-back">
+      <div class="word-box">
+        <img src="../../assets/img/home/platBlock.png">
+        <div class="tip1">
+          <p class="word1">专业严谨</p>
+          <p class="word2">的交易平台</p>
+          <p class="word3">Professional and rigorous trading <br/> platform</p>
+          <hr />
+        </div>
+        <p class="ins-box">
+          <span>FX66是基于区块链底层技术的数字货币交易所，</span>
 
-        拥有撮合交易系统低延时、高并发的核心技术，<br/>
+          <span>拥有撮合交易系统低延迟、高并发的核心技术</span>
 
-        我们突破传统交易所的局限，<br/>
+          <span>勇于突破传统交易所的局限，</span>
 
-        把交易、资产写入区块链当中。
-      </p>
+          <span>把交易、资产写入区块链当中。</span>
+        </p>
+      </div>
     </div>
   </div>
 </template>