合并之前缺少部分
This commit is contained in:
muzi
3
src/views/components/dashboard/index.vue
Normal file
3
src/views/components/dashboard/index.vue
Normal file
@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<LayoutBasic> </LayoutBasic>
|
||||
</template>
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view>
|
||||
<topHeader ref="topHeaderRef"></topHeader>
|
||||
<topHeader ref="topHeaderRef" @search="search"></topHeader>
|
||||
<a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 24px; margin: 24px 0">
|
||||
<a-space align="center">
|
||||
<span>行业词云</span>
|
||||
@ -65,12 +65,29 @@ const topHeaderRef = ref();
|
||||
const selectedIndustry = computed(() => topHeaderRef.value?.selectedIndustry);
|
||||
const selectedSubCategory = computed(() => topHeaderRef.value?.selectedSubCategory);
|
||||
const selectedTimePeriod = computed(() => topHeaderRef.value?.selectedTimePeriod);
|
||||
// 监听筛选条件变化
|
||||
watch([selectedTimePeriod, selectedSubCategory], () => {
|
||||
getIndustryTerms();
|
||||
});
|
||||
const search = () => {
|
||||
getIndustryTerms();
|
||||
};
|
||||
watch(selectedIndustry, () => {
|
||||
selectedSubCategory.value = 0;
|
||||
getIndustryTerms();
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getIndustryTerms();
|
||||
});
|
||||
const getIndustryTerms = async () => {
|
||||
const params = {
|
||||
industry_id: selectedIndustry.value,
|
||||
time_dimension: selectedTimePeriod.value,
|
||||
};
|
||||
if (selectedSubCategory.value != 0) {
|
||||
params['industry_id'] = selectedSubCategory.value;
|
||||
}
|
||||
const res = await fetchindustryTerms(params);
|
||||
// 这里需要根据API返回的数据结构处理成tagRows需要的格式
|
||||
tagRows.value = processTagData(res);
|
||||
@ -107,7 +124,7 @@ const getPadding = (rowIndex, tagIndex) => {
|
||||
|
||||
// 处理API返回数据为tagRows格式
|
||||
const processTagData = (apiData) => {
|
||||
const totalGroups = 7; // 总组数
|
||||
const totalGroups = 4; // 总组数
|
||||
const middleIndex = Math.floor(totalGroups / 2); // 中间位置（索引3）
|
||||
const chunkSize = Math.ceil(apiData.length / totalGroups); // 每组大小
|
||||
const arr = [];
|
||||
@ -133,15 +150,6 @@ const processTagData = (apiData) => {
|
||||
|
||||
return arr.filter(Boolean); // 移除可能的空项
|
||||
};
|
||||
|
||||
// 监听筛选条件变化
|
||||
watch([selectedIndustry, selectedTimePeriod], () => {
|
||||
getIndustryTerms();
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getIndustryTerms();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view>
|
||||
<topHeader ref="topHeaderRef"></topHeader>
|
||||
<topHeader ref="topHeaderRef" @search="search"></topHeader>
|
||||
<!-- tabel -->
|
||||
<a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 24px; margin-bottom: 24px">
|
||||
<a-space align="center">
|
||||
@ -112,7 +112,7 @@
|
||||
<span style="margin-right: 16px; width: 60px; font-size: 12px">原始来源 </span>
|
||||
<a-space direction="vertical" style="margin-left: 15px">
|
||||
<a-space v-for="item in topicInfo.industry_topic_sources" :key="item">
|
||||
<a-link style="background-color: initial" :href="item.link">{{ item.title }}</a-link>
|
||||
<a-link style="background-color: initial" :href="item.link" target="_blank">{{ item.title }}</a-link>
|
||||
<img src="@/assets/img/hottranslation/xhs.png" style="width: 16px; height: 16px" />
|
||||
</a-space>
|
||||
</a-space>
|
||||
@ -151,11 +151,18 @@ const topHeaderRef = ref();
|
||||
const selectedIndustry = computed(() => topHeaderRef.value?.selectedIndustry);
|
||||
const selectedSubCategory = computed(() => topHeaderRef.value?.selectedSubCategory);
|
||||
const selectedTimePeriod = computed(() => topHeaderRef.value?.selectedTimePeriod);
|
||||
|
||||
const search = () => {
|
||||
getIndustryTopics();
|
||||
};
|
||||
// 监听筛选条件变化
|
||||
watch([selectedIndustry, selectedTimePeriod], () => {
|
||||
watch([selectedIndustry, selectedTimePeriod, selectedSubCategory], () => {
|
||||
getIndustryTopics();
|
||||
});
|
||||
watch(selectedIndustry, () => {
|
||||
selectedSubCategory.value = 0;
|
||||
getIndustryTopics();
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getIndustriesTree();
|
||||
});
|
||||
@ -173,8 +180,10 @@ const getIndustryTopics = async () => {
|
||||
industry_id: selectedIndustry.value,
|
||||
time_dimension: selectedTimePeriod.value,
|
||||
};
|
||||
if (selectedSubCategory.value != 0) {
|
||||
parms['industry_id'] = selectedSubCategory.value;
|
||||
}
|
||||
const res = await fetchIndustryTopics(parms);
|
||||
console.log(res);
|
||||
dataList.value = res;
|
||||
};
|
||||
|
||||
|
||||
3
src/views/components/dataEngine/index.vue
Normal file
3
src/views/components/dataEngine/index.vue
Normal file
@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<LayoutBasic> </LayoutBasic>
|
||||
</template>
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view>
|
||||
<topHeader ref="topHeaderRef"></topHeader>
|
||||
<topHeader ref="topHeaderRef" @click="search"></topHeader>
|
||||
<!-- 重点品牌列表 -->
|
||||
<a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 24px; margin: 24px 0">
|
||||
<a-space align="center">
|
||||
@ -107,11 +107,18 @@ const selectedTimePeriod = computed(() => topHeaderRef.value?.selectedTimePeriod
|
||||
const dataList = ref([]);
|
||||
const otherList = ref([]);
|
||||
|
||||
const search = () => {
|
||||
getFocusBrandsList();
|
||||
getEventDynamicsList();
|
||||
};
|
||||
const getFocusBrandsList = async () => {
|
||||
const params = {
|
||||
industry_id: selectedIndustry.value,
|
||||
time_dimension: selectedTimePeriod.value,
|
||||
};
|
||||
if (selectedSubCategory.value != 0) {
|
||||
params['industry_id'] = selectedSubCategory.value;
|
||||
}
|
||||
const res = await fetchFocusBrandsList(params);
|
||||
// 这里需要根据API返回的数据结构处理成tagRows需要的格式
|
||||
dataList.value = res;
|
||||
@ -122,6 +129,9 @@ const getEventDynamicsList = async () => {
|
||||
industry_id: selectedIndustry.value,
|
||||
time_dimension: selectedTimePeriod.value,
|
||||
};
|
||||
if (selectedSubCategory.value != 0) {
|
||||
params['industry_id'] = selectedSubCategory.value;
|
||||
}
|
||||
const res = await fetchEventDynamicsList(params);
|
||||
// 这里需要根据API返回的数据结构处理成tagRows需要的格式
|
||||
otherList.value = res;
|
||||
@ -132,10 +142,15 @@ onMounted(() => {
|
||||
getEventDynamicsList();
|
||||
});
|
||||
// 监听筛选条件变化
|
||||
watch([selectedIndustry, selectedTimePeriod], () => {
|
||||
watch([selectedTimePeriod, selectedSubCategory], () => {
|
||||
getFocusBrandsList();
|
||||
getEventDynamicsList();
|
||||
});
|
||||
watch(selectedIndustry, () => {
|
||||
selectedSubCategory.value = 0;
|
||||
getFocusBrandsList();
|
||||
getEventDynamicsList;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view>
|
||||
<topHeader ref="topHeaderRef"></topHeader>
|
||||
<topHeader ref="topHeaderRef" @search="search"></topHeader>
|
||||
<!-- 关键词热度榜 -->
|
||||
<a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 24px; margin: 24px 0">
|
||||
<a-space align="center">
|
||||
@ -51,7 +51,12 @@
|
||||
style="font-size: 14px"
|
||||
:value="record.trend * 100"
|
||||
:value-style="{ color: '#25C883' }"
|
||||
></a-statistic>
|
||||
>
|
||||
<template #prefix>
|
||||
<icon-arrow-fall />
|
||||
</template>
|
||||
<template #suffix>%</template>
|
||||
</a-statistic>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="情感倾向" data-index="sentiment">
|
||||
@ -170,9 +175,9 @@
|
||||
<template #cell="{ record }">
|
||||
<a-statistic
|
||||
style="font-size: 14px"
|
||||
v-if="record.trend > 0"
|
||||
:value="record.trend * 100"
|
||||
:value-style="{ color: '#F64B31' }"
|
||||
v-if="record.trend > 0"
|
||||
>
|
||||
<template #prefix>
|
||||
<icon-arrow-rise />
|
||||
@ -184,18 +189,92 @@
|
||||
style="font-size: 14px"
|
||||
:value="record.trend * 100"
|
||||
:value-style="{ color: '#25C883' }"
|
||||
></a-statistic>
|
||||
>
|
||||
<template #prefix>
|
||||
<icon-arrow-fall />
|
||||
</template>
|
||||
<template #suffix>%</template>
|
||||
</a-statistic>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="操作" data-index="optional">
|
||||
<template #cell="{ record }">
|
||||
<a-button type="outline" @click="gotoDetail(record)">详情</a-button>
|
||||
</template>
|
||||
</a-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-space>
|
||||
<!-- modal -->
|
||||
<a-modal :visible="visible" @ok="handleOk" @cancel="handleCancel" unmountOnClose>
|
||||
<template #title>
|
||||
<span style="text-align: left; width: 100%">新兴关键词</span>
|
||||
</template>
|
||||
<div>
|
||||
<a-space direction="vertical">
|
||||
<a-space>
|
||||
<span style="margin-right: 16px">关键词</span>
|
||||
<span>{{ topicInfo.name }}</span>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span style="margin-right: 16px">最大规模出现</span>
|
||||
<span>{{ formatTimestamp(topicInfo.first_appeared_at) }}</span>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span style="margin-right: 16px">变化幅度</span>
|
||||
<div>
|
||||
<a-statistic
|
||||
v-if="topicInfo?.trend > 0"
|
||||
style="font-size: 14px"
|
||||
:value="topicInfo.trend * 100"
|
||||
:value-style="{ color: '#F64B31' }"
|
||||
>
|
||||
<template #prefix>
|
||||
<IconArrowRise />
|
||||
</template>
|
||||
<template #suffix>%</template>
|
||||
</a-statistic>
|
||||
<a-statistic
|
||||
v-else
|
||||
style="font-size: 14px"
|
||||
:value="topicInfo?.trend * 100 || 0"
|
||||
:value-style="{ color: '#25C883' }"
|
||||
>
|
||||
<template #prefix>
|
||||
<IconArrowFall />
|
||||
</template>
|
||||
<template #suffix>%</template>
|
||||
</a-statistic>
|
||||
</div>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span style="margin-right: 16px">热度指数</span>
|
||||
<img v-for="i in topicInfo.hot" :key="i" :src="starImages[i - 1]" style="width: 16px; height: 16px" />
|
||||
</a-space>
|
||||
|
||||
<a-space direction="top">
|
||||
<span style="margin-right: 16px; width: 60px; font-size: 12px">原始来源 </span>
|
||||
<a-space direction="vertical" style="margin-left: 15px">
|
||||
<a-space v-for="item in topicInfo.industry_new_keyword_sources" :key="item">
|
||||
<a-link style="background-color: initial" :href="item.link" target="_blank">{{ item.title }}</a-link>
|
||||
<img src="@/assets/img/hottranslation/xhs.png" style="width: 16px; height: 16px" />
|
||||
</a-space>
|
||||
</a-space>
|
||||
</a-space>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-modal>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import topHeader from './topHeader.vue';
|
||||
import { fetchKeywordTrendsList, fetchIndustryEmotions, fetchNewKeywordList } from '@/api/all/index';
|
||||
import {
|
||||
fetchKeywordTrendsList,
|
||||
fetchIndustryEmotions,
|
||||
fetchNewKeywordList,
|
||||
fetchNewKeywordDetail,
|
||||
} from '@/api/all/index';
|
||||
import { ref, onMounted, onBeforeUnmount, watchEffect, computed } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import star1 from '@/assets/img/hottranslation/star-fill1.png';
|
||||
@ -220,12 +299,18 @@ const dataList = ref([]);
|
||||
const rowData = ref([]);
|
||||
const keywordList = ref([]);
|
||||
const fellingRate = ref([]);
|
||||
const visible = ref(false);
|
||||
const topicInfo = ref({});
|
||||
const getIndustryEmotions = async () => {
|
||||
const params = {
|
||||
industry_id: selectedIndustry.value,
|
||||
time_dimension: selectedTimePeriod.value,
|
||||
};
|
||||
if (selectedSubCategory.value != 0) {
|
||||
params['industry_id'] = selectedSubCategory.value;
|
||||
}
|
||||
const res = await fetchIndustryEmotions(params);
|
||||
fellingRate.value = [];
|
||||
fellingRate.value.push(res['good_felling_rate']);
|
||||
fellingRate.value.push(res['bad_felling_rate']);
|
||||
|
||||
@ -235,6 +320,14 @@ const getIndustryEmotions = async () => {
|
||||
console.log('行业情绪', items);
|
||||
};
|
||||
|
||||
// 详情
|
||||
const gotoDetail = async (record) => {
|
||||
console.log(record);
|
||||
const res = await fetchNewKeywordDetail(record.id);
|
||||
console.log(res);
|
||||
visible.value = true;
|
||||
topicInfo.value = res;
|
||||
};
|
||||
const groupedData = () => {
|
||||
const groups = {
|
||||
negative: { name: '负面', items: [], color: '#F64B31' },
|
||||
@ -249,12 +342,23 @@ const groupedData = () => {
|
||||
|
||||
return groups;
|
||||
};
|
||||
// 弹窗的取消
|
||||
const handleCancel = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
// 弹窗的确定
|
||||
const handleOk = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
const getKeywordTrendsList = async () => {
|
||||
const params = {
|
||||
industry_id: selectedIndustry.value,
|
||||
time_dimension: selectedTimePeriod.value,
|
||||
};
|
||||
if (selectedSubCategory.value != 0) {
|
||||
params['industry_id'] = selectedSubCategory.value;
|
||||
}
|
||||
const res = await fetchKeywordTrendsList(params);
|
||||
console.log('关键词热度榜', res);
|
||||
// 这里需要根据API返回的数据结构处理成tagRows需要的格式
|
||||
@ -276,6 +380,9 @@ const getNewKeywordList = async () => {
|
||||
industry_id: selectedIndustry.value,
|
||||
time_dimension: selectedTimePeriod.value,
|
||||
};
|
||||
if (selectedSubCategory.value != 0) {
|
||||
params['industry_id'] = selectedSubCategory.value;
|
||||
}
|
||||
const res = await fetchNewKeywordList(params);
|
||||
// 这里需要根据API返回的数据结构处理成tagRows需要的格式
|
||||
keywordList.value = res;
|
||||
@ -307,8 +414,21 @@ const drawChart = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const search = () => {
|
||||
getKeywordTrendsList();
|
||||
getIndustryEmotions();
|
||||
getNewKeywordList();
|
||||
};
|
||||
|
||||
// 监听筛选条件变化
|
||||
watch([selectedIndustry, selectedTimePeriod], () => {
|
||||
watch([selectedTimePeriod, selectedSubCategory], () => {
|
||||
getKeywordTrendsList();
|
||||
getIndustryEmotions();
|
||||
getNewKeywordList();
|
||||
});
|
||||
|
||||
watch([selectedIndustry], () => {
|
||||
selectedSubCategory.value = 0;
|
||||
getKeywordTrendsList();
|
||||
getIndustryEmotions();
|
||||
getNewKeywordList();
|
||||
@ -319,22 +439,6 @@ onMounted(() => {
|
||||
getIndustryEmotions();
|
||||
getNewKeywordList();
|
||||
});
|
||||
|
||||
// const chartData = computed(() => {
|
||||
// const result = [
|
||||
// { name: '正面', value: 0, color: '#25C883' },
|
||||
// { name: '中性', value: 0, color: '#FFAA16' },
|
||||
// { name: '负面', value: 0, color: '#F64B31' },
|
||||
// ];
|
||||
|
||||
// rawData.value.forEach((item) => {
|
||||
// if (item.felling === 2) result[0].value++;
|
||||
// else if (item.felling === 1) result[1].value++;
|
||||
// else result[2].value++;
|
||||
// });
|
||||
|
||||
// return result.filter((item) => item.value > 0); // 过滤空数据
|
||||
// });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -33,17 +33,17 @@
|
||||
<a-tag
|
||||
size="Medium"
|
||||
v-for="item in subCategories"
|
||||
:key="item.value"
|
||||
:key="item.id"
|
||||
:checkable="true"
|
||||
:checked="selectedSubCategory == item.value"
|
||||
@check="handleSubCategoryCheck(item.value)"
|
||||
:checked="selectedSubCategory == item.id"
|
||||
@check="handleSubCategoryCheck(item.id)"
|
||||
style="padding: 4px 16px; border-radius: 30px; height: 28px"
|
||||
:style="
|
||||
selectedSubCategory == item.value
|
||||
selectedSubCategory == item.id
|
||||
? 'color: #6d4cfe; background-color: #f0edff'
|
||||
: 'color: #3C4043; background-color: #F7F8FA'
|
||||
"
|
||||
>{{ item.label }}</a-tag
|
||||
>{{ item.name }}</a-tag
|
||||
>
|
||||
</a-space>
|
||||
</a-space>
|
||||
@ -77,32 +77,36 @@
|
||||
<!-- Use the default slot to avoid extra spaces -->
|
||||
<template #default>搜索</template>
|
||||
</a-button>
|
||||
<a-button type="primary" style="background-color: #fff; color: #000">
|
||||
<template #icon>
|
||||
<icon-refresh />
|
||||
</template>
|
||||
<!-- Use the default slot to avoid extra spaces -->
|
||||
<template #default>重置</template>
|
||||
</a-button>
|
||||
<div
|
||||
@click="handleReset"
|
||||
style="
|
||||
width: 92px;
|
||||
height: 32px;
|
||||
font-size: 14px;
|
||||
color: #3c4043;
|
||||
border: 1px solid #d7d7d9;
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
border-radius: 4px;
|
||||
"
|
||||
>
|
||||
<icon-refresh></icon-refresh>
|
||||
<span>重置</span>
|
||||
</div>
|
||||
</a-space>
|
||||
</a-space>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import { fetchIndustriesTree, fetchIndustryTopics, fetchIndustryTopicDetail } from '@/api/all/index';
|
||||
import star1 from '@/assets/img/hottranslation/star-fill1.png';
|
||||
import star2 from '@/assets/img/hottranslation/star-fill2.png';
|
||||
import star3 from '@/assets/img/hottranslation/star-fill3.png';
|
||||
import star4 from '@/assets/img/hottranslation/star-fill4.png';
|
||||
import star5 from '@/assets/img/hottranslation/star-fill5.png';
|
||||
const starImages = [star1, star2, star3, star4, star5];
|
||||
import { fetchIndustriesTree } from '@/api/all/index';
|
||||
|
||||
// 行业大类
|
||||
const industriesTree = ref([]);
|
||||
// 数据状态
|
||||
const selectedIndustry = ref();
|
||||
const selectedSubCategory = ref('all');
|
||||
const selectedSubCategory = ref(0);
|
||||
const selectedTimePeriod = ref('7');
|
||||
|
||||
// 暴露这些状态给父组件
|
||||
@ -111,20 +115,8 @@ defineExpose({
|
||||
selectedSubCategory,
|
||||
selectedTimePeriod,
|
||||
});
|
||||
// 行业热门话题洞察
|
||||
const dataList = ref([]);
|
||||
// 显示详情
|
||||
const visible = ref(false);
|
||||
const topicInfo = ref({});
|
||||
// 二级类目选项
|
||||
const subCategories = [
|
||||
{ value: 'all', label: '全部' },
|
||||
{ value: 'airline', label: '航司' },
|
||||
{ value: 'hotel', label: '酒店' },
|
||||
{ value: 'entertainment', label: '玩乐' },
|
||||
{ value: 'cruise', label: '游轮' },
|
||||
];
|
||||
|
||||
const subCategories = ref([]);
|
||||
// 时间周期选项
|
||||
const timePeriods = [
|
||||
{
|
||||
@ -141,6 +133,28 @@ const timePeriods = [
|
||||
},
|
||||
];
|
||||
|
||||
const handleIndustryCheck = (id) => {
|
||||
selectedIndustry.value = id;
|
||||
console.log(industriesTree.value);
|
||||
for (let i = 0; i < industriesTree.value.length; i++) {
|
||||
if (industriesTree.value[i].id == id) {
|
||||
subCategories.value = [];
|
||||
subCategories.value = [...industriesTree.value[i].children];
|
||||
subCategories.value.unshift({ id: 0, name: '全部' });
|
||||
selectedSubCategory.value = 0;
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubCategoryCheck = (id) => {
|
||||
selectedSubCategory.value = id;
|
||||
};
|
||||
|
||||
const handleTimePeriodCheck = (value) => {
|
||||
selectedTimePeriod.value = value;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getIndustriesTree();
|
||||
});
|
||||
@ -149,52 +163,21 @@ const getIndustriesTree = async () => {
|
||||
const res = await fetchIndustriesTree();
|
||||
industriesTree.value = res;
|
||||
selectedIndustry.value = res[0].id;
|
||||
getIndustryTopics();
|
||||
selectedSubCategory.value = 0;
|
||||
subCategories.value = [...industriesTree.value[0].children];
|
||||
subCategories.value.unshift({ id: 0, name: '全部' });
|
||||
};
|
||||
|
||||
// 行业热门话题
|
||||
const getIndustryTopics = async () => {
|
||||
let parms = {
|
||||
industry_id: selectedIndustry.value,
|
||||
time_dimension: selectedTimePeriod.value,
|
||||
};
|
||||
const res = await fetchIndustryTopics(parms);
|
||||
dataList.value = res;
|
||||
};
|
||||
const handleIndustryCheck = (value) => {
|
||||
selectedIndustry.value = value;
|
||||
};
|
||||
|
||||
const handleSubCategoryCheck = (value) => {
|
||||
selectedSubCategory.value = value;
|
||||
};
|
||||
|
||||
const handleTimePeriodCheck = (value) => {
|
||||
selectedTimePeriod.value = value;
|
||||
};
|
||||
|
||||
// 详情
|
||||
const gotoDetail = async (record) => {
|
||||
console.log(record);
|
||||
const res = await fetchIndustryTopicDetail(record.id);
|
||||
console.log(res);
|
||||
visible.value = true;
|
||||
topicInfo.value = res;
|
||||
};
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'search'): void;
|
||||
}>();
|
||||
// 搜索
|
||||
const handleSearch = () => {
|
||||
getIndustryTopics();
|
||||
emit('search');
|
||||
};
|
||||
|
||||
// 弹窗的取消
|
||||
const handleCancel = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
// 弹窗的确定
|
||||
const handleBeforeOk = () => {
|
||||
visible.value = false;
|
||||
const handleReset = () => {
|
||||
selectedIndustry.value = industriesTree.value[0].id;
|
||||
selectedSubCategory.value = 0;
|
||||
selectedTimePeriod.value = '7';
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view>
|
||||
<topHeader ref="topHeaderRef"></topHeader>
|
||||
<topHeader ref="topHeaderRef" @search="search"></topHeader>
|
||||
|
||||
<!-- 用户痛点观察 -->
|
||||
<a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 24px; margin: 24px 0">
|
||||
@ -98,7 +98,7 @@
|
||||
<span style="margin-right: 16px; width: 60px; font-size: 12px">原始来源 </span>
|
||||
<a-space direction="vertical" style="margin-left: 15px">
|
||||
<a-space v-for="item in topicInfo.user_pain_point_sources" :key="item">
|
||||
<a-link style="background-color: initial" :href="item.link">{{ item.title }}</a-link>
|
||||
<a-link style="background-color: initial" :href="item.link" target="_blank">{{ item.title }}</a-link>
|
||||
<img src="@/assets/img/hottranslation/xhs.png" style="width: 16px; height: 16px" />
|
||||
</a-space>
|
||||
</a-space>
|
||||
@ -140,6 +140,9 @@ const getUserPainPointsList = async () => {
|
||||
industry_id: selectedIndustry.value,
|
||||
time_dimension: selectedTimePeriod.value,
|
||||
};
|
||||
if (selectedSubCategory.value != 0) {
|
||||
params['industry_id'] = selectedSubCategory.value;
|
||||
}
|
||||
const res = await fetchUserPainPointsList(params);
|
||||
console.log('关键词热度榜', res);
|
||||
// 这里需要根据API返回的数据结构处理成tagRows需要的格式
|
||||
@ -155,13 +158,16 @@ const handleOk = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
// 监听筛选条件变化
|
||||
watch([selectedIndustry, selectedTimePeriod], () => {
|
||||
watch([selectedIndustry, selectedTimePeriod, selectedSubCategory], () => {
|
||||
getUserPainPointsList();
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getUserPainPointsList();
|
||||
});
|
||||
const search = () => {
|
||||
getUserPainPointsList();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<view>
|
||||
<topHeader ref="topHeaderRef"></topHeader>
|
||||
<topHeader ref="topHeaderRef" @search="search"></topHeader>
|
||||
<a-space style="width: 100%; display: flex">
|
||||
<a-space direction="vertical" style="background-color: #fff; padding: 24px; flex: 1">
|
||||
<a-space align="center">
|
||||
@ -153,19 +153,29 @@ const genderValueData = ref([]);
|
||||
const ageValueData = ref([]);
|
||||
const geoList = ref([]);
|
||||
// 监听筛选条件变化
|
||||
watch([selectedIndustry, selectedTimePeriod], () => {
|
||||
watch([selectedIndustry, selectedTimePeriod, selectedSubCategory], () => {
|
||||
getAgeDistributionsList();
|
||||
getGeoDistributionsList();
|
||||
getGenderDistributionsList();
|
||||
drawChinaMap();
|
||||
});
|
||||
|
||||
const search = () => {
|
||||
getAgeDistributionsList();
|
||||
getGeoDistributionsList();
|
||||
getGenderDistributionsList();
|
||||
drawChinaMap();
|
||||
};
|
||||
|
||||
// 获取年龄分布列表
|
||||
const getAgeDistributionsList = async () => {
|
||||
const params = {
|
||||
industry_id: selectedIndustry.value,
|
||||
time_dimension: selectedTimePeriod.value,
|
||||
};
|
||||
if (selectedSubCategory.value != 0) {
|
||||
parms['industry_id'] = selectedSubCategory.value;
|
||||
}
|
||||
const res = await fetchAgeDistributionsList(params);
|
||||
console.log('年龄分布：', res);
|
||||
ageValueData.value = res;
|
||||
@ -179,6 +189,9 @@ const getGeoDistributionsList = async () => {
|
||||
industry_id: selectedIndustry.value,
|
||||
time_dimension: selectedTimePeriod.value,
|
||||
};
|
||||
if (selectedSubCategory.value != 0) {
|
||||
parms['industry_id'] = selectedSubCategory.value;
|
||||
}
|
||||
const res = await fetchGeoDistributionsList(params);
|
||||
console.log('地理分布：', res);
|
||||
geoList.value = res;
|
||||
@ -189,6 +202,9 @@ const getGenderDistributionsList = async () => {
|
||||
industry_id: selectedIndustry.value,
|
||||
time_dimension: selectedTimePeriod.value,
|
||||
};
|
||||
if (selectedSubCategory.value != 0) {
|
||||
parms['industry_id'] = selectedSubCategory.value;
|
||||
}
|
||||
const res = await fetchGenderDistributionsList(params);
|
||||
genderData.value = [];
|
||||
genderData.value = [...res];
|
||||
|
||||
768
src/views/components/login/PuzzleVerification.vue
Normal file
768
src/views/components/login/PuzzleVerification.vue
Normal file
@ -0,0 +1,768 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
v-show="show"
|
||||
:class="['vue-puzzle-vcode', { show_: show }]"
|
||||
@mousedown="onCloseMouseDown"
|
||||
@mouseup="onCloseMouseUp"
|
||||
@touchstart="onCloseMouseDown"
|
||||
@touchend="onCloseMouseUp"
|
||||
>
|
||||
<div class="vue-auth-box_" @mousedown.stop @touchstart.stop>
|
||||
<div style="margin-bottom: 10px; fonst-size: 16px; color: #211f24">输入图形验证码</div>
|
||||
<div class="auth-body_" :style="`height: ${canvasHeight}px`">
|
||||
<!-- 主图，有缺口 -->
|
||||
<canvas
|
||||
style="border-radius: 10px"
|
||||
ref="canvas1"
|
||||
:width="canvasWidth"
|
||||
:height="canvasHeight"
|
||||
:style="`width:${canvasWidth}px;height:${canvasHeight}px`"
|
||||
/>
|
||||
<!-- 成功后显示的完整图 -->
|
||||
<canvas
|
||||
ref="canvas3"
|
||||
:class="['auth-canvas3_', { show: isSuccess }]"
|
||||
:width="canvasWidth"
|
||||
:height="canvasHeight"
|
||||
:style="`width:${canvasWidth}px;height:${canvasHeight}px`"
|
||||
/>
|
||||
<!-- 小图 -->
|
||||
<canvas
|
||||
:width="puzzleBaseSize"
|
||||
class="auth-canvas2_"
|
||||
:height="canvasHeight"
|
||||
ref="canvas2"
|
||||
:style="`width:${puzzleBaseSize}px;height:${canvasHeight}px;transform:translateX(${
|
||||
styleWidth -
|
||||
sliderBaseSize -
|
||||
(puzzleBaseSize - sliderBaseSize) * ((styleWidth - sliderBaseSize) / (canvasWidth - sliderBaseSize))
|
||||
}px)`"
|
||||
/>
|
||||
|
||||
<div :class="['info-box_', { show: infoBoxShow }, { fail: infoBoxFail }]">
|
||||
{{ infoText }}
|
||||
</div>
|
||||
<div
|
||||
:class="['flash_', { show: !isSuccess }]"
|
||||
:style="`transform: translateX(${
|
||||
isSuccess ? `${canvasWidth + canvasHeight * 0.578}px` : `-${canvasHeight * 0.578}px`
|
||||
}) skew(-30deg, 0);`"
|
||||
></div>
|
||||
<img
|
||||
class="reset_"
|
||||
@click="reset"
|
||||
src="https://zahour-sensor.oss-cn-beijing.aliyuncs.com/applet/zayn/%E5%88%B7%E6%96%B0.png"
|
||||
/>
|
||||
</div>
|
||||
<div class="auth-control_">
|
||||
<div class="range-box" :style="`height:${sliderBaseSize}px`">
|
||||
<div class="range-text">{{ sliderText }}</div>
|
||||
<div class="range-slider" ref="rangeSlider" :style="`width:${styleWidth}px`">
|
||||
<div
|
||||
:class="['range-btn', { isDown: mouseDown }]"
|
||||
:style="`width:${sliderBaseSize}px`"
|
||||
@mousedown="onRangeMouseDown($event)"
|
||||
@touchstart="onRangeMouseDown($event)"
|
||||
>
|
||||
<!-- 按钮内部样式 -->
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
canvasWidth: { type: Number, default: 350 }, // 主canvas的宽
|
||||
canvasHeight: { type: Number, default: 200 }, // 主canvas的高
|
||||
// 是否出现，由父级控制
|
||||
show: { type: Boolean, default: true },
|
||||
puzzleScale: { type: Number, default: 1 }, // 拼图块的大小缩放比例
|
||||
sliderSize: { type: Number, default: 50 }, // 滑块的大小
|
||||
range: { type: Number, default: 10 }, // 允许的偏差值
|
||||
// 所有的背景图片
|
||||
imgs: {
|
||||
type: Array,
|
||||
},
|
||||
successText: {
|
||||
type: String,
|
||||
default: '验证通过！',
|
||||
},
|
||||
failText: {
|
||||
type: String,
|
||||
default: '验证失败，请重试',
|
||||
},
|
||||
sliderText: {
|
||||
type: String,
|
||||
default: '向右滑动填充拼图',
|
||||
},
|
||||
});
|
||||
|
||||
const verSuccess = ref(false);
|
||||
const mouseDown = ref(false); // 鼠标是否在按钮上按下
|
||||
const startWidth = ref(50); // 鼠标点下去时父级的width
|
||||
const startX = ref(0); // 鼠标按下时的X
|
||||
const newX = ref(0); // 鼠标当前的偏移X
|
||||
const pinX = ref(0); // 拼图的起始X
|
||||
const pinY = ref(0); // 拼图的起始Y
|
||||
const loading = ref(false); // 是否正在加在中，主要是等图片onload
|
||||
const isCanSlide = ref(false); // 是否可以拉动滑动条
|
||||
const error = ref(false); // 图片加在失败会出现这个，提示用户手动刷新
|
||||
const infoBoxShow = ref(false); // 提示信息是否出现
|
||||
const infoText = ref(''); // 提示等信息
|
||||
const infoBoxFail = ref(false); // 是否验证失败
|
||||
const timer1 = ref(null); // setTimout1
|
||||
const closeDown = ref(false); // 为了解决Mac上的click BUG
|
||||
const isSuccess = ref(false); // 验证成功
|
||||
const imgIndex = ref(-1); // 用于自定义图片时不会随机到重复的图片
|
||||
const isSubmting = ref(false); // 是否正在判定，主要用于判定中不能点击重置按钮
|
||||
|
||||
const canvas1 = ref(null);
|
||||
const canvas2 = ref(null);
|
||||
const canvas3 = ref(null);
|
||||
const rangeSlider = ref(null);
|
||||
|
||||
// 计算属性
|
||||
const styleWidth = computed(() => {
|
||||
const w = startWidth.value + newX.value - startX.value;
|
||||
return w < sliderBaseSize.value ? sliderBaseSize.value : w > props.canvasWidth ? props.canvasWidth : w;
|
||||
});
|
||||
|
||||
const puzzleBaseSize = computed(() => {
|
||||
return Math.round(Math.max(Math.min(props.puzzleScale, 2), 0.2) * 52.5 + 6);
|
||||
});
|
||||
|
||||
const sliderBaseSize = computed(() => {
|
||||
return Math.max(Math.min(Math.round(props.sliderSize), Math.round(props.canvasWidth * 0.5)), 10);
|
||||
});
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
document.addEventListener('mousemove', onRangeMouseMove, { passive: false });
|
||||
document.addEventListener('mouseup', onRangeMouseUp, { passive: false });
|
||||
document.addEventListener('touchmove', onRangeMouseMove, { passive: false });
|
||||
document.addEventListener('touchend', onRangeMouseUp, { passive: false });
|
||||
if (props.show) {
|
||||
document.body.classList.add('vue-puzzle-overflow');
|
||||
reset();
|
||||
}
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
clearTimeout(timer1.value);
|
||||
document.removeEventListener('mousemove', onRangeMouseMove, { passive: false });
|
||||
document.removeEventListener('mouseup', onRangeMouseUp, { passive: false });
|
||||
document.removeEventListener('touchmove', onRangeMouseMove, { passive: false });
|
||||
document.removeEventListener('touchend', onRangeMouseUp, { passive: false });
|
||||
});
|
||||
|
||||
// 监听
|
||||
watch(
|
||||
() => props.show,
|
||||
(newV) => {
|
||||
if (newV) {
|
||||
document.body.classList.add('vue-puzzle-overflow');
|
||||
reset();
|
||||
} else {
|
||||
isSubmting.value = false;
|
||||
isSuccess.value = false;
|
||||
infoBoxShow.value = false;
|
||||
document.body.classList.remove('vue-puzzle-overflow');
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
// 方法
|
||||
function onClose() {
|
||||
if (!mouseDown.value && !isSubmting.value) {
|
||||
clearTimeout(timer1.value);
|
||||
}
|
||||
}
|
||||
|
||||
function onCloseMouseDown() {
|
||||
closeDown.value = true;
|
||||
init(true);
|
||||
//给父组件传一个状态
|
||||
emit('submit', 'F');
|
||||
}
|
||||
|
||||
function onCloseMouseUp() {
|
||||
if (closeDown.value) {
|
||||
onClose();
|
||||
}
|
||||
closeDown.value = false;
|
||||
}
|
||||
|
||||
function onRangeMouseDown(e) {
|
||||
if (isCanSlide.value) {
|
||||
mouseDown.value = true;
|
||||
startWidth.value = rangeSlider.value.clientWidth;
|
||||
newX.value = e.clientX || e.changedTouches[0].clientX;
|
||||
startX.value = e.clientX || e.changedTouches[0].clientX;
|
||||
}
|
||||
}
|
||||
|
||||
function onRangeMouseMove(e) {
|
||||
if (mouseDown.value) {
|
||||
newX.value = e.clientX || e.changedTouches[0].clientX;
|
||||
}
|
||||
}
|
||||
|
||||
function onRangeMouseUp() {
|
||||
if (mouseDown.value) {
|
||||
mouseDown.value = false;
|
||||
submit();
|
||||
}
|
||||
}
|
||||
|
||||
function init(withCanvas) {
|
||||
if (loading.value && !withCanvas) {
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
isCanSlide.value = false;
|
||||
const c = canvas1.value;
|
||||
const c2 = canvas2.value;
|
||||
const c3 = canvas3.value;
|
||||
const ctx = c.getContext('2d', { willReadFrequently: true });
|
||||
const ctx2 = c2.getContext('2d', { willReadFrequently: true });
|
||||
const ctx3 = c3.getContext('2d', { willReadFrequently: true });
|
||||
const isFirefox = navigator.userAgent.indexOf('Firefox') >= 0 && navigator.userAgent.indexOf('Windows') >= 0; // 是windows版火狐
|
||||
const img = document.createElement('img');
|
||||
ctx.fillStyle = 'rgba(255,255,255,1)';
|
||||
ctx3.fillStyle = 'rgba(255,255,255,1)';
|
||||
ctx.clearRect(0, 0, props.canvasWidth, props.canvasHeight);
|
||||
ctx2.clearRect(0, 0, props.canvasWidth, props.canvasHeight);
|
||||
|
||||
pinX.value = getRandom(puzzleBaseSize.value, props.canvasWidth - puzzleBaseSize.value - 20); // 留20的边距
|
||||
pinY.value = getRandom(20, props.canvasHeight - puzzleBaseSize.value - 20); // 主图高度 - 拼图块自身高度 - 20边距
|
||||
img.crossOrigin = 'anonymous'; // 匿名，想要获取跨域的图片
|
||||
img.onload = () => {
|
||||
const [x, y, w, h] = makeImgSize(img);
|
||||
ctx.save();
|
||||
paintBrick(ctx);
|
||||
ctx.closePath();
|
||||
if (!isFirefox) {
|
||||
ctx.shadowOffsetX = 0;
|
||||
ctx.shadowOffsetY = 0;
|
||||
ctx.shadowColor = '#000';
|
||||
ctx.shadowBlur = 0;
|
||||
ctx.fill();
|
||||
ctx.clip();
|
||||
} else {
|
||||
ctx.clip();
|
||||
ctx.save();
|
||||
ctx.shadowOffsetX = 0;
|
||||
ctx.shadowOffsetY = 0;
|
||||
ctx.shadowColor = '#000';
|
||||
ctx.shadowBlur = 0;
|
||||
ctx.fill();
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
ctx.drawImage(img, x, y, w, h);
|
||||
ctx3.fillRect(0, 0, props.canvasWidth, props.canvasHeight);
|
||||
ctx3.drawImage(img, x, y, w, h);
|
||||
|
||||
ctx.globalCompositeOperation = 'source-atop';
|
||||
paintBrick(ctx);
|
||||
|
||||
ctx.arc(
|
||||
pinX.value + Math.ceil(puzzleBaseSize.value / 2),
|
||||
pinY.value + Math.ceil(puzzleBaseSize.value / 2),
|
||||
puzzleBaseSize.value * 1.2,
|
||||
0,
|
||||
Math.PI * 2,
|
||||
true,
|
||||
);
|
||||
ctx.closePath();
|
||||
ctx.shadowColor = 'rgba(255, 255, 255, .8)';
|
||||
ctx.shadowOffsetX = -1;
|
||||
ctx.shadowOffsetY = -1;
|
||||
ctx.shadowBlur = Math.min(Math.ceil(8 * props.puzzleScale), 12);
|
||||
ctx.fillStyle = '#ffffaa';
|
||||
ctx.fill();
|
||||
|
||||
const imgData = ctx.getImageData(
|
||||
pinX.value - 3, // 为了阴影 是从-3px开始截取，判定的时候要+3px
|
||||
pinY.value - 20,
|
||||
pinX.value + puzzleBaseSize.value + 5,
|
||||
pinY.value + puzzleBaseSize.value + 5,
|
||||
);
|
||||
ctx2.putImageData(imgData, 0, pinY.value - 20);
|
||||
|
||||
ctx.restore();
|
||||
ctx.clearRect(0, 0, props.canvasWidth, props.canvasHeight);
|
||||
|
||||
ctx.save();
|
||||
paintBrick(ctx);
|
||||
ctx.globalAlpha = 1;
|
||||
ctx.fillStyle = '#ffffff';
|
||||
ctx.fill();
|
||||
ctx.restore();
|
||||
|
||||
ctx.save();
|
||||
ctx.globalCompositeOperation = 'source-atop';
|
||||
paintBrick(ctx);
|
||||
ctx.arc(
|
||||
pinX.value + Math.ceil(puzzleBaseSize.value / 2),
|
||||
pinY.value + Math.ceil(puzzleBaseSize.value / 2),
|
||||
puzzleBaseSize.value * 1.2,
|
||||
0,
|
||||
Math.PI * 2,
|
||||
true,
|
||||
);
|
||||
ctx.shadowColor = '#ffffff';
|
||||
ctx.shadowOffsetX = 2;
|
||||
ctx.shadowOffsetY = 2;
|
||||
ctx.shadowBlur = 16;
|
||||
ctx.fill();
|
||||
ctx.restore();
|
||||
|
||||
ctx.save();
|
||||
ctx.globalCompositeOperation = 'destination-over';
|
||||
ctx.drawImage(img, x, y, w, h);
|
||||
ctx.restore();
|
||||
|
||||
loading.value = false;
|
||||
isCanSlide.value = true;
|
||||
};
|
||||
img.onerror = () => {
|
||||
init(true); // 如果图片加载错误就重新来，并强制用canvas随机作图
|
||||
};
|
||||
|
||||
if (!withCanvas && props.imgs && props.imgs.length) {
|
||||
let randomNum = getRandom(0, props.imgs.length - 1);
|
||||
if (randomNum === imgIndex.value) {
|
||||
if (randomNum === props.imgs.length - 1) {
|
||||
randomNum = 0;
|
||||
} else {
|
||||
randomNum++;
|
||||
}
|
||||
}
|
||||
imgIndex.value = randomNum;
|
||||
img.src = props.imgs[randomNum];
|
||||
} else {
|
||||
img.src = makeImgWithCanvas();
|
||||
}
|
||||
}
|
||||
|
||||
function getRandom(min, max) {
|
||||
return Math.ceil(Math.random() * (max - min) + min);
|
||||
}
|
||||
|
||||
function makeImgSize(img) {
|
||||
const imgScale = img.width / img.height;
|
||||
const canvasScale = props.canvasWidth / props.canvasHeight;
|
||||
let x = 0,
|
||||
y = 0,
|
||||
w = 0,
|
||||
h = 0;
|
||||
if (imgScale > canvasScale) {
|
||||
h = props.canvasHeight;
|
||||
w = imgScale * h;
|
||||
y = 0;
|
||||
x = (props.canvasWidth - w) / 2;
|
||||
} else {
|
||||
w = props.canvasWidth;
|
||||
h = w / imgScale;
|
||||
x = 0;
|
||||
y = (props.canvasHeight - h) / 2;
|
||||
}
|
||||
return [x, y, w, h];
|
||||
}
|
||||
|
||||
function paintBrick(ctx) {
|
||||
const moveL = Math.ceil(15 * props.puzzleScale); // 直线移动的基础距离
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(pinX.value, pinY.value);
|
||||
ctx.lineTo(pinX.value + moveL, pinY.value);
|
||||
ctx.arcTo(
|
||||
pinX.value + moveL,
|
||||
pinY.value - moveL / 2,
|
||||
pinX.value + moveL + moveL / 2,
|
||||
pinY.value - moveL / 2,
|
||||
moveL / 2,
|
||||
);
|
||||
ctx.arcTo(pinX.value + moveL + moveL, pinY.value - moveL / 2, pinX.value + moveL + moveL, pinY.value, moveL / 2);
|
||||
ctx.lineTo(pinX.value + moveL + moveL + moveL, pinY.value);
|
||||
ctx.lineTo(pinX.value + moveL + moveL + moveL, pinY.value + moveL);
|
||||
ctx.arcTo(
|
||||
pinX.value + moveL + moveL + moveL + moveL / 2,
|
||||
pinY.value + moveL,
|
||||
pinX.value + moveL + moveL + moveL + moveL / 2,
|
||||
pinY.value + moveL + moveL / 2,
|
||||
moveL / 2,
|
||||
);
|
||||
ctx.arcTo(
|
||||
pinX.value + moveL + moveL + moveL + moveL / 2,
|
||||
pinY.value + moveL + moveL,
|
||||
pinX.value + moveL + moveL + moveL,
|
||||
pinY.value + moveL + moveL,
|
||||
moveL / 2,
|
||||
);
|
||||
ctx.lineTo(pinX.value + moveL + moveL + moveL, pinY.value + moveL + moveL + moveL);
|
||||
ctx.lineTo(pinX.value, pinY.value + moveL + moveL + moveL);
|
||||
ctx.lineTo(pinX.value, pinY.value + moveL + moveL);
|
||||
|
||||
ctx.arcTo(
|
||||
pinX.value + moveL / 2,
|
||||
pinY.value + moveL + moveL,
|
||||
pinX.value + moveL / 2,
|
||||
pinY.value + moveL + moveL / 2,
|
||||
moveL / 2,
|
||||
);
|
||||
ctx.arcTo(pinX.value + moveL / 2, pinY.value + moveL, pinX.value, pinY.value + moveL, moveL / 2);
|
||||
ctx.lineTo(pinX.value, pinY.value);
|
||||
}
|
||||
|
||||
function makeImgWithCanvas() {
|
||||
const canvas = document.createElement('canvas');
|
||||
const ctx = canvas.getContext('2d', { willReadFrequently: true });
|
||||
canvas.width = props.canvasWidth;
|
||||
canvas.height = props.canvasHeight;
|
||||
ctx.fillStyle = `rgb(${getRandom(100, 255)},${getRandom(100, 255)},${getRandom(100, 255)})`;
|
||||
ctx.fillRect(0, 0, props.canvasWidth, props.canvasHeight);
|
||||
for (let i = 0; i < 12; i++) {
|
||||
ctx.fillStyle = `rgb(${getRandom(100, 255)},${getRandom(100, 255)},${getRandom(100, 255)})`;
|
||||
ctx.strokeStyle = `rgb(${getRandom(100, 255)},${getRandom(100, 255)},${getRandom(100, 255)})`;
|
||||
|
||||
if (getRandom(0, 2) > 1) {
|
||||
ctx.save();
|
||||
ctx.rotate((getRandom(-90, 90) * Math.PI) / 180);
|
||||
ctx.fillRect(
|
||||
getRandom(-20, canvas.width - 20),
|
||||
getRandom(-20, canvas.height - 20),
|
||||
getRandom(10, canvas.width / 2 + 10),
|
||||
getRandom(10, canvas.height / 2 + 10),
|
||||
);
|
||||
ctx.restore();
|
||||
} else {
|
||||
ctx.beginPath();
|
||||
const ran = getRandom(-Math.PI, Math.PI);
|
||||
ctx.arc(
|
||||
getRandom(0, canvas.width),
|
||||
getRandom(0, canvas.height),
|
||||
getRandom(10, canvas.height / 2 + 10),
|
||||
ran,
|
||||
ran + Math.PI * 1.5,
|
||||
);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
return canvas.toDataURL('image/png');
|
||||
}
|
||||
|
||||
function submit() {
|
||||
isSubmting.value = true;
|
||||
|
||||
console.log('pinX.value:', pinX.value);
|
||||
console.log('styleWidth.value:', styleWidth.value);
|
||||
console.log('sliderBaseSize.value:', sliderBaseSize.value);
|
||||
console.log('puzzleBaseSize.value:', puzzleBaseSize.value);
|
||||
console.log('props.canvasWidth:', props.canvasWidth);
|
||||
|
||||
const x = Math.abs(
|
||||
pinX.value -
|
||||
(styleWidth.value - sliderBaseSize.value) +
|
||||
(puzzleBaseSize.value - sliderBaseSize.value) *
|
||||
((styleWidth.value - sliderBaseSize.value) / (props.canvasWidth - sliderBaseSize.value)) -
|
||||
3,
|
||||
);
|
||||
|
||||
console.log('x:', x);
|
||||
|
||||
if (x < props.range) {
|
||||
infoText.value = props.successText;
|
||||
infoBoxFail.value = false;
|
||||
infoBoxShow.value = true;
|
||||
isCanSlide.value = false;
|
||||
isSuccess.value = false;
|
||||
clearTimeout(timer1.value);
|
||||
timer1.value = setTimeout(() => {
|
||||
isSubmting.value = false;
|
||||
verSuccess.value = true;
|
||||
emit('submit', 'F', verSuccess.value);
|
||||
reset();
|
||||
}, 800);
|
||||
} else {
|
||||
infoText.value = props.failText;
|
||||
infoBoxFail.value = true;
|
||||
infoBoxShow.value = true;
|
||||
isCanSlide.value = false;
|
||||
clearTimeout(timer1.value);
|
||||
timer1.value = setTimeout(() => {
|
||||
isSubmting.value = false;
|
||||
reset();
|
||||
}, 800);
|
||||
}
|
||||
}
|
||||
|
||||
function resetState() {
|
||||
infoBoxFail.value = false;
|
||||
infoBoxShow.value = false;
|
||||
isCanSlide.value = false;
|
||||
isSuccess.value = false;
|
||||
startWidth.value = sliderBaseSize.value; // 鼠标点下去时父级的width
|
||||
startX.value = 0; // 鼠标按下时的X
|
||||
newX.value = 0; // 鼠标当前的偏移X
|
||||
}
|
||||
|
||||
function reset() {
|
||||
if (isSubmting.value) {
|
||||
return;
|
||||
}
|
||||
resetState();
|
||||
init();
|
||||
}
|
||||
|
||||
const emit = defineEmits(['submit']);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vue-puzzle-vcode {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
z-index: 999;
|
||||
opacity: 1;
|
||||
pointer-events: none;
|
||||
transition: opacity 200ms;
|
||||
|
||||
&.show_ {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.vue-auth-box_ {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
user-select: none;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
|
||||
.auth-body_ {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 3px;
|
||||
|
||||
.info-box_ {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
font-size: 13px;
|
||||
background-color: #83ce3f;
|
||||
opacity: 0;
|
||||
transform: translateY(24px);
|
||||
transition: all 200ms;
|
||||
color: #fff;
|
||||
z-index: 10;
|
||||
|
||||
&.show {
|
||||
opacity: 0.95;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&.fail {
|
||||
background-color: #ce594b;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-canvas2_ {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 60px;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.auth-canvas3_ {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
transition: opacity 600ms;
|
||||
z-index: 3;
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.flash_ {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 30px;
|
||||
height: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
z-index: 3;
|
||||
|
||||
&.show {
|
||||
transition: transform 600ms;
|
||||
}
|
||||
}
|
||||
|
||||
.reset_ {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
width: 25px;
|
||||
height: auto;
|
||||
z-index: 12;
|
||||
cursor: pointer;
|
||||
transition: transform 200ms;
|
||||
transform: rotate(0deg);
|
||||
|
||||
&:hover {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.auth-control_ {
|
||||
.range-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background-color: #f7f8fa;
|
||||
margin-top: 20px;
|
||||
border-radius: 3px;
|
||||
height: 48px;
|
||||
// box-shadow: inset -2px -2px 4px rgba(50, 130, 251, 0.1), inset 2px 2px 4px rgba(34, 73, 132, 0.2);
|
||||
border-radius: 4px;
|
||||
|
||||
.range-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 14px;
|
||||
color: #b7bcd1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
background: -webkit-gradient(
|
||||
linear,
|
||||
left top,
|
||||
right top,
|
||||
color-stop(0, #4d4d4d),
|
||||
color-stop(0.4, #4d4d4d),
|
||||
color-stop(0.5, white),
|
||||
color-stop(0.6, #4d4d4d),
|
||||
color-stop(1, #4d4d4d)
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
-webkit-animation: animate 1.5s infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animate {
|
||||
from {
|
||||
background-position: -100px;
|
||||
}
|
||||
|
||||
to {
|
||||
background-position: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animate {
|
||||
from {
|
||||
background-position: -100px;
|
||||
}
|
||||
|
||||
to {
|
||||
background-position: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.range-slider {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 50px;
|
||||
border-radius: 3px;
|
||||
|
||||
.range-btn {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
right: 0;
|
||||
width: 50px;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
box-shadow: inset 0px -2px 4px rgba(0, 36, 90, 0.2), inset 0px 2px 4px rgba(194, 219, 255, 0.8);
|
||||
border-radius: 50%;
|
||||
|
||||
& > div {
|
||||
width: 0;
|
||||
height: 40%;
|
||||
transition: all 200ms;
|
||||
|
||||
&:nth-child(2) {
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
border: solid 1px #6aa0ff;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.isDown {
|
||||
& > div:first-child {
|
||||
border: solid 4px transparent;
|
||||
height: 0;
|
||||
border-right-color: #6aa0ff;
|
||||
}
|
||||
|
||||
& > div:nth-child(2) {
|
||||
border-width: 3px;
|
||||
height: 0;
|
||||
border-radius: 3px;
|
||||
margin: 0 6px;
|
||||
border-right-color: #6aa0ff;
|
||||
}
|
||||
|
||||
& > div:nth-child(3) {
|
||||
border: solid 4px transparent;
|
||||
height: 0;
|
||||
border-left-color: #6aa0ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vue-puzzle-overflow {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
</style>
|
||||
@ -1,3 +1,409 @@
|
||||
<template>
|
||||
<view>login页面</view>
|
||||
<div class="content">
|
||||
<img src="@/assets/img/Frame.svg" alt="" style="width: 480px; height: 480px; margin-right: 160px" />
|
||||
<a-space
|
||||
direction="vertical"
|
||||
size="large"
|
||||
style="width: 400px; height: 480px; background-color: #fff; border-radius: 8px; margin-top: 40px"
|
||||
align="center"
|
||||
>
|
||||
<img src="@/assets/img/LOGO.svg" alt="" style="width: 155px; height: 37px; margin-top: 49px" />
|
||||
<span style="font-size: 16px; color: #737478">AI营销工具</span>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="loginForm"
|
||||
:rules="formRules"
|
||||
auto-label-width
|
||||
style="width: 320px; margin-top: 20px"
|
||||
>
|
||||
<a-form-item field="username" hide-label>
|
||||
<a-input
|
||||
v-model="loginForm.username"
|
||||
placeholder="输入手机号"
|
||||
class="form-input"
|
||||
style="margin-top: 48px; border-radius: 8px"
|
||||
clearable
|
||||
@blur="validateField('username')"
|
||||
@input="clearError('username')"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item field="code" hide-label>
|
||||
<div
|
||||
class="form-input"
|
||||
style="display: flex; justify-content: space-between; align-items: center; border-radius: 8px"
|
||||
>
|
||||
<a-input
|
||||
v-model="loginForm.code"
|
||||
placeholder="验证码"
|
||||
style="background-color: #fff; border: none"
|
||||
@blur="validateField('code')"
|
||||
@input="clearError('code')"
|
||||
allow-clear
|
||||
maxlength="6"
|
||||
/>
|
||||
<span
|
||||
style="
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
margin-right: 16px;
|
||||
width: 120px;
|
||||
text-align: right;
|
||||
"
|
||||
:style="{
|
||||
color: countdown > 0 || hasGetCode ? '#6D4CFE' : '#211F24',
|
||||
cursor: countdown > 0 ? 'not-allowed' : 'pointer',
|
||||
}"
|
||||
@click="getCode"
|
||||
>{{ countdown > 0 ? `${countdown}s` : hasGetCode ? '重新发送' : '发送验证码' }}</span
|
||||
>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item hide-label>
|
||||
<div
|
||||
type="primary"
|
||||
style="
|
||||
width: 480px;
|
||||
height: 48px;
|
||||
font-size: 16px;
|
||||
border-radius: 8px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 48px;
|
||||
"
|
||||
:style="{ backgroundColor: isFormValid && hasCheck ? '#6D4CFE' : '#C5B7FF' }"
|
||||
@click="handleSubmit"
|
||||
:disabled="!isFormValid || !hasCheck"
|
||||
>
|
||||
{{ isLogin ? '登录' : '注册并开通企业账号' }}
|
||||
</div>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<a-space style="margin-top: 16px; color: #737478; font-size: 12px">
|
||||
<a-checkbox v-model="hasCheck" style="margin-right: 0px; font-size: 12px"
|
||||
>{{ isLogin ? '登录' : '注册' }}即代表同意</a-checkbox
|
||||
>
|
||||
<a-link href="link" class="form-link" target="_blank">用户协议</a-link>
|
||||
<span>和</span>
|
||||
<a-link href="link" class="form-link" target="_blank">隐私政策</a-link>
|
||||
</a-space>
|
||||
</a-space>
|
||||
</div>
|
||||
<PuzzleVerification
|
||||
:show="isVerificationVisible"
|
||||
@submit="handleVerificationSubmit"
|
||||
@cancel="isVerificationVisible = false"
|
||||
/>
|
||||
<a-modal :visible="visible" @ok="handleOk" @cancel="handleCancel" unmountOnClose hide-cancel>
|
||||
<template #title>
|
||||
<span style="text-align: left; width: 100%">选择账号</span>
|
||||
</template>
|
||||
<div class="account-bind-container">
|
||||
<a-card :bordered="false" class="bind-card">
|
||||
<div class="bind-header">
|
||||
<a-typography-text class="phone-number">{{ phoneNumber }} 已在以下企业绑定了账号</a-typography-text>
|
||||
</div>
|
||||
|
||||
<a-list :bordered="false" :split="false" class="account-list">
|
||||
<a-list-item
|
||||
v-for="(account, index) in accounts"
|
||||
:key="index"
|
||||
class="account-item"
|
||||
:class="{ selected: selectedAccount === index }"
|
||||
@click="selectAccount(index)"
|
||||
>
|
||||
<a-list-item-meta>
|
||||
<template #title>
|
||||
<div style="display: flex; align-items: center; gap: 12px">
|
||||
<a-checkbox :model-value="selectedAccount == index" />
|
||||
<a-typography-text>{{ account.name }}</a-typography-text>
|
||||
</div>
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
</a-card>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import PuzzleVerification from './PuzzleVerification.vue';
|
||||
import { fetchLoginCaptCha } from '@/api/all/login';
|
||||
import { ref, reactive, onUnmounted, computed } from 'vue';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import router from '@/router';
|
||||
const $message = Message;
|
||||
|
||||
const formRef = ref();
|
||||
const countdown = ref(0);
|
||||
let timer = ref();
|
||||
const isLogin = ref(false);
|
||||
const isVerificationVisible = ref(false);
|
||||
const visible = ref(false);
|
||||
const hasGetCode = ref(false);
|
||||
const submitting = ref(false);
|
||||
const hasCheck = ref(false);
|
||||
const phoneNumber = ref('13616544933');
|
||||
const selectedAccount = ref(0);
|
||||
|
||||
const accounts = ref([{ name: '灵机用户291094' }, { name: '灵机用户291094' }]);
|
||||
|
||||
const loginForm = reactive({
|
||||
username: '',
|
||||
code: '',
|
||||
});
|
||||
|
||||
// 表单校验规则
|
||||
const formRules = {
|
||||
username: [
|
||||
{
|
||||
required: true,
|
||||
message: '请填写手机号',
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
{
|
||||
validator: (value: string, callback: (error?: string) => void) => {
|
||||
if (!/^1[3-9]\d{9}$/.test(value)) {
|
||||
callback('手机号格式不正确');
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: '请填写验证码',
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
{
|
||||
validator: (value: string, callback: (error?: string) => void) => {
|
||||
if (!/^\d{6}$/.test(value)) {
|
||||
callback('验证码必须是6位数字');
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// 表单是否有效
|
||||
const isFormValid = computed(() => {
|
||||
return (
|
||||
loginForm.username.trim() !== '' &&
|
||||
/^1[3-9]\d{9}$/.test(loginForm.username) &&
|
||||
loginForm.code.trim() !== '' &&
|
||||
/^\d{6}$/.test(loginForm.code)
|
||||
);
|
||||
});
|
||||
|
||||
const selectAccount = (index: any) => {
|
||||
selectedAccount.value = index;
|
||||
};
|
||||
|
||||
const validateField = (field: string) => {
|
||||
formRef.value.validateField(field);
|
||||
};
|
||||
|
||||
const clearError = (field: string) => {
|
||||
formRef.value.clearValidate(field);
|
||||
};
|
||||
|
||||
const handleOk = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
const getCode = async () => {
|
||||
if (countdown.value > 0) return;
|
||||
|
||||
// 先重置验证状态
|
||||
formRef.value.clearValidate('username');
|
||||
|
||||
// 验证手机号字段
|
||||
try {
|
||||
const result = await formRef.value.validateField('username');
|
||||
// 只有当验证通过时才会显示滑块验证
|
||||
if (result === true || result === undefined) {
|
||||
isVerificationVisible.value = true;
|
||||
}
|
||||
} catch (error) {
|
||||
// 验证失败，错误信息会自动显示
|
||||
console.log('手机号验证失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 验证码验证通过后
|
||||
const handleVerificationSubmit = async () => {
|
||||
isVerificationVisible.value = false;
|
||||
startCountdown();
|
||||
|
||||
try {
|
||||
await fetchLoginCaptCha({ mobile: loginForm.username });
|
||||
$message.success('验证码发送成功');
|
||||
} catch (error) {
|
||||
$message.error('验证码发送失败');
|
||||
// 重置倒计时
|
||||
countdown.value = 0;
|
||||
clearInterval(timer.value);
|
||||
}
|
||||
};
|
||||
|
||||
// 提交表单
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
// 校验所有字段
|
||||
await formRef.value.validate();
|
||||
|
||||
if (!hasCheck.value) {
|
||||
$message.error('请先勾选同意用户协议');
|
||||
return;
|
||||
}
|
||||
|
||||
submitting.value = true;
|
||||
// 调用登录/注册API
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||
|
||||
// 处理登录成功逻辑
|
||||
$message.success(isLogin.value ? '登录成功' : '注册成功');
|
||||
router.replace({ path: '/dataEngine', replace: true });
|
||||
} catch (error) {
|
||||
// 错误信息会显示在输入框下方
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 开始倒计时
|
||||
const startCountdown = () => {
|
||||
countdown.value = 60;
|
||||
hasGetCode.value = true;
|
||||
timer.value = setInterval(() => {
|
||||
countdown.value--;
|
||||
if (countdown.value <= 0) {
|
||||
clearInterval(timer.value as number);
|
||||
timer.value = null;
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
onUnmounted(() => {
|
||||
if (timer.value) {
|
||||
clearInterval(timer.value);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content {
|
||||
background-image: url('@/assets/img/BG.svg');
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-color: #f0edff;
|
||||
}
|
||||
.form-input {
|
||||
border: 1px solid #d7d7d9;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
width: 320px;
|
||||
height: 48px;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
}
|
||||
.form-link {
|
||||
color: #211f24;
|
||||
font-size: 12px;
|
||||
margin: 0px;
|
||||
}
|
||||
:deep(.arco-space-item) {
|
||||
margin: 0px !important;
|
||||
}
|
||||
|
||||
.account-bind-container {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.bind-card {
|
||||
background-color: var(--color-bg-2);
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.bind-header {
|
||||
margin-bottom: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.phone-number {
|
||||
font-size: 14px;
|
||||
color: var(--color-text-4);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.account-list {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.account-item {
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 8px;
|
||||
background-color: var(--color-bg-2);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.account-item {
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 8px;
|
||||
background-color: var(--color-bg-2);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid var(--color-border-2);
|
||||
box-shadow: 0 2px 4px 0 #b1b2b5;
|
||||
}
|
||||
|
||||
.account-item.selected {
|
||||
border-color: #6d4cfe;
|
||||
background-color: rgba(109, 76, 254, 0.1);
|
||||
box-shadow: 0 2px 4px 0 rgba(109, 76, 254, 0.5);
|
||||
}
|
||||
|
||||
:deep(.arco-list-item-main) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:deep(.arco-list-item-actions) {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
:deep(.arco-checkbox) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
:deep(.arco-checkbox-checked .arco-checkbox-mask) {
|
||||
background-color: #6d4cfe;
|
||||
border-color: #6d4cfe;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -10,11 +10,13 @@
|
||||
@refresh="getProductList"
|
||||
/>
|
||||
</div>
|
||||
<a-empty v-if="products.length === 0" />
|
||||
</Container>
|
||||
<Container title="成功案例" class="body mt-24px">
|
||||
<div class="flex flex-wrap">
|
||||
<Case v-for="item in cases" :key="item.id" class="mt-20px ml-20px" :data="item"></Case>
|
||||
</div>
|
||||
<a-empty v-if="cases.length === 0" />
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user