zhongde-website/pages/index.vue

<template>
  <div class="container">
    <!-- banner -->
    <VBanner :bannerData="bannerData"></VBanner>
    <!-- 思维“芯”产品 -->
    <div class="index-thinking">
      <div class="i-t-content">
        <!-- <div class="t-top title-content">
          <div class="title-en">PRODUCT</div>
          <div class="title-zh">
            思维“芯”产品
          </div>
        </div> -->
        <div class="thinking-content-box">
          <div class="thinking-cate-box">
            <ul class="thinking-cate-nav">
              <li class="thinking-products-kind" v-for="(item, index) in productCate" :class="{active:index == clickProdIndex}" :key="index"  @click="getProdList(index)">
                <nuxt-link to="/">
                  {{ item.title }}
                </nuxt-link>
                <div class="line"></div>
              </li>
            </ul>
            <div class="thinking-cate-list">
              <div class="thinking-product-item" v-for="(item, index) in productCate" :key="index">
                <div class="">
                  <img src="~/assets/images/index/tab-right-pic-dg.png" alt="" srcset="">
                </div>
                <div class="thinking-product-info">

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

    <!-- 品牌故事 -->
    <!-- <div id="index-story">
      <div class="i-s-contant">
        <div class="s-c-top">
          <div class="c-t-titleC"><h2>品牌故事</h2></div>
          <div class="c-t-titleE">Brand Story</div>
          <div class="c-t-description">爱，一个梦想，一生一世一个家</div>
        </div>
        <div class="s-c-bottom">
          <div class="story-bottom-detalis">
            <div class="bottom-detalis-title">
              <div class="bottom-detalis-titleC">
                <p class="detalis-titleC-first">我生怕辜负</p>
                <p class="detalis-titleC-sec">这个时代</p>
              </div>
              <div class="bottom-detalis-titleE">
                <p class="detalis-titleE-desc"> </p>
              </div>
            </div>
            <div class="bottom-detalis-content">
              “这是最好的时代，也是最坏的时代”，100年前英国文学家狄更斯这样描述工业革命发生后的时代。如今时代又何尝不是如此呢？阶级被打破，边界在打破，跨界与创新，互联网让世界变得更加平等，每个人都有自己追求梦想的机会，以及成功的可能性......
            </div>
            <div class="bottom-detalis-more-box">
              <div class="bottom-detalis-more-img">
                <img src="~/assets/images/index/bottom-detalis-more-img.png">
              </div>
              <div class="bottom-detalis-more">
                <nuxt-link to="/brand">了解更多 ></nuxt-link>
              </div>
            </div>
          </div>
          <div class="story-bottom-vedios">
            <indexVideo></indexVideo>
          </div>
        </div>
      </div>
    </div> -->
    <!-- 体验馆 -->
    <!-- <div id="index-experience">
      <div class="experience-content">
        <div class="experience-content-top">
          <div class="experience-content-top-titleC"><h2>体验馆</h2></div>
          <div class="experience-content-top-titleE">Experience Stores</div>
          <div class="experience-content-top-description">我们所有的努力，旨在打造一个宾至如归的理想状态</div>
        </div>
        <div class="experience-content-box">
          <div class="experience-place-container">
            <div class="experience-place-ul-box">
              <ul class="experience-place-nav">
                <li class="experience-place" v-for="(item,index) in experiencePlace" :key="index" :class="{active:index == num}" @click="tab(index)">{{item}}</li>
              </ul>
              <ul class="experience-place-nav-others">
                <li class="experience-place">武汉</li>
                <li class="experience-place">杭州</li>
                <li class="experience-place">深圳</li>
              </ul>
            </div>
            <div class="experience-href"><nuxt-link target="_blank" to="/join">招商加盟详情</nuxt-link></div>
            <div class="experience-tab-content">
              <div class="experience-tab-box experience-tab-box-bt" v-show="0 == num">
                <div class="experience-tab-left">
                  <div class="experience-tab-left-place">包头</div>
                  <div class="experience-tab-left-img">
                    <img src="~/assets/images/index/experience-tab-left-img-bt.png">
                  </div>
                </div>
                <div class="experience-tab-right">
                  <div class="tab-right-intro">
                    <div class="tab-right-intro-title">
                      <p>逐梦</p>
                      <p>鹿都之巅</p>
                      <p class="tab-right-intro-title-desc">卫诗理Olive life 新零售包头店，逐梦之路，未来之巅</p>
                      <p class="tab-right-intro-title-desc-line"></p>
                    </div>
                    <div class="tab-right-intro-style">
                      <p>拉斐尔现代美式、麦迪逊轻奢美式、麦巴赫·纽约摩登...</p>
                      <p class="intro-style-en">Style</p>
                      <p class="tab-right-intro-title-desc-line"></p>
                    </div>
                    <div class="tab-right-intro-phone">
                      <p class="intro-phone-number">186-86152121</p>
                      <p class="intro-phone-name">telephone</p>
                    </div>
                    <div class="tab-right-intro-more">
                      <nuxt-link to="experice/bt">了解更多 ></nuxt-link>
                    </div>
                  </div>
                  <div class="tab-right-pic">
                    <div class="right-pic-name-box">
                      <div class="right-pic-name">
                        <p>现代桦木多</p>
                        <p>功能储物斗柜</p>
                      </div>
                      <div class="right-pic-name-desc">
                        <p>典雅深色与明亮金属色泽</p>
                        <p>相间展现文艺仿古的艺术感。</p>
                      </div>
                    </div>
                    <div class="tab-right-img">
                      <img src="~/assets/images/index/tab-right-pic-bt.png">
                    </div>
                  </div>
                </div>
              </div>
              <div class="experience-tab-box experience-tab-box-cd" v-show="1 == num">
                <div class="experience-tab-left">
                  <div class="experience-tab-left-place">成都</div>
                  <div class="experience-tab-left-img">
                    <img src="~/assets/images/index/experience-tab-left-img-cd.png">
                  </div>
                </div>
                <div class="experience-tab-right">
                  <div class="tab-right-intro">
                    <div class="tab-right-intro-title">
                      <p>天府之国</p>
                      <p class="tab-right-intro-title-desc">卫诗理新零售成都“卫共”店，生态生活，盎然新启</p>
                      <p class="tab-right-intro-title-desc-line"></p>
                    </div>
                    <div class="tab-right-intro-style">
                      <p>美式、欧式、英式、轻奢小法、禅意中式、新古典、中式...</p>
                      <p class="intro-style-en">Style</p>
                      <p class="tab-right-intro-title-desc-line"></p>
                    </div>
                    <div class="tab-right-intro-phone">
                      <p class="intro-phone-number">028-85007888</p>
                      <p class="intro-phone-name">telephone</p>
                    </div>
                    <div class="tab-right-intro-more">
                      <nuxt-link to="/experice/cd">了解更多 ></nuxt-link>
                    </div>
                  </div>
                  <div class="tab-right-pic">
                    <div class="right-pic-name-box">
                      <div class="right-pic-name">
                        <p>珍尼丝</p>
                        <p>电视柜</p>
                      </div>
                      <div class="right-pic-name-desc">
                        <p>复古旅行箱造型</p>
                        <p>摩洛哥海洋蓝</p>
                        <p>AISI镜光铜</p>
                      </div>
                    </div>
                    <div class="tab-right-img">
                      <img src="~/assets/images/index/tab-right-pic-cd.png">
                    </div>
                  </div>
                </div>
              </div>
              <div class="experience-tab-box experience-tab-box-nj" v-show="2 == num">
                <div class="experience-tab-left">
                  <div class="experience-tab-left-place">南京</div>
                  <div class="experience-tab-left-img">
                    <img src="~/assets/images/index/experience-tab-left-img-nanjing.jpg">
                  </div>
                </div>
                <div class="experience-tab-right">
                  <div class="tab-right-intro">
                    <div class="tab-right-intro-title">
                      <p>绽放</p>
                      <p>十朝都会</p>
                      <p class="tab-right-intro-title-desc">卫诗理线下O2O南京"卫共"店初心不移，呈现生活最美的姿态</p>
                      <p class="tab-right-intro-title-desc-line"></p>
                    </div>
                    <div class="tab-right-intro-style">
                      <p>大美，小美，简美，意式，法式英式，新中式等...</p>
                      <p class="intro-style-en">Style</p>
                      <p class="tab-right-intro-title-desc-line"></p>
                    </div>
                    <div class="tab-right-intro-phone">
                      <p class="intro-phone-number">025-52458886</p>
                      <p class="intro-phone-name">telephone</p>
                    </div>
                    <div class="tab-right-intro-more">
                      <nuxt-link to="experice/nj">了解更多 ></nuxt-link>
                    </div>
                  </div>
                  <div class="tab-right-pic">
                    <div class="right-pic-name-box">
                      <div class="right-pic-name">
                        <p>纳尔逊</p>
                        <p>餐桌</p>
                      </div>
                      <div class="right-pic-name-desc">
                        <p>非洲进口桃花口木</p>
                        <p>沙比利木皮拼花</p>
                        <p>古典圆形转盘设计</p>
                      </div>
                    </div>
                    <div class="tab-right-img">
                      <img src="~/assets/images/index/tab-right-pic-nanjing.png">
                    </div>
                  </div>
                </div>
              </div>
              <div class="experience-tab-box experience-tab-box-dg" v-show="3 == num">
                <div class="experience-tab-left">
                  <div class="experience-tab-left-place">东莞</div>
                  <div class="experience-tab-left-img">
                    <img src="~/assets/images/index/experience-tab-left-img-dg.png">
                  </div>
                </div>
                <div class="experience-tab-right">
                  <div class="tab-right-intro">
                    <div class="tab-right-intro-title">
                      <p>臻贡</p>
                      <p>一个阶层</p>
                      <p class="tab-right-intro-title-desc">纯正欧式尊贵体验，赋予贵族新的定义</p>
                      <p class="tab-right-intro-title-desc-line"></p>
                    </div>
                    <div class="tab-right-intro-style">
                      <p>大美、小美、简美、英式、美式、法式、意式...</p>
                      <p class="intro-style-en">Style</p>
                      <p class="tab-right-intro-title-desc-line"></p>
                    </div>
                    <div class="tab-right-intro-phone">
                      <p class="intro-phone-number">0796-82251668</p>
                      <p class="intro-phone-name">telephone</p>
                    </div>
                    <div class="tab-right-intro-more">
                      <nuxt-link to="experice/dg">了解更多 ></nuxt-link>
                    </div>
                  </div>
                  <div class="tab-right-pic">
                    <div class="right-pic-name-box">
                      <div class="right-pic-name">
                        <p>史丹尼</p>
                        <p>沙发</p>
                      </div>
                      <div class="right-pic-name-desc">
                        <p>经典切斯特菲尔德 </p>
                        <p>意大利头层牛皮</p>
                        <p>金属&实木艺术交融</p>
                      </div>
                    </div>
                    <div class="tab-right-img">
                      <img src="~/assets/images/index/tab-right-pic-dg.png">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div> -->
    <!-- 产品介绍 -->
    <!-- <div id="index-products">
      <div class="products-content">
        <div class="products-content-top">
          <div class="products-content-top-titleC">
            <h2>产品介绍</h2>
          </div>
          <div class="products-content-top-titleE">Products Introduce</div>
          <div class="products-content-top-description">品质生活，爱家有道</div>
        </div>
        <div class="products-content-box">
          <div class="products-kind-container">
            <ul class="products-kind-nav">
              <li class="products-kind" v-for="(item,index) in indexProdNav" :key="item.proCategoryId" :class="{active:index == clickProdIndex}" @click="getProdList(index)">{{item.proCategoryName}}</li>
            </ul>
            <div class="products-tab-content">
              <prodListShow :prodList="indexProdList6" :showNewMore="true" :typeId="97" v-show="0 == clickProdIndex"></prodListShow>
              <prodListShow :prodList="indexProdList1" :showMore="true" :typeId="1" v-show="1 == clickProdIndex"></prodListShow>
              <prodListShow :prodList="indexProdList2" :showMore="true" :typeId="2" v-show="2 == clickProdIndex"></prodListShow>
              <prodListShow :prodList="indexProdList3" :showMore="true" :typeId="3" v-show="3 == clickProdIndex"></prodListShow>
              <prodListShow :prodList="indexProdList4" :showMore="true" :typeId="4" v-show="4 == clickProdIndex"></prodListShow>
            </div>
          </div>
        </div>
      </div>
    </div> -->
    <!-- 新闻资讯部分 -->
    <!-- <div id="index-news">
      <div class="news-content">
        <div class="news-content-top">
          <div class="news-content-top-titleC"><h2>新闻资讯</h2></div>
          <div class="news-content-top-titleE">News Center</div>
          <div class="news-content-top-description">一切资讯都是有价值的</div>
        </div>
        <div class="news-content-box">
          <div class="news-kind-container">
            <ul class="news-kind-nav">
              <li class="news-kind" v-for="(item,index) in $store.state.headNewsNav" :key="index" :class="{active:index == clickNewsIndex}" @click="getNewsList(index)">{{item.articleCategoryName}}</li>
            </ul>
            <div class="news-tab-content">
              <indexNewsListShow :indexFirstNewsList="indexFirstNewsList1" :indexNewsList="indexNewsList1" v-show="0 == clickNewsIndex"></indexNewsListShow>
              <indexNewsListShow :indexFirstNewsList="indexFirstNewsList2" :indexNewsList="indexNewsList2" v-show="1 == clickNewsIndex"></indexNewsListShow>
              <indexNewsListShow :indexFirstNewsList="indexFirstNewsList3" :indexNewsList="indexNewsList3" v-show="2 == clickNewsIndex"></indexNewsListShow>
              <indexNewsListShow :indexFirstNewsList="indexFirstNewsList4" :indexNewsList="indexNewsList4" v-show="3 == clickNewsIndex"></indexNewsListShow>
              <indexNewsListShow :indexFirstNewsList="indexFirstNewsList5" :indexNewsList="indexNewsList5" v-show="4 == clickNewsIndex"></indexNewsListShow>
            </div>
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import axios from 'axios';
import VBanner from '~/components/home/banner';
// import indexVideo from '~/components/home/indexVideo';
// import prodListShow from '~/components/common/prodListShow';
// import indexNewsListShow from '~/components/common/indexNewsListShow'

