<template>
  <div class="yc-content" ref="searchBar">
    <!-- 头部 -->
    <header :class="{ 'head-scroll': isScroll }">
      <div class="header-con">
        <ul class="nav">
          <li v-if="settitle && settitle.toplogo">
            <img style="width:114px;height:35px;" :src="settitle.topLogo" alt="">
          </li>
          <li>
            <a href="/">首页</a>
          </li>
          <li v-if="navigationObj.open">
            <a :href=" '//' + navigationObj.open" target="_blank">开放平台</a>
          </li>
          <li v-if="navigationObj.shop">
            <a :href=" '//' + navigationObj.shop">云仓</a>
          </li>
          <li>
            <a :href=" '//' + navigationObj.aboutUs + '/user' " target="_blank">关于我们</a>
          </li>
        </ul>
        <div class="register-login-btn">
          <div class="register-btn" @click="toRegister">注 册</div>
          <div class="login-btn" @click="toLogin">登 录</div>
        </div>
      </div>
    </header>
    <section class="banner">
      <!--      <el-carousel height="561px" :autoplay="false" arrow="never">-->
      <!--        <el-carousel-item v-for="item in 4" :key="item">-->
      <!--          <img style="width:100%;" src="../../assets/image/website/banner.png" alt="">-->
      <!--        </el-carousel-item>-->
      <!--      </el-carousel>-->
      <swiper :options="swiperOption" v-if="bannerList && bannerList.length > 0">
        <swiper-slide v-for="(item,index) in bannerList" :key="index">
          <a :href=" '//' + item.redirect_url" target="_blank"><img style="width: 100%;height: 562px;" :src="item.image_url"
                                                            alt=""></a>
        </swiper-slide>
      </swiper>
    </section>

    <!-- 主体 -->
    <section style="margin-bottom: 100px;">
      <div class="advantage" :class="{ 'mgB100': isAdHover }">
        <p class="advantage-title">核心优势</p>
        <div class="advantage-con" :class="{ 'mgT20' : isAdHover }">

          <div
            class="pre-advantage"
            v-for="(adItem,index) in cloud_advantage_lst"
            :key="index"
            :style="{zIndex: cloud_advantage_lst.length - index}"
            @mouseover="adHover(index + 1)"
            @mouseleave="adLeave(index + 1)"
          >
            <dl class="dl-con" :class="{ 'noDlCon': indexAddom === (index+1) }">
              <dt :class=" 'dl-con-ad' +  (index+1) "></dt>
              <dd>{{ adItem.title }}</dd>
            </dl>

            <div class="pre-advantage-details" :class="{ 'up-ad-details': indexAddom === (index+1) }">
              <p class="ad-details-title">{{ adItem.title }}</p>
              <p class="ad-details">{{ adItem.content_summary }}</p>
            </div>
          </div>

          <!--          <div class="pre-advantage" @mouseover="adHover(1)" @mouseleave="adLeave(1)" :class="{ 'noBorder': indexAddom === 1 }" style="z-index: 4">-->
          <!--            <dl class="dl-con" :class="{ 'noDlCon': indexAddom === 1 }">-->
          <!--              <dt class="dl-con-ad1"></dt>-->
          <!--              <dd>技术优势</dd>-->
          <!--            </dl>-->
          <!--            <div class="pre-advantage-details" :class="{ 'up-ad-details': indexAddom === 1 }">-->
          <!--              <p class="ad-details-title">-->
          <!--                技术优势-->
          <!--              </p >-->
          <!--              <p class="ad-details">-->
          <!--                数字化、智能化云仓系统支持商品一键导入，快速编辑上架；订单批量发货、流程简洁，实时同步物流状态； 结算流水实时同步，资金链及时回笼-->
          <!--              </p>-->
          <!--            </div>-->
          <!--          </div>-->

        </div>
      </div>
    </section>

    <!-- 入驻流程 -->
    <section style="padding-bottom: 90px;background-color: #f9f9fa;">
      <p class="process-title">入驻流程和材料</p>
      <div class="process-con">
        <div class="process-steps">
          <div class="pro-step">
            <dl>
              <dt class="step-one"></dt>
              <dd>第一步：注册账号</dd>
            </dl>
            <span>无需等待</span>
            <p>进入云仓官网，注册账号</p>
            <p>注册完成后，填写相关信息</p>
          </div>
          <div class="pro-step">
            <dl>
              <dt class="step-two"></dt>
              <dd>第二步：填写信息</dd>
            </dl>
            <span>约20分钟</span>
            <p>确认在线协议填写公司主体信息</p>
            <p>填写店铺信息提交相关资质</p>
          </div>
          <div class="pro-step">
            <dl>
              <dt class="step-three"></dt>
              <dd>第三步：等待审核</dd>
            </dl>
            <span>约1-3个工作日</span>
            <p>云仓工作人员会在1-3个工作日内</p>
            <p>反馈审核结果，商家可通过登录查询审核进度</p>
          </div>
          <div class="pro-step">
            <dl>
              <dt class="step-four"></dt>
              <dd>第四步：发布商品</dd>
            </dl>
            <span>无需等待</span>
            <p>审核通过，商家登录后台</p>
            <p>商家发布商品并上架</p>
          </div>
        </div>
        <div class="process-mater">
          <div class="pro-ma">
            <p class="set-in-ma m-bg">入驻必备材料</p>
            <div class="optional">
              <ul>
                <li>营业执照电子版</li>
                <li>法人证件电子版</li>
              </ul>
            </div>

          </div>
          <div class="pro-ma">
            <p class="set-in-ma n-m-bg">入驻选填材料</p>
            <div class="optional">
              <ul>
                <li>品牌LOGO</li>
                <li>其它行业资质</li>
              </ul>
              <ul>
                <li>品牌授权（代理品需提供）</li>
                <li>店铺LOGO</li>
              </ul>
            </div>

          </div>
        </div>
      </div>
    </section>
    <!-- 入驻品牌 -->
    <section class="brand">
      <p class="brands-title">这些品牌都已入驻</p>
      <p class="brands-tip">我们已与各行业领域的优秀品牌达成合作</p>
      <div>
        <p class="brand-type">
          <span class="clothes" :class="{ 'light-word' : isLight === 0 }" @click="brandTypeChange(0)">{{ detail_img1.type }}</span>
          <span class="electrical" :class="{ 'light-word' : isLight === 1 }" @click="brandTypeChange(1)">{{ detail_img2.type }}</span>
          <span class="food" :class="{ 'light-word' : isLight === 2 }" @click="brandTypeChange(2)">{{ detail_img3.type }}</span>
          <span class="maternal" :class="{ 'light-word' : isLight === 3 }" @click="brandTypeChange(3)">{{ detail_img4.type }}</span>
        </p>
        <div class="brand-carousel">
          <el-carousel ref="cardShow" @change="brandCarChange()" :autoplay="false" arrow="never"
                       indicator-position="none" type="card" class="card-show" height="400px">

            <el-carousel-item class="pre-el-carousel-item el-carousel-item-spe" name="1">
              <div class="pre-img-con" v-for="(item,index) in detail_img1.logo_urls" :key="index">
                <img class="pre-img" :src="item.url" alt="">
              </div>
            </el-carousel-item>

            <el-carousel-item class="pre-el-carousel-item el-carousel-item-spe" name="2">
              <div class="pre-img-con" v-for="(item,index) in detail_img2.logo_urls" :key="index">
                <img class="pre-img" :src="item.url" alt="">
              </div>
            </el-carousel-item>

            <el-carousel-item class="pre-el-carousel-item el-carousel-item-spe" name="3">
              <div class="pre-img-con" v-for="(item,index) in detail_img3.logo_urls" :key="index">
                <img class="pre-img" :src="item.url" alt="">
              </div>
            </el-carousel-item>

            <el-carousel-item class="pre-el-carousel-item el-carousel-item-spe" name="4">
              <div class="pre-img-con" v-for="(item,index) in detail_img4.logo_urls" :key="index">
                <img class="pre-img" :src="item.url" alt="">
              </div>
            </el-carousel-item>

          </el-carousel>
        </div>
      </div>
    </section>
    <!-- 底部 -->
    <footer>
      <div class="contact">
        <p>如果你想要更多的<span>了解</span>，请联系我们</p>
        <p>{{ settitle.contactTel }}</p>
      </div>
      <div class="about-con">
        <div class="about-list">
          <ul>
            <li v-for="(footerItem,index) in footerList" :key="index" @click="goToUser(footerItem.id)">{{ footerItem.title }}</li>
          </ul>
          <p class="about-gs">
            {{settitle.bottomCopyright}}  <img class="icon-image" style="margin-right:4px;"
                                               src="@/assets/image/national.png">{{settitle.recordNum}}
          </p>
        </div>
        <div class="about-us">
          <p class="us-title">联系我们</p>
          <p>联系电话：{{settitle.contactTel}}</p>
          <p>公司地址:{{settitle.companyAddress}}</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
  import store from '@/store';
  import {indexInfo, newsList, companyCounsel, webSite, getdomain, getallCloudList} from '@/api/webSite'

  export default {
    name: "newyuncang",
    data() {
      return {
        // banner 图
        bannerList: [],
        // 核心优势
        cloud_advantage_lst: [],
        settitle: {
          bottomCopyright: "",
          businessHours: 1,
          companyAddress: "",
          contactTel: "",
          custServiceQrcode: "",
          hotlineTel1: "",
          hotlineTel2: "",
          onlineTimeEnd: "18:00",
          onlineTimeStart: "09:00",
          recordNum: "",
          topLogo: "",
        },
        channel_id: 0,
        isScroll: false,
        isAdHover: false,
        isHasBorder: false,
        indexAddom: false,
        isLight: 0,
        navigationObj: {
          'home': '',
          'open':'',
          'shop':'',
          'aboutUs':'',
        },
        gwToken: '',
        swiperOption: {
          loop: true, // 循环模式选项
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
            // bulletClass:'my-bullet',
            bulletActiveClass: 'my-bullet'
          },
          autoplay: {
            delay: 6000,
            disableOnInteraction: false
          },
          // 设定初始化时slide的索引
          initialSlide: 0,
          // Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)
          direction: 'horizontal',
          // 一个屏幕展示的数量
          slidesPerView: 1
        },
        // logo
        detail_img1: {
          index: 1,
          type: '',
          logo_urls: [
            {url: ''},{url: ''},{url: ''},{url: ''},
            {url: ''},{url: ''},{url: ''},{url: ''},
            {url: ''},{url: ''},{url: ''},{url: ''},
          ]
        },
        detail_img2: {
          index: 2,
          type: '',
          logo_urls: [
            {url: ''},{url: ''},{url: ''},{url: ''},
            {url: ''},{url: ''},{url: ''},{url: ''},
            {url: ''},{url: ''},{url: ''},{url: ''},
          ]
        },
        detail_img3: {
          index: 3,
          type: '',
          logo_urls: [
            {url: ''},{url: ''},{url: ''},{url: ''},
            {url: ''},{url: ''},{url: ''},{url: ''},
            {url: ''},{url: ''},{url: ''},{url: ''},
          ]
        },
        detail_img4: {
          index: 4,
          type: '',
          logo_urls: [
            {url: ''},{url: ''},{url: ''},{url: ''},
            {url: ''},{url: ''},{url: ''},{url: ''},
            {url: ''},{url: ''},{url: ''},{url: ''},
          ]
        },
        footerList: [
          {
            id:1, title:'企业简介'
          },
          {
            id:2, title:'发展历程'
          },
          {
            id:3, title:'荣誉资质'
          },
          {
            id:4, title:'团队介绍'
          },
          {
            id:5, title:'新闻动态'
          }
        ]
      }
    },
    mounted() {
      this.getIndexInfo()
      window.addEventListener('scroll', this.handleScroll, true);
    },
    destroyed() {
      window.removeEventListener('scroll', this.handleScroll);
    },

    methods: {
      // 获取渠道id
      getIndexInfo() {
        let op = 'open'
        let ssa = window.location.host
        const data = {
          // domain: 'newsys.jxhh.com',
          domain: ssa,
          // field: op
        }
        indexInfo(data).then(res => {
          if (res.code == 1) {
            this.channel_id = res.data.channel_id
            this.getWebSite()
            this.getDomain()
            this.getAllcloud()
          }
        })
      },
      /** 获取通用设置 */
      getWebSite() {
        let params = {
          channel_ids: this.channel_id
        }
        webSite(params).then(res => {
          if (res.code == 1) {
            if (res.data.universal_lst && res.data.universal_lst != 'null') {
              this.settitle = res.data.universal_lst
            } else {
              // this.settitle = {
              //   bottomCopyright: "Copyright © 2015 - 2021 北京胜天半子科技有限公司 All Rights Reserved.",
              //   businessHours: 1,
              //   companyAddress: "北京市丰台区诺德中心一期四号楼21层",
              //   contactTel: "4000-188-199",
              //   custServiceQrcode: "http://excel.jxhh.com/public/upload/1629540531.png",
              //   hotlineTel1: "010-5335 9558",
              //   hotlineTel2: "400-188-199",
              //   onlineTimeEnd: "18:00",
              //   onlineTimeStart: "09:00",
              //   recordNum: "京ICP备19033223号-1",
              //   topLogo: "http://excel.jxhh.com/public/upload/1629540557.png",
              // }
            }
          }
        })
      },
      /** 获取所有域名 */
      getDomain() {
        let data = {
          channel_ids: this.channel_id
        }
        getdomain(data).then(res => {
          if (res.code == 1 && res.data) {
            this.navigationObj.home = '';
            this.navigationObj.open = res.data.Open.domain;
            this.navigationObj.shop = res.data.Cloud.domain;
            this.navigationObj.aboutUs = res.data.Official.domain;
          }
        })
      },
      /** 获取 云仓 banner图信息、核心优势、入驻logo图片集 */
      getAllcloud() {
        let data = {
          new_channel_id: this.channel_id
        }
        getallCloudList(data).then(res => {
          if (res.code == 1 && res.data) {
            // 核心优势
            if (res.data.cloud_advantage_lst && res.data.cloud_advantage_lst.length > 0) {
              this.cloud_advantage_lst = res.data.cloud_advantage_lst
            }
            // banner图
            if (res.data.cloud_banner_lst && res.data.cloud_banner_lst.banners_json && res.data.cloud_banner_lst.banners_json.length > 0) {
              this.bannerList = res.data.cloud_banner_lst.banners_json;
            }
            // logo 图
            if (res.data.cloud_supplier_lst && res.data.cloud_supplier_lst.detail_json) {
              this.detail_img1 = res.data.cloud_supplier_lst.detail_json[0];
              this.detail_img2 = res.data.cloud_supplier_lst.detail_json[1];
              this.detail_img3 = res.data.cloud_supplier_lst.detail_json[2];
              this.detail_img4 = res.data.cloud_supplier_lst.detail_json[3];
            }
          }
        })
      },
      // 监听浏览器滚动
      handleScroll() {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        this.isScroll = scrollTop > 100 ? true : false;
      },
      // 品牌类型切换
      brandTypeChange(index) {
        this.$refs.cardShow.setActiveItem(index);
        this.isLight = index;
      },
      // 点击轮播图，切换，高点 品牌类别
      brandCarChange() {
        this.isLight = this.$refs.cardShow.activeIndex;
      },
      // 划过效果
      adHover(index) {
        this.isAdHover = true;
        this.indexAddom = index;
      },
      adLeave(index) {
        this.isAdHover = false;
        this.indexAddom = -1;
      },
      /** 底部 路由跳转 */
      goToUser(id) {
        let completeWebsite = ''
        if (this.navigationObj.aboutUs) {
          completeWebsite = this.navigationObj.aboutUs + '/user?id=' + id
          window.location.href = '//' + completeWebsite
        }
      },
      // 去注册
      toRegister() {
        store.dispatch('LogOut').then(() => {
          var ssa = window.location.host;
          window.location.href = 'http://sso.jxhh.com/login?redirect=http://' + window.location.host + '/platformlogin'
        })
      },
      // 去登录
      toLogin() {
        window.location.href = 'http://sso.jxhh.com/login?redirect=http://' + window.location.host + '/platformlogin'
        //http://sso.jxhh.com/logout?redirect=http://' + ssa + '/login
      }

    } // methods end
  }
