招商注册

assets/scss/activity.css

@@ -0,0 +1,242 @@
+/*招商注册*/
+ul,li{
+  list-style: none;
+}
+.business{
+  width: 100%;
+  margin: 0 auto;
+}
+.business .banner{
+  width: 100%;
+  height: 676px;
+  margin: 0 auto;
+  background: url("/images/activity/business-banner.jpg") no-repeat center;
+}
+@media screen and (max-width: 1366px) {
+  .business .banner{
+    height: 560px;
+    background-size: 100% 100%;
+  }
+}
+.business  .session{
+  width: 100%;
+  margin: 0 auto;
+}
+.business  .session .content{
+  width: 1190px;
+  margin: 0 auto;
+}
+.business .introduction{
+  margin-top: 75px;
+}
+.business h3{
+  text-align: center;
+  font-size: 30px;
+  margin: 0;
+}
+.business .introduction .text{
+  font-size: 16px;
+  color: #666;
+  line-height: 35px;
+  margin: 50px 130px 140px 130px;
+  /*opacity:0;
+  transform:scale(0);
+  transition:.5s 0.1s;*/
+}
+.business .introduction.active .text{
+  opacity:1 !important; transform:none !important;
+}
+.business .join{
+  text-align: center;
+  width: 100%;
+  margin: 0 auto;
+}
+.business .introduction .join{
+  margin-bottom: 45px;
+}
+.business .join a{
+  width: 154px;
+  height: 46px;
+  display: inline-block;
+  line-height: 46px;
+  text-align: center;
+  background: #f51f1f;
+  font-size: 18px;
+  border-radius: 25px;
+  color: #fff;
+}
+.business .join a:hover{
+  background: #d32526;
+}
+.business .advantage{
+  background: #6a99fa;
+  height: 630px;
+}
+.business .advantage h3{
+  color: #fff;
+  padding: 95px 0 95px 0;
+}
+.business .advantage .advantage-list{
+  width: 100%;
+  margin: 0 auto;
+  display: inline-block;
+}
+.business .advantage .advantage-list ul{
+  width: 100%;
+  margin: 0 auto;
+  display: inline-block;
+  height: 235px;
+}
+.business .advantage .advantage-list ul  li{
+  float: left;
+  width: 174px;
+  height: 206px;
+  border-radius: 10px;
+  background: #fff;
+  margin: 0 6px;
+  overflow: hidden;
+  position: relative;
+  /*opacity:0;
+  transform:scale(0);
+  transition:.5s 0.1s;*/
+}
+/*.business .advantage.active .advantage-list ul  li{
+    opacity:1 !important; transform:none !important;
+}*/
+.business .advantage .advantage-list ul  li:hover{
+  cursor: pointer;
+  width: 200px;
+  height: 233px;
+  margin: 0 10px;
+  top: -16px;
+  transition: top 1s ease-out;
+}
+.business .advantage .advantage-list ul  li:hover p.title{
+  background: #61d2f3;
+  height: 70px;
+  line-height: 70px;
+  color: #fff;
+  font-size: 18px;
+}
+.business .advantage .advantage-list ul  li:hover p:last-child{
+  color: #333;
+}
+.business .advantage .advantage-list ul  li p{
+  display: inline-block;
+  width: 100%;
+}
+.business .advantage .advantage-list ul  li p.title{
+  height: 58px;
+  line-height: 58px;
+  background: #e1eafc;
+  text-align: center;
+  font-size: 14px;
+  color: #666;
+}
+.business .advantage .advantage-list ul  li p:last-child{
+  padding: 16px 20px;
+  color: #999;
+  font-size: 14px;
+  line-height: 20px;
+}
+.business .advantage .join{
+  margin-top: 85px;
+}
+.business .style{
+  height: 700px;
+}
+.business .style h3{
+  padding-top: 80px;
+}
+.business .style .style-list{
+  width: 100%;
+  margin: 0 auto;
+  display: inline-block;
+  margin-top: 55px;
+}
+.business .style .style-list ul{
+  width: 96%;
+  margin: 0 auto;
+  display: inline-block;
+}
+.business .style .style-list ul li{
+  float: left;
+  width: 25%;
+  text-align: center;
+}
+.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{
+  width: 108px;
+  height: 108px;
+}
+.business .style .style-list ul li p{
+  font-size: 16px;
+  color: #333;
+  line-height: 70px;
+  margin-bottom: 20px;
+}
+.business .style .join{
+  margin-top: 15px;
+}
+.business  .join-us{
+  background: #64c7f2;
+  height: 630px;
+  margin-bottom: 40px;
+}
+.business  .join-us h3{
+  color: #fff;
+  padding-top: 55px;
+}
+.business  .join-us .content{
+  height: 660px;
+  background: url("/images/activity/business.png") no-repeat center;
+}
+.business  .join-us  .join-step{
+  width: 94%;
+  margin: 0 auto;
+  margin-top: 307px;
+  display: inline-block;
+}
+.business  .join-us  .join-step div{
+  float: left;
+  width: 28%;
+  text-align: center;
+}
+.business  .join-us  .join-step div:first-child{
+  margin-left: 125px;
+}
+.business  .join-us  .join-step div h5{
+  margin: 0;
+  line-height: 30px;
+  font-size: 18px;
+  color: #fff;
+}
+.business  .join-us  .join-step div p{
+  line-height: 20px;
+  font-size: 14px;
+  color: #fff;
+}
+.business  .join-us .join{
+  margin-top: 90px;
+}
+.business .join a:hover{
+  transform: scale(1.1);
+  transition: transform .2s ease-out;
+}
+/*
+.business .join{
+    animation:come_on 2s infinite;
+}
+@keyframes come_on {
+    0% {
+        transform: scale(1); }
+    50% {
+        transform: scale(1.04); }
+    100% {
+        transform: scale(1); }
+}*/