export default {
  data() {
    return {
      experiencePlace:['包头','成都','南京','东莞'],
      num:0,
      clickProdIndex:0,
      clickNewsIndex: 0,
      productCate: [
        {
          title: '全部',
          type: 0
        },
        {
          title: '0-3岁思维启蒙',
          type: 1
        },
        {
          title: '3-7岁能力训练',
          type: 2
        },
        {
          title: '5-7岁入学思考',
          type: 3
        },
        {
          title: '7-12岁技巧学习',
          type: 4
        }
      ]
    }
  },
  components: {
    VBanner,
    // indexVideo,
    // prodListShow,
    // indexNewsListShow
  },
  head() {
    return {
      title:'【中德智慧官网】逻辑狗 中华小熊猫',
      meta: [
        {name:'keywords',hid: 'keywords',content:`${this.metaData.navigationKeyword}`},
        {name:'description',hid:'description',content:`${this.metaData.navigationDescription}`}
      ],
    }
  },
  async asyncData({params,store}){
    //首页head信息
    let metaData = await axios(`${store.state.wordpressAPI}/NavigationMeta/get/1`);
    //banner数据动态获取
    let banner = await axios(`${store.state.wordpressAPI}/banner/selectAllByTpye/1`);
    //首页新闻信息
    // let indexFirstNewsList1 = await axios(`${store.state.wordpressAPI}/article/getRecommend/1`);
    // let indexFirstNewsList2 = await axios(`${store.state.wordpressAPI}/article/getRecommend/2`);
    // let indexFirstNewsList3 = await axios(`${store.state.wordpressAPI}/article/getRecommend/3`);
    // let indexFirstNewsList4 = await axios(`${store.state.wordpressAPI}/article/getRecommend/4`);
    // let indexFirstNewsList5 = await axios(`${store.state.wordpressAPI}/article/getRecommend/5`);

    // let indexNewsList1 = await axios(`${store.state.wordpressAPI}/article/getRecommendsByCategoryId/1/9`);
    // let indexNewsList2 = await axios(`${store.state.wordpressAPI}/article/getRecommendsByCategoryId/2/9`);
    // let indexNewsList3 = await axios(`${store.state.wordpressAPI}/article/getRecommendsByCategoryId/3/9`);
    // let indexNewsList4 = await axios(`${store.state.wordpressAPI}/article/getRecommendsByCategoryId/4/9`);
    // let indexNewsList5 = await axios(`${store.state.wordpressAPI}/article/getRecommendsByCategoryId/5/9`);
    
    //首页产品展示信息
    // let indexProdNav = await axios(`${store.state.wordpressAPI}/proCategory/showFirst`);
    
    // let indexProdList1 = await axios(`${store.state.wordpressAPI}/product/selectByPosition/1`);
    // let indexProdList2 = await axios(`${store.state.wordpressAPI}/product/selectByPosition/2`);
    // let indexProdList3 = await axios(`${store.state.wordpressAPI}/product/selectByPosition/3`);
    // let indexProdList4 = await axios(`${store.state.wordpressAPI}/product/selectByPosition/4`);
    // let indexProdList6 = await axios(`${store.state.wordpressAPI}/product/selectByPosition/97`);

    return {
      metaData: metaData.data,
      bannerData: banner.data,
      //首页新闻信息
      // indexFirstNewsList1: indexFirstNewsList1.data,
      // indexFirstNewsList2: indexFirstNewsList2.data,
      // indexFirstNewsList3: indexFirstNewsList3.data,
      // indexFirstNewsList4: indexFirstNewsList4.data,
      // indexFirstNewsList5: indexFirstNewsList5.data,
      // indexNewsList1: indexNewsList1.data,
      // indexNewsList2: indexNewsList2.data,
      // indexNewsList3: indexNewsList3.data,
      // indexNewsList4: indexNewsList4.data,
      // indexNewsList5: indexNewsList5.data,
      //首页产品信息
      // indexProdNav: indexProdNav.data,
      // indexProdList1: indexProdList1.data,
      // indexProdList2: indexProdList2.data,
      // indexProdList3: indexProdList3.data,
      // indexProdList4: indexProdList4.data,
      // indexProdList6: indexProdList6.data,
    } 
  },
  methods: {
    tab (index){
      this.num = index;
    },
    getProdList (index){
      this.clickProdIndex = index;
    },
    getNewsList (index){
      this.clickNewsIndex = index;
    }
  }
};

