<template>
  <div class="page-container">
    <!-- 页面 头部 -->
    <VHeader class="page-header" :theme="theme"></VHeader>
    <div class="banner-container">
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(banner, index) in formattedBanners" :key="index">
            <div class="banner" :style="{ backgroundImage: `url(${banner.logo})` }">
              <div class="text-box">
                <h1 class="banner-title" v-html="banner.title ? banner.title : ''"></h1>
                <p class="banner-description">{{ banner.subtitle || '' }}</p>
                <router-link :to="banner.url ? banner.url : ''" class="learn-more">了解更多</router-link>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <div class="content-box-xl company-profile">
      <div class="content-box-l">
        <div class="content-title company-profile-title">
          <span>公司介绍</span>
        </div>
        <div class="ciontent-text company-profile-text" v-html="companyProfile.content ? companyProfile.content : ''">
        </div>
      </div>
    </div>
    <div class="content-box-xl solve-plan">
      <div class="content-box-l">
        <div class="content-title solve-plan-title">
          <span>全域旅游解决方案</span>
          <div class="saw-more-box">
            <div class="saw-more" @click="gotoDetail(solvePlan[0].id,1)">全部产品</div>
          </div>
        </div>
        <div class="ciontent-text solve-plan-text">
          <el-tabs class="pc-el-tabs" stretch v-model="activeName">
            <el-tab-pane v-for="(product, index) in solvePlan" :key="index" :label="product.title"
              :name="'第' + index + '个'" >
              <div class="solve-plan-tabs-content">
                <div class="solve-plan-tabs-content-left">
                  <div class="solve-plan-tabs-content-left-html"
                    v-html="product.introduction ? product.introduction : ''">
                  </div>
                  <div class="saw-detail" @click="gotoDetail(product.id,1)">查看详情&rarr;</div>
                </div>
                <div class="solve-plan-tabs-content-right">
                  <img :src="product.logo ? product.logo : ''" alt="">
                </div>
              </div>
            </el-tab-pane>

          </el-tabs>
        </div>
      </div>
    </div>
    <div class="content-box-xl solve-plan scence-plan">
      <div class="content-box-l">
        <div class="content-title scence-plan-title">
          <span>智慧景区解决方案</span>
          <div class="saw-more-box">
            <div class="saw-more"  @click="gotoDetail(scensePlan[0].id,1)">全部产品</div>
          </div>
        </div>
        <div class="ciontent-text solve-plan-text scence-plan-text">
          <el-tabs class="pc-el-tabs-dark" stretch v-model="activeName1">
            <el-tab-pane v-for="(product, index) in scensePlan" :key="index" :label="product.title"
              :name="'第' + index + '个'">
              <div class="solve-plan-tabs-content">
                <div class="solve-plan-tabs-content-right">
                  <img :src="product.logo ? product.logo : ''" alt="">
                </div>
                <div class="solve-plan-tabs-content-left">
                  <div class="solve-plan-tabs-content-left-html"
                    v-html="product.introduction ? product.introduction : ''">
                  </div>
                  <div class="saw-detail" @click="gotoDetail(product.id,1)">查看详情&rarr;</div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <div class="content-box-xl solve-plan scence-plan classic-case">
      <div class="content-box-l">
        <div class="content-title scence-plan-title classic-case-title">
          <span>经典案例</span>
          <div class="saw-more-box">
            <div class="saw-more" @click="gotoClassicCaseList">全部案例</div>
          </div>
        </div>
        <div class="ciontent-text classic-case-text">
          <div class="classic-case-text-left">
            <div class="classic-case-left-item" v-for="(item, index) in formattedClassicAse" :key="index"
              @click="ativeindex = index">
              <span>{{ item.title }}</span><i class="el-icon-arrow-right"></i>
            </div>
          </div>
          <div class="classic-case-text-right">
            <div class="classic-case-text-right-top" v-if="formattedClassicAse[ativeindex]">
              <div class="classic-case-text-right-content" v-html="formattedClassicAse[ativeindex].introduction"></div>
              <div class="classic-case-text-right-top-images-box"
                v-if="formattedClassicAse[ativeindex].images.length > 0">
                <el-image class="classic-case-text-right-middle-images"
                  v-for="(image, index) in formattedClassicAse[ativeindex].images" :src="image" :key="index"></el-image>
              </div>
            </div>
            <div class="classic-case-text-right-bottom">
              <div class="saw-detail" @click="gotoDetail(formattedClassicAse[ativeindex].id,2)">
                查看详情<i class="el-icon-arrow-right"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content-box-xl partner-box">
      <div class="content-box-l partner-box-l">
        <div class="content-title partner-title ">
          <span class="partner-title-zhu">期待更多伙伴 携手共创未来</span>
          <span class="partner-title-fu">欢迎咨询合作</span>
        </div>
        <div class="partner-text">
          <div class="partne-text-left">
            <div class="partne-text-left-title">
              <span>创巨圆</span>一直秉承
            </div>
            <div class="partne-text-left-content">
              <p>客户为中心，市场为导向</p>
              <p>科技为先锋，人才为基础</p>
              <p>管理求效益，信誉求发展 </p>
            </div>
            <div class="partne-text-left-bottom">
              的经营之道，持续改进 永续发展！
            </div>
          </div>
          <template v-if="partners && partners.images && partners.images.length > 0">
            <div v-for="(item, index) in partners.images" :key="index" class="partner-img-box"
              :style="{ right: `${item.x}px`, top: `${item.y}px` }">
              <el-image class="partner-img" :src="item.url" />
            </div>
          </template>

        </div>
      </div>
    </div>
    <div class="content-box-xl solve-plan scence-plan classic-case news">
      <div class="content-box-l">
        <div class="content-title scence-plan-title classic-case-title news-title">
          <span>动态与资讯</span>
          <div class="saw-more-box">
            <div class="saw-more" @click="gotoNewsList">查看更多</div>
          </div>
        </div>
        <div class="ciontent-text news-text">
          <el-tabs class="pc-el-tabs-dark short-tabs" stretch v-model="activeName2" @tab-click="handleClick">
            <el-tab-pane label="公司动态" name="first">
              <el-row class="news-row" :gutter="40">
                <el-col v-for="(item, index) in newsList" class="news-col" :span="12" @click.native="gotoNews(item.id)">
                  <div class="news-img-box">
                    <el-image class="news-img" :src="item.logo" />
                  </div>
                  <div class="news-col-text">
                    <div class="news-text-title">
                      {{ item.title || '--' }}
                    </div>
                    <div class="news-text-title-fu" v-html="item.introduction ? item.introduction : ''"></div>
                    <div class="news-text-feet">
                      <div class="news-time">
                        {{ parseTime(item.createTime) }}
                      </div>
                      <div class="more-jian"></div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="行业资讯" name="second">
              <el-row class="news-row" :gutter="40">
                <el-col v-for="(item, index) in newsList" class="news-col" :span="12" @click.native="gotoNews(item.id)">
                  <div class="news-img-box">
                    <el-image class="news-img" :src="item.logo" />
                  </div>
                  <div class="news-col-text">
                    <div class="news-text-title">
                      {{ item.title || '--' }}
                    </div>
                    <div class="news-text-title-fu" v-html="item.introduction ? item.introduction : ''"></div>
                    <div class="news-text-feet">
                      <div class="news-time">
                        {{ parseTime(item.createTime) }}
                      </div>
                      <div class="more-jian"></div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-tab-pane>

          </el-tabs>
        </div>
      </div>
    </div>
    <VBottom></VBottom>
  </div>
