blackteay/vue-antd-admin
1
0
Fork 0
mirror of https://github.com/iczer/vue-antd-admin synced 2025-04-06 04:00:06 +08:00
Code Issues Projects Releases Wiki Activity

fix: style issues with side menu components and drawer components; 🐛

Browse Source 
修复：侧边菜单组件和抽屉组件的样式问题；
This commit is contained in:
iczer 2020-07-02 11:21:51 +08:00
parent 7c23832b18
commit 14f6aebfe1
5 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/menu/SideMenu.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<a-layout-sider :theme="theme" :class="['side', isMobile ? null : 'shadow']" width="256px" :collapsible="collapsible" v-model="collapsed" :trigger="null"> <a-layout-sider :theme="theme" :class="['side-menu', isMobile ? null : 'shadow']" width="256px" :collapsible="collapsible" v-model="collapsed" :trigger="null">
<div :class="['logo', theme]"> <div :class="['logo', theme]">
<router-link to="/dashboard/workplace"> <router-link to="/dashboard/workplace">
<img src="@/assets/img/logo.png"> <img src="@/assets/img/logo.png">
@ -52,9 +52,10 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.shadow{ .shadow{
box-shadow: 2px 0 6px rgba(0,21,41,.35); box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
} }
.side{ .side-menu{
min-height: 100%;
z-index: 10; z-index: 10;
.logo{ .logo{
height: 64px; height: 64px;

8
src/components/setting/Setting.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<a-layout-sider class="side" width="300"> <div class="side-setting">
<setting-item :title="$t('theme.title')"> <setting-item :title="$t('theme.title')">
<img-checkbox-group @change="values => setTheme(values[0])"> <img-checkbox-group @change="values => setTheme(values[0])">
<img-checkbox :title="$t('theme.dark')" img="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" :checked="true" value="dark"/> <img-checkbox :title="$t('theme.dark')" img="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" :checked="true" value="dark"/>
@ -76,7 +76,7 @@
</a-list> </a-list>
</setting-item> </setting-item>
<a-button id="copyBtn" data-clipboard-text="Sorry, you have copied nothing O(∩_∩)O~" @click="copyCode" style="width: 100%" icon="copy" >{{$t('copy')}}</a-button> <a-button id="copyBtn" data-clipboard-text="Sorry, you have copied nothing O(∩_∩)O~" @click="copyCode" style="width: 100%" icon="copy" >{{$t('copy')}}</a-button>
</a-layout-sider> </div>
</template> </template>
<script> <script>
@ -139,9 +139,9 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.side{ .side-setting{
min-height: 100%;
background-color: #fff; background-color: #fff;
height: 100%;
padding: 24px; padding: 24px;
font-size: 14px; font-size: 14px;
line-height: 1.5; line-height: 1.5;

7
src/components/tool/Drawer.vue
View File

@ -2,7 +2,7 @@
<div > <div >
<div :class="['mask', openDrawer ? 'open' : 'close']" @click="close"></div> <div :class="['mask', openDrawer ? 'open' : 'close']" @click="close"></div>
<div :class="['drawer', placement, openDrawer ? 'open' : 'close']"> <div :class="['drawer', placement, openDrawer ? 'open' : 'close']">
<div ref="drawer" class="content"> <div ref="drawer" class="content beauty-scroll">
<slot></slot> <slot></slot>
</div> </div>
<div v-if="showHandler" :class="['handler-container', placement, openDrawer ? 'open' : 'close']" ref="handler" @click="handle"> <div v-if="showHandler" :class="['handler-container', placement, openDrawer ? 'open' : 'close']" ref="handler" @click="handle">
@ -88,8 +88,8 @@ export default {
} }
.drawer{ .drawer{
position: fixed; position: fixed;
height: 100%;
transition: all 0.5s; transition: all 0.5s;
height: 100vh;
z-index: 100; z-index: 100;
&.left{ &.left{
left: 0px; left: 0px;
@ -119,7 +119,8 @@ export default {
} }
.content{ .content{
display: inline-block; display: inline-block;
height: 100%; height: 100vh;
overflow-y: auto;
} }
.handler-container{ .handler-container{
position: absolute; position: absolute;

1
src/layouts/header/AdminHeader.vue
View File

@ -96,7 +96,6 @@ export default {
background: #fff; background: #fff;
} }
&.dark{ &.dark{
background: #001529;
.trigger{ .trigger{
color: white; color: white;
} }

2
src/utils/themeUtil.js
View File

@ -23,6 +23,8 @@ module.exports = {
}, },
changeSelector (selector) { changeSelector (selector) {
switch (selector) { switch (selector) {
case '.ant-layout-sider':
return '.ant-layout-sider-dark'
case '.ant-calendar-today .ant-calendar-date': case '.ant-calendar-today .ant-calendar-date':
return ':not(.ant-calendar-selected-date):not(.ant-calendar-selected-day)' + selector return ':not(.ant-calendar-selected-date):not(.ant-calendar-selected-day)' + selector
case '.ant-btn:focus,.ant-btn:hover': case '.ant-btn:focus,.ant-btn:hover':