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

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

<template>
  <div class="w-1200-auto">
    <div class="w-1200-auto text-center">
      <h2 class="text-36px fw-800 text-#333 !mb-60px custom-title-font">
        Customization &  <span class="custom-title-bg">Branding</span>
      </h2>
      <div class="custom-collapse w-full pos-relative">
        <el-collapse v-model="activeName" accordion>
          <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"
                >
                  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>
            <h3
              class="text-#999 fw-500 lh-24px mt-10px px-60px custom-title-font"
            >
              EJET Spark description, spark the trend, ignate sales. EJET Spark catalog description, EJET Spark description, spark the trend, ignate sales. EJET Spark catalog description, EJET Spark description, spark the trend, ignate sales. EJET Spark catalog description, EJET Spark description, spark the trend, ignate sales. EJET Spark catalog description,
            </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"
                >
                  2
                </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"
            >
              EJET Spark description, spark the trend, ignate sales. EJET Spark catalog description, EJET Spark description, spark the trend, ignate sales. EJET Spark catalog description, EJET Spark description, spark the trend, ignate sales. EJET Spark catalog description, EJET Spark description, spark the trend, ignate sales. EJET Spark catalog description,
            </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"
                >
                  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"
            >
              EJET Spark description, spark the trend, ignate sales. EJET Spark catalog description, EJET Spark description, spark the trend, ignate sales. EJET Spark catalog description, EJET Spark description, spark the trend, ignate sales. EJET Spark catalog description, EJET Spark description, spark the trend, ignate sales. EJET Spark catalog description,
            </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>