test/vue-pure-admin2
1
0
Fork 0
mirror of https://gitee.com/yiming_chang/vue-pure-admin.git synced 2024-12-02 03:07:37 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: 修改标签页样式

Browse Source
This commit is contained in:
xiaoxian521 2021-06-28 15:40:23 +08:00
parent 3b86ad6fe8
commit 0cc4f2660e
3 changed files with 33 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/layout/components/setting/index.vue
View File

@ -79,8 +79,8 @@ export default {
setup() { setup() {
const router = useRouter(); const router = useRouter();
// 默认卡片模式 // 默认灵动模式
const markValue = ref(storageLocal.getItem("showModel") || "card"); const markValue = ref(storageLocal.getItem("showModel") || "smart");
const logoVal = ref(storageLocal.getItem("logoVal") || "1"); const logoVal = ref(storageLocal.getItem("logoVal") || "1");

7
src/layout/components/sidebar/Logo.vue
View File

@ -42,7 +42,6 @@ export default defineComponent({
position: relative; position: relative;
width: 100%; width: 100%;
height: 50px; height: 50px;
background: #2b2f3a;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
@ -52,15 +51,15 @@ export default defineComponent({
.sidebar-title { .sidebar-title {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
color: #fff; color: #1890ff;
font-weight: 600; font-weight: 600;
line-height: 50px;
font-size: 20px; font-size: 20px;
margin-top: 16px;
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif; font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
} }
.fa-optin-monster { .fa-optin-monster {
font-size: 38px; font-size: 30px;
color: #1890ff; color: #1890ff;
margin-top: 5px; margin-top: 5px;
} }

51
src/layout/components/tag/index.vue
View File

@ -5,17 +5,17 @@
v-for="(item, index) in dynamicTagList" v-for="(item, index) in dynamicTagList"
:key="index" :key="index"
:ref="'dynamic' + index" :ref="'dynamic' + index"
:class="['scroll-item', $route.path === item.path ? 'is-active' : '', $route.path === item.path && showModel ==='card' ? 'card-active' : '' ]" :class="['scroll-item is-closable', $route.path === item.path ? 'is-active' : '', $route.path === item.path && showModel ==='card' ? 'card-active' : '' ]"
@contextmenu.prevent.native="openMenu(item, $event)" @contextmenu.prevent.native="openMenu(item, $event)"
@mouseenter.prevent="onMouseenter(item, index)" @mouseenter.prevent="onMouseenter(item, index)"
@mouseleave.prevent="onMouseleave(item, index)" @mouseleave.prevent="onMouseleave(item, index)"
> >
<router-link :to="item.path">{{ $t(item.meta.title) }}</router-link> <router-link :to="item.path">{{ $t(item.meta.title) }}</router-link>
<i <span
v-if="$route.path === item.path && index !== 0 || index === activeIndex && index !== 0" v-if="$route.path === item.path && index !== 0 || index === activeIndex && index !== 0"
class="iconfont team-iconshanchu" class="el-icon-close"
@click="deleteMenu(item)" @click="deleteMenu(item)"
></i> ></span>
<div <div
:ref="'schedule' + index" :ref="'schedule' + index"
v-if="showModel !=='card'" v-if="showModel !=='card'"
@ -150,8 +150,8 @@ export default {
} }
]); ]);
// 显示模式，默认卡片模式显示 // 显示模式，默认灵动模式显示
const showModel = ref(storageLocal.getItem("showModel") || "card"); const showModel = ref(storageLocal.getItem("showModel") || "smart");
if (!showModel) { if (!showModel) {
storageLocal.setItem("showModel", "card"); storageLocal.setItem("showModel", "card");
} }
@ -435,18 +435,36 @@ export default {
font-size: 14px; font-size: 14px;
display: flex; display: flex;
box-shadow: 0 0 1px #888888; box-shadow: 0 0 1px #888888;
.scroll-item { .scroll-item {
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
padding: 2px 8px; padding: 2px 6px;
display: inline-block; display: inline-block;
position: relative; position: relative;
margin-right: 5px; margin-right: 4px;
height: 28px; height: 28px;
line-height: 25px; line-height: 25px;
&:hover { transition: all 0.4s;
background-color: #eaf4fe;
.el-icon-close {
font-size: 10px;
color: #1890ff;
cursor: pointer;
&:hover {
border-radius: 50%;
color: #fff;
background: #b4bccc;
font-size: 14px;
}
}
&.is-closable:not(:first-child) {
&:hover {
padding-right: 8px;
}
} }
} }
a { a {
text-decoration: none; text-decoration: none;
color: #666; color: #666;
@ -534,19 +552,6 @@ export default {
} }
} }
// 关闭图标
.team-iconshanchu {
color: #1890ff;
cursor: pointer;
font-size: 14px;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.team-iconshanchu:hover {
border-radius: 50%;
color: #fff;
background: #b4bccc;
}
// 卡片模式 // 卡片模式
.card-active { .card-active {
border: 1px solid #1890ff; border: 1px solid #1890ff;