From 7f6fa75678e36a992f3037ce530d0226f0dd2128 Mon Sep 17 00:00:00 2001
From: 杨磊 <505174330@qq.com>
Date: 星期二, 08 四月 2025 17:56:30 +0800
Subject: [PATCH] 比例修改
---
src/views/home/index.vue | 56 +++++++++++-------
vue.config.js | 2
public/index.html | 2
src/layout/index.vue | 3
public/favicon.ico | 0
src/views/chronology/index.vue | 16 +++++
src/views/directory/index.vue | 97 ++++++++++++++++++++++++-------
7 files changed, 127 insertions(+), 49 deletions(-)
diff --git a/public/favicon.ico b/public/favicon.ico
index 7851792..3f919e6 100644
--- a/public/favicon.ico
+++ b/public/favicon.ico
Binary files differ
diff --git a/public/index.html b/public/index.html
index ee8ed17..fb8e58a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
- <!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico"> -->
+ <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,700,900">
<title>鐜嬫案鐐庢暟鎹簱</title>
</head>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 231eede..1bfab19 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -133,8 +133,7 @@
color: #decaac;
font-size: 24px;
border-bottom: 1px solid #b9a587;
- height: 180px;
-
+ height: 18vh;
.menuText {
line-height: 50px;
}
diff --git a/src/views/chronology/index.vue b/src/views/chronology/index.vue
index 1161cbc..c624c7e 100644
--- a/src/views/chronology/index.vue
+++ b/src/views/chronology/index.vue
@@ -44,6 +44,7 @@
v-for="(citem, cindex) in item.list"
:style="{ background: citem.color }"
@mouseover="showDetail(index, cindex, 1)"
+ @mouseout="closeDetail(index, cindex, 0)"
:key="cindex"
>
<div class="detailDialog" v-if="citem.showDetail">
@@ -817,6 +818,18 @@
methods: {
gotoDetail(item) {},
+
+ closeDetail(index, cindex, type) {
+ // console.log(cindex, "cindex");
+ // for (let i = 0; i < this.contentList.length; i++) {
+ // const item = this.contentList[i];
+ // for (let j = 0; j < item.list.length; j++) {
+ // const citem = item.list[j];
+ // this.$set(citem, "showDetail", false);
+ // }
+ // }
+
+ },
showDetail(index, cindex, type) {
for (let i = 0; i < this.contentList.length; i++) {
const item = this.contentList[i];
@@ -825,7 +838,8 @@
this.$set(citem, "showDetail", false);
}
}
- if (type == 1) {
+
+ if (this.contentList[index].list[cindex].type) {
this.contentList[index].list[cindex].showDetail = true;
} else {
this.contentList[index].list[cindex].showDetail = false;
diff --git a/src/views/directory/index.vue b/src/views/directory/index.vue
index 9ff6048..d906433 100644
--- a/src/views/directory/index.vue
+++ b/src/views/directory/index.vue
@@ -22,7 +22,16 @@
<!-- 鍥捐〃鏄剧ず -->
<div class="charts-main" v-if="activeTabs == 'chart'">
<div class="radial-tree-container">
- <div ref="chart" style="width: 100%; height: 600px"></div>
+ <div ref="chart" style="width: 100%; height: 70vh"></div>
+ </div>
+
+ <div class="legend">
+ <div class="tagItem" v-for="(item, index) in legendList" :key="index">
+ <div class="tagColor" :style="{ background: item.color }"></div>
+ <div class="tagText" :style="{ color: item.color }">
+ {{ item.name }}
+ </div>
+ </div>
</div>
<transition name="el-fade-in-linear">
<div class="tooltipBox" v-show="tooltipShow">
@@ -36,6 +45,10 @@
text-align: center;
"
>
+ <div class="closeBtn" @click="tooltipShow = false">
+ <i class="el-icon-close"></i>
+ </div>
+
<div style="display: flex">
<div
style="
@@ -111,7 +124,10 @@
<!-- 鍒楄〃鏄剧ず -->
<div class="page-main" v-if="activeTabs == 'list'">
<div v-for="(item, index) in universityList" :key="index">
- <div class="table-title" v-if="item.studentList && item.studentList.length > 0">
+ <div
+ class="table-title"
+ v-if="item.studentList && item.studentList.length > 0"
+ >
<div class="table-title-left">
<p class="table-title-name">{{ item.name }}</p>
<p class="table-title-degree">{{ item.degree }}</p>
@@ -121,7 +137,10 @@
<img :src="[item.isShow ? topIcon : bottomIcon]" alt="" />
</div>
</div>
- <table cellpadding="100" v-if="item.studentList && item.studentList.length > 0 && item.isShow">
+ <table
+ cellpadding="100"
+ v-if="item.studentList && item.studentList.length > 0 && item.isShow"
+ >
<tr class="table-heading">
<th>濮撳悕</th>
<th>鎬у埆</th>
@@ -338,6 +357,28 @@
chartData: treeData,
currentNodeInfo: {},
tooltipShow: false,
+ legendList: [
+ {
+ color: "#87A7B9",
+ name: "鍖椾含涓尰澶у",
+ },
+ {
+ color: "#C48787",
+ name: "鍖椾含甯堣寖澶у",
+ },
+ {
+ color: "#6F8F5A",
+ name: "涓浗涓尰绉戝闄�",
+ },
+ {
+ color: "#937950",
+ name: "骞垮窞涓尰鑽ぇ瀛�",
+ },
+ {
+ color: "#8D77B3",
+ name: "鎷滃笀寮熷瓙",
+ },
+ ],
};
},
@@ -400,12 +441,12 @@
},
},
textStyle: {
- color: "#bc1c00" // 璁剧疆鏁翠綋瀛椾綋棰滆壊涓虹孩鑹�
+ color: "#bc1c00", // 璁剧疆鏁翠綋瀛椾綋棰滆壊涓虹孩鑹�
},
edgeLabel: {
normal: {
- color: "#bc1c00" // 璁剧疆绾挎潯鐨勯鑹蹭负绾㈣壊
- }
+ color: "#bc1c00", // 璁剧疆绾挎潯鐨勯鑹蹭负绾㈣壊
+ },
},
series: [
{
@@ -452,22 +493,10 @@
};
this.chart.setOption(option);
-
- this.chart.on(
- "showTip",
- debounce((event) => {
- console.log("鏄剧ず鏃剁殑鍥炶皟", event);
- this.tooltipShow = true;
- }, 500)
- );
-
- this.chart.on(
- "hideTip",
- debounce((event) => {
- console.log("闅愯棌鏃剁殑鍥炶皟", event);
- this.tooltipShow = false;
- }, 500)
- );
+ this.chart.on("click", (params) => {
+ console.log("鐐瑰嚮鏃剁殑鍥炶皟", params);
+ this.tooltipShow = true;
+ });
},
handleResize() {
if (this.chart) {
@@ -627,7 +656,29 @@
max-width: 500px;
background-color: #fdf8f0;
position: absolute;
- bottom: -60px;
right: 40px;
+ top: 12vh;
+}
+.closeBtn {
+ position: absolute;
+ top: 10px;
+ right: 0;
+ cursor: pointer;
+}
+.legend {
+ position: absolute;
+ bottom: 300px;
+ left: 100px;
+}
+.tagItem {
+ display: flex;
+ margin-top: 20px;
+}
+.tagColor {
+ width: 20px;
+ height: 20px;
+}
+.tagText {
+ margin-left: 30px;
}
</style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 108815d..a626284 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -47,7 +47,9 @@
<div class="copyrightInformation">
鐗堟潈鎵�鏈夛細涓浗涓尰鐮旂┒闄� 浜琁CP澶� 0384937947 浜叕缃戝畨澶� 1212129923
</div>
- <div class="profilePhoto"></div>
+ <div class="profilePhoto">
+ <img class="autoImg" src="@/assets/images/profilePhoto.png" alt="" />
+ </div>
</div>
</template>
@@ -105,23 +107,23 @@
background-repeat: no-repeat;
background-size: 98% 95%;
position: relative;
- padding: 0 40px;
box-sizing: border-box;
}
.profilePhoto {
- background-image: url("@/assets/images/profilePhoto.png");
- width: 475px;
- height: 556px;
+ /* background-image: url("@/assets/images/profilePhoto.png"); */
+ width: 50%;
+ height: 60%;
+ background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
- top: 30%;
- left: 8%;
+ top: 28.2%;
+ left: 0;
}
.headerBox {
- width: 99.5%;
- height: 220px;
- padding-top: 60px;
- padding-left: 40px;
+ width: 95.5%;
+ height: 23.1%;
+ padding-top: 3%;
+ padding-left: 5%;
border-bottom: 1px solid#937950;
font-size: 50px;
line-height: 66px;
@@ -130,19 +132,22 @@
justify-content: space-between;
font-family: Alimama DongFangDaKai;
box-sizing: border-box;
+ margin: 0 auto;
}
.searchBox {
margin-right: 100px;
}
.menuBox {
position: absolute;
- right: 48px;
- width: 1000px;
+ right: 2.5%;
+ width: 52%;
+ height: 47.3%;
font-family: Alimama DongFangDaKai;
}
.menu {
width: 25%;
- height: 450px;
+ /* height: 450px; */
+ height: 100%;
background-color: #fff;
text-align: center;
padding-top: 20px;
@@ -178,30 +183,39 @@
}
.menuList {
display: flex;
+ height: 100%;
}
.personalProfile {
background: rgba(147, 121, 80, 0.15);
- height: 170px;
- width: 100%;
+ height: 17.8%;
+ width: 95.1%;
position: absolute;
- right: 40px;
- bottom: 111px;
+ right: 2.5%;
+ bottom: 11.7%;
border: 1px solid #937950;
}
.textInfo {
position: absolute;
right: 40px;
- width: 1000px;
+ width: 50%;
margin-top: 20px;
- line-height: 16px;
+ /* line-height: 16px; */
}
.copyrightInformation {
+ width: 100%;
position: absolute;
- bottom: 80px;
+ bottom: 8%;
font-size: 12px;
color: #937950;
width: 100%;
text-align: center;
}
+
+@media screen and (min-width: 1920px) {
+ .textInfo {
+ font-size: 20px;
+ line-height: 24px;
+ }
+}
</style>
diff --git a/vue.config.js b/vue.config.js
index 269a076..0398251 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,6 +1,6 @@
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
- publicPath: "/",
+ publicPath: "./",
productionSourceMap: false,
transpileDependencies: true,
});
--
Gitblit v1.9.1