From ef5050890cf37409628df47e9c820ac345434209 Mon Sep 17 00:00:00 2001
From: zhangwei <1504152376@qq.com>
Date: 星期三, 08 四月 2026 14:38:36 +0800
Subject: [PATCH] -
---
src/views/equipment/index.vue | 25 +++
src/views/login/index.vue | 4
example.html | 351 ++++++++++++++++++++++++++++++++++++++++++++++++++
src/static/img/lunzhuan1.png | 0
src/components/header/index.vue | 2
5 files changed, 375 insertions(+), 7 deletions(-)
diff --git a/example.html b/example.html
new file mode 100644
index 0000000..52522c3
--- /dev/null
+++ b/example.html
@@ -0,0 +1,351 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Vue3鍝嶅簲寮忕郴缁熷師鐞� 路 瀹嬩綋浜斿彿绀烘剰鍥�</title>
+ <style>
+ /* 鍏ㄥ眬瀛椾綋璁剧疆锛氬畫浣撲簲鍙� (浜斿彿 鈮� 10.5pt 鈮� 14px锛屼负灞忓箷娓呮櫚绋嶈皟) */
+ body {
+ font-family: 'SimSun', '瀹嬩綋', 'Songti SC', STSong, 'Times New Roman', serif;
+ font-size: 14px; /* 浜斿彿绾�10.5pt锛屽搴�14px娓呮櫚 */
+ line-height: 1.5;
+ background: #f5f7fa;
+ margin: 0;
+ min-height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 20px;
+ box-sizing: border-box;
+ }
+ .diagram-container {
+ max-width: 1000px;
+ width: 100%;
+ background: white;
+ box-shadow: 0 8px 20px rgba(0,0,0,0.1);
+ border-radius: 16px;
+ padding: 24px 20px 30px 20px;
+ border: 1px solid #e2e8f0;
+ }
+ /* 涓绘爣棰� */
+ .title {
+ text-align: center;
+ font-size: 20px;
+ font-weight: 600;
+ margin-bottom: 16px;
+ color: #2c3e50;
+ letter-spacing: 1px;
+ border-bottom: 2px solid #42b883;
+ padding-bottom: 10px;
+ }
+ /* 鍓爣棰�/鍖哄煙鏍囪瘑 */
+ .section-label {
+ font-weight: 600;
+ color: #2c3e50;
+ background: #edf2f7;
+ display: inline-block;
+ padding: 4px 14px;
+ border-radius: 30px;
+ font-size: 14px;
+ margin-bottom: 12px;
+ border-left: 4px solid #42b883;
+ }
+ /* 涓夊垪甯冨眬: 宸︿晶浼樺娍 + 鏍稿績娴佺▼ + 鍙充晶ref */
+ .main-panel {
+ display: flex;
+ gap: 16px;
+ margin-top: 10px;
+ flex-wrap: wrap;
+ }
+ .left-panel {
+ flex: 1.2;
+ min-width: 220px;
+ background: #f8fafc;
+ border-radius: 16px;
+ padding: 16px 14px;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.03);
+ border: 1px solid #e9eef3;
+ }
+ .center-panel {
+ flex: 2.2;
+ min-width: 380px;
+ background: #f8fafc;
+ border-radius: 16px;
+ padding: 16px 14px;
+ border: 1px solid #e9eef3;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.03);
+ }
+ .right-panel {
+ flex: 1;
+ min-width: 210px;
+ background: #f8fafc;
+ border-radius: 16px;
+ padding: 16px 14px;
+ border: 1px solid #e9eef3;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.03);
+ }
+ /* 寮曠敤鏍囪灏忓瓧 */
+ .ref-note {
+ color: #64748b;
+ font-size: 12px; /* 绋嶅皬浣嗕粛淇濇寔瀹嬩綋 */
+ margin-top: 8px;
+ border-top: 1px dashed #cbd5e1;
+ padding-top: 8px;
+ }
+ /* 娴佺▼鍥惧崱鐗囨牱寮� */
+ .flow-step {
+ background: white;
+ border-radius: 12px;
+ padding: 12px 10px;
+ margin-bottom: 12px;
+ border-left: 5px solid #42b883;
+ box-shadow: 0 2px 6px rgba(0,0,0,0.02);
+ border: 1px solid #dde7f0;
+ border-left-width: 5px;
+ border-left-color: #42b883;
+ position: relative;
+ }
+ .flow-step strong {
+ color: #1e293b;
+ font-weight: 600;
+ display: block;
+ margin-bottom: 5px;
+ font-size: 14.5px;
+ }
+ .flow-step .desc {
+ color: #334155;
+ margin-left: 6px;
+ }
+ /* 绠ご杩炵嚎绀烘剰 (绠�鍗曠敤瀛楃) */
+ .arrow-down {
+ text-align: center;
+ color: #94a3b8;
+ font-size: 18px;
+ margin: -4px 0 -2px 0;
+ letter-spacing: -2px;
+ }
+ /* 灏忔爣绛� */
+ .proxy-badge {
+ background: #e0f2fe;
+ color: #0369a1;
+ padding: 2px 10px;
+ border-radius: 20px;
+ font-size: 12px;
+ display: inline-block;
+ margin-right: 8px;
+ }
+ .ref-badge {
+ background: #fef9c3;
+ color: #854d0e;
+ padding: 2px 10px;
+ border-radius: 20px;
+ font-size: 12px;
+ display: inline-block;
+ margin-right: 8px;
+ }
+ .highlight {
+ background: #dcfce7;
+ color: #166534;
+ padding: 2px 8px;
+ border-radius: 16px;
+ font-weight: 500;
+ }
+ /* 鍒楄〃鏍峰紡 */
+ ul {
+ margin: 8px 0 0 0;
+ padding-left: 20px;
+ }
+ li {
+ margin-bottom: 5px;
+ color: #2d3c50;
+ }
+ hr {
+ border: none;
+ border-top: 1px solid #d1d9e6;
+ margin: 16px 0 10px 0;
+ }
+ /* 鍙充晶ref鐗规畩鐩掑瓙 */
+ .ref-box {
+ background: white;
+ border-radius: 12px;
+ padding: 14px;
+ border: 1px dashed #f59e0b;
+ margin: 15px 0 5px;
+ }
+ .ref-value {
+ background: #f1f5f9;
+ font-family: monospace;
+ padding: 4px 8px;
+ border-radius: 20px;
+ display: inline-block;
+ margin: 6px 0;
+ }
+ .auto-unpack {
+ background: #f1f5f9;
+ border-radius: 20px;
+ padding: 4px 12px;
+ font-size: 12px;
+ color: #334155;
+ }
+ /* 浜斿彿瀛椾綋鍏ㄥ眬宸插畾锛屼繚鎸佹墍鏈夊瓧浣撶郴鍒� */
+ p, li, div, span, .desc, .flow-step, .section-label {
+ font-family: inherit;
+ }
+ /* 灏忓瓧寮曠敤 */
+ .cite {
+ color: #6b7b8f;
+ font-size: 12px;
+ margin-top: 16px;
+ text-align: right;
+ border-top: 1px solid #e2e8f0;
+ padding-top: 12px;
+ }
+ </style>
+</head>
+<body>
+ <div class="diagram-container">
+ <!-- 澶ф爣棰� -->
+ <div class="title">馃煝 Vue3 鍝嶅簲寮忕郴缁熷師鐞� 路 鍩轰簬Proxy鍏ㄩ潰鐩戝惉</div>
+
+ <!-- 涓夊潡鍐呭 -->
+ <div class="main-panel">
+ <!-- 宸︿晶锛歅roxy浼樺娍 -->
+ <div class="left-panel">
+ <div class="section-label">鉁� 鍩轰簬Proxy 路 浼樺娍</div>
+ <div style="background: #e6f7ff; border-radius: 12px; padding: 12px; border: 1px solid #bae7ff;">
+ <span class="proxy-badge">ES6 Proxy</span><span style="font-weight: 500;"> 鍙栦唬 Object.defineProperty</span>
+ <ul style="margin-top: 12px;">
+ <li>鉁� 鎷︽埅瀵硅薄<strong>鍚勭鎿嶄綔</strong>锛氳鍙�(get)銆佽缃�(set)銆佸垹闄�(deleteProperty)銆佹灇涓�(ownKeys) 绛�</li>
+ <li>鉁� <strong>鍏ㄩ潰鐩戝惉</strong>锛氬睘鎬ф柊澧炪�佸垹闄ゃ�佹暟缁勭储寮�/length淇敼閮借兘鎹曡幏</li>
+ <li>鉁� 鏃犻渶閫掑綊閬嶅巻鎵�鏈夊睘鎬э紝鎬ц兘鏇翠紭涓旀敮鎸佸姩鎬佸睘鎬�</li>
+ <li>鉁� 鍙嫤鎴� <code>in</code> 鎿嶄綔绗︺��<code>for...in</code> 绛夊厓鎿嶄綔</li>
+ </ul>
+ <div style="margin-top: 10px; background: #ffffffb3; padding: 8px; border-radius: 8px; font-size: 13px;">
+ <span style="color: #2c3e50;">馃搵 瀵规瘮Vue2锛�</span>鏃犳硶妫�娴嬪璞″睘鎬ф坊鍔�/鍒犻櫎锛岄渶鐢� <code>$set</code>锛涘鏁扮粍闇�閲嶅啓鏂规硶銆侾roxy瀹岀編瑙ｅ喅銆�
+ </div>
+ </div>
+ <!-- 鏂囩尞寮曠敤[10] -->
+ <div class="ref-note">馃搸 鍙傝�冩枃鐚� [10]: Proxy鍙互鎷︽埅瀵硅薄鐨勫悇绉嶆搷浣滐紝鍖呮嫭灞炴�ц鍙栥�佽缃�佸垹闄ゃ�佹灇涓剧瓑锛屽疄鐜板瀵硅薄鍙樺寲鐨勫叏闈㈢洃鍚��</div>
+ </div>
+
+ <!-- 涓棿锛氭牳蹇冩祦绋� (渚濊禆鏀堕泦/瑙﹀彂鏇存柊) -->
+ <div class="center-panel">
+ <div class="section-label">鈿欙笍 鏍稿績娴佺▼ 路 reactive + 渚濊禆杩借釜</div>
+
+ <!-- 姝ラ1锛歳eactive -->
+ <div class="flow-step">
+ <strong>1锔忊儯 reactive(data) 鍒涘缓浠ｇ悊瀵硅薄</strong>
+ <div class="desc">鍘熷瀵硅薄閫氳繃 <code style="background:#e9ecf3; padding:2px 6px;">new Proxy(target, handler)</code> 鍙樹负鍝嶅簲寮忎唬鐞嗐��</div>
+ </div>
+ <div class="arrow-down">鈻�</div>
+
+ <!-- 姝ラ2锛氱粍浠舵覆鏌�/璁块棶 -->
+ <div class="flow-step">
+ <strong>2锔忊儯 缁勪欢娓叉煋杩囩▼涓闂搷搴斿紡鏁版嵁</strong>
+ <div class="desc">渚嬪妯℃澘涓娇鐢� <code>{{ state.count }}</code> 鎴� <code>computed</code> 涓鍙栥��</div>
+ </div>
+ <div class="arrow-down">鈻�</div>
+
+ <!-- 姝ラ3锛歡etter鎷︽埅 & 渚濊禆鏀堕泦 -->
+ <div class="flow-step" style="border-left-color: #f59e0b;">
+ <strong>3锔忊儯 <span class="highlight">getter 鎷︽埅</span> 鈫� 渚濊禆鏀堕泦</strong>
+ <div class="desc">瑙﹀彂Proxy鐨� <code>get</code> 闄烽槺锛屽皢褰撳墠鍓綔鐢�(濡傜粍浠剁殑娓叉煋鍑芥暟)璁板綍涓鸿灞炴�х殑渚濊禆銆�</div>
+ <div style="background: #fff7e6; border-radius: 20px; padding: 4px 10px; margin-top: 8px; font-size:13px;">
+ 馃 渚濊禆鍏崇郴锛歵arget Map (灞炴�� 鈫� Set(鍓綔鐢�))
+ </div>
+ </div>
+ <div class="arrow-down">鈻�</div>
+
+ <!-- 姝ラ4锛氭暟鎹彉鍖� setter -->
+ <div class="flow-step" style="border-left-color: #ef4444;">
+ <strong>4锔忊儯 鍝嶅簲寮忔暟鎹彉鍖� 馃攣 <span class="highlight">setter 鎷︽埅</span></strong>
+ <div class="desc">淇敼灞炴�у�艰Е鍙� <code>set</code> 闄烽槺锛屾瘮瀵瑰彉鍖栧悗杩涘叆閫氱煡闃舵銆�</div>
+ </div>
+ <div class="arrow-down">鈻�</div>
+
+ <!-- 姝ラ5锛氶�氱煡渚濊禆鏇存柊 -->
+ <div class="flow-step" style="border-left-color: #3b82f6;">
+ <strong>5锔忊儯 瑙﹀彂鏇存柊 (閫氱煡鐩稿叧渚濊禆)</strong>
+ <div class="desc">浠庝緷璧栨槧灏勪腑鎵惧埌鎵�鏈変笌璇ュ睘鎬х浉鍏崇殑鍓綔鐢�(缁勪欢娓叉煋鍑芥暟銆佽绠楀睘鎬х瓑)锛屽姞鍏ヨ皟搴﹂槦鍒椼��</div>
+ </div>
+ <div class="arrow-down">鈻�</div>
+
+ <!-- 姝ラ6锛氱粍浠堕噸鏂版覆鏌� -->
+ <div class="flow-step">
+ <strong>6锔忊儯 缁勪欢閲嶆柊娓叉煋 路 鏇存柊DOM</strong>
+ <div class="desc">鎵ц鍓綔鐢紝鐢熸垚鏂拌櫄鎷烡OM锛岄珮鏁堟洿鏂扮湡瀹濪OM銆�</div>
+ </div>
+
+ <!-- 闄勫姞璇存槑锛氫緷璧栨敹闆嗕笌瑙﹀彂鏇存柊鐨勭畝娲佹弿杩� -->
+ <hr>
+ <div style="display: flex; gap: 12px; justify-content: space-between; background: #e7f3ff; padding: 10px; border-radius: 12px;">
+ <div><span style="background: #2563eb; color:white; padding:2px 10px; border-radius: 30px;">猬囷笍 渚濊禆鏀堕泦</span> 鍦╣etter涓缓绔嬪叧绯�</div>
+ <div>鉃★笍</div>
+ <div><span style="background: #db2777; color:white; padding:2px 10px; border-radius: 30px;">猬嗭笍 瑙﹀彂鏇存柊</span> 鍦╯etter涓淳鍙戜换鍔�</div>
+ </div>
+ </div>
+
+ <!-- 鍙充晶锛歳ef姒傚康 -->
+ <div class="right-panel">
+ <div class="section-label">馃攣 ref 鍖呰鍩烘湰绫诲瀷</div>
+ <div style="background: #fffbeb; border-radius: 14px; padding: 12px; border:1px solid #fde68a;">
+ <span class="ref-badge">ref()</span> 鐢ㄤ簬 <code>string | number | boolean</code> 绛夊師濮嬪��
+ <div class="ref-box">
+ <div style="display: flex; align-items: center; gap: 6px;">
+ <span>馃敻 鏋勯��:</span>
+ <code style="background:#e9eef3; padding:4px 8px; border-radius: 20px;">ref('hello')</code>
+ </div>
+ <div style="margin: 12px 0 8px 0; background:#e6f7ff; padding: 8px; border-radius: 12px;">
+ 鈿� 杩斿洖涓�涓寘鍚� <strong style="color:#b45309;">.value</strong> 灞炴�х殑瀵硅薄锛�
+ <div style="background: #1e293b; color: #facc15; padding: 6px 12px; border-radius: 20px; margin-top: 6px; font-family: monospace;">
+ { value: 'hello' }
+ </div>
+ </div>
+ <div><span class="auto-unpack">鉁� 妯℃澘涓嚜鍔ㄨВ鍖�</span></div>
+ <div style="margin-top: 10px; background:#fff; border-radius: 20px; padding: 6px 10px;">
+ 鉁� <code><div>{{ msg }}</div></code> 鏃犻渶鍐� <code>msg.value</code>
+ </div>
+ <div style="margin-top: 10px; border-top: 1px dotted #cbd5e1; padding-top: 8px;">
+ 馃З <strong>script涓繀椤讳娇鐢� .value</strong> 淇敼/璇诲彇
+ </div>
+ </div>
+ <div style="font-size: 13px; margin-top: 8px; background: #d9f99d; padding: 4px 8px; border-radius: 20px;">
+ 馃摝 鍚屾牱鍩轰簬Proxy/reactive瀹炵幇锛屼絾閫氳繃value灞炴�у祵濂椾繚璇佸搷搴斿紡
+ </div>
+ </div>
+ <!-- 绠�娲佸姣� -->
+ <div style="margin-top: 16px;">
+ <span style="background: #cbd5e1; padding:2px 10px; border-radius: 30px;">reactive vs ref</span>
+ <ul style="margin-top: 10px;">
+ <li><strong>reactive</strong>锛氱敤浜庡璞�/鏁扮粍锛岀洿鎺ヤ唬鐞�</li>
+ <li><strong>ref</strong>锛氱敤浜庡熀鏈被鍨嬶紝涔熷彲鍖呰９瀵硅薄(浣嗚嚜鍔ㄧ敤reactive杞崲娣卞眰)</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+
+ <!-- 搴曢儴鏁村悎鎻忚堪锛氬畬鍏ㄥ懠搴旈鐩唴瀹� -->
+ <div style="display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; background: #f1f5f9; border-radius: 20px; padding: 14px 18px;">
+ <div style="flex:1; min-width: 200px;">
+ <span style="font-weight: 600;">馃搶 Proxy鍏ㄩ潰鐩戝惉</span>锛歡et/set/deleteProperty/ownKeys 路 鍏ㄩ潰浠ｆ浛Vue2鐨凮bject.defineProperty
+ </div>
+ <div style="flex:1; min-width: 220px;">
+ <span style="font-weight: 600;">馃幆 鏍稿績娴佺▼闂幆</span>锛歳eactive 鈫� 娓叉煋璁块棶 鈫� getter鏀堕泦 鈫� setter瑙﹀彂 鈫� 閫氱煡鏇存柊 鈫� 閲嶇粯
+ </div>
+ <div style="flex:1; min-width: 180px;">
+ <span style="font-weight: 600;">馃敄 ref鑷姩瑙ｅ寘</span>锛氭ā鏉夸腑鐩存帴浣跨敤鏍囪瘑绗︼紝搴曞眰璁块棶.value
+ </div>
+ </div>
+
+ <!-- 瀹屾暣寮曠敤鍙婂瓧浣撳０鏄� -->
+ <!-- <div class="cite">
+ <span>馃摉 鍐呭渚濇嵁锛歏ue3鍝嶅簲寮忓師鐞� 路 鍩轰簬Proxy鐨勪紭鍔裤�佹牳蹇冩祦绋� (渚濊禆鏀堕泦/瑙﹀彂鏇存柊) 鍙� ref 鍖呰鍩烘湰绫诲瀷銆� </span>
+ <span style="margin-left: 12px;">馃敜 鍏ㄥ浘瀛椾綋: 瀹嬩綋 (SimSun) 浜斿彿 (14px)</span>
+ </div> -->
+ </div>
+ <!-- 纭繚浠讳綍浣嶇疆閮藉己鍒跺畫浣擄紙澶囩敤锛� -->
+ <div style="display: none;">瀛椾綋妫�娴�</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/components/header/index.vue b/src/components/header/index.vue
index 0fa110c..266a864 100644
--- a/src/components/header/index.vue
+++ b/src/components/header/index.vue
@@ -42,7 +42,7 @@
</el-sub-menu>
</el-menu>
<div v-else>
- <el-button type="primary" @click="loginin" round>鍐呴儴OA绯荤粺</el-button>
+ <el-button type="text" @click="loginin" round>鍐呴儴OA绯荤粺</el-button>
<!-- <el-button>
<a href="http://ycmht.51zhengcai.com:9010/#/user/login" target="_blank">鍛樺伐鐧诲綍</a>
</el-button> -->
diff --git a/src/static/img/lunzhuan1.png b/src/static/img/lunzhuan1.png
new file mode 100644
index 0000000..cdd5e7f
--- /dev/null
+++ b/src/static/img/lunzhuan1.png
Binary files differ
diff --git a/src/views/equipment/index.vue b/src/views/equipment/index.vue
index 5f5c1d8..3ae4ee0 100644
--- a/src/views/equipment/index.vue
+++ b/src/views/equipment/index.vue
@@ -83,7 +83,7 @@
</div>
<div class="content flex justify-between items-center py-16">
<el-image style="width: 658.09px; height: 466.33px" :src="heibai"></el-image>
- <div class=" mx-16 px-16">
+ <div class="mx-8">
<p class="w-1/2 font-['Source_Code_Pro'] font-semibold text-[36px] align-middle capitalize">榛戠櫧鍗板埛
</p>
<p
@@ -99,7 +99,7 @@
</div>
<div class="lunzhuanbg py-16">
<div class="content flex justify-between items-center ">
- <div class=" mx-16 px-16">
+ <div class=" mx-8">
<p class="w-1/2 font-['Source_Code_Pro'] font-semibold text-[36px] align-middle capitalize">
杞浆鍗板埛</p>
<p
@@ -108,13 +108,29 @@
<div
class="font-['Source_Han_Sans_SC'] font-normal text-[24px] tracking-[4%] capitalize text-[#696969] mt-8">
<p>鍗板埛閫熷害锛氱害30000 寮�/灏忔椂</p>
- <p> 绾稿紶鍏嬮噸鑼冨洿锛�45g/m虏 - 150g/m虏</p>
- <p> 鏈�澶у嵃鍒烽潰绉細787mm 脳 546mm</p>
+ <p>绾稿紶鍏嬮噸鑼冨洿锛�45g/m虏 - 150g/m虏</p>
+ <p>鏈�澶у嵃鍒烽潰绉細787mm 脳 546mm</p>
</div>
</div>
<el-image style="width: 658.09px; height: 466.33px" :src="lunzhuan"></el-image>
</div>
+ </div>
+ <div class="content flex justify-between items-center py-16">
+ <el-image style="width: 658.09px; height: 466.33px" :src="lunzhuan1"></el-image>
+ <div class="mx-8">
+ <p class="w-1/2 font-['Source_Code_Pro'] font-semibold text-[36px] align-middle capitalize">杞浆鍗板埛
+ </p>
+ <p
+ class="font-['Source_Han_Sans_SC'] font-medium text-[32px] leading-[50px] tracking-[5%] capitalize h-[50px] flex items-center text-[#2646B3] mt-8">
+ 灏忔．鍟嗕笟杞浆鍗板埛鏈�</p>
+ <div
+ class="font-['Source_Han_Sans_SC'] font-normal text-[24px] tracking-[4%] capitalize text-[#696969] mt-8">
+ <p>鍗板埛闈㈢Н锛�880mm*546mm</p>
+ <p>绾稿紶鑼冨洿锛氶摐鐗堢焊銆佽交娑傜焊銆佸弻鑳剁焊銆佹柊闂荤焊</p>
+ <p>鎶橀〉寮�鏈細8寮�銆�16寮�銆�0.5鍗板紶銆�8寮�鍗曢〉</p>
+ </div>
+ </div>
</div>
</div>
<div v-if="data.tab == 3" class="bg-white ">
@@ -225,6 +241,7 @@
import baseyinshuaji1 from '@/static/img/baseyinshuaji1.png'
import heibai from '@/static/img/heibai.png'
import lunzhuan from '@/static/img/lunzhuan.png'
+import lunzhuan1 from '@/static/img/lunzhuan1.png'
import zhuangding2 from '@/static/img/zhuangding-2.png'
import Frame from '@/static/img/Frame.png'
import Frame1 from '@/static/img/Frame-1.png'
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index df40c50..ccf39e6 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -7,9 +7,9 @@
</el-header>
<el-main style="padding:0;" class="mainbg" >
<div class="content flex flex-wrap justify-between pt-16">
- <div v-for="(item,index) in arrayList" @click="goWeb(item.link)" class="relative mt-6 cursor-pointer w-[30%] h-[20%]" style="margin: 0 auto;">
+ <div v-for="(item,index) in arrayList" @click="goWeb(item.link)" class="relative mt-6 cursor-pointer w-[28%] h-[20%]" style="margin: 0 auto;">
<el-image style="width: 100%; height: 100%" :src="item.url"></el-image>
- <p class="absolute inset-0 whitespace-pre-line font-['Source_Han_Sans_CN_VF'] font-medium text-[32px] leading-[50px] tracking-[-5%] capitalize p-10 pl-14">{{ item.name }}</p>
+ <p class="absolute inset-0 whitespace-pre-line font-['Source_Han_Sans_CN_VF'] font-medium text-[30px] leading-[50px] tracking-[-5%] capitalize p-10 pl-14">{{ item.name }}</p>
</div>
</div>
</el-main>
--
Gitblit v1.9.1