改变navbar小图标样式

This commit is contained in:
朱文强 2023-07-19 16:49:48 +08:00
parent 005143cd2d
commit 7d1e82b818
5 changed files with 41 additions and 14 deletions

View File

@ -599,13 +599,19 @@ img {
display: none; display: none;
} }
& > .el-tabs__item { & > .el-tabs__item {
height: $content--tabs-header-height;
border: 0; border: 0;
padding: 0 10px; padding: 0 10px;
color: rgba(89, 89, 89, 1); margin: 6px 5px 6px 0px;
height: 24px;
font-size: 12px;
line-height: 24px;
border-radius: 5px;
background-color: rgba(239, 239, 239, 1);
&:focus, &:focus,
&:hover, &:hover,
&.is-active { &.is-active {
color: rgba(255, 255, 255, 1);
background-color: rgba(62, 142, 247, 1);
&:after { &:after {
display: block; display: block;
} }

12
src/icons/svg/首页.svg Normal file
View File

@ -0,0 +1,12 @@
<?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="页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="icon" transform="translate(-506.000000, -176.000000)" fill-rule="nonzero">
<g id="首页" transform="translate(506.000000, 176.000000)">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="24" height="24"></rect>
<path d="M11.1710783,2.42919989 C11.7298936,2.09409047 12.4328291,2.12455473 12.9654367,2.52059014 L12.9654367,2.52059014 L20.3218013,7.99000647 L20.4665209,8.10559268 C21.0744501,8.62656431 21.4302636,9.40344805 21.4302636,10.227099 L21.4302636,10.227099 L21.4302636,19.0470569 L21.4250327,19.2212289 C21.3382831,20.6611171 20.1833875,21.8011882 18.7715031,21.8011882 L18.7715031,21.8011882 L5.2284969,21.8011882 L5.06035624,21.7957697 C3.67032883,21.7059084 2.56973638,20.5095861 2.56973638,19.0470569 L2.56973638,19.0470569 L2.56973638,10.2273587 L2.57600507,10.0381789 C2.63012926,9.22282649 3.03207443,8.47038558 3.67819781,7.99000711 L3.67819781,7.99000711 L11.034559,2.52059336 Z M12.0713092,3.55793652 C11.9772762,3.53774358 11.8769764,3.55793433 11.7954857,3.6185066 L11.7954857,3.6185066 L4.43911542,9.0879271 L4.32641124,9.18150853 C4.04059293,9.44596068 3.87451485,9.82573182 3.87451485,10.2273587 L3.87451485,10.2273587 L3.87451485,19.0470569 L3.880713,19.1821318 C3.94632222,19.8933667 4.52470053,20.4496068 5.2284969,20.4496068 L5.2284969,20.4496068 L11.2507497,20.4487759 L11.3507364,20.3451977 L11.3512202,14.4627186 L11.3582338,14.3683764 C11.4044406,14.0603828 11.6734228,13.8227675 12,13.8227675 C12.3345637,13.8227675 12.6123182,14.0734451 12.6454705,14.3976012 L12.6454705,14.3976012 L12.6489183,14.4681588 L12.6487364,20.3451881 L12.7487231,20.4487759 L18.7714898,20.4496068 L18.9018895,20.4431864 C19.5885066,20.3752237 20.1254851,19.7760987 20.1254851,19.0470569 L20.1254851,19.0470569 L20.1254851,10.2273587 L20.1177907,10.0779557 C20.0769951,9.68325297 19.8759128,9.32208831 19.5608746,9.08791971 L19.5608746,9.08791971 L12.2045243,3.61851399 L12.1402672,3.58065321 Z" id="形状结合" fill="#000"></path>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

@ -2,7 +2,7 @@
* @Author: zwq * @Author: zwq
* @Date: 2023-01-04 10:29:39 * @Date: 2023-01-04 10:29:39
* @LastEditors: zwq * @LastEditors: zwq
* @LastEditTime: 2023-01-05 16:14:45 * @LastEditTime: 2023-07-19 16:33:56
* @Description: * @Description:
*/ */
import Vue from 'vue' import Vue from 'vue'
@ -28,11 +28,11 @@ export default new Vuex.Store({
contentIsNeedRefresh: false, contentIsNeedRefresh: false,
// 内容, 标签页(默认添加首页) // 内容, 标签页(默认添加首页)
contentTabs: [ contentTabs: [
{ // {
...window.SITE_CONFIG['contentTabDefault'], // ...window.SITE_CONFIG['contentTabDefault'],
'name': 'home', // 'name': 'home',
'title': '首页' // 'title': '首页'
} // }
], ],
contentTabsActiveName: 'home' contentTabsActiveName: 'home'
}, },

View File

@ -1,3 +1,10 @@
<!--
* @Author: zwq
* @Date: 2023-07-13 15:31:21
* @LastEditors: zwq
* @LastEditTime: 2023-07-19 16:34:06
* @Description:
-->
<template> <template>
<main :class="['aui-content', { 'aui-content--tabs': $route.meta.isTab }]"> <main :class="['aui-content', { 'aui-content--tabs': $route.meta.isTab }]">
<!-- tab展示内容 --> <!-- tab展示内容 -->
@ -16,11 +23,13 @@
:key="item.name" :key="item.name"
:name="item.name" :name="item.name"
:label="item.title" :label="item.title"
:closable="item.name !== 'home'" closable
:class="{ 'is-iframe': tabIsIframe(item.iframeURL) }"> :class="{ 'is-iframe': tabIsIframe(item.iframeURL) }">
<template v-if="item.name === 'home'"> <!-- <template v-if="item.name === 'home'">
<svg slot="label" class="icon-svg aui-content--tabs-icon-nav" aria-hidden="true"><use xlink:href="#icon-home"></use></svg> <svg slot="label" class="icon-svg aui-content--tabs-icon-nav" aria-hidden="true">
</template> <use xlink:href="#首页"></use>
</svg>
</template> -->
<iframe v-if="tabIsIframe(item.iframeURL)" :src="item.iframeURL" width="100%" height="100%" frameborder="0" scrolling="yes"></iframe> <iframe v-if="tabIsIframe(item.iframeURL)" :src="item.iframeURL" width="100%" height="100%" frameborder="0" scrolling="yes"></iframe>
<!-- <keep-alive > --> <!-- <keep-alive > -->
<router-view v-if="item.name === $store.state.contentTabsActiveName" /> <router-view v-if="item.name === $store.state.contentTabsActiveName" />

View File

@ -2,7 +2,7 @@
* @Author: zwq * @Author: zwq
* @Date: 2022-08-22 14:57:51 * @Date: 2022-08-22 14:57:51
* @LastEditors: zwq * @LastEditors: zwq
* @LastEditTime: 2023-07-14 15:53:17 * @LastEditTime: 2023-07-19 09:27:53
* @Description: * @Description:
--> -->
<template> <template>
@ -36,7 +36,7 @@
<el-menu-item index="6" @click="$router.push({ name: 'home' })"> <el-menu-item index="6" @click="$router.push({ name: 'home' })">
<svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"> <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true">
<use xlink:href="#icon-home"></use> <use xlink:href="#首页"></use>
</svg> </svg>
</el-menu-item> </el-menu-item>
<!-- 中英文 --> <!-- 中英文 -->