From 3756238278d2055d1539375a19e9a293de4769a6 Mon Sep 17 00:00:00 2001 From: woody Date: Wed, 7 May 2025 16:59:21 +0800 Subject: [PATCH] =?UTF-8?q?feat(global):=20=E5=85=A8=E5=B1=80=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/HeaderTop.vue | 312 +++++++++++------ src/components/special-area-list/index.vue | 23 +- src/router/index.js | 9 - .../index/components/sidebarUserInfo.vue | 137 ++++++-- src/views/index/index.vue | 34 +- src/views/register/index.vue | 2 + src/views/roadtoGrowth/index.vue | 329 ------------------ 7 files changed, 354 insertions(+), 492 deletions(-) delete mode 100644 src/views/roadtoGrowth/index.vue diff --git a/src/components/HeaderTop.vue b/src/components/HeaderTop.vue index 7a5e6b2..f6ecfaa 100644 --- a/src/components/HeaderTop.vue +++ b/src/components/HeaderTop.vue @@ -37,37 +37,41 @@ @mouseleave="removeActive(1)" > 会员专区 -
-
-
{{ item.label }}
+ +
-
- {{ ctem.label }} -
+
{{ item.label }}
+ +
+
+ {{ ctem.label }} +
+
+
-
+
{{ "市场动态" }} -
-
- {{ item.text }} + +
+
+ {{ item.text }} +
-
+
{{ "会员中心" }} -
-
- {{ item.text }} + +
+
+ {{ item.text }} +
-
+
@@ -121,52 +129,54 @@
-
-
- +
+
+ {{ userInfo.memberName }} +
+
{{ userInfo.memberName }} + >
+
+ {{ "个人资料" }} +
+
+ {{ "账号安全" }} +
+
+ {{ "地址管理" }} +
+ +
+
{{ "退出登录" }}
-
-
- {{ "个人资料" }} -
-
- {{ "账号安全" }} -
-
- {{ "地址管理" }} -
- -
-
{{ "退出登录" }}
-
+
@@ -537,7 +547,7 @@ export default { this.$set(this, "childShow", id); this.$forceUpdate(); }, - childrenRemActive(id) { + childrenRemActive() { this.$set(this, "childShow", 0); }, //鼠标移入 @@ -601,6 +611,22 @@ export default { right: 0px; } +/* Transition styles */ +.fade-slide-enter-active, +.fade-slide-leave-active { + transition: opacity 0.3s ease, transform 0.3s ease; +} +.fade-slide-enter, +.fade-slide-leave-to { + opacity: 0; + transform: translateY(-10px); +} +.fade-slide-enter-to, +.fade-slide-leave { + opacity: 1; + transform: translateY(0); +} + .size-s { font-size: 24px; margin-left: 0px; @@ -625,16 +651,39 @@ export default { align-items: center; justify-content: space-between; font-size: 14px; - line-height: 44px; padding: 5px 60px; - background: #cccccc; - color: #333333; + background: #ffffff; + border-bottom: 1px solid #e9ecef; } .page_top_l { flex: 1; font-size: 18px; color: #333; + gap: 30px; + height: 44px; + + div { + cursor: pointer; + color: #4a5568; + font-size: 18px; + transition: color 0.2s ease-in-out; + + .el-icon-message, + .el-icon-chat-dot-round { + color: #4a5568; + transition: color 0.2s ease-in-out; + margin-right: 4px; + } + + &:hover { + color: var(--primary-color); + .el-icon-message, + .el-icon-chat-dot-round { + color: var(--primary-color); + } + } + } } .page_top_r { @@ -643,12 +692,30 @@ export default { align-items: center; justify-content: flex-end; gap: 30px; - height: 44px; div { cursor: pointer; - color: #333; + color: #4a5568; font-size: 18px; + padding: 4px 12px; + border-radius: 4px; + transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out; + + .el-icon-message, + .el-icon-chat-dot-round { + color: #4a5568; + transition: color 0.2s ease-in-out; + margin-right: 4px; + } + + &:hover { + color: var(--primary-color); + background-color: #f8f9fa; + .el-icon-message, + .el-icon-chat-dot-round { + color: var(--primary-color); + } + } } } @@ -659,7 +726,7 @@ export default { height: 63px; font-size: 18px; padding: 0 30px; - background: rgba(24, 24, 24, 0.84); + background: #2d3748; color: #ffffff; .fHeigh { @@ -667,6 +734,7 @@ export default { line-height: 63px; cursor: pointer; position: relative; + transition: transform 0.2s ease-in-out; } .page_btm_l { @@ -693,6 +761,14 @@ export default { .page_btm_r1 { margin-right: 20px; + + // Styles for the div containing userInfo.memberCode and the caret icon + .disflex > div:last-child { + font-weight: 600; // Semi-bold for better prominence + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); // Subtle shadow for depth + display: flex; // Ensures text and icon are aligned well + align-items: center; + } } .page_btm_r2 { @@ -711,13 +787,13 @@ export default { box-shadow: 0px 2px 20px 0px rgba(135, 135, 135, 0.3); border-radius: 8px 8px 8px 8px; padding: 10px 0; // padding: 10px 36px; - transform: translate(-62px, 0); + transform: translate(-52px, 0); // bottom: 0; } .aBsolts { width: 200px; - transform: translateX(0); + transform: translateX(-10px); text-align: center; position: absolute; color: #333; @@ -726,7 +802,7 @@ export default { box-shadow: 0px 2px 20px 0px rgba(135, 135, 135, 0.3); border-radius: 8px 8px 8px 8px; padding: 10px 0; - margin-left: -30px; // padding: 10px 36px; + // margin-left: -30px; // padding: 10px 36px; // transform: translate(-72px, 0); } @@ -813,7 +889,41 @@ export default { .page_btm_c { flex: 1; padding: 0 40px; + padding-right: 80px; display: flex; justify-content: space-between; } + +/* New hover effects for main menu items and user menu trigger */ +.page_btm_c > .fHeigh, +.page_btm_r .page_btm_r1.fHeigh { + /* position: relative; is already on .fHeigh via .page_btm .fHeigh */ +} + +.page_btm_c > .fHeigh::before, +.page_btm_r .page_btm_r1.fHeigh::before { + content: ""; + position: absolute; + top: 0; + left: 50%; + height: 100%; + width: 0; /* Initial width for animation */ + background-color: rgba(255, 255, 255, 0.1); + opacity: 0; /* Initial opacity for animation */ + transform: translateX(-50%); + transition: width 0.2s ease-in-out, opacity 0.2s ease-in-out; + z-index: -1; /* Behind the text */ + border-radius: 8px; /* Match submenu border-radius */ +} + +.page_btm_c > .fHeigh:hover::before, +.page_btm_r .page_btm_r1.fHeigh:hover::before { + width: 200px; /* Target width matching submenus */ + opacity: 1; +} + +.page_btm_c > .fHeigh:hover, +.page_btm_r .page_btm_r1.fHeigh:hover { + transform: translateY(-2px); +} diff --git a/src/components/special-area-list/index.vue b/src/components/special-area-list/index.vue index 4ea404c..97737e8 100644 --- a/src/components/special-area-list/index.vue +++ b/src/components/special-area-list/index.vue @@ -102,8 +102,7 @@ export default { diff --git a/src/views/index/index.vue b/src/views/index/index.vue index 89c60bf..034ea30 100644 --- a/src/views/index/index.vue +++ b/src/views/index/index.vue @@ -166,14 +166,20 @@ -
- +
+ + + + +
@@ -392,7 +398,7 @@ export default { }); this.dialogVisible = false; }) - .catch((err) => {}); + .catch(() => {}); } else { return false; } @@ -404,10 +410,10 @@ export default { if (valid) { this.startTime(); forgetSms(this.loginObj) - .then((res) => { + .then(() => { // this.bankCode = res.data }) - .catch((err) => { + .catch(() => { this.beginTime = 0; }); } else { @@ -426,7 +432,6 @@ export default { if (this.isSend) return; this.isSend = true; this.getSmsCode = this.beginTime + "s后重新发送"; - let that = this; this.timer = setInterval(() => { this.beginTime--; this.getSmsCode = this.beginTime + "s后重新发送"; @@ -628,13 +633,12 @@ html, font-size: 18px; } .add-target { - padding: 20px; + padding: 10px 20px; box-shadow: 7px 5px 10px 0px rgba(59, 59, 59, 0.14); border-radius: 10px 10px 10px 10px; background-color: #fff; - // height: 580px; position: relative; - margin-top: 20px; + margin-top: 15px; width: 1040px; } .target { diff --git a/src/views/register/index.vue b/src/views/register/index.vue index 025d149..cf96253 100644 --- a/src/views/register/index.vue +++ b/src/views/register/index.vue @@ -1506,6 +1506,8 @@ export default { .padRow { padding: 0 60px; + display: flex; + flex-wrap: wrap; } ::v-deep .el-input__suffix { diff --git a/src/views/roadtoGrowth/index.vue b/src/views/roadtoGrowth/index.vue deleted file mode 100644 index 649569a..0000000 --- a/src/views/roadtoGrowth/index.vue +++ /dev/null @@ -1,329 +0,0 @@ - - - - - \ No newline at end of file