Merge branch 'feature/gaoxm-btbBusiness-0601' into dev

components/btbBusiness/banner.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="banner">
+    <div class="content">
+      <p class="notice" v-if="showNotice"><marquee scrollAmount=1 width=501 direction="left" behavior="alternate">B2B商务】和【优软商城】牵手成功！大家可以更全面、便捷地了解和享受平台的各项服务咯!</marquee><a @click="showNotice = false"><img src="/images/btbBusiness/close.png"></a></p>
+      <div class="clearfix">
+       <!-- <h4 class="pull-left">B2B商务</h4>-->
+        <a class="enter" @click="experience">立即体验</a>
+      </div>
+      <p class="first">十年深耕，携您飞跃<br>
+        优软B2B商务，为您提供更强大的功能服务</p>
+      <p>优软平台构造了面向制造业和流通业的垂直B2B，不仅仅提供平台服务，还包括企业内部管理、存货服务、人力资源等。优软平台建立了 生产商与供应商之间形成的供需关系，通过一系列工具辅助供需双方形成交易。这是一个企业集合的云端服务，企业</p>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'BannerView',
+    data () {
+        return {
+            showNotice: true
+        }
+    },
+    methods: {
+      experience () {
+        if (this.user.logged) {
+          window.location.href = 'http://uas.ubtob.com/#/index'
+        } else {
+          this.$router.push('/auth/login')
+        }
+      }
+    }
+  }
+</script>
+<style type="text/scss" lang="scss" scoped>
+  .banner{
+    width: 100%;
+    height: 481px;
+    min-width: 1190px;
+    background: url('/images/btbBusiness/btbBanner.png')no-repeat center center;
+    .content{
+      width:1190px;
+      position: relative;
+      border: 1px solid transparent;
+      margin: 0 auto;
+      margin-top: -1px;
+      padding: 0;
+      .notice{
+        position: absolute;
+        top: 10px;
+        left: 0px;
+        width: 1190px;
+        height: 30px;
+        line-height: 30px;
+        font-size: 12px;
+        color: #fdfbfb;
+        border-radius: 4px;
+        padding-left: 30px;
+        background-color: rgba(255, 255, 255, 0.18);
+        img{
+          float: right;
+          margin: 5px 10px 0px 0px;
+        }
+        &::before{
+           content: '';
+           display: inline-block;
+           position: absolute;
+           top: 7px;
+           left: 10px;
+           margin-right: 10px;
+           width: 20px;
+           height: 20px;
+           background: url('/images/btbBusiness/alert.png') no-repeat;
+         }
+      }
+      h4{
+        margin: 120px 0px 60px 0px;
+        font-family: MicrosoftYaHei-Bold;
+        font-size: 48px;
+        line-height: 40px;
+        letter-spacing: 2px;
+        color: #fff600;
+      }
+      .enter{
+        display: inline-block;
+        padding-left: 21px;
+        margin: 134px 0px 60px 230px;
+        width: 148px;
+        height: 38px;
+        line-height: 38px;
+        background-color: #15d2fc;
+        border-radius: 19px;
+        font-size: 18px;
+        color: #fefefe;
+        font-family: MicrosoftYaHei-Bold;
+        &::after{
+          content: '';
+          display: inline-block;
+          position: relative;
+          top: 4px;
+          left: 15px;
+          width: 20px;
+          height: 20px;
+          background: url('/images/btbBusiness/arrow.png') no-repeat;
+        }
+        &:hover{
+           background: #059ec0;
+        }
+      }
+      p.first{
+        width: 594px;
+        font-size: 18px;
+        letter-spacing: 1px;
+        color: #fcfdfe;
+        line-height: 33px;
+      }
+      p:last-child{
+        width: 582px;
+        line-height: 25px;
+        color: #feffff;
+      }
+    }
+  }
+</style>

components/btbBusiness/features.vue

