<template>
  <!--  首页-->
  <div>
    <Header/>
    <div class="lunbotu">
      <el-carousel :height="vh + 'px'" arrow="always">
        <el-carousel-item v-for="(item, index) in imgList" :key="index">
          <div>
            <img :src="item" alt="" />
            <p class="total">
              0{{ index + 1 }}<span>/0{{ imgList.length }}</span>
            </p>
          </div>
        </el-carousel-item>
      </el-carousel>
      <div class="title">
        <p>工艺用料</p>
        <p>品质甄选</p>
      </div>
    </div>
    <div class="section2">
      <div class="jz">
        <div class="title">
          <p class="title_1">一人一版 量体定制</p>
          <p class="title_2">made-to-measure</p>
        </div>
        <div class="itemDiv d-flex">
          <div
            class="item"
            v-for="(item, index) in orderList"
            :key="index"

          >
            <router-link :to="item.url" class="d-flex">
              <!--              <img :src="item.imgUrl" alt="" />-->
              <i :class="item.iconClass"></i>
              <span class="title_3">{{ item.title }}</span>
              <span class="title_4">{{ item.desc }}</span>
            </router-link>

          </div>
        </div>
      </div>
    </div>
<!--    最新定制-->
<!--    <div class="section3">-->
<!--      <div class="jz">-->
<!--        <div class="titleCont">-->
<!--          <p class="title">最新定制</p>-->
<!--          <div class="orange"></div>-->
<!--          <p class="desc">Latest customization</p>-->
<!--        </div>-->
<!--        <div class="itemDiv d-flex">-->
<!--          <div class="item" v-for="(item, index) in clothList" :key="index">-->
<!--            <img :src="item.imgUrl" alt="" />-->
<!--            <p class="titleDiv">-->
<!--              {{ item.title1 }}<span>|</span>{{ item.title2 }}-->
<!--            </p>-->
<!--            <p class="price">-->
<!--              价格：¥<span>{{ item.price }}</span-->
<!--            >元-->
<!--            </p>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="more d-flex">-->
<!--          <a href="#">了解更多</a>-->
<!--          <img src="./assets/youjiantou.png" alt="" />-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
    <div class="section4">
      <div class="jz">
        <div class="titleCont d-flex">
          <p class="title">推荐商品</p>
          <div class="orange"></div>
          <p class="desc">Recommending Commodities</p>
        </div>
