xinkeaboard/xinkeaboard-promotion-portal/src/components/RecordHelp.vue

<template>
  <div class="record-help">
    <div class="record-help-head">
      <img :src="leftImg" />
      <div class="record-help-head__center">
        <span class="title">不懂数据？</span>
        <span class="title">输入信息，即可马上解锁您的专属报告！</span>
        <span class="tip">通过 AId 搜索和数据分析，及时了解目标市场及SEM 关键词状态</span>
      </div>
      <img :src="rightImg" />
    </div>
    <div class="record-help-content">
      <div class="content-left">
        <img :src="contentLeftPng" />
      </div>
      <div class="content-right">
        <div
          :class="{ 'content-right-item': true, active: currentStep === 1 }"
          @click="currentStep = 1"
        >
          <div class="item-left">
            <span class="item-left-title">关键词洞察</span>
            <span class="item-left-tip">一键获取高转化关键词数据</span>
          </div>
          <div class="item-right">
            <img :src="kewwordPng" />
          </div>
        </div>
        <div
          :class="{ 'content-right-item': true, active: currentStep === 2 }"
          @click="currentStep = 2"
        >
          <div class="item-left">
            <span class="item-left-title">竞品分析</span>
            <span class="item-left-tip">帮您全面洞察竞品网站</span>
          </div>
          <div class="item-right">
            <img :src="competitorPng" />
          </div>
        </div>
        <div
          :class="{ 'content-right-item': true, active: currentStep === 3 }"
          @click="currentStep = 3"
        >
          <div class="item-left">
            <span class="item-left-title">AI深度分析</span>
            <span class="item-left-tip">让数据驱动您的营销决策</span>
          </div>
          <div class="item-right">
            <img :src="analysisPng" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
import leftImg from '@/assets/images/home/left.png';
import rightImg from '@/assets/images/home/right.png';
import contentLeft1 from '@/assets/images/home/content-left-1.png';
import contentLeft2 from '@/assets/images/home/content-left-2.png';
import contentLeft3 from '@/assets/images/home/content-left-3.png';

import kewwordPng from '@/assets/images/home/keyword.png';
import competitorPng from '@/assets/images/home/competitor.png';
import analysisPng from '@/assets/images/home/analysis.png';

const currentStep = ref<number>(1);

const contentLeftPng = computed(() => {
  if (currentStep.value === 1) return contentLeft1;
  if (currentStep.value === 2) return contentLeft2;
  if (currentStep.value === 3) return contentLeft3;
});
</script>

<style lang="scss" scoped>
.record-help {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  // justify-content: center;
  align-items: center;
  background-color: #f6f8fa;
  &-head {
    display: flex;
    align-items: center;
    width: 1184px;
    height: 244px;

    img {
      width: 192px;
      height: 46px;
    }

    &__center {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      flex: 1;
      width: 100%;
      overflow: hidden;
      padding: 0 40px;

      .title {
        font-weight: bold;
        font-size: 30px;
        color: #282e30;
      }

      .tip {
        font-weight: 400;
        font-size: 16px;
        color: #282e30;
        margin-top: 10px;
      }
    }
  }

  &-content {
    display: flex;
    width: 100%;
    height: 427px;
    padding: 0 240px;
    box-sizing: border-box;
    margin-top: -18px;

    .content-left {
      display: flex;
      flex-direction: column;
      width: 970px;
      margin-right: 90px;
      padding-left: 30px;
      padding-bottom: 27px;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .content-right {
      width: 380px;

      &-item {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 380px;
        height: 120px;
        margin-bottom: 20px;
        padding: 0px 20px 0px 20px;
        box-sizing: border-box;
        background-color: #fff;
        cursor: pointer;

        &.active {
          background: linear-gradient(90deg, #036eb8 0%, #2ea7e0 100%);

          .item-left {
            &-title {
              color: #ffffff;
            }

            &-tip {
              color: rgba(255, 255, 255, 0.6);
            }
          }
        }

        .item-left {
          flex: 1;
          width: 100%;
          display: flex;
          flex-direction: column;
          &-title {
            font-weight: bold;
            font-size: 20px;
            color: #282e30;
            margin-bottom: 4px;
          }

          &-tip {
            font-weight: 400;
            font-size: 16px;
            color: rgba(40, 46, 48, 0.6);
          }
        }

        .item-right {
          width: 100px;
          height: 100px;

          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}
</style>