xinkeaboard/xinkeaboard-promotion-portal/src/views/Record.vue

<template>
  <div class="record">
    <div class="record-head"></div>
    <div class="record-wrap" ref="pdfContent">
      <div class="record-wrap-content">
        <div class="record-wrap-content__overview" v-loading="loading">
          <span>概述关于你的产品的描述，通常的英语表述为</span>
          <span class="active">{{ keywordEn }},</span>
          <span>在互联网上搜索的关键词为</span>
          <span class="active">{{ keywords }}</span>
        </div>
        <div class="overview-left">概述</div>
        <div class="overview-right">
          <el-button v-show="!expanded" @click="download">下载报告</el-button>
        </div>
        <div class="record-wrap-content__keyword">
          <img :src="keywordPng" />
          <div class="content">
            <div class="content-left">
              <KeywordSearch></KeywordSearch>
            </div>
            <div class="content-right">
              <KeywordTable></KeywordTable>
            </div>
          </div>
        </div>
        <div class="record-wrap-content__competitor" v-if="competitorWebsiteList.length">
          <img :src="CompetitorPng" />
          <div class="list">
            <CompetitorList></CompetitorList>
          </div>
        </div>
        <div class="record-wrap-content__ai">
          <img :src="AiAnalysisPng" />
          <AiAnalysis></AiAnalysis>
        </div>
        <div class="record-wrap-content__tips">
          <span
            >以上内容为AI根据三方网站获取的数据生成的内容，仅供参考，请仔细甄别。我司不对报告的真伪负责。</span
          >
          <span>如果需要更详细研究请联系我们：contact@njnaexport.cn</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';

import { useMainStore } from '../store';
import KeywordSearch from '../components/keyword/search.vue';
import KeywordTable from '../components/keyword/table.vue';
import CompetitorList from '../components/competitor/list.vue';
import AiAnalysis from '@/components/AiAnalysis.vue';
import keywordPng from '../assets/images/keyword.png';
import CompetitorPng from '../assets/images/competitor.png';
import AiAnalysisPng from '../assets/images/ai-analysis.png';
import { downloadPDF } from '@/utils/pdf';
import { showMessage } from '@/utils/common';

const mainStore = useMainStore();
mainStore.initData();

const pdfContent = ref<HTMLElement | null>(null);
const keywordData = computed(() => mainStore.getKeywordInfo);
const loading = computed(() => keywordData.value.loading);
const keywordEn = computed(() => keywordData.value.data?.keywordEn);
const keywords = computed(() => keywordData.value?.data?.keywords?.join(','));
const expanded = computed(() => mainStore.getExpanded);
const formData = computed(() => mainStore.getFormData);
const competitorWebsiteList = computed(() => {
  const list = formData.value.competitorWebsite?.split(',') || [];
  return list.filter((item) => item.trim() !== '');
});

const download = () => {
  downloadPDF(pdfContent.value!);
};
</script>

<style lang="scss" scoped>
.record {
  position: relative;
  max-width: 1920px;
  height: 100%;
  // overflow: auto;
  background-color: #fff;

  &-head {
    height: 1330px;
    background-image: url('../assets/images/record-top.svg');
    background-repeat: no-repeat; /* 不重复 */
    background-position: center center; /* 居中显示 */
    background-size: cover;
  }

  &-wrap {
    position: absolute;
    top: 460px;
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: rgba(246, 248, 250, 0.5);

    &-content {
      position: relative;
      width: 1336px;
      &__overview {
        display: flex;
        // justify-content: center;
        align-items: center;
        height: 179px;
        padding: 0 58px;
        background: rgba(255, 255, 255, 0.65);
        box-shadow: -9px 13px 22px 0px rgba(5, 112, 183, 0.06);
        border-radius: 4px;
        margin-top: 35px;
        font-weight: bold;
        font-size: 20px;
        color: #282e30;

        .active {
          color: var(--promotion--color-primary);
        }
      }

      .overview-left {
        position: absolute;
        top: 0;
        left: 30px;
        width: 136px;
        height: 70px;
        background: #ffffff;
        text-align: center;
        line-height: 70px;
        box-shadow: 0px 10px 30px 0px rgba(0, 98, 165, 0.2);
        border-radius: 8px;
        font-weight: bold;
        font-size: 32px;
        color: #282e30;
        z-index: 2000;
      }

      .overview-right {
        position: absolute;
        top: 14px;
        right: 30px;
        z-index: 2000;

        :deep(.el-button) {
          width: 126px;
          height: 48px;
          font-weight: 400;
          font-size: 16px;
          color: #ffffff;
          border-radius: 0;
          border: none;
          background: var(--promotion--color-primary);
        }
      }

      &__keyword {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 40px;

        img {
          width: 584px;
          height: 166px;
        }

        .content {
          width: 100%;

          display: flex;
          justify-content: space-between;
          margin-top: 20px;

          &-left {
            width: 666px;
            height: 317px;
            padding: 45px 60px;
            box-sizing: border-box;
            background: linear-gradient(
              90deg,
              rgba(255, 255, 255, 0.65) 0%,
              rgba(255, 255, 255, 0) 100%
            );
          }

          &-right {
            width: 650px;
            height: 317px;
          }
        }
      }

      &__competitor {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 65px;

        img {
          width: 624px;
          height: 166px;
        }

        .list {
          width: 100%;
          margin-top: 20px;
        }
      }

      &__ai {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 60px;

        img {
          width: 624px;
          height: 166px;
        }
      }

      &__tips {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        height: 124px;
        padding-left: 40px;
        box-sizing: border-box;
        background: #ecf0f3;

        span {
          font-weight: 400;
          font-size: 16px;
          color: #d20000;
        }
      }
    }
  }
}
</style>