</script>

<style lang="scss" type="text/stylus" scoped>
  header, section, footer, ul, li, p, dl, dt, dd {
    margin: 0;
    padding: 0;
  }

  ul, li {
    list-style: none;
  }

  .yc-content {
    width: 100%;
    height: 100%;
    min-width: 960px;
  }

  /* 公用 */

  /* header */
  header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
  }

  .head-scroll {
    background-color: #070D41;
  }

  .header-con {
    width: 80%;
    margin: 0 auto;
    height: 100px;
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .nav, .register-login-btn {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
  }

  .nav {

  }

  .register-login-btn {

  }

  .nav > li {
    padding: 10px 25px;
    cursor: pointer;
    font-size: 18px;
  }

  .register-btn, .login-btn {
    padding: 5px 20px;
    border-radius: 4px;
    cursor: pointer;
  }

  .register-btn {
    border: 1px solid #fff;

  }

  .login-btn {
    border: 1px solid #1D8EFE;
    background: #1D8EFE;
    margin-left: 20px;
  }

  /* banner图 */
  .banner {
    width: 100%;
    height: 562px;
    margin-right: auto;
    margin-left: auto;
    overflow: hidden;
    //background-color : #bbb; // 为了当云仓官网没有banner图时候，看清导航的设置
  }

  .advantage {
    margin-bottom: 0;
    transition: all 0.5s;
  }

  .advantage-title, .process-title, .brands-title {
    text-align: center;
    font-size: 38px;
    font-weight: 400;
    color: #333333;
    padding: 90px 0;
  }

  .advantage-con {
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: 0.5s;
  }

  .pre-advantage {
    width: 268px;
    height: 190px;
    border: 1px solid #DCDCDC;
    margin: 0 20px;
    position: relative;
    background: #FFFFFF;
    z-index: 0;
    border-radius: 2px;
  }

  .dl-con {
    width: 100%;
    height: 100%;
    text-align: center;
    background: #FFFFFF;
    z-index: 0; /* 这个值要保证和 当前容器dom 一致 */
    border: none;
    overflow: hidden;
  }

  .dl-con > dt {
    width: 85px;
    height: 88px;
    margin: 25px auto;
  }

  .dl-con > dd {
    font-size: 18px;
    color: #232323;
    margin: 0 auto;
  }

  .dl-con > .dl-con-ad1 {
    background: url("../../assets/image/website/ad1.png") no-repeat center center;
    background-size: cover;
  }

  .dl-con > .dl-con-ad2 {
    background: url("../../assets/image/website/ad2.png") no-repeat center center;
    background-size: cover;
  }

  .dl-con > .dl-con-ad3 {
    background: url("../../assets/image/website/ad3.png") no-repeat center center;
    background-size: cover;
  }

  .dl-con > .dl-con-ad4 {
    background: url("../../assets/image/website/ad4.png") no-repeat center center;
    background-size: cover;
  }

  .pre-advantage-details {
    width: 270px;
    height: 410px;
    position: absolute;
    top: -110px;
    left: -1px;
    z-index: 199;
    background: #fff url("../../assets/image/website/adfooter.png") no-repeat bottom center;
    box-shadow: 0 6px 18px 1px rgba(57, 124, 255, 0.26);
    overflow: hidden;
    display: none;
  }

  .ad-details-title {
    width: 100%;
    height: 76px;
    line-height: 76px;
    text-align: center;
    color: #fff;
    font-weight: 400;
    font-size: 20px;
    background: linear-gradient(118deg, #0157FF 0%, #538DFF 100%);
    overflow: hidden;
  }

  .ad-details {
    padding: 30px;
    color: #333333;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    text-align: justify;
    text-align-last: center;
    -ms-text-align-last: center;
    -moz-text-align-last: center;
  }

  /* hover 时候的效果 class */
  .mgT20 {
    margin-top: 80px;
  }

  .noBorder {
    border: 0;
  }

  .noDlCon {
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
  }

  .up-ad-details {
    display: block;
    z-index: 199;
  }

  .mgB100 {
    margin-bottom: 150px;
  }


  /* 入驻流程 */
  .process-steps, .process-mater {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .pro-step {
    width: 275px;
    height: 315px;
    background: #fff;
    margin: 0 20px;
  }

  .pro-ma {
    width: 590px;
    height: 190px;
    background: #fff;
    margin: 35px 20px 0;
    background: #fff url("../../assets/image/website/mate-bg.png") no-repeat 100%;
  }

  .pro-ma:hover, .pro-step:hover {
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.05);
  }

  .step-one, .step-two, .step-three, .step-four {
    width: 58px;
    height: 58px;
    text-align: center;
    margin: 30px auto;
  }

  .step-one {
    background: url("../../assets/image/website/step1.png") no-repeat center center;
  }

  .step-two {
    background: url("../../assets/image/website/step2.png") no-repeat center center;
  }

  .step-three {
    background: url("../../assets/image/website/step3.png") no-repeat center center;
  }

  .step-four {
    background: url("../../assets/image/website/step4.png") no-repeat center center;
  }

  .pro-step > dl > dd {
    height: 20px;
    font-size: 20px;
    font-weight: 400;
    margin: 0 auto;
    text-align: center;
  }

  .pro-step > span {
    display: block;
    width: 100px;
    height: 25px;
    font-size: 14px;
    color: #666;
    background: #F0F0F5;
    border-radius: 13px;
    line-height: 25px;
    margin: 18px auto;
    text-align: center;
  }

  .pro-step > p {
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    line-height: 28px;
    text-align: center;
    padding: 0 20px;
  }

  .set-in-ma {
    height: 20px;
    font-size: 20px;
    font-weight: 400;
    color: #000000;
    line-height: 20px;
    text-indent: 30px;
    margin: 35px 0 15px 68px;
  }

  .m-bg {
    background: url("../../assets/image/website/setIn1.png") no-repeat 0 center;
  }

  .n-m-bg {
    background: url("../../assets/image/website/setIn2.png") no-repeat 0 center;
  }

  .optional {
    display: flex;
    justify-content: start;
    flex-direction: row;
  }

  .optional > ul:nth-child(1) {
    margin: 0 50px 0 72px;
  }

  .optional > ul > li {
    margin: 15px 0;
    text-indent: 20px;
    background: url("../../assets/image/website/arrow.png") no-repeat 0 center;
  }

  .pro-step:hover, .pro-ma:hover {
    //box-shadow: 0 2px 12px 0 #ccc;
  }

  /* 入驻品牌 */
  .brand {
    padding: 0 0 90px;
    background: linear-gradient(0deg, #DEE8F9 46%, #FEFEFF 100%);
  }

  .brands-title {
    text-align: center;
    font-size: 38px;
    font-weight: 400;
    color: #333333;
    padding: 90px 0 0;
  }

  .brands-tip {
    text-align: center;
    font-size: 24px;
    font-weight: 400;
    color: #333333;
    opacity: 0.82;
    padding: 35px 0 20px;

  }

  .brand-type {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 40%;
    margin: 60px auto 12px;
  }

  .clothes, .electrical, .food, .maternal {
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    font-size: 20px;
    font-weight: 400;
    color: #000;
    text-indent: 40px;
  }

  .light-word {
    color: #1966FF;
  }

  .clothes {
    background: url("../../assets/image/website/clothes.png") no-repeat 0 center;
  }

  .electrical {
    background: url("../../assets/image/website/electrical.png") no-repeat 0 center;
  }

  .food {
    background: url("../../assets/image/website/food.png") no-repeat 0 center;
  }

  .maternal {
    background: url("../../assets/image/website/maternal.png") no-repeat 0 center;
  }

  .clothes:hover, .electrical:hover, .food:hover, .maternal:hover {
    color: #1966FF;
  }
/*品牌 logo*/
  .brand-carousel {
    width: 100%;
    min-width: 600px;
    max-width: 1520px;
    display: flex;
    justify-content: center;
    flex-direction: row;
    margin: 20px auto;
  }

  .card-show {
    width: 1520px;
    overflow: hidden;
  }

  /deep/ .is-active {
    border: 1px solid #e9e9e9;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 25px 28px 10px rgba(152, 150, 150, 0.1);
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #fff;
    transform: scaleY(1.8);
  }

  //
  .el-carousel__item:nth-child(2n+1) {
    background: #fff;
  }

  .el-carousel-item-spe {
    display : flex;
    justify-content : start;
    flex-direction :row;
    flex-flow: wrap;
    padding: 20px 0;
  }

  .pre-img-con {
    width:169px;
    height:75px;
    margin:20px 10px;
    overflow : hidden;
  }

  .pre-img {
    width:100%;
    height: 100%;
  }

  /* footer 联系我们 */
  .contact {
    height: 243px;
    background: url("../../assets/image/website/footer-bg.png") no-repeat center 0;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .contact > p {
    letter-spacing: 2px;
    text-align: center;
    font-size: 26px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 46px;
  }

  .contact > p > span {
    color: #1966FF;
  }

  .about-con {
    height: 200px;
    color: #fff;
    background: #242A37;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 14px;
  }

  .about-list, .about-us {
    //margin: 52px;
  }

  .about-list {
    height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #50555f;
    padding-right: 80px;
  }

  .about-list > ul {
    height: 66px;
    font-size: 18px;
    font-weight: 400;
    color: #FFFFFF;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }

  .about-list > ul > li {
    height: 30px;
    padding: 0 40px;
    line-height: 30px;
    border-right: 1px solid #50555f;
    cursor: pointer;
  }

  .about-list > ul > li:last-child {
    border: none;
  }

  .about-gs {
    font-size: 14px;
    font-weight: 400;
    color: #959BA8;
  }

  .about-us {
    margin-left: 80px;
  }

  .about-us > p {
    letter-spacing: 1px;
    font-weight: 400;
    color: #959BA8;
    line-height: 26px;
  }

  .about-us .us-title {
    font-size: 18px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 40px;
  }
</style>
