btb商务页开发

components/btbBusiness/banner.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="banner">
     <div class="content">
-      <p class="title" v-if="showAd"><marquee scrollAmount=1 width=501 direction="left" behavior="alternate">B2B商务】和【优软商城】牵手成功！大家可以更全面、便捷地了解和享受平台的各项服务咯!</marquee><a @click="showAd = false"><img src="/images/btbBusiness/close.png"></a></p>
+      <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">立即体验</a>
+        <a class="enter" @click="experience">立即体验</a>
       </div>
       <p class="first">十年深耕，携您飞跃<br>
         优软B2B商务，为您提供更强大的功能服务</p>
@@ -17,8 +17,17 @@
     name: 'BannerView',
     data () {
         return {
-            showAd: true
+            showNotice: true
         }
+    },
+    methods: {
+      experience () {
+        if (this.user.logged) {
+          window.location.href = 'http://uas.ubtob.com/#/index'
+        } else {
+          this.$router.push('/auth/login')
+        }
+      }
     }
   }
 </script>
@@ -35,7 +44,7 @@
       margin: 0 auto;
       margin-top: -1px;
       padding: 0;
-      .title{
+      .notice{
         position: absolute;
         top: 10px;
         left: 0px;
@@ -46,7 +55,6 @@
         color: #fdfbfb;
         border-radius: 4px;
         padding-left: 30px;
-        position: relative;
         background-color: rgba(255, 255, 255, 0.18);
         img{
           float: right;
@@ -75,7 +83,7 @@
       .enter{
         display: inline-block;
         padding-left: 21px;
-        margin: 94px 0px 60px 230px;
+        margin: 134px 0px 60px 230px;
         width: 148px;
         height: 38px;
         line-height: 38px;

components/btbBusiness/features.vue

@@ -8,9 +8,9 @@
         </div>
       </div>
       <ul class="content clearfix list-unstyled">
-        <li v-for="(data, index) in featureData" @click="openUrl('/')" :class="{'move': hasAnimation }"
-            @mouseenter="hasAnimation = false"
-            @mouseleave="hasAnimation = true">
+        <li v-for="(data, index) in featureData" :class="{'moveTop': isTop, 'moveBottom': !isTop}"
+            @mouseenter="changeInterval(false)"
+            @mouseleave="changeInterval(true)">
             <div>
               <p>{{data.illustrationF}}</p>
               <p class="illustration">{{data.illustrationS}}</p>
@@ -45,16 +45,41 @@
           illustrationF: '平台用户的链式',
           illustrationS: '反应式发展'
         }],
-        hasAnimation: true
+        hasAnimation: true,
+        timerIndex: 0,
+        isTop: false, // 判断是否滚动至顶,
+        isBottom: true,
+        timer: {} // 定时器实体
       }
     },
-    computed: {
+    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 {
+  /*@keyframes featureTop {
     0%{top: 0;}
     50%{top: 40px;}
     100%{top: 0px;}
@@ -93,7 +118,7 @@
     0%{top: 40px;}
     50%{top: 0px;}
     100%{top: 40px;}
-  }
+  }*/
   .features{
     width: 100%;
     min-width: 1190px;
@@ -112,7 +137,6 @@
           border-bottom:1px solid #ff7070;
           p{
             margin:0;
-            font-family: FZLTXHK;
             font-size: 14px;
             color: #666;
           }
@@ -161,20 +185,32 @@
           &:nth-child(2), &:nth-child(4), &:nth-child(6){
             div{
               top: 40px;
-              animation: featureTop 3s linear infinite;
+              /*animation: featureTop 3s linear infinite;
               -moz-animation: featureTop 3s linear infinite;
               -o-animation: featureTop 3s linear infinite;
-              -webkit-animation: featureTop 3s linear infinite;
+              -webkit-animation: featureTop 3s linear infinite;*/
+              -webkit-transform-style: preserve-3d;
+              -webkit-backface-visibility: hidden;
+              transform: translateZ(0);
+              transition: top 3s linear;
+              -moz-transition: top 3s linear; /* Firefox 4 */
+              -webkit-transition: top 3s linear; /* Safari and Chrome */
+              -o-transition: top 3s linear; /* Opera */
             }
+
           }
           &:nth-child(1), &:nth-child(3), &:nth-child(5){
             div{
               top: 0px;
-              animation: featureBottom 3s linear infinite;
+              transition: top 3s linear;
+              -moz-transition: top 3s linear; /* Firefox 4 */
+              -webkit-transition: top 3s linear; /* Safari and Chrome */
+              -o-transition: top 3s linear; /* Opera */
+              transform: translateZ(0);
+              /*animation: featureBottom 3s linear infinite;
               -moz-animation: featureBottom 3s linear infinite;
               -o-animation: featureBottom 3s linear infinite;
-              -webkit-animation: featureBottom 3s linear infinite;
-
+              -webkit-animation: featureBottom 3s linear infinite;*/
             }
           }
           div{
@@ -189,6 +225,8 @@
               p{
                 color: #2d84fd;
               }
+              animation-play-state:paused;
+              -webkit-animation-play-state:paused; /* Safari 和 Chrome */
             }
             p {
               margin: 0px;
@@ -197,12 +235,12 @@
               width: 100%;
               color: #fff;
               &:last-child{
-                font-weight: 600;
+                font-weight: bold;
               }
             }
           }
         }
-        .hasAnimation{
+       /* .move{
           &:nth-child(2), &:nth-child(4), &:nth-child(6){
             div{
               top: 40px;
@@ -222,7 +260,31 @@
 
             }
           }
+        }*/
+        .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;
+             }
+           }
+       }
       }
     }
   }