@@ -0,0 +1,297 @@
+<template>
+  <div class="features">
+    <div class="container">
+      <div class="top clearfix">
+        <div class="title">
+          <p>Five major features</p>
+          <h2>五大特点</h2>
+        </div>
+      </div>
+      <ul class="content clearfix list-unstyled">
+        <li v-for="(data, index) in featureData" :class="{'moveTop': isTop}"
+            @mouseenter="isTop = true"
+            @mouseleave="isTop = false">
+            <div>
+              <p>{{data.illustrationF}}</p>
+              <p class="illustration">{{data.illustrationS}}</p>
+            </div>
+         </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'FiveFeature',
+    data () {
+      return {
+        featureData: [{
+          illustrationF: '颠覆传统ERP及',
+          illustrationS: '管理软件市场模式'
+        }, {
+          illustrationF: '平台用户的链式',
+          illustrationS: '反应式发展'
+        }, {
+          illustrationF: '企业信息化',
+          illustrationS: '全面解决方案'
+        }, {
+          illustrationF: '全过程的移动',
+          illustrationS: '互联解决方案'
+        }, {
+          illustrationF: ' 全智能的',
+          illustrationS: '交易平台'
+        }, {
+          illustrationF: '平台用户的链式',
+          illustrationS: '反应式发展'
+        }],
+        timerIndex: 0,
+        isTop: false
+      }
+    }
+//    mounted () {
+//      this.$nextTick(() => {
+//        this.changeInterval(true)
+//      })
+//    },
+//    methods: {
+//      changeInterval: function (flag) {
+//        if (flag) {
+//          this.timer = setInterval(() => {
+//            this.timerIndex ++
+//            if (this.timerIndex % 2 === 0) {
+//              this.isTop = true
+//              this.isBottom = false
+//            } else {
+//              this.isTop = false
+//              this.isBottom = true
+//            }
+//          }, 3000)
+//        } else {
+//          clearInterval(this.timer)
+//        }
+//      }
+//    }
+  }
+</script>
+
+<style type="text/scss" lang="scss" scoped>
+  @keyframes featureTop {
+    0%{transform: translate3d(0, 0px, 0);}
+    50%{transform: translate3d(0, 40px, 0);}
+    100%{transform: translate3d(0, 0px, 0);}
+  }
+  @-webkit-keyframes featureTop {
+    0%{transform: translate3d(0, 0px, 0);}
+    50%{transform: translate3d(0, 40px, 0);}
+    100%{transform: translate3d(0, 0px, 0);}
+  }
+  @-moz-keyframes featureTop {
+    0%{transform: translate3d(0, 0px, 0);}
+    50%{transform: translate3d(0, 40px, 0);}
+    100%{transform: translate3d(0, 0px, 0);}
+  }
+  @-o-keyframes featureTop {
+    0%{transform: translate3d(0, 0px, 0);}
+    50%{transform: translate3d(0, 40px, 0);}
+    100%{transform: translate3d(0, 0px, 0);}
+  }
+
+
+  @keyframes featureBottom {
+    0%{transform: translate3d(0, 40px, 0);}
+    50%{transform: translate3d(0, 0px, 0);}
+    100%{transform: translate3d(0, 40px, 0);}
+  }
+  @-webkit-keyframes featureBottom {
+    0%{transform: translate3d(0, 40px, 0);}
+    50%{transform: translate3d(0, 0px, 0);}
+    100%{transform: translate3d(0, 40px, 0);}
+  }
+  @-moz-keyframes featureBottom {
+    0%{transform: translate3d(0, 40px, 0);}
+    50%{transform: translate3d(0, 0px, 0);}
+    100%{transform: translate3d(0, 40px, 0);}
+  }
+  @-o-keyframes featureBottom {
+    0%{transform: translate3d(0, 40px, 0);}
+    50%{transform: translate3d(0, 0px, 0);}
+    100%{transform: translate3d(0, 40px, 0);}
+  }
+  .features{
+    width: 100%;
+    min-width: 1190px;
+    height: 464px;
+    background-color: #f7f7f7;
+    .container{
+      width: 1190px;
+      margin: 0 auto;
+      .top{
+        padding-top:30px;
+        margin-bottom:50px;
+        .title{
+          margin: 0 auto;
+          text-align: center;
+          width:215px;
+          border-bottom:1px solid #ff7070;
+          p{
+            margin:0;
+            font-size: 14px;
+            color: #666;
+          }
+          h2{
+            font-size: 32px;
+            margin:0;
+            line-height: 46px;
+            color: #333;
+          }
+          &::before{
+            content: '';
+            display:block;
+            position:relative;
+            left:55px;
+            top:61px;
+            width:105px;
+            height:1px;
+            background: #00caff;
+          }
+          &::after{
+            content: '';
+            display:block;
+            position:relative;
+            left:55px;
+            top:4px;
+            width:105px;
+            height:1px;
+            background: #4391f7;
+          }
+        }
+
+      }
+      .content{
+        width: 1140px;
+        height: 228px;
+        margin: 0 auto;
+        padding-left: 3px;
+        li{
+          float: left;
+          height: 228px;
+          width: 165px;
+          margin-right: 29px;
+          &:nth-child(6){
+            margin-right: 0px;
+          }
+          &:nth-child(2), &:nth-child(4), &:nth-child(6){
+            div{
+              top: 0px;
+              transform: translate3d(0, 40px, 0);
+              animation: featureTop 15s linear infinite;
+              -moz-animation: featureTop 15s linear infinite;
+              -o-animation: featureTop 15s linear infinite;
+              -webkit-animation: featureTop 15s linear infinite;
+            }
+
+          }
+          &:nth-child(1), &:nth-child(3), &:nth-child(5){
+            div{
+              top: 0px;
+              transform: translate3d(0, 0px, 0);
+              -webkit-transform-style: preserve-3d;
+              -webkit-backface-visibility: hidden;
+              animation: featureBottom 15s linear infinite;
+              -moz-animation: featureBottom 15s linear infinite;
+              -o-animation: featureBottom 15s linear infinite;
+              -webkit-animation: featureBottom 15s linear infinite;
+            }
+          }
+          div{
+            width: 163px;
+            height: 186px;
+            padding-top:80px;
+            position: relative;
+            background: url('/images/btbBusiness/feature-bg0.png') no-repeat center;
+            &:hover{
+              cursor: pointer;
+              background: url('/images/btbBusiness/feature-bg1.png') no-repeat center;
+              p{
+                color: #2d84fd;
+              }
+            }
+            p {
+              margin: 0px;
+              font-size: 18px;
+              text-align: center;
+              width: 100%;
+              color: #fff;
+              &:last-child{
+                font-weight: bold;
+              }
+            }
+          }
+        }
+        .moveTop {
+          &:nth-child(2), &:nth-child(4), &:nth-child(6) {
+            div {
+              animation-play-state: paused;
+              -webkit-animation-play-state: paused;
+              transform: translateZ(0);
+            }
+
+          }
+          &:nth-child(1), &:nth-child(3), &:nth-child(5) {
+            div {
+              animation-play-state: paused;
+              -webkit-animation-play-state: paused;
+              transform: translateZ(0);
+            }
+          }
+        }
+       /* .move{
+          &:nth-child(2), &:nth-child(4), &:nth-child(6){
+            div{
+              top: 40px;
+              animation: featureTop 3s linear infinite;
+              -moz-animation: featureTop 3s linear infinite;
+              -o-animation: featureTop 3s linear infinite;
+              -webkit-animation: featureTop 3s linear infinite;
+            }
+          }
+          &:nth-child(1), &:nth-child(3), &:nth-child(5){
+            div{
+              top: 0px;
+              animation: featureBottom 3s linear infinite;
+              -moz-animation: featureBottom 3s linear infinite;
+              -o-animation: featureBottom 3s linear infinite;
+              -webkit-animation: featureBottom 3s linear infinite;
+
+            }
+          }
+        }*/
+       /* .moveBottom {
+            &:nth-child(2), &:nth-child(4), &:nth-child(6) {
+              div {
+                top: 0px;
+              }
+            }
+            &:nth-child(1), &:nth-child(3), &:nth-child(5) {
+              div {
+                top: 40px;
+              }
+            }
+        }
+        .moveTop{
+           &:nth-child(2), &:nth-child(4), &:nth-child(6){
+             div{
+               top: 40px;
+             }
+           }
+           &:nth-child(1), &:nth-child(3), &:nth-child(5){
+             div{
+               top: 0px;
+             }
+           }
+       }*/
+      }
+    }
+  }
+</style>

