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: some style problem #5

Browse Source
This commit is contained in:
iczer 2018-08-13 20:54:27 +08:00
parent c4eaac050c
commit 13fdf915d7
4 changed files with 45 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/layout/GlobalHeader.vue
View File

@ -2,7 +2,7 @@
<a-layout-header class="gloabl-header"> <a-layout-header class="gloabl-header">
<a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggleCollapse"/> <a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggleCollapse"/>
<div style="float: right"> <div style="float: right">
<header-search class="header-item"/> <header-search class="header-item" />
<a-tooltip class="header-item" title="帮助文档" placement="bottom" > <a-tooltip class="header-item" title="帮助文档" placement="bottom" >
<a> <a>
<a-icon type="question-circle-o" /> <a-icon type="question-circle-o" />
@ -50,7 +50,7 @@ export default {
} }
</script> </script>
<style scoped> <style lang="less" scoped>
.trigger { .trigger {
font-size: 20px; font-size: 20px;
line-height: 64px; line-height: 64px;
@ -64,15 +64,15 @@ export default {
} }
.header-item{ .header-item{
margin: 0 12px; padding: 0 12px;
display: inline-block; display: inline-block;
height: 100%; height: 100%;
cursor: pointer; cursor: pointer;
} i{
.header-item i{
font-size: 16px; font-size: 16px;
color: rgba(0,0,0,.65); color: rgba(0,0,0,.65);
} }
}
.gloabl-header{ .gloabl-header{
background: #fff; background: #fff;
padding: 0 12px 0 0; padding: 0 12px 0 0;

14
src/components/layout/GlobalLayout.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<a-layout> <a-layout>
<a-layout-sider width="256px" style="z-index: 10" collapsible v-model="collapsed" :trigger="null"> <a-layout-sider class="sider" width="256px" collapsible v-model="collapsed" :trigger="null">
<div class="logo"> <div class="logo">
<a href="/"> <a href="/">
<img src="static/img/vue-antd-logo.png"> <img src="static/img/vue-antd-logo.png">
@ -66,7 +66,10 @@ export default {
} }
</script> </script>
<style scoped> <style lang="less" scoped>
.sider{
z-index: 10;
box-shadow: 2px 0 6px rgba(0,21,41,.35);
.logo{ .logo{
height: 64px; height: 64px;
position: relative; position: relative;
@ -76,8 +79,7 @@ export default {
transition: all .3s; transition: all .3s;
background: #002140; background: #002140;
overflow: hidden; overflow: hidden;
} h1{
.logo h1{
color: #fff; color: #fff;
font-size: 20px; font-size: 20px;
margin: 0 0 0 12px; margin: 0 0 0 12px;
@ -85,9 +87,11 @@ export default {
font-weight: 600; font-weight: 600;
display: inline-block; display: inline-block;
} }
.logo img{ img{
width: 32px; width: 32px;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
}
}
</style> </style>

5
src/components/layout/HeaderSearch.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<span class="header-item"> <span class="">
<a-icon type="search" style="font-size: 16px; cursor: pointer;" @click="enterSearchMode"/> <a-icon type="search" style="font-size: 16px; cursor: pointer;" @click="enterSearchMode"/>
<a-auto-complete <a-auto-complete
ref="input" ref="input"
@ -69,7 +69,4 @@ export default {
.fade-leave{ .fade-leave{
width: 0px; width: 0px;
} }
.header-item{
margin: 0 12px;
}
</style> </style>

13
src/components/layout/HeaderlAvatar.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<a-dropdown style="display: inline-block; height: 100%" > <a-dropdown style="display: inline-block; height: 100%" >
<span style="vertical-align: middle; cursor: pointer"> <span style="cursor: pointer">
<a-avatar style="vertical-align: middle;" size="small" shape="circle" :src="currUser.avatar"/> <a-avatar class="avatar" size="small" shape="circle" :src="currUser.avatar"/>
<span>{{currUser.name}}</span> <span>{{currUser.name}}</span>
</span> </span>
<a-menu style="width: 150px" slot="overlay"> <a-menu style="width: 150px" slot="overlay">
@ -44,6 +44,11 @@ export default {
} }
</script> </script>
<style scoped> <style lang="less" scoped>
.avatar{
margin: 20px 4px 20px 0;
color: #1890ff;
background: hsla(0,0%,100%,.85);
vertical-align: middle;
}
</style> </style>