devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue菜单样式_vue框架 两个菜单

作者：从前慢现在也慢 | 2024-02-19 06:32:02

赞

踩

vue框架 两个菜单

最近做导航栏菜单样式积累的一些经验

菜单类型

首先我们先区分一下菜单有几种

这里我分两种

如图1是普通菜单，2是带有子菜单的子母菜单。在2子母菜单里的子菜单等同于普通菜单。

 类名如下

  1. /* 菜單1 */
  2. .el-menu .el-menu-item{
  3.   border-radius: 4px 2px 2px 4px;
  4. }
  5. /* 子母菜單2 */
  6. .el-submenu__title{
  7.   border-radius: 4px 2px 2px 4px;
  8. }

一、圆角

首先是菜单和里面子菜单的圆角。我的项目是在这个文件中

 使用这个样式

  1. .el-menu .el-menu-item{
  2.   border-radius: 4px 2px 2px 4px;
  3. }

带有子菜单的子母菜单

  1. .el-submenu__title{
  2.   border-radius: 4px 2px 2px 4px;
  3. }

二、鼠标悬浮样式

  1. /* 普通菜单1 */
  2. .el-menu-item:hover {
  3.   background-color: #ffffff !important;
  4.   color: #0E0F0F !important;
  5. }
  6.  
  7. /* 子母菜单2 */
  8. .el-submenu__title:hover {
  9.   background-color: #ffffff !important;
  10.   color: #0E0F0F !important;
  11. }

 

