feat: 会员中心全局暗色主题重构

阶段一：全局覆盖 - 新增 dark-override.css (450+ 行)，覆盖所有 Element UI 组件暗色样式 - 输入框、表格、Tabs、弹窗、按钮、分页、复选框、下拉框等 - 侧边栏、顶栏、主内容区暗色背景 - 滚动条、日期选择器、消息面板等 - header.php 引入 dark-override.css 阶段二：页面独立 CSS 暗色化（22 个文件） - 白色背景 #fff → #161b22 - 浅灰背景 #F3F5F9 → #0d1117 - 深色文字 #171725/#1E2736 → #E6E8EB - 灰色文字 #8692B0 → #8B949E - 浅色边框 #E6E7EB → rgba(255,255,255,0.06) - 悬停背景 #F5F7FA → #21262d
2026-03-19 19:49:49 +08:00
parent 63facc24d6
commit 0b845b2075
20 changed files with 789 additions and 193 deletions
--- a/clientarea/hgcloud/css/account.css
+++ b/clientarea/hgcloud/css/account.css
@@ -23,7 +23,7 @@
  font-family: Helvetica;
  font-weight: bold;
  line-height: 0.32rem;
-  color: #1e2736;
+  color: #E6E8EB;
 }
 .name-country {
  margin-top: 0.1rem;
@@ -48,7 +48,7 @@
  cursor: pointer;
  margin-left: 0.1rem;
  font-size: 0.14rem;
-  color: #1e2736;
+  color: #E6E8EB;
 }
 .bule-text {
  color: var(--color-primary) !important;
@@ -101,7 +101,7 @@
  font-size: 0.13rem;
  font-weight: 500;
  height: 0.2rem;
-  color: #8692b0;
+  color: #8B949E;
  margin-bottom: 0.25rem;
 }
 .box-item-b > .el-input,
