<!DOCTYPE html>
<html lang="zh">

<head>
    <title>关于我们-福建天衡联合律师事务所</title>
    <meta name="description" content="福建天衡联合律师事务所 天衡 天衡律师 厦门律师">
    <meta name="keywords" content="福建天衡联合律师事务所 天衡 天衡律师 厦门律师">
    

<meta charset="UTF-8">
    <meta name="renderer" content="webkit">
  <!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

  
  <link rel="icon" type="image/png" sizes="56x56" href="/assets/img/favicon.ico">
  <link href="/css/main.css" rel="stylesheet">
  <link href="/css/font.css" rel="stylesheet">
  <link href="/css/components.css" rel="stylesheet">
  <link href="/css/loader.css" rel="stylesheet">
  <link href="/css/paginate.css" rel="stylesheet">
    <!--<link href="/css/animate.min.css" rel="stylesheet">-->
  <!--<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" ref="stylesheet" />-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" />
  
  <script src="/js/computeFontSize.js"></script>  
  <script src="/js/vue.global.prod.js"></script>
  <script src="/js/numscroll.js"></script> 
  <script src="/js/wow.min.js"></script>
  <script src="/js/units.min.js"></script>   
  <script src="/js/main.min.js"></script>   

  
    <link rel="stylesheet" href="/css/about.css">
   
    <script src="/js/testData.js"></script>
    <style>
        .mb-0{
            margin-bottom: 0px!important;
        }
        
         @media  (min-width:780px) and (max-width:1221px) {
                
                .abouts p{
                    font-size: 12px!important;
                }
                .abouts p span{
                    font-size: 14px!important;
                }
                .font12{
                    font-size: 13px!important;
                }
                .font18{
                    font-size: 18px!important;   
                }
            }
    </style>
</head>

<body class="bg-gray-100">
    <div id="loader" class="loader">
    <img src="/img/lodaing.png" class="w-[40px] h-[40px] mr-[20px]" alt="" />
    <div class="flex items-end">
        <span class=" text-[32px] block">Loading</span>
        <div class="loadingFirst"></div>
    </div>
</div>


<script>
 
    window.addEventListener('DOMContentLoaded', function () {
        const loader = document.getElementById('loader');
        if (!loader) return;
        loader.classList.add('animate__animated');
        loader.classList.add('animate__fadeOutUp');
        loader.remove();
    }); 
   
</script>
    <div id="app">
        <section class="w-full ">
                        <header class="w-full h-[120px] md:h-[80px] bg-white/40 border-b border-gray-200 fixed inset-0  z-50 hg40" >
      <div class="px-4 md:px-[100px] box-border h-full py-[16px] flex items-center justify-between relative">
        <!-- Logo -->
        <div class="flex items-center space-x-2 w-[250px] w150px h48 max-md:h-[48px] md:w-[250px] md:h-[48px]">
          <a href="/" class="w-full h-full"><img src="https://www.tenetlaw.com/uploads/20250519/3511cd7b08e4c8112f8ed6b75bdc3d70.png" alt="福建天衡联合律师事务所" class="w-full h-full" style="object-fit:contain"/></a>
        </div>

        <div class="ml-auto hidden md:block">
          <nav class="relative w-[932px] flex items-center w500">
            <div v-for="(item, index) in data.menuItems" :key="index" class="relative flex-1 flex justify-center"
              @mouseenter="data.activeMenu = index" @mouseleave="data.activeMenu = null">
              <a :href="item.href"
                class="text-[#333333] text-[17px] font13 font-bold no-underline hover:text-[#333333] py-4 block text-center transition-colors duration-300 ease-in-out"
                :class="{'submenu-wrapper':( data.activeMenu === index && item.submenu && item.submenu.length>0) ,
                'text-red-600': data.activityLevel === item.href}">
                {{ item.name }}
              </a>
              <!-- 二级导航 -->
              <ul v-if="item.submenu && item.submenu.length && data.activeMenu === index && data.activeMenu != 2"
                class="absolute left-0 right-0 mx-auto top-full bg-white my-0 shadow-lg rounded-sm z-50 min-w-[120px] p-2 list-none">
                    <li v-for="(subItem, subIndex) in item.submenu" :key="subIndex">
                      <a  :href="subItem.href"
                        :class="{'text-red-600': data.activitylevelTow === subItem.href}"
                        class="text-[#333333] hover:text-red-600 flex justify-center font10 items-center py-2 no-underline transition-colors duration-300 ease-in-out text-[16px] whitespace-nowrap">
                        {{ subItem.name }}
                      </a>
                    </li>
               
              </ul>
              <div v-if="item.submenu && item.submenu.length && data.activeMenu === index && data.activeMenu != 1"
                class="absolute -left-[212px] right-0 mx-auto top-full bg-white shadow-lg rounded-sm z-50 w-[892px]">
                <div class="py-4 flex flex-wrap text-[16px]">
                  <a v-for="(subItem, subIndex) in item.submenu" :key="subIndex" :href="subItem.href"
                    :class="{'text-red-600': data.activitylevelTow === subItem.href}"
                    class="text-[#333333] hover:text-red-600 py-[10px] pl-[30px] font10 no-underline block w-1/5 transition-colors duration-300 ease-in-out text-[16px] whitespace-nowrap">
                    {{ subItem.name }}
                  </a>
                </div>
              </div>
            </div>
          </nav>

        </div>


        <!-- 手机端图标 -->
        <div class=" w-[40px] ml-auto cursor-pointer mr-4  md:hidden" @click="data.isOpenNav = !data.isOpenNav">
          <svg v-if="data.isOpenNav" xmlns="http://www.w3.org/2000/svg" class="w-[32px] h-[32px]" fill="none" viewBox="0 0 24 24"
            stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
          <svg v-else t="1744774550508" class="icon w-[32px] h-[32px]" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="8857">
            <path
              d="M844.1 257.7H181.6c-28.8 0-52.1-22.4-52.1-50s23.3-50 52.1-50h662.5c28.8 0 52.1 22.4 52.1 50s-23.4 50-52.1 50z m0 607.3H181.6c-28.8 0-52.1-22.4-52.1-50s23.3-50 52.1-50h662.5c28.8 0 52.1 22.4 52.1 50s-23.4 50-52.1 50z m0-303.7H181.6c-28.8 0-52.1-22.4-52.1-50s23.3-50 52.1-50h662.5c28.8 0 52.1 22.4 52.1 50s-23.4 50-52.1 50z"
              fill="#515151" p-id="8858"></path>
          </svg>

        </div>

        <!-- 手机端图标 -->
        <!-- 手机端 -->

        <div class="absolute top-[80px] left-0 right-0   md:hidden bg-white min-h-[400px] max-h-[70vh] overflow-auto" v-if="data.isOpenNav">
          <div v-for="(item, index) in data.menuItems" :key="index" class="relative  ">
            <a v-if="!item.submenu || item.submenu.length===0" :href="item.href"
              class="text-[#333333]  border-[#dddddd] border-b-1 ml-8   flex justify-between  px-4 no-underline hover:text-[#333333] py-3  transition-colors duration-300 ease-in-out"
              :class="{'text-red-600': data.activityLevel === item.href}">
              {{ item.name }}

            </a>
            <div v-else
              class="text-[#333333]  border-[#dddddd] border-b-1  ml-8  flex justify-between  px-4 no-underline hover:text-[#333333] py-3  transition-colors duration-300 ease-in-out"
              :class="{   'text-red-600': data.activityLevel === item.href}"
              @click="data.phisShowSubmenu = data.phisShowSubmenu === index ? null : index">
              <a :href="item.href">{{ item.name }}</a>
              <span class="w-[15px] ml-2 mr-8" v-if="item.submenu && item.submenu.length "> 
                <i v-if="data.phisShowSubmenu ===index" class="icon-roundAdd"></i>
                <i v-else class="icon-unfold"></i> 
              </span>
            </div>

            <div v-if="item.submenu && item.submenu.length>0 && data.phisShowSubmenu === index"
              class="w-full bg-slate-100/80">
              <div class="px-[32px]">
                <a v-for="(subItem, subIndex) in item.submenu" :key="subIndex" :href="subItem.href"
                  :class="{'text-red-600': data.activitylevelTow === subItem.href}"
                  class="text-[#333333] px-[42px] hover:text-red-600  block py-2 no-underline transition-colors duration-300 ease-in-out   whitespace-nowrap">
                  {{ subItem.name }}
                </a>
              </div>
            </div>

          </div>




          <!-- Navigation hrefs -->
        </div>
        <!--  @mouseenter="data.isShowSelectLanguage = true" @mouseleave="data.isShowSelectLanguage = false" -->
        <!-- // 语言选择 -->
        <div class="flex md:w-[70px] box-border  h-full justify-end items-center font-bold cursor-pointer relative ml-2"
         @click="data.isShowSelectLanguage = !data.isShowSelectLanguage  ">
          <div class="text-[24px] md:text-[18px] font13">CN</div>
          <span class="w-[32px] md:w-[15px] ml-2">
            <svg t="1744685186029" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="6232">
              <path
                d="M890.336 330.912c-12.576-12.416-32.8-12.352-45.248 0.192L517.248 661.952 184.832 332.512c-12.576-12.448-32.8-12.352-45.28 0.192-12.448 12.576-12.352 32.832 0.192 45.28l353.312 350.112c0.544 0.544 1.248 0.672 1.792 1.184 0.128 0.128 0.16 0.288 0.288 0.416 6.24 6.176 14.4 9.28 22.528 9.28 8.224 0 16.48-3.168 22.72-9.472l350.112-353.312C902.976 363.616 902.88 343.36 890.336 330.912z"
                p-id="6233" fill="#333333"></path>
            </svg></span>
          <div class="drop-down w-48 overflow-hidden bg-white rounded-md shadow absolute top-10 right-0 max-md:top-[72px]"
            v-if="data.isShowSelectLanguage">
            <ul class="p-0 m-0">
                            <a href="/About/content/tp/Styles/Images/Sdcms.Css"><li
                class="p-3 text-sm font-medium flex items-center hover:bg-[#ec6430] hover:text-white transition-colors duration-300 ease-in-out font13">
                <span> CN </span>
              </li></a>
                            <a href="/en/About/content/tp/Styles/Images/Sdcms.Css"><li
                class="p-3 text-sm font-medium flex items-center hover:bg-[#ec6430] hover:text-white transition-colors duration-300 ease-in-out font13">
                <span> EN </span>
              </li></a>
                          </ul>
          </div>
        </div> 
    </header>


    <script>
     
    </script>
                    </section>
        <div class="relative w-full h-[560px] aspect-[1920/1200] md:aspect-[1920/820] lg:aspect-[1920/420]">
            <img src="https://www.tenetlaw.com/uploads/20250506/c82722f2c7fba1b63d2d6d401f1bae43.png" alt="" class="w-full object-cover h-full">
            <div class="absolute left-[50%] top-[50%] transform -translate-x-1/2 -translate-y-1/2 text-[32px] pb-[16px] border-x-0 border-t-0 border-b-[4px] border-solid border-[#B80009] font-[SourceHanSansCN-Bold]">关于我们</div>
        </div>
        
                <div id="intro" class="px-[260px] bg-[#ffffff] pt-[80px] max-md:px-[20px]">
            <div class="bg-[url('/img/aboutAb.png')] bgs-about flex pb-[100px] max-md:flex-col" style="background-size: 100% 100%;">
                <div class="font-bold text-[120px] text-[#B80009] flex-1 mr-[70px] leading-[110px] max-md:leading-[96px] max-md:text-[96px] max-md:mb-[16px]">
                    <p>TENET & </p>
                    <p class="text-right">PARTNERS</p>
                    <p class="text-center">1993</p>
                </div>
                <div class="w-[580px] max-md:w-full abouts">
                    <p class="text-[26px] font-bold text-[#B80009] mb-[52px]" style="font-family: 微软雅黑, Arial, sans-serif; margin-bottom: 3.25rem !important; font-weight: 700 !important; font-size: 1.625rem !important; --tw-text-opacity: 1 !important;"><span style="color: rgb(184 0 9 / var(--tw-text-opacity, 1)) !important;">福建天衡联合律师事务</span><font color="#9c0000">所</font></p><p class="text-[16px] leading-[34px] text-[#333333] opacity-80" style="line-height: 2.125rem !important; --tw-text-opacity: 1 !important; opacity: 0.8 !important;">福建天衡联合律师事务所成立于1993年，是中国最早成立的合伙制律师事务所之一，以“管理风险，创造价值”为服务理念。</p><p class="text-[16px] leading-[34px] text-[#333333] opacity-80" style="line-height: 2.125rem !important; --tw-text-opacity: 1 !important; opacity: 0.8 !important;"><br></p><p class="text-[16px] leading-[34px] text-[#333333] opacity-80" style="line-height: 2.125rem !important; --tw-text-opacity: 1 !important; opacity: 0.8 !important;">总部位于福建厦门，在福建福州、福建泉州、福建龙岩和上海浦东设有办公室，泰国设有企业服务中心，现有员工660余人，执业律师470余名，合伙人180多名。</p>                </div>
            </div>
        </div>
            <!--animate__backInUp-->
                <section id="honor" class="w-full  overflow-hidden wow fadeInUp fadeIn swiper-container swiperTop">
            <div class="w-full   md:aspect-[1920/698] md:relative bg001 