三、选中样式

 这里只需要设置普通菜单1的样式就行，因为子母菜单2没有可用被选中的

  1. /* 菜單被選中的背景色 */
  2. .el-menu .el-menu-item.is-active {
  3.   background-color: #FFEFD7 !important;
  4.   color: #0E0F0F !important;
  5.   border-right: 3px solid var(--primary-dark, #FBA429);
  6. }

注意这里有时候会因为最小宽度之类的导致最右边被遮挡

需要自己设置一下宽度

  1. /* 取消最小邊距造成的顯示不全,跟css裏的.el-submenu .el-menu-item有關 */
  2. .el-submenu .el-menu-item{
  3.   min-width: 190px !important;
  4. }

 还有就是如果只使用.el-menu-item.is-active，会被覆盖

  1. /*如果使用这个*/
  2. .el-menu-item.is-active {
  3.   background-color: #FFEFD7 !important;
  4.   color: #0E0F0F !important;
  5.   border-right: 3px solid var(--primary-dark, #FBA429);
  6. }
  7.  
  8. /*会被下面这个覆盖*/
  9. .el-menu-item:hover {
  10.   background-color: #ffffff !important;
  11.   color: #0E0F0F !important;
  12. }

 还可以加入激活样式，就是鼠标点击元素后还没放开时的状态

  1. .el-menu-item:active {
  2.   background-color: #FFEFD7 !important;
  3.   color: #0E0F0F !important;
  4. }

 效果

 四、边距

首先我们给顶部加个边距

对el-menu这个元素加一个自定义类或者内联样式

  1. class="el-menu-vertical-demo"
  2.  
  3.  
  4. .el-menu-vertical-demo{
  5.   margin-top: 16px;
  6. }
  7.  
  8. 或者直接使用
  9. style="margin-top: 16px;"

 然后我们对菜单sidebar-item添加左边距和下边距。

同样的，左边距在内联和自定义类都行

  1. <sidebar-item
  2.     v-for="route in routes"
  3.     :key="route.path"
  4.     :item="route"
  5.     class="sidebar-item"
  6.     style="margin-left: 16px;"
  7. />
  8.  
  9. .sidebar-item{
  10.   margin-left: 16px;
  11. }

或者在菜单1和菜单2中加也行 ，上下这两种选一个就行，效果差不多

  1. /* 菜單1*/
  2. .el-menu .el-menu-item{
  3.   border-radius: 4px 2px 2px 4px;
  4.   margin-left: 16px;
  5. }
  6. /* 子母菜單2 */
  7. .el-submenu__title{
  8.   border-radius: 4px 2px 2px 4px;
  9.   margin-left: 16px;
  10. }

 下边距我们都加在菜单中

  1. /* 菜單1 */
  2. .el-menu .el-menu-item{
  3.   margin-bottom: 8px;
  4. }
  5. /* 子母菜單2 */
  6. .el-submenu__title{
  7.   margin-bottom: 8px;
  8. }

效果是这样的 

五、默认背景和字体

我们可以加在菜单1和菜单2里面

  1. /* 菜單,部分樣式在sidebar.scss中 */
  2. .el-menu .el-menu-item{
  3.   background-color: #FBA429 !important;
  4.   color: #000 !important;
  5. }
  6. /* 子母菜單 */
  7. .el-submenu__title{
  8.   background-color: #FBA429 !important;
  9.   color: #000 !important;
  10. }

效果如图

 六、svg图标

svg的颜色是可以随着当前所在块设置的颜色自动切换的

只需要在svg文件里修改path里的颜色值为currentColor

  1. <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  2. <g clip-path="url(#clip0_11243_26828)">
  3. <path d="M19 5V7H15V5H19ZM9 5V11H5V5H9ZM19 13V19H15V13H19ZM9 17V19H5V17H9ZM21 3H13V9H21V3ZM11 3H3V13H11V3ZM21 11H13V21H21V11ZM11 15H3V21H11V15Z" 
  4.     fill="currentColor"/>修改这个fill或者path里的其他颜色
  5. </g>
  6. <defs>
  7. <clipPath id="clip0_11243_26828">
  8. <rect width="24" height="24" fill="white"/>
  9. </clipPath>
  10. </defs>
  11. </svg>

 我们修改一下颜色看看

  1. /* 菜單1*/
  2. .el-menu .el-menu-item{
  3.   background-color: #FBA429 !important;
  4.   color: #fc0303 !important;改成红色
  5. }

效果如图 

完整代码

vue

菜单的vue在这

完整代码

  1. <template>
  2.   <div :class="{'has-logo':showLogo}">
  3.     <logo v-if="showLogo" :collapse="isCollapse" />
  4.     <el-scrollbar wrap-class="scrollbar-wrapper">
  5.       <el-menu
  6.         :default-active="activeMenu"
  7.         :collapse="isCollapse"
  8.         :background-color="variables.menuBg"
  9.         :text-color="variables.menuText"
  10.         :unique-opened="false"
  11.         :active-text-color="variables.menuActiveText"
  12.         :collapse-transition="false"
  13.         mode="vertical"
  14.         class="el-menu-vertical-demo"
  15.         
  16.       ><!--頂部菜單邊距 -->
  17.         <sidebar-item
  18.           v-for="route in routes"
  19.           :key="route.path"
  20.           :item="route"
  21.           :base-path="route.path"
  22.           class="sidebar-item"
  23.            
  24.         /><!--菜單邊距 -->
  25.       </el-menu>
  26.     </el-scrollbar>
  27.   </div>
  28. </template>
  29.  
  30. <script>
  31. import { mapGetters } from 'vuex'
  32. import Logo from './Logo'
  33. import SidebarItem from './SidebarItem'
  34. import variables from '@/styles/variables.scss'
  35.  
  36. export default {
  37.   components: { SidebarItem, Logo },
  38.   computed: {
  39.     ...mapGetters([
  40.       'sidebar',
  41.       'rules'
  42.     ]),
  43.     routes() {
  44.       // return this.$router.options.routes
  45.       //console.log(this.rules);  
  46.       return this.rules
  47.     },
  48.     activeMenu() {
  49.       const route = this.$route
  50.       const { meta, path } = route
  51.       // if set path, the sidebar will highlight the path you set
  52.       if (meta.activeMenu) {
  53.         return meta.activeMenu
  54.       }
  55.       return path
  56.     },
  57.     showLogo() {
  58.       return this.$store.state.settings.sidebarLogo
  59.     },
  60.     variables() {
  61.       return variables
  62.     },
  63.     isCollapse() {
  64.       return !this.sidebar.opened
  65.     }
  66.   }
  67. }
  68. </script>
  69. <style>
  70.  
  71. /* 整体顶边距 */
  72. .el-menu-vertical-demo{
  73.   margin-top: 16px;
  74. }
  75.  
  76. /* 整体左边距 */
  77. .sidebar-item{
  78.   margin-left: 16px;
  79. }
  80.  
  81. /* 菜單,部分樣式在sidebar.scss中 */
  82. .el-menu .el-menu-item{
  83.   border-radius: 4px 2px 2px 4px;
  84.   margin-bottom: 8px;
  85. }
  86. /* 子母菜單 */
  87. .el-submenu__title{
  88.   border-radius: 4px 2px 2px 4px;
  89.   margin-bottom: 8px;
  90. }
  91. /* 取消最小邊距造成的顯示不全,跟css裏的.el-submenu .el-menu-item有關 */
  92. .el-submenu .el-menu-item{
  93.   min-width: 190px !important;
  94. }
  95. /* 菜單被選中的背景色 */
  96. .el-menu .el-menu-item.is-active {
  97.   background-color: #FFEFD7 !important;
  98.   color: #0E0F0F !important;
  99.   border-right: 3px solid var(--primary-dark, #FBA429);
  100. }
  101.  
  102. /* 菜單鼠標懸浮的背景色,會被選中樣式覆蓋.如果需要懸浮樣式覆蓋選擇樣式,在css文件裏找到el-submenu__title啟用&:hover，並註釋掉此樣式,並啟用選中樣式. */
  103. .el-menu-item:hover {
  104.   background-color: #ffffff !important;
  105.   color: #0E0F0F !important;
  106. }
  107.  
  108. /* 子母菜單*/
  109. .el-submenu__title:hover {
  110.   background-color: #ffffff !important;
  111.   color: #0E0F0F !important;
  112. }
  113.  
  114. .el-menu-item:active {
  115.   background-color: #FFEFD7 !important;
  116.   color: #0E0F0F !important;
  117. }
  118.  
  119.  
  120. </style>

css样式

  1. #app {
  2.  
  3.   .main-container {
  4.     min-height: 100%;
  5.     transition: margin-left .28s;
  6.     margin-left: $sideBarWidth;
  7.     position: relative;
  8.   }
  9.  
  10.   .sidebar-container {
  11.     transition: width 0.28s;
  12.     width: $sideBarWidth !important;
  13.     background-color: $menuBg;
  14.     height: 100%;
  15.     position: fixed;
  16.     font-size: 0px;
  17.     top: 0;
  18.     bottom: 0;
  19.     left: 0;
  20.     z-index: 1001;
  21.     overflow: hidden;
  22.  
  23.     // reset element-ui css
  24.     .horizontal-collapse-transition {
  25.       transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
  26.     }
  27.  
  28.     .scrollbar-wrapper {
  29.       overflow-x: hidden !important;
  30.     }
  31.  
  32.     .el-scrollbar__bar.is-vertical {
  33.       right: 0px;
  34.     }
  35.  
  36.     .el-scrollbar {
  37.       height: 100%;
  38.     }
  39.  
  40.     &.has-logo {
  41.       .el-scrollbar {
  42.         height: calc(100% - 50px);
  43.       }
  44.     }
  45.  
  46.     .is-horizontal {
  47.       display: none;
  48.     }
  49.  
  50.     a {
  51.       display: inline-block;
  52.       width: 100%;
  53.       overflow: hidden;
  54.     }
  55.  
  56.     .svg-icon {
  57.       margin-right: 16px;
  58.     }
  59.  
  60.     .sub-el-icon {
  61.       margin-right: 12px;
  62.       margin-left: -2px;
  63.     }
  64.  
  65.     .el-menu {
  66.       border: none;
  67.       height: 100%;
  68.       width: 100% !important;
  69.     }
  70.  
  71.     // menu hover
  72.     .submenu-title-noDropdown,
  73.     .el-submenu__title {
  74.       // 菜單的鼠標懸浮字體顏色和背景色,這裏可以覆蓋菜單被選中時的顏色。
  75.       // &:hover {
  76.       //   background-color: #ffffff !important;
  77.       //   color: #0E0F0F !important;
  78.       // }
  79.  
  80.       // &:focus {
  81.       //   background-color: #FFEFD7 !important; /* 下拉子菜单选中时背景色，會和點擊衝突 */
  82.       //   color: #0E0F0F !important;
  83.       // }
  84.     }
  85.  
  86.     .is-active>.el-submenu__title {
  87.       //background: #0E0F0F ;//下拉母菜單背景色
  88.       //color: #F7F9FA ;//下拉母菜單字體
  89.     }
  90.  
  91.     & .nest-menu .el-submenu>.el-submenu__title,
  92.     & .el-submenu .el-menu-item {
  93.       min-width: $sideBarWidth;
  94.       //background-color: #0E0F0F !important;//下拉子菜單背景色
  95.       //margin-top: 8px;//下拉子菜單上間距
  96.  
  97.       // &:hover {
  98.       //   background-color: #ffffff !important;//下拉子菜單鼠標懸浮背景色
  99.       //   color: #0E0F0F !important;
  100.       // }
  101.  
  102.       // &:active {
  103.       //   background-color: #FFEFD7 !important;//下拉子菜單鼠標點擊時背景色
  104.       //   color: #0E0F0F !important;
  105.       // }
  106.       
  107.       // &:focus {
  108.       //   background-color: #FFEFD7 !important; /* 下拉子菜单选中时背景色 */
  109.       //   color: #0E0F0F !important;
  110.       // }
  111.     }
  112.   }
  113.  
  114.   .hideSidebar {
  115.     .sidebar-container {
  116.       width: 54px !important;
  117.     }
  118.  
  119.     .main-container {
  120.       margin-left: 54px;
  121.     }
  122.  
  123.     .submenu-title-noDropdown {
  124.       padding: 0 !important;
  125.       position: relative;
  126.  
  127.       .el-tooltip {
  128.         padding: 0 !important;
  129.  
  130.         .svg-icon {
  131.           margin-left: 13px;
  132.         }
  133.  
  134.         .sub-el-icon {
  135.           margin-left: 19px;
  136.         }
  137.       }
  138.     }
  139.  
  140.     .el-submenu {
  141.       overflow: hidden;
  142.  
  143.       &>.el-submenu__title {
  144.         padding: 0 !important;
  145.  
  146.         .svg-icon {
  147.           margin-left: 13px;
  148.         }
  149.  
  150.         .sub-el-icon {
  151.           margin-left: 19px;
  152.         }
  153.  
  154.         .el-submenu__icon-arrow {
  155.           display: none;
  156.         }
  157.       }
  158.     }
  159.  
  160.     .el-menu--collapse {
  161.       .el-submenu {
  162.         &>.el-submenu__title {
  163.           &>span {
  164.             height: 0;
  165.             width: 0;
  166.             overflow: hidden;
  167.             visibility: hidden;
  168.             display: inline-block;
  169.           }
  170.         }
  171.       }
  172.     }
  173.   }
  174.  
  175.   .el-menu--collapse .el-menu .el-submenu {
  176.     min-width: $sideBarWidth !important;
  177.   }
  178.  
  179.   // mobile responsive
  180.   .mobile {
  181.     .main-container {
  182.       margin-left: 0px;
  183.     }
  184.  
  185.     .sidebar-container {
  186.       transition: transform .28s;
  187.       width: $sideBarWidth !important;
  188.     }
  189.  
  190.     &.hideSidebar {
  191.       .sidebar-container {
  192.         pointer-events: none;
  193.         transition-duration: 0.3s;
  194.         transform: translate3d(-$sideBarWidth, 0, 0);
  195.       }
  196.     }
  197.   }
  198.  
  199.   .withoutAnimation {
  200.  
  201.     .main-container,
  202.     .sidebar-container {
  203.       transition: none;
  204.     }
  205.   }
  206. }
  207.  
  208. // when menu collapsed
  209. .el-menu--vertical {
  210.   &>.el-menu {
  211.     .svg-icon {
  212.       margin-right: 16px;
  213.     }
  214.     .sub-el-icon {
  215.       margin-right: 12px;
  216.       margin-left: -2px;
  217.     }
  218.   }
  219.  
  220.   .nest-menu .el-submenu>.el-submenu__title,
  221.   .el-menu-item {
  222.     margin: 8px;//右拉子菜單邊距
  223.     &:hover {
  224.       // you can use $subMenuHover
  225.       // background-color: $menuHover !important;
  226.       background-color: #ffffff !important;//右拉子菜單鼠標懸浮背景色
  227.       color: #0E0F0F !important;
  228.     }
  229.   }
  230.  
  231.   // the scroll bar appears when the subMenu is too long
  232.   >.el-menu--popup {
  233.     max-height: 100vh;
  234.     overflow-y: auto;
  235.  
  236.     &::-webkit-scrollbar-track-piece {
  237.       background: #d3dce6;
  238.     }
  239.  
  240.     &::-webkit-scrollbar {
  241.       width: 6px;
  242.     }
  243.  
  244.     &::-webkit-scrollbar-thumb {
  245.       background: #99a9bf;
  246.       border-radius: 20px;
  247.     }
  248.   }
  249. }

 

svg

这个项目中svg文件在这里

所用到的svg我会放在结尾

路由

 路由我就不放完整的了，给个示例

  1. {
  2.     path: '/Productmanagement',
  3.     component: Layout,
  4.     redirect: '/Productmanagement/coupon',
  5.     name: 'Productmanagement',
  6.     meta: {
  7.       title: '產品管理', icon: 'productManagement',roles:['Authenticated','merchant','ManagementAdmin'] // 角色信息
  8.     },
  9.     children: [
  10.  
  11.       {
  12.         path: 'coupon',//  /Productmanagement/coupon等同於coupon
  13.         name: 'Coupon',
  14.         component: () => import('@/views/coupon/Coupon_classification'),
  15.         meta: {
  16.           title: '優惠券', icon: 'DMIconMaster', roles: ['Authenticated','ManagementAdmin']
  17.         }
  18.       },
  19.       {
  20.         path: 'coupon',
  21.         name: 'Coupon',
  22.         component: () => import('@/views/coupon/merchant/index'),
  23.         meta: {
  24.           title: '優惠券', icon: 'DMIconMaster', roles: ['merchant']
  25.         }
  26.       },
  27.       {
  28.         path: '/Productmanagement/WorkFormEdit/:couponid/:memberid',//  /Productmanagement/coupon等同於coupon,可以不用加上父路徑
  29.         component: () => import('@/views/coupon/edit/index.vue'),
  30.         name: '優惠券詳情',
  31.         hidden: true,
  32.         meta: {
  33.           title: '優惠券詳情',
  34.           activeMenu: '/Productmanagement/coupon'// 指定完全匹配的路径，要加上兩級父路徑/Productmanagement和coupon
  35.         }
  36.       }, 
  37.       {
  38.         path: 'Coupon_classification',
  39.         name: 'Coupon_classification',
  40.         component: () => import('@/views/coupon/couponlist'),
  41.         meta: {
  42.           title: '優惠券分類', icon: 'package', roles: ['Authenticated','ManagementAdmin','merchant']
  43.         }
  44.       },
  45.       
  46.     ]
  47.   },

svg资源

可以最上面的资源下载使用，附带了一些其他的常用svg

仪表板

  1. <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  2. <g clip-path="url(#clip0_11243_26828)">
  3. <path d="M19 5V7H15V5H19ZM9 5V11H5V5H9ZM19 13V19H15V13H19ZM9 17V19H5V17H9ZM21 3H13V9H21V3ZM11 3H3V13H11V3ZM21 11H13V21H21V11ZM11 15H3V21H11V15Z" fill="currentColor"/>
  4. </g>
  5. <defs>
  6. <clipPath id="clip0_11243_26828">
  7. <rect width="24" height="24" fill="white"/>
  8. </clipPath>
  9. </defs>
  10. </svg>

 商户管理

  1. <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  2.   <g clip-path="url(#clip0_17_4493)">
  3.     <path d="M18.36 9L18.96 12H5.04L5.64 9H18.36ZM20 4H4V6H20V4ZM20 7H4L3 12V14H4V20H14V14H18V20H20V14H21V12L20 7ZM6 18V14H12V18H6Z" fill="currentColor"/>
  4.   </g>
  5.   <defs>
  6.     <clipPath id="clip0_17_4493">
  7.       <rect width="24" height="24" fill="white"/>
  8.     </clipPath>
  9.   </defs>
  10. </svg>

 产品管理

  1. <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  2.   <g clip-path="url(#clip0_6_9136)">
  3.     <path d="M2 20H22V16H2V20ZM4 17H6V19H4V17ZM2 4V8H22V4H2ZM6 7H4V5H6V7ZM2 14H22V10H2V14ZM4 11H6V13H4V11Z" fill="currentColor"/>
  4.   </g>
  5.   <defs>
  6.     <clipPath id="clip0_6_9136">
  7.       <rect width="24" height="24" fill="white"/>
  8.     </clipPath>
  9.   </defs>
  10. </svg>

 优惠券

  1. <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  2. <g clip-path="url(#clip0_11243_97850)">
  3. <path d="M22 10V6C22 4.9 21.1 4 20 4H4C2.9 4 2.01 4.9 2.01 6V10C3.11 10 4 10.9 4 12C4 13.1 3.11 14 2 14V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V14C20.9 14 20 13.1 20 12C20 10.9 20.9 10 22 10ZM20 8.54C18.81 9.23 18 10.53 18 12C18 13.47 18.81 14.77 20 15.46V18H4V15.46C5.19 14.77 6 13.47 6 12C6 10.52 5.2 9.23 4.01 8.54L4 6H20V8.54ZM9.07 16L12 14.12L14.93 16L14.04 12.64L16.73 10.44L13.26 10.23L12 7L10.73 10.22L7.26 10.43L9.95 12.63L9.07 16Z" fill="currentColor"/>
  4. </g>
  5. <defs>
  6. <clipPath id="clip0_11243_97850">
  7. <rect width="24" height="24" fill="white"/>
  8. </clipPath>
  9. </defs>
  10. </svg>

 优惠券分类

  1. <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  2.   <g clip-path="url(#clip0_6_16165)">
  3.     <path d="M22 9.00002H17.21L12.83 2.44002C12.64 2.16002 12.32 2.02002 12 2.02002C11.68 2.02002 11.36 2.16002 11.17 2.45002L6.79 9.00002H2C1.45 9.00002 1 9.45002 1 10C1 10.09 1.01 10.18 1.04 10.27L3.58 19.54C3.81 20.38 4.58 21 5.5 21H18.5C19.42 21 20.19 20.38 20.43 19.54L22.97 10.27L23 10C23 9.45002 22.55 9.00002 22 9.00002ZM12 4.80002L14.8 9.00002H9.2L12 4.80002ZM18.5 19L5.51 19.01L3.31 11H20.7L18.5 19ZM12 13C10.9 13 10 13.9 10 15C10 16.1 10.9 17 12 17C13.1 17 14 16.1 14 15C14 13.9 13.1 13 12 13Z" fill="currentColor"/>
  4.   </g>
  5.   <defs>
  6.     <clipPath id="clip0_6_16165">
  7.       <rect width="24" height="24" fill="white"/>
  8.     </clipPath>
  9.   </defs>
  10. </svg>

 会员管理

  1. <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  2.   <g clip-path="url(#clip0_6_15991)">
  3.     <path d="M9 12C10.93 12 12.5 10.43 12.5 8.5C12.5 6.57 10.93 5 9 5C7.07 5 5.5 6.57 5.5 8.5C5.5 10.43 7.07 12 9 12ZM9 7C9.83 7 10.5 7.67 10.5 8.5C10.5 9.33 9.83 10 9 10C8.17 10 7.5 9.33 7.5 8.5C7.5 7.67 8.17 7 9 7ZM9.05 17H4.77C5.76 16.5 7.47 16 9 16C9.11 16 9.23 16.01 9.34 16.01C9.68 15.28 10.27 14.68 10.98 14.2C10.25 14.07 9.56 14 9 14C6.66 14 2 15.17 2 17.5V19H9V17.5C9 17.33 9.02 17.16 9.05 17ZM16.5 14.5C14.66 14.5 11 15.51 11 17.5V19H22V17.5C22 15.51 18.34 14.5 16.5 14.5ZM17.71 12.68C18.47 12.25 19 11.44 19 10.5C19 9.12 17.88 8 16.5 8C15.12 8 14 9.12 14 10.5C14 11.44 14.53 12.25 15.29 12.68C15.65 12.88 16.06 13 16.5 13C16.94 13 17.35 12.88 17.71 12.68Z" fill="currentColor"/>
  4.   </g>
  5.   <defs>
  6.     <clipPath id="clip0_6_15991">
  7.       <rect width="24" height="24" fill="white"/>
  8.     </clipPath>
  9.   </defs>
  10. </svg>

 积分管理

  1. <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  2.   <g clip-path="url(#clip0_17_1710)">
  3.     <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM12.31 11.14C10.54 10.69 9.97 10.2 9.97 9.47C9.97 8.63 10.76 8.04 12.07 8.04C13.45 8.04 13.97 8.7 14.01 9.68H15.72C15.67 8.34 14.85 7.11 13.23 6.71V5H10.9V6.69C9.39 7.01 8.18 7.99 8.18 9.5C8.18 11.29 9.67 12.19 11.84 12.71C13.79 13.17 14.18 13.86 14.18 14.58C14.18 15.11 13.79 15.97 12.08 15.97C10.48 15.97 9.85 15.25 9.76 14.33H8.04C8.14 16.03 9.4 16.99 10.9 17.3V19H13.24V17.33C14.76 17.04 15.96 16.17 15.97 14.56C15.96 12.36 14.07 11.6 12.31 11.14Z" fill="currentColor"/>
  4.   </g>
  5.   <defs>
  6.     <clipPath id="clip0_17_1710">
  7.       <rect width="24" height="24" fill="white"/>
  8.     </clipPath>
  9.   </defs>
  10. </svg>

全局设定

  1. <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  2. <g clip-path="url(#clip0_11243_27121)">
  3. <path d="M7 17H21V19H7V17ZM7 5H21V7H7V5ZM7 11H21V13H7V11Z" fill="currentColor" stroke="currentColor" stroke-width="2"/>
  4. </g>
  5. <defs>
  6. <clipPath id="clip0_11243_27121">
  7. <rect width="24" height="24" fill="white"/>
  8. </clipPath>
  9. </defs>
  10. </svg>

地区

  1. <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  2.   <g clip-path="url(#clip0_17_4548)">
  3.     <path d="M20.5 3L20.34 3.03L15 5.1L9 3L3.36 4.9C3.15 4.97 3 5.15 3 5.38V20.5C3 20.78 3.22 21 3.5 21L3.66 20.97L9 18.9L15 21L20.64 19.1C20.85 19.03 21 18.85 21 18.62V3.5C21 3.22 20.78 3 20.5 3ZM10 5.47L14 6.87V18.53L10 17.13V5.47ZM5 6.46L8 5.45V17.15L5 18.31V6.46ZM19 17.54L16 18.55V6.86L19 5.7V17.54Z" fill="currentColor"/>
  4.   </g>
  5.   <defs>
  6.     <clipPath id="clip0_17_4548">
  7.       <rect width="24" height="24" fill="white"/>
  8.     </clipPath>
  9.   </defs>
  10. </svg>

行业类型

  1. <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
  2.   <g clip-path="url(#clip0_17_4557)">
  3.     <path d="M14 5V19H10V5H14ZM20 3H18V5H16V3H8V5H6V3H4V21H6V19H8V21H16V19H18V21H20V3ZM16 9V7H18V9H16ZM6 9V7H8V9H6ZM16 13V11H18V13H16ZM6 13V11H8V13H6ZM16 17V15H18V17H16ZM6 17V15H8V17H6Z" fill="currentColor"/>
  4.   </g>
  5.   <defs>
  6.     <clipPath id="clip0_17_4557">
  7.       <rect width="24" height="24" fill="white"/>
  8.     </clipPath>
  9.   </defs>
  10. </svg>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/113134
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号