style: 项目风格样式调整

2026-04-13 18:26:12 +08:00 · 2026-04-13 18:26:12 +08:00 · 7f1d8f1a86
commit 7f1d8f1a86
parent 6d80d8f61a
46 changed files with 787 additions and 153 deletions
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/favicon_new.ico
+++ b/public/favicon_new.ico
--- a/src/assets/logo_new.png
+++ b/src/assets/logo_new.png
--- a/src/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
@ -73,8 +73,17 @@ export default {
  margin-left: 8px;

  .no-redirect {
-    color: #97a8be;
+    color: #A47D57;
    cursor: text;
  }
+
+  a {
+    color: #7F6040;
+    transition: color .2s ease;
+  }
+
+  a:hover {
+    color: #FF9326;
+  }
 }
 </style>
--- a/src/components/HeaderSearch/index.vue
+++ b/src/components/HeaderSearch/index.vue
@ -157,6 +157,7 @@ export default {
    cursor: pointer;
    font-size: 18px;
    vertical-align: middle;
+    color: #B47A40;
  }

  .header-search-select {
@ -175,7 +176,7 @@ export default {
      padding-left: 0;
      padding-right: 0;
      box-shadow: none !important;
-      border-bottom: 1px solid #d9d9d9;
+      border-bottom: 1px solid rgba(255, 147, 38, 0.35);
      vertical-align: middle;
    }
  }