@@ -131,7 +131,7 @@
  justify-content: center;
 }
 .el-input.is-disabled .el-input__inner {
-  background: #ffffff;
+  background: #161b22;
 }
 .el-input__inner {
  height: 0.46rem;
@@ -143,7 +143,7 @@
 .input-with-select .el-input-group__prepend {
  width: 60px;
  border: none;
-  background: #ffffff;
+  background: #161b22;
 }
 .edit-icon {
  cursor: pointer;
@@ -212,7 +212,7 @@
  color: rgba(255, 255, 255, 0.9);
 }
 .a-text {
-  color: #171725;
+  color: #E6E8EB;
 }
 .a-text:hover {
  color: var(--color-primary);
@@ -223,7 +223,7 @@
  margin-right: 0.05rem;
 }
 .is-read {
-  color: #8692b0;
+  color: #8B949E;
 }
 .no-read {
  color: var(--color-primary);
@@ -300,7 +300,7 @@ th {
 }
 .line-item text {
  font-size: 16px;
-  color: #1e2736;
+  color: #E6E8EB;
 }
 .type-btn {
  width: 100%;
@@ -310,7 +310,7 @@ th {
 .code-pass-select {
  width: auto;
  height: 44px;
-  border: 1px solid #e6e7eb;
+  border: 1px solid rgba(255,255,255,0.06);
  border-right: none;
 }
 .el-message-box__btns {
@@ -446,7 +446,7 @@ th {
  .mob-item-row-notes {
    font-size: 0.26rem;
    line-height: 0.27rem;
-    color: #8692b0;
+    color: #8B949E;
  }
  .mob-item-row2-name {
    font-size: 0.32rem;
@@ -464,7 +464,7 @@ th {
  .bottom-text {
    font-size: 0.26rem;
    line-height: 0.27rem;
-    color: #8692b0;
+    color: #8B949E;
    margin: 0.4rem 0;
    display: flex;
    justify-content: center;
--- a/clientarea/hgcloud/css/agreement.css
+++ b/clientarea/hgcloud/css/agreement.css
@@ -4,7 +4,7 @@
  padding: 0.2rem 3rem;
 }
 .contnet-right-out .content-right {
-  border: 1px solid #e6e7eb;
+  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 3px;
  padding: 0.36rem 0.5rem;
  overflow-x: auto;
@@ -13,7 +13,7 @@
  font-size: 0.28rem;
  font-weight: bold;
  line-height: 0.28rem;
-  color: #1e2736;
+  color: #E6E8EB;
 }
 .contnet-right-out .content-right .right-keywords-time {
  display: flex;
@@ -22,7 +22,7 @@
 .contnet-right-out .content-right .right-keywords-time .right-time,
 .contnet-right-out .content-right .right-keywords-time .right-keywords {
  font-size: 0.14rem;
-  color: #8692b0;
+  color: #8B949E;
  margin-top: 0.14rem;
 }
 .contnet-right-out .content-right .right-keywords-time .right-keywords {
--- a/clientarea/hgcloud/css/dark-override.css
+++ b/clientarea/hgcloud/css/dark-override.css
@@ -0,0 +1,595 @@
+/*
+ * ========================================
+ * 会员中心全局暗色主题覆盖
+ * dark-override.css
+ * ========================================
+ * 覆盖 common.css 和 Element UI 默认的浅色样式
+ * 在 header.php 中引入，影响所有登录后页面
+ */
+
+/* ============ 基础层 ============ */
+html, body {
+  background-color: #0d1117 !important;
+  color: #E6E8EB !important;
+}
+
+#mainLoading {
+  background: #0d1117 !important;
+}
+
+#mainLoading.pro-des::before {
+  background: #0d1117 !important;
+}
+
+.template:first-child {
+  display: none;
+}
+
+/* ============ 侧边栏 ============ */
+.el-aside {
+  background: #0d1117 !important;
+  border-right: 1px solid rgba(255,255,255,0.04);
+}
+
+.ali-logo {
+  filter: brightness(1.1);
+}
+
+/* ============ 顶栏 ============ */
+.el-header {
+  background: rgba(13, 17, 23, 0.85) !important;
+  backdrop-filter: blur(12px) !important;
+  box-shadow: 0 1px 0 rgba(255,255,255,0.04) !important;
+  border-bottom: 1px solid rgba(255,255,255,0.04);
+}
+
+.el-header .search-value,
+.el-header .search-name {
+  color: #8B949E !important;
+}
+
+.header-right .header-right-item .el-dropdown-header .head-box {
+  background: #1c2028 !important;
+}
+
+.header-right .header-right-item .un-login {
+  color: #8B949E !important;
+}
+
+.header-right .header-right-item .cloum-line {
+  border-color: rgba(255,255,255,0.08) !important;
+}
+
+.header-left .el-input input {
+  background: transparent !important;
+  color: #E6E8EB !important;
+}
+
+/* ============ 主内容区 ============ */
+.el-main {
+  background: #0d1117 !important;
+}
+
+.main-card {
+  background: #0d1117 !important;
+  color: #E6E8EB !important;
+}
+
+.main-card-title {
+  color: #E6E8EB !important;
+}
+
+/* ============ Element UI 输入框 ============ */
+.el-input__inner {
+  background-color: #1c2028 !important;
+  border: 1px solid rgba(255,255,255,0.06) !important;
+  color: #E6E8EB !important;
+  transition: border-color 0.2s;
+}
+
+.el-input__inner:hover {
+  border-color: rgba(22, 93, 255, 0.2) !important;
+}
+
+.el-input__inner:focus {
+  border-color: #165DFF !important;
+  box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.15) !important;
+}
+
+.el-input__inner::placeholder {
+  color: rgba(139, 148, 158, 0.5) !important;
+}
+
+.el-input.is-disabled .el-input__inner {
+  background-color: rgba(28, 32, 40, 0.6) !important;
+  color: rgba(139, 148, 158, 0.5) !important;
+}
+
+.el-input__prefix,
+.el-input__suffix {
+  color: #8B949E !important;
+}
+
+.el-textarea__inner {
+  background-color: #1c2028 !important;
+  border: 1px solid rgba(255,255,255,0.06) !important;
+  color: #E6E8EB !important;
+}
+
+.el-textarea__inner:focus {
+  border-color: #165DFF !important;
+}
+
+/* ============ Element UI 选择器 ============ */
+.el-select-dropdown {
+  background-color: #1c2028 !important;
+  border: 1px solid rgba(255,255,255,0.08) !important;
+}
+
+.el-select-dropdown__item {
+  color: #E6E8EB !important;
+}
+
+.el-select-dropdown__item:hover,
+.el-select-dropdown__item.hover {
+  background-color: #21262d !important;
+}
+
+.el-select-dropdown__item.selected {
+  color: #165DFF !important;
+}
+
+.el-select-dropdown__empty {
+  color: #8B949E !important;
+}
+
+.el-popper[x-placement^=bottom] .popper__arrow::after {
+  border-bottom-color: #1c2028 !important;
+}
+
+.el-popper[x-placement^=top] .popper__arrow::after {
+  border-top-color: #1c2028 !important;
+}
+
+/* ============ Element UI 表格 ============ */
+.el-table {
+  background-color: transparent !important;
+  color: #E6E8EB !important;
+}
+
+.el-table::before,
+.el-table::after {
+  background-color: rgba(255,255,255,0.04) !important;
+}
+
+.el-table th,
+.el-table th.el-table__cell {
+  background-color: #161b22 !important;
+  color: #8B949E !important;
+  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
+}
+
+.el-table tr {
+  background-color: #0d1117 !important;
+}
+
+.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
+  background-color: #161b22 !important;
+}
+
+.el-table td,
+.el-table td.el-table__cell {
+  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
+  color: #E6E8EB !important;
+}
+
+.el-table__body tr:hover > td.el-table__cell {
+  background-color: #21262d !important;
+}
+
+.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+  background-color: #21262d !important;
+}
+
+.el-table__empty-block {
+  background-color: transparent !important;
+}
+
+.el-table__empty-text {
+  color: #8B949E !important;
+}
+
+/* ============ Element UI Tabs ============ */
+.el-tabs__header {
+  border-bottom-color: rgba(255,255,255,0.06) !important;
+}
+
+.el-tabs__item {
+  color: #8B949E !important;
+}
+
+.el-tabs__item:hover {
+  color: #E6E8EB !important;
+}
+
+.el-tabs__item.is-active {
+  color: #165DFF !important;
+}
+
+.el-tabs__active-bar {
+  background-color: #165DFF !important;
+}
+
+.el-tabs__nav-wrap::after {
+  background-color: rgba(255,255,255,0.06) !important;
+}
+
+/* ============ Element UI 弹窗 ============ */
+.el-dialog {
+  background-color: #161b22 !important;
+  border: 1px solid rgba(255,255,255,0.06);
+  box-shadow: 0 12px 40px rgba(0,0,0,0.5) !important;
+}
+
+.el-dialog__header {
+  border-bottom: 1px solid rgba(255,255,255,0.06);
+}
+
+.el-dialog__title {
+  color: #E6E8EB !important;
+}
+
+.el-dialog__headerbtn .el-dialog__close {
+  color: #8B949E !important;
+}
+
+.el-dialog__body {
+  color: #E6E8EB !important;
+}
+
+.dialog-title {
+  color: #E6E8EB !important;
+}
+
+.dialog-footer .btn-ok {
+  background: #165DFF !important;
+  color: #FFFFFF !important;
+  border: none !important;
+}
+
+.dialog-footer .btn-ok:hover {
+  background: #0E42D2 !important;
+}
+
+.dialog-footer .btn-no {
+  background: #21262d !important;
+  color: #E6E8EB !important;
+  border: 1px solid rgba(255,255,255,0.08) !important;
+}
+
+/* ============ Element UI 按钮 ============ */
+.el-button {
+  background-color: #21262d !important;
+  border: 1px solid rgba(255,255,255,0.08) !important;
+  color: #E6E8EB !important;
+}
+
+.el-button:hover,
+.el-button:focus {
+  background-color: #2a313a !important;
+  border-color: rgba(255,255,255,0.12) !important;
+  color: #FFFFFF !important;
+}
+
+.el-button--primary {
+  background-color: #165DFF !important;
+  border-color: #165DFF !important;
+  color: #FFFFFF !important;
+}
+
+.el-button--primary:hover,
+.el-button--primary:focus {
+  background-color: #0E42D2 !important;
+  border-color: #0E42D2 !important;
+}
+
+.el-button--primary.is-plain {
+  background-color: rgba(22, 93, 255, 0.1) !important;
+  border-color: rgba(22, 93, 255, 0.3) !important;
+  color: #165DFF !important;
+}
+
+.el-button--text {
+  background: transparent !important;
+  border: none !important;
+  color: #165DFF !important;
+}
+
+.el-button.is-disabled,
+.el-button.is-disabled:hover {
+  background-color: rgba(33, 38, 45, 0.5) !important;
+  color: rgba(139, 148, 158, 0.4) !important;
+  border-color: rgba(255,255,255,0.04) !important;
+}
+
+/* ============ Element UI 分页 ============ */
+.el-pagination {
+  color: #8B949E !important;
+}
+
+.el-pagination button {
+  background-color: transparent !important;
+  color: #8B949E !important;
+}
+
+.el-pagination button:hover {
+  color: #165DFF !important;
+}
+
+.el-pager li {
+  background-color: transparent !important;
+  color: #8B949E !important;
+  border-color: rgba(255,255,255,0.08) !important;
+}
+
+.el-pager li:hover {
+  color: #165DFF !important;
+}
+
+.el-pager li.active {
+  color: #165DFF !important;
+  background: rgba(22, 93, 255, 0.1) !important;
+  border-color: rgba(22, 93, 255, 0.3) !important;
+}
+
+.el-pagination .el-select .el-input .el-input__inner {
+  color: #8B949E !important;
+}
+
+.el-pagination__jump {
+  color: #8B949E !important;
+}
+
+/* ============ Element UI 复选框/单选框 ============ */
+.el-checkbox__inner {
+  background-color: #1c2028 !important;
+  border-color: rgba(255,255,255,0.15) !important;
+}
+
+.el-checkbox__input.is-checked .el-checkbox__inner {
+  background-color: #165DFF !important;
+  border-color: #165DFF !important;
+}
+
+.el-checkbox__label {
+  color: #E6E8EB !important;
+}
+
+.el-radio__inner {
+  background-color: #1c2028 !important;
+  border-color: rgba(255,255,255,0.15) !important;
+}
+
+.el-radio__input.is-checked .el-radio__inner {
+  background-color: #165DFF !important;
+  border-color: #165DFF !important;
+}
+
+.el-radio__label {
+  color: #E6E8EB !important;
+}
+
+/* ============ Element UI 提示/警告 ============ */
+.el-alert--error {
+  background-color: rgba(240, 20, 46, 0.08) !important;
+  border: 1px solid rgba(240, 20, 46, 0.15);
+  color: #F0142F !important;
+}
+
+.el-alert--error .el-alert__title {
+  color: #F0142F !important;
+}
+
+.el-alert--success {
+  background-color: rgba(61, 213, 152, 0.08) !important;
+  border: 1px solid rgba(61, 213, 152, 0.15);
+}
+
+.el-alert--info {
+  background-color: rgba(22, 93, 255, 0.08) !important;
+  border: 1px solid rgba(22, 93, 255, 0.15);
+  color: #E6E8EB !important;
+}
+
+/* ============ Element UI 加载 ============ */
+.el-loading-mask {
+  background-color: rgba(13, 17, 23, 0.8) !important;
+}
+
+/* ============ Element UI 分割线 ============ */
+.el-divider {
+  background-color: rgba(255,255,255,0.06) !important;
+}
+
+.el-divider--vertical {
+  background-color: rgba(255,255,255,0.06) !important;
+}
+
+/* ============ Element UI Switch ============ */
+.el-switch__core {
+  border-color: rgba(255,255,255,0.1) !important;
+  background-color: #21262d !important;
+}
+
+.el-switch.is-checked .el-switch__core {
+  background-color: #165DFF !important;
+  border-color: #165DFF !important;
+}
+
+/* ============ Element UI Popover ============ */
+.el-popover {
+  background: #1c2028 !important;
+  border: 1px solid rgba(255,255,255,0.08) !important;
+  color: #E6E8EB !important;
+}
+
+/* ============ Element UI Form ============ */
+.el-form-item__label {
+  color: #8B949E !important;
+}
+
+/* ============ Element UI Tag ============ */
+.el-tag {
+  background-color: rgba(22, 93, 255, 0.1) !important;
+  border-color: rgba(22, 93, 255, 0.2) !important;
+  color: #165DFF !important;
+}
+
+/* ============ Element UI Dropdown ============ */
+.el-dropdown-menu {
+  background-color: #1c2028 !important;
+  border: 1px solid rgba(255,255,255,0.08) !important;
+}
+
+.el-dropdown-menu__item {
+  color: #E6E8EB !important;
+}
+
+.el-dropdown-menu__item:hover,
+.el-dropdown-menu__item--divided:hover {
+  background-color: #21262d !important;
+  color: #FFFFFF !important;
+}
+
+.el-dropdown-menu__item--divided::before {
+  background-color: rgba(255,255,255,0.06) !important;
+}
+
+/* ============ Element UI Message Box ============ */
+.el-message-box {
+  background-color: #161b22 !important;
+  border: 1px solid rgba(255,255,255,0.08) !important;
+}
+
+.el-message-box__title {
+  color: #E6E8EB !important;
+}
+
+.el-message-box__message {
+  color: #8B949E !important;
+}
+
+/* ============ Element UI Popconfirm ============ */
+.el-popconfirm {
+  color: #E6E8EB !important;
+}
+
+/* ============ Element UI Progress ============ */
+.el-progress__text {
+  color: #E6E8EB !important;
+}
+
+/* ============ Element UI Badge ============ */
+.el-badge__content {
+  border: none !important;
+}
+
+/* ============ 公共组件样式覆盖 ============ */
+/* 搜索框 */
+.com-search .el-input__suffix {
+  color: #8B949E !important;
+}
+
+/* 消息面板 */
+.top-msg-box {
+  background: #1c2028 !important;
+}
+
+.top-msg-box .msg-top .msg-top-left {
+  color: #E6E8EB !important;
+}
+
+.top-msg-box .msg-list .msg-item:hover {
+  background: #21262d !important;
+}
+
+.top-msg-box .msg-list .msg-item .msg-item-right .msg-item-right-top {
+  color: #E6E8EB !important;
+}
+
+.top-msg-box .msg-list .msg-item .msg-item-right .msg-item-right-bottom {
+  color: #8B949E !important;
+}
+
+/* 支付弹窗 */
+.pay-dialog .dia-title {
+  background: #161b22 !important;
+  color: #E6E8EB !important;
+}
+
+/* 蓝色文字链接 */
+.bule-text,
+.a-text {
+  color: #165DFF !important;
+}
+
+/* 通用卡片标题 */
+.title-text {
+  color: #E6E8EB !important;
+}
+
+/* 优惠码弹窗 */
+.discount-content {
+  background: #1c2028 !important;
+}
+
+/* 滚动条暗色 */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(255,255,255,0.1);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255,255,255,0.2);
+}
+
+/* ============ Element UI DatePicker ============ */
+.el-date-picker,
+.el-picker-panel {
+  background: #1c2028 !important;
+  border: 1px solid rgba(255,255,255,0.08) !important;
+  color: #E6E8EB !important;
+}
+
+.el-date-picker .el-picker-panel__header,
+.el-date-range-picker .el-picker-panel__header {
+  color: #E6E8EB !important;
+}
+
+.el-date-table th {
+  color: #8B949E !important;
+  border-bottom-color: rgba(255,255,255,0.06) !important;
+}
+
+.el-date-table td.normal span,
+.el-date-table td span {
+  color: #E6E8EB !important;
+}
+
+.el-date-table td.disabled span {
+  color: rgba(139,148,158,0.3) !important;
+}
+
+.el-picker-panel__footer {
+  background: #161b22 !important;
+  border-top-color: rgba(255,255,255,0.06) !important;
+}
--- a/clientarea/hgcloud/css/finance.css
+++ b/clientarea/hgcloud/css/finance.css
@@ -5,7 +5,7 @@
  padding: 0.24rem;
  font-size: 0.16rem;
  font-weight: 600;
-  color: #2B2B2B;
+  color: #E6E8EB;
  border-bottom: 1px solid #EAEAEA;
 }
 .finance .finance-top .finance-money-main {
@@ -24,13 +24,13 @@
 }
 .finance .finance-top .finance-money-main .finance-balance .balance-left .balance-left-title .balance-title-num {
  font-weight: 600;
-  color: #2B2B2B;
+  color: #E6E8EB;
 }
 .finance .finance-top .finance-money-main .finance-balance .balance-left .balance-left-num {
  margin-top: 0.16rem;
  font-weight: 600;
  font-size: 0.45rem;
-  color: #2B2B2B;
+  color: #E6E8EB;
 }
 .finance .finance-top .finance-money-main .finance-balance .balance-left .balance-left-num .prefix {
  font-size: 0.24rem;
@@ -82,7 +82,7 @@
 .finance .finance-top .finance-money-main .finance-other-money .other-money-item .other-money-item-value {
  font-weight: 600;
  font-size: 0.18rem;
-  color: #2B2B2B;
+  color: #E6E8EB;
 }
 .finance .finance-top .finance-money-main .finance-other-money .other-money-item .other-money-item-value .prefix {
  font-size: 0.12rem;
@@ -246,16 +246,16 @@
  font-size: 0.16rem;
  font-family: PingFang SC;
  font-weight: 400;
-  color: #1e2736;
+  color: #E6E8EB;
 }
 .kd-dialog .dialog-title {
  font-size: 0.24rem;
  font-weight: 400;
-  color: #171725;
+  color: #E6E8EB;
 }
 .kd-dialog .dialog-dec {
  margin-top: 0.2rem;
-  color: #1e2736;
+  color: #E6E8EB;
 }
 .kd-dialog .el-dialog__body {
  padding: 0.24rem;
@@ -274,7 +274,7 @@
  margin-bottom: 0;
 }
 .kd-dialog .kd-item .kd-label {
-  color: #8692b0;
+  color: #8B949E;
 }
 .kd-dialog .kd-item .kd-value {
  margin-left: 0.3rem;
@@ -288,7 +288,7 @@
 .kd-dialog .dialog-fotter .el-button {
  width: 1.12rem;
  height: 0.46rem;
-  color: #1e2736;
+  color: #E6E8EB;
  font-size: 0.16rem;
  background: #E7E7E7;
  border-radius: 0.03rem 0.03rem 0.03rem 0.03rem;
@@ -296,7 +296,7 @@
 .info-dialog .dialog-title {
  font-size: 0.24rem;
  font-weight: 400;
-  color: #171725;
+  color: #E6E8EB;
 }
 .info-dialog .certification-info {
  margin-top: 0.1rem;
@@ -312,7 +312,7 @@
  margin-bottom: 0;
 }
 .info-dialog .certification-info .kd-item .kd-label {
-  color: #8692b0;
+  color: #8B949E;
 }
 .info-dialog .certification-info .kd-item .kd-value {
  margin-left: 0.3rem;
@@ -356,7 +356,7 @@
 .info-dialog .cancel-btn {
  margin-left: 0.12rem;
  background: #E7E7E7;
-  color: #1e2736;
+  color: #E6E8EB;
 }
 .info-dialog .first-save-tip {
  font-size: 0.14rem;
@@ -365,7 +365,7 @@
 .cancel-dialog .dialog-title {
  font-size: 0.24rem;
  font-weight: 400;
-  color: #171725;
+  color: #E6E8EB;
 }
 .cancel-dialog .el-dialog__body {
  padding: 0.24rem;
@@ -373,7 +373,7 @@
 }
 .cancel-dialog .dialog-dec {
  margin-top: 0.3rem;
-  color: #1e2736;
+  color: #E6E8EB;
 }
 .cancel-dialog .dialog-fotter {
  margin-top: 0.4rem;
@@ -395,17 +395,17 @@
 .cancel-dialog .dialog-fotter .cancel-btn {
  margin-left: 0.12rem;
  background: #E7E7E7;
-  color: #1e2736;
+  color: #E6E8EB;
 }
 .mail-dialog .dialog-title {
  font-size: 0.24rem;
  font-weight: 400;
-  color: #171725;
+  color: #E6E8EB;
 }
 .mail-dialog .dialog-dec {
  font-size: 0.14rem;
  margin-top: 0.3rem;
-  color: #1e2736;
+  color: #E6E8EB;
 }
 .mail-dialog .el-dialog__body {
  padding: 0.24rem;
@@ -421,7 +421,7 @@
  padding: 0 !important;
 }
 .mail-dialog .fotter-left {
-  color: #1e2736;
+  color: #E6E8EB;
  font-size: 0.16rem;
 }
 .mail-dialog .fotter-left .price-blue {
@@ -443,7 +443,7 @@
 .mail-dialog .cancel-btn {
  margin-left: 0.12rem;
  background: #E7E7E7;
-  color: #1e2736;
+  color: #E6E8EB;
 }
 .creat-dia .dialog-tips {
  display: flex;
@@ -473,7 +473,7 @@
  display: flex;
  justify-content: space-between;
  align-items: center;
-  color: #8692b0;
+  color: #8B949E;
 }
 .credit-content .credit-top .credit-item .item-top .item-l {
  font-size: 0.16rem;
@@ -500,7 +500,7 @@
 .credit-content .credit-top .credit-item .item-bottom .item-bl {
  font-size: 0.28rem;
  font-weight: bold;
-  color: #1e2736;
+  color: #E6E8EB;
 }
 .credit-content .credit-top .credit-item .flex-bottom {
  display: flex;
@@ -519,8 +519,8 @@
 }
 .credit-content .credit-top .credit-item .flex-bottom .no-btn {
  border: 0.01rem solid #e6e7eb;
-  background: #FFFFFF;
-  color: #757575;
+  background: #161b22;
+  color: #8B949E;
 }
 .credit-content .credit-operation {
  cursor: pointer;
@@ -551,7 +551,7 @@
 .form-footer > .btn-no {
  background: #e7e7e7;
  border-radius: 3px;
-  color: #1e2736;
+  color: #E6E8EB;
  display: flex;
  align-items: center;
  justify-content: center;
@@ -646,11 +646,11 @@
  flex-direction: column;
  justify-content: center;
  align-items: center;
-  background: #ffffff;
+  background: #161b22;
 }
 .delete-order-dialog .delete-content {
  font-size: 0.18rem;
-  color: #1e2736;
+  color: #E6E8EB;
 }
 .delete-order-dialog .delete-btn {
  margin-top: 0.4rem;
@@ -672,7 +672,7 @@
 .delete-order-dialog .delete-btn .cancel-btn {
  margin-left: 0.12rem;
  background: #E7E7E7;
-  color: #1e2736;
+  color: #E6E8EB;
 }
 .pre-dialog .dialog-box {
  text-align: center;
@@ -749,7 +749,7 @@
  .mob-item-row-notes {
    font-size: 0.26rem;
    line-height: 0.26rem;
-    color: #8692b0;
+    color: #8B949E;
    margin-left: 0.26rem;
  }
  .mob-item-row1 {
@@ -759,7 +759,7 @@
  .mob-item-row2 {
    font-size: 0.3rem;
    line-height: 0.31rem;
-    color: #1e2736;
+    color: #E6E8EB;
  }
  .mob-item-row3 {
    margin-bottom: 0.33rem;
@@ -773,7 +773,7 @@
  .bottom-text {
    font-size: 0.26rem;
    line-height: 0.26rem;
-    color: #8692b0;
+    color: #8B949E;
    margin: 0.4rem 0;
    display: flex;
    justify-content: center;
@@ -828,7 +828,7 @@
    font-size: 0.26rem;
    margin-bottom: 0.16rem;
    line-height: 0.4rem;
-    color: #8692b0;
+    color: #8B949E;
    margin-left: 0.26rem;
    margin-right: 0.2rem;
  }
@@ -836,7 +836,7 @@
    margin-top: 0.16rem;
  }
  .child-row-name {
-    color: #1e2736;
+    color: #E6E8EB;
    width: 2.86rem;
    overflow: hidden;
    text-overflow: ellipsis;
--- a/clientarea/hgcloud/css/forget.css
+++ b/clientarea/hgcloud/css/forget.css
@@ -76,7 +76,7 @@
 .container-before {
  width: 7.5rem;
  height: 8rem;
-  background: #FFFFFF;
+  background: #161b22;
  box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.1);
  position: absolute;
  right: 0.9rem;
@@ -98,13 +98,13 @@
 }
 .login-text-title {
  font-size: 0.32rem;
-  color: #1E2736;
+  color: #E6E8EB;
  line-height: 0.32rem;
 }
 .login-text-regist {
  font-weight: Regular;
  margin-top: 0.08rem;
-  color: #1E2736;
+  color: #E6E8EB;
 }
 .login-text-regist a {
  color: var(--color-primary);
@@ -137,7 +137,7 @@
  margin-top: 0.3rem;
 }
 .input-with-select .el-input-group__prepend {
-  background: #FFFFFF;
+  background: #161b22;
  width: 60px;
 }
 .code-item {
@@ -175,7 +175,7 @@
 }
 .line-item text {
  font-size: 16px;
-  color: #1E2736;
+  color: #E6E8EB;
 }
 .type-btn {
  width: 100%;
--- a/clientarea/hgcloud/css/home.css
+++ b/clientarea/hgcloud/css/home.css
@@ -3,7 +3,7 @@
 }
 .main-card {
  max-width: none;
-  background: #F3F5F9;
+  background: #0d1117;
 }
 .main-content {
  display: flex;
@@ -17,8 +17,8 @@
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 0.84rem 0.6rem 0.4rem 1.1rem;
-  border-right: 1px solid #E6E7EB;
-  background-color: #fff;
+  border-right: 1px solid rgba(255,255,255,0.06);
+  background-color: #161b22;
  min-height: 1.88rem;
 }
 .info-first {
@@ -31,7 +31,7 @@
  justify-content: center;
  align-items: center;
  font-size: 0.36rem;
-  background: #fff;
+  background: #161b22;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 0.03rem;
@@ -45,17 +45,17 @@
  margin-left: 0.08rem;
 }
 .name {
-  color: #8692B0;
+  color: #8B949E;
  font-size: 0.14rem;
  font-weight: 400;
 }
 .name .id-text {
-  color: #1E2736;
+  color: #E6E8EB;
 }
 .hello {
  font-weight: 400;
  font-size: 0.16rem;
-  color: #1E2736;
+  color: #E6E8EB;
 }
 .info-second {
  height: 0.6rem;
@@ -82,7 +82,7 @@
  align-items: center;
  column-gap: 0.04rem;
  font-size: 0.14rem;
-  color: #8692B0;
+  color: #8B949E;
 }
 .info-three .compny-box .left-icon img,
 .info-three .person-box .left-icon img {
@@ -98,11 +98,11 @@
 }
 .info-three .compny-box .right-text .right-type,
 .info-three .person-box .right-text .right-type {
-  color: #949CB0;
+  color: #8B949E;
 }
 .info-three .compny-box .right-text .company-name,
 .info-three .person-box .right-text .company-name {
-  color: #1E2736;
+  color: #E6E8EB;
 }
 .info-three .compny-box .right-text .certify-bottom,
 .info-three .person-box .right-text .certify-bottom {
@@ -123,7 +123,7 @@
 }
 .info-three .compny-box .right-text .certify-text,
 .info-three .person-box .right-text .certify-text {
-  color: #292E36;
+  color: #E6E8EB;
  display: inline-block;
  max-width: 1.6rem;
  overflow: hidden;
@@ -132,7 +132,7 @@
 }
 .email-box,
 .phone-box {
-  color: #8692B0;
+  color: #8B949E;
  display: flex;
  justify-content: space-between;
  align-items: center;
@@ -141,7 +141,7 @@
 .email-box .phone-number,
 .phone-box .phone-number {
  margin-left: 0.25rem;
-  color: #1E2736;
+  color: #E6E8EB;
 }
 .info-second > div img {
  margin-right: 0.05rem;
@@ -154,7 +154,7 @@
 }
 .title-text {
  font-weight: Bold;
-  color: #171725;
+  color: #E6E8EB;
  font-size: 0.16rem;
  margin-bottom: 0.1rem;
 }
@@ -165,7 +165,7 @@
 }
 .money-box {
  flex: 1;
-  background-color: #fff;
+  background-color: #161b22;
 }
 .order-box {
  display: flex;
@@ -188,21 +188,21 @@
  padding: 0.12rem 0.08rem;
 }
 .statistics-top .statistics-credit .credit-title {
-  color: #949cb0;
+  color: #8B949E;
  font-size: 0.12rem;
  display: flex;
  align-items: center;
  column-gap: 0.08rem;
 }
 .statistics-top .statistics-credit .credit-title .credit-tag {
-  color: #444B59;
+  color: #8B949E;
  font-size: 0.12rem;
  box-sizing: border-box;
  padding: 0.02rem 0.04rem;
  /* 线条/描边 */
-  border: 1px solid #dcdfe6;
+  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 2px;
-  background: #ffffff;
+  background: #161b22;
 }
 .statistics-top .statistics-credit .credit-money {
  margin-top: 0.1rem;
@@ -211,7 +211,7 @@
  column-gap: 0.1rem;
 }
 .statistics-top .statistics-credit .credit-money .credit-num {
-  color: #292e36;
+  color: #E6E8EB;
  font-size: 0.18rem;
  font-weight: bold;
  flex-shrink: 0;
@@ -232,7 +232,7 @@
 }
 .voucher-box {
  padding: 0 0.16rem;
-  color: #949CB0;
+  color: #8B949E;
  font-size: 0.12rem;
  margin-top: 0.06rem;
 }
@@ -258,7 +258,7 @@
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
-  color: #949CB0;
+  color: #8B949E;
  font-size: 0.12rem;
 }
 .money-total {
@@ -293,7 +293,7 @@
  border-radius: 0.03rem;
 }
 .money-num {
-  color: #1E2736;
+  color: #E6E8EB;
  font-weight: bold;
  font-size: 0.16rem;
 }
@@ -347,7 +347,7 @@
  padding: 0 0.36rem 0rem 0.8rem;
 }
 .goods-box {
-  background-color: #fff;
+  background-color: #161b22;
 }
 .goods-table {
  border-spacing: 0;
@@ -357,18 +357,18 @@
  cursor: pointer;
 }
 .product-item:hover {
-  background-color: #F5F7FA;
+  background-color: #0d1117;
  transition: background-color 0.25s ease;
 }
 .goods-table thead tr td {
  font-size: 0.14rem;
-  color: #8692B0;
+  color: #8B949E;
  width: 25%;
 }
 .goods-table tbody tr td {
  padding: 0.2rem 0;
  font-size: 0.14rem;
-  color: #171725;
+  color: #E6E8EB;
 }
 .time-box {
  width: 1.6rem;
@@ -380,7 +380,7 @@
  box-sizing: border-box;
  padding: 0.4rem;
  width: 5.9rem;
-  background-color: #fff;
+  background-color: #161b22;
 }
 .recommend-box {
  width: 3.65rem;
@@ -390,13 +390,13 @@
 }
 .recommend-box h2 {
  text-align: center;
-  color: #1E2736;
+  color: #E6E8EB;
  font-size: 0.24rem;
 }
 .recommend-box p {
  margin-top: 0.26rem;
  text-align: center;
-  color: #8692B0;
+  color: #8B949E;
  font-size: 0.14rem;
 }
 .recommend-box img {
@@ -405,7 +405,7 @@
 }
 .recommend-people {
  margin-top: 0.3rem;
-  border-top: 1px solid #E6E7EB;
+  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 0.3rem;
  text-align: left;
 }
@@ -427,7 +427,7 @@
  margin-left: 0.16rem;
  font-weight: bold;
  font-size: 0.26rem;
-  color: #040E34;
+  color: #E6E8EB;
 }
 .recommend-people > div {
  display: flex;
@@ -448,17 +448,17 @@
  cursor: pointer;
  display: block;
  padding: 0 0.03rem;
-  background: #EEF4FF;
+  background: rgba(22,93,255,0.08);
  height: 0.24rem;
  line-height: 0.24rem;
  text-align: center;
  border-radius: 0.03rem;
-  color: #8692B0;
+  color: #8B949E;
 }
 .WorkOrder-content {
  padding: 0.3rem 0.3rem 0 0.3rem;
  border-radius: 0.03rem;
-  border: 1px solid #E6E7EB;
+  border: 1px solid rgba(255,255,255,0.06);
 }
 .WorkOrder-item {
  display: flex;
@@ -466,7 +466,7 @@
 }
 .WorkOrder-item:hover {
  cursor: pointer;
-  background-color: #f5f7fa;
+  background-color: #0d1117;
  transition: background-color 0.25s ease;
 }
 .replay-div {
@@ -494,7 +494,7 @@
 }
 .replay-title {
  font-size: 0.14rem;
-  color: #1E2736;
+  color: #E6E8EB;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
@@ -502,7 +502,7 @@
 .replay-name {
  font-size: 0.13rem;
  font-weight: 500;
-  color: #8692B0;
+  color: #8B949E;
 }
 .notice-box {
  margin-top: 0.3rem;
@@ -515,7 +515,7 @@
  padding-left: 0.16rem;
 }
 .notice-item:hover {
-  background-color: #f5f7fa;
+  background-color: #0d1117;
  transition: background-color 0.25s ease;
 }
 .progress-box .el-progress-circle {
@@ -535,12 +535,12 @@
 }
 .notice-time {
  font-size: 0.2rem;
-  color: #1E2736;
+  color: #E6E8EB;
 }
 .notice-title {
  font-weight: 400;
  font-size: 0.14rem;
-  color: #1E2736;
+  color: #E6E8EB;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
@@ -548,15 +548,15 @@
 .notice-type {
  font-size: 0.13rem;
  font-weight: 500;
-  color: #8692B0;
+  color: #8B949E;
 }
 .notice-item-right {
-  color: #8692B0;
+  color: #8B949E;
  width: 0.24rem;
  height: 0.24rem;
  text-align: center;
  line-height: 0.24rem;
-  background: #EEF4FF;
+  background: rgba(22,93,255,0.08);
  border-radius: 0.03rem;
 }
 .no-product {
@@ -567,12 +567,12 @@
 }
 .no-product h2 {
  font-weight: 400;
-  color: #171725;
+  color: #E6E8EB;
  font-size: 0.28rem;
 }
 .no-product p {
  margin: 0.1rem 0 0.2rem 0;
-  color: #8692B0;
+  color: #8B949E;
  font-size: 0.14rem;
 }
 .no-product .el-button {
@@ -600,9 +600,9 @@
 .recommend-text {
  margin: 0 auto;
  margin-top: 0.24rem;
-  color: #8692B0;
+  color: #8B949E;
  font-size: 0.14rem;
-  background: #EEF4FF;
+  background: rgba(22,93,255,0.08);
  height: 0.32rem;
  line-height: 0.32rem;
  border-radius: 0.03rem;
@@ -664,7 +664,7 @@
 .recommend-box-open .recommend-top .left .row1 .title-text {
  font-size: 18px;
  font-weight: bold;
-  color: #171725;
+  color: #E6E8EB;
  margin-right: 0.2rem;
  margin-bottom: 0;
 }
@@ -687,14 +687,14 @@
 .recommend-box-open .recommend-top .left .row2 {
  font-size: 16px;
  font-weight: bold;
-  color: #171725;
+  color: #E6E8EB;
  margin-top: 0.3rem;
  margin-bottom: 0.13rem;
 }
 .recommend-box-open .recommend-top .left .row3,
 .recommend-box-open .recommend-top .left .row4 {
  font-size: 14px;
-  color: #8692B0;
+  color: #8B949E;
 }
 .recommend-box-open .recommend-top .right {
  width: 1.5rem;
@@ -703,7 +703,7 @@
 .recommend-box-open .url {
  width: 5.2rem;
  height: 0.46rem;
-  border: 1px solid #E6E7EB;
+  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 3px;
  display: flex;
  flex-direction: row;
@@ -714,7 +714,7 @@
 .recommend-box-open .url .url-text {
  width: 100%;
  font-size: 15px;
-  color: #8692B0;
+  color: #8B949E;
  margin-left: 0.16rem;
  overflow: hidden;
  white-space: nowrap;
@@ -723,8 +723,8 @@
 .recommend-box-open .url .copy-btn {
  width: 112px;
  height: 100%;
-  background: #E1F0FF;
-  border-left: 1px solid #E6E7EB;
+  background: rgba(22,93,255,0.1);
+  border-left: 1px solid rgba(255,255,255,0.06);
  border-radius: 0px 3px 3px 0px;
  font-size: 16px;
  color: #0058FF;
@@ -745,8 +745,8 @@
 .recommend-box-open .top-statistic .top-item {
  width: 2.4rem;
  min-height: 1.76rem;
-  background: #FFFFFF;
-  box-shadow: 0px 1px 4px rgba(21, 34, 50, 0.08);
+  background: #161b22;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
@@ -760,7 +760,7 @@
 .recommend-box-open .top-statistic .top-item .item-top .top-money {
  font-size: 0.32rem;
  font-weight: bold;
-  color: #1E2736;
+  color: #E6E8EB;
  display: flex;
  flex-direction: row;
  align-items: center;
@@ -780,7 +780,7 @@
 }
 .recommend-box-open .top-statistic .top-item .item-top .top-text {
  font-size: 12px;
-  color: #8692B0;
+  color: #8B949E;
 }
 .recommend-box-open .top-statistic .top-item .top-img {
  width: 100%;
@@ -804,7 +804,7 @@
  height: 0.46rem;
  background: #E7E7E7;
  border-radius: 3px;
-  color: #1E2736;
+  color: #E6E8EB;
 }
 .wx-code {
  width: 60px;
--- a/clientarea/hgcloud/css/loginDialog.css
+++ b/clientarea/hgcloud/css/loginDialog.css
@@ -16,7 +16,7 @@
  content: '';
  width: 0px;
  height: 4.6rem;
-  border: 1px solid #E6E7EB;
+  border: 1px solid rgba(255,255,255,0.06);
  opacity: 0.4;
  position: absolute;
  top: 0.91rem;
@@ -24,10 +24,10 @@
 }
 .login-dialog .el-dialog__body .login-left .login-text .login-text-title {
  font-size: 0.32rem;
-  color: #1E2736;
+  color: #E6E8EB;
 }
 .login-dialog .el-dialog__body .login-left .login-text .login-text-regist {
-  color: #1E2736;
+  color: #E6E8EB;
 }
 .login-dialog .el-dialog__body .login-left .login-text .login-text-regist a {
  color: #0058FF;
@@ -60,7 +60,7 @@
  margin-top: 0.3rem;
 }
 .login-dialog .el-dialog__body .login-left .login-form .form-main .form-item .input-with-select .el-input-group__prepend {
-  background: #FFFFFF;
+  background: #161b22;
  width: 64px;
 }
 .login-dialog .el-dialog__body .login-left .login-form .form-main .form-item .login-btn {
@@ -103,7 +103,7 @@
 }
 .login-dialog .el-dialog__body .login-left .login-form .form-main .line-item text {
  font-size: 16px;
-  color: #1E2736;
+  color: #E6E8EB;
 }
 .login-dialog .el-dialog__body .login-right .login-back-img {
  width: 5.17rem;
--- a/clientarea/hgcloud/css/news.css
+++ b/clientarea/hgcloud/css/news.css
@@ -10,7 +10,7 @@
 }
 .news .main-card .main-card-title {
  font-size: 0.28rem;
-  color: #171725;
+  color: #E6E8EB;
  margin-bottom: 0.24rem;
 }
 .news .main-card .search-input {
@@ -48,7 +48,7 @@
 }
 .news .tit {
  font-size: 0.2rem;
-  color: #171725;
+  color: #E6E8EB;
  line-height: 1;
 }
 .news .com-search {
@@ -113,7 +113,7 @@
  color: var(--color-danger);
 }
 .news .tag.def {
-  background: #E1F0FF;
+  background: rgba(22,93,255,0.1);
  color: var(--color-info);
 }
 .news .total {
@@ -123,7 +123,7 @@
  align-items: center;
  line-height: 0.2rem;
  font-size: 0.16rem;
-  color: #171725;
+  color: #E6E8EB;
  padding-left: 0.2rem;
  margin-bottom: 0.2rem;
  box-sizing: border-box;
@@ -179,7 +179,7 @@
 .news .news-list .item .item-right {
  width: 100%;
  height: 0.84rem;
-  border-bottom: 1px solid #E6E7EB;
+  border-bottom: 1px solid rgba(255,255,255,0.06);
 }
 .news .news-list .title {
  margin-bottom: 0.1rem;
@@ -195,7 +195,7 @@
 /* news_detail */
 .news_detail .main-card-title {
  padding-bottom: 0.2rem;
-  border-bottom: 1px solid #E6E7EB;
+  border-bottom: 1px solid rgba(255,255,255,0.06);
 }
 .news_detail .back {
  cursor: pointer;
@@ -207,7 +207,7 @@
 }
 .news_detail .news_annex a {
  text-decoration: none;
-  color: #171725;
+  color: #E6E8EB;
 }
 .news_detail .news_annex a:hover {
  text-decoration: underline;
@@ -215,7 +215,7 @@
 }
 .news_detail .new-box {
  width: 10.33rem;
-  border: 1px solid #E6E7EB;
+  border: 1px solid rgba(255,255,255,0.06);
  margin: 0.4rem auto;
  padding: 0.3rem 0.5rem;
  box-sizing: border-box;
@@ -223,7 +223,7 @@
 .news_detail .new-box .tit {
  line-height: 1.2;
  font-size: 0.28rem;
-  color: #171725;
+  color: #E6E8EB;
  margin-bottom: 0.14rem;
 }
 .news_detail .new-box .time {
@@ -257,7 +257,7 @@
 .news_detail .page .link a {
  display: block;
  font-size: 0.14rem;
-  color: #171725;
+  color: #E6E8EB;
  text-decoration: none;
  text-overflow: ellipsis;
  overflow: hidden;
--- a/clientarea/hgcloud/css/orderDetail.css
+++ b/clientarea/hgcloud/css/orderDetail.css
@@ -5,7 +5,7 @@
  padding-bottom: 0.2rem;
  display: flex;
  align-items: center;
-  border-bottom: 1px solid #E6E7EB;
+  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 0.4rem;
 }
 .page-top .back-btn {
@@ -20,7 +20,7 @@
 .page-top .top-title {
  margin-left: 0.25rem;
  font-size: 0.28rem;
-  color: #1E2736;
+  color: #E6E8EB;
 }
 .order-info {
  display: flex;
@@ -30,7 +30,7 @@
 }
 .order-info .info-left .order-user {
  font-size: 0.18rem;
-  color: #1E2736;
+  color: #E6E8EB;
 }
 .order-info .info-right {
  display: flex;
@@ -58,7 +58,7 @@
  margin-top: 0.1rem;
  font-weight: bold;
  font-size: 0.14rem;
-  color: #1E2736;
+  color: #E6E8EB;
 }
 .order-info .pay-status {
  border-radius: 0.03rem;
@@ -83,7 +83,7 @@
 }
 .order-info .order-num {
  margin-top: 0.13rem;
-  color: #1E2736;
+  color: #E6E8EB;
  font-size: 0.14rem;
 }
 .order-info .order-num .num-text {
@@ -99,7 +99,7 @@
 }
 .self-field .self-num {
  display: flex;
-  color: #1E2736;
+  color: #E6E8EB;
  font-size: 0.14rem;
 }
 .self-field .self-num .field-name {
@@ -132,7 +132,7 @@
 }
 .order-table .table-item .des,
 .order-table .table-item .money {
-  color: #1E2736;
+  color: #E6E8EB;
 }
 .order-table .table-item .des-text {
  margin-right: 0.5rem;
@@ -148,7 +148,7 @@
  border-bottom: 0.01rem solid #E6E7EB;
 }
 .order-table .total-money {
-  color: #1E2736;
+  color: #E6E8EB;
  margin-right: 0.3rem;
 }
 .order-transaction {
@@ -163,7 +163,7 @@
  border-bottom: 0.01rem solid #E6E7EB;
 }
 .order-transaction .table-top {
-  color: #1E2736;
+  color: #E6E8EB;
  padding: 0.13rem 0.2rem 0.14rem;
 }
 .order-transaction .table-bottom {
--- a/clientarea/hgcloud/css/productList.css
+++ b/clientarea/hgcloud/css/productList.css
@@ -2,7 +2,7 @@
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 14px;
-  color: #171725;
+  color: #E6E8EB;
 }
 .main-card-title {
  display: flex;
@@ -41,7 +41,7 @@
 }
 .card-menu-item {
  font-size: 15;
-  color: #1e2736;
+  color: #E6E8EB;
  padding-bottom: 13px;
  cursor: pointer;
 }
@@ -118,14 +118,14 @@ tbody tr:hover {
  flex-direction: column;
 }
 .cloud-name .packge-name {
-  color: #171725;
+  color: #E6E8EB;
  overflow: hidden;
  text-overflow: ellipsis;
 }
 .cloud-name .name {
  font-size: 13px;
  font-weight: 500;
-  color: #8692b0;
+  color: #8B949E;
  overflow: hidden;
  text-overflow: ellipsis;
 }
@@ -137,7 +137,7 @@ tbody tr:hover {
  width: 0.24rem;
 }
 .power-status .status-text {
-  color: #1e2736;
+  color: #E6E8EB;
  margin-left: 7px;
 }
 .os {
--- a/clientarea/hgcloud/css/productdetail.css
+++ b/clientarea/hgcloud/css/productdetail.css
@@ -8,7 +8,7 @@
 }
 .config-box .contract-box .contract-top .top-product-name {
  font-size: 0.28rem;
-  color: #171725;
+  color: #E6E8EB;
  margin-left: 0.25rem;
 }
 .config-box .contract-box .go-contract {
@@ -25,7 +25,7 @@
 .config-box .contract-box .go-contract .contract-text {
  margin: 0.4rem 0 0.24rem;
  font-size: 0.16rem;
-  color: #1E2736;
+  color: #E6E8EB;
 }
 .config-box .contract-box .go-contract .contract-btn {
  font-size: 0.16rem;
--- a/clientarea/hgcloud/css/promotionDetail.css
+++ b/clientarea/hgcloud/css/promotionDetail.css
@@ -7,7 +7,7 @@
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 0.25rem;
-  color: #171725;
+  color: #E6E8EB;
 }
 .promotionDetail-contetn header img {
  display: block;
@@ -26,7 +26,7 @@
  font-family: PingFang SC;
  font-weight: 500;
  line-height: 0.25rem;
-  color: #1e2736;
+  color: #E6E8EB;
 }
 .promotionDetail-contetn main .el-form {
  padding-left: 0.5rem;
@@ -38,7 +38,7 @@
  font-size: 0.16rem;
  font-family: PingFang SC;
  font-weight: 400;
-  color: #1e2736;
+  color: #E6E8EB;
 }
 .promotionDetail-contetn main .el-form .el-form-item .el-form-item__content {
  width: 4rem;
@@ -56,9 +56,9 @@
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 0.24rem;
-  color: #8692b0;
+  color: #8B949E;
 }
 .promotionDetail-contetn main .content-table {
-  border: 1px solid #e6e7eb;
+  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 3px;
 }
--- a/clientarea/hgcloud/css/security.css
+++ b/clientarea/hgcloud/css/security.css
@@ -37,7 +37,7 @@
  background: #EEEEEE;
  border-radius: 3px;
  font-size: 0.13rem;
-  color: #757575;
+  color: #8B949E;
  display: flex;
  align-items: center;
  justify-content: center;
@@ -45,7 +45,7 @@
 .main-card .content-table .tabledata .open-show .open {
  width: 0.59rem;
  height: 0.26rem;
-  background: #E1F0FF;
+  background: rgba(22,93,255,0.1);
  border-radius: 3px;
  font-size: 0.13rem;
  display: flex;
@@ -60,7 +60,7 @@
  cursor: pointer;
 }
 .main-card .create-api-dialog .dialog-main .content-msg {
-  border: 1px solid #E6E7EB;
+  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
@@ -71,7 +71,7 @@
  align-items: center;
  margin-left: 0.3rem;
  margin-top: 0.2rem;
-  color: #757575;
+  color: #8B949E;
 }
 .main-card .create-api-dialog .dialog-main .content-msg .msg-item:last-child {
  margin-bottom: 0.3rem;
@@ -115,7 +115,7 @@
 .main-card .delete-dialog .del-dialog-main {
  font-size: 0.16rem;
  font-weight: 800;
-  color: #1E2736;
+  color: #E6E8EB;
  margin-top: 0.3rem;
  margin-bottom: 0.4rem;
 }
@@ -140,11 +140,11 @@
 }
 .main-card .delete-dialog .del-dialog-footer .btn-no {
  background: #E7E7E7;
-  color: #1E2736;
+  color: #E6E8EB;
  margin-top: 0.16rem;
 }
 .main-card .white-ip-dialog .dialog-main .info-alert {
-  background: #E1F0FF;
+  background: rgba(22,93,255,0.1);
  color: var(--color-primary);
  font-size: 0.15rem;
 }
@@ -165,7 +165,7 @@
  margin-left: 1.04rem;
  margin-top: 0.2rem;
  margin-bottom: 0.3rem;
-  color: #8692B0;
+  color: #8B949E;
 }
 .main-card .white-ip-dialog .dialog-main .alert-text {
  margin-top: 0.2rem;
@@ -234,7 +234,7 @@
 }
 .dialog-main .label {
  font-size: 0.16rem;
-  color: #1E2736;
+  color: #E6E8EB;
  margin-bottom: 0.1rem;
 }
 .dialog-main .label:not(:first-child) {
--- a/clientarea/hgcloud/css/security_group.css
+++ b/clientarea/hgcloud/css/security_group.css
@@ -37,7 +37,7 @@
  background: #EEEEEE;
  border-radius: 3px;
  font-size: 0.13rem;
-  color: #757575;
+  color: #8B949E;
  display: flex;
  align-items: center;
  justify-content: center;
@@ -45,7 +45,7 @@
 .main-card .content-table .tabledata .open-show .open {
  width: 0.59rem;
  height: 0.26rem;
-  background: #E1F0FF;
+  background: rgba(22,93,255,0.1);
  border-radius: 3px;
  font-size: 0.13rem;
  display: flex;
@@ -63,7 +63,7 @@
  width: 6.2rem;
 }
 .main-card .create-api-dialog .dialog-main .content-msg {
-  border: 1px solid #E6E7EB;
+  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
@@ -75,7 +75,7 @@
  align-items: center;
  margin-left: 0.3rem;
  margin-top: 0.2rem;
-  color: #757575;
+  color: #8B949E;
 }
 .main-card .create-api-dialog .dialog-main .content-msg .msg-item:last-child {
  margin-bottom: 0.3rem;
@@ -133,7 +133,7 @@
  line-height: 1;
 }
 .main-card .white-ip-dialog .dialog-main .info-alert {
-  background: #E1F0FF;
+  background: rgba(22,93,255,0.1);
  color: var(--color-primary);
  font-size: 0.15rem;
 }
@@ -154,7 +154,7 @@
  margin-left: 1.04rem;
  margin-top: 0.2rem;
  margin-bottom: 0.3rem;
-  color: #8692B0;
+  color: #8B949E;
 }
 .main-card .white-ip-dialog .dialog-main .alert-text {
  margin-top: 0.2rem;
@@ -197,7 +197,7 @@
 .delete-dialog .del-dialog-main {
  font-size: 0.16rem;
  font-weight: 800;
-  color: #1E2736;
+  color: #E6E8EB;
  margin-top: 0.3rem;
  margin-bottom: 0.4rem;
 }
@@ -222,7 +222,7 @@
 }
 .delete-dialog .del-dialog-footer .btn-no {
  background: #E7E7E7;
-  color: #1E2736;
+  color: #E6E8EB;
  margin-top: 0.16rem;
 }
 .more-operation {
@@ -270,7 +270,7 @@
 }
 .dialog-main .label {
  font-size: 0.16rem;
-  color: #1E2736;
+  color: #E6E8EB;
  margin-bottom: 0.1rem;
 }
 .dialog-main .label:not(:first-child) {
--- a/clientarea/hgcloud/css/security_log.css
+++ b/clientarea/hgcloud/css/security_log.css
@@ -40,7 +40,7 @@
  background: #EEEEEE;
  border-radius: 3px;
  font-size: 0.13rem;
-  color: #757575;
+  color: #8B949E;
  display: flex;
  align-items: center;
  justify-content: center;
@@ -48,7 +48,7 @@
 .main-card .content-table .tabledata .open-show .open {
  width: 0.59rem;
  height: 0.26rem;
-  background: #E1F0FF;
+  background: rgba(22,93,255,0.1);
  border-radius: 3px;
  font-size: 0.13rem;
  display: flex;
@@ -63,7 +63,7 @@
  cursor: pointer;
 }
 .main-card .create-api-dialog .dialog-main .content-msg {
-  border: 1px solid #E6E7EB;
+  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
@@ -75,7 +75,7 @@
  align-items: center;
  margin-left: 0.3rem;
  margin-top: 0.2rem;
-  color: #757575;
+  color: #8B949E;
 }
 .main-card .create-api-dialog .dialog-main .content-msg .msg-item:last-child {
  margin-bottom: 0.3rem;
@@ -110,7 +110,7 @@
 .main-card .delete-dialog .del-dialog-main {
  font-size: 0.16rem;
  font-weight: 800;
-  color: #1E2736;
+  color: #E6E8EB;
  margin-top: 0.3rem;
  margin-bottom: 0.4rem;
 }
@@ -135,11 +135,11 @@
 }
 .main-card .delete-dialog .del-dialog-footer .btn-no {
  background: #E7E7E7;
-  color: #1E2736;
+  color: #E6E8EB;
  margin-top: 0.16rem;
 }
 .main-card .white-ip-dialog .dialog-main .info-alert {
-  background: #E1F0FF;
+  background: rgba(22,93,255,0.1);
  color: var(--color-primary);
  font-size: 0.15rem;
 }
@@ -160,7 +160,7 @@
  margin-left: 1.04rem;
  margin-top: 0.2rem;
  margin-bottom: 0.3rem;
-  color: #8692B0;
+  color: #8B949E;
 }
 .main-card .white-ip-dialog .dialog-main .alert-text {
  margin-top: 0.2rem;
@@ -228,7 +228,7 @@
 }
 .dialog-main .label {
  font-size: 0.16rem;
-  color: #1E2736;
+  color: #E6E8EB;
  margin-bottom: 0.1rem;
 }
 .dialog-main .label:not(:first-child) {
--- a/clientarea/hgcloud/css/security_ssh.css
+++ b/clientarea/hgcloud/css/security_ssh.css
@@ -45,7 +45,7 @@
  background: #eeeeee;
  border-radius: 3px;
  font-size: 0.13rem;
-  color: #757575;
+  color: #8B949E;
  display: flex;
  align-items: center;
  justify-content: center;
@@ -68,7 +68,7 @@
  cursor: pointer;
 }
 .main-card .create-api-dialog .dialog-main .content-msg {
-  border: 1px solid #e6e7eb;
+  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
@@ -80,7 +80,7 @@
  align-items: center;
  margin-left: 0.3rem;
  margin-top: 0.2rem;
-  color: #757575;
+  color: #8B949E;
 }
 .main-card .create-api-dialog .dialog-main .content-msg .msg-item:last-child {
  margin-bottom: 0.3rem;
@@ -115,7 +115,7 @@
 .main-card .delete-dialog .del-dialog-main {
  font-size: 0.16rem;
  font-weight: 800;
-  color: #1e2736;
+  color: #E6E8EB;
  margin-top: 0.3rem;
  margin-bottom: 0.4rem;
 }
@@ -140,7 +140,7 @@
 }
 .main-card .delete-dialog .del-dialog-footer .btn-no {
  background: #e7e7e7;
-  color: #1e2736;
+  color: #E6E8EB;
  margin-top: 0.16rem;
 }
 .main-card .white-ip-dialog .dialog-main .info-alert {
@@ -165,7 +165,7 @@
  margin-left: 1.04rem;
  margin-top: 0.2rem;
  margin-bottom: 0.3rem;
-  color: #8692b0;
+  color: #8B949E;
 }
 .main-card .white-ip-dialog .dialog-main .alert-text {
  margin-top: 0.2rem;
@@ -234,7 +234,7 @@
 }
 .dialog-main .label {
  font-size: 0.16rem;
-  color: #1e2736;
+  color: #E6E8EB;
  margin-bottom: 0.1rem;
 }
 .dialog-main .label:not(:first-child) {
--- a/clientarea/hgcloud/css/transfer.css
+++ b/clientarea/hgcloud/css/transfer.css
@@ -12,17 +12,17 @@ html {
  height: 100%;
  justify-content: center;
  align-items: center;
-  background-color: #E6E7EB;
+  background-color: rgba(255,255,255,0.06);
 }
 .transfer .con {
  width: 6.9rem;
 }
 .transfer .info {
  padding: 0.4rem 0.5rem;
-  background: #fff;
+  background: #161b22;
  box-sizing: border-box;
  font-size: 0.14rem;
-  color: #1E2736;
+  color: #E6E8EB;
 }
 .transfer .logo {
  background: var(--color-primary);
@@ -42,7 +42,7 @@ html {
 }
 .transfer .jump {
  margin-top: 0.3rem;
-  border-top: 1px solid #E6E7EB;
+  border-top: 1px solid rgba(255,255,255,0.06);
  text-align: right;
 }
 .transfer .jump .btn {
--- a/clientarea/hgcloud/css/voucher.css
+++ b/clientarea/hgcloud/css/voucher.css
@@ -55,7 +55,7 @@
  width: 8px;
  height: 8px;
  box-sizing: border-box;
-  background-color: #fff;
+  background-color: #161b22;
  border-radius: 50%;
  z-index: -1;
 }
@@ -72,7 +72,7 @@
  z-index: -1;
 }
 .voucher-content .price.used {
-  background-color: #8692b0;
+  background-color: #8B949E;
 }
 .voucher-content .price.overdue {
  background-color: #cfd3d6;
@@ -92,7 +92,7 @@
 .voucher-content .r-item {
  line-height: 1;
  font-size: 0.12rem;
-  color: #8692B0;
+  color: #8B949E;
  flex: 1;
  padding: 0.24rem 0.1rem 0.1rem 0.3rem;
  display: flex;
@@ -101,7 +101,7 @@
 }
 .voucher-content .r-item .tit {
  font-size: 0.2rem;
-  color: #1E2736;
+  color: #E6E8EB;
 }
 .voucher-content .r-item .time {
  margin: 0.1rem 0;
@@ -170,7 +170,7 @@
  box-sizing: border-box;
  padding: 0.32rem 0.13rem 0.13rem 0.13rem;
  font-size: 0.12rem;
-  color: #8692B0;
+  color: #8B949E;
  text-align: justify;
  display: none;
  z-index: 10;
--- a/clientarea/hgcloud/css/withdrawal.css
+++ b/clientarea/hgcloud/css/withdrawal.css
@@ -14,7 +14,7 @@
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 0.25rem;
-  color: #171725;
+  color: #E6E8EB;
 }
 .main-card .withdrawal-content {
  border-radius: 0.03rem;
@@ -33,12 +33,12 @@
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 0.22rem;
-  color: #757575;
+  color: #8B949E;
 }
 .main-card .el-table .el-table__body-wrapper .cell {
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 0.22rem;
-  color: #171725;
+  color: #E6E8EB;
 }