fashion-ssr-vue3/components/business/faq/assortment.vue

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

<template>
  <div class="py-120px w-1200-auto">
    <div class="w-1200-auto text-center">
      <h2 class="text-36px fw-800 text-#333 !mb-60px custom-title-font">
        Product Selection & <span class="custom-title-bg">Assortment</span>
      </h2>
      <div class="custom-collapse w-full pos-relative">
        <el-collapse v-model="activeName" accordion>
          <el-collapse-item name="1">
            <template #title>
              <div class="flex">
                <div
                  class="w-36px 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-800px 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 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-800px 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 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-800px 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 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-800px 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>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.custom-collapse {
  ::v-deep(.el-collapse) {
    border-top: unset !important;
    border-bottom: unset !important;
    .el-collapse-item {
      margin-bottom: 30px;
      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;
        text-align: left;
      }
    }
  }
}
</style>