From c02809c4afbafd6fadc9e7f632463ec94c683c6f Mon Sep 17 00:00:00 2001 From: Leopoldthecoder Date: Tue, 13 Sep 2016 20:02:33 +0800 Subject: [PATCH 1/2] misc visual updates --- examples/app.vue | 2 +- examples/assets/images/stars.png | Bin 0 -> 4341 bytes examples/components/demo-block.vue | 23 +++++++------ examples/components/footer-nav.vue | 4 +-- examples/components/footer.vue | 27 ++++++---------- examples/components/header.vue | 29 +++++++++++++---- examples/components/side-nav.vue | 36 ++++++++------------- examples/docs/dialog.md | 4 +-- examples/index.template.html | 2 +- examples/nav.config.json | 20 ++++++------ examples/pages/component.vue | 2 -- examples/pages/index.vue | 25 +++++++++++--- examples/pages/nav.vue | 4 +-- packages/theme-default/src/dialog.css | 2 +- packages/theme-default/src/message-box.css | 4 +++ 15 files changed, 103 insertions(+), 81 deletions(-) create mode 100644 examples/assets/images/stars.png diff --git a/examples/app.vue b/examples/app.vue index 8e7a1cf16..c8d3539d5 100644 --- a/examples/app.vue +++ b/examples/app.vue @@ -40,7 +40,7 @@ .container, .page-container { - width: 960px; + width: 1140px; margin: 0 auto; } diff --git a/examples/assets/images/stars.png b/examples/assets/images/stars.png new file mode 100644 index 0000000000000000000000000000000000000000..19a245bb944527b1329f127d2accce24038a6516 GIT binary patch literal 4341 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 group.list).forEach(list => { + this.nav = navConfig[0].children; + navConfig[1].groups.map(group => group.list).forEach(list => { this.nav = this.nav.concat(list); }); - this.nav = this.nav.concat(navConfig[1].children); this.updateNav(); } }; diff --git a/examples/components/footer.vue b/examples/components/footer.vue index f07a77b55..9134f94d3 100644 --- a/examples/components/footer.vue +++ b/examples/components/footer.vue @@ -29,7 +29,7 @@ .footer { height: 120px; background-color: #324057; - color: #fff; + color: #a4aebd; width: 100%; z-index: 1000; margin-top: -120px; @@ -58,10 +58,10 @@ margin: 12px 18px 0 0; line-height: 1; font-size: 12px; - color: #8492a6; + color: #768193; a { - color: #8492a6; + color: #768193; text-decoration: none; } } @@ -99,13 +99,12 @@ display: inline-block; line-height: 32px; text-align: center; - color: #324057; - background-color: #fff; + color: #8D99AB; + background-color: transparent; size: 32px; - border-radius: 50%; - font-size: 22px; + font-size: 32px; + vertical-align: middle; &:hover { - color: #fff; transform: scale(1.2); } } @@ -113,22 +112,14 @@ .doc-icon-weixin { margin-right: 36px; &:hover { - background-color: #26CB72; + color: #fff; } } .doc-icon-github { margin-right: 0; - transform: translateY(8px); - position: relative; - &::before { - position: absolute; - left: 4px; - bottom: -6px; - } &:hover { - transform: translateY(8px) scale(1.2); - background-color: #437AC0; + color: #fff; } } } diff --git a/examples/components/header.vue b/examples/components/header.vue index d147c23df..443f33116 100644 --- a/examples/components/header.vue +++ b/examples/components/header.vue @@ -4,12 +4,11 @@ } .header { height: 80px; - background-color: #20a0ff; + background-color: rgba(32, 160, 255, 1); color: #fff; top: 0; left: 0; width: 100%; - z-index: 1000; line-height: @height; z-index: 100; position: relative; @@ -58,6 +57,7 @@ list-style: none; position: relative; cursor: pointer; + margin-left: 20px; a { text-decoration: none; @@ -77,24 +77,28 @@ } } } - /*.el-menu-item__bar { - background-color: #99d2fc; - }*/ } .header-fixed { position: fixed; top: -80px; - box-shadow: 0px 2px 8px 0px rgba(50,63,87,0.45); + box-shadow: 0 2px 6px 0 rgba(50, 63, 87, 0.25); } .header-hangUp { top: 0; } + .header-home { + position: fixed; + top: 0; + background-color: rgba(32, 160, 255, 0); + }