officialblock 1.0.7 → 1.0.9

package/src/components/ScrollKeyInfo/index.vue

@@ -0,0 +1,1345 @@
+<template>
+  <div
+    style="margin-top: 30px; margin-bottom: 30px"
+    class="scroll-key-info-container"
+    :style="{ backgroundColor: modelValue?.bgColor }"
+    @mouseenter="isHover = true"
+    @mouseleave="isHover = false"
+  >
+    <div class="scroll-key-info">
+      <div class="scroll-key-info__wrapper">
+        <!-- PC端 -->
+        <transition name="fade" mode="out-in">
+          <div
+            class="pc_wrap"
+            :key="activeNum"
+            :style="{
+              position: 'relative',
+              height: '100%',
+              backgroundPosition: '50%',
+              backgroundSize: 'cover',
+              backgroundRepeat: 'no-repeat',
+              backgroundImage:
+                'linear-gradient(180deg, hsla(0, 0%, 100%, 0) 78.25%, #edeef1 83.46%),url(' +
+                modelValue?.list[activeNum].image +
+                ')',
+            }"
+          >
+            <div class="middle_content_box">
+              <div class="content_wrap">
+                <div class="left_content">
+                  <h5 class="title">{{ modelValue?.list[activeNum].name }}</h5>
+                  <div class="lable">
+                    {{ modelValue?.list[activeNum].label }}
+                  </div>
+                </div>
+                <div class="right_content">
+                  <p class="top_content">
+                    <strong class="content">
+                      {{ modelValue?.list[activeNum].content }}
+                    </strong>
+                  </p>
+                  <div class="bottom_content">
+                    <div
+                      class="bottom_item"
+                      v-for="i in modelValue?.list[activeNum].links"
+                      :key="i"
+                    >
+                      <span>{{ i.text }}</span>
+                      <span class="circle-link__icon"></span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div></div
+        ></transition>
+        <!-- 中间tab -->
+        <div class="scroll-key-info__step-bar d-none d-md-block">
+          <div class="step-bar__wrapper container-content">
+            <ul class="step-bar__list">
+              <!-- <li class="step-bar__item">
+                <div class="step-bar__item__text">name111===</div>
+              </li>
+              <li class="step-bar__item">
+                <div class="step-bar__item__text">name2222===</div>
+              </li>
+              <li class="step-bar__item is-active">
+                <div class="step-bar__item__text">name3333===</div>
+              </li> -->
+              <li
+                @click="handleActive(index)"
+                class="step-bar__item"
+                v-for="(item, index) in modelValue?.list"
+                :class="[activeNum === index ? 'is-active' : '']"
+              >
+                <div class="step-bar__item__text">{{ item.name }}===</div>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <!-- 手机端 -->
+
+        <div
+          style="border: 1px solid blue"
+          class="scroll-key-info__tab d-md-none"
+        >
+          <div class="tab-primary is-campus">
+            <ul class="tab-primary__list">
+              <div class="tab-primary__nav__prev" style="display: none"></div>
+              <li class="tab-primary__item">
+                <div class="flex-center">
+                  <button type="button" class="tab-primary__btn">
+                    <div>name111</div>
+                  </button>
+                </div>
+              </li>
+              <li class="tab-primary__item">
+                <div class="flex-center">
+                  <button type="button" class="tab-primary__btn">
+                    <div>name2222</div>
+                  </button>
+                </div>
+              </li>
+              <li class="tab-primary__item">
+                <div class="flex-center">
+                  <button type="button" class="tab-primary__btn is-active">
+                    <div>name3333</div>
+                  </button>
+                </div>
+              </li>
+              <div class="tab-primary__nav__next" style="display: "></div>
+            </ul>
+            <span
+              class="tab-primary__strip"
+              style="
+                --strip-width: 0px;
+                --strip-left: 0px;
+                --fix-left: 0px;
+                transition: left 0.2s ease-in-out, width 0.2s ease-in-out;
+              "
+            ></span>
+          </div>
+          <div
+            class="scroll-key-info__tab__content container-content bg-neutral-light py-10"
+          >
+            <div class="tab__content__card">
+              <h5 class="text-blue-dark">title33</h5>
+              <div class="tx-body-p text-teal-dark mt-1">lanbel3333</div>
+              <div class="tab__content__card__content mt-3">
+                <p><strong>cointnnrer</strong></p>
+              </div>
+              <div class="tab__content__card__link mt-6">
+                <div class="circle-link">
+                  <a href="/" class="nuxt-link-active">
+                    <div>1112223333</div>
+                    <span class="circle-link__icon"></span
+                  ></a>
+                </div>
+                <div class="circle-link">
+                  <a href="https://www.baidu.com" target="_blank">
+                    <div>344444444</div>
+                    <span class="circle-link__icon"></span
+                  ></a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="scroll-key-info__content">
+        <div></div>
+      </div>
+    </div>
+    <Operate
+      v-if="!modelValue?.readOnly"
+      v-model:show="isHover"
+      @handle-edit="showSetting = true"
+      @handle-delete="handleDelete"
+      @handle-copy="handleCopy"
+    ></Operate>
+    <!-- </a-row> -->
+  </div>
+
+  <Setting v-model:show="showSetting" :data="modelValue"></Setting>
+</template>
+
+<script lang="ts" setup>
+import { computed, nextTick, ref } from "vue";
+import { randomString } from "@/utils/common";
+import Setting from "./setting.vue";
+import Operate from "@/components/Operate/index.vue";
+
+// 定义组件名称
+defineOptions({
+  name: "CountDown",
+});
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: () => {},
+  },
+
+  // 是否预览
+  isPreview: {
+    type: Boolean,
+    default: false,
+  },
+});
+console.log("!!!!", props.modelValue);
+const emit = defineEmits(["update:modelValue", "handleDelete", "handleCopy"]);
+
+const isHover = ref<boolean>(false);
+const showSetting = ref<boolean>(false);
+const activeNum = ref<number>(0);
+
+const handleDelete = () => {
+  emit("handleDelete", props.modelValue.id);
+};
+
+const handleCopy = () => {
+  emit("handleCopy", props.modelValue);
+};
+
+const handleInit = () => {
+  if (props.modelValue && props.modelValue.data) return; // 有数据不用初始化
+  const data = {
+    id: props.modelValue?.id || randomString(),
+    type: "CountDown",
+    readOnly: props.modelValue?.readOnly || false,
+    list: [
+      {
+        name: "name111",
+        title: "title111",
+        image:
+          "https://osswebsite-test.cedim.cn/media-library/ywies-tx/pdf/TX%20Brochure%20Cover.png",
+        label: "label1111",
+        content: "content111",
+        links: [
+          {
+            text: "text111",
+            linkType: "type1111",
+            url: "https://www.baidu.com",
+          },
+          {
+            text: "text2222",
+            linkType: "type12222",
+            url: "https://www.baidu.com",
+          },
+        ],
+      },
+      {
+        name: "name2222222",
+        title: "title22222",
+        image:
+          "https://osswebsite-test.cedim.cn/media-library/ywies-tx/pdf/TX%20Brochure%20Cover.png",
+        label: "label2222",
+        content: "content111",
+        links: [
+          {
+            text: "text111",
+            linkType: "type1111",
+            url: "https://www.baidu.com",
+          },
+          {
+            text: "text2222",
+            linkType: "type12222",
+            url: "https://www.baidu.com",
+          },
+        ],
+      },
+      {
+        name: "name33333333",
+        title: "title333333",
+        image:
+          "https://osswebsite-test.cedim.cn/media-library/ywies-tx/pdf/TX%20Brochure%20Cover.png",
+        label: "label2222",
+        content: "content111",
+        links: [
+          {
+            text: "text111",
+            linkType: "type1111",
+            url: "https://www.baidu.com",
+          },
+          {
+            text: "text2222",
+            linkType: "type12222",
+            url: "https://www.baidu.com",
+          },
+        ],
+      },
+    ],
+  };
+  emit("update:modelValue", data);
+};
+
+const handleActive = (index: number) => {
+  activeNum.value = index;
+};
+
+handleInit();
+</script>
+
+<style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0.5;
+}
+
+.circle-link__icon {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  overflow: hidden;
+  background-color: #172386;
+  position: relative;
+  margin-left: 7px;
+  flex-shrink: 0;
+  display: inline-block;
+  &::before {
+    content: "";
+    width: 6px;
+    height: 9px;
+    position: absolute;
+    top: 50%;
+    left: 55%;
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNiA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC4yMzUxOTYgNy42MjA3OUwzLjM2MDE4IDQuNDk1OEwwLjIzNTE5NiAxLjM3MDgyQzAuMTYwNjMgMS4yOTYyNSAwLjEwMTQ4MSAxLjIwNzczIDAuMDYxMTI1OSAxLjExMDMxQzAuMDIwNzcxIDEuMDEyODggMS41NzEzN2UtMDkgMC45MDg0NiAwIDAuODAzMDA4Qy0xLjU3MTM2ZS0wOSAwLjY5NzU1NSAwLjAyMDc3MSAwLjU5MzEzNSAwLjA2MTEyNTkgMC40OTU3MUMwLjEwMTQ4MSAwLjM5ODI4NSAwLjE2MDYzIDAuMzA5NzYyIDAuMjM1MTk2IDAuMjM1MTk1QzAuMzA5NzYyIDAuMTYwNjI5IDAuMzk4Mjg1IDAuMTAxNDggMC40OTU3MSAwLjA2MTEyNTFDMC41OTMxMzYgMC4wMjA3NzAyIDAuNjk3NTU2IC0xLjU3MTM3ZS0wOSAwLjgwMzAwOCAwQzAuOTA4NDYxIDEuNTcxMzdlLTA5IDEuMDEyODggMC4wMjA3NzAyIDEuMTEwMzEgMC4wNjExMjUxQzEuMjA3NzMgMC4xMDE0OCAxLjI5NjI1IDAuMTYwNjI5IDEuMzcwODIgMC4yMzUxOTVMNS4wNjc2NCAzLjkzMjAyQzUuMzgxNzUgNC4yNDYxMyA1LjM4MTc1IDQuNzUzNTMgNS4wNjc2NCA1LjA2NzY0TDEuMzcwODIgOC43NjQ0NkMxLjI5NjMxIDguODM5MTMgMS4yMDc4IDguODk4MzYgMS4xMTAzNyA4LjkzODc4QzEuMDEyOTQgOC45NzkyIDAuOTA4NDkxIDkgMC44MDMwMDggOUMwLjY5NzUyNSA5IDAuNTkzMDc4IDguOTc5MiAwLjQ5NTY0NSA4LjkzODc4QzAuMzk4MjEyIDguODk4MzYgMC4zMDk3MDcgOC44MzkxMyAwLjIzNTE5NiA4Ljc2NDQ2Qy0wLjA3MDg1OTEgOC40NTAzNSAtMC4wNzg5MTMyIDcuOTM0ODkgMC4yMzUxOTYgNy42MjA3OVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=);
+    background-position: 50%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-color: hsla(0, 0%, 100%, 0);
+    transform: translate(-260%, -50%);
+    transition: transform 0.3s ease-in-out;
+  }
+  &::after {
+    content: "";
+    width: 6px;
+    height: 9px;
+    position: absolute;
+    top: 50%;
+    left: 55%;
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNiA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC4yMzUxOTYgNy42MjA3OUwzLjM2MDE4IDQuNDk1OEwwLjIzNTE5NiAxLjM3MDgyQzAuMTYwNjMgMS4yOTYyNSAwLjEwMTQ4MSAxLjIwNzczIDAuMDYxMTI1OSAxLjExMDMxQzAuMDIwNzcxIDEuMDEyODggMS41NzEzN2UtMDkgMC45MDg0NiAwIDAuODAzMDA4Qy0xLjU3MTM2ZS0wOSAwLjY5NzU1NSAwLjAyMDc3MSAwLjU5MzEzNSAwLjA2MTEyNTkgMC40OTU3MUMwLjEwMTQ4MSAwLjM5ODI4NSAwLjE2MDYzIDAuMzA5NzYyIDAuMjM1MTk2IDAuMjM1MTk1QzAuMzA5NzYyIDAuMTYwNjI5IDAuMzk4Mjg1IDAuMTAxNDggMC40OTU3MSAwLjA2MTEyNTFDMC41OTMxMzYgMC4wMjA3NzAyIDAuNjk3NTU2IC0xLjU3MTM3ZS0wOSAwLjgwMzAwOCAwQzAuOTA4NDYxIDEuNTcxMzdlLTA5IDEuMDEyODggMC4wMjA3NzAyIDEuMTEwMzEgMC4wNjExMjUxQzEuMjA3NzMgMC4xMDE0OCAxLjI5NjI1IDAuMTYwNjI5IDEuMzcwODIgMC4yMzUxOTVMNS4wNjc2NCAzLjkzMjAyQzUuMzgxNzUgNC4yNDYxMyA1LjM4MTc1IDQuNzUzNTMgNS4wNjc2NCA1LjA2NzY0TDEuMzcwODIgOC43NjQ0NkMxLjI5NjMxIDguODM5MTMgMS4yMDc4IDguODk4MzYgMS4xMTAzNyA4LjkzODc4QzEuMDEyOTQgOC45NzkyIDAuOTA4NDkxIDkgMC44MDMwMDggOUMwLjY5NzUyNSA5IDAuNTkzMDc4IDguOTc5MiAwLjQ5NTY0NSA4LjkzODc4QzAuMzk4MjEyIDguODk4MzYgMC4zMDk3MDcgOC44MzkxMyAwLjIzNTE5NiA4Ljc2NDQ2Qy0wLjA3MDg1OTEgOC40NTAzNSAtMC4wNzg5MTMyIDcuOTM0ODkgMC4yMzUxOTYgNy42MjA3OVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=);
+    background-position: 50%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-color: hsla(0, 0%, 100%, 0);
+    transform: translate(-50%, -50%);
+    transition: transform 0.3s ease-in-out;
+  }
+}
+.middle_content_box {
+  --max-width: 952px;
+  padding-left: 36px;
+  padding-right: 36px;
+  margin: 0 auto;
+  max-width: calc(var(--max-width) + 72px);
+  .content_wrap {
+    position: relative;
+    background: hsla(0, 0%, 100%, 0.75);
+    padding: 14px 10px 14px 37px;
+    border-radius: 0 0 8px 8px;
+    display: flex;
+    .left_content {
+      margin-right: 36px !important;
+      .title {
+        color: var(--text-color--primary, #0032a0) !important;
+      }
+      .lable {
+        margin-top: 4px !important;
+        color: rgba(var(--bs-teal-dark-rgb), var(--bs-text-opacity)) !important;
+      }
+    }
+    .right_content {
+      .top_content {
+        margin-bottom: 12px;
+        .content {
+          color: #1a1c20;
+        }
+      }
+      .bottom_content {
+        display: flex;
+
+        .bottom_item {
+          text-align: center;
+          display: flex;
+          align-items: center;
+          margin-right: 24px;
+          cursor: pointer;
+          &:hover {
+            .circle-link__icon {
+              &::before {
+                transform: translate(-50%, -50%) !important;
+              }
+              &::after {
+                transform: translate(150%, -50%) !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.red_border {
+  border: 1px solid red;
+}
+.scroll-key-info-container {
+  position: relative;
+}
+.scroll-key-info__wrapper {
+  height: 439px;
+  position: relative;
+}
+.pc_wrap {
+  width: 100%;
+  height: 439px;
+}
+
+@media (max-width: 767.98px) {
+  .scroll-key-info__wrapper {
+    height: auto;
+    min-height: 188px;
+  }
+}
+
+.scroll-key-info .swiper .swiper-wrapper .swiper-slide {
+  height: 439px;
+}
+
+@media (max-width: 767.98px) {
+  .scroll-key-info .swiper .swiper-wrapper .swiper-slide {
+    height: 188px;
+  }
+}
+
+.scroll-key-info .swiper .swiper-wrapper .swiper-slide .slide-body {
+  position: relative;
+  height: 100%;
+  background-position: 50%;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-image: linear-gradient(
+      180deg,
+      hsla(0, 0%, 100%, 0) 78.25%,
+      #edeef1 83.46%
+    ),
+    var(--bg-image);
+}
+
+@media (max-width: 767.98px) {
+  .scroll-key-info .swiper .swiper-wrapper .swiper-slide .slide-body {
+    background-image: linear-gradient(
+        180deg,
+        hsla(0, 0%, 100%, 0) 83.33%,
+        #edeef1 92.71%
+      ),
+      var(--bg-image);
+  }
+}
+
+.scroll-key-info .swiper .swiper-wrapper .swiper-slide .slide-body__content {
+  position: relative;
+  background: hsla(0, 0%, 100%, 0.75);
+  padding: 14px 10px 14px 37px;
+  border-radius: 0 0 8px 8px;
+}
+
+.scroll-key-info
+  .swiper
+  .swiper-wrapper
+  .swiper-slide
+  .slide-body__content__content {
+  color: #1a1c20;
+}
+
+.scroll-key-info
+  .swiper
+  .swiper-wrapper
+  .swiper-slide
+  .slide-body__content__content
+  > p {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.75;
+  color: #1a1c20;
+}
+
+@media (max-width: 1023.98px) {
+  .scroll-key-info
+    .swiper
+    .swiper-wrapper
+    .swiper-slide
+    .slide-body__content__content
+    > p {
+    font-size: 14px;
+    line-height: 1.714;
+    letter-spacing: 0.01em;
+  }
+}
+
+.scroll-key-info
+  .swiper
+  .swiper-wrapper
+  .swiper-slide
+  .slide-body__content__content
+  > p
+  > b,
+.scroll-key-info
+  .swiper
+  .swiper-wrapper
+  .swiper-slide
+  .slide-body__content__content
+  > p
+  > strong {
+  font-weight: 700;
+}
+
+.scroll-key-info
+  .swiper
+  .swiper-wrapper
+  .swiper-slide
+  .slide-body__content__link {
+  display: flex;
+  align-items: center;
+}
+
+.scroll-key-info
+  .swiper
+  .swiper-wrapper
+  .swiper-slide
+  .slide-body__content__link
+  > :not(:first-child) {
+  margin-left: 24px;
+}
+
+.scroll-key-info__step-bar {
+  position: absolute;
+  bottom: 25.52px;
+  z-index: 1;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.scroll-key-info__step-bar .step-bar__list {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+}
+
+.scroll-key-info__step-bar .step-bar__list .step-bar__item {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: #0032a0;
+  opacity: 0.4;
+  cursor: pointer;
+  transition: color 0.3s ease-in-out;
+}
+
+.scroll-key-info__step-bar .step-bar__list .step-bar__item.is-active {
+  opacity: 1;
+}
+
+.scroll-key-info__step-bar .step-bar__list .step-bar__item:not(:first-child) {
+  padding-left: 12px;
+}
+
+.scroll-key-info__step-bar
+  .step-bar__list
+  .step-bar__item:not(:first-child):before {
+  content: "";
+  width: 20px;
+  height: 2px;
+  flex-shrink: 0;
+  background-color: #1531b2;
+  margin-right: 10px;
+  margin-bottom: 4px;
+  transition: width 0.3s ease-in-out, margin-right 0.3s ease-in-out;
+}
+
+.scroll-key-info__step-bar
+  .step-bar__list
+  .step-bar__item:not(:first-child).is-active:before {
+  width: 24px;
+  height: 24px;
+  background-color: transparent;
+  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkgNkwxNSAxMkw5IDE4IiBzdHJva2U9IiMwMDFFNjAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)
+    50% no-repeat;
+  background-size: 100% auto;
+  margin-right: 5px;
+}
+
+.scroll-key-info__step-bar .step-bar__list .step-bar__item__text {
+  display: flex;
+  flex-direction: column;
+  --text-color: #0032a0;
+  color: #0032a0;
+  color: var(--text-color, #0032a0);
+}
+
+.scroll-key-info__step-bar .step-bar__list .step-bar__item__text:after {
+  content: "";
+  width: 100%;
+  height: 1px;
+  margin-top: 4px;
+  border-radius: 1px;
+  background-color: #0032a0;
+  background-color: var(--text-color, #0032a0);
+  transform: scaleX(0);
+  transition: all 0.15s ease-in;
+}
+
+.scroll-key-info__step-bar
+  .step-bar__list
+  .step-bar__item:hover
+  .step-bar__item__text:after {
+  transform: scaleX(1);
+}
+
+.scroll-key-info__tab__content .fade-enter-active,
+.scroll-key-info__tab__content .fade-leave-active {
+  transition: opacity 0.25s ease-out;
+}
+
+.scroll-key-info__tab__content .fade-enter,
+.scroll-key-info__tab__content .fade-leave-to {
+  opacity: 0;
+}
+
+.scroll-key-info__tab__content .fade-enter-to,
+.scroll-key-info__tab__content .fade-leave {
+  opacity: 1;
+}
+
+.scroll-key-info__tab__content .tab__content__card__content {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.75;
+  color: #000;
+}
+
+@media (max-width: 1023.98px) {
+  .scroll-key-info__tab__content .tab__content__card__content {
+    font-size: 14px;
+    line-height: 1.714;
+    letter-spacing: 0.01em;
+  }
+}
+
+.scroll-key-info__tab__content .tab__content__card__content p {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.75;
+  color: #000;
+}
+
+@media (max-width: 1023.98px) {
+  .scroll-key-info__tab__content .tab__content__card__content p {
+    font-size: 14px;
+    line-height: 1.714;
+    letter-spacing: 0.01em;
+  }
+}
+
+.scroll-key-info__tab__content .tab__content__card__content b,
+.scroll-key-info__tab__content .tab__content__card__content strong {
+  font-weight: 700;
+}
+
+.scroll-key-info__tab__content .tab__content__card__link {
+  display: flex;
+  align-items: center;
+}
+
+.scroll-key-info__tab__content .tab__content__card__link > :not(:first-child) {
+  margin-left: 16px;
+}
+
+.scroll-key-info__content .fade-enter-active,
+.scroll-key-info__content .fade-leave-active {
+  transition: opacity 0.25s ease-out;
+}
+
+.scroll-key-info__content .fade-enter,
+.scroll-key-info__content .fade-leave-to {
+  opacity: 0;
+}
+
+.scroll-key-info__content .fade-enter-to,
+.scroll-key-info__content .fade-leave {
+  opacity: 1;
+}
+
+.tab-primary[data-v-03beefb0] {
+  display: flex;
+  justify-content: center;
+  --max-width: 1128px;
+  max-width: calc(var(--max-width) + 72px);
+  margin: 0 auto;
+  position: relative;
+  background-color: #fff;
+  border-radius: 0 0 8px 8px;
+  box-shadow: 0 0 10px 0 rgba(130, 130, 140, 0.12);
+  padding: 0 36px;
+}
+
+@media (max-width: 1023.98px) {
+  .tab-primary[data-v-03beefb0] {
+    padding-left: 24px;
+    padding-right: 24px;
+    max-width: calc(var(--max-width) + 48px);
+  }
+}
+
+@media (max-width: 767.98px) {
+  .tab-primary[data-v-03beefb0] {
+    padding-left: 12px;
+    padding-right: 12px;
+    max-width: calc(var(--max-width) + 24px);
+  }
+}
+
+@media (max-width: 575.98px) {
+  .tab-primary[data-v-03beefb0] {
+    padding-left: 12px;
+    padding-right: 12px;
+    max-width: calc(var(--max-width) + 24px);
+  }
+}
+
+@media (min-width: 1024px) {
+  .tab-primary[data-v-03beefb0] {
+    overflow-x: hidden;
+  }
+}
+
+.tab-primary.is-full-width[data-v-03beefb0] {
+  max-width: 100%;
+}
+
+.tab-primary__list[data-v-03beefb0] {
+  display: flex;
+  align-items: center;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  scroll-behavior: smooth;
+  scrollbar-color: transparent;
+  scrollbar-width: none;
+}
+
+.tab-primary__list[data-v-03beefb0]::-webkit-scrollbar-track {
+  border-radius: 0;
+  background-color: transparent;
+}
+
+.tab-primary__list[data-v-03beefb0]::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  background-color: transparent;
+}
+
+.tab-primary__list[data-v-03beefb0]::-webkit-scrollbar-thumb {
+  border-radius: 0;
+  background-color: transparent;
+}
+
+.tab-primary__item[data-v-03beefb0] {
+  display: flex;
+}
+
+.tab-primary__item[data-v-03beefb0]:not(:first-of-type) {
+  margin-left: 40px;
+}
+
+@media (max-width: 1023.98px) {
+  .tab-primary__item[data-v-03beefb0]:not(:first-of-type) {
+    margin-left: 24px;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .tab-primary__item[data-v-03beefb0]:not(:first-of-type) {
+    margin-left: 20px;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .tab-primary__item:not(:first-of-type).is-img[data-v-03beefb0] {
+    margin-left: 16px;
+  }
+}
+
+.tab-primary__item.is-img[data-v-03beefb0] {
+  height: 82px;
+}
+
+@media (max-width: 1023.98px) {
+  .tab-primary__item.is-img[data-v-03beefb0] {
+    height: 63px;
+  }
+}
+
+.tab-primary__item.is-img .tab-primary__btn[data-v-03beefb0] {
+  padding: 14px 0 5px;
+  transition: opacity 0.3s ease-in-out;
+}
+
+@media (max-width: 1023.98px) {
+  .tab-primary__item.is-img .tab-primary__btn[data-v-03beefb0] {
+    padding: 10px 0 1px;
+  }
+}
+
+.tab-primary__btn[data-v-03beefb0] {
+  width: auto;
+  border: none;
+  background: none;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.25;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+  color: #1a1c20;
+  text-decoration: none;
+  padding: 24px 0 20px;
+  transition: color 0.3s ease-in-out, opacity 0.3s ease-in-out;
+  opacity: 0.7;
+  cursor: pointer;
+}
+
+@media (max-width: 1023.98px) {
+  .tab-primary__btn[data-v-03beefb0] {
+    font-size: 14px;
+    line-height: 1.285;
+    letter-spacing: 0.01em;
+    padding: 18.5px 0 13.5px;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .tab-primary__btn[data-v-03beefb0] {
+    padding: 10px 0;
+  }
+}
+
+.tab-primary__btn.is-active[data-v-03beefb0] {
+  color: #0048e8;
+  color: var(--tab-color, #0048e8);
+  opacity: 1;
+}
+
+.tab-primary__btn[data-v-03beefb0]:hover:not(.is-active) {
+  opacity: 1;
+}
+
+.tab-primary__btn__img[data-v-03beefb0] {
+  height: 63px;
+  width: auto;
+}
+
+@media (max-width: 1023.98px) {
+  .tab-primary__btn__img[data-v-03beefb0] {
+    height: 50px;
+  }
+}
+
+.tab-primary__btn__img img[data-v-03beefb0] {
+  width: auto;
+  height: 100%;
+  -o-object-fit: contain;
+  object-fit: contain;
+}
+
+.tab-primary__strip[data-v-03beefb0] {
+  position: absolute;
+  width: 0;
+  width: var(--strip-width, 0);
+  height: 4px;
+  background: #0048e8;
+  background: var(--tab-color, #0048e8);
+  bottom: 0;
+  left: 0;
+  left: calc(var(--strip-left, 0) - var(--fix-left, 0));
+}
+
+@media (max-width: 1023.98px) {
+  .tab-primary__strip[data-v-03beefb0] {
+    height: 2px;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .tab-primary__strip[data-v-03beefb0] {
+    height: 4px;
+  }
+}
+
+.tab-primary.is-fixed[data-v-03beefb0] {
+  max-width: 100vw;
+  box-shadow: none;
+}
+
+.tab-primary__nav__next[data-v-03beefb0],
+.tab-primary__nav__prev[data-v-03beefb0] {
+  position: absolute;
+  width: 33px;
+  height: 100%;
+  box-shadow: 0 -8px 12px rgba(0, 0, 0, 0.22);
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  cursor: pointer;
+}
+
+@media (max-width: 1023.98px) {
+  .tab-primary__nav__next[data-v-03beefb0],
+  .tab-primary__nav__prev[data-v-03beefb0] {
+    width: 28px;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .tab-primary__nav__next[data-v-03beefb0],
+  .tab-primary__nav__prev[data-v-03beefb0] {
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.22);
+  }
+}
+
+.tab-primary__nav__next[data-v-03beefb0]:after,
+.tab-primary__nav__prev[data-v-03beefb0]:after {
+  content: "";
+  width: 24px;
+  height: 24px;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkgNkwxNSAxMkw5IDE4IiBzdHJva2U9IiMxQTFDMjAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==);
+  background-position: 50%;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-color: hsla(0, 0%, 100%, 0);
+}
+
+@media (max-width: 1023.98px) {
+  .tab-primary__nav__next[data-v-03beefb0]:after,
+  .tab-primary__nav__prev[data-v-03beefb0]:after {
+    width: 14px;
+    height: 14px;
+  }
+}
+
+.tab-primary__nav__prev[data-v-03beefb0] {
+  left: -1px;
+}
+
+.tab-primary__nav__prev[data-v-03beefb0]:after {
+  transform: scale(-1);
+}
+
+.tab-primary__nav__next[data-v-03beefb0] {
+  right: -1px;
+}
+
+.link-list__container[data-v-1441ed32] {
+  display: flex;
+  align-items: center;
+}
+
+.link-list__item[data-v-1441ed32]:not(:first-child) {
+  margin-left: 40px;
+}
+
+@media (max-width: 767.98px) {
+  .link-list__item[data-v-1441ed32]:not(:first-child) {
+    margin-left: 24px;
+  }
+}
+
+.link-list.center .link-list__container[data-v-1441ed32] {
+  justify-content: center;
+}
+
+.text-link[data-v-51351f95] {
+  display: flex;
+}
+
+.text-link__wrapper[data-v-51351f95] {
+  background: none;
+  padding: 0;
+  border: none;
+  --text-color: #0032a0;
+}
+
+.text-link--light .text-link__wrapper[data-v-51351f95] {
+  --text-color: #fff;
+}
+
+parallax-bg.swiper-container {
+  overflow: unset;
+}
+
+.fade-enter-activeparallax-bg,
+.fade-leave-activeparallax-bg {
+  transition: opacity 0.5s, transform 0.3s 0.2s;
+}
+
+.fade-enterparallax-bg,
+.fade-leave-activeparallax-bg {
+  opacity: 0;
+  transform: scale(0);
+}
+
+.tipFade-enter-activeparallax-bg,
+.tipFade-leave-activeparallax-bg {
+  transition: opacity 0.3s;
+}
+
+.tipFade-enterparallax-bg,
+.tipFade-leave-activeparallax-bg {
+  opacity: 0;
+}
+
+.animation-icon-effectparallax-bg {
+  -webkit-animation-play-state: running !important;
+  animation-play-state: running !important;
+  -webkit-animation-direction: normal;
+  animation-direction: normal;
+  -webkit-animation-iteration-count: 1;
+  animation-iteration-count: 1;
+  -webkit-animation-fill-mode: backwards;
+  animation-fill-mode: backwards;
+  -webkit-animation-name: iconEffectScale-data-v-70545fd0;
+  animation-name: iconEffectScale-data-v-70545fd0;
+  -webkit-animation-duration: 0.7s;
+  animation-duration: 0.7s;
+}
+
+@-webkit-keyframes iconEffectScale-data-v-70545fd0 {
+  0% {
+    width: 0;
+    height: 0;
+    opacity: 0;
+  }
+
+  70% {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    width: 100px;
+    height: 100px;
+  }
+}
+
+@keyframes iconEffectScale-data-v-70545fd0 {
+  0% {
+    width: 0;
+    height: 0;
+    opacity: 0;
+  }
+
+  70% {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    width: 100px;
+    height: 100px;
+  }
+}
+
+.swiperparallax-bg {
+  width: 100%;
+  height: 100%;
+  background: #456ce5;
+  position: relative;
+}
+
+.swiper-slideparallax-bg {
+  font-size: 18px;
+  color: #fff;
+  box-sizing: border-box;
+}
+
+.parallax-bg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 130%;
+  height: 102%;
+  background-size: cover;
+  background-position: 50%;
+  background-image: url(/_nuxt/img/home-history-banner.dac7153.png);
+}
+
+@media (max-width: 575.98px) {
+  .parallax-bg {
+    width: 2230px;
+  }
+}
+
+.swiper-slide .periodparallax-bg {
+  width: inherit;
+  z-index: 100;
+  position: relative;
+  display: inline-block;
+  left: calc(50% - 66px);
+}
+
+.swiper-slide .period pparallax-bg {
+  display: inline-block;
+  font-family: "effra", sans-serif;
+  font-size: 50px;
+  font-weight: 900;
+  line-height: 59.4px;
+  letter-spacing: 0.1em;
+  z-index: 10;
+  position: relative;
+}
+
+.swiper-slide .period__iconPlusparallax-bg {
+  position: absolute;
+  top: -4px;
+  left: 122px;
+  cursor: pointer;
+  z-index: 10;
+  width: 60px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.swiper-slide .period__effectparallax-bg {
+  position: absolute;
+  top: 18px;
+  left: 143px;
+  width: 20px;
+  height: 20px;
+}
+
+.swiper-slide .period__effect__circleparallax-bg {
+  border-radius: 50%;
+  position: absolute;
+  border: 4px solid #fff;
+  width: 0;
+  height: 0;
+  transform: translate(-50%, -50%);
+  top: 50%;
+  left: 50%;
+  opacity: 0;
+  -webkit-animation-play-state: paused;
+  animation-play-state: paused;
+}
+
+.swipe-tipparallax-bg {
+  position: absolute;
+  margin-top: 18px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: #fff;
+  border-radius: 4px;
+  padding: 4px 8px;
+  box-shadow: 0 8px 32px rgba(130, 130, 140, 0.24);
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  max-width: 280px;
+  cursor: pointer;
+  display: none;
+  z-index: 4;
+}
+
+@media (max-width: 575.98px) {
+  .swipe-tipparallax-bg {
+    display: flex;
+  }
+}
+
+.swipe-tip pparallax-bg {
+  color: #64788f;
+}
+
+.swipe-tip .iocn-tipparallax-bg {
+  -webkit-animation-name: moveRotate-data-v-70545fd0;
+  animation-name: moveRotate-data-v-70545fd0;
+  -webkit-animation-duration: 1.8s;
+  animation-duration: 1.8s;
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+}
+
+@-webkit-keyframes moveRotate-data-v-70545fd0 {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  25% {
+    transform: rotate(20deg);
+  }
+
+  75% {
+    transform: rotate(-20deg);
+  }
+
+  to {
+    transform: rotate(0deg);
+  }
+}
+
+@keyframes moveRotate-data-v-70545fd0 {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  25% {
+    transform: rotate(20deg);
+  }
+
+  75% {
+    transform: rotate(-20deg);
+  }
+
+  to {
+    transform: rotate(0deg);
+  }
+}
+
+.slide-boxparallax-bg {
+  height: 390px;
+  max-height: 390px;
+  display: flex;
+  justify-content: center;
+  min-height: 360px;
+}
+
+@media (max-width: 1230px) {
+  .slide-boxparallax-bg {
+    padding-top: 60px;
+    height: auto;
+  }
+}
+
+@media (max-width: 1279.98px) {
+  .slide-boxparallax-bg {
+    justify-content: space-around !important;
+  }
+}
+
+.slide-box .hisPopupparallax-bg {
+  position: absolute;
+  width: 100%;
+  left: 0;
+  top: 50%;
+}
+
+.slide-box .inside-wrapparallax-bg {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  transform: translateY(3px);
+  width: 40%;
+}
+
+@media (max-width: 767.98px) {
+  .slide-box .inside-wrapparallax-bg {
+    min-width: 300px;
+  }
+}
+
+@media (max-width: 630px) {
+  .slide-box .inside-wrapparallax-bg {
+    min-width: 272px;
+  }
+}
+
+@media (max-width: 575.98px) {
+  .slide-box .inside-wrapparallax-bg {
+    width: 90%;
+  }
+}
+
+@media (max-width: 375px) {
+  .slide-box .inside-wrapparallax-bg {
+    width: 100%;
+  }
+}
+
+.slide-box .imageparallax-bg {
+  height: 64%;
+}
+
+@media (max-width: 1230px) {
+  .slide-box .imageparallax-bg {
+    position: relative;
+  }
+}
+
+@media (max-width: 860px) {
+  .slide-box .imageparallax-bg {
+    height: 56%;
+  }
+}
+
+@media (max-width: 640px) {
+  .slide-box .imageparallax-bg {
+    height: 52%;
+  }
+}
+
+@media (max-width: 575.98px) {
+  .slide-box .imageparallax-bg {
+    display: flex;
+    justify-content: center;
+  }
+}
+
+.slide-box .image imgparallax-bg {
+  height: 100%;
+  margin: auto;
+  display: block;
+  width: 100%;
+  -o-object-fit: contain;
+  object-fit: contain;
+  max-width: 450px;
+}
+
+@media (max-width: 575.98px) {
+  .slide-box .image imgparallax-bg {
+    padding: 0 15px;
+  }
+}
+
+@media (max-width: 575.98px) {
+  .closeRightSideparallax-bg {
+    display: none !important;
+  }
+}
+
+.swiper-bottomparallax-bg {
+  position: relative;
+  z-index: 1;
+  height: 100%;
+  background-color: #001e60;
+  padding: 27px 0;
+}
+
+.swiper-bottom__textparallax-bg {
+  color: #fff !important;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  position: relative;
+}
+</style>