components/btbBusiness/index.js

@@ -0,0 +1,6 @@
+import Banner from './banner'
+import PlatformService from './service'
+import FiveFeatures from './features'
+import AuxiliaryMeans from './means'
+
+export { Banner, PlatformService, FiveFeatures, AuxiliaryMeans }

components/btbBusiness/means.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="means">
+    <div class="container">
+      <div class="top clearfix">
+        <div class="title">
+          <p>Auxiliary means</p>
+          <h2>辅助工具</h2>
+        </div>
+      </div>
+      <ul class="content clearfix list-unstyled">
+       <li>
+         <h4 class="first">UAS系统</h4>
+         <p>UAS通过为客户提供信息化产品以及咨询服务，帮助客户在多组织、跨地域快速发展时从容地管理自己的业务，同时帮助客户累积信息和知识，使客户能在坚实基础上健康成长。<br>
+         基于对客户需求独特的理解，为客户建立专业、有效、具协同性和集成性管理系统，从而帮助客户简化日常运作管理，最大化地提升客户竞争力。<br>
+         UAS建立在B/S架构上，包括ERP、OA、CRM、HR、PLM等模块。UAS同时还能支持集团公司的运作，区分多公司、多工厂的模式</p></li>
+        <li><img src="/images/btbBusiness/dynamic-graph.gif"></li>
+        <li>
+          <h4>优软商城</h4>
+          <p style="margin-bottom: 15px;">优软商城（UsoftMall）成立于2016年，总部位于南山区高新技术产业园科技南5路英唐大厦一楼。 优软商城是由深圳市优软商城科技有限公司，为真正地解决电子信息行业的众多难题，秉持回归互联网精神的 “分享与链接”， 基于垂直细分理念打造的一个全球询价共享平台。 优软商城智能询价求购服务基于大数据结合人工智能，智能自动匹配商家询价求购信息，让供应商商机无限拓展，让采购商省时省力更省心。 目前我们拥有7千多家企业用户 7500家的原厂品牌，拥有超过1100万现货型号，交易额月均8亿，2017年公司产业互联网平台“优软云” GMV 已破100亿元，2018年目标有望超过300 亿元。 优软商城的主要服务有：询价求购、入驻开店、供应商资源对接、品牌墙、标准器件库、器件选型、垫资代采 。</p>
+          <h4>优企云服</h4>
+          <p>优软SAAS是UAS在云模式下的精简版，核心是给企业提供与优软B2B平台进行有效对接的内部管理软件。<br>
+            制造业及流通业的中小规模的企业，通过租用方式，在优软SAAS上开通企业数据库，进行内部的物流、
+            财务、制造、流程等的管控。</p>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'AuxiliaryMeans',
+    data () {
+      return {
+        featureData: [{
+          illustrationF: '颠覆传统ERP及',
+          illustrationS: '管理软件市场模式'
+        }, {
+          illustrationF: '平台用户的链式',
+          illustrationS: '反应式发展'
+        }, {
+          illustrationF: '企业信息化',
+          illustrationS: '全面解决方案'
+        }, {
+          illustrationF: '全过程的移动',
+          illustrationS: '互联解决方案'
+        }, {
+          illustrationF: ' 全智能的',
+          illustrationS: '交易平台'
+        }, {
+          illustrationF: '平台用户的链式',
+          illustrationS: '反应式发展'
+        }]
+      }
+    }
+  }
+</script>
+<style type="text/scss" lang="scss" scoped>
+  .means{
+    width: 100%;
+    min-width: 1190px;
+    height: 604px;
+    .container{
+      width: 1190px;
+      margin: 0 auto;
+      .top{
+        padding-top:30px;
+        margin-bottom:50px;
+        .title{
+          margin: 0 auto;
+          text-align: center;
+          width:215px;
+          border-bottom:1px solid #ff7070;
+          p{
+            margin:0;
+            font-family: FZLTXHK;
+            font-size: 14px;
+            color: #666;
+          }
+          h2{
+            font-size: 32px;
+            margin:0;
+            line-height: 46px;
+            color: #333;
+          }
+          &::before{
+            content: '';
+            display:block;
+            position:relative;
+            left:55px;
+            top:61px;
+            width:105px;
+            height:1px;
+            background: #00caff;
+          }
+          &::after{
+            content: '';
+            display:block;
+            position:relative;
+            left:55px;
+            top:4px;
+            width:105px;
+            height:1px;
+            background: #4391f7;
+          }
+        }
+
+      }
+      .content{
+        width: 100%;
+        margin: 0 auto;
+        padding-left:2px;
+        li{
+          float: left;
+          margin-right: 20px;
+          width: 366px;
+          h4{
+            font-family: MicrosoftYaHei-Bold !important;
+            color: #2c7adf;
+            font-size: 16px;
+            margin: 0px 0px 15px 0px;
+           &.first{
+              margin: 0px 0px 15px 5px;
+            }
+          }
+          p{
+            font-size: 12px;
+            color: #666666;
+            line-height: 20px;
+            /*word-break: break-all;*/
+            white-space:pre-line;
+            word-wrap:break-word;
+            word-break:break-all;
+          }
+          &:nth-child(1){
+            p{
+              text-align: right;
+            }
+          }
+          &:nth-child(2){
+            width: 399px;
+          }
+          &:nth-child(3){
+            width: 376px;
+            margin-right: 0px;
+          }
+        }
+      }
+    }
+  }
+</style>

