<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="content-language" content="zh-CN" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,user-scalable=no"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="博采网络-高端网站建设-https://www.bocweb.cn" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <title>首页-浙江中南建设集团有限公司</title>

    <link href="./favicon.ico" rel="shortcut icon" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900"
    />
    <link rel="stylesheet" href="./css/boc_reset.css" />
    <link rel="stylesheet" href="./sass/all.css" />
    <link rel="stylesheet" href="./css/mobile.css" />
    <link rel="stylesheet" href="./css/swiper-bundle.min.css" />
    <link rel="stylesheet" href="./css/font-awesome.min.css" />

    <script src="./js/jquery-3.5.1.min.js"></script>
    <script src="./inc/header.js"></script>
    <script src="./inc/footer.js"></script>
    <script src="./js/swiper-bundle.min.js"></script>
    <script
      src="./js/v3.2.8/vue.global.prod.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <script src="./js/countup.js"></script>
    <script src="./js/axios.min.js"></script>
  </head>

  <body>
    <div id="header"></div>

    <div id="app" v-cloak>
      <div id="ban-container" class="swiper ban-container">
        <div class="swiper-wrapper">
          <div v-for="(item, i) in banPic" :key="i" class="swiper-slide">
            <img :src="item.image" class="pc-img" alt="" />
            <img :src="item.imageMobile" class="mb-img" alt="" />

            <div class="pos-cont">
              <p v-html="item.title" class="tit font60"></p>

              <!-- <a :href="item.link" target="_blank" class="more pub-more tit-14">
              <span class="text">查看更多</span>
              <span class="arr"><i class="fa fa-angle-right" aria-hidden="true"></i></span>
            </a> -->
            </div>
          </div>
        </div>

        <div class="swiper-pagination ban-pagination"></div>

        <div class="scroll-down">
          <div><img src="img/3.png" alt="" /></div>
          <p class="tit-14">向下滚动继续探索</p>
        </div>
      </div>

      <div class="i-about">
        <div class="wrap w1600">
          <div class="lf">
            <p class="tit" v-html="block.title">诚信立业 创新发展</p>

            <div v-html="block.detail" class="cont cont1 tit-17"></div>

            <div v-html="block.detail2" class="cont cont2 tit-17"></div>

            <div class="more-box">
              <a href="about.html" class="more pub-more tit-14">
                <span class="text">查看更多</span>
                <span class="arr"
                  ><i class="fa fa-angle-right" aria-hidden="true"></i
                ></span>
              </a>

              <a
                href="javascript:;"
                class="play-vd play pub-vd tit-14"
                :data-path="block.video"
                v-if="block.video"
              >
                <span class="icon"><img src="img/7.png" alt="" /></span>
                <span class="text">观看企业视频</span>
              </a>
            </div>
          </div>

          <div class="rg">
            <div class="pic"><img :src="block.image" alt="" /></div>

            <div class="li-wrap">
              <div
                v-for="(item, index) in block.unitList"
                :key="index"
                class="li"
              >
                <div class="top">
                  <p :id="'num' + index">{{item.num}}</p>
                  <span class="tit-24">{{item.unit}}</span>
                </div>

                <p class="h1 tit-14">{{item.title}}</p>
              </div>
            </div>
          </div>
        </div>

        <div class="bg-img bg-img1"><img src="./img/257.png" alt="" /></div>
        <div class="bg-img bg-img2"><img src="./img/258.png" alt="" /></div>
      </div>

      <div class="i-pro">
        <p class="tit pub-tit">集团产业</p>

        <div class="tab">
          <span
            v-for="(item, index) in proTab"
            :key="index"
            @click="proTabChange(index)"
            >{{item}}</span
          >
        </div>

        <div class="swiper i-pro-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <!-- <img class="lazyImg" src="./img/245.png" :data-src="proImg" alt=""> -->
              <img :src="proImg" alt="" />

              <div class="swiper i-tab-container pos-tab tit-18">
                <div class="swiper-wrapper">
                  <div
                    class="swiper-slide"
                    v-for="(item, index) in projectList"
                    :key="index"
                    :class="{'cur' : proIndex == index}"
                    @click="proChange(index, item.image, item.productList)"
                  >
                    {{item.title}}
                  </div>
                </div>

                <div class="swiper-button-prev i-tab-button-prev"></div>
                <div class="swiper-button-next i-tab-button-next"></div>
              </div>
            </div>

            <div class="swiper-slide">
              <!-- <img class="lazyImg" src="./img/245.png" :data-src="culImg" alt=""> -->
              <img :src="culImg" />

              <div class="pos-tab tit-18">
                <span
                  v-for="(item, index) in cultureList"
                  :key="index"
                  :class="{'cur' : culIndex == index}"
                  @click="culChange(index, item.image, item.productList)"
                >
                  {{item.title}}
                </span>
              </div>
            </div>
          </div>

          <div class="swiper-button-prev i-pro-button-prev"></div>
          <div class="swiper-button-next i-pro-button-next"></div>
        </div>

        <div class="swiper i-proTab-container">
          <div class="swiper-wrapper">
            <div
              v-for="item in proTabCont"
              :key="index"
              class="swiper-slide"
              @click="quaPop(item.id)"
            >
              <div><img :src="item.image" alt="" /></div>

              <p class="tit-18">{{item.title}}</p>
            </div>
          </div>

          <div class="swiper-scrollbar i-proTab-scrollbar"></div>
        </div>
      </div>

      <div class="i-news img-cover" style="background-image: url(img/12.png)">
        <div class="wrap w1600">
          <p class="tit pub-tit">媒体资讯</p>

          <div class="top">
            <p class="sub pub-sub">持续关注中南集团动态</p>

            <div class="tab tit-18">
              <!-- <a href="news.html">全部资讯</a> -->

              <span
                v-for="(item, index) in newsTab"
                :key="index"
                :class="{'cur' : newsIdx == index}"
                @click="changeNews(index)"
                >{{item}}</span
              >
            </div>
          </div>

          <div
            class="change-box"
            v-if="newsList.length>0"
            v-show="newsIdx == 0"
          >
            <a
              :href="'./newsInfo.html?id=' + newsList[0].id"
              v-if="newsList[0]"
              class="lf pc-img"
            >
              <div class="pic">
                <!-- <img class="lazyImg" src="./img/247.png" :data-src="newsList[0].image" alt=""> -->
                <img :src="newsList[0].image" />
              </div>

              <div class="cont">
                <p class="time tit-14">{{newsList[0].time}}</p>

                <p class="h1 tit-20">{{newsList[0].title}}</p>

                <div class="more">
                  <span class="text tit-17">了解更多</span>
                  <span class="arr"
                    ><i class="fa fa-angle-right" aria-hidden="true"></i
                  ></span>
                </div>
              </div>
            </a>

            <div class="rg pc-img">
              <a
                :href="'./newsInfo.html?id=' + newsList[1].id"
                v-if="newsList[1]"
                class="li"
              >
                <div class="cont">
                  <p class="time tit-14">{{newsList[1].time}}</p>
                  <p class="h1 tit-20">{{newsList[1].title}}</p>
                  <div class="more tit-17">
                    <span class="text">了解更多</span>
                    <span class="arr"
                      ><i class="fa fa-angle-right" aria-hidden="true"></i
                    ></span>
                  </div>
                </div>

                <div class="pic">
                  <!-- <img class="lazyImg" src="./img/246.png" :data-src="newsList[1].image" alt=""> -->
                  <img :src="newsList[1].image" />
                </div>
              </a>

              <a
                :href="'./newsInfo.html?id=' + newsList[2].id"
                v-if="newsList[2]"
                class="li"
              >
                <div class="cont">
                  <p class="time tit-14">{{newsList[2].time}}</p>
                  <p class="h1 tit-20">{{newsList[2].title}}</p>
                  <div class="more tit-17">
                    <span class="text">了解更多</span>
                    <span class="arr"
                      ><i class="fa fa-angle-right" aria-hidden="true"></i
                    ></span>
                  </div>
                </div>

                <div class="pic">
                  <img :src="newsList[2].image" />
                </div>
              </a>

              <a
                :href="'./newsInfo.html?id=' + newsList[3].id"
                v-if="newsList[3]"
                class="li"
              >
                <div class="cont">
                  <p class="time tit-14">{{newsList[3].time}}</p>
                  <p class="h1 tit-20">{{newsList[3].title}}</p>
                  <div class="more tit-17">
                    <span class="text">了解更多</span>
                    <span class="arr"
                      ><i class="fa fa-angle-right" aria-hidden="true"></i
                    ></span>
                  </div>
                </div>

                <div class="pic">
                  <img :src="newsList[3].image" />
                </div>
              </a>
            </div>

            <div class="i-news-swiperBox mb-img">
              <div class="swiper i-news-container">
                <div class="swiper-wrapper">
                  <a
                    :href="'./newsInfo.html?id=' + item.id"
                    class="swiper-slide"
                    v-for="item in newsList"
                    :key="item"
                  >
                    <div class="pic"><img :src="item.image" alt="" /></div>

                    <div class="cont">
                      <p class="time tit-14">{{item.time}}</p>

                      <p class="h1">{{item.title}}</p>

                      <div class="more">
                        <span class="text tit-17">了解更多</span>
                        <span class="arr"
                          ><i class="fa fa-angle-right" aria-hidden="true"></i
                        ></span>
                      </div>
                    </div>
                  </a>
                </div>

                <div class="swiper-pagination i-news-pagination"></div>
              </div>
            </div>
          </div>

          <div class="i-paper" v-show="newsIdx == 1">
            <div class="swiper i-paper-swiper">
              <div class="swiper-wrapper">
                <a
                  v-for="item in allData.paperList"
                  :key="index"
                  :href="item.link"
                  download
                  class="swiper-slide"
                >
                  <div class="pic"><img :src="item.image" alt="" /></div>
                  <div class="cont-box">
                    <p class="title tit-20">{{item.title}}</p>
                    <p class="num tit-14">总第{{item.no}}期</p>
                  </div>
                </a>
              </div>

              <div class="swiper-pagination i-paper-pagination"></div>
            </div>
          </div>

          <div class="i-vid" v-show="newsIdx == 2">
            <div class="swiper i-vid-swiper">
              <div class="swiper-wrapper">
                <div
                  v-for="item in allData.videoList"
                  :key="index"
                  class="swiper-slide"
                >
                  <div class="vd-img">
                    <img :src="item.image" alt="" />
                    <div class="play pos-center" :data-path="item.link">
                      <img src="img/67.png" alt="" />
                    </div>
                  </div>

                  <p class="tit-20">{{item.title}}</p>
                </div>
              </div>

              <div class="swiper-pagination i-vid-pagination"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="i-respon">
        <div class="wrap w1600">
          <p class="tit pub-tit">社会责任</p>
          <p class="sub pub-sub">致富思源 责任担当</p>

          <div class="pic-box">
            <img
              class="lazyImg"
              src="./img/248.png"
              :data-src="bottom.image"
              alt=""
            />

            <div class="pos-cont">
              <p class="h1 tit-24" v-html="bottom.title"></p>

              <div v-html="bottom.detail" class="cont tit-14"></div>

              <a href="dream.html" class="more tit-14">
                <span class="text">查看更多</span>
                <span class="arr">
                  <i class="fa fa-angle-right" aria-hidden="true"></i>
                </span>
              </a>
            </div>
          </div>
        </div>
      </div>

      <div class="qua-pop pub-pop">
        <div class="bg"></div>

        <div class="wrap">
          <div class="close-pic"><img src="img/close.png" alt="" /></div>

          <div class="box">
            <div class="swiper qua-container" v-show="showImg">
              <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="item in imgArr">
                  <img :src="item" alt="" />
                </div>
              </div>

              <div class="swiper-pagination qua-pagination"></div>
            </div>

            <p class="h1">{{quaPopCont.title}}</p>
            <!-- <p class="h2 tit-18">参与单位：{{quaPopCont.company}}</p> -->

            <div class="intro tit-16" v-html="quaPopCont.detail"></div>

            <!-- <p class="h3 tit-18">所获奖项：</p> -->

            <!-- <div class="cont tit-16" v-html="quaPopCont.award"></div> -->
          </div>
        </div>
      </div>
    </div>

    <div id="footer"></div>

    <script src="./js/main.js"></script>

    <script>
      const App = {
        data() {
          return {
            // counter: 0,
            allData: {},
            banPic: [],
            block: {},
            proTab: ["工程建设全产业链", "文化创意全产业链"],
            projectList: [],
            cultureList: [],
            proImg: "",
            culImg: "",

            proIndex: 0,
            culIndex: 0,

            // allPro: [],
            // newsTab: ["中南要闻", "中南报刊", "视频中心"],
             newsTab: ["中南要闻",'', "视频中心"],
            newsIdx: 0,
            newsList: [],
            bottom: {},
            proTabCont: [],
            quaPopCont: {},
            // col: '',
            // tabColor: '',
            showImg: true,
            imgArr: [],
          };
        },
        created() {
          const url = baseUrl + "api/banner/101";
          axios.get(url).then((res) => {
            const data = res.data.data;
            this.banPic = data;
          });

          const contUrl = baseUrl + "api/home";
          axios.get(contUrl).then((res) => {
            const data = res.data.data;
            this.allData = data;
            this.block = data.block;
            this.projectList = data.projectList;
            this.cultureList = data.cultureList;
            this.bottom = data.bottom;
            this.newsList = data.newsList;
            this.proTabCont = this.allData.projectList[0].productList;
            this.proImg = this.allData.projectList[0].image;
            this.culImg = this.allData.cultureList[0].image;
          });
        },
        methods: {
          proTabChange(index) {
            if (index == 0) {
              this.proIndex = 0;
              this.proTabCont = this.allData.projectList[0].productList;
              this.proImg = this.allData.projectList[0].image;
            } else {
              this.culIndex = 0;
              this.proTabCont = this.allData.cultureList[0].productList;
              this.culImg = this.allData.cultureList[0].image;
            }
          },
          proChange(index, img, list) {
            this.proIndex = index;
            // this.proTabCont = this.allData.projectList[index].productList;
            this.proTabCont = list;
            // this.proImg = this.allData.projectList[index].image;
            this.proImg = img;
          },
          culChange(index, img, list) {
            this.culIndex = index;
            // this.proTabCont = this.allData.cultureList[index].productList;
            this.proTabCont = list;
            // this.culImg = this.allData.cultureList[index].image;
            this.culImg = img;
          },
          changeNews(index) {
            this.newsIdx = index;
          },
          quaPop(id) {
            $(".qua-pop").fadeIn();
            $("html").addClass("html");
            $("body").addClass("body");

            const quaPopUrl = baseUrl + "api/project/detail/" + id;
            axios.get(quaPopUrl).then((res) => {
              const data = res.data.data;
              this.quaPopCont = data;
              this.imgArr = $.extend(true, [], this.quaPopCont.imageList);

              if (this.imgArr.length > 0) {
                // this.imgArr.shift();
                this.showImg = true;
              } else {
                this.showImg = false;
              }
            });
          },
        },
        watch: {
          allData: function () {
            var mySwiper = new Swiper(".ban-container", {
              pagination: {
                el: ".ban-pagination",
                clickable: true,
              },
              speed: 800,
              autoplay: {
                delay: 5000,
                stopOnLastSlide: false,
                disableOnInteraction: false,
              },
              on: {
                init: function (swiper) {
                  slide = this.slides.eq(0);
                  slide.addClass("ani-slide");
                },
                transitionStart: function () {
                  for (i = 0; i < this.slides.length; i++) {
                    slide = this.slides.eq(i);
                    slide.removeClass("ani-slide");
                  }
                },
                transitionEnd: function () {
                  slide = this.slides.eq(this.activeIndex);
                  slide.addClass("ani-slide");
                },
              },
            });

            var mySwiper2 = new Swiper(".i-pro-container", {
              slidesPerView: "auto",
              watchOverflow: true,
              noSwipingSelector: ".swiper-slide",
              navigation: {
                prevEl: ".i-pro-button-prev",
                nextEl: ".i-pro-button-next",
              },
              on: {
                slideChangeTransitionStart: function () {
                  $(".i-pro .tab span").eq(this.activeIndex).click();
                },
              },
            });

            var proTabSwiper = new Swiper(".i-proTab-container", {
              slidesPerView: "auto",
              watchOverflow: true,
              observer: true,
              observeParents: true,
              scrollbar: {
                el: ".i-proTab-scrollbar",
                draggable: true,
              },
            });

            var mySwiper6 = new Swiper(".i-tab-container", {
              slidesPerView: "auto",
              watchOverflow: true,
              slideToClickedSlide: false,
              centeredSlides: false,
              navigation: {
                nextEl: ".i-tab-button-next",
                prevEl: ".i-tab-button-prev",
              },
              breakpoints: {
                997: {
                  slideToClickedSlide: false,
                  centeredSlides: false,
                },
              },
            });

            var mySwiper4 = new Swiper(".i-paper-swiper", {
              slidesPerView: "auto",
              watchOverflow: true,
              slidesPerGroup: 1,
              pagination: {
                el: ".i-paper-pagination",
                clickable: true,
              },
              breakpoints: {
                997: {
                  slidesPerGroup: 4,
                },
              },
            });

            var mySwiper5 = new Swiper(".i-vid-swiper", {
              slidesPerView: "auto",
              watchOverflow: true,
              pagination: {
                el: ".i-vid-pagination",
                clickable: true,
              },
            });

            let tabIndex = 0;
            $(".i-pro .tab span").click(function () {
              tabIndex = $(this).index();
              $(this).addClass("cur").siblings().removeClass("cur");
              mySwiper2.slideTo(tabIndex, 500, false);
            });

            $(".i-pro .tab span").eq(0).addClass("cur");
          },
          newsList: function () {
            $(function () {
              var mySwiper9 = new Swiper(".i-news-container", {
                slidesPerView: "auto",
                watchOverflow: true,
                observer: true,
                observeParents: true,
                pagination: {
                  el: ".i-news-pagination",
                  clickable: true,
                },
              });
            });
          },
        },
      };
      Vue.createApp(App).mount("#app");
    </script>
  </body>
</html>