pages/activity/business.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="business">
+    <!--banner-->
+    <div class="banner"></div>
+    <!--介绍-->
+    <div class="session introduction">
+      <div class="content">
+        <h3>优软商城</h3>
+        <div class="text">
+          优软商城是由深圳市优软商城科技有限公司，为真正地解决电子信息行业的众多难题，秉持回归互联网精神的“分享与链接”，<br/>
+          基于垂直细分理念打造的一个独立的第三方电子交易商城。目前优软商城已经收录了3000家的原厂品牌，700多万现货型号.<br/>
+          针对电子信息行业的难题，优软商城将为客户提供更简单，更放心的解决方案。<br/>
+          我们严格把关供应商资质，从源头上杜绝虚假信息，做到付款交期如实，借助物流仓储的一站式服务帮您实现交易高效、库存无忧。<br/>
+        </div>
+        <div class="join">
+          <a href="http://account.ubtob.com/sso/register?returnURL=http%253A%252F%252Fwww.usoftmall.com%252Flogin%252Fproxy&appId=mall" target="_blank">立即入驻</a>
+        </div>
+      </div>
+    </div>
+    <div class="session advantage">
+      <div class="content">
+        <h3>六大特色功能</h3>
+        <div class="advantage-list">
+          <ul>
+            <li>
+              <p class="title">标准器件库</p>
+              <p>原厂型号，从源头上杜绝假货，品质更放心，售后有保障。</p>
+            </li>
+            <li>
+              <p class="title">元器件选型</p>
+              <p>3000家原厂品牌，700万产品型号，一键搜索，选您所需。</p>
+            </li>
+            <li>
+              <p class="title">现货交易</p>
+              <p>现货交易，如期如实，一周交货，生产高效不断链。</p>
+            </li>
+            <li>
+              <p class="title">库存寄售</p>
+              <p>死库料号，无需开店，免费注册，即可上架售卖。</p>
+            </li>
+            <li>
+              <p class="title">样品申领</p>
+              <p>海量原装料号，先试用再下单，采购零误差。</p>
+            </li>
+            <li>
+              <p class="title">电子社区</p>
+              <p>齐聚全球大人、发烧友和行业专家，分享行业快讯，交流高新技术难题。</p>
+            </li>
+          </ul>
+        </div>
+        <div class="join">
+          <a href="http://account.ubtob.com/sso/register?returnURL=http%253A%252F%252Fwww.usoftmall.com%252Flogin%252Fproxy&appId=mall" target="_blank">立即入驻</a>
+        </div>
+      </div>
+    </div>
+    <div class="session style">
+      <div class="content">
+        <h3>商家入驻  优势多多</h3>
+        <div class="style-list">
+          <ul>
+            <li>
+              <img src="/images/activity/style01.jpg" alt="">
+              <p>真实客户</p>
+            </li>
+            <li>
+              <img src="/images/activity/style02.jpg" alt="">
+              <p>免费入驻</p>
+            </li>
+            <li>
+              <img src="/images/activity/style03.jpg" alt="">
+              <p>免费广告</p>
+            </li>
+            <li>
+              <img src="/images/activity/style04.jpg" alt="">
+              <p>海量订单</p>
+            </li>
+            <li>
+              <img src="/images/activity/style05.jpg" alt="">
+              <p>极速上传</p>
+            </li>
+            <li>
+              <img src="/images/activity/style06.jpg" alt="">
+              <p>零佣金</p>
+            </li>
+            <li>
+              <img src="/images/activity/style07.jpg" alt="">
+              <p>库存寄售</p>
+            </li>
+            <li>
+              <img src="/images/activity/style08.jpg" alt="">
+              <p>订单通知</p>
+            </li>
+          </ul>
+        </div>
+        <div class="join">
+          <a href="http://account.ubtob.com/sso/register?returnURL=http%253A%252F%252Fwww.usoftmall.com%252Flogin%252Fproxy&appId=mall" target="_blank">立即入驻</a>
+        </div>
+      </div>
+    </div>
+    <div class="session join-us">
+      <div class="content">
+        <h3>成为优软商城卖家</h3>
+        <div class="join-step">
+          <div>
+            <h5>申请成为卖家</h5>
+            <p>提交入驻申请</p>
+          </div>
+          <div>
+            <h5>资质审核</h5>
+            <p>上传企业认证资料</p>
+          </div>
+          <div>
+            <h5>开通后台</h5>
+            <p>审核通过，上传产品、报价</p>
+          </div>
+        </div>
+        <div class="join">
+          <a href="http://account.ubtob.com/sso/register?returnURL=http%253A%252F%252Fwww.usoftmall.com%252Flogin%252Fproxy&appId=mall" target="_blank">立即入驻</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    layout: 'main'
+  }
+</script>
+<style scoped>
+  @import '~assets/scss/activity.css';
+</style>