init

src/styles/theme/beautiful.scss

@@ -0,0 +1,55 @@
+.theme-beautiful {
+  .avue-sidebar {
+    background: linear-gradient(90deg, #006cff, #399efd) !important;
+
+    .el-menu-item, .el-sub-menu__title {
+      background: linear-gradient(90deg, #006cff, #399efd) !important;
+    }
+
+    .el-menu-item, .el-sub-menu__title {
+      i, span {
+        color: #fff
+      }
+
+      .is-active {
+        background: #399efd !important;
+      }
+
+      &:hover, &.is-active {
+        background: #399efd !important;
+
+        i, span {
+          background: #399efd !important;
+        }
+      }
+    }
+  }
+
+  .avue-logo {
+    background: linear-gradient(90deg, #006cff, #399efd) !important;
+  }
+
+  .avue-tags {
+    .el-tabs__item {
+      font-size: 14px !important;
+      color: #303133 !important;
+      font-weight: 500 !important;
+      border: 1px solid #dcdfe6 !important;
+      border-radius: 3px;
+      height: 35px !important;
+      line-height: 35px !important;
+      margin: 5px 3px 8px 3px !important;
+
+      &:hover {
+        color: var(--el-color-primary) !important;
+        border-color: var(--el-color-primary) !important;
+      }
+    }
+
+    .is-active {
+      color: var(--el-color-primary) !important;
+      border-color: var(--el-color-primary) !important;
+    }
+  }
+
+}

src/styles/theme/bule.scss

@@ -0,0 +1,53 @@
+.theme-bule {
+
+  .avue-top, .avue-logo {
+    background: #004ca7;
+  }
+
+  .avue-sidebar {
+    background: #004ca7;
+
+    .el-menu-item.is-active, .el-sub-menu__title.is-active {
+      background-color: rgba(0, 0, 0, 0.2);
+    }
+  }
+
+  .el-dropdown {
+    color: #fff;
+  }
+
+  .avue-logo {
+    .avue-logo_title {
+      color: #fff;
+    }
+  }
+
+  .avue-breadcrumb {
+    i {
+      color: #fff;
+    }
+  }
+
+  .top-bar__item {
+    i {
+      color: #fff;
+    }
+  }
+
+  .avue-top {
+
+    .el-menu-item {
+      i,
+      span {
+        color: #fff;
+      }
+
+      &:hover {
+        i,
+        span {
+          color: #fff;
+        }
+      }
+    }
+  }
+}

src/styles/theme/cool.scss

@@ -0,0 +1,175 @@
+.theme-cool {
+  .el-menu--popup {
+    .el-menu-item {
+      background-color: #fff;
+
+      i, span {
+        color: #666;
+      }
+
+      &:hover {
+        i, span {
+          color: #333;
+        }
+      }
+
+      &.is-active {
+        background-color: var(--el-color-primary);
+
+        &:before {
+          content: '';
+          top: 0;
+          left: 0;
+          bottom: 0;
+          width: 4px;
+          background: var(--el-color-primary);
+          position: absolute;
+        }
+
+        i, span {
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  .avue-top {
+    background: linear-gradient(120deg, #25aff3, #008ad3);
+  }
+
+  .avue-tags {
+    padding: 0 3px;
+    margin: 8px 0;
+    box-shadow: none;
+    background-color: transparent;
+
+    .el-tabs__header .el-tabs__item {
+      padding: 0 10px !important;
+      background-color: #fff;
+      margin-right: 5px;
+      color: #909399;
+      border-radius: 3px;
+      height: 30px;
+      font-size: 12px;
+      line-height: 30px;
+
+      &.is-active {
+        border: none;
+        color: #008ad3;
+      }
+    }
+  }
+
+  .avue-logo {
+    background: #fff;
+    box-shadow: none;
+  }
+
+  .avue-sidebar--tip {
+    background-color: transparent;
+    color: #333;
+  }
+
+  .el-dropdown {
+    color: #fff;
+  }
+
+  .avue-logo_title {
+    font-weight: 400;
+    color: #008ad3;
+  }
+
+  .logo_title,
+  .avue-breadcrumb {
+    color: #fff;
+
+    i {
+      color: #fff;
+    }
+  }
+
+  .avue-top {
+    .el-menu-item {
+      i,
+      span {
+        color: #fff;
+      }
+
+      &:hover {
+        i,
+        span {
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  .avue-sidebar {
+    box-shadow: 2px 0 6px rgba(0, 21, 41, 0.15);
+    background-color: #fff;
+
+    .el-menu-item, .el-sub-menu__title {
+      font-size: 13px;
+
+      i, span {
+        color: #000;
+      }
+
+      &:hover {
+        background: transparent;
+
+        i, span {
+          color: #000;
+        }
+      }
+
+      &.is-active {
+        background-color: #e5f1fb;
+
+        &::before {
+          width: 0;
+        }
+
+        i, span {
+          color: #25aff3;
+        }
+      }
+    }
+  }
+
+  .top-search {
+    .el-input__inner {
+      color: #333;
+    }
+
+    input::-webkit-input-placeholder,
+    textarea::-webkit-input-placeholder {
+      /* WebKit browsers */
+      color: #fff;
+    }
+
+    input:-moz-placeholder,
+    textarea:-moz-placeholder {
+      /* Mozilla Firefox 4 to 18 */
+      color: #fff;
+    }
+
+    input::-moz-placeholder,
+    textarea::-moz-placeholder {
+      /* Mozilla Firefox 19+ */
+      color: #fff;
+    }
+
+    input:-ms-input-placeholder,
+    textarea:-ms-input-placeholder {
+      /* Internet Explorer 10+ */
+      color: #fff;
+    }
+  }
+
+  .top-bar__item {
+    i {
+      color: #fff;
+    }
+  }
+}

src/styles/theme/d2.scss

@@ -0,0 +1,68 @@
+.theme-d2 {
+  .avue-logo {
+    color: var(--el-color-primary);
+    background-color: #ebf1f6;
+    box-shadow: none;
+
+    .avue-logo_title {
+      font-size: 20px;
+      font-weight: 400;
+    }
+  }
+
+  .avue-top {
+    background-color: #ebf1f6;
+    box-shadow: none;
+  }
+
+  .avue-main {
+    padding: 0 5px;
+  }
+
+  .avue-tags {
+    margin-left: 6px;
+    padding: 0;
+    border: 1px solid #e4e7ed;
+    border-radius: 3px;
+    background-color: #ebf1f6;
+    box-shadow: none;
+
+    .el-tabs__item {
+      border-left: 1px solid #cfd7e5 !important;
+      margin: 0 !important;
+      background-color: rgba(0, 0, 0, .03) !important;
+      color: #606266 !important;
+      font-size: 14px !important;
+      font-weight: 500 !important;
+
+      &:first-child {
+        border-left: none !important;
+      }
+    }
+
+    .is-active {
+      border-bottom: 1px solid #fff !important;
+      background-color: #fff !important;
+      color: var(--el-color-primary) !important;
+    }
+  }
+
+  .avue-sidebar {
+    background-color: #ebf1f6;
+    box-shadow: none;
+
+    .el-menu-item, .el-sub-menu__title {
+      i, span {
+        color: #606266
+      }
+
+      &:hover, &.is-active {
+        background: hsla(0, 0%, 100%, .5);
+
+        i, span {
+          color: var(--el-color-primary);
+        }
+      }
+    }
+  }
+}

src/styles/theme/dark.scss

@@ -0,0 +1,70 @@
+.theme-dark {
+  .avue-logo {
+    color: #fff;
+    background-color: #2c3643;
+    box-shadow: none;
+
+    .avue-logo_title {
+      font-size: 20px;
+      font-weight: 400;
+    }
+  }
+
+  .avue-top {
+    background-color: #2c3643;
+    box-shadow: none;
+    color: #ccc;
+
+    i, span {
+      color: #ccc;
+    }
+  }
+
+  .avue-main {
+    padding: 0 5px;
+  }
+
+  .avue-tags {
+    padding-left: 0;
+    background-color: #2c3643;
+    border-color: transparent;
+
+    .el-tabs__item {
+      margin: 0 !important;
+      background-color: #262d37;
+
+      &.is-active {
+        color: #262d37 !important;
+        background-color: #fff !important;
+        border-color: #262d37 !important;
+      }
+    }
+  }
+
+  .avue-main {
+    background-color: #2c3643;
+  }
+
+  .avue-sidebar {
+    background-color: #2c3643;
+    box-shadow: none;
+
+    .el-menu-item, .el-sub-menu__title {
+      i, span {
+        color: #ccc;
+      }
+
+      &:hover, &.is-active {
+        background: #262d37;
+
+        i, span {
+          color: #fff;
+        }
+
+        &:before {
+          background-color: #000;
+        }
+      }
+    }
+  }
+}

src/styles/theme/go.scss

@@ -0,0 +1,128 @@
+.theme-go {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1) !important;
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color) !important;
+  .el-table .el-table__row td .cell {
+    line-height: 32px;
+    --tw-text-opacity: 1;
+    color: rgb(75 85 99 / var(--tw-text-opacity));
+  }
+  .el-table tr th .cell {
+    line-height: 25px;
+    --tw-text-opacity: 1;
+    color: rgb(55 65 81 / var(--tw-text-opacity));
+  }
+
+
+  .avue-sidebar {
+    background:#fff !important;
+
+    .el-menu-item, .el-sub-menu__title {
+      i, span {
+        color: #333;
+      }
+
+      &:hover {
+        background: transparent;
+
+        i, span {
+          color: var(--el-color-primary);
+        }
+      }
+
+      &.is-active {
+        &:before {
+          left: auto;
+          right: 0;
+        }
+
+        background-color: #f0f6ff;
+
+        i, span {
+          color: var(--el-color-primary);
+        }
+      }
+    }
+  }
+
+  .avue-logo {
+    width:100%;
+    height:50px;
+    line-height: 50px;
+    background:#fff;
+    color:#333;
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
+  }
+
+  .avue-top{
+    height:50px;
+    line-height: 50px;
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
+    .top-bar__left i, .top-bar__right i{
+      line-height: 50px;
+    }
+    .el-menu--horizontal.el-menu{
+      border:none
+    }
+    .el-menu-item{
+      i,span{
+        font-size: 15px;
+      }
+    }
+
+    .top-bar__title{
+      padding-left: 50px;
+    }
+  }
+  .avue-main{
+    background-color: rgb(249,250,251);
+  }
+  .avue-tags {
+    margin: 5px 6px 8px 6px;
+    padding-bottom: 2px;
+
+    .el-tabs__nav-prev,
+    .el-tabs__nav-next {
+      width: 20px;
+      line-height: 50px;
+      font-size: 18px;
+      text-align: center;
+    }
+
+    &__box {
+      position: relative;
+      box-sizing: border-box;
+      padding-right: 70px;
+      width: 100%;
+
+      .el-tabs__item {
+        &:first-child {
+          .is-icon-close {
+            display: none;
+          }
+        }
+      }
+    }
+
+    .el-tabs__item {
+      font-size: 14px !important;
+      color: rgb(75,85,99) !important;
+      font-weight: 500 !important;
+      border: 1px solid rgb(205,218,214) !important;
+      border-radius: 3px;
+      height: 30px !important;
+      line-height: 35px !important;
+      margin: 8px 3px 8px 3px !important;
+
+      &:hover {
+        color: var(--el-color-primary) !important;
+        border-color: var(--el-color-primary) !important;
+      }
+    }
+
+    .is-active {
+      color: var(--el-color-primary) !important;
+      border-color: var(--el-color-primary) !important;
+    }
+  }
+
+}

src/styles/theme/hey.scss

@@ -0,0 +1,71 @@
+.theme-hey {
+  .avue-sidebar {
+    background-color: #fff;
+    box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
+
+    .el-menu-item, .el-sub-menu__title {
+      i, span {
+        color: rgba(49, 58, 70, .8);
+      }
+
+      &:hover {
+        background: transparent;
+
+        i, span {
+          color: var(--el-color-primary);
+        }
+      }
+
+      &.is-active {
+        &:before {
+          left: auto;
+          right: 0;
+        }
+
+        background-color: #f0f6ff;
+
+        i, span {
+          color: var(--el-color-primary);
+        }
+      }
+    }
+  }
+
+  .avue-logo {
+    background-color: #fff;
+    box-shadow: none;
+
+    .avue-logo_title {
+      color: var(--el-color-primary);
+      font-size: 20px;
+    }
+  }
+
+  .avue-tags {
+    background: #f3f6f8;
+
+    &__box {
+      position: relative;
+      box-sizing: border-box;
+      padding-right: 70px;
+      width: 100%;
+
+      .el-tabs__item {
+        &:first-child {
+          .is-icon-close {
+            display: none;
+          }
+        }
+      }
+    }
+
+    .el-tabs__item {
+      color: rgba(0, 0, 0, .65) !important;
+    }
+
+    .is-active {
+      background-color: #fff;
+      border-bottom: none !important;
+    }
+  }
+}

src/styles/theme/index.scss

@@ -0,0 +1,35 @@
+// white
+@use './white.scss';
+
+// star
+@use './star.scss';
+
+// vip
+@use './vip.scss';
+
+// d2
+@use './d2.scss';
+
+// bule
+@use './bule.scss';
+
+//iview
+@use './iview.scss';
+
+//go
+@use 'go';
+
+//heyui
+@use './hey.scss';
+
+//dark
+@use './dark.scss';
+
+//lte
+@use 'lte';
+
+//cool
+@use './cool.scss';
+
+//beautiful
+@use './beautiful.scss';

src/styles/theme/iview.scss

@@ -0,0 +1,87 @@
+.theme-iview {
+  .avue-logo {
+    background: #001529;
+    box-shadow: none;
+    text-align: center;
+
+    .avue-logo_title {
+      padding: 5px 8px 8px 8px;
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
+      border-bottom-left-radius: 3px;
+      border-bottom-right-radius: 3px;
+      font-size: 20px;
+      color: #fff;
+      font-weight: 500;
+      display: inline;
+      background-color: var(--el-color-primary);
+    }
+  }
+
+  .avue-tags {
+    padding: 3px 5px 5px 0;
+    background: #f0f0f0;
+    box-shadow: inset 0 0 3px 2px hsla(0, 0%, 39.2%, .1);
+
+    .is-active {
+      &:before {
+        background: var(--el-color-primary) !important;
+      }
+    }
+
+    .el-tabs__item {
+      padding: 0 15px !important;
+      position: relative;
+      height: 32px !important;
+      line-height: 32px !important;
+      border: 1px solid #e8eaec !important;
+      color: #515a6e !important;
+      background: #fff !important;
+      border-radius: 3px;
+
+      &:before {
+        content: '';
+        display: inline-block;
+        width: 12px;
+        height: 12px;
+        margin-right: 10px;
+        border-radius: 50%;
+        background: #e8eaec;
+      }
+    }
+  }
+
+  .avue-sidebar {
+    background: #001529;
+
+    .el-menu-item {
+      &.is-active {
+        background-color: #000c17;
+
+        &:before {
+          display: none;
+        }
+
+        i, span {
+          color: var(--el-color-primary);
+        }
+      }
+    }
+
+    .el-sub-menu {
+      .el-menu-item {
+        &.is-active {
+          background-color: var(--el-color-primary);
+
+          &:before {
+            display: none;
+          }
+
+          i, span {
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+}

src/styles/theme/lte.scss

@@ -0,0 +1,44 @@
+.theme-lte {
+  .avue-logo {
+    background-color: var(--el-color-primary);
+
+    .avue-logo_title {
+      font-weight: 500;
+      font-size: 20px;
+      color: #fff;
+    }
+  }
+
+  .avue-tags {
+    .el-tabs__item {
+      font-size: 12px !important;
+      font-weight: 500 !important;
+    }
+  }
+
+  .avue-sidebar {
+    background-color: #263238;
+
+    .el-menu-item, .el-sub-menu__title {
+      i, span {
+        color: #8a979e;
+      }
+
+      &:hover {
+        background-color: #2b373d;
+      }
+
+      &.is-active {
+        &:before {
+          display: none;
+        }
+
+        background-color: #2b373d;
+
+        i, span {
+          color: #fff;
+        }
+      }
+    }
+  }
+}

src/styles/theme/star.scss

@@ -0,0 +1,116 @@
+.theme-star {
+  .avue-main {
+    background: transparent;
+  }
+
+  .avue-contail {
+    background-image: url("/img/star-squashed.jpg");
+    background-size: 100% 100%;
+  }
+
+  .avue-logo {
+    color: #fff;
+  }
+
+  .avue-top,
+  .avue-logo,
+  .tags-container {
+    background-color: transparent;
+  }
+
+  .el-card, .error-page {
+    opacity: .9;
+  }
+
+  .avue-tabs {
+    padding: 0 20px;
+  }
+
+  .avue-tags {
+    background-color: transparent;
+    border-top: none;
+  }
+
+  .avue-top {
+    .avue-breadcrumb {
+      color: #fff;
+    }
+
+    .el-menu-item {
+      i, span {
+        color: #fff;
+      }
+
+      &.is-active {
+        background-color: rgba(0, 0, 0, .4)
+      }
+    }
+
+    .el-dropdown {
+      color: #fff;
+    }
+  }
+
+  .avue-sidebar {
+    box-shadow: 2px 0 6px rgba(0, 21, 41, 0.15);
+    background-color: transparent;
+
+    .el-menu-item, .el-sub-menu__title {
+      i, span {
+        color: #fff
+      }
+
+      &:hover {
+        background: transparent;
+
+        i, span {
+          color: var(--el-color-primary);
+        }
+      }
+
+      &.is-active {
+        background-color: rgba(0, 0, 0, .4);
+
+        i, span {
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  .top-search {
+    .el-input__inner {
+      color: #333;
+    }
+
+    input::-webkit-input-placeholder,
+    textarea::-webkit-input-placeholder {
+      /* WebKit browsers */
+      color: #fff;
+    }
+
+    input:-moz-placeholder,
+    textarea:-moz-placeholder {
+      /* Mozilla Firefox 4 to 18 */
+      color: #fff;
+    }
+
+    input::-moz-placeholder,
+    textarea::-moz-placeholder {
+      /* Mozilla Firefox 19+ */
+      color: #fff;
+    }
+
+    input:-ms-input-placeholder,
+    textarea:-ms-input-placeholder {
+      /* Internet Explorer 10+ */
+      color: #fff;
+    }
+  }
+
+  .top-bar__item {
+    i {
+      color: #fff;
+    }
+  }
+}

src/styles/theme/vip.scss

@@ -0,0 +1,109 @@
+.theme-vip {
+  $color: rgba(246, 202, 157, .7);
+  $is_active_color: #f6ca9d;
+
+  .avue-top {
+    background-color: #20222a;
+  }
+
+  .el-dropdown {
+    color: $color;
+  }
+
+  .avue-logo {
+    .avue-logo_title {
+      background-image: -webkit-gradient(linear, left top, left bottom, from($color), to($is_active_color));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      font-weight: 400;
+    }
+  }
+
+  .avue-breadcrumb {
+    i {
+      color: $color;
+    }
+  }
+
+  .avue-sidebar {
+    .el-menu-item {
+      &.is-active {
+        &:before {
+          background: $color;
+        }
+
+        i, span {
+          color: $is_active_color;
+        }
+      }
+    }
+  }
+
+  .avue-tags {
+    .el-tabs__item {
+      color: rgba(0, 0, 0, 0.4) !important;
+
+      &.is-active {
+        color: $is_active_color !important;
+        border-color: $is_active_color !important;
+      }
+
+      &:before {
+        background: $is_active_color;
+      }
+    }
+  }
+
+  .top-search {
+    .el-input__inner {
+      color: $color;
+    }
+
+    input::-webkit-input-placeholder,
+    textarea::-webkit-input-placeholder {
+      /* WebKit browsers */
+      color: $color;
+    }
+
+    input:-moz-placeholder,
+    textarea:-moz-placeholder {
+      /* Mozilla Firefox 4 to 18 */
+      color: $color;
+    }
+
+    input::-moz-placeholder,
+    textarea::-moz-placeholder {
+      /* Mozilla Firefox 19+ */
+      color: $color;
+    }
+
+    input:-ms-input-placeholder,
+    textarea:-ms-input-placeholder {
+      /* Internet Explorer 10+ */
+      color: $color;
+    }
+  }
+
+  .top-bar__item {
+    i {
+      color: $color;
+    }
+  }
+
+  .avue-top {
+
+    .el-menu-item {
+      i,
+      span {
+        color: $color;
+      }
+
+      &:hover {
+        i,
+        span {
+          color: $is_active_color;
+        }
+      }
+    }
+  }
+}

src/styles/theme/white.scss

@@ -0,0 +1,143 @@
+.theme-white {
+  .el-menu--popup {
+    .el-menu-item {
+      background-color: #fff;
+
+      i, span {
+        color: #666;
+      }
+
+      &:hover {
+        i, span {
+          color: #333;
+        }
+      }
+
+      &.is-active {
+        background-color: var(--el-color-primary);
+
+        &:before {
+          content: '';
+          top: 0;
+          left: 0;
+          bottom: 0;
+          width: 4px;
+          background: var(--el-color-primary);
+          position: absolute;
+        }
+
+        i, span {
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  .avue-top,
+  .avue-logo,
+  .tags-container {
+    background-color: var(--el-color-primary);
+  }
+
+  .avue-sidebar--tip {
+    background-color: transparent;
+    color: #333;
+  }
+
+  .el-dropdown {
+    color: #fff;
+  }
+
+  .avue-logo_title {
+    font-weight: 400;
+    color: #fff;
+  }
+
+  .logo_title,
+  .avue-breadcrumb {
+    color: #fff;
+
+    i {
+      color: #fff;
+    }
+  }
+
+  .avue-top {
+    .el-menu-item {
+      i,
+      span {
+        color: #fff;
+      }
+
+      &:hover {
+        i,
+        span {
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  .avue-sidebar {
+    box-shadow: 2px 0 6px rgba(0, 21, 41, 0.15);
+    background-color: #fff;
+
+    .el-menu-item, .el-sub-menu__title {
+      i, span {
+        color: #666
+      }
+
+      &:hover {
+        background: transparent;
+
+        i, span {
+          color: #333;
+        }
+      }
+
+      &.is-active {
+        background-color: var(--el-color-primary);
+
+        i, span {
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  .top-search {
+    .el-input__inner {
+      color: #333;
+    }
+
+    input::-webkit-input-placeholder,
+    textarea::-webkit-input-placeholder {
+      /* WebKit browsers */
+      color: #fff;
+    }
+
+    input:-moz-placeholder,
+    textarea:-moz-placeholder {
+      /* Mozilla Firefox 4 to 18 */
+      color: #fff;
+    }
+
+    input::-moz-placeholder,
+    textarea::-moz-placeholder {
+      /* Mozilla Firefox 19+ */
+      color: #fff;
+    }
+
+    input:-ms-input-placeholder,
+    textarea:-ms-input-placeholder {
+      /* Internet Explorer 10+ */
+      color: #fff;
+    }
+  }
+
+  .top-bar__item {
+    i {
+      color: #fff;
+    }
+  }
+}