refactor(views): 重构中间区域组件布局和样式
This commit is contained in:
JiXinHui
parent
bcedcb34dd
commit
1127b34cd5
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ref, onMounted } from "vue";
|
||||
import { commonQuestions } from "@/api";
|
||||
|
||||
interface QuestionItem {
|
||||
|
|
@ -13,7 +13,7 @@ const questionData = ref<QuestionItem[]>([]);
|
|||
|
||||
// 获取问题数据
|
||||
const fetchQuestionData = () => {
|
||||
commonQuestions().then(res => {
|
||||
commonQuestions().then((res) => {
|
||||
if (res.success) {
|
||||
questionData.value = res.data;
|
||||
}
|
||||
|
|
@ -27,13 +27,26 @@ onMounted(() => {
|
|||
|
||||
<template>
|
||||
<div class="common-questions">
|
||||
<div class="question-list">
|
||||
<div v-for="(item, index) in questionData" :key="index" class="question-item">
|
||||
<div class="question-rank">{{ index + 1 }}</div>
|
||||
<div class="question-content">
|
||||
<div class="question-text">{{ item.question }}</div>
|
||||
<div class="table-container">
|
||||
<div class="table-header">
|
||||
<div class="header-rank">排名</div>
|
||||
<div class="header-content">问题内容</div>
|
||||
<div class="header-count">命中次数</div>
|
||||
</div>
|
||||
<div class="question-list">
|
||||
<div
|
||||
v-for="(item, index) in questionData.slice(0, 4)"
|
||||
:key="index"
|
||||
class="question-item"
|
||||
>
|
||||
<div class="question-rank" :class="`rank-${index + 1}`">
|
||||
<div class="rank-number">{{ index + 1 }}</div>
|
||||
</div>
|
||||
<div class="question-content">
|
||||
<div class="question-text">{{ item.question }}</div>
|
||||
</div>
|
||||
<div class="question-count">
|
||||
<span class="count-value">{{ item.count }}</span>
|
||||
<span class="count-value">{{ item.count.toLocaleString() }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -45,75 +58,140 @@ onMounted(() => {
|
|||
.common-questions {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
margin-top: 6px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
display: flex;
|
||||
background: linear-gradient(90deg, rgba(130, 157, 244), rgba(239, 241, 254));
|
||||
border-radius: 2px;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
|
||||
.header-rank {
|
||||
width: 80px;
|
||||
padding: 12px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
flex: 1;
|
||||
padding: 12px 20px;
|
||||
}
|
||||
|
||||
.header-count {
|
||||
width: 120px;
|
||||
padding: 12px 20px;
|
||||
text-align: center;
|
||||
color: #94A8F6;
|
||||
}
|
||||
}
|
||||
|
||||
.question-list {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.question-item {
|
||||
display: flex;
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
align-items: center;
|
||||
border-bottom: 1px solid rgba(33, 150, 243, 0.1);
|
||||
}
|
||||
|
||||
.question-rank {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 80px;
|
||||
padding: 8px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 50%;
|
||||
margin-right: 15px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
flex-shrink: 0;
|
||||
|
||||
// 前三名使用不同颜色
|
||||
.question-item:nth-child(1) & {
|
||||
background-color: #f5222d;
|
||||
color: #fff;
|
||||
|
||||
&.rank-1 {
|
||||
.rank-number {
|
||||
width: 24px;
|
||||
height: 19px;
|
||||
border-radius: 2px;
|
||||
background: #E8A767;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.question-item:nth-child(2) & {
|
||||
background-color: #fa8c16;
|
||||
color: #fff;
|
||||
|
||||
&.rank-2 {
|
||||
.rank-number {
|
||||
width: 24px;
|
||||
height: 19px;
|
||||
border-radius: 2px;
|
||||
background: #A0A8C6;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.question-item:nth-child(3) & {
|
||||
background-color: #52c41a;
|
||||
color: #fff;
|
||||
|
||||
&.rank-3 {
|
||||
.rank-number {
|
||||
width: 24px;
|
||||
height: 19px;
|
||||
border-radius: 2px;
|
||||
background: #B89681 ;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
&.rank-4 {
|
||||
.rank-number {
|
||||
width: 24px;
|
||||
height: 19px;
|
||||
border-radius: 2px;
|
||||
background: linear-gradient(124deg, rgba(3,0,0,0.16), rgba(255,255,255,0.16));
|
||||
color: #545966;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.question-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 8px 20px;
|
||||
}
|
||||
|
||||
.question-text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 5px;
|
||||
color: #2D2E30;
|
||||
line-height: 1.6;
|
||||
font-weight: bold;
|
||||
|
||||
}
|
||||
|
||||
.question-count {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
|
||||
width: 120px;
|
||||
padding: 8px 20px;
|
||||
text-align: center;
|
||||
|
||||
.count-value {
|
||||
color: #4B96FF;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #2D2E30;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -109,8 +109,8 @@ getData(code.value);
|
|||
|
||||
<style scoped lang="scss">
|
||||
.centermap {
|
||||
margin-bottom: 30px;
|
||||
background: #fff;
|
||||
// margin-bottom: 30px;
|
||||
background: transparent;
|
||||
|
||||
.maptitle {
|
||||
height: 60px;
|
||||
|
|
|
|||
|
|
@ -1,119 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { commonQuestions } from "@/api";
|
||||
|
||||
interface QuestionItem {
|
||||
id: number;
|
||||
question: string;
|
||||
count: number;
|
||||
}
|
||||
|
||||
// 问题数据
|
||||
const questionData = ref<QuestionItem[]>([]);
|
||||
|
||||
// 获取问题数据
|
||||
const fetchQuestionData = () => {
|
||||
commonQuestions().then(res => {
|
||||
if (res.success) {
|
||||
questionData.value = res.data;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
fetchQuestionData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="common-questions">
|
||||
<div class="question-list">
|
||||
<div v-for="(item, index) in questionData" :key="index" class="question-item">
|
||||
<div class="question-rank">{{ index + 1 }}</div>
|
||||
<div class="question-content">
|
||||
<div class="question-text">{{ item.question }}</div>
|
||||
<div class="question-count">
|
||||
<span class="count-value">{{ item.count }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.common-questions {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.question-list {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.question-item {
|
||||
display: flex;
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.question-rank {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 50%;
|
||||
margin-right: 15px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
flex-shrink: 0;
|
||||
|
||||
// 前三名使用不同颜色
|
||||
.question-item:nth-child(1) & {
|
||||
background-color: #f5222d;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.question-item:nth-child(2) & {
|
||||
background-color: #fa8c16;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.question-item:nth-child(3) & {
|
||||
background-color: #52c41a;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.question-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.question-text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.question-count {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
|
||||
.count-value {
|
||||
color: #4B96FF;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,100 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { centerMap } from "@/api";
|
||||
// import 'echarts/map/js/china';
|
||||
|
||||
const chartRef = ref<HTMLElement | null>(null);
|
||||
let chart: echarts.ECharts | null = null;
|
||||
|
||||
// 地图数据
|
||||
const mapData = ref({
|
||||
dataList: [] as {name: string, value: number}[],
|
||||
regionCode: 'china'
|
||||
});
|
||||
|
||||
// 获取地图数据
|
||||
const getMapData = () => {
|
||||
centerMap({regionCode: 'china'}).then(res => {
|
||||
if (res.success) {
|
||||
mapData.value = res.data;
|
||||
initChart();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const initChart = () => {
|
||||
if (!chartRef.value) return;
|
||||
|
||||
chart = echarts.init(chartRef.value);
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b}: {c}'
|
||||
},
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: 1000,
|
||||
left: 'left',
|
||||
top: 'bottom',
|
||||
text: ['高', '低'],
|
||||
calculable: true,
|
||||
inRange: {
|
||||
color: ['#e0f3f8', '#4575b4']
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '用户分布',
|
||||
type: 'map',
|
||||
map: 'china',
|
||||
roam: false,
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
data: mapData.value.dataList
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
chart.setOption(option);
|
||||
};
|
||||
|
||||
// 监听窗口大小变化，重绘图表
|
||||
const handleResize = () => {
|
||||
if (chart) {
|
||||
chart.resize();
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getMapData();
|
||||
window.addEventListener('resize', handleResize);
|
||||
});
|
||||
|
||||
// 组件卸载时移除事件监听
|
||||
const onUnmounted = () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
if (chart) {
|
||||
chart.dispose();
|
||||
chart = null;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="map-container" ref="chartRef"></div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.map-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1 +0,0 @@
|
|||
|
||||
|
|
@ -10,8 +10,7 @@ const LeftBottom = defineAsyncComponent(() => import("./LeftBottom.vue"));
|
|||
|
||||
|
||||
// 导入中间组件
|
||||
const CenterTop = defineAsyncComponent(() => import("./components/CenterTop.vue"));
|
||||
const CenterBottom = defineAsyncComponent(() => import("./components/CenterBottom.vue"));
|
||||
const CenterBottom = defineAsyncComponent(() => import("./CenterBottom.vue"));
|
||||
const CenterMap = defineAsyncComponent(() => import("./center-map.vue"));
|
||||
|
||||
// 导入右侧组件
|
||||
|
|
@ -44,10 +43,9 @@ const mapRef: any = ref(null);
|
|||
<!-- 中间内容区域 -->
|
||||
<div class="center-content">
|
||||
<CenterMap class="center_content_top" title="咨询地图"/>
|
||||
<!-- <CenterTop /> -->
|
||||
<!-- <ItemWrap title="高频咨询问题" class="module-item">
|
||||
<ItemWrap title="高频咨询问题" class="center_content_bottom module-item">
|
||||
<CenterBottom />
|
||||
</ItemWrap> -->
|
||||
</ItemWrap>
|
||||
</div>
|
||||
|
||||
<!-- 右侧内容区域 -->
|
||||
|
|
@ -88,11 +86,14 @@ const mapRef: any = ref(null);
|
|||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
// gap: 20px;
|
||||
}
|
||||
|
||||
.center_content_top {
|
||||
|
||||
height: 410px;
|
||||
}
|
||||
.center_content_bottom {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.left-contetn-top {
|
||||
|
|
|
|||
Loading…
Reference in New Issue