</script>
<style lang="scss" scoped>
@import '~static/common/style.sass';

.container {
  width: 100%;
  height: auto;
}


.title-en {
  height:110px;
  line-height:110px;
  font-size:78px;
  font-family:PingFangSC-Semibold,PingFang SC;
  font-weight:600;
  color:#353956;
}

.title-zh {
  height:81px;
  line-height:81px;
  font-size:58px;
  font-family:PingFangSC-Semibold,PingFang SC;
  font-weight:600;
  color:#000000;
  letter-spacing:1px;
}


/* index-thinking */ 
.index-thinking {
  width: 1200px;
  margin: 0 auto;
  // text-align: center;
  .i-t-content {
    position: relative;
    .title-zh {
      z-index: 666;
    }
    .title-en {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
    }
  }
  ul.thinking-cate-nav {
    margin: 124px 0 116px;
  }
  li.thinking-products-kind {
    display: inline-block;
    margin: 0 30px;
    cursor: pointer;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    .line {
      visibility: hidden;
      margin: 22px auto 0;
      width:60px;
      border-radius: 50px;
      height: 15px;
      background:rgba(159,17,48,1);
      box-shadow: 0px 2px 8px 0px rgba(240,53,94,0.61);
    }
    a {
      font-size: 32px;
      color: #747885;
    }
  }
  li.thinking-products-kind:hover, li.thinking-products-kind.active {
    .line {
      display: block;
      visibility: visible;
    }
  }

  li.thinking-products-kind:first-child {
    margin-left: 0;
  }
  li.thinking-products-kind.active a, 
  .thinking-products-kind:hover a{
    // font-size: 42px;
    color: $theme_fu_red;
    // border-bottom: 6px solid $theme_fu_red;
    // box-shadow:0px 2px 8px 0px rgba(240,53,94,0.61);
  }
}

