fashion-ssr-vue3/components/common/block/faq.vue

<!-- @format -->

<script lang="ts" setup>
const activeName = ref()
</script>

<template>
  <div class="bg-#F3F4FB py-120px data-section" data-section-color="#F3F4FB">
    <div class="w-1200-auto flex justify-between">
      <div>
        <div
          class="py-5px mb-20px w-70px text-center text-#9B6CFF b-rd-200px bg-#EAE5FA"
        >
          FAQ
        </div>
        <h2 class="text-#333 text-36px !fw-800 custom-title-font">
          Frequently
        </h2>
        <h2 class="!mb-20px text-#333 text-36px !fw-800 custom-title-font">
          Asked <span class="custom-title-bg04">Questions</span>
        </h2>
        <div
          class="py-14px text-14px w-128px text-center text-#fff b-rd-200px bg-#0F0820 hover:bg-#9B6CFF hover:text-#fff cursor-pointer"
        >
          <nuxt-link to="/faq">
            Learn More
          </nuxt-link>
        </div>
      </div>
      <div class="custom-collapse w-680px pos-relative">
        <el-collapse v-model="activeName" accordion>
          <el-collapse-item name="1">
            <template #title>
              <div class="flex">
                <div
                  class="w-36px mt-6px h-36px text-16px lh-36px text-center b-rd-50% bg-#9B6CFF text-#fff mr-20px"
                >
                  1
                </div>
                <h3
                  class="flex-1 text-24px fw-bold text-#333 text-left lh-34px w-520px custom-title-font"
                >
                  What is the suggested strategy to manage creative fatigue?
                </h3>
              </div>
            </template>
            <template #icon="{ isActive }">
              <img
                v-if="!isActive"
                src="@/assets/images/plus.png"
                class="!w-20px !h-20px mt-12px"
              >
              <img
                v-else
                src="@/assets/images/reduce.png"
                class="!w-20px !h-20px mt-12px"
              >
            </template>
            <div
              class="text-#999 fw-500 lh-24px mt-10px px-60px custom-title-font"
            >
              Consistent with real life: in line with the process and logic of
              real life, and comply with languages and habits that the users are
              used to;
            </div>
          </el-collapse-item>
          <el-collapse-item name="2">
            <template #title>
              <div class="flex">
                <div
                  class="w-36px mt-6px h-36px text-16px lh-36px text-center b-rd-50% bg-#9B6CFF text-#fff mr-20px"
                >
                  2
                </div>
                <h3
                  class="flex-1 text-24px fw-bold text-#333 text-left lh-34px w-520px custom-title-font"
                >
                  What is the suggested strategy to manage creative fatigue?
                </h3>
              </div>
            </template>
            <template #icon="{ isActive }">
              <img
                v-if="!isActive"
                src="@/assets/images/plus.png"
                class="!w-20px !h-20px mt-12px"
              >
              <img
                v-else
                src="@/assets/images/reduce.png"
                class="!w-20px !h-20px mt-12px"
              >
            </template>
            <h3
              class="text-#999 fw-500 lh-24px mt-10px px-60px custom-title-font"
            >
              Consistent with real life: in line with the process and logic of
              real life, and comply with languages and habits that the users are
              used to;
            </h3>
          </el-collapse-item>
          <el-collapse-item name="3">
            <template #title>
              <div class="flex">
                <div
                  class="w-36px mt-6px h-36px text-16px lh-36px text-center b-rd-50% bg-#9B6CFF text-#fff mr-20px"
                >
                  3
                </div>
                <div
                  class="flex-1 text-24px fw-bold text-#333 text-left lh-34px w-520px custom-title-font"
                >
                  What is the suggested strategy to manage creative fatigue?
                </div>
              </div>
            </template>
            <template #icon="{ isActive }">
              <img
                v-if="!isActive"
                src="@/assets/images/plus.png"
                class="!w-20px !h-20px mt-12px"
              >
              <img
                v-else
                src="@/assets/images/reduce.png"
                class="!w-20px !h-20px mt-12px"
              >
            </template>
            <h3
              class="text-#999 fw-500 lh-24px mt-10px px-60px custom-title-font"
            >
              Consistent with real life: in line with the process and logic of
              real life, and comply with languages and habits that the users are
              used to;
            </h3>
          </el-collapse-item>
          <el-collapse-item name="4">
            <template #title>
              <div class="flex">
                <div
                  class="w-36px mt-6px h-36px text-16px lh-36px text-center b-rd-50% bg-#9B6CFF text-#fff mr-20px"
                >
                  4
                </div>
                <div
                  class="flex-1 text-24px fw-bold text-#333 text-left lh-34px w-520px custom-title-font"
                >
                  What is the suggested strategy to manage creative fatigue?
                </div>
              </div>
            </template>
            <template #icon="{ isActive }">
              <img
                v-if="!isActive"
                src="@/assets/images/plus.png"
                class="!w-20px !h-20px mt-12px"
              >
              <img
                v-else
                src="@/assets/images/reduce.png"
                class="!w-20px !h-20px mt-12px"
              >
            </template>
            <h3
              class="text-#999 fw-500 lh-24px mt-10px px-60px custom-title-font"
            >
              Consistent with real life: in line with the process and logic of
              real life, and comply with languages and habits that the users are
              used to;
            </h3>
          </el-collapse-item>
        </el-collapse>
        <img
          src="@/assets/images/icon_face.png"
          class="w-70px h-70px pos-absolute top--50px right-0px"
          alt=""
          srcset=""
        >
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.custom-collapse {
  ::v-deep(.el-collapse) {
    .el-collapse-item {
      margin-bottom: 20px;
      border-radius: 12px;
      background-color: #fff;
      box-sizing: border-box;
      border: 1px solid #e0e4ea;
      overflow: hidden;
      padding: 30px;

      .el-collapse-item__header {
        border-bottom: unset !important;
        display: flex;
        justify-content: space-between;
        align-items: start;
        height: unset !important;
        line-height: unset !important;
      }
      &.is-active {
        .el-collapse-item__wrap {
          border-bottom: unset !important;
        }
      }
      .el-collapse-item__content {
        padding: 0px !important;
      }
    }
  }
}
</style>