美化样式

2026-08-09 16:37:40 +08:00 · 2026-08-09 16:37:40 +08:00 · 77afbc6418
parent 68efdbaf8c
commit 77afbc6418
15 changed files with 69 additions and 19 deletions
--- a/fryl_h5/src/App.vue
+++ b/fryl_h5/src/App.vue
@ -12,4 +12,10 @@ body,
  background: #f5f6f8;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
 }
+
+/* 与管理后台("凡荣e链")统一的品牌色:墨绿主色替换 Vant 默认蓝,金褐色作为局部强调点缀。
+   语义色(success/danger/warning)保持 Vant 默认不改动 */
+:root {
+  --van-primary-color: #1f5f4e;
+}
 </style>
--- a/fryl_h5/src/views/EnterpriseOpenMobile.vue
+++ b/fryl_h5/src/views/EnterpriseOpenMobile.vue
@ -187,7 +187,7 @@ onMounted(async () => {
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
-  background: linear-gradient(90deg, #1677ff, #4096ff);
+  background: linear-gradient(90deg, #1f5f4e, #2c6e5c);
  color: #fff;
 }
 .banner-title {
@ -257,7 +257,7 @@ onMounted(async () => {
  color: #969799;
 }
 .is-current .step-number {
-  background: #1677ff;
+  background: #1f5f4e;
  color: #fff;
 }
 .is-current .step-label {
--- a/fryl_h5/src/views/PersonalOpenMobile.vue
+++ b/fryl_h5/src/views/PersonalOpenMobile.vue
@ -182,7 +182,7 @@ onMounted(async () => {
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
-  background: linear-gradient(90deg, #1677ff, #4096ff);
+  background: linear-gradient(90deg, #1f5f4e, #2c6e5c);
  color: #fff;
 }
 .banner-title {
@ -252,7 +252,7 @@ onMounted(async () => {
  color: #969799;
 }
 .is-current .step-number {
-  background: #1677ff;
+  background: #1f5f4e;
  color: #fff;
 }
 .is-current .step-label {
--- a/fryl_h5/src/views/steps/AgreementStep.vue
+++ b/fryl_h5/src/views/steps/AgreementStep.vue
@ -233,7 +233,7 @@ onBeforeUnmount(() => {
  color: #646566;
 }
 .link {
-  color: #1989fa;
+  color: #1f5f4e;
 }
 .generate-error {
  margin-top: 16px;
@ -246,7 +246,7 @@ onBeforeUnmount(() => {
 }
 .retry-link {
  margin-left: 8px;
-  color: #1989fa;
+  color: #1f5f4e;
  text-decoration: underline;
  cursor: pointer;
 }
--- a/fryl_h5/src/views/steps/InfoConfirmStep.vue
+++ b/fryl_h5/src/views/steps/InfoConfirmStep.vue
@ -110,7 +110,7 @@ const maskedBankCardNumber = computed(() => maskBankCard(props.detail?.bankCardN
  margin-bottom: 10px;
 }
 .summary-icon {
-  color: #1989fa;
+  color: #1f5f4e;
  font-size: 16px;
 }
 .summary-body {
--- a/fryl_h5/src/views/steps/enterprise/EnterpriseAgreementStep.vue
+++ b/fryl_h5/src/views/steps/enterprise/EnterpriseAgreementStep.vue
@ -230,7 +230,7 @@ onBeforeUnmount(() => {
  color: #646566;
 }
 .link {
-  color: #1989fa;
+  color: #1f5f4e;
 }
 .generate-error {
  margin-top: 16px;
@ -243,7 +243,7 @@ onBeforeUnmount(() => {
 }
 .retry-link {
  margin-left: 8px;
-  color: #1989fa;
+  color: #1f5f4e;
  text-decoration: underline;
  cursor: pointer;
 }
--- a/src/App.vue
+++ b/src/App.vue
@ -1,5 +1,5 @@
 <template>
-  <a-config-provider :locale="zhCN">
+  <a-config-provider :locale="zhCN" :theme="themeConfig">
    <router-view />
  </a-config-provider>
 </template>
@ -12,6 +12,28 @@ import { useAuthStore } from '@/stores/auth'
 import { startIdleWatcher } from '@/utils/lastActive'
 import { showErrorModal } from '@/utils/errorModal'

+// 全局设计 token:主色调为墨绿色系,圆角/阴影偏淡雅稳重,语义色(成功/警告/错误/信息)保持 antd 默认不改动
+const themeConfig = {
+  token: {
+    colorPrimary: '#1F5F4E',
+    colorLink: '#1F5F4E',
+    colorLinkHover: '#2C6E5C',
+    colorLinkActive: '#164A3D',
+    borderRadius: 6,
+    colorBgLayout: '#F5F7F6',
+    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.06)',
+    boxShadowSecondary: '0 1px 4px rgba(0, 0, 0, 0.04)'
+  },
+  components: {
+    // Tabs 的当前激活页签用强调色(金褐)点缀,与全局主色(墨绿)区分,不参与按钮等大面积色块
+    Tabs: {
+      inkBarColor: '#B8860B',
+      itemSelectedColor: '#B8860B',
+      itemHoverColor: '#2C6E5C'
+    }
+  }
+}
+
 const router = useRouter()
 const route = useRoute()
 const authStore = useAuthStore()
--- a/src/components/BeneficiaryProofUpload.vue
+++ b/src/components/BeneficiaryProofUpload.vue
@ -129,7 +129,7 @@ function handleDelete() {
  cursor: pointer;
 }
 .mask-icon:hover {
-  color: #1677ff;
+  color: #1f5f4e;
 }
 .mask-divider {
  width: 1px;
--- a/src/components/EnterpriseBeneficiaryCard.vue
+++ b/src/components/EnterpriseBeneficiaryCard.vue
@ -437,7 +437,7 @@ function onTypeChange(key, checked) {
 }
 .sub-panel-title {
  margin-bottom: 12px;
-  color: #1677ff;
+  color: #1f5f4e;
  font-weight: 600;
 }
 </style>
--- a/src/components/FacePhotoUpload.vue
+++ b/src/components/FacePhotoUpload.vue
@ -179,7 +179,7 @@ function handleDelete() {
  cursor: pointer;
 }
 .mask-icon:hover {
-  color: #1677ff;
+  color: #1f5f4e;
 }
 .mask-divider {
  width: 1px;
--- a/src/components/IdCardUpload.vue
+++ b/src/components/IdCardUpload.vue
@ -139,7 +139,7 @@ function handleDelete() {
  cursor: pointer;
 }
 .mask-icon:hover {
-  color: #1677ff;
+  color: #1f5f4e;
 }
 .mask-divider {
  width: 1px;
--- a/src/components/LicenseUpload.vue
+++ b/src/components/LicenseUpload.vue
@ -128,7 +128,7 @@ function handleDelete() {
  cursor: pointer;
 }
 .mask-icon:hover {
-  color: #1677ff;
+  color: #1f5f4e;
 }
 .mask-divider {
  width: 1px;
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@ -1,7 +1,7 @@
 <template>
  <a-layout class="main-layout">
    <a-layout-header class="main-header">
-      <div class="logo">凡荣e链</div>
+      <div class="logo">凡荣<span class="logo-accent">e</span>链</div>
      <a-menu
        theme="dark"
        mode="horizontal"
@ -110,6 +110,7 @@ watch(
  display: flex;
  align-items: center;
  padding: 0 16px;
+  background: #1f5f4e;
 }
 .logo {
  color: #fff;
@ -118,6 +119,9 @@ watch(
  margin-right: 24px;
  white-space: nowrap;
 }
+.logo-accent {
+  color: #b8860b;
+}
 .main-menu {
  flex: 1;
  min-width: 0;
@ -144,5 +148,23 @@ watch(
  padding: 24px;
  background: #fff;
  min-height: calc(100vh - 160px);
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+/* 顶部导航深色菜单:整体背景改为主色墨绿,选中/悬浮项用更深的墨绿底 + 金褐色底线双重区分 */
+.main-menu.ant-menu-dark {
+  background-color: #1f5f4e;
+}
+.main-menu:deep(.ant-menu-item-selected) {
+  background-color: #164a3d !important;
+}
+.main-menu:deep(.ant-menu-item:hover),
+.main-menu:deep(.ant-menu-item-selected) {
+  color: #fff !important;
+}
+.main-menu:deep(.ant-menu-item-selected),
+.main-menu:deep(.ant-menu-item:hover) {
+  box-shadow: inset 0 -2px 0 0 #b8860b;
 }
 </style>
--- a/src/views/login/Login.vue
+++ b/src/views/login/Login.vue
@ -231,7 +231,7 @@ function handleSaveBaseUrl() {
  display: flex;
  align-items: center;
  justify-content: center;
-  background: linear-gradient(135deg, #1d3a6e 0%, #0b1f3f 100%);
+  background: linear-gradient(135deg, #1f5f4e 0%, #0f332b 100%);
  position: relative;
 }
 .base-url-btn {
@ -250,7 +250,7 @@ function handleSaveBaseUrl() {
  font-size: 26px;
  font-weight: 700;
  text-align: center;
-  color: #1d3a6e;
+  color: #1f5f4e;
 }
 .login-subtitle {
  text-align: center;
--- a/src/views/wallet/enterprise-open/EnterpriseOpenForm.vue
+++ b/src/views/wallet/enterprise-open/EnterpriseOpenForm.vue
@ -1206,7 +1206,7 @@ function goBack() {
  margin-bottom: 16px;
 }
 .role-card-title {
-  color: #1677ff;
+  color: #1f5f4e;
  font-weight: 600;
  font-size: 14px;
 }