Commit 00a14ff4 by Sendya

fixed: style

parent e1c3f305
<template> <template>
<a-layout class="layout"> <a-layout class="layout">
<sider-menu :menus="menus" :theme="menuTheme" v-if="menuMode === 'inline'" :mode="menuMode" :collapsed="!siderOpen || collapsed" :collapsible="true"></sider-menu> <sider-menu
:menus="menus"
:theme="menuTheme"
v-if="menuMode === 'inline'"
:mode="menuMode"
:collapsed="!siderOpen || collapsed"
:collapsible="true"></sider-menu>
<a-layout> <a-layout>
<!-- layout header --> <!-- layout header -->
...@@ -25,7 +31,7 @@ ...@@ -25,7 +31,7 @@
import SiderMenu from '@/components/menu/SiderMenu' import SiderMenu from '@/components/menu/SiderMenu'
import LayoutHeader from './LayoutHeader' import LayoutHeader from './LayoutHeader'
import LayoutFooter from './LayoutFooter' import LayoutFooter from './LayoutFooter'
import {asyncRouterMap} from '@/router/index' import { asyncRouterMap } from '@/router/index'
import { mapState } from 'vuex' import { mapState } from 'vuex'
export default { export default {
...@@ -35,7 +41,7 @@ ...@@ -35,7 +41,7 @@
LayoutHeader, LayoutHeader,
LayoutFooter LayoutFooter
}, },
data() { data () {
return { return {
// light, dark // light, dark
menuTheme: 'light', menuTheme: 'light',
...@@ -45,7 +51,7 @@ ...@@ -45,7 +51,7 @@
menus: [] menus: []
} }
}, },
created() { created () {
this.menus = asyncRouterMap this.menus = asyncRouterMap
}, },
computed: { computed: {
...@@ -54,7 +60,7 @@ ...@@ -54,7 +60,7 @@
}) })
}, },
methods: { methods: {
toggle() { toggle () {
this.collapsed = !this.collapsed; this.collapsed = !this.collapsed;
}, },
} }
...@@ -93,7 +99,6 @@ ...@@ -93,7 +99,6 @@
position: relative; position: relative;
z-index: 10; z-index: 10;
.logo { .logo {
height: 64px; height: 64px;
position: relative; position: relative;
...@@ -124,14 +129,14 @@ ...@@ -124,14 +129,14 @@
&.light { &.light {
background-color: #fff; background-color: #fff;
box-shadow: 2px 0px 8px 0px rgba(29,35,41,0.05); box-shadow: 2px 0px 8px 0px rgba(29, 35, 41, 0.05);
.logo { .logo {
background: #fff; background: #fff;
box-shadow: 1px 1px 0px 0px #e8e8e8; box-shadow: 1px 1px 0px 0px #e8e8e8;
h1 { h1 {
color: #1890ff; color: unset;
} }
} }
...@@ -140,7 +145,6 @@ ...@@ -140,7 +145,6 @@
} }
} }
} }
.header { .header {
......
<template> <template>
<a-layout-sider :class="['sider', isMobile ? null : 'shadow', theme ]" width="256px" :collapsible="collapsible" v-model="collapsed" :trigger="null"> <a-layout-sider :class="['sider', isMobile ? null : 'shadow', theme ]" width="256px" :collapsible="collapsible"
<div class="logo"> v-model="collapsed" :trigger="null">
<router-link :to="{name:'dashboard'}"> <div class="logo">
<img src="~@/assets/logo.svg" alt="logo"> <router-link :to="{name:'dashboard'}">
<h1>Ant Design Pro</h1> <img src="~@/assets/logo.svg" alt="logo">
</router-link> <h1>Ant Design Pro</h1>
</div> </router-link>
<s-menu :collapsed="collapsed" :menu="menus" :theme="theme" @select="onSelect" :mode="mode" style="padding: 16px 0px;"></s-menu> </div>
</a-layout-sider> <s-menu
:collapsed="collapsed"
:menu="menus"
:theme="theme"
@select="onSelect"
:mode="mode"
style="padding: 16px 0px;"></s-menu>
</a-layout-sider>
</template> </template>
<script> <script>
import ALayoutSider from "ant-design-vue/es/layout/Sider" import ALayoutSider from "ant-design-vue/es/layout/Sider"
import SMenu from './index' import SMenu from './index'
export default {
name: "SiderMenu",
components: { ALayoutSider, SMenu },
props: {
mode: {
type: String,
required: false,
default: 'inline'
},
theme: {
type: String,
required: false,
default: 'dark'
},
collapsible: {
type: Boolean,
required: false,
default: false
},
collapsed: {
type: Boolean,
required: false,
default: false
},
menus: {
type: Array,
required: true
}
},
created() {
}, export default {
computed: { name: "SiderMenu",
isMobile () { components: { ALayoutSider, SMenu },
return this.$store.state.app.device !== 'desktop' props: {
} mode: {
}, type: String,
methods: { required: false,
onSelect(obj) { default: 'inline'
this.$emit('menuSelect', obj) },
} theme: {
} type: String,
required: false,
default: 'dark'
},
collapsible: {
type: Boolean,
required: false,
default: false
},
collapsed: {
type: Boolean,
required: false,
default: false
},
menus: {
type: Array,
required: true
}
},
created () {
},
computed: {
isMobile () {
return this.$store.state.app.device !== 'desktop'
}
},
methods: {
onSelect (obj) {
this.$emit('menuSelect', obj)
}
} }
}
</script> </script>
\ No newline at end of file
...@@ -21,7 +21,12 @@ ...@@ -21,7 +21,12 @@
<div> <div>
<a-row :gutter="24"> <a-row :gutter="24">
<a-col :xl="16" :lg="24" :md="24" :sm="24" :xs="24"> <a-col :xl="16" :lg="24" :md="24" :sm="24" :xs="24">
<a-card class="project-list" :loading="loading" style="margin-bottom: 24px;" :bordered="false" title="进行中的项目" <a-card
class="project-list"
:loading="loading"
style="margin-bottom: 24px;"
:bordered="false"
title="进行中的项目"
:body-style="{ padding: 0 }"> :body-style="{ padding: 0 }">
<a slot="extra">全部项目</a> <a slot="extra">全部项目</a>
<div> <div>
...@@ -62,7 +67,13 @@ ...@@ -62,7 +67,13 @@
</a-list> </a-list>
</a-card> </a-card>
</a-col> </a-col>
<a-col style="padding: 0 12px" :xl="8" :lg="24" :md="24" :sm="24" :xs="24"> <a-col
style="padding: 0 12px"
:xl="8"
:lg="24"
:md="24"
:sm="24"
:xs="24">
<a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}"> <a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
<div class="item-group"> <div class="item-group">
<a>操作一</a> <a>操作一</a>
......
...@@ -86,8 +86,8 @@ ...@@ -86,8 +86,8 @@
:data="loadData" :data="loadData"
:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onChange }" :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onChange }"
> >
<template v-for="col in columns" v-if="col.scopedSlots" :slot="col.dataIndex" slot-scope="text, record, index"> <template v-for="(col, index) in columns" v-if="col.scopedSlots" :slot="col.dataIndex" slot-scope="text, record, index">
<div> <div :key="index">
<a-input <a-input
v-if="record.editable" v-if="record.editable"
style="margin: -5px 0" style="margin: -5px 0"
......
...@@ -25,7 +25,6 @@ ...@@ -25,7 +25,6 @@
.result { .result {
text-align: center; text-align: center;
width: 72%; width: 72%;
max-width: 560px;
margin: 0 auto; margin: 0 auto;
padding: 24px 0 8px; padding: 24px 0 8px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment