123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118 |
- <template>
- <div class="keyword-table">
- <Empty
- :autoFinish="autoFinish"
- :fail="fail"
- :text="fail ? '生成失败' : 'AI数据生成中...'"
- v-if="loading"
- ></Empty>
- <el-table :data="renderTableData" v-else>
- <el-table-column prop="keyword" align="center">
- <template #header>
- <el-tooltip popper-class="help-tip" effect="light" placement="top">
- <template #content style="padding: 20px">
- <span class="title">关键词</span>
- <span class="value"
- >当您搜索一个术语或短语(又名“关键字")时,通常会有数千个结果。如果某个域名出现在前 50
- 名结果中,我们将该搜索词视为其自然(SEO) 关键字之一。</span
- >
- </template>
- <img :src="Help" />
- </el-tooltip>
- 关键词
- </template>
- </el-table-column>
- <el-table-column prop="searchVolume" align="center">
- <template #header>
- <el-tooltip popper-class="help-tip" effect="light" placement="top">
- <template #content style="padding: 20px">
- <span class="title">搜索量</span>
- <span class="value"
- >这显示了上个月在美国 https://www.google.com/search?q=Google.com
- 上的搜索次数(或在我们其他国家/地区选项中,在所选国家/地区内用 Google
- 进行的搜索次数)。我们融合了来自多个来源的数据,以提供该关键词搜索活动的更好快照,因此它不会与
- Google 的搜索量指标完全相同。</span
- >
- </template>
- <img :src="Help" />
- </el-tooltip>
- 搜索量
- </template>
- </el-table-column>
- <el-table-column prop="competition" align="center">
- <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>
- 关键词难度
- </template>
- </el-table-column>
- </el-table>
- </div>
- </template>
- <script lang="ts" setup>
- import Help from '../../assets/images/help.png';
- import { computed } from 'vue';
- import { useMainStore } from '@/store';
- import Empty from '@/components/CommonEmpty.vue';
- const mainStore = useMainStore();
- // const expanded = computed(() => mainStore.getExpanded);
- const tableData = computed(() => mainStore.suggestionsInfo.data);
- const loading = computed(() => mainStore.suggestionsInfo.loading);
- const autoFinish = computed(() => mainStore.suggestionsInfo.autoFinish);
- const fail = computed(() => mainStore.suggestionsInfo.fail);
- const renderTableData = computed(() => tableData.value.slice(0, 5));
- // const renderTableData = computed(() => expanded.value ? tableData.value : tableData.value.slice(0, 5));
- </script>
- <style lang="scss" scoped>
- .keyword-table {
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100%;
- :deep(.el-table) {
- width: 100%;
- // height: 317px;
- .el-table__header {
- height: 52px;
- .el-table__cell {
- background: rgba(3, 110, 184, 0.1) !important;
- font-weight: bold;
- font-size: 16px;
- color: #282e30;
- }
- }
- .el-table__row {
- height: 52px;
- font-weight: bold;
- font-size: 14px;
- color: #282e30;
- }
- }
- :deep(.el-table__cell) {
- img {
- width: 22px;
- height: 22px;
- position: relative;
- top: 5px;
- cursor: pointer;
- }
- }
- }
- </style>
|