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

<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>UAS系统</h4>
         <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>
          <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: 'FiveFeature',
    data () {
      return {
        featureData: [{
          illustrationF: '颠覆传统ERP及',
          illustrationS: '管理软件市场模式'
        }, {
          illustrationF: '平台用户的链式',
          illustrationS: '反应式发展'
        }, {
          illustrationF: '企业信息化',
          illustrationS: '全面解决方案'
        }, {
          illustrationF: '全过程的移动',
          illustrationS: '互联解决方案'
        }, {
          illustrationF: ' 全智能的',
          illustrationS: '交易平台'
        }, {
          illustrationF: '平台用户的链式',
          illustrationS: '反应式发展'
        }]
      }
    },
    computed: {
      isInFrame () {
        if (this.$route.query.type === 'erp') {
          return true
        }
      },
      list () {
        return this.$store.state.supplier.merchant.merchant.data
      },
      all () {
        let count = this.$store.state.supplier.merchant.merchantAll.data
        let supplierCount = count.content ? count.totalElements + '' : '00000'
        return this.formatNumber(supplierCount, 5)
      }
    }
  }
</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: 41px;
          width: 366px;
          h4{
            font-family: MicrosoftYaHei-Bold !important;
            color: #2c7adf;
            font-size: 16px;
            margin: 0px 0px 15px 0;
          }
          p{
            font-size: 12px;
            color: #666666;
            line-height: 20px;
          }
          &:nth-child(1){
            p{
              text-align: right;
            }
          }
          &:nth-child(2){
            width: 355px;
          }
          &:nth-child(3){
            width: 376px;
            margin-right: 0px;
          }
        }
      }
    }
  }
</style>