</template>

<script>
  import Swiper from 'swiper/swiper-bundle.js'; // 引入 Swiper
  import 'swiper/swiper-bundle.css';
  import 'animate.css';

  import * as Api from "@/api/cjy/columninfo"
  import { parse } from '@babel/parser';
  export default {
    name: "index",
    data() {
      return {
        theme: 'header-default',
        swiper: null,
        right: 20,
        top: 20,
        scrollPosition: 0, // 添加滚动位置
        activeName: '第0个',
        activeName1: '第0个',
        activeName2: 'first',
        banners: [],
        companyProfile: '',//公司介绍
        solvePlan: [],
        scensePlan: [],
        classicCase: [],
        ativeindex: 0,
        partners: null,
        newsList: []
      };
    },
    watch: {
      ativeindex: {
        handler(oval, nval) {
          if (oval != nval) {
            document.querySelector('.classic-case-text-right').classList.add('animate__animated', 'animate__fadeInRight')
            setTimeout(() => {
              document.querySelector('.classic-case-text-right').classList.remove('animate__animated', 'animate__fadeInRight')
            }, 1000)
          }
        }
      }
    },
    computed: {
      formattedBanners() {
        return this.banners.map(banner => {
          // 在第4到第9个字符之间插入换行符
          let description = banner.title;
          if (description.length > 9) {
            description = description.slice(0, 4) + '<br>' + description.slice(4, 9) + '<br>' + description.slice(9, 16) + '<br>' + description.slice(16);
          }
          return {
            ...banner,
            title: description
          };
        });
      },
      formattedClassicAse() {
        return this.classicCase.map(caseItem => {
          let images = [];
          if (caseItem.image) {
            if (caseItem.image.includes(',')) { // 修正了'inCludes'为'includes'
              images = caseItem.image.split(',');
            } else {
              images = [caseItem.image];
            }
            return {
              ...caseItem,
              images: images
            };
          } else {
            return {
              ...caseItem,
              images: []
            };
          }

        });
      },
    },
    mounted() {


      // 添加滚动事件监听
      window.addEventListener('scroll', this.handleScroll);

      this.getBanner()
      this.getCompany()
      this.getCompanyAllArea()
      this.getCompanySolvePlan()
      this.getClassicCase()
      this.getPartners()
      this.getNews()
    },
    beforeDestroy() {
      // 移除滚动事件监听
      window.removeEventListener('scroll', this.handleScroll);
    },
    methods: {
      //获取轮播图
      async getBanner() {
        const params = {
          type: 1,
        }
        let res = await Api.getColumnInfoList(params)
        this.banners = res.data.list
        console.log(res)
        this.$nextTick(() => {
          this.swiper = new Swiper('.swiper', {
            speed: 400,
            spaceBetween: 0, // 设置为0以消除间距
            loop: true,
            pagination: {
              el: '.swiper-pagination',
              clickable: true,
            },
            autoplay: {
              delay: 5500,
              disableOnInteraction: false,
            },
            on: {
              init: () => {
                this.reAddAnimateClasses();

                const titleElement = document.querySelector('.banner-title');
                const descriptionElement = document.querySelector('.banner-description');
                const learnMoreElement = document.querySelector('.learn-more');

                titleElement.classList.add('animate__animated', 'animate__bounceInLeft');
                descriptionElement.classList.add('animate__animated', 'animate__bounceInRight');
                learnMoreElement.classList.add('animate__animated', 'animate__fadeInDown');
              },
              slideChangeTransitionStart: () => {
                this.removeAnimateClasses();
              },
              slideChangeTransitionEnd: () => {
                this.reAddAnimateClasses();
              }
            }
          });
        })

      },
      //公司介绍
      async getCompany() {
        const params = {
          type: 2,
        }
        let res = await Api.getColumnInfoList(params)
        console.log(res)
        this.companyProfile = res.data.list[0]
      },
      //全域旅游解决方案
      async getCompanyAllArea() {
        const params = {
          type: 3,
          infoType: 1
        }
        let res = await Api.getColumnInfoList(params)
        this.solvePlan = res.data.list.slice(0, 6);
        console.log(res)
      },
      //智慧景区解决方案
      async getCompanySolvePlan() {
        const params = {
          type: 3,
          infoType: 2
        }
        let res = await Api.getColumnInfoList(params)
        this.scensePlan = res.data.list.slice(0, 6);
        console.log(res)
      },
      //经典案例
      async getClassicCase() {
        const params = {
          type: 5,
        }
        let res = await Api.getColumnInfoList(params)
        this.classicCase = res.data.list.slice(0, 6);
        console.log(res)
      },
      //合作伙伴
      async getPartners() {
        const params = {
          type: 6,
        }
        let res = await Api.getColumnInfoList(params)
        this.partners = res.data.list[0];
        if (this.partners.image) {
          this.partners.images = this.extractImageCoordinates(this.partners.image);
        } else {
          this.partners.images = []
        }
        console.log(res)
      },
      //过滤图片坐标信息
      extractImageCoordinates(imageString) {
        // 将图片字符串按逗号分割成数组
        const imageUrls = imageString.includes(',') ? imageString.split(',') : [imageString];

        // 使用map函数处理每个URL
        const imagesWithCoords = imageUrls.map(url => {
          // 创建URL对象以便解析查询参数
          const urlObj = new URL(url);
          // 使用URLSearchParams获取查询参数
          const params = new URLSearchParams(urlObj.search);

          // 提取x和y参数，并转换为数字
          const x = parseInt(params.get('x'), 10);
          const y = parseInt(params.get('y'), 10);

          // 返回包含URL和坐标的新对象
          return {
            url: urlObj.href, // 只获取路径部分，去除查询参数
            x,
            y
          };
        });

        return imagesWithCoords;
      },
      async getNews(val) {
        const params = {
          type: 7,
          infoType: val ? val : 1
        }
        let res = await Api.getColumnInfoList(params)
        this.newsList = res.data.list.slice(0, 6);
        console.log(res)
      },
      handleClick(tab, event) {
        console.log(tab, event);
        this.getNews(Number(tab.index) + 1)
      },
      handleScroll() {
        this.scrollPosition = window.scrollY; // 获取当前滚动位置
        if (this.scrollPosition > 100) {
          this.theme = 'header-light'
        }
        if (this.scrollPosition <= 100) {
          this.theme = 'header-default'
        }
        if (this.scrollPosition > 110) {
          document.querySelector('.company-profile-title').classList.add('animate__animated', 'animate__fadeInUp');
          document.querySelector('.company-profile-text').classList.add('animate__animated', 'animate__fadeInUp');
        }
        if (this.scrollPosition > 950) {
          document.querySelector('.solve-plan-title').classList.add('animate__animated', 'animate__fadeInUp');
          document.querySelector('.solve-plan-text').classList.add('animate__animated', 'animate__fadeInUp');
        }
        if (this.scrollPosition > 1875) {
          document.querySelector('.scence-plan-title').classList.add('animate__animated', 'animate__fadeInUp')
          document.querySelector('.scence-plan-text').classList.add('animate__animated', 'animate__fadeInUp')
        }
        if (this.scrollPosition > 2640) {
          document.querySelector('.classic-case-title').classList.add('animate__animated', 'animate__fadeInUp')
          document.querySelector('.classic-case-text').classList.add('animate__animated', 'animate__fadeInUp')
        }
        if (this.scrollPosition > 3650) {
          document.querySelector('.partner-title').classList.add('animate__animated', 'animate__fadeInUp')
          document.querySelector('.partner-text').classList.add('animate__animated', 'animate__fadeInUp')
        }
        if (this.scrollPosition > 4500) {
          document.querySelector('.news-title').classList.add('animate__animated', 'animate__fadeInUp')
          document.querySelector('.news-text').classList.add('animate__animated', 'animate__fadeInUp')
        }
      },
      reAddAnimateClasses() {
        // 获取当前激活的slide
        if (this.swiper) {
          const activeSlide = this.swiper.slides[this.swiper.activeIndex];

          // 在当前激活的slide中查找对应的子元素
          const titleElement = activeSlide.querySelector('.banner-title');
          const descriptionElement = activeSlide.querySelector('.banner-description');
          const learnMoreElement = activeSlide.querySelector('.learn-more');

          // 添加新的动画类
          titleElement.classList.add('animate__animated', 'animate__bounceInLeft');
          descriptionElement.classList.add('animate__animated', 'animate__bounceInRight');
          learnMoreElement.classList.add('animate__animated', 'animate__fadeInDown');
        }

      },
      removeAnimateClasses() {
        if (this.swiper) {
          const activeSlide = this.swiper.slides[this.swiper.activeIndex];

          // 在当前激活的slide中查找对应的子元素
          const titleElement = activeSlide.querySelector('.banner-title');
          const descriptionElement = activeSlide.querySelector('.banner-description');
          const learnMoreElement = activeSlide.querySelector('.learn-more');

          // 移除之前的动画类（如果有的话）
          titleElement.classList.remove('animate__animated', 'animate__bounceInLeft');
          descriptionElement.classList.remove('animate__animated', 'animate__bounceInRight');
          learnMoreElement.classList.remove('animate__animated', 'animate__fadeInDown');

        }
      },
      gotoNewsList(){
        this.$router.push("/news-list")
      },
      //资讯详情
      gotoNews(val) {
        this.$router.push("/news-detail?id=" + val)
      },
      gotoClassicCaseList(){
        this.$router.push("/case-list")
      },
      //方案案例详情
      gotoDetail(val,type){
        this.$router.push("/case-detail?id=" + val + "&type=" + type)
      }
    }
  }
