mirror of
https://github.com/iczer/vue-antd-admin
synced 2025-04-05 19:41:37 +08:00
修复: 修改不分页面布局问题；
This commit is contained in:
iczer
parent
2e9ebf7b1d
commit
5bbe94728e
@ -66,7 +66,6 @@ export default {
|
||||
.chart-trend{
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
.chart-trend-icon{
|
||||
font-size: 12px;
|
||||
&.up{
|
||||
|
||||
@ -104,7 +104,7 @@ export default {
|
||||
margin-right: 16px;
|
||||
}
|
||||
.content{
|
||||
margin-bottom: 16px;
|
||||
/*margin-bottom: 16px;*/
|
||||
flex: auto;
|
||||
}
|
||||
.extra{
|
||||
|
||||
@ -116,7 +116,11 @@ export default {
|
||||
onColorChange (values, colors) {
|
||||
if (colors.length > 0) {
|
||||
let closeMessage = this.$message.info(`您选择了主题色 ${colors}, 正在切换...`)
|
||||
themeUtil.changeThemeColor(colors[0]).then(closeMessage)
|
||||
let _this = this
|
||||
themeUtil.changeThemeColor(colors[0]).then(() => {
|
||||
_this.$store.commit('setting/setThemeColor', colors[0])
|
||||
closeMessage()
|
||||
})
|
||||
}
|
||||
},
|
||||
setTheme (values) {
|
||||
|
||||
@ -75,13 +75,13 @@
|
||||
<style lang="less">
|
||||
.page-toggle-enter-active{
|
||||
position: absolute !important;
|
||||
animation-duration: 0.6s !important;
|
||||
width: calc(100%);
|
||||
animation-duration: 0.8s !important;
|
||||
width: calc(100%) !important;
|
||||
}
|
||||
.page-toggle-leave-active{
|
||||
position: absolute !important;
|
||||
animation-duration: 0.6s !important;
|
||||
width: calc(100%);
|
||||
animation-duration: 0.8s !important;
|
||||
width: calc(100%) !important;
|
||||
}
|
||||
.page-toggle-enter{
|
||||
}
|
||||
|
||||
@ -85,6 +85,7 @@ export default {
|
||||
padding: 0 12px 0 0;
|
||||
-webkit-box-shadow: 0 1px 4px rgba(0,21,41,.08);
|
||||
box-shadow: 0 1px 4px rgba(0,21,41,.08);
|
||||
z-index: 99;
|
||||
position: relative;
|
||||
&.light{
|
||||
background: #fff;
|
||||
|
||||
@ -30,6 +30,7 @@ import GlobalFooter from './GlobalFooter'
|
||||
import Drawer from '../components/tool/Drawer'
|
||||
import SiderMenu from '../components/menu/SiderMenu'
|
||||
import Setting from '../components/setting/Setting'
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
const minHeight = window.innerHeight - 64 - 24 - 122
|
||||
|
||||
@ -52,21 +53,7 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isMobile () {
|
||||
return this.$store.state.setting.isMobile
|
||||
},
|
||||
theme () {
|
||||
return this.$store.state.setting.theme
|
||||
},
|
||||
layout () {
|
||||
return this.$store.state.setting.layout
|
||||
},
|
||||
linkList () {
|
||||
return this.$store.state.setting.footerLinks
|
||||
},
|
||||
copyright () {
|
||||
return this.$store.state.setting.copyright
|
||||
}
|
||||
...mapState('setting', ['isMobile', 'theme', 'layout', 'footerLinks', 'copyright']),
|
||||
},
|
||||
methods: {
|
||||
toggleCollapse () {
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
@contextmenu.native="e => onContextmenu(e)"
|
||||
v-if="multiPage"
|
||||
:active-key="activePage"
|
||||
style="margin-top: -8px; margin-bottom: 8px"
|
||||
:style="`margin: -16px auto 8px; ${layout == 'head' ? 'max-width: 1400px;' : ''}`"
|
||||
:hide-add="true"
|
||||
type="editable-card"
|
||||
@change="changePage"
|
||||
@ -48,7 +48,7 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('setting', ['multiPage', 'animate'])
|
||||
...mapState('setting', ['multiPage', 'animate', 'layout'])
|
||||
},
|
||||
created () {
|
||||
this.pageList.push(this.$route)
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<slot slot="content" name="headerContent"></slot>
|
||||
<div slot="content" v-if="!this.$slots.headerContent && desc">
|
||||
<p style="font-size: 14px;line-height: 1.5;color: rgba(0,0,0,.65)">{{desc}}</p>
|
||||
<div class="link">
|
||||
<div v-if="this.linkList" class="link">
|
||||
<template v-for="(link, index) in linkList">
|
||||
<a :key="index" :href="link.href"><a-icon :type="link.icon" />{{link.title}}</a>
|
||||
</template>
|
||||
@ -54,7 +54,7 @@ export default {
|
||||
margin: -24px -24px 0;
|
||||
}
|
||||
.link{
|
||||
margin-top: 16px;
|
||||
/*margin-top: 16px;*/
|
||||
line-height: 24px;
|
||||
a{
|
||||
font-size: 14px;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-row style="margin: 0 -12px">
|
||||
<a-col :sm="24" :md="12" :xl="6" style="padding: 12px 12px 24px;">
|
||||
<div class="analysis">
|
||||
<a-row :gutter="24">
|
||||
<a-col :sm="24" :md="12" :xl="6">
|
||||
<chart-card title="总销售额" total="￥ 189,345">
|
||||
<a-tooltip title="指标说明" slot="action">
|
||||
<a-icon type="info-circle-o" />
|
||||
@ -13,7 +13,7 @@
|
||||
<div slot="footer">日均销售额<span> ￥234.56</span></div>
|
||||
</chart-card>
|
||||
</a-col>
|
||||
<a-col :sm="24" :md="12" :xl="6" style="padding: 12px 12px 24px;">
|
||||
<a-col :sm="24" :md="12" :xl="6">
|
||||
<chart-card title="总销售额" total="￥ 189,345">
|
||||
<a-tooltip title="指标说明" slot="action">
|
||||
<a-icon type="info-circle-o" />
|
||||
@ -24,7 +24,7 @@
|
||||
<div slot="footer">日访问量<span> 123,4</span></div>
|
||||
</chart-card>
|
||||
</a-col>
|
||||
<a-col :sm="24" :md="12" :xl="6" style="padding: 12px 12px 24px;">
|
||||
<a-col :sm="24" :md="12" :xl="6">
|
||||
<chart-card title="总销售额" total="￥ 189,345">
|
||||
<a-tooltip title="指标说明" slot="action">
|
||||
<a-icon type="info-circle-o" />
|
||||
@ -35,7 +35,7 @@
|
||||
<div slot="footer">转化率 <span>60%</span></div>
|
||||
</chart-card>
|
||||
</a-col>
|
||||
<a-col :sm="24" :md="12" :xl="6" style="padding: 12px 12px 24px;">
|
||||
<a-col :sm="24" :md="12" :xl="6">
|
||||
<chart-card title="运营活动效果" total="73%">
|
||||
<a-tooltip title="指标说明" slot="action">
|
||||
<a-icon type="info-circle-o" />
|
||||
@ -50,7 +50,7 @@
|
||||
</chart-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-card :bordered="false" :body-style="{padding: '24px'}">
|
||||
<a-card style="margin-top: 24px" :bordered="false" :body-style="{padding: '24px'}">
|
||||
<div class="salesCard">
|
||||
<a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
|
||||
<div class="extra-wrap" slot="tabBarExtraContent">
|
||||
|
||||
@ -2,9 +2,10 @@
|
||||
<div>
|
||||
<search-form />
|
||||
<a-list
|
||||
:grid="{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }"
|
||||
:grid="{gutter: 16, xl: 4, lg: 3, md: 3, sm: 2, xs: 1}"
|
||||
style="margin: 0 -8px"
|
||||
>
|
||||
<a-list-item style="padding: 0 12px" :key="n" v-for="n in 12">
|
||||
<a-list-item :key="n" v-for="n in 12" style="padding: 0 8px">
|
||||
<a-card>
|
||||
<a-card-meta title="Angular">
|
||||
<a-avatar slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" size="small" />
|
||||
|
||||
@ -3,8 +3,9 @@
|
||||
<search-form />
|
||||
<a-list
|
||||
:grid='{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }'
|
||||
style="margin: 0 -8px"
|
||||
>
|
||||
<a-list-item :key="n" v-for="n in 8" style="padding: 0 12px">
|
||||
<a-list-item :key="n" v-for="n in 8" style="padding: 0 8px">
|
||||
<a-card>
|
||||
<img slot="cover" src="https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png" height="154"/>
|
||||
<a-card-meta title="Ant Design">
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
import {footerLinks, animates} from '@/config'
|
||||
import {footerLinks, animates, themeColor} from '@/config'
|
||||
export default {
|
||||
namespaced: true,
|
||||
state: {
|
||||
isMobile: false,
|
||||
theme: 'dark',
|
||||
themeColor,
|
||||
layout: 'side',
|
||||
systemName: 'Vue Antd Admin',
|
||||
copyright: '2018 ICZER 工作室出品',
|
||||
@ -30,6 +31,9 @@ export default {
|
||||
},
|
||||
setAnimate (state, animate) {
|
||||
state.animate = animate
|
||||
},
|
||||
setThemeColor (state, color) {
|
||||
state.themeColor = color
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user