入住页面修改

assets/scss/activity.css

@@ -7,15 +7,13 @@ ul,li{
   margin: 0 auto;
 }
 .business .banner{
-  width: 100%;
-  height: 676px;
-  margin: 0 auto;
-  background: url("/images/activity/business-banner.jpg") no-repeat center;
+  height: 630px;
+  margin-top: -47px;
+  background: url("/images/activity/business-banner.png") no-repeat center;
 }
 @media screen and (max-width: 1366px) {
   .business .banner{
-    height: 560px;
-    background-size: 100% 100%;
+    height: 630px;
   }
 }
 .business  .session{
@@ -27,14 +25,21 @@ ul,li{
   margin: 0 auto;
 }
 .business .introduction{
-  margin-top: 75px;
+  margin-top: 45px;
 }
 .business h3{
   text-align: center;
   font-size: 30px;
   margin: 0;
 }
+.business .introduction .theme{
+  width: 60px;
+  height: 11px;
+  border-top:2px solid #ff8400;
+  margin: 0 auto;
+}
 .business .introduction .text{
+  text-indent: 2em;
   font-size: 16px;
   color: #666;
   line-height: 35px;
@@ -96,6 +101,11 @@ ul,li{
   margin: 0 10px;
   overflow: hidden;
   position: relative;
+  text-align: center;
+}
+.business .advantage .advantage-list ul  li img{
+  margin-top: 25px;
+  margin-bottom: 10px;
 }
 .business .advantage .advantage-list ul  li:hover{
   cursor: pointer;
@@ -104,26 +114,29 @@ ul,li{
   transform:scale(1.2);
 }
 .business .advantage .advantage-list ul  li:hover p.title{
-  background: #61d2f3;
-  height: 70px;
-  line-height: 70px;
-  color: #fff;
+  height: 40px;
+  line-height: 40px;
   font-size: 18px;
 }
+.business .advantage .advantage-list ul  li:hover img{
+  margin-top: 15px;
+  margin-bottom: 10px;
+}
 .business .advantage .advantage-list ul  li:hover p:last-child{
   color: #333;
 }
 .business .advantage .advantage-list ul  li p{
   display: inline-block;
   width: 100%;
+  text-align: left;
+  margin-top: -20px;
 }
 .business .advantage .advantage-list ul  li p.title{
-  height: 58px;
-  line-height: 58px;
-  background: #e1eafc;
+  height: 28px;
+  line-height: 28px;
   text-align: center;
-  font-size: 14px;
-  color: #666;
+  font-size: 16px;
+  color: #333;
 }
 .business .advantage .advantage-list ul  li p:last-child{
   padding: 16px 20px;
@@ -132,7 +145,7 @@ ul,li{
   line-height: 20px;
 }
 .business .advantage .join{
-  margin-top: 85px;
+  margin-top: 75px;
 }
 .business .style{
   height: 700px;
@@ -140,6 +153,12 @@ ul,li{
 .business .style h3{
   padding-top: 80px;
 }
+.business .style .theme{
+  width: 80px;
+  height: 11px;
+  border-top:2px solid #ff8400;
+  margin: 0 auto;
+}
 .business .style .style-list{
   width: 100%;
   margin: 0 auto;
@@ -150,19 +169,20 @@ ul,li{
   width: 96%;
   margin: 0 auto;
   display: inline-block;
+  overflow: hidden;
 }
 .business .style .style-list ul li{
   float: left;
   width: 25%;
   text-align: center;
 }
-.business .style .style-list ul li:hover img{
+.business .style .style-list ul li:hover img {
   transform: scale(1.01);
 }
 /*.business .style .style-list ul li:hover p{
     color: #5078cb;
 }*/
-.business .style .style-list ul li img{
+.business .style .style-list ul li img {
   width: 108px;
   height: 108px;
 }
@@ -173,16 +193,15 @@ ul,li{
   margin-bottom: 20px;
 }
 .business .style .join{
-  margin-top: 15px;
+  margin-top: 25px;
 }
 .business  .join-us{
   background: #64c7f2;
   height: 630px;
-  margin-bottom: 40px;
 }
 .business  .join-us h3{
   color: #fff;
-  padding-top: 55px;
+  padding-top: 75px;
 }
 .business  .join-us .content{
   height: 660px;
@@ -214,12 +233,89 @@ ul,li{
   color: #fff;
 }
 .business  .join-us .join{
-  margin-top: 90px;
+  margin-top: 50px;
 }
 .business .join a:hover{
   transform: scale(1.1);
   transition: transform .2s ease-out;
 }
+.business  .contact-us{
+  background: url("/images/activity/contact01.png") no-repeat center;
+  height: 630px;
+  margin-top: -50px;
+}
+.business  .contact-us h3{
+  color: #fff;
+  padding-top: 100px;
+  margin-bottom: 70px;
+}
+.business .contact-us .contact-step{
+  background-color: #fff;
+  width: 900px;
+  height: 300px;
+  margin: 0 auto;
+  overflow: hidden;
+}
+.business .contact-us .contact-step img{
+  float: left;
+  padding: 90px 0px 0px 50px;
+}
+.business .contact-us .contact-step div {
+  float: right;
+  border-left: 1px solid #ccc;
+  height: 250px;
+  width: 470px;
+  padding: 75px 35px 0px 45px;
+  margin: 30px 0px 30px 0px;
+}
+.business .contact-us .contact-step .list-one {
+  background: url("/images/activity/contact03.png") no-repeat 2% 70%;
+  padding: 10px 0px 5px 50px;
+  font-size: 15px;
+}
+.business .contact-us .contact-step .list-two {
+  background: url("/images/activity/contact04.png") no-repeat 2% 70%;
+  padding: 10px 0px 5px 50px;
+  font-size: 15px;
+}
+.business .contact-us .contact-step .list-three {
+  background: url("/images/activity/contact05.png") no-repeat 2% 70%;
+  padding: 10px 0px 5px 50px;
+  font-size: 15px;
+}
+.business .function-hinting{
+  height: 200px;
+  margin: -30px 0px 35px 0px;
+}
+.business .function-hinting .hinting-list{
+  width: 100%;
+  margin: 0 auto;
+  display: inline-block;
+  margin-top: 55px;
+}
+.business .function-hinting .hinting-list ul{
+  width: 96%;
+  margin: 0 auto;
+  display: inline-block;
+}
+.business .function-hinting .hinting-list ul li{
+  float: left;
+  width: 25%;
+  text-align: center;
+}
+.business .function-hinting .hinting-list ul li img{
+  width: 108px;
+  height: 108px;
+}
+.business .function-hinting .hinting-list ul li p{
+  font-size: 16px;
+  color: #333;
+  line-height: 70px;
+  margin-bottom: 20px;
+}
+
+
+
 /*
 .business .join{
     animation:come_on 2s infinite;

pages/activity/business.vue

@@ -8,11 +8,12 @@
     <div class="session introduction">
       <div class="content">
         <h3>优软商城</h3>
+        <div class="theme"></div>
         <div class="text">
-          优软商城是由深圳市优软商城科技有限公司，为真正地解决电子信息行业的众多难题，秉持回归互联网精神的“分享与链接”，<br/>
-          基于垂直细分理念打造的一个独立的第三方电子交易商城。目前优软商城已经收录了3000家的原厂品牌，700多万现货型号.<br/>
-          针对电子信息行业的难题，优软商城将为客户提供更简单，更放心的解决方案。<br/>
-          我们严格把关供应商资质，从源头上杜绝虚假信息，做到付款交期如实，借助物流仓储的一站式服务帮您实现交易高效、库存无忧。<br/>
+         <p> 优软商城是由深圳市优软商城科技有限公司，为真正地解决电子信息行业的众多难题，秉持回归互联网精神的“分享与链接”，
+          基于垂直细分理念打造的一个独立的第三方电子交易商城。目前优软商城已经收录了3000家的原厂品牌，700多万现货型号.</p>
+          <p>针对电子信息行业的难题，优软商城将为客户提供更简单，更放心的解决方案。</p>
+          <p>我们严格把关供应商资质，从源头上杜绝虚假信息，做到付款交期如实，借助物流仓储的一站式服务帮您实现交易高效、库存无忧。</p>
         </div>
         <div class="join">
           <a href="https://account.ubtob.com/sso/register_mall?appId=mall&returnURL=https%3A%2F%2Fwww.usoftmall.com%2F%3FreturnURL%3Dhttps%253A%252F%252Fwww.usoftmall.com%252F
@@ -26,26 +27,32 @@
         <div class="advantage-list">
           <ul>
             <li>
+              <img src="/images/activity/advantage01.png" alt="">
               <p class="title">标准器件库</p>
               <p>原厂型号，从源头上杜绝假货，品质更放心，售后有保障。</p>
             </li>
             <li>
+              <img src="/images/activity/advantage02.png" alt="">
               <p class="title">元器件选型</p>
               <p>3000家原厂品牌，700万产品型号，一键搜索，选您所需。</p>
             </li>
             <li>
+              <img src="/images/activity/advantage03.png" alt="">
               <p class="title">现货交易</p>
               <p>现货交易，如期如实，一周交货，生产高效不断链。</p>
             </li>
             <li>
+              <img src="/images/activity/advantage04.png" alt="">
               <p class="title">库存寄售</p>
               <p>死库料号，无需开店，免费注册，即可上架售卖。</p>
             </li>
             <li>
+              <img src="/images/activity/advantage05.png" alt="">
               <p class="title">样品申领</p>
               <p>海量原装料号，先试用再下单，采购零误差。</p>
             </li>
             <li>
+              <img src="/images/activity/advantage06.png" alt="">
               <p class="title">电子社区</p>
               <p>齐聚全球大人、发烧友和行业专家，分享行业快讯，交流高新技术难题。</p>
             </li>
@@ -60,38 +67,39 @@
     <div class="session style">
       <div class="content">
         <h3>商家入驻  优势多多</h3>
+        <div class="theme"></div>
         <div class="style-list">
           <ul>
             <li>
-              <img src="/images/activity/style01.jpg" alt="">
+              <img  src="/images/activity/style01.jpg" alt="">
               <p>真实客户</p>
             </li>
             <li>
-              <img src="/images/activity/style02.jpg" alt="">
+              <img   src="/images/activity/style02.jpg" alt="">
               <p>免费入驻</p>
             </li>
             <li>
-              <img src="/images/activity/style03.jpg" alt="">
+              <img   src="/images/activity/style03.jpg" alt="">
               <p>免费广告</p>
             </li>
             <li>
-              <img src="/images/activity/style04.jpg" alt="">
+              <img   src="/images/activity/style04.jpg" alt="">
               <p>海量订单</p>
             </li>
             <li>
-              <img src="/images/activity/style05.jpg" alt="">
+              <img  src="/images/activity/style05.jpg" alt="">
               <p>极速上传</p>
             </li>
             <li>
-              <img src="/images/activity/style06.jpg" alt="">
+              <img  src="/images/activity/style06.jpg" alt="">
               <p>零佣金</p>
             </li>
             <li>
-              <img src="/images/activity/style07.jpg" alt="">
+              <img  src="/images/activity/style07.jpg" alt="">
               <p>库存寄售</p>
             </li>
             <li>
-              <img src="/images/activity/style08.jpg" alt="">
+              <img  src="/images/activity/style08.jpg" alt="">
               <p>订单通知</p>
             </li>
           </ul>
@@ -125,6 +133,45 @@
         </div>
       </div>
     </div>
+    <div class="session contact-us">
+      <div class="content">
+        <h3>联系我们</h3>
+        <div class="contact-step">
+          <img src="/images/activity/contact02.png" alt="">
+          <div>
+           <ul>
+             <li class="list-one">地址：深圳市南山区科技南五路5号英唐大厦1楼</li>
+             <li class="list-two">邮箱：yrsc@usoftchina.com</li>
+             <li class="list-three">电话：400-830-1818</li>
+           </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="session function-hinting">
+      <div class="content">
+        <div class="hinting-list">
+          <ul>
+            <li>
+              <img src="/images/activity/enter01.png" alt="">
+              <p>订单查询</p>
+            </li>
+            <li>
+              <img src="/images/activity/enter02.png" alt="">
+              <p>器件选型</p>
+            </li>
+            <li>
+              <img src="/images/activity/enter03.png" alt="">
+              <p>快速入住</p>
+            </li>
+            <li>
+              <img src="/images/activity/enter04.png" alt="">
+              <p>品牌百科</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script>