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="!mb-10px text-#333 text-36px !fw-800">
          Frequently
        </h2>
        <h2 class="!mb-20px text-#333 text-36px !fw-800">
          Asked <span class="custom-title-bg">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"
        >
          Learn More
        </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">
                  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">
              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">
                  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">
              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">
                  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">
              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">
                  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">
              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">
.custom-collapse {
  .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;
        }
    }
  }
}
.custom-title-bg{
  position: relative;
  display: inline-block;
  background: url(~/assets/images/title_bg04.png);
  background-repeat: no-repeat;
  background-position: 88% 150%;
  background-size: 94% auto;
}
</style>