mall-web-ssr/components/btbBusiness/service.vue

<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) {
        if (this.user.logged) {
          window.location.href = this.serviceData[index].enterUrl
        } 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>