afn-basic-components 1.1.2 → 1.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "afn-basic-components",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "基础公共组件库 - 包含GlobalDrawer、MessagePopUp、ProTable等组件和样式",
   "main": "src/index.js",
   "scripts": {

package/src/assets/icons/index.js

@@ -0,0 +1,9 @@
+import Vue from 'vue'
+import SvgIcon from '@/components/SvgIcon'// svg component
+
+// register globally
+Vue.component('svg-icon', SvgIcon)
+
+const req = require.context('./svg', false, /\.svg$/)
+const requireAll = requireContext => requireContext.keys().map(requireContext)
+requireAll(req)

package/src/assets/icons/svg/close-hover.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>错误备份</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="后台组件规范" transform="translate(-1763.000000, -2479.000000)" fill="#4A7FF8">
+            <g id="编组-5" transform="translate(0.000000, 2233.000000)">
+                <g id="错误备份" transform="translate(1763.000000, 246.000000)">
+                    <path d="M12.6919628,12.7042459 C12.2975049,13.0985847 11.6580886,13.0985847 11.2636307,12.7042459 L7.98776,9.42837524 L4.71188934,12.7042459 C4.31553333,13.0870592 3.6855057,13.0815844 3.29586218,12.6919409 C2.90621866,12.3022974 2.90074385,11.6722698 3.28355719,11.2759138 L6.55942786,8.00004309 L3.28355719,4.72417243 C2.90074385,4.32781642 2.90621866,3.69778879 3.29586218,3.30814527 C3.6855057,2.91850176 4.31553333,2.91302695 4.71188934,3.29584029 L7.98776,6.57171095 L11.2636307,3.29584029 C11.5187776,3.04069332 11.8906624,2.94104708 12.2391997,3.03443735 C12.5877369,3.12782762 12.8599755,3.40006619 12.9533657,3.74860343 C13.046756,4.09714067 12.9471098,4.46902547 12.6919628,4.72417243 L9.41609214,8.00004309 L12.6919628,11.2759138 C13.0863016,11.6703717 13.0863016,12.309788 12.6919628,12.7042459 L12.6919628,12.7042459 Z" id="路径"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/assets/icons/svg/close.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>错误</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="后台组件规范" transform="translate(-1727.000000, -2479.000000)" fill="#333333">
+            <g id="编组-5" transform="translate(0.000000, 2233.000000)">
+                <g id="错误" transform="translate(1727.000000, 246.000000)">
+                    <path d="M12.6919628,12.7042459 C12.2975049,13.0985847 11.6580886,13.0985847 11.2636307,12.7042459 L7.98776,9.42837524 L4.71188934,12.7042459 C4.31553333,13.0870592 3.6855057,13.0815844 3.29586218,12.6919409 C2.90621866,12.3022974 2.90074385,11.6722698 3.28355719,11.2759138 L6.55942786,8.00004309 L3.28355719,4.72417243 C2.90074385,4.32781642 2.90621866,3.69778879 3.29586218,3.30814527 C3.6855057,2.91850176 4.31553333,2.91302695 4.71188934,3.29584029 L7.98776,6.57171095 L11.2636307,3.29584029 C11.5187776,3.04069332 11.8906624,2.94104708 12.2391997,3.03443735 C12.5877369,3.12782762 12.8599755,3.40006619 12.9533657,3.74860343 C13.046756,4.09714067 12.9471098,4.46902547 12.6919628,4.72417243 L9.41609214,8.00004309 L12.6919628,11.2759138 C13.0863016,11.6703717 13.0863016,12.309788 12.6919628,12.7042459 L12.6919628,12.7042459 Z" id="路径"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/assets/icons/svg/danger.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>提示</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="后台组件规范" transform="translate(-1414.000000, -2475.000000)" fill="#FF7800" fill-rule="nonzero">
+            <g id="编组-5" transform="translate(-123.000000, 2233.000000)">
+                <path d="M1549,242 C1542.32533,242 1537,247.324667 1537,254 C1537,260.674667 1542.32467,266 1549,266 C1555.67467,266 1561,260.674667 1561,254 C1561,247.325333 1555.67467,242 1549,242 Z M1547.84467,246.695333 C1548.16,246.38 1548.43,246.17 1548.94,246.17 C1549.51,246.125333 1550.03467,246.395333 1550.24467,246.8 C1550.48467,247.085333 1550.62,247.714667 1550.56,248.09 C1550.56,248.195333 1550.48467,248.9 1550.45533,249.095333 L1550.03533,254.42 C1550.03533,254.945333 1549.93,255.47 1549.72,255.875333 C1549.61533,256.19 1549.3,256.4 1548.88,256.4 C1548.56467,256.4 1548.25,256.19 1548.14533,255.874667 C1547.93467,255.35 1547.83,254.93 1547.83,254.42 L1547.54467,249.2 C1547.44,248.254667 1547.44,248.57 1547.44,248.045333 C1547.44,247.535333 1547.54533,247.115333 1547.84467,246.695333 Z M1550.15533,261.41 C1549.84,261.725333 1549.42,261.83 1549.10467,261.83 C1548.68467,261.83 1548.26467,261.724667 1547.95,261.41 C1547.61343,261.083458 1547.42385,260.634274 1547.42466,260.165333 C1547.42466,259.745333 1547.53,259.325333 1547.84467,259.01 C1548.16,258.694667 1548.58,258.484667 1549,258.484667 C1549.42,258.484667 1549.84,258.695333 1550.15533,259.01 C1550.47,259.325333 1550.57533,259.744667 1550.57533,260.164667 C1550.56,260.674667 1550.45533,261.094667 1550.15533,261.41 L1550.15533,261.41 Z" id="提示"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/assets/icons/svg/error.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>失败提示</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="后台组件规范" transform="translate(-1546.000000, -2475.000000)" fill="#F46868" fill-rule="nonzero">
+            <g id="编组-5" transform="translate(-123.000000, 2233.000000)">
+                <path d="M1680.9994,242 C1674.37254,242 1669,247.372647 1669,254.00041 C1669,260.627271 1674.37254,266 1680.9994,266 C1687.62607,266 1693,260.627244 1693,254.00041 C1693,247.372647 1687.62607,242 1680.9994,242 Z M1685.40777,257.582411 C1685.74936,257.929463 1685.73385,258.497931 1685.3738,258.852193 C1685.01375,259.206509 1684.44498,259.212573 1684.10361,258.86563 L1681,255.711114 L1677.89656,258.865521 C1677.55497,259.212573 1676.98661,259.206482 1676.62637,258.852193 C1676.26612,258.497822 1676.25102,257.929353 1676.59223,257.582411 L1679.71667,254.406728 L1676.59223,251.231017 C1676.25105,250.884075 1676.26612,250.315606 1676.62637,249.961208 C1676.98661,249.606919 1677.55497,249.600856 1677.89656,249.947907 L1681.00003,253.102315 L1684.10361,249.947825 C1684.44498,249.600883 1685.01375,249.606946 1685.3738,249.961235 C1685.73388,250.315524 1685.74936,250.883993 1685.40777,251.231044 L1682.28338,254.406701 L1685.40777,257.582411 Z" id="失败提示"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/assets/icons/svg/info.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>通知</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="后台组件规范" transform="translate(-1458.000000, -2475.000000)" fill="#4A7FF8" fill-rule="nonzero">
+            <g id="编组-5" transform="translate(-123.000000, 2233.000000)">
+                <path d="M1593,266 C1586.37258,266 1581,260.627422 1581,254 C1581,247.372578 1586.37258,242 1593,242 C1599.62742,242 1605,247.372578 1605,254 C1605,260.627422 1599.62742,266 1593,266 Z M1594.03125,260 L1594.03125,252.043156 C1594.03125,251.473602 1593.56953,251.011906 1593,251.011906 C1592.43047,251.011906 1591.96875,251.473602 1591.96875,252.043156 L1591.96875,260 C1591.96875,260.569531 1592.43047,261.03125 1593,261.03125 C1593.56953,261.03125 1594.03125,260.569531 1594.03125,260 Z M1593,249.96875 C1593.82842,249.96875 1594.5,249.297172 1594.5,248.46875 C1594.5,247.640328 1593.82842,246.96875 1593,246.96875 C1592.17158,246.96875 1591.5,247.640328 1591.5,248.46875 C1591.5,249.297172 1592.17158,249.96875 1593,249.96875 Z" id="通知"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/assets/icons/svg/simulation-close.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>关闭-蓝色</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="问答管理-问答配置-模拟问答测试" transform="translate(-1864.000000, -19.000000)" fill="#333333">
+            <g id="编组-17" transform="translate(1120.000000, 0.000000)">
+                <g id="关闭-蓝色" transform="translate(744.000000, 19.000000)">
+                    <path d="M16,7 C16.5522847,7 17,7.44771525 17,8 L17,14.999 L24,15 C24.5522847,15 25,15.4477153 25,16 C25,16.5522847 24.5522847,17 24,17 L17,16.999 L17,24 C17,24.5522847 16.5522847,25 16,25 C15.4477153,25 15,24.5522847 15,24 L15,16.999 L8,17 C7.44771525,17 7,16.5522847 7,16 C7,15.4477153 7.44771525,15 8,15 L15,14.999 L15,8 C15,7.44771525 15.4477153,7 16,7 Z" id="形状结合" transform="translate(16.000000, 16.000000) rotate(-45.000000) translate(-16.000000, -16.000000) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/assets/icons/svg/success.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>成功提示</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="后台组件规范" transform="translate(-1502.000000, -2475.000000)" fill="#40C495" fill-rule="nonzero">
+            <g id="编组-5" transform="translate(-123.000000, 2233.000000)">
+                <path d="M1637,242 C1643.6273,242 1649,247.3727 1649,254 C1649,260.6273 1643.6273,266 1637,266 C1630.3727,266 1625,260.6273 1625,254 C1625,247.3727 1630.3727,242 1637,242 Z M1642.136,250.3631 C1641.96709,250.194404 1641.73808,250.099723 1641.49936,250.099892 C1641.26064,250.100061 1641.03177,250.195065 1640.8631,250.364 L1635.5072,255.728 L1633.1351,253.3658 C1632.78215,253.019765 1632.21617,253.023133 1631.86736,253.373344 C1631.51855,253.723555 1631.51745,254.289536 1631.8649,254.6411 L1634.8739,257.6378 C1635.22578,257.988247 1635.79502,257.987442 1636.1459,257.636 L1642.1369,251.636 C1642.3056,251.467094 1642.40028,251.238085 1642.40011,250.999364 C1642.39994,250.760642 1642.30494,250.531768 1642.136,250.3631 L1642.136,250.3631 Z" id="成功提示"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/assets/icons/svgo.yml

@@ -0,0 +1,22 @@
+# replace default config
+
+# multipass: true
+# full: true
+
+plugins:
+
+  # - name
+  #
+  # or:
+  # - name: false
+  # - name: true
+  #
+  # or:
+  # - name:
+  #     param1: 1
+  #     param2: 2
+
+- removeAttrs:
+    attrs:
+      - 'fill'
+      - 'fill-rule'

package/src/components/SvgIcon/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <div
+    v-if="isExternal"
+    :style="styleExternalIcon"
+    class="svg-external-icon svg-icon"
+    v-on="$listeners"
+  />
+  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
+    <use :xlink:href="iconName" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'SvgIcon',
+  props: {
+    iconClass: {
+      type: String,
+      required: true
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    isExternal() {
+      return /^(https?:|mailto:|tel:)/.test(this.iconClass)
+    },
+    iconName() {
+      return `#icon-${this.iconClass}`
+    },
+    svgClass() {
+      if (this.className) {
+        return 'svg-icon ' + this.className
+      } else {
+        return 'svg-icon'
+      }
+    },
+    styleExternalIcon() {
+      return {
+        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
+        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+
+.svg-external-icon {
+  background-color: currentColor;
+  mask-size: cover !important;
+  display: inline-block;
+}
+</style>

package/src/index.js

@@ -2,6 +2,7 @@
 import GlobalDrawer from "./components/GlobalDrawer/index.vue";
 import MessagePopUp from "./components/MessagePopUp/index.vue";
 import ProTable from "./components/ProTable/index.vue";
+import SvgIcon from "./components/SvgIcon/index.vue";
 
 // 导入样式
 import "./styles/variables.scss";
@@ -11,8 +12,11 @@ import "./styles/index.scss";
 import "./styles/sidebar.scss";
 import "./styles/transition.scss";
 
+// 导入图标
+import "./assets/icons";
+
 // 组件列表
-const components = [GlobalDrawer, MessagePopUp, ProTable];
+const components = [GlobalDrawer, MessagePopUp, ProTable, SvgIcon];
 
 // 定义 install 方法，接收 Vue 作为参数
 const install = function (Vue) {
@@ -32,7 +36,7 @@ if (typeof window !== "undefined" && window.Vue) {
 }
 
 // 导出组件
-export { GlobalDrawer, MessagePopUp, ProTable };
+export { GlobalDrawer, MessagePopUp, ProTable, SvgIcon };
 
 // 导出 install 方法
 export default {

package/src/styles/element-variables.scss

@@ -0,0 +1,31 @@
+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #4a7ff8;
+$--color-success: #40c495;
+$--color-warning: #ff7800;
+$--color-danger: #f46868;
+// $--color-info: #1E1E1E;
+
+$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+
+$--border-color-light: #dfe4ed;
+$--border-color-lighter: #e6ebf5;
+
+$--table-border: 1px solid#dfe6ec;
+
+/* icon font path, required */
+$--font-path: "~element-ui/lib/theme-chalk/fonts";
+
+@import "~element-ui/packages/theme-chalk/src/index";
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  theme: $--color-primary;
+}

package/src/styles/index.scss

@@ -1,15 +1,9 @@
-@import './variables.scss';
-@import './mixin.scss';
-@import './transition.scss';
-@import './element-ui.scss';
-@import './sidebar.scss';
-@import './btn.scss';
-@import './ruoyi.scss';
-
-html {
-  height: 100%;
-  box-sizing: border-box;
-}
+@import "./variables.scss";
+@import "./mixin.scss";
+@import "./transition.scss";
+@import "./element-ui.scss";
+@import "./sidebar.scss";
+@import "./btn.scss";
 
 body {
   height: 100%;
@@ -18,17 +12,24 @@ body {
   text-rendering: optimizeLegibility;
   font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
     Microsoft YaHei, Arial, sans-serif;
+  background-image: url("~@/assets/images/background.png"); // 使用你的图片路径
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-attachment: fixed; // 让背景固定，不随内容滚动
 }
 
 label {
   font-weight: 700;
 }
 
-html,
-body,
+html {
+  height: 100%;
+  box-sizing: border-box;
+}
+
 #app {
   height: 100%;
-  overflow: hidden;
 }
 
 *,
@@ -37,6 +38,14 @@ body,
   box-sizing: inherit;
 }
 
+.no-padding {
+  padding: 0px !important;
+}
+
+.padding-content {
+  padding: 4px 0;
+}
+
 a:focus,
 a:active {
   outline: none;
@@ -54,6 +63,34 @@ div:focus {
   outline: none;
 }
 
+.fr {
+  float: right;
+}
+
+.fl {
+  float: left;
+}
+
+.pr-5 {
+  padding-right: 5px;
+}
+
+.pl-5 {
+  padding-left: 5px;
+}
+
+.block {
+  display: block;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.inlineBlock {
+  display: block;
+}
+
 .clearfix {
   &:after {
     visibility: hidden;
@@ -65,9 +102,33 @@ div:focus {
   }
 }
 
-// main-container global css
+aside {
+  background: #eef1f6;
+  padding: 8px 24px;
+  margin-bottom: 20px;
+  border-radius: 2px;
+  display: block;
+  line-height: 32px;
+  font-size: 16px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  color: #2c3e50;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  a {
+    color: #337ab7;
+    cursor: pointer;
+
+    &:hover {
+      color: rgb(32, 160, 255);
+    }
+  }
+}
+
+//main-container全局样式
 .app-container {
-  padding: 20px;
+  padding: 16px 20px;
 }
 
 .components-container {
@@ -75,10 +136,6 @@ div:focus {
   position: relative;
 }
 
-.pagination-container {
-  margin-top: 30px;
-}
-
 .text-center {
   text-align: center;
 }
@@ -99,6 +156,11 @@ div:focus {
     rgba(33, 120, 241, 1) 100%
   );
 
+  .subtitle {
+    font-size: 20px;
+    color: #fff;
+  }
+
   &.draft {
     background: #d0d0d0;
   }
@@ -114,7 +176,7 @@ div:focus {
   cursor: pointer;
 
   &:hover {
-    color: #20a0ff;
+    color: rgb(32, 160, 255);
   }
 }
 
@@ -127,102 +189,57 @@ div:focus {
     margin-bottom: 10px;
   }
 }
-
-//refine vue-multiselect plugin
-.multiselect {
-  line-height: 16px;
-}
-
-.multiselect--active {
-  z-index: 1000 !important;
+.navbar {
+  background: transparent !important;
+  box-shadow: none !important;
 }
 
-// 面包屑样式
 .app-breadcrumb.el-breadcrumb {
-  display: inline-block;
-  font-size: 14px;
-  line-height: 50px;
-  margin-left: 8px;
+  background: transparent !important;
 
-  .no-redirect {
-    color: #97a8be;
-    cursor: text;
-  }
-}
-
-// 导航栏样式
-.navbar {
-  height: 50px;
-  overflow: hidden;
-  position: relative;
-  background: #fff;
-  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+  .el-breadcrumb__item {
+    // 默认所有面包屑项都是浅色
+    .el-breadcrumb__inner,
+    .el-breadcrumb__inner a {
+      color: #999999 !important; // 🎨 浅灰色 - 非当前页面
+      font-weight: normal; // 📏 正常字体粗细
 
-  .hamburger-container {
-    line-height: 46px;
-    height: 100%;
-    float: left;
-    cursor: pointer;
-    transition: background 0.3s;
-    -webkit-tap-highlight-color: transparent;
+      &:hover {
+        color: #666666 !important; // 🖱️ 悬停时稍深一些
+      }
+    }
 
-    &:hover {
-      background: rgba(0, 0, 0, 0.025);
+    // 最后一个面包屑（当前页面）显示深色并加粗
+    &:last-child .el-breadcrumb__inner,
+    &:last-child .el-breadcrumb__inner a {
+      color: #333333 !important; // 🎯 深灰色 - 当前页面
     }
   }
 
-  .breadcrumb-container {
-    float: left;
+  .el-breadcrumb__item:not(:last-child) .no-redirect {
+    color: #999999 !important; // 🎨 非最后一个的不可点击文本显示浅灰色
   }
 
-  .right-menu {
-    float: right;
-    height: 100%;
-    line-height: 50px;
+  // 最后一个面包屑的不可点击文本保持深色
+  .el-breadcrumb__item:last-child .no-redirect {
+    color: #333 !important; // ⚫ 最后一个的不可点击文本显示黑色
+  }
+}
 
-    &:focus {
-      outline: none;
-    }
+/* 确保导航栏右侧菜单也透明 */
+.right-menu {
+  .right-menu-item {
+    color: rgba(255, 255, 255, 0.8) !important;
 
-    .right-menu-item {
-      display: inline-block;
-      padding: 0 8px;
-      height: 100%;
-      font-size: 18px;
-      color: #5a5e66;
-      vertical-align: text-bottom;
-
-      &.hover-effect {
-        cursor: pointer;
-        transition: background 0.3s;
-
-        &:hover {
-          background: rgba(0, 0, 0, 0.025);
-        }
-      }
+    &.hover-effect:hover {
+      background: rgba(255, 255, 255, 0.1) !important;
     }
+  }
 
-    .avatar-container {
-      margin-right: 30px;
-
-      .avatar-wrapper {
-        margin-top: 5px;
-        position: relative;
-
-        .user-avatar {
-          cursor: pointer;
-          width: 40px;
-          height: 40px;
-          border-radius: 10px;
-        }
-
-        .el-icon-caret-bottom {
-          cursor: pointer;
-          position: absolute;
-          right: -20px;
-          top: 25px;
-          font-size: 12px;
-        }
+  .avatar-container {
+    .avatar-wrapper {
+      .user-nickname {
+        /*   color: rgba(255, 255, 255, 0.9) !important; */
       }
     }
   }