pxl/tk-page-Fan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui设计

Browse Source
This commit is contained in:
没复习
2025-04-09 21:07:15 +08:00
parent 758fdb49c2
commit b71c2bd071
24 changed files with 1144 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/EChartsComponent.vue
View File

@@ -23,12 +23,24 @@ export default {
}
},
data() {
return {
seriesData: [],
num: 0
}
},
mounted() {
this.initChart();
this.getTkhostdetail();
},
methods: {
initChart() {
if (!this.$refs.chart) {
console.error('DOM element not found');
return;
}
const myChart = echarts.init(this.$refs.chart);
const option = {
title: {
@@ -36,17 +48,17 @@ export default {
},
tooltip: {},
legend: {
data: ['销量']
data: [this.title]
},
xAxis: {
data: ['2025-03-29', '2025-03-30', '2025-03-31', '2025-04-01', '2025-04-02', '2025-04-03']
data: [this.getCurrentDate()[0].slice(4), this.getCurrentDate()[1].slice(4), this.getCurrentDate()[2].slice(4), this.getCurrentDate()[3].slice(4), this.getCurrentDate()[4].slice(4), this.getCurrentDate()[5].slice(4), this.getCurrentDate()[6].slice(4)]
},
yAxis: {},
series: [
{
name: '金币数',
name: this.title,
type: 'line',
data: [23266, 12144, 44467, 86686, 35637, 34534],
data: [this.seriesData[0], this.seriesData[1], this.seriesData[2], this.seriesData[3], this.seriesData[4], this.seriesData[5], this.seriesData[6]],
smooth: true
}
@@ -61,7 +73,33 @@ export default {
searchTimeStart: this.getCurrentDate()[0],
searchTimeEnd: this.getCurrentDate()[6]
}).then(res => {
res[0]
// console.log("返回数据", res[0][this.getCurrentDate()[2]])
//echarts 数据初始化
this.seriesData = [
res[0][this.getCurrentDate()[0]] == null ? 0 : Number(res[0][this.getCurrentDate()[0]][this.dataType]),
res[0][this.getCurrentDate()[1]] == null ? 0 : Number(res[0][this.getCurrentDate()[1]][this.dataType]),
res[0][this.getCurrentDate()[2]] == null ? 0 : Number(res[0][this.getCurrentDate()[2]][this.dataType]),
res[0][this.getCurrentDate()[3]] == null ? 0 : Number(res[0][this.getCurrentDate()[3]][this.dataType]),
res[0][this.getCurrentDate()[4]] == null ? 0 : Number(res[0][this.getCurrentDate()[4]][this.dataType]),
res[0][this.getCurrentDate()[5]] == null ? 0 : Number(res[0][this.getCurrentDate()[5]][this.dataType]),
res[0][this.getCurrentDate()[6]] == null ? 0 : Number(res[0][this.getCurrentDate()[6]][this.dataType]),
]
// this.seriesData = {
// [this.getCurrentDate()[0]]: res[0][this.getCurrentDate()[0]] == null ? 0 : res[0][this.getCurrentDate()[0]][this.dataType],
// [this.getCurrentDate()[1]]: res[0][this.getCurrentDate()[1]] == null ? 0 : res[0][this.getCurrentDate()[1]][this.dataType],
// [this.getCurrentDate()[2]]: res[0][this.getCurrentDate()[2]] == null ? 0 : res[0][this.getCurrentDate()[2]][this.dataType],
// [this.getCurrentDate()[3]]: res[0][this.getCurrentDate()[3]] == null ? 0 : res[0][this.getCurrentDate()[3]][this.dataType],
// [this.getCurrentDate()[4]]: res[0][this.getCurrentDate()[4]] == null ? 0 : res[0][this.getCurrentDate()[4]][this.dataType],
// [this.getCurrentDate()[5]]: res[0][this.getCurrentDate()[5]] == null ? 0 : res[0][this.getCurrentDate()[5]][this.dataType],
// [this.getCurrentDate()[6]]: res[0][this.getCurrentDate()[6]] == null ? 0 : res[0][this.getCurrentDate()[6]][this.dataType],
// }
this.initChart();
this.num++
console.log("返回数据", this.seriesData)
console.log("返回数据", this.num)
})
},

96
src/components/Sidebar.vue
View File

@@ -1,48 +1,120 @@
<template>
<div class="sidebar">
<h3>导航菜单</h3>
<div class="logo">
<img style="margin-right: 10px;" src="@/assets/logo.png">
<img src="@/assets/logotext.png">
</div>
<ul>
<li>
<RouterLink to="/workBenches">工作台</RouterLink>
<li @click="activeIndex = 1">
<RouterLink to="/workBenches">
<img v-if="activeIndex == 1" src="@/assets/navAction.png" autoplay loop muted class="background-img">
<div style="display: flex;">
<img v-if="activeIndex == 1" src="@/assets/workAction.png" style="margin-right: 10px;">
<img v-else src="@/assets/workAction.png" style="margin-right: 10px;">
<div :style="activeIndex == 1 ? 'color: #000' : 'color: #fff'" class="center-justify">工作台</div>
</div>
</RouterLink>
</li>
<li>
<RouterLink to="/hostsList">主播列表</RouterLink>
<li @click="activeIndex = 2">
<RouterLink to="/hostsList">
<img v-if="activeIndex == 2" src="@/assets/navAction.png" autoplay loop muted class="background-img">
<div style="display: flex;">
<img v-if="activeIndex == 2" src="@/assets/listAction.png" style="margin-right: 10px;">
<img v-else src="@/assets/listAction.png" style="margin-right: 10px;">
<div :style="activeIndex == 2 ? 'color: #000' : 'color: #fff'" class="center-justify">主播列表</div>
</div>
</RouterLink>
</li>
</ul>
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
let activeIndex = ref(1);
</script>
<style scoped>
.sidebar {
position: fixed;
left: 0;
top: 0;
height: 100vh;
width: 200px;
background-color: #f5f5f5;
height: 900px;
width: 280px;
background-color: #338F6A;
padding: 20px;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
.logo {
border-bottom: 1px solid #fff;
padding-bottom: 29px;
img:nth-of-type(1) {
height: 40px;
}
img:nth-of-type(2) {
height: 29px;
}
}
}
.sidebar ul {
list-style: none;
padding: 0;
}
.sidebar li {
margin-bottom: 10px;
margin-top: 50px;
padding-top: 30px;
padding-left: 30px;
margin-bottom: 50px;
height: 64px;
position: relative;
display: flex;
align-items: center;
}
.sidebar a {
text-decoration: none;
color: #333;
color: #000000;
display: block;
padding: 8px;
border-radius: 4px;
font-family: Source Han Sans SC;
font-weight: 400;
font-size: 22px;
}
.sidebar a:hover {
/* .sidebar a:hover {
background-color: #e0e0e0;
} */
.background-img {
position: absolute;
top: 0;
left: 13px;
width: 247px;
height: 126px;
object-fit: cover;
z-index: -1;
/* 确保视频在内容之下 */
}
.center-justify {
display: flex;
justify-content: space-around;
align-items: center;
}
</style>