From 13fdf915d7c379c289abd5b4f134aa148aaf1925 Mon Sep 17 00:00:00 2001
From: iczer <1126263215@qq.com>
Date: Mon, 13 Aug 2018 20:54:27 +0800
Subject: [PATCH] fix: some style problem #5
---
src/components/layout/GlobalHeader.vue | 14 +++----
src/components/layout/GlobalLayout.vue | 52 +++++++++++++------------
src/components/layout/HeaderSearch.vue | 5 +--
src/components/layout/HeaderlAvatar.vue | 13 +++++--
4 files changed, 45 insertions(+), 39 deletions(-)
diff --git a/src/components/layout/GlobalHeader.vue b/src/components/layout/GlobalHeader.vue
index 9c71075..844a129 100644
--- a/src/components/layout/GlobalHeader.vue
+++ b/src/components/layout/GlobalHeader.vue
@@ -2,7 +2,7 @@
<a-layout-header class="gloabl-header">
<a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggleCollapse"/>
<div style="float: right">
- <header-search class="header-item"/>
+ <header-search class="header-item" />
<a-tooltip class="header-item" title="帮助文档" placement="bottom" >
<a>
<a-icon type="question-circle-o" />
@@ -50,7 +50,7 @@ export default {
}
</script>
-<style scoped>
+<style lang="less" scoped>
.trigger {
font-size: 20px;
line-height: 64px;
@@ -64,14 +64,14 @@ export default {
}
.header-item{
- margin: 0 12px;
+ padding: 0 12px;
display: inline-block;
height: 100%;
cursor: pointer;
- }
- .header-item i{
- font-size: 16px;
- color: rgba(0,0,0,.65);
+ i{
+ font-size: 16px;
+ color: rgba(0,0,0,.65);
+ }
}
.gloabl-header{
background: #fff;
diff --git a/src/components/layout/GlobalLayout.vue b/src/components/layout/GlobalLayout.vue
index 31efe34..24d59e5 100644
--- a/src/components/layout/GlobalLayout.vue
+++ b/src/components/layout/GlobalLayout.vue
@@ -1,6 +1,6 @@
<template>
<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">
<a href="/">
<img src="static/img/vue-antd-logo.png">
@@ -66,28 +66,32 @@ export default {
}
</script>
-<style scoped>
- .logo{
- height: 64px;
- position: relative;
- line-height: 64px;
- padding-left: 24px;
- -webkit-transition: all .3s;
- transition: all .3s;
- background: #002140;
- overflow: hidden;
- }
- .logo h1{
- color: #fff;
- font-size: 20px;
- margin: 0 0 0 12px;
- font-family: "Myriad Pro","Helvetica Neue",Arial,Helvetica,sans-serif;
- font-weight: 600;
- display: inline-block;
- }
- .logo img{
- width: 32px;
- display: inline-block;
- vertical-align: middle;
+<style lang="less" scoped>
+ .sider{
+ z-index: 10;
+ box-shadow: 2px 0 6px rgba(0,21,41,.35);
+ .logo{
+ height: 64px;
+ position: relative;
+ line-height: 64px;
+ padding-left: 24px;
+ -webkit-transition: all .3s;
+ transition: all .3s;
+ background: #002140;
+ overflow: hidden;
+ h1{
+ color: #fff;
+ font-size: 20px;
+ margin: 0 0 0 12px;
+ font-family: "Myriad Pro","Helvetica Neue",Arial,Helvetica,sans-serif;
+ font-weight: 600;
+ display: inline-block;
+ }
+ img{
+ width: 32px;
+ display: inline-block;
+ vertical-align: middle;
+ }
+ }
}
</style>
diff --git a/src/components/layout/HeaderSearch.vue b/src/components/layout/HeaderSearch.vue
index 421f310..ec7b601 100644
--- a/src/components/layout/HeaderSearch.vue
+++ b/src/components/layout/HeaderSearch.vue
@@ -1,5 +1,5 @@
<template>
- <span class="header-item">
+ <span class="">
<a-icon type="search" style="font-size: 16px; cursor: pointer;" @click="enterSearchMode"/>
<a-auto-complete
ref="input"
@@ -69,7 +69,4 @@ export default {
.fade-leave{
width: 0px;
}
- .header-item{
- margin: 0 12px;
- }
</style>
diff --git a/src/components/layout/HeaderlAvatar.vue b/src/components/layout/HeaderlAvatar.vue
index 24b71bf..3843eff 100644
--- a/src/components/layout/HeaderlAvatar.vue
+++ b/src/components/layout/HeaderlAvatar.vue
@@ -1,7 +1,7 @@
<template>
<a-dropdown style="display: inline-block; height: 100%" >
- <span style="vertical-align: middle; cursor: pointer">
- <a-avatar style="vertical-align: middle;" size="small" shape="circle" :src="currUser.avatar"/>
+ <span style="cursor: pointer">
+ <a-avatar class="avatar" size="small" shape="circle" :src="currUser.avatar"/>
<span>{{currUser.name}}</span>
</span>
<a-menu style="width: 150px" slot="overlay">
@@ -44,6 +44,11 @@ export default {
}
</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>