components/btbBusiness/means.vue

@@ -13,7 +13,7 @@
          <p>UAS通过为客户提供信息化产品以及咨询服务，帮助客户在多组织、跨地域快速发展时从容地管理自己的业务，同时帮助客户累积信息和知识，使客户能在坚实基础上健康成长。<br>
          基于对客户需求独特的理解，为客户建立专业、有效、具协同性和集成性管理系统，从而帮助客户简化日常运作管理，最大化地提升客户竞争力。<br>
          UAS建立在B/S架构上，包括ERP、OA、CRM、HR、PLM等模块。UAS同时还能支持集团公司的运作，区分多公司、多工厂的模式</p></li>
-        <li><img src="/images/btbBusiness/feature-bg0.png"></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>
@@ -51,8 +51,6 @@
           illustrationS: '反应式发展'
         }]
       }
-    },
-    computed: {
     }
   }
 </script>
@@ -113,7 +111,7 @@
         padding-left:2px;
         li{
           float: left;
-          margin-right: 41px;
+          margin-right: 20px;
           width: 366px;
           h4{
             font-family: MicrosoftYaHei-Bold !important;
@@ -132,7 +130,7 @@
             }
           }
           &:nth-child(2){
-            width: 355px;
+            width: 399px;
           }
           &:nth-child(3){
             width: 376px;

components/btbBusiness/service.vue

@@ -8,7 +8,7 @@
         </div>
       </div>
       <ul class="content clearfix list-unstyled">
-        <li v-for="(data, index) in serviceData" @click="openUrl('/')"
+        <li v-for="(data, index) in serviceData" @click="enterModule(index)"
             @mouseenter="setStatus('in', index)"
             @mouseleave="setStatus('out', index)">
           <div>
@@ -31,32 +31,36 @@
         serviceData: [{
             imgUrl: '/images/btbBusiness/customer0.png',
             englishName: 'customer service',
-            chinaName: '客户服务'
+            chinaName: '客户服务',
+            enterUrl: 'http://uas.ubtob.com/#/'
           }, {
             imgUrl: '/images/btbBusiness/procurement0.png',
             englishName: 'Procurement management',
-            chinaName: '采购管理'
+            chinaName: '采购管理',
+            enterUrl: 'http://uas.ubtob.com/#/purc/order'
           }, {
             imgUrl: '/images/btbBusiness/sales0.png',
             englishName: 'Sales management',
-            chinaName: '销售管理'
+            chinaName: '销售管理',
+            enterUrl: 'http://uas.ubtob.com/#/sale/order'
           }, {
             imgUrl: '/images/btbBusiness/subcontract0.png',
             englishName: 'subcontract',
-            chinaName: '委外加工'
+            chinaName: '委外加工',
+            enterUrl: 'http://uas.ubtob.com/#/sale/maketodo/makeorder'
           }, {
             imgUrl: '/images/btbBusiness/quality0.png',
             englishName: 'Quality Control',
-            chinaName: '品质管理'
+            chinaName: '品质管理',
+            enterUrl: 'http://uas.ubtob.com/#/sale/MRB'
           }, {
             imgUrl: '/images/btbBusiness/financial0.png',
             englishName: 'Financial docking',
-            chinaName: '财务对接'
+            chinaName: '财务对接',
+            enterUrl: 'http://uas.ubtob.com/#/fa/apBill'
           }]
       }
     },
-    computed: {
-    },
     methods: {
       // 鼠标移入更换图标
       setStatus: function (type, index) {
@@ -80,6 +84,13 @@
             this.serviceData[index].imgUrl = type === 'in' ? '/images/btbBusiness/financial1.png' : '/images/btbBusiness/financial0.png'
             break
         }
+      },
+      enterModule: function (index) {
+        if (this.user.logged) {
+          window.location.href = this.serviceData[index].enterUrl
+        } else {
+          this.$router.push('/auth/login')
+        }
       }
     }
   }

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',