Selaa lähdekoodia

complete search UI

lybenson 8 vuotta sitten
vanhempi
sitoutus
7ec727a293

+ 1 - 1
src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <TopContainer></TopContainer>
-    <BHeader class="bheader"></BHeader>
+    <BHeader></BHeader>
   </div>
 </template>
 

+ 15 - 1
src/components/common/BHeader.vue

@@ -24,6 +24,13 @@ export default {
     background transparent no-repeat center -10px
     position relative
     margin -42px auto 0
+    &:after
+      content ''
+      display block
+      visibility hidden
+      height 0px
+      clear both
+      font-size 0
     .header-layer
     	height 170px
     .header-link
@@ -40,6 +47,13 @@ export default {
     	height 170px
     	top -170px
     	transition .2s height
+      &:after
+        content ""
+        display block
+        visibility hidden
+        height 0px
+        clear both
+        font-size 0
     	.logo
     		position absolute
     		width 220px
@@ -58,6 +72,6 @@ export default {
     		color #fff
     		border-radius 4px
     		font-size 14px
-    		max-width  350px
+    		max-width 350px
     		transition .2s
 </style>

+ 23 - 0
src/components/common/Menu.vue

@@ -0,0 +1,23 @@
+<template>
+	<div class="menu">
+		<div class="menu-wrapper"></div>
+	</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="stylus" scoped>
+	.menu
+		width 100%
+		background #fff
+		.menu-wrapper
+			position relative
+			width 980px
+			margin 0 auto
+			padding 6px 0
+			z-index 100
+</style>

+ 13 - 0
src/components/common/MenuItem.vue

@@ -0,0 +1,13 @@
+<template>
+	<li></li>
+</template>
+
+<script>
+export default {
+	
+}
+</script>
+
+<style lang="stylus" scoped="">
+	
+</style>

+ 8 - 7
src/components/common/Search.vue

@@ -15,26 +15,26 @@
 	}
 </script>
 
-<style lang="stylus">
+<style lang="stylus" scoped>
 	.search
 		z-index 100
-		width 268px
-		height 32px
-		background red
 		position absolute
 		top calc(170px - (56px - 32px) - 32px)
 		right 0
-		border-radius 6px
+		width 268px
+		height 32px
+		padding 2px 2px 2px 72px
 		background-color rgba(0, 0, 0, 0.12)
-		padding 2px 2px 2px 7px
+		border-radius 6px
 		#searchform
 			background-color rgba(255, 255, 255, 0.88)
 			display block
 			height 32px
 			border-radius 4px
 			transition .2s background-color
+			margin-top 0em
 			.search-keyword
-				float right
+				float left
 				width 200px
 				color #222
 				font-size 12px
@@ -45,6 +45,7 @@
 				border 0
 				box-shadow none
 				background-color transparent
+				outline 0
 			.search-submit
 				display block
 				position absolute