<template>
  <div class="content">
    <div class="yc-content pc-content" ref="searchBar">
      <!-- 头部 -->
      <header :class="{ 'head-scroll': isScroll }" calss="pc-content">
        <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 pc-content">
        <swiper :options="swiperOption" v-if="bannerList && bannerList.length > 0">
          <swiper-slide v-for="(item,index) in bannerList" :key="index">
            <a :href="aLinkRes(item.redirect_url) " :target="returnBlank(item.redirect_url)">
              <img style="width: 100%;height: 562px;" :src="item.image_url" alt="">
            </a>
          </swiper-slide>
        </swiper>
      </section>
      <!-- 主体 -->
      <section style="margin-bottom: 100px;" class="pc-content">
        <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>
        </div>
      </section>
      <!-- 入驻流程 -->
      <section style="padding-bottom: 90px;background-color: #f9f9fa;" class="pc-content">
        <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 pc-content">
        <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 class="pc-content">
        <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>

    <!-- 移动端 -->
    <div class="mobile-content">
      <!-- 菜单 -->
      <div class="mb-menu-icon-con" @click="drawer = true">
        <img src="../../assets/image/website/mobile-menu.png" alt="">
      </div>
      <el-drawer
        :visible.sync="drawer"
      >
        <!--          <li v-if="settitle && settitle.topLogo">-->
        <!--            <img style="width:114px;height:35px;" :src="settitle.topLogo" alt="">-->
        <!--          </li>-->
        <ul class="mb-menu-list-con">
          <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>
          <li @click="toLogin">
            登 录
          </li>
          <li @click="toRegister">
            注 册
          </li>
        </ul>
      </el-drawer>
      <!-- banner -->
      <swiper class="mb-banner-con mobile-content" :options="swiperOption" v-if="bannerList && bannerList.length > 0">
        <swiper-slide v-for="(item,index) in bannerList" :key="index">
          <a :href="aLinkRes(item.redirect_url) " :target="returnBlank(item.redirect_url)">
            <img :src="item.image_url" alt="">
          </a>
        </swiper-slide>
      </swiper>

      <!-- 核心优势 -->
      <div class="mb-advantage-con mobile-content">
        <p class="mb-ad-title">核心优势</p>
        <swiper class="mb-advantage-con-swiper" :options="swiperADOption"
                v-if="cloud_advantage_lst && cloud_advantage_lst.length > 0">
          <swiper-slide v-for="(adItem,index) in cloud_advantage_lst" :key="index">
            <!--            <div class="mb-ad-advantage-details" :class="{ 'mb-ad-pic3': indexAddom === (index+1) }">-->
            <div class="mb-ad-advantage-details">
              <div :class="['mb-ad-pic' +  (index+1),'ad-details-pic-con']"></div>
              <p class="mb-ad-details-title">{{ adItem.title }}</p>
              <p class="mb-ad-details">{{ adItem.content_summary }}</p>
            </div>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>

      <!-- 入驻流程 -->
      <div class="mb-process-con mobile-content">
        <p class="mb-process-con-title">入驻流程和材料</p>
        <div class="mb-process">
          <div class="mb-pre-process-con">
            <div class="step-pic">
              <img src="../../assets/image/website/step1.png" alt="">
            </div>
            <p class="step-title">第一步：注册账号</p>
            <p class="step-cont-text">进入云仓官网，注册账号,注册完成后，填写相关信息</p>
          </div>

          <div class="mb-pre-process-con">
            <div class="step-pic">
              <img src="../../assets/image/website/step2.png" alt="">
            </div>
            <p class="step-title">第二步：填写信息</p>
            <p class="step-cont-text">确认在线协议填写公司主体信息填写店铺信息提交相关资质</p>
          </div>
        </div>
        <div class="mb-process">
          <div class="mb-pre-process-con">
            <div class="step-pic">
              <img src="../../assets/image/website/step3.png" alt="">
            </div>
            <p class="step-title">第三步：等待审核</p>
            <p class="step-cont-text">云仓工作人员会在1-3个工作日内反馈审核结果，商家可通过登录查询审核进度</p>
          </div>
          <div class="mb-pre-process-con">
            <div class="step-pic">
              <img src="../../assets/image/website/step4.png" alt="">
            </div>
            <p class="step-title">第四步：发布商品</p>
            <p class="step-cont-text">审核通过，商家登录后台,商家发布商品并上架</p>
          </div>
        </div>
        <div class="doc-bg-con">
          <p class="doc-title doc-title-mst">入驻必备材料</p>
          <ul class="doc-ul-list">
            <li>营业执照电子版</li>
            <li>法人证件电子版</li>
          </ul>
        </div>
        <div class="doc-bg-con">
          <p class="doc-title doc-title-no-mst">入驻选填材料</p>
          <div class="doc-ul-list-spe">
            <ul class="doc-ul-list">
              <li>品牌LOGO</li>
              <li>其他行业资质</li>
            </ul>
            <!--            <ul style="width:0.8rem;height: 100%;"></ul>-->
            <ul class="doc-ul-list">
              <li>品牌授权（代理品需提供）</li>
              <li>店铺LOGO</li>
            </ul>
          </div>

        </div>
      </div>

      <!-- 品牌入驻 -->
      <div class="mb-brand-con mobile-content">
        <p class="mb-brand-title">这些品牌都已入驻</p>
        <div class="mb-brand-con-bg">
          <p class="mb-brand-type">
            <span class="mb-clothes" :class="{ 'light-word' : isLight === 0 }" @click="brandTypeChangeMB(0)">{{ detail_img1.type }}</span>
            <span class="mb-electrical" :class="{ 'light-word' : isLight === 1 }" @click="brandTypeChangeMB(1)">{{ detail_img2.type }}</span>
            <span class="mb-food" :class="{ 'light-word' : isLight === 2 }" @click="brandTypeChangeMB(2)">{{ detail_img3.type }}</span>
            <span class="mb-maternal" :class="{ 'light-word' : isLight === 3 }" @click="brandTypeChangeMB(3)">{{ detail_img4.type }}</span>
          </p>
          <swiper class="mb-brand-con-swiper" :options="swiperBrandOptions" ref="brandSwiperDom">
            <swiper-slide>
              <div class="mb-img-con">
                <img v-for="(item,index) in detail_img1.logo_urls" :key="index" :src="item.url" alt="">
              </div>
            </swiper-slide>
            <swiper-slide>
              <div class="mb-img-con">
                <img v-for="(item,index) in detail_img2.logo_urls" :key="index" :src="item.url" alt="">
              </div>
            </swiper-slide>
            <swiper-slide>
              <div class="mb-img-con">
                <img v-for="(item,index) in detail_img3.logo_urls" :key="index" :src="item.url" alt="">
              </div>
            </swiper-slide>
            <swiper-slide>
              <div class="mb-img-con">
                <img v-for="(item,index) in detail_img4.logo_urls" :key="index" :src="item.url" alt="">
              </div>
            </swiper-slide>
          </swiper>
        </div>
      </div>

      <!-- 底部 -->
      <div class="mb-footer mobile-content">
        <div class="mb-about-list">
          <ul>
            <li v-for="(footerItem,index) in footerMbList" :key="index" @click="goToUser(footerItem.id)">{{
              footerItem.title }}
            </li>
          </ul>
          <div class="mb-about-us">
            <p>联系电话：{{settitle.contactTel}}</p>
            <p>公司地址:{{settitle.companyAddress}}</p>
          </div>
          <p class="mb-about-gs">
            {{settitle.bottomCopyright}}  <img class="icon-image" style="margin-right:4px;"
                                               src="@/assets/image/national.png">{{settitle.recordNum}}
          </p>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  import store from '@/store';
  import {indexInfo, newsList, companyCounsel, webSite, getdomain, getallCloudList} from '@/api/webSite'
    /** HACK
     * 解决 swiper 轮播图不自动轮播问题
     * 从6.x.x版本降级到5.4.5稳定版本后，没有此问题了
      */
    // import Swiper2, {Autoplay} from 'swiper';
    // Swiper2.use([Autoplay]);

    /** 仅对官网进行 所有适配
     * 当 可视区域 小于 960 时，进行 移动端适配
     * 对 html 根目录 的font-size 进行设置
     * */
    //是否是移动端
    ;(function () {
    // 获取屏幕区域的宽度
    let w = document.documentElement.clientWidth
    if (w < 961) {
      // 获取html根元素
      let htmlNode = document.querySelector('html')
      // 设置根字体大小
      // let htmlFSType = 1;
      // if (w / 750 < 1.5) {
      //   htmlNode.style.fontSize = 16 + 'px'
      // } else if (1.5 <= w / 375 < 2) {
      //   htmlNode.style.fontSize = 24 + 'px'
      // } else if (2 <= w / 375 <= 2.56) {
      //   htmlNode.style.fontSize = 32 + 'px'
      // }
      htmlNode.style.fontSize = w / 750 * 50 * 2 + 'px'
    }
  })();

  export default {
    name: "newyuncang",
    metaInfo() {
      return {
        title: this.keyTitle,
        meta: [
          {
            name: 'keywords',
            content: this.keyWords
          },
          {
            name: 'description',
            content: this.keyDescriptions
          }
        ]
      }
    },
    watch: {},
    data() {
      let _this = this;
      return {
        // 动态获取 sso 域名
        ssourl: '',
        // meta 信息
        keyTitle: '',
        keyWords: '',
        keyDescriptions: '',
        // 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: '',
        // banner 轮播设置参数
        swiperOption: {
          loop: true, // 循环模式选项
          autoplay: {
            delay: 4000,
            disableOnInteraction: false
          },
          // 设定初始化时slide的索引
          initialSlide: 0,
          // Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)
          direction: 'horizontal',
          // 一个屏幕展示的数量
          slidesPerView: 1,
          observer: true,
          observeParents: true
        },
        // 核心优势 轮播循环设置参数
        swiperADOption: {
          loop: true, // 循环模式选项
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
            type: 'bullets'
          },
          autoplay: {
            delay: 4000,
            disableOnInteraction: false
          },
          // 设定初始化时slide的索引
          initialSlide: 0,
          // Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)
          direction: 'horizontal',
          // 一个屏幕展示的数量
          slidesPerView: 1,
          observer: true,
          observeParents: true
        },
        swiperBrandOptions: {
          loop: false, // 循环模式选项
          autoplay: false,
          // 设定初始化时slide的索引
          initialSlide: 0,
          // Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)
          direction: 'horizontal',
          // 一个屏幕展示的数量
          slidesPerView: 1,
          observer: true,
          observeParents: true,
          on: {
            slideChange: function() {
              _this.isLight = this.activeIndex;
            }
          }
        },
        // 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: '新闻动态'
          }
        ],
        // 移动端 相关
        drawer: false,
        footerMbList: [
          {
            id: 1, title: '企业简介'
          },
          {
            id: 2, title: '发展历程'
          },
          {
            id: 3, title: '荣誉资质'
          },
          {
            id: 4, title: '团队介绍'
          },
          {
            id: 5, title: '新闻动态'
          },
          {
            id: 6, title: ''
          }
        ],
        brandIndex: 0,
      }
    },
    created() {
      let isPc = this.IsPc()
      /** 动态获取 sso配置域名 */
      this.getssourl();
      // console.log(222,navigator.userAgent);
    },
    mounted() {
      this.getIndexInfo()
      window.addEventListener('scroll', this.handleScroll, true);
    },
    destroyed() {
      window.removeEventListener('scroll', this.handleScroll);
    },

    methods: {
      /** 动态获取 sso 配置域名 */
      getssourl() {
        var ssa = window.location.host
        let data = {domain: ssa}
        this.$store.dispatch('getssourl', data)
          .then((res) => {
            if (res.code == 1) {
              this.ssourl = res.data.sso_url
              //this.gotosso()
            }
          }).catch(() => {
        })
      },
      IsPc() {
        let userAgent = navigator.userAgent
        let Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
        return Agents.some((i) => {
          return userAgent.includes(i)
        })
      },
      // 获取渠道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.keyTitle = res.data.title;
            this.keyWords = res.data.keywords;
            this.keyDescriptions = res.data.describe;
            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
            }
          }
        })
      },
      /** 获取所有域名 */
      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) {
              let bannerArr = []
              res.data.cloud_banner_lst.banners_json.forEach(element => {
                if (element.image_url) {
                  bannerArr.push(element);
                }
              });
              this.bannerList = bannerArr
            }
            // 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];
            }
          }
        })
      },
      /** banner 图是否能跳转链接 处理 */
      aLinkRes(link) {
        let resLink = ''
        if (link) {
          resLink = link
        } else {
          resLink = 'javascript:void(0);'
        }

        return resLink
      },
      returnBlank(val) {
        let res = ''
        if (val) {
          res = '_blank'
        } else {
          res = ''
        }
        return res
      },
      // 监听浏览器滚动
      handleScroll() {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        this.isScroll = scrollTop > 100 ? true : false;
      },
      // 品牌类型切换 - PC端
      brandTypeChange(index) {
        this.$refs.cardShow.setActiveItem(index);
        this.isLight = index;
      },
      /** 移动端 品牌logo类目的切换 */
      brandTypeChangeMB(index) {
        this.isLight = index;
        this.$refs.brandSwiperDom.$swiper.slideTo(index,1000,false)
      },
      // 点击轮播图，切换，高点 品牌类别
      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
        }
      },
      // 去注册  ssourl
      toRegister() {
        store.dispatch('LogOut').then(() => {
          let ssa = window.location.host;
          let ht = document.location.protocol;
          window.location.href = ht + '//' + this.ssourl + '/login?redirect=' + ht + '//' + ssa + '/platformlogin'
        })
      },
      // 去登录
      toLogin() {
        let ssa = window.location.host;
        let ht = document.location.protocol;
        window.location.href = ht + '//' + this.ssourl + '/login?redirect=' + ht + '//' + ssa + '/platformlogin'
        // window.location.href = 'http://sso.jxhh.com/login?redirect=http://' + window.location.host + '/platformlogin'
      }

    } // methods end
  }