<!--        <el-carousel :interval="4000" type="card">-->
<!--          <el-carousel-item v-for="(item, index) in clothList2" :key="index" @click="tjspxq1(item.id,item.title)">-->
<!--            <div class="box" >-->
<!--              <img :src="item.imgUrl" alt="" />-->
<!--              <p class="box1">{{item.title}}</p>-->
<!--              <p class="box2">{{item.time}}</p>-->
<!--            </div>-->
<!--          </el-carousel-item>-->
<!--        </el-carousel>-->
        <a-carousel arrows :slides-to-show="3" :slides-to-scroll="1" >
          <div
            slot="prevArrow"
            slot-scope="props"
            class="custom-slick-arrow"
            style="left: 10px;zIndex: 1"
          >
            <a-icon type="left-circle" />
          </div>
          <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px">
            <a-icon type="right-circle" />
          </div>
          <div class="box" v-for="(item, index) in clothList2" :key="index" @click="tjspxq1(item.id,item.title)">
            <img :src="item.imgUrl" alt="" />
            <p class="box1">{{item.title}}</p>
            <p class="box2">价格:{{item.time}}</p>
          </div>
        </a-carousel>
        <div class="more d-flex" style="padding-top: 20px">
          <a href="/#/shopping/chengyi">更多推荐</a>
          <img src="./assets/youjiantou.png" alt="" />
        </div>
        <!--        <el-carousel type="card" arrow="always">-->
        <!--          <el-carousel-item v-for="(item, index) in clothList2" :key="index">-->
        <!--            <div class="box">-->
        <!--              <img :src="item.imgUrl" alt="" />-->
        <!--              <p class="box1">CLOTHING NAM</p>-->
        <!--              <p class="box2">15分钟前定制</p>-->
        <!--            </div>-->
        <!--          </el-carousel-item>-->
        <!--        </el-carousel>-->
      </div>
    </div>
    <div class="section5">
      <div class="jz">
        <div class="titleCont d-flex">
          <p class="title">服装类型</p>
          <div class="orange"></div>
          <p class="desc">Clothing type</p>
        </div>
        <el-tabs v-model="activeName" class="tabs">
          <el-tab-pane label="男装" name="first">
            <div class="jz d-flex">
              <div
                class="item d-flex"
                v-for="(item, index) in nanzhuang"
                :key="index"
                @click="tjspxq(item.id,item.title2)"
              >
                <img :src="item.imgUrl" alt="" />
                <p class="title_6">
                  {{ item.title1 }}<span class="line">|</span>{{ item.title2 }}
                </p>
                <div>
                  <el-tag type="warning" size="small">{{ item.tag1 }}</el-tag
                  ><el-tag type="warning" size="small">{{ item.tag2 }}</el-tag>
                </div>
                <p class="priceDiv d-flex">
                  <span class="f_18"
                  >￥<span class="f_24">{{ item.price }}</span></span
                  ><span class="f_12">已售{{ item.sold }}件</span>
                </p>
              </div>
            </div>
            <div class="more d-flex">
              <router-link to="/shopping/clothType">更多类型</router-link>
              <img src="./assets/youjiantou.png" alt="" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="女装" name="second">
            <div class="jz d-flex">
              <div
                class="item d-flex"
                v-for="(item, index) in nvzhuang"
                :key="index"
                @click="tjspxq(item.id,item.title2)"
              >
                <img :src="item.imgUrl" alt="" />
                <p class="title_6">
                  {{ item.title1 }}<span class="line">|</span>{{ item.title2 }}
                </p>
                <div>
                  <el-tag type="warning" size="small">{{ item.tag1 }}</el-tag
                  ><el-tag type="warning" size="small">{{ item.tag2 }}</el-tag>
                </div>
                <p class="priceDiv d-flex">
                  <span class="f_18"
                  >￥<span class="f_24">{{ item.price }}</span></span
                  ><span class="f_12">已售{{ item.sold }}件</span>
                </p>
              </div>
            </div>
            <div class="more d-flex">
              <router-link to="/shopping/clothType">更多类型</router-link>
              <img src="./assets/youjiantou.png" alt="" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="童装" name="third">
            <div class="jz d-flex">
              <div
                class="item d-flex"
                v-for="(item, index) in tongzhuang"
                :key="index"
                @click="tjspxq(item.id,item.title2)"
              >
                <img :src="item.imgUrl" alt="" />
                <p class="title_6">
                  {{ item.title1 }}<span class="line">|</span>{{ item.title2 }}
                </p>
                <div>
                  <el-tag type="warning" size="small">{{ item.tag1 }}</el-tag
                  ><el-tag type="warning" size="small">{{ item.tag2 }}</el-tag>
                </div>
                <p class="priceDiv d-flex">
                  <span class="f_18"
                  >￥<span class="f_24">{{ item.price }}</span></span
                  ><span class="f_12">已售{{ item.sold }}件</span>
                </p>
              </div>
            </div>
            <div class="more d-flex">
              <router-link to="/shopping/clothType">更多类型</router-link>
              <img src="./assets/youjiantou.png" alt="" />
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
  import Header from './components/Header/HeaderView'
  import Footer from './components/Footer/FooterView'
  import { httpAction, getAction } from '@/api/manage'
  export default {
    name: "shopHome",
    components: { Header ,Footer},
    data() {
      return {
        vh: 0,
        activeName: "first",
        url: {
          zxdz: "/zygoods/zyGoods/zxdz",
          tjsp: "/zygoods/zyGoods/tjsp",
          fzlx: "/zygoods/zyGoods/fzlx",
          tjspxq: "/zygoods/zyGoods/tjspxq",
        },
        // 轮播图数据
        imgList: [
          require("./assets/bg.png"),
          require("./assets/bg02.png"),
          require("./assets/bg03.png"),
        ],
        orderList: [
          {
            id: 1,
            url:'/shopping/clothType',
            // imgUrl: require("./assets/order01.png"),
            iconClass:'iconfont icon-biaoqian1',
            title: "服装类型",
            desc: "丰富款式 多样呈现",
          },
          {
            id: 2,
            url:'/shopping/sirendingzhi',
            // imgUrl: require("./assets/order02.png"),
            iconClass:'iconfont icon-dingzhi',

            title: "私人订制",
            desc: "丰富款式 多样呈现",
          },
          {
            id: 3,
            url:'/shopping/chengyi',
            // imgUrl: require("./assets/order03.png"),
            iconClass:'iconfont icon-xizhuang1',

            title: "成衣推荐",
            desc: "丰富款式 多样呈现",
          },
          {
            id: 4,
            url:'/shopping/news',
            // imgUrl: require("./assets/order04.png"),
            iconClass:'iconfont icon-bijijilu',

            title: "关于我们",
            desc: "丰富款式 多样呈现",
          },
        ],
        // 最新定制数据
        clothList: [
          {
            id: 1,
            imgUrl: require("./assets/cloth01.png"),
            title1: "西装定制",
            title2: "立领高端西装立领高端西装立领高端西装",
            price: "1xx0.00",
          },
          {
            id: 2,
            imgUrl: require("./assets/cloth02.png"),
            title1: "西装定制",
            title2: "立领高端西装",
            price: "1xx0.00",
          },
          {
            id: 3,
            imgUrl: require("./assets/cloth01.png"),
            title1: "西装定制",
            title2: "立领高端西装",
            price: "1xx0.00",
          },
          // },
          // {
          //   id: 4,
          //   imgUrl: require("./assets/cloth02.png"),
          //   title1: "西装定制",
          //   title2: "立领高端西装",
          //   price: "1xx0.00",
          // }
        ],
        // 推荐商品数据
        clothList2: [
          {
            id: 1,
            imgUrl: require("./assets/cloth002.png"),
            title: "CLOTHING NAM",
            time: 15,
          },
          {
            id: 2,
            imgUrl: require("./assets/cloth003.png"),
            title: "CLOTHING NAM",
            time: 15,
          },
          {
            id: 3,
            imgUrl: require("./assets/cloth004.png"),
            title: "CLOTHING NAM",
            time: 15,
          },
          {
            id: 4,
            imgUrl: require("./assets/cloth005.png"),
            title: "CLOTHING NAM",
            time: 15,
          },
        ],
        nanzhuang: [
          {
            id: 1,
            imgUrl: require("./assets/cloth002.png"),
            title1: "男装",
            title2: "衬衫",
            tag1: "标签一",
            tag2: "标签二",
            price: "1xx0.00",
            sold: 200,
          },
          {
            id: 2,
            imgUrl: require("./assets/cloth002.png"),
            title1: "男装",
            title2: "衬衫",
            tag1: "标签一",
            tag2: "标签二",
            price: "1xx0.00",
            sold: 200,
          },
          {
            id: 3,
            imgUrl: require("./assets/cloth002.png"),
            title1: "男装",
            title2: "衬衫",
            tag1: "标签一",
            tag2: "标签二",
            price: "1xx0.00",
            sold: 200,
          },
          {
            id: 4,
            imgUrl: require("./assets/cloth002.png"),
            title1: "男装",
            title2: "衬衫",
            tag1: "标签一",
            tag2: "标签二",
            price: "1xx0.00",
            sold: 200,
          },
          {
            id: 5,
            imgUrl: require("./assets/cloth002.png"),
            title1: "男装",
            title2: "衬衫",
            tag1: "标签一",
            tag2: "标签二",
            price: "1xx0.00",
            sold: 200,
          },
          {
            id: 6,
            imgUrl: require("./assets/cloth002.png"),
            title1: "男装",
            title2: "衬衫",
            tag1: "标签一",
            tag2: "标签二",
            price: "1xx0.00",
            sold: 200,
          },
          {
            id: 7,
            imgUrl: require("./assets/cloth002.png"),
            title1: "男装",
            title2: "衬衫",
            tag1: "标签一",
            tag2: "标签二",
            price: "1xx0.00",
            sold: 200,
          },
          {
            id: 8,
            imgUrl: require("./assets/cloth002.png"),
            title1: "男装",
            title2: "衬衫",
            tag1: "标签一",
            tag2: "标签二",
            price: "1xx0.00",
            sold: 200,
          },
          {
            id: 9,
            imgUrl: require("./assets/cloth002.png"),
            title1: "男装",
            title2: "衬衫",
            tag1: "标签一",
            tag2: "标签二",
            price: "1xx0.00",
            sold: 200,
          },
          {
            id: 10,
            imgUrl: require("./assets/cloth002.png"),
            title1: "男装",
            title2: "衬衫",
            tag1: "标签一",
            tag2: "标签二",
            price: "1xx0.00",
            sold: 200,
          },
        ],
        nvzhuang: [
          {
            id: 1,
            imgUrl: require("./assets/cloth002.png"),
            title1: "女装",
            title2: "衬衫",
            tag1: "标签一",
            tag2: "标签二",
            price: "1xx0.00",
            sold: 200,
          },
          {
            id: 2,
            imgUrl: require("./assets/cloth002.png"),
            title1: "女装",
            title2: "衬衫",
            tag1: "标签一",
            tag2: "标签二",
            price: "1xx0.00",
            sold: 200,
          },
          {
            id: 3,
            imgUrl: require("./assets/cloth002.png"),
            title1: "女装",
            title2: "衬衫",
            tag1: "标签一",
            tag2: "标签二",
            price: "1xx0.00",
            sold: 200,
          },
          {
            id: 4,
            imgUrl: require("./assets/cloth002.png"),
            title1: "女装",
            title2: "衬衫",
            tag1: "标签一",
            tag2: "标签二",
            price: "1xx0.00",
            sold: 200,
          },
          {
            id: 5,
            imgUrl: require("./assets/cloth002.png"),
            title1: "女装",
            title2: "衬衫",
            tag1: "标签一",
            tag2: "标签二",
            price: "1xx0.00",
            sold: 200,
          },
          {
            id: 6,
            imgUrl: require("./assets/cloth002.png"),
            title1: "女装",
            title2: "衬衫",
            tag1: "标签一",
            tag2: "标签二",
            price: "1xx0.00",
            sold: 200,
          },
          {
            id: 7,
            imgUrl: require("./assets/cloth002.png"),
            title1: "女装",
            title2: "衬衫",
            tag1: "标签一",
            tag2: "标签二",
            price: "1xx0.00",
            sold: 200,
          },
          {
            id: 8,
            imgUrl: require("./assets/cloth002.png"),
            title1: "女装",
            title2: "衬衫",
            tag1: "标签一",
            tag2: "标签二",
            price: "1xx0.00",
            sold: 200,
          },
          {
            id: 9,
            imgUrl: require("./assets/cloth002.png"),
            title1: "女装",
            title2: "衬衫",
            tag1: "标签一",
            tag2: "标签二",
            price: "1xx0.00",
            sold: 200,
          },
          {
            id: 10,
            imgUrl: require("./assets/cloth002.png"),
            title1: "女装",
            title2: "衬衫",
            tag1: "标签一",
            tag2: "标签二",
            price: "1xx0.00",
            sold: 200,
          },
        ],
        tongzhuang: [
          {
            id: 1,
            imgUrl: require("./assets/cloth002.png"),
            title1: "童装",
            title2: "衬衫",
            tag1: "标签一",
            tag2: "标签二",
            price: "1xx0.00",
            sold: 200,
          },
          {
            id: 2,
            imgUrl: require("./assets/cloth002.png"),
            title1: "童装",
            title2: "衬衫",
            tag1: "标签一",
            tag2: "标签二",
            price: "1xx0.00",
            sold: 200,
          },
          {
            id: 3,
            imgUrl: require("./assets/cloth002.png"),
            title1: "童装",
            title2: "衬衫",
            tag1: "标签一",
            tag2: "标签二",
            price: "1xx0.00",
            sold: 200,
          },
          {
            id: 4,
            imgUrl: require("./assets/cloth002.png"),
            title1: "童装",
            title2: "衬衫",
            tag1: "标签一",
            tag2: "标签二",
            price: "1xx0.00",
            sold: 200,
          },
          {
            id: 5,
            imgUrl: require("./assets/cloth002.png"),
            title1: "童装",
            title2: "衬衫",
            tag1: "标签一",
            tag2: "标签二",
            price: "1xx0.00",
            sold: 200,
          },
          {
            id: 6,
            imgUrl: require("./assets/cloth002.png"),
            title1: "童装",
            title2: "衬衫",
            tag1: "标签一",
            tag2: "标签二",
            price: "1xx0.00",
            sold: 200,
          },
          {
            id: 7,
            imgUrl: require("./assets/cloth002.png"),
            title1: "童装",
            title2: "衬衫",
            tag1: "标签一",
            tag2: "标签二",
            price: "1xx0.00",
            sold: 200,
          },
          {
            id: 8,
            imgUrl: require("./assets/cloth002.png"),
            title1: "童装",
            title2: "衬衫",
            tag1: "标签一",
            tag2: "标签二",
            price: "1xx0.00",
            sold: 200,
          },
          {
            id: 9,
            imgUrl: require("./assets/cloth002.png"),
            title1: "童装",
            title2: "衬衫",
            tag1: "标签一",
            tag2: "标签二",
            price: "1xx0.00",
            sold: 200,
          },
          {
            id: 10,
            imgUrl: require("./assets/cloth002.png"),
            title1: "童装",
            title2: "衬衫",
            tag1: "标签一",
            tag2: "标签二",
            price: "1xx0.00",
            sold: 200,
          },
        ],
      };
    },
    mounted() {
      this.vh = window.screen.availHeight - 100;
      getAction(this.url.zxdz).then((res) => {
        if (res.success) {
          this.clothList = res.result;
        }else{
          this.$message.error(res.message);
        }
      });
      getAction(this.url.tjsp).then((res) => {
        if (res.success) {
          this.clothList2 = res.result;
        }else{
          this.$message.error(res.message);
        }
      });
      getAction(this.url.fzlx).then((res) => {
        if (res.success) {
          console.log(res.result)
          this.nanzhuang = res.result.nz;
          this.nvzhuang = res.result.nvz;
          this.tongzhuang = res.result.tz;
        }else{
          this.$message.error(res.message);
        }
      })
    },
    methods:{
      tjspxq(id,title){
        getAction(this.url.tjspxq,{id:id}).then((res) => {
          if (res.success) {
            console.log(res.result)
            this.$router.push({
              path: "/shopping/ClothDetail",
              query: { id: id, title: title ,name:res.result.name,parentName:res.result.parentName},
            });
          }else{
            this.$message.error(res.message);
          }
        })
      },
      tjspxq1(id,title){
        getAction(this.url.tjspxq,{id:id}).then((res) => {
          if (res.success) {
            console.log(res.result)
            this.$router.push({
              path: "/shopping/ClothDetail1",
              query: { id: id, title: title ,name:res.result.name,parentName:res.result.parentName},
            });
          }else{
            this.$message.error(res.message);
          }
        })
      },
    },
  }