components/btbBusiness/service.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="service">
+    <div class="container">
+      <div class="top clearfix">
+        <div class="title">
+          <p>Platform service</p>
+          <h2>平台服务</h2>
+        </div>
+      </div>
+      <ul class="content clearfix list-unstyled">
+        <li v-for="(data, index) in serviceData" @click="enterModule(index)"
+            @mouseenter="setStatus('in', index)"
+            @mouseleave="setStatus('out', index)">
+          <div>
+            <img :src="data.imgUrl">
+          </div>
+          <div>
+            <h2>{{data.chinaName}}</h2>
+            <p>{{data.englishName}}</p>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'PlatformService',
+    data () {
+      return {
+        serviceData: [{
+            imgUrl: '/images/btbBusiness/customer0.png',
+            englishName: 'customer service',
+            chinaName: '客户服务',
+            enterUrl: 'http://uas.ubtob.com/serve'
+          }, {
+            imgUrl: '/images/btbBusiness/procurement0.png',
+            englishName: 'Procurement management',
+            chinaName: '采购管理',
+            enterUrl: 'http://uas.ubtob.com/#/purc/order'
+          }, {
+            imgUrl: '/images/btbBusiness/sales0.png',
+            englishName: 'Sales management',
+            chinaName: '销售管理',
+            enterUrl: 'http://uas.ubtob.com/#/sale/order'
+          }, {
+            imgUrl: '/images/btbBusiness/subcontract0.png',
+            englishName: 'subcontract',
+            chinaName: '委外加工',
+            enterUrl: 'http://uas.ubtob.com/#/sale/maketodo/makeorder'
+          }, {
+            imgUrl: '/images/btbBusiness/quality0.png',
+            englishName: 'Quality Control',
+            chinaName: '品质管理',
+            enterUrl: 'http://uas.ubtob.com/#/sale/MRB'
+          }, {
+            imgUrl: '/images/btbBusiness/financial0.png',
+            englishName: 'Financial docking',
+            chinaName: '财务对接',
+            enterUrl: 'http://uas.ubtob.com/#/fa/apBill'
+          }]
+      }
+    },
+    methods: {
+      // 鼠标移入更换图标
+      setStatus: function (type, index) {
+        switch (index) {
+          case 0:
+            this.serviceData[index].imgUrl = type === 'in' ? '/images/btbBusiness/customer1.png' : '/images/btbBusiness/customer0.png'
+            break
+          case 1:
+            this.serviceData[index].imgUrl = type === 'in' ? '/images/btbBusiness/procurement1.png' : '/images/btbBusiness/procurement0.png'
+            break
+          case 2:
+            this.serviceData[index].imgUrl = type === 'in' ? '/images/btbBusiness/sales1.png' : '/images/btbBusiness/sales0.png'
+            break
+          case 3:
+            this.serviceData[index].imgUrl = type === 'in' ? '/images/btbBusiness/subcontract1.png' : '/images/btbBusiness/subcontract0.png'
+            break
+          case 4:
+            this.serviceData[index].imgUrl = type === 'in' ? '/images/btbBusiness/quality1.png' : '/images/btbBusiness/quality0.png'
+            break
+          case 5:
+            this.serviceData[index].imgUrl = type === 'in' ? '/images/btbBusiness/financial1.png' : '/images/btbBusiness/financial0.png'
+            break
+        }
+      },
+      enterModule: function (index) {
+        window.location.href = this.serviceData[index].enterUrl
+//        if (this.user.logged) {
+//
+//        } else {
+//          this.$router.push('/auth/login')
+//        }
+      }
+    }
+  }
+</script>
+<style type="text/scss" lang="scss">
+  .service{
+    height: 450px;
+    .container{
+      width: 1190px;
+      margin: 0 auto;
+      .top{
+        padding-top:30px;
+        margin-bottom:50px;
+        .title{
+          margin: 0 auto;
+          text-align: center;
+          width:215px;
+          border-bottom:1px solid #ff7070;
+          p{
+            margin:0;
+            font-family: FZLTXHK;
+            font-size: 14px;
+            color: #666;
+          }
+          h2{
+            font-size: 32px;
+            margin:0;
+            line-height: 46px;
+            color: #333;
+          }
+          &::before{
+            content: '';
+            display:block;
+            position:relative;
+            left:55px;
+            top:61px;
+            width:105px;
+            height:1px;
+            background: #00caff;
+          }
+          &::after{
+            content: '';
+            display:block;
+            position:relative;
+            left:55px;
+            top:4px;
+            width:105px;
+            height:1px;
+            background: #4391f7;
+          }
+        }
+
+      }
+      .content{
+        width: 1096px;
+        margin: 0 auto;
+        li{
+          float: left;
+          width: 225px;
+          margin: 0px 170px 0px 2px;
+          &:nth-child(2), &:nth-child(5) {
+            width: 295px;
+          }
+          &:nth-child(3), &:nth-child(6) {
+           margin-right: 0;
+          }
+          &:nth-child(4), &:nth-child(5), &:nth-child(6) {
+            margin-top: 82px;
+          }
+          &:hover{
+            cursor: pointer;
+          }
+          div{
+            float: left;
+             h2{
+               margin: 0;
+               position: relative;
+               top: 10px;
+               left: 20px;
+               color: #666;
+               font-size: 20px;
+             }
+             p{
+               margin: 0px;
+               position: relative;
+               top: 12px;
+               left: 20px;
+               font-size: 10px;
+             }
+          }
+        }
+      }
+    }
+  }
+</style>