/*index-story*/
div#index-story {
  width: 100%;
  height: auto;
}

.i-s-contant {
  width: 1200px;
  height: auto;
  margin: 0 auto;
}

.s-c-top {
  width: 100%;
  height: auto;
  padding: 162px 0 100px;
  text-align: center;
}

.c-t-titleC {
  width: 100%;
  height: auto;
  font-size: 38px;
  font-family: "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif",
    "source-han-serif-sc", "STZhongsong", "宋体", "serif";
  font-weight: 900;
  color: #22202b;
  line-height: 46px;
}

.c-t-titleE {
  width: 100%;
  height: auto;
  font-size: 14px;
  color: #858585;
  line-height: 22px;
}

.c-t-description {
  width: 100%;
  height: auto;
  font-size: 14px;
  color: #858585;
  line-height: 22px;
}

.s-c-bottom {
  overflow: hidden;
  width: 100%;
  height: auto;
  padding-bottom: 150px;
}

.story-bottom-detalis {
  float: left;
  width: 600px;
  height: auto;
}

.story-bottom-vedios {
  float: right;
  overflow: hidden;
  width: 530px;
  height: 353px;
  cursor: pointer;
}

.bottom-detalis-title {
  overflow: hidden;
  width: 100%;
  height: auto;
  padding-bottom: 45px;
}