</script>
<style scoped>
  @import './assets/common.css';
</style>
<style scoped>
  /*.box {*/
  /*     position: relative;*/
  /*   }*/
  /*.img {*/
  /*  position: absolute;*/
  /*  top: 0;*/
  /*}*/
  /*.box1 {*/
  /*  position: absolute;*/
  /*  bottom: 20%;*/
  /*}*/
  /*.box2 {*/
  /*  position: absolute;*/
  /*  bottom: 5%;*/
  /*}*/
  /*.slick-slide.slick-active:nth-child(2) img{*/
  /*  height: 450px;*/
  /*  width: 100%;*/
  /*}*/
  .box img{
    width: 90%;
    height: 400px;
  }
  .box .box1{
    width: 90%;
    margin-top: 20px;
    letter-spacing: 0.1em;
    font-size: 24px;color: #1B1B1B;
  }
  .box .box2{
    font-size: 18px;color: #1B1B1B;text-align: right;padding-right: 80px;
  }
  .more {
    align-items: center;
    justify-content: right;
  }
  .more a {
    color: #333;
  }
  .more img {
    width: 20px;
    height: 20px;
    margin-left: 5px;
  }

  /* -------------------第一部分开始------------------------------------------------------------------------------------------------ */
  .home {
    width: 100%;
    /* height: 2000px; */
  }
  .titleCont {
    padding-top: 200px;
    padding-bottom: 100px;
  }
  .titleCont .title {
    font-size: 48px;
  }
  .titleCont .orange {
    background-color: rgba(255, 206, 149, 1);
    width: 40px;
    height: 6px;
    margin: 24px 0;
  }
  .titleCont .desc {
    font-size: 32px;
  }
  .lunbotu {
    position: relative;
  }
  .lunbotu .title {
    position: absolute;
    top: 30%;
    left: 20%;
    color: #fff;
    font-size: 100px;
    z-index: 99;
  }
  .lunbotu .title p{
    margin-bottom: 0;
  }
  .el-carousel__item > div {
    width: 100%;
    height: 100%;
  }
  .el-carousel__item > div > img {
    width: 100%;
    height: 100%;
  }
  .lunbotu .el-carousel >>> .el-carousel__arrow {
    border: 1px solid #fff;
  }
  .lunbotu .total {
    position: absolute;
    bottom: 10%;
    left: 10%;
    z-index: 99;
    color: #fff;
    font-size: 48px;
  }
  .lunbotu .total span {
    font-size: 16px;
  }
  /* .lunbotu .el-carousel >>> .el-carousel__arrow{border: 1px solid #fff;position: absolute;right: 20%!important;} */
  /* .lunbotu .el-carousel >>> .el-carousel__arrow--left{top: 40%;}
  .lunbotu .el-carousel >>> .el-carousel__arrow--right{top: 50%;} */
  /* .el-carousel__indicators.el-carousel__indicators--horizontal{
    position: absolute;
    bottom: 10%;
    right: 10%;
  } */
  /* -----------------------第一部分完成----------------------------------------------------------------------------------------- */
  /* -----------------------第二部分开始----------------------------------------------------------------------------------------- */
  .section2 {
    color: #333;
  }
  .section2 .jz {
    padding-top: 200px;
    padding-bottom: 250px;
  }
  .section2 .title {
    text-align: center;
    padding-bottom: 200px;
  }
  .section2 .title .title_1 {
    font-size: 42px;
  }
  .section2 .title .title_2 {
    font-size: 32px;
  }
  .section2 .itemDiv {
    justify-content: space-around;
  }
  .section2 .itemDiv .item a{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 336px;
    height: 336px;
    color: #333;
    transition: all 0.2s;
  }
  .section2 .itemDiv .item a i{
    font-size: 100px;
    color: #746957;

  }
  .section2 .itemDiv .item a:hover i{
    color: #fff;
  }
  .section2 .itemDiv .item a:hover .title_3,.section2 .itemDiv .item a:hover .title_4{
    color: #746957;

  }
  .section2 .itemDiv .item a:hover{
    background: #EEE6D9;
    border: 1px dashed #919190;
  }
  .section2 .itemDiv .item .title_3 {
    margin: 20px 0;
    font-size: 24px;
  }
  .section2 .itemDiv .item .title_4 {
    font-size: 18px;
  }
  /* -----------------------第二部分完成----------------------------------------------------------------------------------------- */
  /* -----------------------第三部分开始----------------------------------------------------------------------------------------- */
  .section3 {
    color: #333;
    background-color: rgba(246, 246, 246, 1);
    padding-bottom: 100px;
  }
  .section3 .itemDiv {
    padding-bottom: 100px;
    justify-content: space-between;
  }
  .section3 .itemDiv .item {
    background-color: rgba(255, 255, 255, 1);
    width: 450px;
    height: 610px;
  }
  .section3 .itemDiv .item img {
    width: 380px;
    height: 380px;
    margin: 35px 0 0 35px;
  }
  .section3 .itemDiv .item .titleDiv,
  .section3 .itemDiv .item .price {
    padding: 38px 50px 0 50px;
  }
  .section3 .itemDiv .item .titleDiv {
    font-size: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .section3 .itemDiv .item .titleDiv span {
    margin-left: 10px;
    margin-right: 10px;
  }
  .section3 .itemDiv .item .price span {
    font-size: 32px;
    color: #746957;
    margin-left: 10px;
    margin-right: 10px;
  }

  /* -----------------------第三部分完成----------------------------------------------------------------------------------------- */
  /* -----------------------第四部分开始----------------------------------------------------------------------------------------- */
  .section4 {
    padding-bottom: 200px;
  }
  .section4 .titleCont {
    flex-direction: column;
    align-items: center;
  }

  /* -----------------------第四部分完成----------------------------------------------------------------------------------------- */
  /* -----------------------第五部分开始----------------------------------------------------------------------------------------- */
  .section5 {
    padding-bottom: 200px;
    background-color: rgba(246, 246, 246, 1);
  }
  .section5 .titleCont {
    flex-direction: column;
    align-items: center;
  }
  .section5 .more {
    margin-bottom: 50px;
    /*margin-top: 50px;*/
  }
  .section5 .tabs >>> .el-tabs__item.is-top {
    font-size: 26px;
  }
  .section5 .tabs >>> .el-tabs__nav.is-top {
    padding-bottom: 10px;
  }
  .section5 .tabs .jz {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .section5 .tabs .jz .item {
    background-color: #fff;
    width: 19%;
    min-width: 270px;
    flex-direction: column;
    align-items: center;
    padding-bottom: 10px;
    padding-top: 10px;
    margin-bottom: 30px;
    margin-right: 11px;
  }
  .section5 .tabs .jz .item img {
    width: 90%;
    height: 309px;
    object-fit: cover;
  }
  .section5 .tabs .jz .item p {
    width: 100%;
    box-sizing: border-box;
    text-overflow: ellipsis;
    padding: 15px;
    overflow: hidden;
    text-align: left;
    white-space: nowrap;
  }
  .section5 .tabs .jz .item p.title_6{
    border-bottom: 1px dashed rgba(116,105,87,0.3) ;
    color: #333;
    font-size: 20px;
    padding: 20px;
  }
  .section5 .tabs .jz .item p .line {
    margin-left: 8px;
    margin-right: 8px;
  }
  .section5 .tabs .jz .item div {
    width: 100%;
    padding-left: 28px;
    box-sizing: border-box;
    /*margin-top: 30px;*/
    /*margin-bottom: 20px;*/
  }
  .section5 .tabs .jz .item div .el-tag {
    margin-right: 10px;
  }
  .section5 .priceDiv {
    justify-content: space-between;
    align-items: center;
    color: #746957;
  }
  .section5 .priceDiv .f_12 {
    color: rgba(116, 105, 87, 0.6);
  }
  /* -----------------------第五部分完成----------------------------------------------------------------------------------------- */
</style>