components/main/Nav.vue

@@ -14,6 +14,10 @@
       <nuxt-link to="/supplier" class="item">
         <span>供应商</span>
       </nuxt-link>
+      <nuxt-link to="/btbBusiness" class="item">
+        <span>B2B商务</span>
+        <img class="new-animate" src="/images/all/hot.png" alt="">
+      </nuxt-link>
       <a class="item expand-item" :class="{'active': isActive}">
         <span>{{name}}
           <i class="iconfont icon-arrow-down"></i>

nuxt.config.js

@@ -1,12 +1,11 @@
 const path = require('path')
 const isProdMode = Object.is(process.env.NODE_ENV, 'production')
 // b2c后台
-const baseUrl = process.env.BASE_URL || (isProdMode ? 'http://api.usoftmall.com/' : 'http://10.1.51.124:8080/platform-b2c')
+const baseUrl = process.env.BASE_URL || (isProdMode ? 'http://api.usoftmall.com/' : 'http://192.168.253.121:9090/platform-b2c')
 // 公共询价
 const commonUrl = process.env.COMMON_URL || (isProdMode ? 'https://api-inquiry.usoftmall.com/' : 'http://218.17.158.219:24000/')
 // 公共物料
 const materialUrl = process.env.MATERIAL_URL || (isProdMode ? 'https://api-product.usoftmall.com/' : 'http://218.17.158.219:24000/')
-
 module.exports = {
   router: {
     middleware: 'check-auth',

pages/btbBusiness/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="btb-business">
+    <banner/>
+    <platform-service/>
+    <five-features/>
+    <auxiliary-means/>
+  </div>
+</template>
+<script>
+  import { Banner, PlatformService, FiveFeatures, AuxiliaryMeans } from '~components/btbBusiness'
+  export default {
+    name: 'btbBusiness',
+    layout: 'main',
+    fetch ({store}) {
+      return Promise.all([
+        store.dispatch('supplier/loadVendorList', {page: 1, size: 20}),
+        store.dispatch('supplier/loadVendorAll', {page: 1, size: 20}),
+        store.dispatch('loadBanners', {type: 'home'}),
+        store.dispatch('loadProductKinds', { id: 0 })
+      ])
+    },
+    components: {
+      Banner,
+      PlatformService,
+      FiveFeatures,
+      AuxiliaryMeans
+    },
+    methods: {
+      loadProductKinds (id) {
+        this.$store.dispatch('loadAllProductKinds', {id})
+      }
+    }
+  }
+</script>