Skip to content

A
ant-design-pro-vue
Commit c7a3d904 by Sendya
Options

Fixed sider theme

parent 13424f55
Showing with 141 additions and 124 deletions
src/components/layout/LayoutMain.vue
<template> <template>
<a-layout class="layout"> <a-layout class="layout">
<sider-menu :menus="menus" :collapsed="collapsed" :collapsible="true"></sider-menu> <sider-menu :menus="menus" theme="light" :collapsed="collapsed" :collapsible="true"></sider-menu>
<a-layout> <a-layout>
<!-- layout header --> <!-- layout header -->
...@@ -77,38 +77,58 @@ ...@@ -77,38 +77,58 @@
} }
} }
.logo { .sider {
height: 64px; box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
position: relative; position: relative;
line-height: 64px; z-index: 10;
padding-left: 24px;
-webkit-transition: all .3s;
transition: all .3s;
background: #002140;
overflow: hidden;
img, h1 {
display: inline-block;
vertical-align: middle;
}
img { .logo {
height: 32px; height: 64px;
position: relative;
line-height: 64px;
padding-left: 24px;
-webkit-transition: all .3s;
transition: all .3s;
background: #002140;
overflow: hidden;
img, h1 {
display: inline-block;
vertical-align: middle;
}
img {
height: 32px;
}
h1 {
color: #fff;
font-size: 20px;
margin: 0 0 0 12px;
font-family: "Myriad Pro", "Helvetica Neue", Arial, Helvetica, sans-serif;
font-weight: 600;
}
} }
h1 { &.light {
color: #fff; background-color: #fff;
font-size: 20px; box-shadow: 2px 0px 8px 0px rgba(29,35,41,0.05);
margin: 0 0 0 12px;
font-family: "Myriad Pro", "Helvetica Neue", Arial, Helvetica, sans-serif; .logo {
font-weight: 600; background: #fff;
h1 {
color: #1890ff;
}
}
.ant-menu-light {
border-right-color: transparent;
}
} }
}
.sider {
box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
position: relative;
z-index: 10;
} }
.header { .header {
......
src/components/menu/SiderMenu.vue
<template> <template>
<a-layout-sider :class="['sider', isMobile ? null : 'shadow' ]" width="256px" :collapsible="collapsible" v-model="collapsed" :trigger="null"> <a-layout-sider :class="['sider', isMobile ? null : 'shadow', theme ]" width="256px" :collapsible="collapsible" v-model="collapsed" :trigger="null">
<div class="logo"> <div class="logo">
<router-link :to="{name:'dashboard'}"> <router-link :to="{name:'dashboard'}">
<img src="~@/assets/logo.svg" alt="logo"> <img src="~@/assets/logo.svg" alt="logo">
<h1>Ant Design Pro</h1> <h1>Ant Design Pro</h1>
</router-link> </router-link>
</div> </div>
<s-menu :collapsed="collapsed" :menu="menus" @select="onSelect" style="padding: 16px 0px;"></s-menu> <s-menu :collapsed="collapsed" :menu="menus" :theme="theme" @select="onSelect" style="padding: 16px 0px;"></s-menu>
</a-layout-sider> </a-layout-sider>
</template> </template>
...@@ -17,6 +17,11 @@ ...@@ -17,6 +17,11 @@
name: "SiderMenu", name: "SiderMenu",
components: { ALayoutSider, SMenu }, components: { ALayoutSider, SMenu },
props: { props: {
theme: {
type: String,
required: false,
default: 'dark'
},
collapsible: { collapsible: {
type: Boolean, type: Boolean,
required: false, required: false,
...@@ -46,8 +51,4 @@ ...@@ -46,8 +51,4 @@
} }
} }
} }
</script> </script>
\ No newline at end of file
<style scoped>
</style>
\ No newline at end of file
src/router/index.js
...@@ -249,13 +249,13 @@ export const asyncRouterMap = [ ...@@ -249,13 +249,13 @@ export const asyncRouterMap = [
{ {
path: 'center', path: 'center',
name: 'center', name: 'center',
component: () => import('@/views/user/Index'), component: () => import('@/views/account/Index'),
meta: { title: '个人中心' } meta: { title: '个人中心' }
}, },
{ {
path: 'settings', path: 'settings',
name: 'settings', name: 'settings',
component: () => import('@/views/user/Index'), component: () => import('@/views/account/Index'),
meta: { title: '个人设置' } meta: { title: '个人设置' }
} }
] ]
......
src/views/user/Index.vue → src/views/account/Index.vue
<template> <template>
<layout-main> <page-layout :avatar="avatar">
<div slot="headerContent">
<page-layout :avatar="avatar"> <div class="title">{{ timeFix }}，{{ user.name }}，{{ welcome }}</div>
<div slot="headerContent"> <div>You are not alone.</div>
<div class="title">{{ timeFix }}，{{ user.name }}，{{ welcome }}</div> </div>
<div>You are not alone.</div> <div slot="extra">
</div> <a-row>
<div slot="extra"> <a-col :sm="8" :xs="24">
<a-row> <head-info title="可用节点" content="16" :bordered="true"/>
<a-col :sm="8" :xs="24"> </a-col>
<head-info title="可用节点" content="16" :bordered="true"/> <a-col :sm="8" :xs="24">
</a-col> <head-info title="高级节点" content="7/16" :bordered="true"/>
<a-col :sm="8" :xs="24"> </a-col>
<head-info title="高级节点" content="7/16" :bordered="true"/> <a-col :sm="8" :xs="24">
</a-col> <head-info title="剩余流量" content="2,23Gb"/>
<a-col :sm="8" :xs="24"> </a-col>
<head-info title="剩余流量" content="2,23Gb"/> </a-row>
</a-col> </div>
</a-row>
</div> <a-card :style="{ padding: '0 15%' }">
<a-row :gutter="16">
<a-card :style="{ padding: '0 15%' }"> <a-col :md="24" :lg="8" :style="{ minHeight: '180px' }">
<a-row :gutter="16"> <div class="ant-upload-preview" >
<a-col :md="24" :lg="8" :style="{ minHeight: '180px' }"> <a-icon type="cloud-upload-o" class="upload-icon"/>
<div class="ant-upload-preview" > <div class="mask">
<a-icon type="cloud-upload-o" class="upload-icon"/> <a-icon type="plus" />
<div class="mask">
<a-icon type="plus" />
</div>
<img :src="option.img"/>
</div> </div>
</a-col> <img :src="option.img"/>
<a-col :md="24" :lg="16"> </div>
</a-col>
<a-form layout="vertical"> <a-col :md="24" :lg="16">
<a-form-item
label="昵称" <a-form layout="vertical">
> <a-form-item
<a-input placeholder="给自己起个名字" /> label="昵称"
</a-form-item> >
<a-form-item <a-input placeholder="给自己起个名字" />
label="Bio" </a-form-item>
> <a-form-item
<a-textarea rows="4" placeholder="You are not alone."/> label="Bio"
</a-form-item> >
<a-textarea rows="4" placeholder="You are not alone."/>
<a-form-item </a-form-item>
label="电子邮件"
:required="false" <a-form-item
> label="电子邮件"
<a-input placeholder="exp@admin.com"/> :required="false"
</a-form-item> >
<a-form-item <a-input placeholder="exp@admin.com"/>
label="加密方式" </a-form-item>
:required="false" <a-form-item
> label="加密方式"
<a-select defaultValue="aes-256-cfb"> :required="false"
<a-select-option value="aes-256-cfb">aes-256-cfb</a-select-option> >
<a-select-option value="aes-128-cfb">aes-128-cfb</a-select-option> <a-select defaultValue="aes-256-cfb">
<a-select-option value="chacha20">chacha20</a-select-option> <a-select-option value="aes-256-cfb">aes-256-cfb</a-select-option>
</a-select> <a-select-option value="aes-128-cfb">aes-128-cfb</a-select-option>
</a-form-item> <a-select-option value="chacha20">chacha20</a-select-option>
<a-form-item </a-select>
label="连接密码" </a-form-item>
:required="false" <a-form-item
> label="连接密码"
<a-input placeholder="h3gSbecd"/> :required="false"
</a-form-item> >
<a-form-item <a-input placeholder="h3gSbecd"/>
label="登陆密码" </a-form-item>
:required="false" <a-form-item
> label="登陆密码"
<a-input placeholder="密码"/> :required="false"
</a-form-item> >
<a-input placeholder="密码"/>
<a-form-item> </a-form-item>
<a-button type="primary">提交</a-button>
<a-button style="margin-left: 8px">保存</a-button> <a-form-item>
</a-form-item> <a-button type="primary">提交</a-button>
</a-form> <a-button style="margin-left: 8px">保存</a-button>
</a-form-item>
</a-col> </a-form>
</a-row>
</a-card> </a-col>
</a-row>
</page-layout> </a-card>
</layout-main> </page-layout>
</template> </template>
<script> <script>
......
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