.bottom-detalis-titleC {
  position: relative;
  width: 100%;
  height: auto;
  padding: 10px 0 5px;
  color: #22202b;
  font-size: 22px;
  line-height: 24px;
  text-align: left;
}

.bottom-detalis-titleC::after {
  position: absolute;
  top: 50%;
  right: 45px;
  content: "";
  width: 339px;
  height: 2px;
  background: #d5d5d8;
}

.bottom-detalis-titleE {
  width: 320px;
  height: auto;
  color: #cccccc;
  font-size: 12px;
  line-height: 15px;
  text-align: left;
}

.bottom-detalis-content {
  overflow: hidden;
  width: 100%;
  height: auto;
  padding-right: 94px;
  padding-bottom: 60px;
  color: #858585;
  font-size: 14px;
  line-height: 18px;
  text-align: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.bottom-detalis-more-box {
  overflow: hidden;
  width: 100%;
  height: auto;
}

.bottom-detalis-more-img {
  float: left;
  overflow: hidden;
  width: 107px;
  height: 78px;
}

.bottom-detalis-more {
  float: left;
  width: 163px;
  height: 40px;
  margin-top: 17px;
  margin-left: 62px;
  border: 3px solid #000;
  font-size: 14px;
  line-height: 40px;
  text-align: center;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.bottom-detalis-more:hover {
  -webkit-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  -o-transform: translateY(-5px);
  transform: translateY(-5px);
}

.bottom-detalis-more-img img {
  width: 100%;
  height: 100%;
}

.bottom-detalis-more a {
  display: block;
  width: 100%;
  height: 100%;
  color: #22202b;
  font-weight: bold;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.bottom-detalis-more:hover a {
  background: #22202b;
  color: #feeabd;
}
/*index-story*/

/*体验馆*/
div#index-experience {
  width: 100%;
  height: auto;
  background: #f9f9fa;
}

.experience-content {
  width: 1200px;
  height: auto;
  margin: 0 auto;
}

.experience-content-top {
  width: 100%;
  height: auto;
  padding: 140px 0 22px;
  text-align: center;
}

.experience-content-top-titleC {
  width: 100%;
  height: auto;
  font-size: 38px;
  font-family: "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif",
    "source-han-serif-sc", "STZhongsong", "宋体", "serif";
  font-weight: 900;
  color: #22202b;
  line-height: 46px;
}

.experience-content-top-titleE {
  width: 100%;
  height: auto;
  font-size: 14px;
  color: #858585;
  line-height: 22px;
}

.experience-content-top-description {
  width: 100%;
  height: auto;
  padding-top: 6px;
  font-size: 14px;
  color: #858585;
  line-height: 22px;
}

.experience-content-box {
  overflow: hidden;
  width: 100%;
  height: auto;
}

.experience-place-container {
  width: 100%;
  height: auto;
}

.experience-place-ul-box {
  width: 100%;
  text-align: center;
}

ul.experience-place-nav {
  display: inline-block;
  height: auto;
  text-align: center;
}

.experience-place-nav-others {
  display: inline-block;
}

li.experience-place {
  display: inline-block;
  width: 104px;
  height: 40px;
  margin: 0 8px;
  border: 3px solid #000;
  color: #000;
  font-size: 14px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

li.experience-place.active {
  color: #feeabd;
  background: #000;
}

li.experience-place:hover {
  color: #feeabd;
  background: #000;
}

.experience-href {
  width: 100%;
  height: auto;
  padding-top: 20px;
  font-size: 14px;
  color: #858585;
  line-height: 22px;
  text-align: center;
}

.experience-href a {
  color: #858585;
}

.experience-href a:hover {
  color: #000;
}

.experience-tab-content {
  overflow: hidden;
  width: 100%;
  height: auto;
  padding: 118px 0 150px;
}

.experience-tab-box {
  overflow: hidden;
  width: 100%;
}

.experience-tab-content .experience-tab-box:first-child {
  display: block;
}

.experience-tab-left {
  float: left;
  width: 600px;
  height: auto;
}

.experience-tab-right {
  float: right;
  width: 600px;
  height: auto;
}

.experience-tab-left-place {
  position: relative;
  overflow: hidden;
  width: 456px;
  padding: 34px 0 0 40px;
  color: #22202b;
  font-size: 14px;
  text-align: left;
  line-height: 30px;
  box-sizing: border-box;
}

.experience-tab-left-place::after {
  position: absolute;
  top: 49px;
  right: 0;
  content: "";
  width: 339px;
  height: 2px;
  background: #d5d5d8;
}

.experience-tab-left-img {
  overflow: hidden;
  width: 515px;
  height: 485px;
  margin-top: -40px;
}

.experience-tab-box-nj .experience-tab-left-img img {
  margin-top: 144px;
}

.tab-right-intro {
  float: left;
  width: 316px;
}

.tab-right-pic {
  float: right;
  width: 284px;
}

.tab-right-intro-title {
  overflow: hidden;
  width: 100%;
  height: auto;
  color: #22202b;
  font-size: 22px;
  font-weight: bold;
  line-height: 24px;
  text-align: left;
}

p.tab-right-intro-title-desc {
  width: 200px;
  height: auto;
  padding-top: 10px;
  padding-bottom: 40px;
  color: #979797;
  font-size: 14px;
  font-weight: normal;
  line-height: 22px;
}

p.tab-right-intro-title-desc-line {
  width: 136px;
  height: 2px;
  background: #d5d5d8;
}

.tab-right-intro-style {
  width: 200px;
  height: auto;
  padding-top: 48px;
  color: #22202b;
  font-size: 14px;
  text-align: left;
  line-height: 18px;
}

p.intro-style-en {
  color: #979797;
  font-size: 14px;
  line-height: 26px;
  padding-bottom: 30px;
}

.tab-right-intro-phone {
  width: 100%;
  height: auto;
  padding-top: 45px;
  padding-bottom: 83px;
}

p.intro-phone-number {
  width: 100%;
  height: 22px;
  color: #22202b;
  font-size: 18px;
  font-weight: bold;
  line-height: 22px;
  text-align: left;
}

p.intro-phone-name {
  width: 100%;
  height: 22px;
  color: #979797;
  font-size: 14px;
  line-height: 22px;
  text-align: left;
}

.tab-right-intro-more {
  width: 163px;
  height: 40px;
  border: 3px solid #000;
  font-size: 14px;
  line-height: 40px;
  text-align: center;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.tab-right-intro-more:hover {
  -webkit-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  -o-transform: translateY(-5px);
  transform: translateY(-5px);
}

.tab-right-intro-more a {
  display: block;
  width: 100%;
  height: 100%;
  color: #22202b;
  font-weight: bold;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.tab-right-intro-more:hover a {
  background: #22202b;
  color: #feeabd;
}

.right-pic-name-box {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-left: 60px;
  padding-bottom: 160px;
  box-sizing: border-box;
}

.right-pic-name-box::after {
  position: absolute;
  right: 49.7%;
  bottom: 9px;
  content: "";
  width: 2px;
  height: 135px;
  background: #d5d5d8;
}

.right-pic-name {
  overflow: hidden;
  width: 100%;
  height: auto;
  color: #22202b;
  font-size: 22px;
  font-weight: bold;
  line-height: 24px;
  text-align: left;
}

.right-pic-name-desc {
  width: 100%;
  height: auto;
  padding: 12px 0 24px;
  color: #979797;
  font-size: 14px;
  font-weight: normal;
  line-height: 18px;
}

.tab-right-img {
  display: flex;
  overflow: hidden;
  width: 100%;
  height: 230px;
  text-align: center;
  justify-content: center;
  align-items: center;
}

/*体验馆*/
/* 产品部分 */
div#index-products {
  width: 100%;
  height: auto;
}

.products-content {
  width: 1200px;
  height: auto;
  margin: 0 auto;
}

.products-content-top {
  width: 100%;
  height: auto;
  padding: 140px 0 22px;
  text-align: center;
}

.products-content-top-titleC {
  width: 100%;
  height: auto;
  font-size: 38px;
  font-family: "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif",
    "source-han-serif-sc", "STZhongsong", "宋体", "serif";
  font-weight: 900;
  color: #22202b;
  line-height: 46px;
}

.products-content-top-titleE {
  width: 100%;
  height: auto;
  font-size: 14px;
  color: #858585;
  line-height: 22px;
}

.products-content-top-description {
  width: 100%;
  height: auto;
  padding-top: 6px;
  font-size: 14px;
  color: #858585;
  line-height: 22px;
}

.products-content-box {
  overflow: hidden;
  width: 100%;
  height: auto;
  padding-bottom: 150px;
}

.products-kind-container {
  width: 100%;
  height: auto;
}

ul.products-kind-nav {
  width: 100%;
  height: auto;
  padding-top: 20px;
  text-align: center;
}

li.products-kind {
  display: inline-block;
  height: 46px;
  margin: 0 22px;
  border-bottom: 2px solid transparent;
  color: #979797;
  font-size: 14px;
  line-height: 46px;
  text-align: center;
  cursor: pointer;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
li.products-kind.active,
.products-kind:hover {
  color: #22202b;
  font-weight: bold;
  border-bottom: 2px solid #22202b;
}

.products-tab-content {
  overflow: hidden;
  width: 100%;
  height: auto;
  padding: 126px 0 0;
}

.products-more {
  overflow: hidden;
  width: 163px;
  height: 40px;
  margin: 0 auto;
  border: 3px solid #000;
  font-size: 14px;
  line-height: 40px;
  text-align: center;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.products-more:hover {
  -webkit-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  -o-transform: translateY(-5px);
  transform: translateY(-5px);
}

.products-more a {
  display: block;
  width: 100%;
  height: 100%;
  color: #22202b;
  font-weight: bold;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.products-more:hover a {
  background: #22202b;
  color: #feeabd;
}
/* 产品部分结束 */
/* 新闻资讯部分 */
div#index-news {
  width: 100%;
  height: auto;
  background: #f9f9fa;
}

.news-content {
  width: 1200px;
  height: auto;
  margin: 0 auto;
}

.news-content-top {
  width: 100%;
  height: auto;
  padding: 140px 0 22px;
  text-align: center;
}

.news-content-top-titleC {
  width: 100%;
  height: auto;
  font-size: 38px;
  font-family: "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif",
    "source-han-serif-sc", "STZhongsong", "宋体", "serif";
  font-weight: 900;
  color: #22202b;
  line-height: 46px;
}

.news-content-top-titleE {
  width: 100%;
  height: auto;
  font-size: 14px;
  color: #858585;
  line-height: 22px;
}

.news-content-top-description {
  width: 100%;
  height: auto;
  padding-top: 6px;
  font-size: 14px;
  color: #858585;
  line-height: 22px;
}

.news-content-box {
  overflow: hidden;
  width: 100%;
  height: auto;
  padding-bottom: 150px;
}

.news-kind-container {
  width: 100%;
  height: auto;
}

ul.news-kind-nav {
  width: 100%;
  height: auto;
  padding-top: 20px;
  text-align: center;
}

li.news-kind {
  display: inline-block;
  height: 46px;
  margin: 0 22px;
  border-bottom: 2px solid transparent;
  color: #979797;
  font-size: 14px;
  line-height: 46px;
  text-align: center;
  cursor: pointer;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

li.news-kind.active,
.news-kind:hover {
  color: #22202b;
  font-weight: bold;
  border-bottom: 2px solid #22202b;
}

.news-tab-content {
  overflow: hidden;
  width: 100%;
  height: auto;
  padding-top: 70px;
}

/* 新闻资讯部分结束 */
</style>