--- a/src/components/IconsPanel/index.vue
+++ b/src/components/IconsPanel/index.vue
@ -115,7 +115,7 @@ export default {
    float: left;
    line-height: 20px;
    &:hover {
-      color: #409eff;
+      color: #FF9326;
    }
    cursor: pointer;
    .icon-content {
--- a/src/components/ThemePicker/index.vue
+++ b/src/components/ThemePicker/index.vue
@ -1,7 +1,7 @@
 <template>
  <el-color-picker
    v-model="theme"
-    :predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
+    :predefine="['#FF9326', '#FEB219', '#F57C00', '#D9642A', '#304156', '#212121', '#11A983', '#F5222D']"
    class="theme-picker"
    popper-class="theme-picker-dropdown"
  />
@ -9,7 +9,7 @@

 <script>
 const version = require('element-ui/package.json').version // element-ui version from node_modules
-const ORIGINAL_THEME = '#409EFF' // default color
+const ORIGINAL_THEME = '#FF9326' // default color

 export default {
  data() {
--- a/src/components/data/AccountInput/index.vue
+++ b/src/components/data/AccountInput/index.vue
@ -2,8 +2,8 @@
  <div class="user-input">
    <el-input v-model.trim="inputValue" clearable :disabled="!sysOriginVal" :placeholder="placeholder" class="input-with-select" @input="handleInput">
      <el-select slot="prepend" v-model="selectType" placeholder="类型" :disabled="!sysOriginVal" @change="selectTypeChange">
-        <el-option label="长ID" value="LONG" />
        <el-option label="短ID" value="SHORT" />
+        <el-option label="长ID" value="LONG" />
      </el-select>

      <el-select v-if="showSysOriginTypeSelect && selectType !== 'LONG' && permissionsSysOriginPlatforms.length > 0" slot="append" v-model="sysOriginType" placeholder="平台" @change="sysOriginTypeChange">
--- a/src/components/data/SearchRoomInput/index.vue
+++ b/src/components/data/SearchRoomInput/index.vue
@ -24,8 +24,8 @@
          placeholder="类型"
          @change="clickSearch"
        >
-          <el-option label="长ID" value="LONG_ID" />
          <el-option label="短ID" value="SHORT_ID" />
+          <el-option label="长ID" value="LONG_ID" />
        </el-select>
      </el-input>
    </el-tooltip>
--- a/src/components/videoPlayer/index.vue
+++ b/src/components/videoPlayer/index.vue
@ -238,7 +238,7 @@ export default {
 /* 以下强行修改了el-slider样式 */
 .progressBar /deep/ .el-slider__bar {
  height: 3px;
-  background-color: #409EFF;
+  background-color: #FF9326;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  position: absolute;
@ -326,6 +326,6 @@ export default {

 .rateOptions span:hover {
  background-color: #cec9c95a;
-  color: #409EFF;
+  color: #FF9326;
 }
 </style>
--- a/src/constant/origin.js
+++ b/src/constant/origin.js
@ -1,23 +1,23 @@
 // 注册来源
 const registerOrigins = [
  { value: "MOBILE", name: "手机号码" },
-  { value: "FACEBOOK", name: "Facebook" },
-  { value: "GOOGLE", name: "Google" },
  { value: "APPLE", name: "Apple" },
+  { value: "GOOGLE", name: "Google" },
+  { value: "FACEBOOK", name: "Facebook" },
  { value: "SNAPCHAT", name: "Snapchat" }
 ];

 // 来源平台
 const originPlatforms = [
-  { value: "iOS", name: "iOS" },
  { value: "Android", name: "Android" },
+  { value: "iOS", name: "iOS" },
  { value: "H5", name: "H5" }
 ];

 // app平台
 const appPlatforms = [
-  { value: "iOS", name: "iOS" },
-  { value: "Android", name: "Android" }
+  { value: "Android", name: "Android" },
+  { value: "iOS", name: "iOS" }
 ];

 // 设备平台
--- a/src/constant/type.js
+++ b/src/constant/type.js
@ -643,11 +643,6 @@ const productTypes = [

 // 平台
 const platformOrigins = [
-  {
-    value: "iOS",
-    name: "iOS",
-    channels: [{ name: "AppStore", value: "AppStore" }]
-  },
  {
    value: "Android",
    name: "Android",
@ -655,6 +650,11 @@ const platformOrigins = [
      { name: "Google", value: "Google" },
      { name: "Huawei", value: "Huawei" }
    ]
+  },
+  {
+    value: "iOS",
+    name: "iOS",
+    channels: [{ name: "AppStore", value: "AppStore" }]
  }
 ];

--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@ -156,8 +156,10 @@ export default {
  height: 50px;
  overflow: hidden;
  position: relative;
-  background: #fff;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  background: linear-gradient(90deg, rgba(255, 250, 243, 0.96), rgba(255, 244, 228, 0.94));
+  border-bottom: 1px solid rgba(255, 147, 38, 0.12);
+  box-shadow: 0 10px 30px rgba(111, 67, 25, 0.08);
+  backdrop-filter: blur(12px);

  .hamburger-container {
    line-height: 46px;
@ -168,7 +170,7 @@ export default {
    -webkit-tap-highlight-color:transparent;

    &:hover {
-      background: rgba(0, 0, 0, .025)
+      background: rgba(255, 147, 38, 0.08)
    }
  }

@ -189,7 +191,7 @@ export default {
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
-      color: #5a5e66;
+      color: #7A5C3F;
      vertical-align: text-bottom;

      &.hover-effect {
@ -197,7 +199,8 @@ export default {
        transition: background .3s;

        &:hover {
-          background: rgba(0, 0, 0, .025)
+          background: rgba(255, 147, 38, 0.08);
+          color: #FF9326;
        }
      }
    }
@ -214,6 +217,7 @@ export default {
          border-radius: 100%;
          color: #FFFFFF;
          font-weight: bold;
+          box-shadow: 0 10px 24px rgba(255, 147, 38, 0.24);
        }

        .el-icon-caret-bottom {
@ -222,6 +226,7 @@ export default {
          right: -20px;
          top: 20px;
          font-size: 12px;
+          color: #A77441;
        }
      }
    }
--- a/src/layout/components/NavbarLight.vue
+++ b/src/layout/components/NavbarLight.vue
@ -0,0 +1,173 @@
+<template>
+  <div class="navbar">
+    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+
+    <breadcrumb class="breadcrumb-container" />
+
+    <div class="right-menu flex-r">
+      <template v-if="device !== 'mobile'">
+        <search id="header-search" class="right-menu-item" />
+
+        <screenfull id="screenfull" class="right-menu-item hover-effect" />
+
+        <el-tooltip content="Global Size" effect="dark" placement="bottom">
+          <size-select id="size-select" class="right-menu-item hover-effect" />
+        </el-tooltip>
+      </template>
+
+      <el-dropdown class="avatar-container" trigger="click">
+        <div class="avatar-wrapper">
+          <div class="user-avatar flex-c" :style="userAvatarColor">{{ firstNameStr }}</div>
+          <i class="el-icon-caret-bottom" />
+        </div>
+        <el-dropdown-menu slot="dropdown" class="user-dropdown">
+          <el-dropdown-item @click.native="resetPwd">修改密码</el-dropdown-item>
+          <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+
+    <rest-password v-if="resetPasswordVisible" @success="resetPasswordVisible=false" @close="resetPasswordVisible=false" />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
+import RestPassword from '@/components/data/RestPassword'
+import Screenfull from '@/components/Screenfull'
+import SizeSelect from '@/components/SizeSelect'
+import Search from '@/components/HeaderSearch'
+import { extractColorByText } from '@/utils'
+
+export default {
+  name: 'NavbarLight',
+  components: {
+    Breadcrumb,
+    Hamburger,
+    RestPassword,
+    Screenfull,
+    SizeSelect,
+    Search
+  },
+  data() {
+    return {
+      resetPasswordVisible: false
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar',
+      'device',
+      'dashboard',
+      'name'
+    ]),
+    userAvatarColor() {
+      return 'background-color:' + extractColorByText(this.name) + ';'
+    },
+    firstNameStr() {
+      return this.name ? this.name.trim().charAt(0) : '?'
+    }
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('app/toggleSideBar')
+    },
+    resetPwd() {
+      this.resetPasswordVisible = true
+    },
+    async logout() {
+      this.$store.dispatch('user/resetToken').then(() => {
+        location.reload()
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.navbar {
+  height: 50px;
+  overflow: hidden;
+  position: relative;
+  background: linear-gradient(90deg, rgba(255, 250, 243, 0.96), rgba(255, 244, 228, 0.94));
+  border-bottom: 1px solid rgba(255, 147, 38, 0.12);
+  box-shadow: 0 10px 30px rgba(111, 67, 25, 0.08);
+  backdrop-filter: blur(12px);
+
+  .hamburger-container {
+    line-height: 46px;
+    height: 100%;
+    float: left;
+    cursor: pointer;
+    transition: background .3s;
+    -webkit-tap-highlight-color: transparent;
+
+    &:hover {
+      background: rgba(255, 147, 38, 0.08);
+    }
+  }
+
+  .breadcrumb-container {
+    float: left;
+  }
+
+  .right-menu {
+    float: right;
+    height: 100%;
+    line-height: 50px;
+
+    &:focus {
+      outline: none;
+    }
+
+    .right-menu-item {
+      display: inline-block;
+      padding: 0 8px;
+      height: 100%;
+      font-size: 18px;
+      color: #7A5C3F;
+      vertical-align: text-bottom;
+
+      &.hover-effect {
+        cursor: pointer;
+        transition: background .3s;
+
+        &:hover {
+          background: rgba(255, 147, 38, 0.08);
+          color: #FF9326;
+        }
+      }
+    }
+
+    .avatar-container {
+      margin-right: 30px;
+
+      .avatar-wrapper {
+        position: relative;
+
+        .user-avatar {
+          cursor: pointer;
+          width: 35px;
+          height: 35px;
+          border-radius: 100%;
+          color: #FFFFFF;
+          font-weight: bold;
+          box-shadow: 0 10px 24px rgba(255, 147, 38, 0.24);
+        }
+
+        .el-icon-caret-bottom {
+          cursor: pointer;
+          position: absolute;
+          right: -20px;
+          top: 20px;
+          font-size: 12px;
+          color: #A77441;
+        }
+      }
+    }
+  }
+}
+</style>
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@ -1,22 +1,27 @@
 <template>
-  <div class="sidebar-logo-container" :class="{'collapse':collapse}">
+  <div class="sidebar-logo-container" :class="{ collapse: collapse }">
    <transition name="sidebarLogoFade">
-      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo">
-        <h1 v-else class="sidebar-title">{{ title }} </h1>
+      <router-link
+        v-if="collapse"
+        key="collapse"
+        class="sidebar-logo-link"
+        to="/"
+      >
+        <img v-if="logo" :src="logo" class="sidebar-logo" />
+        <h1 v-else class="sidebar-title">{{ title }}</h1>
      </router-link>
      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo">
-        <h1 class="sidebar-title">{{ title }} </h1>
+        <img v-if="logo" :src="logo" class="sidebar-logo" />
+        <h1 class="sidebar-title">{{ title }}</h1>
      </router-link>
    </transition>
  </div>
 </template>

 <script>
-import logo from '@/assets/logo_new.png'
+import logo from "@/assets/logo_new.png";
 export default {
-  name: 'SidebarLogo',
+  name: "SidebarLogo",
  props: {
    collapse: {
      type: Boolean,
@ -25,11 +30,11 @@ export default {
  },
  data() {
    return {
-      title: ' Transsion Future',
+      title: "Aslan",
      logo: logo
-    }
+    };
  }
-}
+};
 </script>

 <style lang="scss" scoped>
@ -47,7 +52,8 @@ export default {
  width: 100%;
  height: 50px;
  line-height: 50px;
-  background: #2b2f3a;
+  background: linear-gradient(135deg, #342114 0%, #4a2c16 100%);
+  border-bottom: 1px solid rgba(255, 217, 167, 0.1);
  text-align: center;
  overflow: hidden;

@ -65,7 +71,8 @@ export default {
    & .sidebar-title {
      display: inline-block;
      margin: 0;
-      color: #fff;
+      margin-left: 4px;
+      color: #fff0dc;
      font-weight: 600;
      line-height: 50px;
      font-size: 14px;
--- a/src/layout/components/index.js
+++ b/src/layout/components/index.js
@ -1,3 +1,3 @@
-export { default as Navbar } from './Navbar'
+export { default as Navbar } from './NavbarLight'
 export { default as Sidebar } from './Sidebar'
 export { default as AppMain } from './AppMain'
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@ -45,7 +45,7 @@

 .el-dropdown-link {
  cursor: pointer;
-  color: #409EFF;
+  color: #FF9326;
 }
 .el-icon-arrow-down {
  font-size: 12px;
@ -63,8 +63,8 @@

 // 设置表头颜色
 .el-table thead tr th{
-  background:#fafafa !important;
-  color:#515a6e;
+  background:#FFF7ED !important;
+  color:#6E5138;
 }

 .el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell {
@ -168,6 +168,9 @@
  bottom: 0px;
  left: 0px;
  right: 0px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
  background: #FFFFFF;
  padding: 20px 50px;
  z-index: 9;
@ -185,3 +188,191 @@
  width: 90px !important;
 }

+.el-button {
+  border-radius: 12px;
+  font-weight: 500;
+  transition: all .2s ease;
+}
+
+.el-button + .el-button {
+  margin-left: 10px;
+}
+
+.el-button--primary {
+  border-color: #FF9326;
+  background: linear-gradient(135deg, #FF9326 0%, #FEB219 100%);
+  box-shadow: 0 10px 20px rgba(255, 147, 38, 0.22);
+}
+
+.el-button--primary:hover,
+.el-button--primary:focus {
+  border-color: #FF9F3C;
+  background: linear-gradient(135deg, #FFA94D 0%, #FFC54A 100%);
+  box-shadow: 0 12px 24px rgba(255, 147, 38, 0.28);
+}
+
+.el-button--primary:active {
+  border-color: #F08414;
+  background: linear-gradient(135deg, #F08414 0%, #F5A900 100%);
+}
+
+.el-button--default {
+  border-color: rgba(255, 147, 38, 0.22);
+  color: #8C5B2A;
+  background-color: #FFF9F2;
+}
+
+.el-button--default:hover,
+.el-button--default:focus {
+  border-color: #FFBE71;
+  color: #FF9326;
+  background-color: #FFF1E3;
+}
+
+.el-button--text {
+  color: #FF9326;
+}
+
+.el-button--text:hover,
+.el-button--text:focus {
+  color: #E47E17;
+}
+
+.el-input__inner,
+.el-textarea__inner,
+.el-input-number,
+.el-input-number__decrease,
+.el-input-number__increase {
+  border-radius: 12px;
+}
+
+.el-input__inner:focus,
+.el-textarea__inner:focus,
+.el-select .el-input.is-focus .el-input__inner,
+.el-date-editor.el-input__inner:focus,
+.el-date-editor .el-input__inner:focus {
+  border-color: #FF9326;
+  box-shadow: 0 0 0 3px rgba(255, 147, 38, 0.12);
+}
+
+.el-select-dropdown,
+.el-picker-panel,
+.el-dropdown-menu,
+.el-popover,
+.el-cascader__dropdown,
+.el-message-box {
+  border-radius: 16px;
+  border-color: rgba(255, 147, 38, 0.15);
+  box-shadow: 0 18px 40px rgba(89, 55, 18, 0.16);
+}
+
+.el-card,
+.el-table,
+.el-dialog,
+.el-drawer,
+.el-collapse-item__wrap,
+.el-collapse-item__header {
+  border-radius: 18px;
+}
+
+.el-table,
+.el-card {
+  border: 1px solid rgba(255, 147, 38, 0.12);
+}
+
+.el-table::before {
+  height: 0;
+}
+
+.el-dialog,
+.el-message-box {
+  overflow: hidden;
+  border: 1px solid rgba(255, 147, 38, 0.15);
+  box-shadow: 0 24px 50px rgba(89, 55, 18, 0.18);
+}
+
+.el-dialog__header,
+.el-message-box__header {
+  background: linear-gradient(180deg, #FFF8EF 0%, #FFFDFB 100%);
+  border-bottom: 1px solid rgba(255, 147, 38, 0.08);
+}
+
+.el-dialog__body,
+.el-dialog__footer {
+  background: #FFFDFB;
+}
+
+.dialog-footer,
+.drawer-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.dialog-footer .el-button + .el-button,
+.drawer-footer .el-button + .el-button {
+  margin-left: 0;
+}
+
+.dialog-footer .el-button--primary,
+.drawer-footer .el-button--primary {
+  order: -1;
+}
+
+.el-tabs__item {
+  color: #8C6D50;
+}
+
+.el-tabs__item:hover,
+.el-tabs__item.is-active {
+  color: #FF9326;
+}
+
+.el-tabs__active-bar {
+  height: 3px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, #FF9326 0%, #FEB219 100%);
+}
+
+.el-tabs__nav-wrap::after {
+  background-color: rgba(255, 147, 38, 0.12);
+}
+
+.el-radio__input.is-checked .el-radio__inner,
+.el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner,
+.el-switch.is-checked .el-switch__core {
+  border-color: #FF9326;
+  background-color: #FF9326;
+}
+
+.el-radio__input.is-checked + .el-radio__label,
+.el-checkbox__input.is-checked + .el-checkbox__label {
+  color: #FF9326;
+}
+
+.el-checkbox__inner:hover,
+.el-radio__inner:hover {
+  border-color: #FF9326;
+}
+
+.el-pagination.is-background .el-pager li:not(.disabled).active,
+.el-pagination.is-background .btn-next,
+.el-pagination.is-background .btn-prev {
+  border-radius: 10px;
+}
+
+.el-pagination.is-background .el-pager li:not(.disabled).active {
+  background-color: #FF9326;
+}
+
+.el-tag {
+  border-radius: 999px;
+}
+
+.el-backtop {
+  background: linear-gradient(135deg, #FF9326 0%, #FEB219 100%);
+  color: #FFFFFF;
+  box-shadow: 0 12px 28px rgba(255, 147, 38, 0.28);
+}
+
--- a/src/styles/element-variables.scss
+++ b/src/styles/element-variables.scss
@ -4,20 +4,20 @@
 **/

 /* theme color */
-$--color-primary: #1890ff;
-$--color-success: #13ce66;
-$--color-warning: #FFBA00;
-$--color-danger: #ff4949;
+$--color-primary: #FF9326;
+$--color-success: #28B779;
+$--color-warning: #FEB219;
+$--color-danger: #F56C6C;
 // $--color-info: #1E1E1E;

 $--button-font-weight: 400;

 // $--color-text-regular: #1f2d3d;

-$--border-color-light: #dfe4ed;
-$--border-color-lighter: #e6ebf5;
+$--border-color-light: #EEDCC8;
+$--border-color-lighter: #F7EBDD;

-$--table-border:1px solid#dfe6ec;
+$--table-border: 1px solid #EEDCC8;
 // --------------
 // Font Color
 // $--color-text-primary: #E5EAF3;
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@ -7,13 +7,25 @@
@import './mark.scss';
@import './custom-dark.scss';

+:root {
+  --brand-primary: #ff9326;
+  --brand-primary-soft: #fff1df;
+  --brand-primary-pale: #fff8ef;
+  --brand-primary-border: rgba(255, 147, 38, 0.18);
+  --brand-primary-shadow: rgba(148, 84, 19, 0.16);
+  --brand-warning: #feb219;
+  --brand-text-main: #5d4632;
+  --brand-text-subtle: #8c6d50;
+}
+
 body {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
-  font-size: 14px ;
+  font-size: 14px;
+  color: var(--brand-text-main);
 }

 label {
@ -29,6 +41,17 @@ html {
  height: 100%;
 }

+html:not(.dark-theme) body {
+  background:
+    radial-gradient(circle at top right, rgba(254, 178, 25, 0.2), transparent 24%),
+    radial-gradient(circle at left top, rgba(255, 147, 38, 0.12), transparent 18%),
+    linear-gradient(180deg, #fffaf4 0%, #f8efe5 100%);
+}
+
+html:not(.dark-theme) #app {
+  background: transparent;
+}
+
 *,
 *:before,
 *:after {
@ -68,14 +91,31 @@ div:focus {
  padding: 20px;
 }

+html:not(.dark-theme) {
+  .app-container {
+    margin: 18px;
+    padding: 24px;
+    background: rgba(255, 252, 247, 0.92);
+    border: 1px solid var(--brand-primary-border);
+    border-radius: 24px;
+    box-shadow: 0 20px 45px var(--brand-primary-shadow);
+    backdrop-filter: blur(12px);
+  }
+}
+
 //条件过滤
 .filter-container {
  padding-bottom: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 12px;
+  align-items: center;

  .filter-item {
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
    vertical-align: middle;
-    margin-bottom: 10px;
+    margin-bottom: 0;
  }
 }

@ -109,8 +149,8 @@ div:focus {
 }

 .font-blue {
-  color: #409EFF;
- }
+  color: var(--brand-primary);
+}


 /** 
@ -188,7 +228,7 @@ flex 布局
  line-height: 1.6;
  border-left: 5px solid $menuActiveText;
  border-radius: 0 2px 2px 0;
-  background-color: #FAFAFA;
+  background-color: #FFFBF7;
 }
 .blockquote-mini {
  padding: 10px !important;
@ -216,9 +256,10 @@ flex 布局
  margin: 3px 0px;
  display: block;
  padding: 5px 10px;
-  background-color: #f8f8f8;
-  color: #999;
-  border-radius: 2px;
+  background-color: #FFFBF7;
+  color: #8C6D50;
+  border: 1px solid rgba(255, 147, 38, 0.12);
+  border-radius: 14px;
  transition: all .3s;
  -webkit-transition: all .3s;
 .block-card-title {
@ -233,7 +274,7 @@ flex 布局
 }
 }
 .block-card-selected {
-  background-color: #e3f2f1 !important;
+  background-color: var(--brand-primary-soft) !important;
 }


@ -259,21 +300,30 @@ flex 布局
    padding: 16px;
    height: auto;
    overflow: visible;
-    background-color: #fafafa;
-    border-radius: 5px;
+    background-color: #fffaf4;
+    border: 1px solid rgba(255, 147, 38, 0.12);
+    border-radius: 16px;
  }
 }

 .region-tag-color {
  color: #333;
-  background-color: #eaeff2;
+  background-color: #fff1df;
 }
 .region-tag-color:hover {
-  background-color: #dfe9ee;
+  background-color: #ffe4bf;
 }

 .attached {
  padding: 5px 20px;
  border-radius: 10px;
  background-color: rgba(226, 215, 215, 0.3);
-}
+}
+
+@media (max-width: 768px) {
+  html:not(.dark-theme) .app-container {
+    margin: 12px;
+    padding: 18px;
+    border-radius: 18px;
+  }
+}
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@ -19,7 +19,8 @@
    left: 0;
    z-index: 1001;
    overflow: hidden;
-    box-shadow: 2px 0 6px rgba(0,21,41,.15);
+    box-shadow: 10px 0 30px rgba(56, 33, 14, 0.28);
+    border-right: 1px solid rgba(255, 219, 185, 0.06);
    // reset element-ui css
    .horizontal-collapse-transition {
      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
@ -61,6 +62,21 @@
      border: none;
      height: 100%;
      width: 100% !important;
+      background: transparent;
+    }
+
+    .el-menu-item,
+    .el-submenu__title {
+      position: relative;
+      margin: 6px 12px;
+      width: calc(100% - 24px) !important;
+      border-radius: 14px;
+      transition: all .2s ease;
+    }
+
+    .el-menu-item:hover,
+    .el-submenu__title:hover {
+      transform: translateX(2px);
    }

    // menu hover
@ -84,6 +100,23 @@
        background-color: $subMenuHover !important;
      }
    }
+
+    .el-menu-item.is-active,
+    .el-submenu.is-active > .el-submenu__title {
+      background: linear-gradient(135deg, rgba(255, 147, 38, 0.32), rgba(254, 178, 25, 0.18)) !important;
+      box-shadow: inset 0 0 0 1px rgba(255, 214, 160, 0.12), 0 10px 18px rgba(0, 0, 0, 0.16);
+    }
+
+    .el-menu-item.is-active::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 10px;
+      bottom: 10px;
+      width: 4px;
+      border-radius: 999px;
+      background: linear-gradient(180deg, #FF9326 0%, #FEB219 100%);
+    }
  }

  .hideSidebar {
@ -98,12 +131,19 @@
    .submenu-title-noDropdown {
      padding: 0 !important;
      position: relative;
+      display: flex !important;
+      align-items: center;
+      justify-content: center;

      .el-tooltip {
+        width: 100%;
        padding: 0 !important;
+        display: flex !important;
+        align-items: center;
+        justify-content: center;

        .svg-icon {
-          margin-left: 20px;
+          margin: 0;
        }
      }
    }
@ -113,9 +153,12 @@

      &>.el-submenu__title {
        padding: 0 !important;
+        display: flex !important;
+        align-items: center;
+        justify-content: center;

        .svg-icon {
-          margin-left: 20px;
+          margin: 0;
        }

        .el-submenu__icon-arrow {
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@ -1,13 +1,13 @@
 // sidebar
-$menuText:rgb(189, 189, 192);
-$menuActiveText:#409EFF;
-$subMenuActiveText:rgb(189, 189, 192); //https://github.com/ElemeFE/element/issues/12951
+$menuText: #E8D3BE;
+$menuActiveText: #FFF4E8;
+$subMenuActiveText: #FFD9A7; // https://github.com/ElemeFE/element/issues/12951

-$menuBg:#23232b;
-$menuHover:#282a34;
+$menuBg: #24180F;
+$menuHover: #372316;

-$subMenuBg:rgb(25, 26, 32);
-$subMenuHover:#363945;
+$subMenuBg: #1B120C;
+$subMenuHover: #422A19;

 $sideBarWidth: 210px;

--- a/src/utils/get-page-title.js
+++ b/src/utils/get-page-title.js
@ -1,6 +1,6 @@
 import defaultSettings from "@/settings";

-const title = defaultSettings.title || "atyou";
+const title = defaultSettings.title || "Aslan";

 export default function getPageTitle(pageTitle) {
  if (pageTitle) {
--- a/src/utils/theme.js
+++ b/src/utils/theme.js
@ -3,11 +3,11 @@ import Cookies from 'js-cookie'
 const adminThemeKey = 'admin-theme'

 export function getTheme() {
-  return Cookies.get(adminThemeKey)
+  return 'normal'
 }

 export function setTheme(theme) {
-  return Cookies.set(adminThemeKey, theme)
+  return Cookies.set(adminThemeKey, 'normal')
 }

 export function removeTheme() {
@ -19,20 +19,8 @@ export function removeTheme() {
 */
 export function checkSwitchTheme() {
  try {
-    const theme = getTheme()
-    if (theme === 'normal') {
-      document.documentElement.setAttribute('class', '')
-      return
-    }
-
-    if (theme === 'dark') {
-      document.documentElement.setAttribute('class', 'dark-theme')
-      return
-    }
-
-    const timeNow = new Date()
-    const hours = timeNow.getHours()
-    document.documentElement.setAttribute('class', (hours > 18 && hours <= 24) || (hours >= 0 && hours <= 6) ? 'dark-theme' : '')
+    setTheme('normal')
+    document.documentElement.setAttribute('class', '')
  } catch (er) {
    console.log('checkSwitchTheme', er)
  }
--- a/src/views/activity/template-cnf/template-editor/page-editor.vue
+++ b/src/views/activity/template-cnf/template-editor/page-editor.vue
@ -753,6 +753,6 @@ export default {
  }
 }
 .selected-border {
-  border: 2px dashed #409EFF !important;
+  border: 2px dashed #FF9326 !important;
 }
 </style>
--- a/src/views/cnf/gift/setting/edit.vue
+++ b/src/views/cnf/gift/setting/edit.vue
@ -51,7 +51,7 @@
              <el-form-item prop="regionList" label="区域">
                <el-button
                  type="text"
-                  style="margin-left: 10px; color: #409EFF;"
+                  style="margin-left: 10px; color: #FF9326;"
                  @click="handleSelectAllRegions"
                >
                  {{ isAllRegionsSelected ? "取消全选" : "全选" }}
--- a/src/views/cnf/lottery/index.vue
+++ b/src/views/cnf/lottery/index.vue
@ -147,11 +147,11 @@
                    </el-col>
                    <el-col v-if="!item.unlimited" :span="10" style="text-align: center;">
                      库存: {{ item.inStock }}
-                      <i class="el-icon-edit cursor-pointer" style="color:#1890ff;" @click="clickInStockEdit(item)" />
+                      <i class="el-icon-edit cursor-pointer" style="color:#FF9326;" @click="clickInStockEdit(item)" />
                    </el-col>
                    <el-col v-if="!item.unlimited" :span="10" style="text-align: center;">
                      消费: {{ item.consumeInStock }}
-                      <i class="el-icon-refresh-left cursor-pointer" style="color:#1890ff;" @click="clickRestConsumeInStock(item)" />
+                      <i class="el-icon-refresh-left cursor-pointer" style="color:#FF9326;" @click="clickRestConsumeInStock(item)" />
                    </el-col>
                    <div v-if="item.inStock < item.consumeInStock" class="font-danger">
                      ”库存 &lt; 消费“ 点击保存系统会清理消费数重新计算
--- a/src/views/cnf/lottery/select-prize.vue
+++ b/src/views/cnf/lottery/select-prize.vue
@ -389,7 +389,7 @@ export default {
    }
    .save {
      font-size: 30px;
-      color: #409EFF;
+      color: #FF9326;
      cursor: pointer;
    }
  }
--- a/src/views/cnf/pay/application/app-manager/index.vue
+++ b/src/views/cnf/pay/application/app-manager/index.vue
@ -146,7 +146,7 @@ export default {
        .app-create {
          font-size: 26px;
          font-weight: bold;
-          color: #409EFF;
+          color: #FF9326;
        }
      }
    }
--- a/src/views/dynamic/user-dynamic/index.vue
+++ b/src/views/dynamic/user-dynamic/index.vue
@ -79,7 +79,7 @@
          <el-card :body-style="{ padding: '15px' }">
            <div style="padding-bottom: 15px;">
              <span
-                style="color:#1890ff;font-weight: 600;line-height: 25px;"
+                style="color:#FF9326;font-weight: 600;line-height: 25px;"
              >动态内容:
              </span>
              <div
--- a/src/views/game/fruit/task-config/resource-edit.vue
+++ b/src/views/game/fruit/task-config/resource-edit.vue
@ -957,7 +957,7 @@ export default {
  }
  .save {
    font-size: 30px;
-    color: #409EFF;
+    color: #FF9326;
    cursor: pointer;
  }
 }
--- a/src/views/game/lottery-config/form-edit.vue
+++ b/src/views/game/lottery-config/form-edit.vue
@ -990,7 +990,7 @@ export default {
    }
    .save {
      font-size: 30px;
-      color: #409EFF;
+      color: #FF9326;
      cursor: pointer;
    }
  }
--- a/src/views/game/lucky-box/standard-config/probability.vue
+++ b/src/views/game/lucky-box/standard-config/probability.vue
@ -490,7 +490,7 @@ export default {
      }
      .save {
        font-size: 30px;
-        color: #409EFF;
+        color: #FF9326;
        cursor: pointer;
      }
    }
--- a/src/views/game/lucky-gift/probability-config/index.vue
+++ b/src/views/game/lucky-gift/probability-config/index.vue
@ -378,7 +378,7 @@ export default {
      }
      .save {
        font-size: 30px;
-        color: #409EFF;
+        color: #FF9326;
        cursor: pointer;
      }
    }
--- a/src/views/props/props-source-group/form-edit.vue
+++ b/src/views/props/props-source-group/form-edit.vue
@ -1589,7 +1589,7 @@ export default {
  }
  .save {
    font-size: 30px;
-    color: #409eff;
+    color: #FF9326;
    cursor: pointer;
  }
 }
--- a/src/views/team/diamond-policy/props-form-edit.vue
+++ b/src/views/team/diamond-policy/props-form-edit.vue
@ -914,7 +914,7 @@ export default {
  }
  .save {
    font-size: 30px;
-    color: #409EFF;
+    color: #FF9326;
    cursor: pointer;
  }
 }
--- a/src/views/team/policy/props-form-edit.vue
+++ b/src/views/team/policy/props-form-edit.vue
@ -914,7 +914,7 @@ export default {
  }
  .save {
    font-size: 30px;
-    color: #409EFF;
+    color: #FF9326;
    cursor: pointer;
  }
 }
--- a/src/views/team/team-list/team-notice-list-drawer.vue
+++ b/src/views/team/team-list/team-notice-list-drawer.vue
@ -14,8 +14,8 @@
        <el-row v-for="(item, index) in list" :key="index">
          <el-card style="margin: 20px;">
            <div style="padding: 0px; word-wrap: break-word;">
-              <div><span style="font-weight: 600;color:#1890ff">标题: </span>{{ item.title }}</div>
-              <div style="margin-top: 10px;"><span style="font-weight: 600;color:#1890ff">内容: </span>{{ item.content }}
+              <div><span style="font-weight: 600;color:#FF9326">标题: </span>{{ item.title }}</div>
+              <div style="margin-top: 10px;"><span style="font-weight: 600;color:#FF9326">内容: </span>{{ item.content }}
                <el-image
                  v-if="item.cover"
                  class="image"
--- a/src/views/user/bank-balance/table/form-edit.vue
+++ b/src/views/user/bank-balance/table/form-edit.vue
@ -149,7 +149,7 @@ export default {
    }
    .save {
      font-size: 30px;
-      color: #409EFF;
+      color: #FF9326;
      cursor: pointer;
    }
  }
--- a/src/views/user/freight/form-edit.vue
+++ b/src/views/user/freight/form-edit.vue
@ -213,7 +213,7 @@ export default {
    }
    .save {
      font-size: 30px;
-      color: #409EFF;
+      color: #FF9326;
      cursor: pointer;
    }
  }
--- a/src/views/user/freight/index.vue
+++ b/src/views/user/freight/index.vue
@ -5,7 +5,7 @@
        v-model="listQuery.sysOrigin"
        placeholder="系统"
        style="width: 120px"
-        class="filter-item"
+        class="filter-item filter-item--system"
        @change="handleSearch"
      >
        <el-option
@ -25,7 +25,7 @@
        v-model="listQuery.h5Display"
        placeholder="显示状态"
        style="width: 120px"
-        class="filter-item"
+        class="filter-item filter-item--display"
        clearable
        @change="handleSearch"
      >
@ -36,7 +36,7 @@
        v-model="listQuery.dealer"
        placeholder="是否经销商"
        style="width: 120px"
-        class="filter-item"
+        class="filter-item filter-item--dealer"
        clearable
        @change="handleSearch"
      >
@ -48,7 +48,7 @@
        v-model="listQuery.close"
        placeholder="状态"
        style="width: 120px"
-        class="filter-item"
+        class="filter-item filter-item--status"
        clearable
        @change="handleSearch"
      >
@ -62,7 +62,7 @@
        style="width: 200px;"
        class="filter-item"
      /> -->
-      <div class="filter-item">
+      <div class="filter-item filter-item--user">
        <account-input
          v-model="listQuery.userId"
          :sys-origin="listQuery.sysOrigin"
@ -70,7 +70,7 @@
        />
      </div>
      <el-button
-        class="filter-item"
+        class="filter-item filter-item--search"
        type="primary"
        icon="el-icon-search"
        :disabled="searchDisabled"
@ -79,7 +79,7 @@
        搜索
      </el-button>
      <el-button
-        class="filter-item"
+        class="filter-item filter-item--create"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
@ -646,3 +646,33 @@ export default {
  }
 };
 </script>
+
+<style scoped lang="scss">
+.filter-item--system {
+  order: 10;
+}
+
+.filter-item--user {
+  order: 20;
+}
+
+.filter-item--status {
+  order: 30;
+}
+
+.filter-item--display {
+  order: 40;
+}
+
+.filter-item--dealer {
+  order: 50;
+}
+
+.filter-item--search {
+  order: 60;
+}
+
+.filter-item--create {
+  order: 70;
+}
+</style>
--- a/src/views/user/salary-diamond-balance/table/form-edit.vue
+++ b/src/views/user/salary-diamond-balance/table/form-edit.vue
@ -153,7 +153,7 @@ export default {
    }
    .save {
      font-size: 30px;
-      color: #409EFF;
+      color: #FF9326;
      cursor: pointer;
    }
  }
--- a/src/views/user/special-id-role/special-setting/form-edit.vue
+++ b/src/views/user/special-id-role/special-setting/form-edit.vue
@ -184,7 +184,7 @@ export default {
    }
    .save {
      font-size: 30px;
-      color: #409EFF;
+      color: #FF9326;
      cursor: pointer;
    }
  }
--- a/src/views/user/special-id/special-setting/form-edit.vue
+++ b/src/views/user/special-id/special-setting/form-edit.vue
@ -184,7 +184,7 @@ export default {
    }
    .save {
      font-size: 30px;
-      color: #409EFF;
+      color: #FF9326;
      cursor: pointer;
    }
  }
--- a/src/views/user/user-table-role/index.vue
+++ b/src/views/user/user-table-role/index.vue
@ -4,7 +4,7 @@
      <el-select
        v-model="listQuery.del"
        style="width: 120px"
-        class="filter-item"
+        class="filter-item filter-item--status"
        @change="handleSearch"
      >
        <el-option label="未注销" value="0" />
@ -14,7 +14,7 @@
        v-model="listQuery.sysOrigins"
        placeholder="系统"
        style="width: 200px"
-        class="filter-item"
+        class="filter-item filter-item--system"
        multiple
        collapse-tags
      >
@ -36,7 +36,7 @@
        placeholder="注册来源"
        clearable
        style="width: 120px"
-        class="filter-item"
+        class="filter-item filter-item--register-origin"
        @change="handleSearch"
      >
        <el-option
@ -52,7 +52,7 @@
        placeholder="来源平台"
        clearable
        style="width: 120px"
-        class="filter-item"
+        class="filter-item filter-item--origin-platform"
        @change="handleSearch"
      >
        <el-option
@ -69,7 +69,7 @@
        placeholder="性别"
        clearable
        style="width: 120px"
-        class="filter-item"
+        class="filter-item filter-item--gender"
        @change="handleUserSexChange"
      >
        <el-option
@ -86,7 +86,7 @@
        :fetch-suggestions="querySearch"
        placeholder="国家"
        style="width: 200px"
-        class="filter-item"
+        class="filter-item filter-item--country"
        clearable
        @clear="handleDelCountryCodeClick"
        @select="handleCountryCodeClick"
@ -108,7 +108,7 @@
        placeholder="账号类型"
        clearable
        style="width: 120px"
-        class="filter-item"
+        class="filter-item filter-item--user-type"
        @change="handleSearch"
      >
        <el-option
@ -118,7 +118,7 @@
          :value="item.value"
        />
      </el-select>
-      <div class="filter-item">
+      <div class="filter-item filter-item--date">
        <el-date-picker
          v-model="rangeDate"
          value-format="timestamp"
@ -134,35 +134,35 @@
        v-number
        placeholder="长UID"
        style="width: 200px;"
-        class="filter-item"
+        class="filter-item filter-item--long-id"
      />
      <el-input
        v-model.trim="listQuery.account"
        placeholder="短账号"
        style="width: 200px;"
-        class="filter-item"
+        class="filter-item filter-item--short-id"
      />
      <el-input
        v-model.trim="listQuery.deviceId"
        placeholder="设备ID"
        style="width: 200px;"
-        class="filter-item"
+        class="filter-item filter-item--device-id"
      />
      <el-button
        :loading="searchLoading"
-        class="filter-item"
+        class="filter-item filter-item--search"
        type="primary"
        icon="el-icon-search"
        @click="handleSearch"
      >
        搜索
      </el-button>
-      <el-checkbox v-model="showAllCondition" class="filter-item"
+      <el-checkbox v-model="showAllCondition" class="filter-item filter-item--toggle"
        >显示所有条件</el-checkbox
      >
      <el-button
        v-if="buttonPermissions.includes('props:config:sales:total')"
-        class="filter-item"
+        class="filter-item filter-item--overview"
        type="primary"
        icon="el-icon-monitor"
        @click="clickUserRegistrationOverview"
@ -1038,4 +1038,60 @@ export default {
    width: 150px;
  }
 }
+
+.filter-item--system {
+  order: 10;
+}
+
+.filter-item--country {
+  order: 20;
+}
+
+.filter-item--long-id {
+  order: 30;
+}
+
+.filter-item--short-id {
+  order: 40;
+}
+
+.filter-item--device-id {
+  order: 50;
+}
+
+.filter-item--status {
+  order: 60;
+}
+
+.filter-item--user-type {
+  order: 70;
+}
+
+.filter-item--gender {
+  order: 80;
+}
+
+.filter-item--register-origin {
+  order: 90;
+}
+
+.filter-item--origin-platform {
+  order: 100;
+}
+
+.filter-item--date {
+  order: 110;
+}
+
+.filter-item--toggle {
+  order: 120;
+}
+
+.filter-item--search {
+  order: 130;
+}
+
+.filter-item--overview {
+  order: 140;
+}
 </style>
--- a/src/views/user/user-table/index.vue
+++ b/src/views/user/user-table/index.vue
@ -7,7 +7,7 @@
        <el-select
          v-model="listQuery.del"
          style="width: 120px"
-          class="filter-item"
+          class="filter-item filter-item--status"
          @change="handleSearch"
        >
          <el-option label="未注销" value="0" />
@ -19,7 +19,7 @@
          v-model="listQuery.sysOrigins"
          placeholder="系统"
          style="width: 200px"
-          class="filter-item"
+          class="filter-item filter-item--system"
          multiple
          collapse-tags
        >
@ -43,7 +43,7 @@
          placeholder="注册来源"
          clearable
          style="width: 120px"
-          class="filter-item"
+          class="filter-item filter-item--register-origin"
          @change="handleSearch"
        >
          <el-option
@ -61,7 +61,7 @@
          placeholder="来源平台"
          clearable
          style="width: 120px"
-          class="filter-item"
+          class="filter-item filter-item--origin-platform"
          @change="handleSearch"
        >
          <el-option
@ -79,7 +79,7 @@
          placeholder="性别"
          clearable
          style="width: 120px"
-          class="filter-item"
+          class="filter-item filter-item--gender"
          @change="handleUserSexChange"
        >
          <el-option
@ -98,7 +98,7 @@
          :fetch-suggestions="querySearch"
          placeholder="国家"
          style="width: 200px"
-          class="filter-item"
+          class="filter-item filter-item--country"
          clearable
          @clear="handleDelCountryCodeClick"
          @select="handleCountryCodeClick"
@ -121,7 +121,7 @@
          v-loading="loadingCountry"
          placeholder="国家"
          style="width: 200px"
-          class="filter-item"
+          class="filter-item filter-item--user-type"
          clearable
          collapse-tags
          @change="changeCountry"
@ -160,7 +160,7 @@
        </el-select>

        <!-- 注册时间 -->
-        <div class="filter-item">
+        <div class="filter-item filter-item--date">
          <el-date-picker
            v-model="rangeDate"
            value-format="timestamp"
@ -178,7 +178,7 @@
          v-number
          placeholder="长UID"
          style="width: 200px;"
-          class="filter-item"
+          class="filter-item filter-item--long-id"
        />

        <!-- 短账号 -->
@ -186,7 +186,7 @@
          v-model.trim="listQuery.account"
          placeholder="短账号"
          style="width: 200px;"
-          class="filter-item"
+          class="filter-item filter-item--short-id"
        />

        <!-- 设备ID -->
@ -194,13 +194,13 @@
          v-model.trim="listQuery.deviceId"
          placeholder="设备ID"
          style="width: 200px;"
-          class="filter-item"
+          class="filter-item filter-item--device-id"
        />

        <!-- 搜索按钮 -->
        <el-button
          :loading="searchLoading"
-          class="filter-item"
+          class="filter-item filter-item--search"
          type="primary"
          icon="el-icon-search"
          @click="handleSearch"
@ -209,14 +209,14 @@
        </el-button>

        <!-- 是否显示所有条件 -->
-        <el-checkbox v-model="showAllCondition" class="filter-item"
+        <el-checkbox v-model="showAllCondition" class="filter-item filter-item--toggle"
          >显示所有条件</el-checkbox
        >

        <!-- 用户注册情况 -->
        <el-button
          v-if="buttonPermissions.includes('props:config:sales:total')"
-          class="filter-item"
+          class="filter-item filter-item--overview"
          type="primary"
          icon="el-icon-monitor"
          @click="clickUserRegistrationOverview"
@ -1327,4 +1327,60 @@ export default {
    width: 150px;
  }
 }
+
+.filter-item--system {
+  order: 10;
+}
+
+.filter-item--country {
+  order: 20;
+}
+
+.filter-item--long-id {
+  order: 30;
+}
+
+.filter-item--short-id {
+  order: 40;
+}
+
+.filter-item--device-id {
+  order: 50;
+}
+
+.filter-item--status {
+  order: 60;
+}
+
+.filter-item--user-type {
+  order: 70;
+}
+
+.filter-item--gender {
+  order: 80;
+}
+
+.filter-item--register-origin {
+  order: 90;
+}
+
+.filter-item--origin-platform {
+  order: 100;
+}
+
+.filter-item--date {
+  order: 110;
+}
+
+.filter-item--toggle {
+  order: 120;
+}
+
+.filter-item--search {
+  order: 130;
+}
+
+.filter-item--overview {
+  order: 140;
+}
 </style>
--- a/src/views/version/app/index.vue
+++ b/src/views/version/app/index.vue
@ -6,7 +6,7 @@
        v-model="listQuery.sysOrigin"
        placeholder="系统"
        style="width: 120px"
-        class="filter-item"
+        class="filter-item filter-item--system"
        @change="handleSearch"
      >
        <el-option
@ -22,7 +22,7 @@
      <el-select
        v-model="listQuery.platform"
        style="width: 120px"
-        class="filter-item"
+        class="filter-item filter-item--platform"
        placeholder="平台"
        @change="changeSelectPlatform"
      >
@ -38,7 +38,7 @@
        v-model="listQuery.channel"
        placeholder="渠道"
        style="width: 200px"
-        class="filter-item"
+        class="filter-item filter-item--channel"
        @change="handleSearch"
      >
        <el-option
@ -50,7 +50,7 @@
      </el-select>
      <el-button
        :loading="searchLoading"
-        class="filter-item"
+        class="filter-item filter-item--search"
        type="primary"
        icon="el-icon-search"
        @click="handleSearch"
@ -58,7 +58,7 @@
        搜索
      </el-button>
      <el-button
-        class="filter-item"
+        class="filter-item filter-item--create"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-edit"
@ -72,13 +72,13 @@
        ref="saveTagInput"
        v-model="buildVersion"
        v-number
-        class="filter-item input-new-tag"
+        class="filter-item filter-item--build-version input-new-tag"
        @blur="handleInputConfirm"
      />
      <el-button
        v-else
        v-loading="buildVersionLoading"
-        class="filter-item button-new-tag"
+        class="filter-item filter-item--build-version button-new-tag"
        type="info"
        plain
        @click="showBuildVersionInput"
@ -373,6 +373,31 @@ export default {
    width: 150px;
  }
 }
+
+.filter-item--system {
+  order: 10;
+}
+
+.filter-item--platform {
+  order: 20;
+}
+
+.filter-item--channel {
+  order: 30;
+}
+
+.filter-item--build-version {
+  order: 40;
+}
+
+.filter-item--search {
+  order: 50;
+}
+
+.filter-item--create {
+  order: 60;
+}
+
 .el-tag + .el-tag {
  margin-left: 10px;
 }