From 29a02350b873fa6339a7535fa929697fec9a8f84 Mon Sep 17 00:00:00 2001
From: mh-two-thousand-and-two <17391232786@163.com>
Date: 星期三, 03 四月 2024 18:44:07 +0800
Subject: [PATCH] 三
---
pages/characterRelation/characterRelation.vue | 83 ++++++++++++++++++++++++++++++++++++-----
1 files changed, 73 insertions(+), 10 deletions(-)
diff --git a/pages/characterRelation/characterRelation.vue b/pages/characterRelation/characterRelation.vue
index ababaa4..d56cbb9 100644
--- a/pages/characterRelation/characterRelation.vue
+++ b/pages/characterRelation/characterRelation.vue
@@ -3,14 +3,13 @@
<headNav />
<!-- 楂樼骇鎼滅储 -->
<view style="margin: .35rem 0 .16rem 0; ">
- <advancedSearch />
+ <advancedSearch placehold="杈撳叆濮撳悕/鍒悕/鏈濅唬/浼犱富鑱屼笟鎼滅储"/>
</view>
<!-- 鐑棬鎼滅储 -->
- <view class="flex flex-center" style="font-size: .1rem;color: #2C2C2C;">
+ <view class="flex flex-center hotSearch">
鐑棬鎼滅储锛�
<ul class="flex" style="margin-right: 10rpx;">
- <li v-for="item in hot" :key="item.id"
- style="color: #244A7B; margin: 0 .1rem;color: #5879a4;font-size: .12rem;">
+ <li v-for="item in hot" :key="item.id" style="">
{{item.name}}
</li>
</ul>
@@ -148,6 +147,27 @@
// 鍏朵粬鍏崇郴...
];
+ let FontSize = 12; // 瀛椾綋澶у皬
+ let BorderWidth = 2; // 杈规澶у皬
+ let SymbolSize = 80; // 灏哄璺濈
+ let Distance = 10
+ // 涓嶅悓灏哄涓嬩慨鏀筫charts鐨勫瓧浣�
+ if (window.innerWidth > 2560 && window.innerWidth <= 3840) {
+ FontSize = 28
+ BorderWidth = 5
+ SymbolSize = 100
+ Distance = 33
+ } else if (window.innerWidth > 1920 && window.innerWidth <= 2560) {
+ FontSize = 28
+ BorderWidth = 4
+ SymbolSize = 90
+ Distance = 22
+ } else if (window.innerWidth >= 1366 && window.innerWidth <= 1920) {
+ FontSize = 18
+ BorderWidth = 4
+ SymbolSize = 70
+ Distance = 22
+ }
// 鏍规嵁鍏崇郴鏁版嵁鐢熸垚杩炴帴绾�
var links = [];
relationships.forEach(function(relationship) {
@@ -166,15 +186,15 @@
.relation;
}, // 璁剧疆鍏崇郴鏍囩鍐呭涓�"Child-Parent"
color: '#2C2C2C',
- fontSize: 12,
+ fontSize: FontSize - 2,
backgroundColor: 'rgba(255, 255, 255, 1)',
padding: [3, 8],
borderRadius: 30,
position: 'middle', // 璁剧疆鏍囩鏂囨湰鍦ㄧ嚎鐨勪腑闂翠綅缃笂灞呬腑鏄剧ず
- bottom: -10,
+ // bottom: -(FontSize+10),
z: 10, // 璁剧疆鏍囩鐨剒杞撮珮搴︼紝浣垮叾姣旇繛鎺ョ嚎鏇撮珮
// offset: [0, 15] ,// 寰�涓嬬Щ鍔� 10 鍍忕礌
- distance: -12, // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂
+ distance: -(Distance + 1), // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂
}
});
}
@@ -189,7 +209,7 @@
y: Math.random() * 600, // 璁剧疆闅忔満y鍧愭爣浣嶇疆
itemStyle: {
color: getColorByIndex(index), // 鍙互鏍规嵁绱㈠紩璁剧疆涓嶅悓鐨勯鑹�
- borderWidth: 2,
+ borderWidth: BorderWidth,
borderColor: getColorByIndex(index + 1)
}
};
@@ -201,6 +221,19 @@
}
var option;
option = {
+ title: {
+ // text: '涔︿腑鏈�甯告彁鍒扮殑100浣嶄汉鐗�',
+ subtext: '涔︿腑鏈�甯告彁鍒扮殑100浣嶄汉鐗�',
+ left: 'center',
+ top: FontSize + 10,
+ // textStyle: {
+ // fontSize: FontSize // 璁剧疆鏍囬鏂囧瓧澶у皬涓� 18px
+ // },
+ subtextStyle: {
+ fontSize: FontSize ,// 璁剧疆鍓爣棰樻枃瀛楀ぇ灏忎负 14px
+ color:'#2C2C2C'
+ }
+ },
backgroundColor: {
type: 'image',
image: '/static/image/characterRelationBg.png',
@@ -214,11 +247,11 @@
series: [{
type: 'graph',
layout: 'none',
- symbolSize: 40, // 璋冩暣鑺傜偣澶у皬
+ symbolSize: SymbolSize, // 璋冩暣鑺傜偣澶у皬
label: {
show: true,
color: 'black', // 璁剧疆鑺傜偣鏂囧瓧棰滆壊涓洪粦鑹�
-
+ fontSize: FontSize, // 璁剧疆鏂囧瓧澶у皬
},
edgeSymbol: ['circle'],
edgeSymbolSize: [4, 10],
@@ -240,10 +273,40 @@
mounted() {
// 鍏崇郴鍥捐氨
this.relation()
+
+ // 鐩戝惉绐楀彛澶у皬鍙樺寲
+ window.addEventListener('resize', this.relation);
}
}
</script>
<style>
+ @media screen and (min-width:2560px)and (max-width:3840px) {}
+ @media screen and (min-width:1366px) and (max-width:1920px) {}
+
+ ::v-deep .uni-input-placeholder {
+ line-height: 1;
+ font-size: .12rem;
+ }
+
+ ::v-deep .ffff {
+ border-radius: .5rem;
+ }
+
+ ::v-deep .widget_button {
+ border-radius: .5rem;
+ margin: .02rem;
+ }
+
+ .hotSearch {
+ font-size: .12rem;
+ color: #2C2C2C;
+
+ li {
+ color: #244A7B;
+ margin: 0 .1rem;
+ color: #244A7B;
+ }
+ }
</style>
\ No newline at end of file
--
Gitblit v1.9.1