[background-size:100%_100%] bg-no-repeat md:bg-none bg-[top_left]  pt-10 md:pt-0">
  <img src="/img/aboutBg.png" class=" w-full h-auto object-cover hidden md:block" alt="" /> 
  <div class="md:absolute md:top-[120px] md:left-[260px] text-[30px] font-s-b z-1 flex justify-center w-full md:block md:w-auto font-bold"> 天衡荣誉</div>
  <div class="hidden md:block absolute top-[272px] left-[260px] text-[140px] font-bold text-[#333] opc6 z-0 "> HONOR</div>
  <div class="hidden md:block absolute top-[234px] right-[260px] w-[300px] h-[435px] bg-[#CA1B23] rounded-[10px] ">
    <div class="w-full h-full flex flex-col justify-between p-[30px] box-border items-end">
      <div class="h-[28px] flex justify-end text-[20px] items-center text-white ">
        <i class="swiperButtonPrev icon-back  text-[30px]  cursor-pointer" onclick="swiperButtonPrev()"></i>
        <div class="w-[1px] bg-white h-full mx-2"></div>
        <i class="swiperButtonNext icon-right  text-[30px] cursor-pointer" onclick="swiperButtonNext()"></i>
      </div>
      <div class=" w-[62px] h-[120px] ">
        <div class="text-[50px] font-bold leading-[26px]  opacity-30"> {{data.tianhengHonorIndex}}</div>
        <div class="w-full h-[60px]   relative 
        before:top-0 before:right-0  
        before:content-[''] before:absolute before:w-[1px] before:h-[85px] 
        before:bg-[#333333] before:origin-top-left before:rotate-45 
        before:transform  opacity-30">
          <div class="absolute bottom-0 right-0 text-[22px]">{{ data.tianhengHonorIndexlength}}</div>
        </div>
        <div class="swiper-pagination paginationb opacity-0 h-0 w-0 overflow-hidden"></div>
      </div> 
    </div>
  </div> 
  <div class="w-full hidden md:block  md:absolute  md:left-[260px] md:top-[414px]
   md:w-[1250px] md:h-[270px] bg-none  tianhengHonor overflow-hidden">
    <div class="swiper-wrapper h-[1550px] py-0 md:h-full" v-if="data.honorSwiper">
      <div class="swiper-slide !bg-[transparent] px-[150px] md:px-4 md:py-4 box-border md:flex-nowrap md:items-center h-auto"
        v-for="(item,index) in data.honorSwiper">
        <div class="h-auto aspect-[420/324] md:aspect-auto md:h-full w-[390px] h-[270px] box-border bg-cover honor-bg-1
          md:overflow-hidden flex flex-col justify-between py-6 md:py-[35px] px-[36px] max-md:w-[420px] " >
            <div class=" h-full w-full">
                
              <!--<div class="honor-bg-2 h-[120px] w-full  bg-contain bg-no-repeat">-->
              <!--    <p class="text-[24px] font-bold text-[#8C6844] pt42 w-[262px] leading-[28px] pt-[42px] line-clamp-2" v-html="item.name"></p>-->
              <!--</div>-->
              <div class="honor-bg-2 h-[120px] w-full bg-contain bg-no-repeat ">
                <!-- 横向滚动容器 -->
                  <div class="overflow-hidden relative pt-[42px] mx-auto w-[256px]">
                      <div class="flex items-center h-full  animate-marquee-container">
                        <!-- 原始文本 -->
                        <p class="text-[24px] px-4 font-bold text-[#8C6844] text-center whitespace-nowrap flex-shrink-0 font14" v-html="item.name"></p>
                        <!-- 完全相同的副本（用于无缝循环） -->
                        <p class="text-[24px] px-4 font-bold text-[#8C6844] text-center whitespace-nowrap flex-shrink-0 font14" v-html="item.name"></p>
                      </div>
                  </div>
                </div>
              
              
              <p class="pt-[18px] text-[24px] pt18 leading-[32px]">{{item.year}}</p>
            </div>

          <!-- <as-img :src="item.src" class="w-full h-full  shadow-lg  md:w-full md:h-auto object-cover" alt="" 
          @click="showImage(item.src)"> -->
        </div>
      </div>
    </div>
  </div>
<!--  <div class="w-full md:hidden " v-if="data.honorSwiper&& data.honorSwiper.length>0">-->
<!--    <div class="px-[150px] md:px-4 md:py-4 box-border md:flex-nowrap md:items-center h-auto"-->
<!--        v-for="(item,index) in data.honorSwiper.slice(0,3)">-->
<!--        <div class="h-auto aspect-[420/324] md:aspect-auto md:h-full w-[350px] box-border bg-cover honor-bg-1-->
<!--        md:overflow-hidden flex flex-col justify-between py-6 md:py-[35px] px-[36px] max-md:w-[420px]" >-->
<!--          <div class=" h-full w-full">-->
<!--            <div class="honor-bg-2 h-[120px] w-full  bg-contain bg-no-repeat">-->
<!--                <p class="text-[24px] font-bold text-[#8C6844] pt42 pt-[42px]">{{item.name}}</p>-->
<!--            </div>-->
<!--            <p class="pt-[18px] text-[24px] pt18 leading-[32px]">{{item.year}}</p>-->
<!--          </div>-->

        <!-- <as-img :src="item.src" class="w-full h-full  shadow-lg  md:w-full md:h-auto object-cover" alt="" -->
<!--        @click="showImage(item.src)"> -->
<!--      </div>-->
<!--    </div>-->
<!--</div>-->


<div class="w-full md:hidden box-border" v-if="data.honorSwiper&& data.honorSwiper.length>0">
    <!--<div class="px-[150px] md:px-4 md:py-4 box-border md:flex-nowrap md:items-center h-auto"-->
    <!--    v-for="(item,index) in data.honorSwiper.slice(0,3)">-->
    <!--    <div class="h-auto aspect-[420/324] md:aspect-auto md:h-full w-[390px] h-[270px] box-border bg-cover honor-bg-1-->
    <!--    md:overflow-hidden flex flex-col justify-between py-6 md:py-[35px] px-[36px] max-md:w-[420px]" >-->
    <!--      <div class=" h-full w-full">-->
    <!--        <div class="honor-bg-2 h-[120px] w-full max-md:h-[145px] max-md:mt-[50px]  bg-contain bg-no-repeat">-->
    <!--            <p class="text-[24px] font-bold text-[#8C6844] pt-[42px] text-center max-md:text-[28px]">{{item.name}}</p>-->
    <!--        </div>-->
    <!--        <p class="pt-[18px] text-[24px] leading-[32px] max-md:text-[28px] text-center">{{item.year}}</p>-->
    <!--      </div>-->
    <!--  </div>-->
    <!--</div>-->
    
    <div class="h-[750px] py-0 md:h-full flex flex-col overflow-y-auto box-border grid grid-cols-2 gap-[20px]" v-if="data.honorSwiper">
      <div class="!bg-[transparent] md:px-4 md:py-4 box-border md:flex-nowrap md:items-center h-auto max-md:mb-[23px]"
        v-for="(item,index) in data.honorSwiper">
        <div class="h-auto aspect-[420/324] md:aspect-auto md:h-full w-[350px] box-border bg-cover honor-bg-1
          md:overflow-hidden flex flex-col justify-between py-6 md:py-[35px] px-[20px] max-md:h-[236px]  max-md:w-[372px]" >
            <div class=" h-full w-full">
                
                
               <div class="honor-bg-2 h-[120px] w-full max-md:h-[145px]  bg-contain bg-no-repeat ">
              <!-- 横向滚动容器 -->
              <div class="overflow-hidden relative pt-[42px] mx-auto w-[288px]">
                  <div class="flex items-center h-full  animate-marquee-container">
                    <!-- 原始文本 -->
                    <p class="text-[24px] px-4 font-bold text-[#8C6844] text-center max-md:text-[30px] whitespace-nowrap flex-shrink-0" v-html="item.name"></p>
                    <!-- 完全相同的副本（用于无缝循环） -->
                    <p class="text-[24px] px-4 font-bold text-[#8C6844] text-center max-md:text-[30px] whitespace-nowrap flex-shrink-0" v-html="item.name"></p>
                  </div>
              </div>
            </div>
              
              
              
              <p class="pt-[18px] text-[24px] pt18 leading-[32px]">{{item.year}}</p>
            </div>

          <!-- <as-img :src="item.src" class="w-full h-full  shadow-lg  md:w-full md:h-auto object-cover" alt="" 
          @click="showImage(item.src)"> -->
        </div>
      </div>
    </div>
  </div>


</div>
 

<script>

var honorSwiperData = JSON.parse(`[{"id":17,"name":"\u90e8\u7ea7\u201c\u6587\u660e\u5f8b\u5e08\u4e8b\u52a1\u6240\u201d","year":"2000\u5e74"},{"id":2,"name":"\u5168\u56fd\u4f18\u79c0\u5f8b\u5e08\u4e8b\u52a1\u6240","year":"2005\u5e74"},{"id":23,"name":"LEGALBAND \u798f\u5efa\u533a\u57df\u5546\u4e8b\u6cd5\u7b2c\u4e00\u68af\u961f\u5f8b\u6240","year":"2015\u5e74"},{"id":22,"name":"\u5168\u7701\u5148\u8fdb\u57fa\u5c42\u515a\u7ec4\u7ec7","year":"2003\u5e74"},{"id":16,"name":"\u94b1\u4f2f\u65af \u516c\u53f8\/\u5546\u4e8b\uff1a\u4e1c\u90e8\u6cbf\u6d77\uff08\u798f\u5efa\uff09\u7b2c\u4e00\u7b49\u5f8b\u6240","year":"2018-2025\u5e74"},{"id":15,"name":"ALB\u300a\u4e9a\u6d32\u6cd5\u5f8b\u6742\u5fd7\u300b China\u533a\u57df\u5e02\u573a\u6392\u540d\uff1a\u534e\u5357\u5730\u533a\u5f8b\u6240\u699c\u5355","year":"2021-2025\u5e74"},{"id":11,"name":"\u5165\u9009ALB\u201c\u4e2d\u56fd\u6700\u5927\u5f8b\u6240\u524d25\u5f3a\u201d\u7b2c22\u540d","year":"2014\u5e74"},{"id":6,"name":"\u53a6\u95e8\u5e02\u6574\u987f\u5efa\u7b51\u5e02\u573a\u6cd5\u5f8b\u63f4\u52a9\u5148\u8fdb\u5355\u4f4d","year":"2000\u5e74"},{"id":26,"name":"\u300a\u5546\u6cd5\u300b\u5353\u8d8a\u5f8b\u6240\u5927\u5956\uff08\u533a\u57df\u5956\u9879\uff09\u699c\u5355","year":"2024\u5e74"},{"id":25,"name":"\u300a\u5546\u6cd5\u300b\u798f\u5efa\u5730\u533a\u5353\u8d8a\u7efc\u5408\u5b9e\u529b\u5f8b\u6240","year":"2023\u5e74"},{"id":24,"name":"LEGALBAND \u201c\u4e2d\u56fd\u5f8b\u6240\u54c1\u724c\u524d50\u5f3a\u201d\u7b2c39\u540d","year":"2015\u5e74"},{"id":21,"name":"\u5c65\u884c\u793e\u4f1a\u8d23\u4efb\u5148\u8fdb\u5f8b\u5e08\u4e8b\u52a1\u6240","year":"2016\u5e74"},{"id":20,"name":"ALB \u300a\u4e9a\u6d32\u6cd5\u5f8b\u6742\u5fd7\u300b\u4e2d\u56fd\u5341\u4f73\u6210\u957f\u5f8b\u6240","year":"2013\u30012015\u5e74"},{"id":19,"name":"ALB\u300a\u4e9a\u6d32\u6cd5\u5f8b\u6742\u5fd7\u300b\u201c\u4e2d\u56fd\u6700\u5927\u5f8b\u6240\u524d30\u5f3a\u201d\u7b2c27\u540d","year":"2015\u5e74"},{"id":18,"name":"\u5168\u7701\u5f8b\u5e08\u5b9e\u52a1\u7814\u8ba8\u4f1a\u201c\u4f18\u79c0\u8bba\u6587\u5956\u201d","year":"2003"},{"id":9,"name":"\u798f\u5efa\u7701\u5e74\u5ea6\u6587\u660e\u5355\u4f4d","year":"2003-2005"},{"id":4,"name":"\u798f\u5efa\u7701\u4f18\u79c0\u5f8b\u5e08\u4e8b\u52a1\u6240","year":"2007\u5e74"},{"id":3,"name":"\u798f\u5efa\u7701\u4f18\u79c0\u5f8b\u5e08\u4e8b\u52a1\u6240","year":"2006\u5e74"}]`);
let nextButton,prevButton; 
  (function () {
    // Declare at a higher scope
    window.addEventListener('load', function () {
      app.data.honorSwiper = honorSwiperData;
      app.data.tianhengHonorIndex = "01";
      prevButton = document.querySelector('.swiperButtonPrev');
      nextButton = document.querySelector('.swiperButtonNext');  
 
      setTimeout(() => {
        const swiperElement = document.querySelector(".tianhengHonor");
        if (swiperElement) {
          var swiper = new Swiper(".tianhengHonor", {
            slidesPerView: 3,  
            direction: 'vertical',
            pagination: {
              el: ".swiper-pagination", 
              type: "fraction",
            },
            breakpoints: {
              120: {
                slidesPerView: 3, 
                direction: 'horizontal',
               }, 
              768: { 
               slidesPerView: 3,
                slidesPerGroup: 3,
               direction: 'horizontal',
               spaceBetween: 20,
               slidesPerGroup: 3,
               loop: true,
               loopFillGroupWithBlank: true,
              }
            },
            on: {
              slideChange: function () {
                updatePaginationText(this);
              },
              init: function () {
                updatePaginationText(this);
              }
            }
          });
        } else {
          console.error('Swiper container not found');
        }
      }, 0);
    });
  })();

  function updatePaginationText(swiperInstance) {
    const paginationEl = swiperInstance.pagination.el;
    if (paginationEl) {
      const currentSlide = swiperInstance.realIndex + 1; // 获取当前实际索引并加 1
      const totalSlides = swiperInstance.slides.length;
      const totalGroups = Math.ceil(totalSlides / swiperInstance.params.slidesPerGroup);
      const currentGroup = Math.ceil(currentSlide / swiperInstance.params.slidesPerGroup);
      app.data.tianhengHonorIndex = currentGroup.toString().padStart(2, '0');
      app.data.tianhengHonorIndexlength = totalGroups.toString().padStart(2, '0');;

    }
  }

  function swiperButtonPrev() {
    const swiperElement = document.querySelector(".tianhengHonor");
    if (swiperElement) {
      // 检查是否是第一组
      if(app.data.tianhengHonorIndex === "01") {
        if(prevButton) {
          prevButton.classList.add('disabled');
        }
        if(nextButton) {
          nextButton.classList.remove('disabled');
        }
        return;
      }
      
      // 移除所有disabled状态
      if(prevButton) {
        prevButton.classList.remove('disabled');
      }
      if(nextButton) {
        nextButton.classList.remove('disabled');
      }
      
      var swiper = swiperElement.swiper;
      swiper.slidePrev();
    }
  }

  function swiperButtonNext() {
    const swiperElement = document.querySelector(".tianhengHonor");
    if (!swiperElement) return;

    const isLastGroup = app.data.tianhengHonorIndex === app.data.tianhengHonorIndexlength;
    
    if(isLastGroup) {
      nextButton?.classList.add('disabled');
      prevButton?.classList.remove('disabled');
      return;
    }
    
    nextButton?.classList.remove('disabled');
    prevButton?.classList.remove('disabled');
    
    var swiper = swiperElement.swiper;
    swiper.slideNext();
  }

</script>
        </section>
            <!--animate__backInUp-->
            <!--animate__backInUp-->
                <div id="memoir" class="main bg-[url('/img/组5440.png')] bg-no-repeat " style="background-size: 100% 100%;">
            <div class="container mx-auto py-16 px-4 max-sm:px-0">
                <h1 id="timeline-trigger" class="text-3xl  font-bold text-center mb-16">大事记</h1>
                <div class="relative" id="timeline">
                    <div class="timeline-line"></div>
                    <div class="timeline-progress" id="progress-line"  :style="{'height':data.scrollheight}"></div>
                                        <div class="timeline-section">
                                                <div class="timeline-event  mb-0">
                                                        <div class="year-column">
                                <h2 class="timeline-year  wow fadeInUp fadeIn swiper-container swiperTop font-bold text-[60px] max-md:text-[30px] font18">2025</h2>
                            </div>
                                                        <div class="center-column">
                                <div class="timeline-dot w-[8px] h-[8px]  max-sm:left-[53%]"></div>
                            </div>
                            <div class="content-column max-sm:pl-[15px] max-sm:w-[39%]">
                                <p class="text-[18px] text-[#333] max-md:text-[12px] leading-[28px] wow fadeInUp fadeIn font14">《2025钱伯斯大中华区法律指南》“公司/商事领域福建地区第一等(Band 1)”，连续5年稳居该榜单</p>
                            </div>
                        </div>
                                                <div class="timeline-event  ">
                                                        <div class="year-column">
                            </div>
                                                        <div class="center-column">
                                <div class="timeline-dot w-[8px] h-[8px]  max-sm:left-[53%]"></div>
                            </div>
                            <div class="content-column max-sm:pl-[15px] max-sm:w-[39%]">
                                <p class="text-[18px] text-[#333] max-md:text-[12px] leading-[28px] wow fadeInUp fadeIn font14">荣获《亚洲法律杂志》（ALB）“2025年度福建地区律师事务所大奖”</p>
                            </div>
                        </div>
                                            </div>
                                        <div class="timeline-section">
                                                <div class="timeline-event  mb-0">
                                                        <div class="year-column">
                                <h2 class="timeline-year  wow fadeInUp fadeIn swiper-container swiperTop font-bold text-[60px] max-md:text-[30px] font18">2024</h2>
                            </div>
                                                        <div class="center-column">
                                <div class="timeline-dot w-[8px] h-[8px]  max-sm:left-[53%]"></div>
                            </div>
                            <div class="content-column max-sm:pl-[15px] max-sm:w-[39%]">
                                <p class="text-[18px] text-[#333] max-md:text-[12px] leading-[28px] wow fadeInUp fadeIn font14">成立泰国中国企业服务中心</p>
                            </div>
                        </div>
                                            </div>
                                        <div class="timeline-section">
                                                <div class="timeline-event  mb-0">
                                                        <div class="year-column">
                                <h2 class="timeline-year  wow fadeInUp fadeIn swiper-container swiperTop font-bold text-[60px] max-md:text-[30px] font18">2022</h2>
                            </div>
                                                        <div class="center-column">
                                <div class="timeline-dot w-[8px] h-[8px]  max-sm:left-[53%]"></div>
                            </div>
                            <div class="content-column max-sm:pl-[15px] max-sm:w-[39%]">
                                <p class="text-[18px] text-[#333] max-md:text-[12px] leading-[28px] wow fadeInUp fadeIn font14">业绩突破3亿大关。</p>
                            </div>
                        </div>
                                                <div class="timeline-event  ">
                                                        <div class="year-column">
                            </div>
                                                        <div class="center-column">
                                <div class="timeline-dot w-[8px] h-[8px]  max-sm:left-[53%]"></div>
                            </div>
                            <div class="content-column max-sm:pl-[15px] max-sm:w-[39%]">
                                <p class="text-[18px] text-[#333] max-md:text-[12px] leading-[28px] wow fadeInUp fadeIn font14">荣登《2022钱伯斯大中华区法律指南》“公司/商事领域福建地区第一等（Band1）”。</p>
                            </div>
                        </div>
                                                <div class="timeline-event  ">
                                                        <div class="year-column">
                            </div>
                                                        <div class="center-column">
                                <div class="timeline-dot w-[8px] h-[8px]  max-sm:left-[53%]"></div>
                            </div>
                            <div class="content-column max-sm:pl-[15px] max-sm:w-[39%]">
                                <p class="text-[18px] text-[#333] max-md:text-[12px] leading-[28px] wow fadeInUp fadeIn font14">荣登“2022 ALB China区域市场排名：华南地区律所” 榜单。</p>
                            </div>
                        </div>
                                                <div class="timeline-event  ">
                                                        <div class="year-column">
                            </div>
                                                        <div class="center-column">
                                <div class="timeline-dot w-[8px] h-[8px]  max-sm:left-[53%]"></div>
                            </div>
                            <div class="content-column max-sm:pl-[15px] max-sm:w-[39%]">
                                <p class="text-[18px] text-[#333] max-md:text-[12px] leading-[28px] wow fadeInUp fadeIn font14">荣获ALB中国法律大奖“年度华南华中地区律师事务所大奖”等多个提名。</p>
                            </div>
                        </div>
                                            </div>
                                        <div class="timeline-section">
                                                <div class="timeline-event  mb-0">
                                                        <div class="year-column">
                                <h2 class="timeline-year  wow fadeInUp fadeIn swiper-container swiperTop font-bold text-[60px] max-md:text-[30px] font18">2021</h2>
                            </div>
                                                        <div class="center-column">
                                <div class="timeline-dot w-[8px] h-[8px]  max-sm:left-[53%]"></div>
                            </div>
                            <div class="content-column max-sm:pl-[15px] max-sm:w-[39%]">
                                <p class="text-[18px] text-[#333] max-md:text-[12px] leading-[28px] wow fadeInUp fadeIn font14">荣登《亚洲法律杂志》公布的2021ALB China 区域市场（华南地区）排名榜单。</p>
                            </div>
                        </div>
                                            </div>
                                        <div class="timeline-section">
                                                <div class="timeline-event  mb-0">
                                                        <div class="year-column">
                                <h2 class="timeline-year  wow fadeInUp fadeIn swiper-container swiperTop font-bold text-[60px] max-md:text-[30px] font18">2020</h2>
                            </div>
                                                        <div class="center-column">
                                <div class="timeline-dot w-[8px] h-[8px]  max-sm:left-[53%]"></div>
                            </div>
                            <div class="content-column max-sm:pl-[15px] max-sm:w-[39%]">
                                <p class="text-[18px] text-[#333] max-md:text-[12px] leading-[28px] wow fadeInUp fadeIn font14">入围ALB《亚洲法律杂志》“年度中国中东部律师事务所大奖”。</p>
                            </div>
                        </div>
                                            </div>
                                        <div class="timeline-section">
                                                <div class="timeline-event  mb-0">
                                                        <div class="year-column">
                                <h2 class="timeline-year  wow fadeInUp fadeIn swiper-container swiperTop font-bold text-[60px] max-md:text-[30px] font18">2019-2021</h2>
                            </div>
                                                        <div class="center-column">
                                <div class="timeline-dot w-[8px] h-[8px]  max-sm:left-[53%]"></div>
                            </div>
                            <div class="content-column max-sm:pl-[15px] max-sm:w-[39%]">
                                <p class="text-[18px] text-[#333] max-md:text-[12px] leading-[28px] wow fadeInUp fadeIn font14">连续三年入选钱伯斯榜单——公司/商事：东部沿海（福建）第一等律所。</p>
                            </div>
                        </div>
                                            </div>
                                        <div class="timeline-section">
                                                <div class="timeline-event  mb-0">
                                                        <div class="year-column">
                                <h2 class="timeline-year  wow fadeInUp fadeIn swiper-container swiperTop font-bold text-[60px] max-md:text-[30px] font18">2016</h2>
                            </div>
                                                        <div class="center-column">
                                <div class="timeline-dot w-[8px] h-[8px]  max-sm:left-[53%]"></div>
                            </div>
                            <div class="content-column max-sm:pl-[15px] max-sm:w-[39%]">
                                <p class="text-[18px] text-[#333] max-md:text-[12px] leading-[28px] wow fadeInUp fadeIn font14">天衡大家庭成员突破300人，规模化、团队化、专业化、品牌化协同效应显著。</p>
                            </div>
                        </div>
                                                <div class="timeline-event  ">
                                                        <div class="year-column">
                            </div>
                                                        <div class="center-column">
                                <div class="timeline-dot w-[8px] h-[8px]  max-sm:left-[53%]"></div>
                            </div>
                            <div class="content-column max-sm:pl-[15px] max-sm:w-[39%]">
                                <p class="text-[18px] text-[#333] max-md:text-[12px] leading-[28px] wow fadeInUp fadeIn font14">被国际评级机构LEGALBAND评为“2015年度中国律所品牌前50强”第39名。</p>
                            </div>
                        </div>
                                            </div>
                                        <div class="timeline-section">
                                                <div class="timeline-event  mb-0">
                                                        <div class="year-column">
                                <h2 class="timeline-year  wow fadeInUp fadeIn swiper-container swiperTop font-bold text-[60px] max-md:text-[30px] font18">2015</h2>
                            </div>
                                                        <div class="center-column">
                                <div class="timeline-dot w-[8px] h-[8px]  max-sm:left-[53%]"></div>
                            </div>
                            <div class="content-column max-sm:pl-[15px] max-sm:w-[39%]">
                                <p class="text-[18px] text-[#333] max-md:text-[12px] leading-[28px] wow fadeInUp fadeIn font14">被国际评级机构LEGALBAND评为“2015年度福建区域商事法第一梯队律所”。</p>
                            </div>
                        </div>
                                                <div class="timeline-event  ">
                                                        <div class="year-column">
                            </div>
                                                        <div class="center-column">
                                <div class="timeline-dot w-[8px] h-[8px]  max-sm:left-[53%]"></div>
                            </div>
                            <div class="content-column max-sm:pl-[15px] max-sm:w-[39%]">
                                <p class="text-[18px] text-[#333] max-md:text-[12px] leading-[28px] wow fadeInUp fadeIn font14">获评ALB2015年度“中国十佳成长律所”。</p>
                            </div>
                        </div>
                                            </div>
                                        <div class="timeline-section">
                                                <div class="timeline-event  mb-0">
                                                        <div class="year-column">
                                <h2 class="timeline-year  wow fadeInUp fadeIn swiper-container swiperTop font-bold text-[60px] max-md:text-[30px] font18">2014</h2>
                            </div>
                                                        <div class="center-column">
                                <div class="timeline-dot w-[8px] h-[8px]  max-sm:left-[53%]"></div>
                            </div>
                            <div class="content-column max-sm:pl-[15px] max-sm:w-[39%]">
                                <p class="text-[18px] text-[#333] max-md:text-[12px] leading-[28px] wow fadeInUp fadeIn font14">业绩首次突破一亿元大关，成为福建首家亿元所。</p>
                            </div>
                        </div>
                                                <div class="timeline-event  ">
                                                        <div class="year-column">
                            </div>
                                                        <div class="center-column">
                                <div class="timeline-dot w-[8px] h-[8px]  max-sm:left-[53%]"></div>
                            </div>
                            <div class="content-column max-sm:pl-[15px] max-sm:w-[39%]">
                                <p class="text-[18px] text-[#333] max-md:text-[12px] leading-[28px] wow fadeInUp fadeIn font14">入选ALB“中国最大律所前25强”第22名。</p>
                            </div>
                        </div>
                                                <div class="timeline-event  ">
                                                        <div class="year-column">
                            </div>
                                                        <div class="center-column">
                                <div class="timeline-dot w-[8px] h-[8px]  max-sm:left-[53%]"></div>
                            </div>
                            <div class="content-column max-sm:pl-[15px] max-sm:w-[39%]">
                                <p class="text-[18px] text-[#333] max-md:text-[12px] leading-[28px] wow fadeInUp fadeIn font14">获评ALB2013年度“中国十佳成长律所”。</p>
                            </div>
                        </div>
                                            </div>
                                        <div class="timeline-section">
                                                <div class="timeline-event  mb-0">
                                                        <div class="year-column">
                                <h2 class="timeline-year  wow fadeInUp fadeIn swiper-container swiperTop font-bold text-[60px] max-md:text-[30px] font18">2013</h2>
                            </div>
                                                        <div class="center-column">
                                <div class="timeline-dot w-[8px] h-[8px]  max-sm:left-[53%]"></div>
                            </div>
                            <div class="content-column max-sm:pl-[15px] max-sm:w-[39%]">
                                <p class="text-[18px] text-[#333] max-md:text-[12px] leading-[28px] wow fadeInUp fadeIn font14">天衡福州分所成立；人员规模首次突破200人。</p>
                            </div>
                        </div>
                                            </div>
                                        <div class="timeline-section">
                                                <div class="timeline-event  mb-0">
                                                        <div class="year-column">
                                <h2 class="timeline-year  wow fadeInUp fadeIn swiper-container swiperTop font-bold text-[60px] max-md:text-[30px] font18">2010</h2>
                            </div>
                                                        <div class="center-column">
                                <div class="timeline-dot w-[8px] h-[8px]  max-sm:left-[53%]"></div>
                            </div>
                            <div class="content-column max-sm:pl-[15px] max-sm:w-[39%]">
                                <p class="text-[18px] text-[#333] max-md:text-[12px] leading-[28px] wow fadeInUp fadeIn font14">成立中共天衡所党总支；福建省司法厅准予天衡改制为特殊的普通合伙律师事务所。</p>
                            </div>
                        </div>
                                            </div>
                                        <div class="timeline-section">
                                                <div class="timeline-event  mb-0">
                                                        <div class="year-column">
                                <h2 class="timeline-year  wow fadeInUp fadeIn swiper-container swiperTop font-bold text-[60px] max-md:text-[30px] font18">2009</h2>
                            </div>
                                                        <div class="center-column">
                                <div class="timeline-dot w-[8px] h-[8px]  max-sm:left-[53%]"></div>
                            </div>
                            <div class="content-column max-sm:pl-[15px] max-sm:w-[39%]">
                                <p class="text-[18px] text-[#333] max-md:text-[12px] leading-[28px] wow fadeInUp fadeIn font14">业绩首次突破5000万元大关。天衡加入中世律所联盟（SGLA）。</p>
                            </div>
                        </div>
                                            </div>
                                        <div class="timeline-section">
                                                <div class="timeline-event  mb-0">
                                                        <div class="year-column">
                                <h2 class="timeline-year  wow fadeInUp fadeIn swiper-container swiperTop font-bold text-[60px] max-md:text-[30px] font18">2005</h2>
                            </div>
                                                        <div class="center-column">
                                <div class="timeline-dot w-[8px] h-[8px]  max-sm:left-[53%]"></div>
                            </div>
                            <div class="content-column max-sm:pl-[15px] max-sm:w-[39%]">
                                <p class="text-[18px] text-[#333] max-md:text-[12px] leading-[28px] wow fadeInUp fadeIn font14">中华律师协会授予“全国优秀律师事务所”荣誉称号。</p>
                            </div>
                        </div>
                                            </div>
                                        <div class="timeline-section">
                                                <div class="timeline-event  mb-0">
                                                        <div class="year-column">
                                <h2 class="timeline-year  wow fadeInUp fadeIn swiper-container swiperTop font-bold text-[60px] max-md:text-[30px] font18">2004</h2>
                            </div>
                                                        <div class="center-column">
                                <div class="timeline-dot w-[8px] h-[8px]  max-sm:left-[53%]"></div>
                            </div>
                            <div class="content-column max-sm:pl-[15px] max-sm:w-[39%]">
                                <p class="text-[18px] text-[#333] max-md:text-[12px] leading-[28px] wow fadeInUp fadeIn font14">天衡龙岩分所挂牌成立；人员规模首次突破100人。</p>
                            </div>
                        </div>
                                            </div>
                                        <div class="timeline-section">
                                                <div class="timeline-event  mb-0">
                                                        <div class="year-column">
                                <h2 class="timeline-year  wow fadeInUp fadeIn swiper-container swiperTop font-bold text-[60px] max-md:text-[30px] font18">2002</h2>
                            </div>
                                                        <div class="center-column">
                                <div class="timeline-dot w-[8px] h-[8px]  max-sm:left-[53%]"></div>
                            </div>
                            <div class="content-column max-sm:pl-[15px] max-sm:w-[39%]">
                                <p class="text-[18px] text-[#333] max-md:text-[12px] leading-[28px] wow fadeInUp fadeIn font14">4月天衡上海分所在上海市浦东区成立。7月，天衡泉州分所成立。</p>
                            </div>
                        </div>
                                            </div>
                                        <div class="timeline-section">
                                                <div class="timeline-event  mb-0">
                                                        <div class="year-column">
                                <h2 class="timeline-year  wow fadeInUp fadeIn swiper-container swiperTop font-bold text-[60px] max-md:text-[30px] font18">2001</h2>
                            </div>
                                                        <div class="center-column">
                                <div class="timeline-dot w-[8px] h-[8px]  max-sm:left-[53%]"></div>
                            </div>
                            <div class="content-column max-sm:pl-[15px] max-sm:w-[39%]">
                                <p class="text-[18px] text-[#333] max-md:text-[12px] leading-[28px] wow fadeInUp fadeIn font14">天地所与衡峰所合并成立福建天衡联合律师事务所。</p>
                            </div>
                        </div>
                                            </div>
                                        <div class="timeline-section">
                                                <div class="timeline-event  mb-0">
                                                        <div class="year-column">
                                <h2 class="timeline-year  wow fadeInUp fadeIn swiper-container swiperTop font-bold text-[60px] max-md:text-[30px] font18">2000</h2>
                            </div>
                                                        <div class="center-column">
                                <div class="timeline-dot w-[8px] h-[8px]  max-sm:left-[53%]"></div>
                            </div>
                            <div class="content-column max-sm:pl-[15px] max-sm:w-[39%]">
                                <p class="text-[18px] text-[#333] max-md:text-[12px] leading-[28px] wow fadeInUp fadeIn font14">获得中国律所的最高荣誉：“部级文明律师事务所”称号。</p>
                            </div>
                        </div>
                                            </div>
                                        <div class="timeline-section">
                                                <div class="timeline-event  mb-0">
                                                        <div class="year-column">
                                <h2 class="timeline-year  wow fadeInUp fadeIn swiper-container swiperTop font-bold text-[60px] max-md:text-[30px] font18">1999</h2>
                            </div>
                                                        <div class="center-column">
                                <div class="timeline-dot w-[8px] h-[8px]  max-sm:left-[53%]"></div>
                            </div>
                            <div class="content-column max-sm:pl-[15px] max-sm:w-[39%]">
                                <p class="text-[18px] text-[#333] max-md:text-[12px] leading-[28px] wow fadeInUp fadeIn font14">天地所与中国银行厦门分行签定了汽车消费货款业务、教育助学货款业务的律师代理合同。</p>
                            </div>
                        </div>
                                            </div>
                                        <div class="timeline-section">
                                                <div class="timeline-event  mb-0">
                                                        <div class="year-column">
                                <h2 class="timeline-year  wow fadeInUp fadeIn swiper-container swiperTop font-bold text-[60px] max-md:text-[30px] font18">1998</h2>
                            </div>
                                                        <div class="center-column">
                                <div class="timeline-dot w-[8px] h-[8px]  max-sm:left-[53%]"></div>
                            </div>
                            <div class="content-column max-sm:pl-[15px] max-sm:w-[39%]">
                                <p class="text-[18px] text-[#333] max-md:text-[12px] leading-[28px] wow fadeInUp fadeIn font14">天地所经批准在所里成立了中共天地党支部，在国际互联网上设置了网页；年底，天衡业务首次位居厦门首位。</p>
                            </div>
                        </div>
                                            </div>
                                        <div class="timeline-section">
                                                <div class="timeline-event  mb-0">
                                                        <div class="year-column">
                                <h2 class="timeline-year  wow fadeInUp fadeIn swiper-container swiperTop font-bold text-[60px] max-md:text-[30px] font18">1994</h2>
                            </div>
                                                        <div class="center-column">
                                <div class="timeline-dot w-[8px] h-[8px]  max-sm:left-[53%]"></div>
                            </div>
                            <div class="content-column max-sm:pl-[15px] max-sm:w-[39%]">
                                <p class="text-[18px] text-[#333] max-md:text-[12px] leading-[28px] wow fadeInUp fadeIn font14">天地所人均业务收入名列全省第一。</p>
                            </div>
                        </div>
                                            </div>
                                        <div class="timeline-section">
                                                <div class="timeline-event  mb-0">
                                                        <div class="year-column">
                                <h2 class="timeline-year  wow fadeInUp fadeIn swiper-container swiperTop font-bold text-[60px] max-md:text-[30px] font18">1993</h2>
                            </div>
                                                        <div class="center-column">
                                <div class="timeline-dot w-[8px] h-[8px]  max-sm:left-[53%]"></div>
                            </div>
                            <div class="content-column max-sm:pl-[15px] max-sm:w-[39%]">
                                <p class="text-[18px] text-[#333] max-md:text-[12px] leading-[28px] wow fadeInUp fadeIn font14">厦门天地律师事务所成立，是中国第一批获准成立的合伙制律师事务所；建立“助理制度”。</p>
                            </div>
                        </div>
                                            </div>
                                    </div>
            </div>
        </div>
            <!--animate__backInUp-->
                <div id="partner" class="w-full px-[260px] box-border advantMain max-md:px-0 max-md:mx-auto">
            <div class="text-center text-[30px] mb-[60px] font-bold font18">合作伙伴</div>
            <div class="px-[80px] py-[40px] max-md:px-[10px] max-sm:px-0 bg-[#fff] w-[full] grid grid-cols-5 gap-[20px] max-sm:gap-[3px] rounded-[10px]">
                                <img src="/uploads/20250516/0caf2f4096798f89bdc2a2e84587f3ec.png" alt="" class="mx-auto w-[200px] h-[96px] max-md:w-full max-md:h-[58px]">
                                <img src="/uploads/20250516/70ce9b1a65339f3e8c45d43baadbe08c.png" alt="" class="mx-auto w-[200px] h-[96px] max-md:w-full max-md:h-[58px]">
                                <img src="/uploads/20250516/594a860542e9449979d951304dc16606.png" alt="" class="mx-auto w-[200px] h-[96px] max-md:w-full max-md:h-[58px]">
                                <img src="/uploads/20250516/7f1f8e199ff65ec6badfd128ce773f68.png" alt="" class="mx-auto w-[200px] h-[96px] max-md:w-full max-md:h-[58px]">
                                <img src="/uploads/20250516/2e2a2ca0bf9c1f35c553552a14bbb97f.png" alt="" class="mx-auto w-[200px] h-[96px] max-md:w-full max-md:h-[58px]">
                                <img src="/uploads/20250516/58535370e099dc2826c5ba35cbdf9e05.png" alt="" class="mx-auto w-[200px] h-[96px] max-md:w-full max-md:h-[58px]">
                                <img src="/uploads/20250516/4b88dad72cb476c48f580fd60048db8b.png" alt="" class="mx-auto w-[200px] h-[96px] max-md:w-full max-md:h-[58px]">
                                <img src="/uploads/20250516/44015f3b43567f825ca8dd6d9550d4b1.png" alt="" class="mx-auto w-[200px] h-[96px] max-md:w-full max-md:h-[58px]">
                                <img src="/uploads/20250516/c35069ce2aaee81792b417c087309cb6.png" alt="" class="mx-auto w-[200px] h-[96px] max-md:w-full max-md:h-[58px]">
                                <img src="/uploads/20250516/0adc3bc6ad7ba1ad07f90852113504ac.png" alt="" class="mx-auto w-[200px] h-[96px] max-md:w-full max-md:h-[58px]">
                                <img src="/uploads/20250516/19abfffc66e47eaf1c9b215284bbd240.png" alt="" class="mx-auto w-[200px] h-[96px] max-md:w-full max-md:h-[58px]">
                                <img src="/uploads/20250516/cdf7acbcb0f128f64731a8e2c6d8d405.png" alt="" class="mx-auto w-[200px] h-[96px] max-md:w-full max-md:h-[58px]">
                                <img src="/uploads/20250516/7566bd2299606cde960d702893f6e662.png" alt="" class="mx-auto w-[200px] h-[96px] max-md:w-full max-md:h-[58px]">
                                <img src="/uploads/20250516/474baab25673e525fef3ac23b2d81330.png" alt="" class="mx-auto w-[200px] h-[96px] max-md:w-full max-md:h-[58px]">
                                <img src="/uploads/20250516/fdb1f004c1d45d3eead93f8c80e6ba4d.png" alt="" class="mx-auto w-[200px] h-[96px] max-md:w-full max-md:h-[58px]">
                            </div>
        </div>
                
        <!-- 滚动控制器 -->
        <div class="fixed right-10 top-[65vh] z-40 w-[20px] h-[212px] ">
    <!--<div class=" h-[100px] flex flex-col justify-between items-baseline">-->
    <!--    <div class="w-full h-[20px]   relative">-->
    <!--        <img src="../img/icon_003.png" class="absolute z-10 w-[20px] object-cover cursor-pointer peer/draft" alt=""  @mouseenter="data.scrollControIndexIndex = 1" @mouseleave="data.scrollControIndexIndex = -1">-->
    <!--        <div v-show="data.scrollControIndexIndex === 1" class="absolute w-[200px] h-[200px] right-[40px] -top-[110px] bg-slate-400 flex justify-start transition-opacity duration-300 ease-in-out" :class="{'!hidden': data.scrollControIndexIndex !== 1, 'black': data.scrollControIndexIndex === 1}">-->
    <!--            <img src="https://www.tenetlaw.com/uploads/20250519/651f10187341a8d5966d71b7bdd6bfa3.gif" class="w-full object-cover" alt="">-->
    <!--        </div>-->
    <!--    </div>-->
    <!--    <div class="w-full h-[20px]   relative">-->
    <!--        <img src="../img/icon_002.png" class="absolute z-10 w-[20px] object-cover cursor-pointer peer/draft" alt=""  @mouseenter="data.scrollControIndexIndex = 2" @mouseleave="data.scrollControIndexIndex = -1">-->
    <!--        <div v-show="data.scrollControIndexIndex === 2" class="absolute w-[200px] h-[200px] right-[40px] -top-[110px] bg-slate-400 flex justify-start transition-opacity duration-300 ease-in-out" :class="{'!hidden': data.scrollControIndexIndex !== 2, 'black': data.scrollControIndexIndex === 2}">-->
    <!--            <img src="https://www.tenetlaw.com/uploads/20250519/651f10187341a8d5966d71b7bdd6bfa3.gif" class="w-full object-cover" alt="">-->
    <!--        </div>-->
    <!--    </div>-->
    <!--    <div class="w-full h-[20px]  relative" >-->
    <!--        <img src="../img/icon_001.png" class="absolute z-10 w-[20px] object-cover cursor-pointer peer/draft" alt="" @mouseenter="data.scrollControIndexIndex = 3" @mouseleave="data.scrollControIndexIndex = -1">-->
    <!--        <div v-show="data.scrollControIndexIndex === 3" class="absolute  w-[200px] h-[200px] right-[40px] -top-[110px] bg-slate-400 flex justify-start transition-opacity duration-300 ease-in-out" :class="{'!hidden': data.scrollControIndexIndex !== 3, 'black': data.scrollControIndexIndex === 3}">-->
    <!--            <img src="https://www.tenetlaw.com/uploads/20250519/651f10187341a8d5966d71b7bdd6bfa3.gif" class="w-full object-cover" alt="">-->
    <!--        </div>-->
    <!--    </div>-->
    <!--</div>-->
    
   <div class="flex flex-col justify-between items-baseline">
        <div class="w-full h-[20px] mt-1 relative" v-for="(item, index) in data?.scrollParams">
            <img :src="item.icon" class="absolute z-10 w-[20px] object-cover cursor-pointer peer/draft" alt=""  @mouseenter="data.scrollControIndexIndex = index" @mouseleave="data.scrollControIndexIndex = -1">
            <div v-show="data.scrollControIndexIndex === index" class="absolute w-[200px] h-[200px] right-[40px] -top-[110px] bg-slate-400 flex justify-start transition-opacity duration-300 ease-in-out" :class="{'!hidden': data.scrollControIndexIndex !== index, 'black': data.scrollControIndexIndex === index}">
                <img :src="item.img" class="w-full object-cover" alt="">
            </div>
        </div>
    </div>

 

   
    
    
    <div class="w-full h-full mt-4  flex justify-center">
        <div class="rounded-sm w-[4px] h-full bg-gray-600/50 flex justify-center">
            <div class="w-full rounded-sm   bg-gray-600" :style="{'height':data.scrollheight}"></div>

        </div>
       
    </div>
</div>
<script>
    var qrcodes = JSON.parse('[{"id":1,"icon":"https:\/\/www.tenetlaw.com\/uploads\/20250519\/651f10187341a8d5966d71b7bdd6bfa3.gif","img":"https:\/\/www.tenetlaw.com\/uploads\/20250715\/cf91ef71ce0e551e0b0578b253ced78d.jpg"},{"id":2,"icon":"https:\/\/www.tenetlaw.com\/uploads\/20250528\/7e9ed859dbcd29e4bedc62cc0cd41586.png","img":"https:\/\/www.tenetlaw.com\/uploads\/20250716\/cce1f2571fead2c396c51c8f1135fe2b.jpg"},{"id":3,"icon":"https:\/\/www.tenetlaw.com\/uploads\/20250528\/0ce9923a05ff8f1756788437d1962097.png","img":"https:\/\/www.tenetlaw.com\/uploads\/20250716\/e95a4cf1c4bcb718a5e3b0f3f5144b71.jpg"}]');
    window.addEventListener('load', function () {
        app.data.scrollheight = '0%'; 
        app.data.scrollParams = qrcodes;
        window.addEventListener('scroll', function() { 
            const totalHeight = document.documentElement.scrollHeight - window.innerHeight; 
            const scrollPosition = window.pageYOffset || document.documentElement.scrollTop; 
            const scrollPercentage = Math.round((scrollPosition / totalHeight) * 100); 
            app.data.scrollheight = scrollPercentage + '%'; 
        });
    });
</script>
                <link rel="stylesheet" href="/css/footer.css">
<link rel="stylesheet" href="/css/swiper-bundle.min.css">
<style>
   
</style>
<footer class="bg-[url('/img/footer.png')] w-full relative bg-cover">
    <img src="/img/scrollTop.png" alt="" class="absolute right-[120px] top-[-35px] w-[70px]" onclick="scrollToTop()">
    <div class="flex justify-center pt-[45px]">
        <img src="https://www.tenetlaw.com/uploads/20250520/3511cd7b08e4c8112f8ed6b75bdc3d70.png" alt="" class="w-[250px] w150px" style="object-fit:contain">
    </div>
    <div class="w-full py-[60px]">
        <ul class="flex justify-between mx-auto  text-[#000000] opacity-80 text-[18px] w720px font12 py-0 list-none w-[800px] max-md:w-[70%] box-border max-md:pl-0 max-md:text-[20px] flex-wrap max-md:justify-center">
                        <a href="about"><li class="cursor-pointer text-nowrap mx-[5px] max-md:mx-[10px] max-md:mb-[10px]">关于我们</li></a>
                        <a href="field"><li class="cursor-pointer text-nowrap mx-[5px] max-md:mx-[10px] max-md:mb-[10px]">专业领域</li></a>
                        <a href="team"><li class="cursor-pointer text-nowrap mx-[5px] max-md:mx-[10px] max-md:mb-[10px]">律师团队</li></a>
                        <a href="legal"><li class="cursor-pointer text-nowrap mx-[5px] max-md:mx-[10px] max-md:mb-[10px]">研究著作</li></a>
                        <a href="news"><li class="cursor-pointer text-nowrap mx-[5px] max-md:mx-[10px] max-md:mb-[10px]">动态荣誉</li></a>
                        <a href="talent"><li class="cursor-pointer text-nowrap mx-[5px] max-md:mx-[10px] max-md:mb-[10px]">人才招聘</li></a>
                        <a href="contact"><li class="cursor-pointer text-nowrap mx-[5px] max-md:mx-[10px] max-md:mb-[10px]">联系我们</li></a>
                    </ul>
    </div>

    <div class="border-y-[2px] border-[#c1c0c1] border-solid border-x-0 w-full pb-[40px]">
        <div class='px-[100px] max-md:px-[40px]  whitespace-nowrap relative'>
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                                        <div class="swiper-slide text-left w-[300px] w50 md:mr-[50px] cursor-pointer bg-[unset]  box-border max-md:w-full max-md:m-0 max-md:py-[15px] max-md:px-[50px]">
                        <h6 class="text-[18px] text-[#000000] opacity-80 mb-[20px] font14">厦门</h6>
                        <p class="text-[16px] text-[#000000] opacity-70 leading-[23px] text-wrap font12 line10px">地址：厦门市思明区厦禾路666号海翼大厦A幢16、17、25、27楼(361004) </p>
                        <p class="text-[16px] text-[#000000] opacity-70 leading-[23px] font12 line10px">电话：0592-5883666</p>
                        <p class="text-[16px] text-[#000000] opacity-70 leading-[23px] font12 line10px">传真：0592-5881668</p>
                        <p class="text-[16px] text-[#000000] opacity-70 leading-[23px] font12 line10px">邮箱：public@tenetlaw.com</p>
                    </div>
                                        <div class="swiper-slide text-left w-[300px] w50 md:mr-[50px] cursor-pointer bg-[unset]  box-border max-md:w-full max-md:m-0 max-md:py-[15px] max-md:px-[50px]">
                        <h6 class="text-[18px] text-[#000000] opacity-80 mb-[20px] font14">泉州</h6>
                        <p class="text-[16px] text-[#000000] opacity-70 leading-[23px] text-wrap font12 line10px">地址：泉州市浦西万达广场写字楼B座37、39、41层(362000)</p>
                        <p class="text-[16px] text-[#000000] opacity-70 leading-[23px] font12 line10px">电话：0595-22182603、22182703</p>
                        <p class="text-[16px] text-[#000000] opacity-70 leading-[23px] font12 line10px">传真：0595-22189083</p>
                        <p class="text-[16px] text-[#000000] opacity-70 leading-[23px] font12 line10px">邮箱：public@tenetlaw.com</p>
                    </div>
                                        <div class="swiper-slide text-left w-[300px] w50 md:mr-[50px] cursor-pointer bg-[unset]  box-border max-md:w-full max-md:m-0 max-md:py-[15px] max-md:px-[50px]">
                        <h6 class="text-[18px] text-[#000000] opacity-80 mb-[20px] font14">福州</h6>
                        <p class="text-[16px] text-[#000000] opacity-70 leading-[23px] text-wrap font12 line10px">地址：福州市台江区宁化街道振武路70号福晟钱隆广场43层(350004)</p>
                        <p class="text-[16px] text-[#000000] opacity-70 leading-[23px] font12 line10px">电话：0591-83810300</p>
                        <p class="text-[16px] text-[#000000] opacity-70 leading-[23px] font12 line10px">传真：0591-83810301</p>
                        <p class="text-[16px] text-[#000000] opacity-70 leading-[23px] font12 line10px">邮箱：Public@tenetlaw.com</p>
                    </div>
                                        <div class="swiper-slide text-left w-[300px] w50 md:mr-[50px] cursor-pointer bg-[unset]  box-border max-md:w-full max-md:m-0 max-md:py-[15px] max-md:px-[50px]">
                        <h6 class="text-[18px] text-[#000000] opacity-80 mb-[20px] font14">龙岩</h6>
                        <p class="text-[16px] text-[#000000] opacity-70 leading-[23px] text-wrap font12 line10px">地址：龙岩市新罗区华莲路55号紫金大厦13层(364000)</p>
                        <p class="text-[16px] text-[#000000] opacity-70 leading-[23px] font12 line10px">电话：0597-2297688</p>
                        <p class="text-[16px] text-[#000000] opacity-70 leading-[23px] font12 line10px">传真：0597-2230266</p>
                        <p class="text-[16px] text-[#000000] opacity-70 leading-[23px] font12 line10px">邮箱：Public@tenetlaw.com</p>
                    </div>
                                        <div class="swiper-slide text-left w-[300px] w50 md:mr-[50px] cursor-pointer bg-[unset]  box-border max-md:w-full max-md:m-0 max-md:py-[15px] max-md:px-[50px]">
                        <h6 class="text-[18px] text-[#000000] opacity-80 mb-[20px] font14">上海</h6>
                        <p class="text-[16px] text-[#000000] opacity-70 leading-[23px] text-wrap font12 line10px">地址：上海市闵行区虹中路 385号虹桥总部2号3幢501单元(200122)</p>
                        <p class="text-[16px] text-[#000000] opacity-70 leading-[23px] font12 line10px">电话：021-58364666</p>
                        <p class="text-[16px] text-[#000000] opacity-70 leading-[23px] font12 line10px">传真：021-58364666</p>
                        <p class="text-[16px] text-[#000000] opacity-70 leading-[23px] font12 line10px">邮箱：Public@tenetlaw.com</p>
                    </div>
                                        <div class="swiper-slide text-left w-[300px] w50 md:mr-[50px] cursor-pointer bg-[unset]  box-border max-md:w-full max-md:m-0 max-md:py-[15px] max-md:px-[50px]">
                        <h6 class="text-[18px] text-[#000000] opacity-80 mb-[20px] font14">泰国</h6>
                        <p class="text-[16px] text-[#000000] opacity-70 leading-[23px] text-wrap font12 line10px">地址：泰国曼谷廊曼区习甘街区威拍哇丽兰实路威拍哇丽兰实84巷39/83号</p>
                        <p class="text-[16px] text-[#000000] opacity-70 leading-[23px] font12 line10px">电话：0592-5883666</p>
                        <p class="text-[16px] text-[#000000] opacity-70 leading-[23px] font12 line10px">传真：0592-5881668</p>
                        <p class="text-[16px] text-[#000000] opacity-70 leading-[23px] font12 line10px">邮箱：public@tenetlaw.com</p>
                    </div>
                                    </div>
            </div>
                <div class="custom-swiper-button-next">
                    <img src="/img/you.png" alt="Next">
                </div>
                <div class="custom-swiper-button-prev">
                    <img src="/img/you.png" alt="Prev">
                </div>
        </div>
    </div>
    <div class="w-full px-[260px] max-md:px-[30px]  py-[28px] box-border flex justify-between  max-md:text-[12px] max-md:flex-col max-md:justify-center">
        <p class=' text-[#000] opacity-60 max-md:text-center'>
            Copyright @ Tenet & Partners All Rights Reserved.Design by:law-show.com        </p>
        <div class="flex max-md:flex-col max-md:justify-center">
            <p class=' text-[#000] opacity-60 mr-[43px] max-md:text-center'>闽ICP备16000946号</p>
            <a href="statement"><p class=' text-[#000] opacity-60 max-md:text-center'>法律声明</p></a>

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

<script src="/js/swiper-bundle.min.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var swiper = new Swiper(".mySwiper", {
            slidesPerView: 5,
            spaceBetween: 30,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            breakpoints: {
                0: {
                    slidesPerView: 1,
                    spaceBetween: 10,
                },
                480: {
                    slidesPerView: 1,
                    spaceBetween: 30,
                },
                780: {
                    slidesPerView: 2,
                    spaceBetween: 30,
                },
                1024: {
                    slidesPerView: 5,
                    spaceBetween: 30,
                }
            },
            navigation: {
                nextEl: ".custom-swiper-button-next",
                prevEl: ".custom-swiper-button-prev",
            },
             on: {
                init: function() {
                    // 初始化时检查状态
                    if(this.isBeginning) {
                        this.navigation.$prevEl.addClass('swiper-button-disabled');
                    }
                    if(this.isEnd) {
                        this.navigation.$nextEl.addClass('swiper-button-disabled');
                    }
                },
                slideChange: function() {
                    // 在每次slide变化时更新按钮状态
                    if(this.isBeginning) {
                        this.navigation.$prevEl.addClass('swiper-button-disabled');
                    } else {
                        this.navigation.$prevEl.removeClass('swiper-button-disabled');
                    }
                    
                    if(this.isEnd) {
                        this.navigation.$nextEl.addClass('swiper-button-disabled');
                    } else {
                        this.navigation.$nextEl.removeClass('swiper-button-disabled');
                    }
                }
            }
        });
    });

    function scrollToTop() {
        window.scrollTo({
            top: 0,
            behavior: 'smooth' // 平滑滚动
        });
    }
