1440

src/views/investor/size375/index.vue

@@ -102,7 +102,7 @@
 
           <div class="w-full px-[158px] mb-[118px]">
             <div
-              class="bg-[#fff] flex w-full text-[72px] pa-[13px] shadow-[0_15px_102px_5px_rgba(0,0,0,0.16)] rounded-[41px]"
+              class="bg-[#fff] flex w-full text-[72px] pa-[6px] shadow-[0_15px_102px_5px_rgba(0,0,0,0.16)] rounded-[41px]"
             >
               <div
                 class="w-4/10 text-[#10263E] font-semibold"
@@ -179,8 +179,7 @@
                   "
                 >
                   <div v-if="!isAnimating">
-                    {{ state.activeYear
+                    {{
-                    }}{{
                       t("investor.financial_data.years.year" + state.activeYear)
                     }}
                   </div>
@@ -304,8 +303,7 @@
                   @click="handleYClick('Annual Report')"
                 >
                   <div>
-                    {{ state.activeYear
+                    {{
-                    }}{{
                       t("investor.financial_data.years.year" + state.activeYear)
                     }}
                   </div>
@@ -316,8 +314,7 @@
                   @click="handleYClick('Annual Meeting')"
                 >
                   <div>
-                    {{ state.activeYear
+                    {{
-                    }}{{
                       t("investor.financial_data.years.year" + state.activeYear)
                     }}
                   </div>
@@ -328,8 +325,7 @@
                   @click="handleYClick('Special Shareholder Meeting')"
                 >
                   <div>
-                    {{ state.activeYear
+                    {{
-                    }}{{
                       t("investor.financial_data.years.year" + state.activeYear)
                     }}
                   </div>
@@ -340,8 +336,7 @@
                   @click="handleYClick('Proxy Statement')"
                 >
                   <div>
-                    {{ state.activeYear
+                    {{
-                    }}{{
                       t("investor.financial_data.years.year" + state.activeYear)
                     }}
                   </div>
@@ -608,7 +603,8 @@ const state = reactive({
       date: t("investor.latest_news.financial.date"),
       link: t("investor.latest_news.financial.link"),
       imgUrl: imageshow1,
-      linkUrl: "https://spaces.hightail.com/receive/RpIYgWf2p0",
+      linkUrl:
+        "https://hello.minim.co/hubfs/docs/MINM-Q4-FY22-Earnings-Results.pdf?__hstc=56173940.2f10611562d9d3c76f0809f1a47d2275.1680104200211.1680104200211.1680104200211.1&__hssc=56173940.1.1680104200211&__hsfp=1592164616&hsLang=en",
     },
     {
       title: t("investor.latest_news.events.title"),
@@ -1275,9 +1271,9 @@ const calcYLinkClass = (type) => {
   will-change: transform, opacity;
 }
 .link-Q {
-  color: #036c85;
+  color: #8b59fa;
 }
 .link-Y {
-  color: #036c85;
+  color: #8b59fa;
 }
 </style>

src/views/investor/size768/index.vue

@@ -46,7 +46,7 @@
             <div>{{ t("investor.latest_news.title") }}</div>
           </div>
           <div
-            class="mt-[140px] mb-[230px] carousel-container px-[80px] py-[40px] z-6"
+            class="mt-[140px] mb-[230px] carousel-container px-[80px] py-[40px] z-8"
             @mouseenter="pauseCarouselAnimation"
             @mouseleave="resumeCarouselAnimation"
             @touchstart="pauseCarouselAnimation"
@@ -59,7 +59,7 @@
                 class="carousel-item"
               >
                 <img class="carousel-image" :src="item.imgUrl" />
-                <div class="carousel-title flex justify-between">
+                <div class="carousel-title flex justify-between z-8">
                   <div>{{ item.title }}</div>
                   <div v-if="item.date" class="text-[#9F9F9F] text-[35px]">
                     {{ item.date }}
@@ -179,8 +179,7 @@
                   "
                 >
                   <div v-if="!isAnimating">
-                    {{ state.activeYear
+                    {{
-                    }}{{
                       t("investor.financial_data.years.year" + state.activeYear)
                     }}
                   </div>
@@ -303,28 +302,44 @@
                   :class="calcYLinkClass('Annual Report')"
                   @click="handleYClick('Annual Report')"
                 >
-                  <div>{{ state.activeYear }}年</div>
+                  <div>
+                    {{
+                      t("investor.financial_data.years.year" + state.activeYear)
+                    }}
+                  </div>
                 </div>
                 <div
                   class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]"
                   :class="calcYLinkClass('Annual Meeting')"
                   @click="handleYClick('Annual Meeting')"
                 >
-                  <div>{{ state.activeYear }}年</div>
+                  <div>
+                    {{
+                      t("investor.financial_data.years.year" + state.activeYear)
+                    }}
+                  </div>
                 </div>
                 <div
                   class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]"
                   :class="calcYLinkClass('Special Shareholder Meeting')"
                   @click="handleYClick('Special Shareholder Meeting')"
                 >
-                  <div>{{ state.activeYear }}年</div>
+                  <div>
+                    {{
+                      t("investor.financial_data.years.year" + state.activeYear)
+                    }}
+                  </div>
                 </div>
                 <div
                   class="bg-[#F8F9FF] ma-[6px] px-[25px] py-[30px]"
                   :class="calcYLinkClass('Proxy Statement')"
                   @click="handleYClick('Proxy Statement')"
                 >
-                  <div>{{ state.activeYear }}年</div>
+                  <div>
+                    {{
+                      t("investor.financial_data.years.year" + state.activeYear)
+                    }}
+                  </div>
                 </div>
               </div>
             </div>
@@ -578,7 +593,8 @@ const state = reactive({
       date: t("investor.latest_news.financial.date"),
       link: t("investor.latest_news.financial.link"),
       imgUrl: imageshow1,
-      linkUrl: "https://spaces.hightail.com/receive/RpIYgWf2p0",
+      linkUrl:
+        "https://hello.minim.co/hubfs/docs/MINM-Q4-FY22-Earnings-Results.pdf?__hstc=56173940.2f10611562d9d3c76f0809f1a47d2275.1680104200211.1680104200211.1680104200211.1&__hssc=56173940.1.1680104200211&__hsfp=1592164616&hsLang=en",
     },
     {
       title: t("investor.latest_news.events.title"),
@@ -1244,9 +1260,9 @@ const calcYLinkClass = (type) => {
   will-change: transform, opacity;
 }
 .link-Q {
-  color: #036c85;
+  color: #8b59fa;
 }
 .link-Y {
-  color: #036c85;
+  color: #8b59fa;
 }
 </style>

src/views/investorhandbook/size1440/index.vue

@@ -1,57 +1,121 @@
 <template>
   <div class="page-container">
-    <n-divider class="divider1" vertical />
+    <header className="header">
-    <n-divider class="divider5" vertical />
+      <div class="logo">
-    <AppHeader />
+        <img src="@/assets/image/logo.png" alt="logo" />
-
+      </div>
-    <main>
+      <div class="tabs">
-      <section className="section-first" style="background: #fff">
         <div
-          class="flex flex-wrap justify-center tracking-[4px] leading-[75px]"
+          class="tab-item"
+          :class="{
+            active: currentTab === 'home',
+          }"
+          @click="handleTabClick('home')"
         >
-          <div class="w-full title mt-[298px] px-[180px] text-center">
+          {{ t("home.nav.home") }}
-            与投资者社区的最低沟通指南
+        </div>
+        <div
+          class="tab-item"
+          :class="{
+            active: currentTab === 'companyprofil',
+          }"
+          @click="handleTabClick('companyprofil')"
+        >
+          {{ t("home.nav.company") }}
+        </div>
+        <div
+          class="tab-item"
+          :class="{
+            active: currentTab === 'businessintroduction',
+          }"
+          @click="handleTabClick('businessintroduction')"
+        >
+          {{ t("home.nav.businessintroduction") }}
+        </div>
+        <div
+          class="tab-item"
+          :class="{
+            active: currentTab === 'investor',
+          }"
+          @click="handleTabClick('investor')"
+        >
+          {{ t("home.nav.investor") }}
+        </div>
+        <div class="tab-item">
+          <n-popselect
+            v-model:value="currentLanguage"
+            :options="languageOptions"
+            @update:value="changeLanguage"
+          >
+            <div class="language-display">
+              {{ currentLanguageLabel }}
+              <span class="language-arrow">▼</span>
+            </div>
+          </n-popselect>
+        </div>
+      </div>
+    </header>
+    <main>
+      <section className="section-first relative" style="background: #fff">
+        <n-divider class="divider1" vertical />
+        <div class="divider2" style=""></div>
+        <div class="divider3" style=""></div>
+        <div class="divider4" style=""></div>
+        <n-divider class="divider5" vertical />
+        <div
+          class="flex flex-wrap justify-center tracking-[4px] leading-[40px]"
+        >
+          <div class="w-full title mt-[108px] px-[400px] text-center">
+            {{ t("investorhandbook.title") }}
           </div>
           <div
-            class="w-full flex flex-wrap px-[188px] text-[#455363] text-[40px] mb-[275px]"
+            class="w-full flex flex-wrap px-[363px] text-[#455363] text-[21px] mb-[275px]"
           >
-            <div class="w-full font-semibold mt-[63px] text-[45px]">
+            <div class="w-full font-semibold mt-[63px] text-[24px]">
               <img
-                class="w-[30px] h-[30px] mr-[4px]"
+                class="w-[16px] h-[16px] mr-[4px]"
                 src="@/assets/image/icon-c.png"
                 alt="logo"
               />
-              授权发言人
+              {{ t("investorhandbook.authorized_speakers.title") }}
             </div>
-            <div class="w-full mt-[50px]">
+            <div class="w-full mt-[27px]">
-              以下Minim代表有权与分析师、股票经纪人、个人和机构股东的投资界进行沟通：
+              {{ t("investorhandbook.authorized_speakers.desc") }}
             </div>
-            <div class="w-full">· 总裁</div>
+            <div class="w-full">
-            <div class="w-full">· 总裁兼首席营销官</div>
+              · {{ t("investorhandbook.authorized_speakers.items.0") }}
-            <div class="w-full">· 首席财务官</div>
+            </div>
-            <div class="w-full">在本指南中，这些代表被称为“授权IR联系人”</div>
+            <div class="w-full">
-            <div class="w-full font-semibold mt-[100px] text-[45px]">
+              · {{ t("investorhandbook.authorized_speakers.items.1") }}
+            </div>
+            <div class="w-full">
+              · {{ t("investorhandbook.authorized_speakers.items.2") }}
+            </div>
+            <div class="w-full">
+              {{ t("investorhandbook.authorized_speakers.note") }}
+            </div>
+            <div class="w-full font-semibold mt-[53px] text-[24px]">
               <img
-                class="w-[30px] h-[30px] mr-[4px]"
+                class="w-[16px] h-[16px] mr-[4px]"
                 src="@/assets/image/icon-c.png"
                 alt="logo"
               />
-              季度末沟通和会议
+              {{ t("investorhandbook.quarterly_communications.title") }}
             </div>
-            <div class="w-full mt-[50px]">
+            <div class="w-full mt-[27px]">
-              1.静默期——公司遵守“静默期”，从季度末日期开始，到收益发布时结束。在此期间，企业管理层将不会与分析师或投资者进行1:1的会面。然而，根据要求，可向投资者提供基于事实的公共信息，并由授权投资者关系联系人进行分析。
+              {{ t("investorhandbook.quarterly_communications.items.0") }}
             </div>
-            <div class="w-full mt-[50px]">
+            <div class="w-full mt-[27px]">
-              2.分析师会议/电话会议——所有讨论季度、年度财务和业务信息的分析师会议或通话应通过互联网或电话会议同时向所有感兴趣的公众广播。会议的适当提前通知和同步广播应通过新闻稿或符合FD条例的其他通信方式进行。
+              {{ t("investorhandbook.quarterly_communications.items.1") }}
             </div>
-            <div class="w-full mt-[50px]">
+            <div class="w-full mt-[27px]">
-              3.收益新闻稿——收益新闻稿将在投资者关系部和首席财务官确定的会议或电话会议开始时或之前，按照适用的美国证券交易委员会和纳斯达克规则，在新闻专线上发布，以8-K表格的形式提供给美国证券交易会，并发布在公司网站上。
+              {{ t("investorhandbook.quarterly_communications.items.2") }}
             </div>
-            <div class="w-full mt-[50px]">
+            <div class="w-full mt-[27px]">
-              4.有关年度首次认购收入和每股收益范围的指导意见，可在收益新闻稿中提供，如有必要，可在每个季度的收益新闻稿上提供对指导意见的修改。一般来说，公司不会在本季度更新本指南或提供额外指南，除非财务副总裁/首席财务官认为有必要，并且只能根据FD条例在公开论坛上提供。
+              {{ t("investorhandbook.quarterly_communications.items.3") }}
             </div>
-            <div class="w-full mt-[50px]">
+            <div class="w-full mt-[27px]">
-              收到媒体、市场专业人士或股东任何询问的Minim代表（授权发言人除外）不得回复此类询问，但应将提问者转介给授权发言人。然而，分配给Minim投资者关系和营销团队的Minim代表可以按照授权发言人不时制定的指导方针，对公开信息的例行询问作出回应。
+              {{ t("investorhandbook.quarterly_communications.note") }}
             </div>
           </div>
         </div>
@@ -62,7 +126,7 @@
         className="flex flex-wrap justify-center"
       >
         <img
-          class="w-[580px] h-[55px] my-[85px]"
+          class="w-[309px] h-[29px] my-[85px]"
           src="@/assets/image/image-footer.png"
           alt="logo"
         />
@@ -72,7 +136,6 @@
 </template>
 
 <script setup>
-import { NDivider } from "naive-ui";
 import {
   onUnmounted,
   ref,
@@ -82,47 +145,189 @@ import {
   watch,
   onBeforeMount,
 } from "vue";
-import AppHeader from "@/components/AppHeader/index.vue";
+import { NDivider, NPopselect, NGrid, NGi, NButton } from "naive-ui";
+import { useTransitionComposable } from "@/composables/transition-composable";
 import { useHome } from "@/store/home/index.js";
-
+import { useLanguage } from "@/utils/changeLanguage.js";
 import { useRoute, useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
-const { t } = useI18n();
 
+const { currentTab } = useHome();
+const router = useRouter();
+const { transitionState } = useTransitionComposable();
+const main = ref();
+let ctx;
+const {
+  languageOptions,
+  currentLanguage,
+  currentLanguageLabel,
+  changeLanguage,
+  initLanguage,
+  currentLang,
+  currentBannerImages,
+  t,
+} = useLanguage();
+const handleTabClick = (tab) => {
+  currentTab.value = tab;
+  router.push("/" + tab);
+};
 onBeforeMount(() => {});
 onMounted(() => {});
 onUnmounted(() => {});
 </script>
 
 <style scoped lang="scss">
-.page-container {
+.header {
   width: 100%;
-  overflow-x: hidden;
+  height: 65px;
-  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  position: fixed;
+  z-index: 10;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 0 10rem;
+  padding-bottom: 10px;
 }
 
-.title {
+.logo {
-  font-size: 85px;
+  img {
-  font-weight: 600;
+    width: 108px;
-  line-height: 110px;
+    height: 33px;
-  color: #10253e;
+  }
 }
 
+.tabs {
+  display: flex;
+  gap: 32px;
+  margin-right: 32px;
+}
+
+.tab-item {
+  font-size: 16px;
+  color: #000000;
+  cursor: pointer;
+  transition: color 0.3s ease;
+  padding: 4px 8px;
+
+  &.active {
+    color: #8b59fa;
+  }
+
+  &:hover {
+    color: #8b59fa;
+  }
+}
+
+.head {
+  width: 100%;
+  background-color: #f8f9ff;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    image-rendering: -webkit-optimize-contrast;
+    image-rendering: crisp-edges;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
 .divider1 {
   position: absolute;
   z-index: 3;
-  background-color: rgba(230, 234, 238, 0.5) !important;
+  left: 482px;
-  left: 116px;
+  width: 2px;
-  width: 1px;
   height: 100%;
+  background-color: rgba(230, 234, 238, 0.5) !important;
+}
+
+.divider2 {
+  position: absolute;
+  z-index: 3;
+  left: 720px;
+  width: 2px;
+  height: 100%;
+  background-image: linear-gradient(
+    to bottom,
+    rgb(150 165 181 / 50%),
+    transparent 50%
+  );
+  background-size: 1px 12px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
+  background-repeat: repeat-y;
+}
+
+.divider3 {
+  position: absolute;
+  z-index: 3;
+  left: 952px;
+  width: 2px;
+  height: 100%;
+  background-image: linear-gradient(
+    to bottom,
+    rgb(150 165 181 / 50%),
+    transparent 50%
+  );
+  background-size: 1px 12px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
+  background-repeat: repeat-y;
+}
+
+.divider4 {
+  position: absolute;
+  z-index: 3;
+  left: 1182px;
+  width: 2px;
+  height: 100%;
+  background-image: linear-gradient(
+    to bottom,
+    rgb(150 165 181 / 50%),
+    transparent 50%
+  );
+  background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
+  background-repeat: repeat-y;
 }
 
 .divider5 {
   position: absolute;
   z-index: 3;
-  background-color: rgba(230, 234, 238, 0.5) !important;
+  left: 1406px;
-  right: 116px;
+  width: 2px;
-  width: 1px;
   height: 100%;
+  background-color: rgba(230, 234, 238, 0.5) !important;
+}
+.footer-content {
+  height: 90px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .copyright {
+    width: 232px;
+    height: 22pxpx;
+  }
+}
+
+.page-container {
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+.title {
+  font-size: 53px;
+  font-weight: 600;
+  line-height: 110px;
+  color: #10253e;
+}
+
+.page-container {
+  width: 100%;
+  overflow-x: hidden;
+  position: relative;
 }
 </style>

src/views/investorhandbook/size1920/index.vue

@@ -1,50 +1,52 @@
 <template>
   <div class="page-container">
-    <n-divider class="divider1" vertical />
-    
-    <div class="divider3" style=""></div>
-      
-    <n-divider class="divider5" vertical />
- 
     <header className="header">
       <div class="logo">
         <img src="@/assets/image/logo.png" alt="logo" />
       </div>
       <div class="tabs">
-        <div class="tab-item" :class="{
+        <div
-          active: currentTab === 'home',
+          class="tab-item"
-        }" @click="handleTabClick('home')">
+          :class="{
+            active: currentTab === 'home',
+          }"
+          @click="handleTabClick('home')"
+        >
           {{ t("home.nav.home") }}
         </div>
-        <div class="tab-item" :class="{
+        <div
-          active:
+          class="tab-item"
-            currentTab ===
+          :class="{
-            'companyprofil',
+            active: currentTab === 'companyprofil',
-        }" @click="
+          }"
-          handleTabClick(
+          @click="handleTabClick('companyprofil')"
-            'companyprofil'
+        >
-          )
-          ">
           {{ t("home.nav.company") }}
         </div>
-        <div class="tab-item" :class="{
+        <div
-          active:
+          class="tab-item"
-            currentTab === 'businessintroduction',
+          :class="{
-        }" @click="
+            active: currentTab === 'businessintroduction',
-          handleTabClick('businessintroduction')
+          }"
-          ">
+          @click="handleTabClick('businessintroduction')"
+        >
           {{ t("home.nav.businessintroduction") }}
         </div>
-        <div class="tab-item" :class="{
+        <div
-          active:
+          class="tab-item"
-            currentTab === 'investor',
+          :class="{
-        }" @click="
+            active: currentTab === 'investor',
-          handleTabClick('investor')
+          }"
-          ">
+          @click="handleTabClick('investor')"
+        >
           {{ t("home.nav.investor") }}
         </div>
         <div class="tab-item">
-          <n-popselect v-model:value="currentLanguage" :options="languageOptions" @update:value="changeLanguage">
+          <n-popselect
+            v-model:value="currentLanguage"
+            :options="languageOptions"
+            @update:value="changeLanguage"
+          >
             <div class="language-display">
               {{ currentLanguageLabel }}
               <span class="language-arrow">▼</span>
@@ -54,12 +56,15 @@
       </div>
     </header>
     <main>
-      <section className="section-first" style="background: #fff">
+      <section className="section-first relative" style="background: #fff">
-    
+        <n-divider class="divider1" vertical />
+        <div class="divider2" style=""></div>
+        <div class="divider3" style=""></div>
+        <div class="divider4" style=""></div>
+        <n-divider class="divider5" vertical />
         <div
           class="flex flex-wrap justify-center tracking-[4px] leading-[40px]"
         >
-     
           <div class="w-full title mt-[108px] px-[180px] text-center">
             {{ t("investorhandbook.title") }}
           </div>
@@ -77,10 +82,18 @@
             <div class="w-full mt-[27px]">
               {{ t("investorhandbook.authorized_speakers.desc") }}
             </div>
-            <div class="w-full">· {{ t("investorhandbook.authorized_speakers.items.0") }}</div>
+            <div class="w-full">
-            <div class="w-full">· {{ t("investorhandbook.authorized_speakers.items.1") }}</div>
+              · {{ t("investorhandbook.authorized_speakers.items.0") }}
-            <div class="w-full">· {{ t("investorhandbook.authorized_speakers.items.2") }}</div>
+            </div>
-            <div class="w-full">{{ t("investorhandbook.authorized_speakers.note") }}</div>
+            <div class="w-full">
+              · {{ t("investorhandbook.authorized_speakers.items.1") }}
+            </div>
+            <div class="w-full">
+              · {{ t("investorhandbook.authorized_speakers.items.2") }}
+            </div>
+            <div class="w-full">
+              {{ t("investorhandbook.authorized_speakers.note") }}
+            </div>
             <div class="w-full font-semibold mt-[53px] text-[24px]">
               <img
                 class="w-[16px] h-[16px] mr-[4px]"
@@ -123,7 +136,6 @@
 </template>
 
 <script setup>
-
 import {
   onUnmounted,
   ref,
@@ -142,8 +154,7 @@ import { useI18n } from "vue-i18n";
 
 const { currentTab } = useHome();
 const router = useRouter();
-const { transitionState } =
+const { transitionState } = useTransitionComposable();
-  useTransitionComposable();
 const main = ref();
 let ctx;
 const {
@@ -154,7 +165,7 @@ const {
   initLanguage,
   currentLang,
   currentBannerImages,
-  t
+  t,
 } = useLanguage();
 const handleTabClick = (tab) => {
   currentTab.value = tab;
@@ -239,61 +250,72 @@ onUnmounted(() => {});
   line-height: 110px;
   color: #10253e;
 }
+
 .divider1 {
   position: absolute;
- 
+  z-index: 3;
-  left: 477px;
+  left: 482px;
   width: 1px;
   height: 100%;
-
+  background-color: rgba(230, 234, 238, 0.5) !important;
 }
 
 .divider2 {
   position: absolute;
- 
+  z-index: 3;
-  left: 715px;
+  left: 720px;
   width: 1px;
   height: 100%;
-  background-image: linear-gradient(to bottom, #E6EAEE 50%, transparent 50%);
+  background-image: linear-gradient(
-  background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
+    to bottom,
+    rgb(150 165 181 / 50%),
+    transparent 50%
+  );
+  background-size: 1px 12px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
   background-repeat: repeat-y;
 }
 
 .divider3 {
   position: absolute;
- 
+  z-index: 3;
-  left: 950px;
+  left: 952px;
   width: 1px;
   height: 100%;
-  background-image: linear-gradient(to bottom, #E6EAEE 50%, transparent 50%);
+  background-image: linear-gradient(
-  background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
+    to bottom,
+    rgb(150 165 181 / 50%),
+    transparent 50%
+  );
+  background-size: 1px 12px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
   background-repeat: repeat-y;
 }
 
 .divider4 {
   position: absolute;
- 
+  z-index: 3;
-  left: 1186px;
+  left: 1182px;
   width: 1px;
   height: 100%;
-  background-image: linear-gradient(to bottom, #E6EAEE 50%, transparent 50%);
+  background-image: linear-gradient(
+    to bottom,
+    rgb(150 165 181 / 50%),
+    transparent 50%
+  );
   background-size: 1px 15px; // 第一个值是宽度，第二个值是虚线的总长度（实线+空白）
   background-repeat: repeat-y;
 }
 
 .divider5 {
   position: absolute;
- 
+  z-index: 3;
-  left: 1410px;
+  left: 1406px;
   width: 1px;
   height: 100%;
+  background-color: rgba(230, 234, 238, 0.5) !important;
 }
 .page-container {
   width: 100%;
   overflow-x: hidden;
   position: relative;
 }
-
-
-
 </style>