fix: 增加tip

xinkeaboard-promotion-portal/src/components/competitor/RankTable.vue

@@ -38,6 +38,19 @@
         </template>
       </el-table-column>
       <el-table-column prop="monthly" align="center" label="SEO点击次数（变化）">
+        <template #header>
+          <el-tooltip popper-class="help-tip" effect="light" placement="top">
+            <template #content style="padding: 20px">
+              <span class="title">SEO点击次数</span>
+              <span class="value"
+                >根据关键词当前的排名，估算出它每月应该为其页面带来这么多点击量。
+                “变化”的计数显示了该域名根据当前排名与上次排名相比，获得了多少次更多的点击（或更少的点击）。</span
+              >
+            </template>
+            <img :src="Help" />
+          </el-tooltip>
+          SEO点击次数（变化）
+        </template>
         <template #default="scope">
           <span v-if="scope.row.monthly > 0" style="color: #036eb8">{{
             '+' + parseNumber(scope.row.monthly)
@@ -45,8 +58,32 @@
           <span v-else style="color: red">{{ parseNumber(scope.row.monthly) }}</span>
         </template>
       </el-table-column>
-      <el-table-column prop="dp" align="center" label="DP（关键词难度）"> </el-table-column>
+      <el-table-column prop="dp" align="center" label="DP（关键词难度）">
+        <template #header>
+          <el-tooltip popper-class="help-tip" effect="light" placement="top">
+            <template #content style="padding: 20px">
+              <span class="title">关键词难度</span>
+              <span class="value"
+                >我们已经计算了在这个关键词上排名的难度。分数基于 1-100 的等级，100 是最难排名的。
+                将此数字与您定位的其他关键字进行比较，以了解如何确定 SEO 活动的优先级。</span
+              >
+            </template>
+            <img :src="Help" />
+          </el-tooltip>
+          DP（关键词难度）
+        </template>
+      </el-table-column>
       <el-table-column prop="cpc" align="center" label="CPC（每次点击费用）">
+        <template #header>
+          <el-tooltip popper-class="help-tip" effect="light" placement="top">
+            <template #content style="padding: 20px">
+              <span class="title">CPC（每次点击费用）</span>
+              <span class="value">根据平均每次点击费用和词组匹配估算值来筛选您的关键词结果。</span>
+            </template>
+            <img :src="Help" />
+          </el-tooltip>
+          CPC（每次点击费用）
+        </template>
         <template #default="scope">
           {{ '$ ' + scope.row.cpc }}
         </template>

xinkeaboard-promotion-portal/src/components/competitor/RecommendTable.vue

@@ -42,6 +42,16 @@
         </template>
       </el-table-column>
       <el-table-column prop="price" align="center" label="价格">
+        <template #header>
+          <el-tooltip popper-class="help-tip" effect="light" placement="top">
+            <template #content style="padding: 20px">
+              <span class="title">价格</span>
+              <span class="value">根据平均每次点击费用和词组匹配估算值来筛选您的关键词结果。</span>
+            </template>
+            <img :src="Help" />
+          </el-tooltip>
+          价格
+        </template>
         <template #default="scope">
           {{ '$ ' + scope.row.price }}
         </template>

xinkeaboard-promotion-portal/src/components/competitor/TrafficChart.vue

@@ -40,7 +40,7 @@ const initChart = () => {
       textStyle: {
         color: '#282E30', // 图例文字颜色
         fontSize: 16
-      }
+      },
     },
     graphic: [
       // {

xinkeaboard-promotion-portal/src/components/competitor/item.vue

@@ -23,14 +23,14 @@
       <div class="competitor-item-show__suggestion">
         <RecommendTable :tableData="recommendationBOList"></RecommendTable>
       </div>
-      <div class="competitor-item-show__bottom" @click="download">立即下载报告，查看更多</div>
+      <div class="competitor-item-show__bottom" v-show="!expanded" @click="download">立即下载报告，查看更多</div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { useMainStore } from '@/store';
-import { reactive, ref } from 'vue';
+import { computed, reactive, ref } from 'vue';
 import TrafficChart from './TrafficChart.vue';
 import Empty from '@/components/CommonEmpty.vue';
 import RankTable from '@/components/competitor/RankTable.vue';
@@ -59,6 +59,8 @@ const mainStore = useMainStore();
 const download = () => {
   downloadPDF();
 };
+
+const expanded = computed(() => mainStore.getExpanded);
 const getRivalData = () => {
   loading.value = true;
   return mainStore