</script>
<style lang="scss">
  .page-header {
    position: fixed;
    top: 0;
    z-index: 999;
    width: 100%;
    background-color: transparent !important;

    .nav-item {
      color: #fff !important;
    }

    .nav-item::before {
      background-color: #fff !important;
    }

    .info-box {
      color: #fff !important;
    }
  }
</style>
<style scoped lang="scss">

  .page-container {
    background-color: #fafafa;
  }

  .swiper {
    width: 100%;
    height: 90vh;
    /* 设置为视口高度 */
  }

  .swiper-wrapper {
    display: flex;
    /* 确保子元素横向排列 */
  }

  .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    /* 使每个 slide 高度填满 */
  }

  .banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    /* 使 banner 高度填满 */
    color: white;
    text-align: center;
    background-size: cover;
    /* 背景图覆盖 */
    background-position: center;
    /* 背景图居中 */

    .text-box {
      width: 500px;
      height: 500px;
      margin-left: 10%;
      padding: 10px;
    }
  }

  .banner-title {
    font-size: 68px;
    /* 调整标题字体大小 */
    font-weight: bold;
    opacity: 0;
    text-align: left;
    /* 加粗标题 */
  }

  .banner-description {
    opacity: 0;
    text-align: left;
    font-size: 22px;
    /* 调整描述字体大小 */
    margin: 10px 0;
    /* 添加上下间距 */
  }

  ::v-deep .swiper-pagination {
    .swiper-pagination-bullet {
      background-color: #fff;
      width: 28px;
      height: 3px;
      border-radius: 0;
      opacity: 0.3;
    }

    .swiper-pagination-bullet-active {
      background-color: #fff;
      opacity: 1;
    }
  }

  .learn-more {
    opacity: 0;

    margin-top: 20px;
    padding: 10px 20px;
    border: solid 1px rgba(255, 255, 255, 0.8);
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
    float: left;

    &:hover {
      background-color: rgba(255, 255, 255, 0.8);
      color: #333;
    }
  }

  .animate__animated {
    opacity: 1;
  }


  .content-box-xl {
    width: 100%;
    height: fit-content;
    background-color: #fafafa;

    .content-box-l {
      max-width: 1220px;
      margin: 0 auto;
      overflow: hidden;

      .content-title {
        position: relative;
        margin-top: 95px;
        margin-bottom: 45px;
        opacity: 0;

        span {
          display: block;
          font-family: PingFang SC;
          font-weight: 800;
          font-size: 50px;
          color: #1B1B1B;
          position: relative;
          z-index: 50;
          width: fit-content;
          margin: 0 auto;
        }


        &::after {
          letter-spacing: 10px;
          content: '';
          position: absolute;
          width: 100% !important;
          text-align: center;
          height: 50%;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          z-index: 45;
          font-family: PingFang SC;
          font-weight: bold;
          font-size: 30px;
          color: #E5E5E5;
        }

        .saw-more-box {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          opacity: 1;
          z-index: 999;
        }

        .saw-more {
          width: 100px;
          height: 40px;
          line-height: 40px;
          color: #fff;
          position: relative;
          cursor: pointer;
          opacity: 0.8;
          transition: all 0.3s ease-in-out;

          &:hover {
            opacity: 1;

            &::after {
              right: 0;
            }
          }

          &:before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2px;
            background-color: #fff;
            transform-origin: bottom right;
            transform: scaleX(0);
            transition: transform 0.5s ease;
          }

          &:hover::before {
            transform-origin: bottom left;
            transform: scaleX(1);
          }

          &::after {
            content: '';
            width: 24px;
            height: 10px;
            position: absolute;
            right: 10%;
            top: 50%;
            transform: translateY(-50%);
            background-image: url('~@/assets/images/more-right.png');
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            transition: all 0.3s ease-in-out;
          }
        }
      }

      .ciontent-text {
        opacity: 0;
      }
    }
  }

  .company-profile {
    height: 745px;
    scrollbar-width: none;
    overflow: hidden;
    overflow-y: scroll;

    .company-profile-title {
      text-align: center;
    }

    .company-profile-title::after {
      content: 'COMPANY PROFILE' !important;
    }

    .company-profile-text {
      height: 515px;
      scrollbar-width: none;
      overflow: hidden;
      overflow-y: scroll;
    }
  }

  .solve-plan {
    margin-top: 120px;
    min-height: 888px;
    background-image: url('~@/assets/images/solve-plan-bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    .solve-plan-title {
      opacity: 0;

      span {
        color: #fff !important;
      }

      &::after {
        content: 'GLOBAL TOURISM SOLUTION' !important;
        color: #e5e5e537 !important;
      }
    }

    .solve-plan-tabs-content {
      margin-top: 90px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .solve-plan-tabs-content-left {
        width: 450px;
        height: 445px;

        .solve-plan-tabs-content-left-html {
          width: 100%;
          height: 370px;
          padding-top: 20px;
          overflow: scroll;
          overflow-x: hidden;
          text-overflow: ellipsis;
          scrollbar-width: none;
          scrollbar-color: #418CFF rgba(65, 140, 255, 0.2);
          margin-bottom: 30px;
        }

        .saw-detail {
          background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
          border-radius: 8px;
          border: none;
          width: 120px;
          height: 40px;
          line-height: 40px;
          color: #fefefe;
          text-align: center;
          transition: all ease 0.3s;
          cursor: pointer;

          &:hover {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 100%);
            color: #333;
          }
        }
      }

      .solve-plan-tabs-content-right {
        width: 745px;
        height: 445px;

        img {
          width: 100%;
          height: 100%;

        }
      }
    }

  }

  .scence-plan {
    height: 895px;
    background-image: none;
    margin-top: 0;

    .scence-plan-title {
      opacity: 0;

      &::after {
        content: 'SMART TOURISM SOLUTIONS' !important;
        color: #E6E6E6 !important;
      }

      .saw-more {
        color: #0B59B3 !important;

        &::before {
          background-color: #0B59B3 !important;
        }

        &::after {
          background-image: url('~@/assets/images/more-right-blue.png') !important;
        }
      }
    }

    .scence-plan-text {
      .saw-detail {
        background: #0B59B3 !important;
        border: solid 1px transparent !important;

        &:hover {
          background-color: transparent !important;
          border: solid 1px #0B59B3 !important;
          color: #0B59B3 !important;
        }
      }
    }
  }

  .classic-case {
    background-image: url('~@/assets/images/classic-case-bg.png');

    .classic-case-title {
      &::after {
        content: 'CLASSIC CASES' !important;
      }
    }

    .classic-case-text {
      display: flex;
      justify-content: space-between;
      margin-top: 60px;

      .classic-case-text-left {
        width: 315px;
        height: fit-content;
        border-radius: 12px;
        border: none;
        background-color: #fff;
        max-height: 560px;
        scrollbar-width: none;
        overflow: scroll;
        display: flex;
        flex-direction: column;

        .classic-case-left-item {
          height: 79px;
          line-height: 79px;
          text-align: center;
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 20px;
          color: #2A333D;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 20px 0 60px;
          transition: all ease 0.3s;
          cursor: pointer;
          position: relative;

          &::before {
            content: '';
            width: 24px;
            height: 24px;
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            background-image: url('~@/assets/images/icon_project-events.svg');
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
          }

          &:hover {
            box-shadow: inset 0 0 8px 2px #efefef;
          }

          span {
            display: inline-block;
            max-width: 80%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          &:not(:last-child) {
            border-bottom: solid 1px #2a333d26;
            ;
          }
        }
      }

      .classic-case-text-right {
        width: 895px;
        height: 560px;
        padding: 40px 35px;

        .classic-case-text-right-top {
          height: 430px;
          border-bottom: solid 1px #2a333d1b;
          transition: all ease 0.3s;

          .classic-case-text-right-content {
            max-height: 180px;
            overflow-y: scroll;
            scrollbar-width: none;
            margin-bottom: 25px;
          }

          .classic-case-text-right-top-images-box {
            width: 100%;
            height: 200px;
            overflow-x: scroll;
            scrollbar-width: none;
            display: flex;

            .classic-case-text-right-middle-images {
              width: 360px;
              height: 200px;

              &:not(:first-child) {
                margin-left: 10px;
              }
            }
          }
        }

        .classic-case-text-right-bottom {
          display: flex;
          justify-content: end;

          .saw-detail {
            margin-top: 25px;
            cursor: pointer;
            width: 70px;
            height: 20px;
            line-height: 20px;
            color: #2A333D;
            text-align: center;
            transition: all ease 0.3s;

            &:hover {
              color: #0B59B3;
            }
          }
        }
      }
    }
  }

  .partner-box {
    height: 850px;
    background-image: url('~@/assets/images/partner-bg.png');

    .partner-box-l {
      // overflow: unset!important;
    }

    .partner-title-fu {
      font-weight: 400 !important;
      font-size: 20px !important;
      color: #2A333D !important;
    }

    .partner-text {
      position: relative;

      .partne-text-left {
        width: 40%;
        text-align: left;
        margin-top: 150px;
        margin-left: 100px;

        .partne-text-left-title {
          font-weight: 500;
          font-size: 24px;
          color: #000;
          line-height: 36px;

          span {
            color: #F13537;
          }
        }

        .partne-text-left-content {
          font-weight: 800;
          font-size: 28px;
          color: #1B1B1B;
          line-height: 46px;
          margin: 48px 0;
        }

        .partne-text-left-bottom {
          font-weight: 400;
          font-size: 24px;
          color: #1B1B1B;
          line-height: 36px;
        }
      }

      .partner-img-box {
        width: 140px;
        height: 160px;
        line-height: 160px;
        background-image: url('~@/assets/images/parnter-img-bg.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        transition: all ease 0.3s;
        text-align: center;
        opacity: 0.7;

        &:hover {
          scale: 1.03;
          opacity: 1;
        }

        .partner-img {
          width: 70%;
          margin: 0 auto;
        }
      }
    }
  }

  .news {
    background-image: none;

    .news-title {

      &::after {
        content: 'NEWS AND UPDATES' !important;
      }
    }

    .news-text {

      .news-row {

        .news-col {
          margin-bottom: 28px;
          display: flex;
          cursor: pointer;

          &:hover {
            .news-img-box {
              box-shadow: 0 0 8px 2px #efefef;
            }

            .news-col-text {
              box-shadow: 0 0 8px 2px #efefef;

            }

            .news-text-title {
              color: #0B59B3 !important;
            }

            .more-jian {
              background-image: url('~@/assets/images/shang-you-lan-jian.png') !important;
            }
          }


          .news-img-box {
            width: 195px;
            height: 155px;
            transition: all ease 0.3s;
            flex: none;

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

          .news-col-text {
            transition: all ease 0.3s;
            flex: 1;
            padding: 10px 15px;
            background-color: #fff;

            .news-text-title {
              transition: all ease 0.3s;

              font-weight: bold;
              font-size: 18px;
              color: #1B1B1B;
              line-height: 40px;
              width: 100%;
              max-width: 380px;
              height: 40px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .news-text-title-fu {

              width: 100%;
              font-weight: 400;
              font-size: 16px;
              color: #2A333D;
              line-height: 24px;
              display: -webkit-box;
              /* 使用-webkit-box布局模型 */
              -webkit-box-orient: vertical;
              /* 设置子元素的排列方向为垂直 */
              -webkit-line-clamp: 2;
              /* 限制在一个块元素显示的文本的行数为2行 */
              overflow: hidden;
              /* 超出部分隐藏 */
              text-overflow: ellipsis;
            }

            .news-text-feet {
              margin-top: 20px;
              display: flex;
              justify-content: space-between;
              align-items: center;

              .news-time {
                transition: all ease 0.3s;

                font-size: 16px;
                color: #2A333D;
              }

              .more-jian {
                transition: all ease 0.3s;
                width: 20px;
                height: 20px;
                background-image: url('~@/assets/images/moore-hui.png');
                background-repeat: no-repeat;
                background-size: contain;
              }
            }
          }
        }
      }
    }
  }
</style>
<style lang="scss">
  .pc-el-tabs {
    .el-tabs__nav-wrap::after {
      background-color: #c2deff5a;
    }

    .el-tabs__active-bar {
      background-color: #fff;
    }

    .el-tabs__item.is-active {
      color: #fff;
    }

    .el-tabs__item {
      color: #E5F1FF;

    }

    .el-tabs__item:hover {
      color: #fff;
    }
  }



  .pc-el-tabs-dark {
    .el-tabs__active-bar {
      background-color: #0B59B3;
    }

    .el-tabs__item.is-active {
      color: #0B59B3;
    }

    .el-tabs__item:hover {
      color: #0B59B3;
    }
  }

  .short-tabs {

    .el-tabs__header {
      width: 20%;
      margin: 0 auto;
      margin-bottom: 45px;
    }

    .el-tabs__nav-wrap::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 0 !important;
      background: none !important;
      border-bottom: 2px dotted #dfe4ed;
      z-index: 1;
    }
  }
</style>