</script>

<style lang="scss" type="text/stylus" scoped>
  /* 手机竖屏时，可视区域的最大宽度为 480 */
  //@media screen and (max-width: 480px) and (orientation: portrait) {
  //  .pc-content {
  //    display: none!important;
  //  }
  //  .mobile-show {
  //    display: none!important;
  //  }
  //}

  /* 手机横屏和pc最小宽度为 812px */
  /* 手机横屏 812px 为iphoneX 横屏的设备独立像素*/
  //@media screen and (max-width: 961px) and (orientation: landscape) {
  //  .pc-content {
  //    display: none !important;
  //  }
  //
  //  .mobile-content {
  //    display: block!important;
  //    font-size: 0.16rem;
  //  }
  //}

  @media screen and (min-width: 750px) {
    html {
      font-size: 100px;
    }
  }

  @media screen and (min-width: 640px) and (max-width: 749) {
    html {
      font-size: 85.333px;
    }
  }

  @media screen and (min-width: 414px) and (max-width: 639) {
    html {
      font-size: 61.333px;
    }
  }

  @media screen and (min-width: 375px) and (max-width: 413) {
    html {
      font-size: 50px;
    }
  }

  @media screen and (min-width: 320px) and (max-width: 374) {
    html {
      font-size: 42.6667px;
    }
  }

  @media screen and (max-width: 961px) {
    .pc-content {
      display: none !important;
    }

    .mobile-content {
      display: block !important;
    }
  }

  @media screen and (min-width: 960px) {
    .pc-content {
      display: block !important;
    }

    .mobile-content {
      display: none !important;
    }
  }

  /* 公用 */
  header, section, footer, ul, li, p, dl, dt, dd {
    margin: 0;
    padding: 0;
  }

  ul, li {
    list-style: none;
  }

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

  /* 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;
  }

  .register-login-btn {
    font-size :16px;
  }

  .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 {
    width: 100%;
    padding: 30px;
    color: #333333;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    word-wrap: break-word;
    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 {
    font-size: 16px;
    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!important;
  }

  .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;
  }

  /********** 移动端  start  *********/
  /* 菜单 */
  .mb-menu-icon-con {
    width: 0.32rem;
    height: 0.27rem;
    position: fixed;
    top: 0;
    right: 0;
    margin: 0.26rem;
    font-size: 0.16rem;
    z-index: 999;
  }

  .mb-menu-icon-con > img {
    width: 100%;
    height: 100%;
  }

  .mb-menu-list-con {

  }

  .mb-menu-list-con > li {
    margin: 5px 10px;
    font-size: 0.32rem;
  }

  /* banner */
  .mb-banner-con {
    width: 100%;
    height: 3.25rem;
  }

  .mb-banner-con img {
    width: 100%;
    height: 100%;
  }

  /* 核心优势 */
  .mb-advantage-con {
    width: 100%;
  }

  .mb-ad-title {
    height: 0.4rem;
    line-height: 0.4rem;
    font-size: 0.4rem;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #000000;
    text-align: center;
    margin: 0.62rem 0 0.43rem;
  }

  .mb-advantage-con-swiper {
    width: 100%;
  }

  .mb-ad-advantage-details {
    width: calc(100% - 1rem);
    height: 6.31rem;
    overflow: hidden;
    margin: 0.16rem 0.5rem;
    padding: 0.4rem 0 0;
    background: #fff url("../../assets/image/website/adfooter.png") no-repeat bottom center;
    background-size: contain;
    border-radius: 8px;
    box-shadow: 0 6px 18px 1px rgba(57, 124, 255, 0.26);
  }

  .ad-details-pic-con {
    width: 1.27rem;
    height: 1.32rem;
    margin: 0 auto;
  }

  .mb-ad-pic1 {
    background: url("../../assets/image/website/ad1.png") no-repeat center center;
    background-size: cover;
  }

  .mb-ad-pic2 {
    background: url("../../assets/image/website/ad2.png") no-repeat center center;
    background-size: cover;
  }

  .mb-ad-pic3 {
    background: url("../../assets/image/website/ad3.png") no-repeat center center;
    background-size: cover;
  }

  .mb-ad-pic4 {
    background: url("../../assets/image/website/ad4.png") no-repeat center center;
    background-size: cover;
  }

  .mb-ad-details-title {
    margin: 0.15rem auto;
    line-height: 0.6rem;
    font-size: 0.3rem;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #1D8EFE;
    text-align: center;
  }

  .mb-ad-details {
    width: 5rem;
    margin: 0.3rem auto;
    color: #333;
    font-size: 0.28rem;
    line-height: 0.48rem;
    font-weight: 400;
    word-wrap: break-word;
    text-align: justify;
    text-align-last: center;
    -ms-text-align-last: center;
    -moz-text-align-last: center;
  }

  /*入驻流程*/
  .mb-process-con {
    background-color: #f9f9fa;
    padding: 0.1rem 0;
  }

  .mb-process-con-title {
    height: 1.4rem;
    line-height: 1.4rem;
    font-size: 0.4rem;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #000000;
    text-align: center;
  }

  .mb-process {
    display: flex;
    justify-content: space-around;
    flex-direction: row;
  }

  .mb-pre-process-con {
    padding: 0 0 0.3rem;
    margin: 0.1rem 0.2rem;
    background-color: #fff;
    flex: 1;
  }

  .step-pic {
    width: 0.9rem;
    height: 0.64rem;
    margin: 0.3rem auto 0.3rem;
  }

  .step-pic > img {
    display : block;
    width: 100%;
    height: 100%;
    border: none;
  }

  .step-title {
    text-align: center;
    height: 0.3rem;
    line-height: 0.3rem;
    font-size: 0.3rem;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #000000;
  }

  .step-cont-text {
    width: 80%;
    font-size: 0.26rem;
    margin: 0.3rem auto 0;
    text-align: center;
    line-height: 0.4rem;
  }

  .doc-bg-con {
    height: 2.15rem; // 设计高度215px
    margin: 0.24rem 0.2rem;
    padding: 0.32rem;
    background: #fff url("../../assets/image/website/mate-bg.png") no-repeat 100%;
    background-size: cover;
  }

  .doc-title {
    font-size: 0.3rem;
    height: 0.3rem;
    line-height: 0.3rem;
    text-indent: 0.3rem;
  }

  .doc-title-mst {
    background: url("../../assets/image/website/setIn1.png") no-repeat 0 center;
    background-size: 0.3rem 0.3rem;
  }

  .doc-title-no-mst {
    background: url("../../assets/image/website/setIn2.png") no-repeat 0 center;
    background-size: 0.3rem 0.3rem;
  }

  .doc-ul-list {
    font-size: 0.26rem;
    color: #666;
    padding: 0.2rem 0.1rem;
  }

  .doc-ul-list > li {
    background: url("../../assets/image/website/arrow.png") no-repeat 0 center;
    background-size: 0.19rem 0.17rem;
    text-indent: 0.24rem;
    line-height: 0.44rem;
  }

  .doc-ul-list-spe {
    display: flex;
    justify-content: start;
    flex-direction: row;
  }

  // 品牌入驻
  .mb-brand-con-bg {
    background: linear-gradient(0deg, #DEE8F9 46%, #FEFEFF 100%);
  }

  .mb-brand-title {
    height: 1.4rem;
    line-height: 1.4rem;
    font-size: 0.4rem;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #000000;
    text-align: center;
  }

  .mb-brand-type {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto 0.3rem;
    height: 0.28rem;
    line-height: 0.28rem;
    font-size: 0.3rem;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #000000;
  }

  .mb-clothes, .mb-electrical, .mb-food, .mb-maternal {
    font-size: 0.3rem;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #000000;
    text-indent: 0.34rem;
  }

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

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

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

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

  .mb-brand-con-swiper {
    width: 100%;
  }

  .mb-img-con {
    padding: 0.2rem 0.3rem;
    margin: 0.2rem 0.2rem;
    background: #fff;
  }

  .mb-img-con > img {
    width: 1.88rem;
    height: 0.86rem;
    margin: 0.1rem 0.14rem; // 0.1  0.1
  }

  // 移动端底部
  .mb-footer {
    background: #242A37;
    padding: 0.16rem 0;
  }

  .mb-about-list {
    font-size: 0.24rem;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 0.24rem;
  }

  .mb-about-list > ul {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
  }

  .mb-about-list > ul > li {
    flex: 33%;
    text-align: center;
    padding: 0.24rem 0;
  }

  .mb-about-us {
    padding: 0.1rem 0 0.24rem;
    border-bottom: 1px solid #5F5F5F;
  }

  .mb-about-us > p {
    text-align: center;
    font-size: 0.22rem;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 0.4rem;
  }

  .mb-about-gs {
    text-align: center;
    font-size: 0.14rem;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #959BA8;
    line-height: 0.28rem;
    padding: 0.3rem 0;
  }

</style>