</script>
            </div>

    <script>
            new WOW().init();
            console.log(memoir)
            const app = vueApp.initApp();
            const {ref} = Vue;
            app.data.menuItems = JSON.parse(`[{"id":1,"pid":0,"href":"\/","flag":"index","target":"_self","is_show":0,"is_self":0,"name":"\u9996\u9875"},{"id":6,"pid":0,"href":"about","flag":"about","target":"_self","is_show":1,"is_self":1,"name":"\u5173\u4e8e\u6211\u4eec","submenu":[{"id":13,"pid":6,"href":"about#intro","flag":"intro","target":"_self","is_show":0,"is_self":0,"name":"\u5f8b\u6240\u7b80\u4ecb"},{"id":14,"pid":6,"href":"about#honor","flag":"honor","target":"_self","is_show":0,"is_self":0,"name":"\u5929\u8861\u8363\u8a89"},{"id":15,"pid":6,"href":"about#memoir","flag":"memoir","target":"_self","is_show":0,"is_self":0,"name":"\u5927\u4e8b\u8bb0"},{"id":16,"pid":6,"href":"about#partner","flag":"partner","target":"_self","is_show":0,"is_self":0,"name":"\u5408\u4f5c\u4f19\u4f34"}]},{"id":7,"pid":0,"href":"field","flag":"field","target":"_self","is_show":1,"is_self":0,"name":"\u4e13\u4e1a\u9886\u57df","submenu":[{"id":1,"name":"\u8d44\u672c\u5e02\u573a","href":"field-detail?id=1"},{"id":5,"name":"\u6295\u8d44\u5e76\u8d2d\u4e0e\u516c\u53f8\u6cbb\u7406","href":"field-detail?id=5"},{"id":4,"name":"\u623f\u5730\u4ea7\u4e0e\u5efa\u8bbe\u5de5\u7a0b","href":"field-detail?id=4"},{"id":6,"name":"\u52b3\u52a8\u4eba\u4e8b","href":"field-detail?id=6"},{"id":7,"name":"\u77e5\u8bc6\u4ea7\u6743","href":"field-detail?id=7"},{"id":12,"name":"\u653f\u5e9c\u6cd5\u5f8b\u670d\u52a1","href":"field-detail?id=12"},{"id":14,"name":"\u5211\u4e8b\u4e1a\u52a1","href":"field-detail?id=14"},{"id":15,"name":"\u53cd\u503e\u9500\u53cd\u8865\u8d34\u53cd\u89c4\u907f","href":"field-detail?id=15"},{"id":3,"name":"\u5a5a\u59fb\u5bb6\u4e8b\u4e0e\u8d22\u5bcc\u89c4\u5212","href":"field-detail?id=3"},{"id":36,"name":"\u56fd\u9645\u5546\u4e8b","href":"field-detail?id=36"},{"id":35,"name":"\u4f9b\u5e94\u94fe\u8d38\u6613","href":"field-detail?id=35"},{"id":34,"name":"\u98df\u836f\u5b89\u5168\u6cd5\u5f8b\u4e8b\u52a1","href":"field-detail?id=34"},{"id":32,"name":"\u5f3a\u5236\u6267\u884c\u4e0e\u5f02\u8bae","href":"field-detail?id=32"},{"id":29,"name":"\u7a0e\u52a1\u5408\u89c4\u548c\u7a0e\u52a1\u4e89\u8bae\u89e3\u51b3","href":"field-detail?id=29"},{"id":28,"name":"\u4f01\u4e1a\u5408\u89c4","href":"field-detail?id=28"},{"id":27,"name":"\u7834\u4ea7\u6e05\u7b97\u4e0e\u91cd\u7ec4","href":"field-detail?id=27"},{"id":26,"name":"\u4e92\u8054\u7f51\u4e0e\u6570\u5b57\u7ecf\u6d4e","href":"field-detail?id=26"},{"id":25,"name":"\u8bc9\u8bbc\u4e0e\u4ef2\u88c1","href":"field-detail?id=25"},{"id":24,"name":"\u7279\u6b8a\u8d44\u4ea7\u5904\u7f6e","href":"field-detail?id=24"},{"id":23,"name":"\u533b\u7597\u5927\u5065\u5eb7","href":"field-detail?id=23"},{"id":22,"name":"\u94f6\u884c\u4e0e\u91d1\u878d\u4e1a\u52a1","href":"field-detail?id=22"},{"id":21,"name":"\u5f81\u8fc1\u4e0e\u57ce\u5e02\u66f4\u65b0","href":"field-detail?id=21"},{"id":20,"name":"\u65b0\u5a92\u4f53\u4e0e\u5a31\u4e50\u4ea7\u4e1a","href":"field-detail?id=20"},{"id":19,"name":"\u79c1\u52df\u80a1\u6743\u4e0e\u98ce\u9669\u6295\u8d44","href":"field-detail?id=19"},{"id":16,"name":"\u6d77\u5546\u6d77\u4e8b","href":"field-detail?id=16"}]},{"id":8,"pid":0,"href":"team","flag":"team","target":"_self","is_show":0,"is_self":0,"name":"\u5f8b\u5e08\u56e2\u961f"},{"id":9,"pid":0,"href":"legal","flag":"legal","target":"_self","is_show":0,"is_self":0,"name":"\u7814\u7a76\u8457\u4f5c"},{"id":10,"pid":0,"href":"news","flag":"news","target":"_self","is_show":0,"is_self":0,"name":"\u52a8\u6001\u8363\u8a89"},{"id":11,"pid":0,"href":"talent","flag":"talent","target":"_self","is_show":0,"is_self":0,"name":"\u4eba\u624d\u62db\u8058"},{"id":12,"pid":0,"href":"contact","flag":"contact","target":"_self","is_show":0,"is_self":0,"name":"\u8054\u7cfb\u6211\u4eec"}]`);
            app.data.activeMenu = ref(0);
            app.data.isShowSelectLanguage = ref(false);
            app.data.isOpenNav = ref(false);
            app.data.activityLevel = `About`;

            // window.addEventListener('load', function () {
            //     app.data.scrollheight = '0%';
            //     const timeline = document.getElementById('timeline');
            //     const timelineHeight = timeline.offsetHeight;
            //     function updateTimelineProgress() {
            //         const rect = timeline.getBoundingClientRect();
            //         const windowHeight = window.innerHeight;
            //         // 只有当时间轴出现在视口内时才计算
            //         if (rect.bottom > 0 && rect.top < windowHeight) {
            //             // 计算用户在timeline内的滚动距离
            //             const scrollTop = Math.max(0, windowHeight - rect.top);
            //             const totalScrollable = windowHeight + timelineHeight;
            //             // 计算进度百分比
            //             let percent = (windowHeight - rect.top) / (timelineHeight + windowHeight - windowHeight);
            //             // 更精确的写法如下
            //             const timelineStart = window.pageYOffset + rect.top;
            //             const timelineEnd = timelineStart + timelineHeight - windowHeight;
            //             const currentScroll = window.pageYOffset;
            //             let progress = ((currentScroll - timelineStart) / (timelineEnd - timelineStart)) * 100;
            //             progress = Math.max(0, Math.min(progress, 100));
            //             app.data.scrollheight = progress + '%';
            //         } else {
            //             app.data.scrollheight = '0%';
            //         }
            //     }
            //     updateTimelineProgress();
            //     window.addEventListener('scroll', updateTimelineProgress);
            //     window.addEventListener('resize', updateTimelineProgress);
            // });
            
           // 大事记进度条控制 - 纯JavaScript版本（适用于PHP+HTML页面）

            window.addEventListener('load', function () {
                const timeline = document.getElementById('timeline');
                const progressLine = document.getElementById('progress-line');
                if (!timeline || !progressLine) return;
                // 初始化进度条高度
                progressLine.style.height = '0%';
                function updateTimelineProgress() {
                    const trigger = document.getElementById('timeline-trigger');
                    const rect = trigger.getBoundingClientRect();
                    const timelineHeight = timeline.offsetHeight;
                    const windowHeight = window.innerHeight;
                    
                    // 当大事记区域触碰到页面顶部时就开始计算进度（不需要等标题完全滚过）
                    if (rect.top <= 0) {
                        // 计算大事记区域已经滚过顶部的距离
                        const scrolledDistance = Math.abs(rect.top);
                        // 计算可滚动的总距离
                        const totalScrollableDistance = timelineHeight - windowHeight;
                        // 计算进度百分比
                        let progress = (scrolledDistance / totalScrollableDistance) * 100;
                        progress = Math.max(0, Math.min(progress, 100));
                        progressLine.style.height = progress + '%';
                    } else {
                        // 大事记还没有触碰到顶部，进度为0
                        progressLine.style.height = '0%';
                    }
                }
                
                // 初始化
                updateTimelineProgress();
                
                // 监听滚动事件
                window.addEventListener('scroll', updateTimelineProgress);
                window.addEventListener('resize', updateTimelineProgress);
            });
            
          
    </script>
</body>

</html>