Bladeren bron

no message

lybenson 8 jaren geleden
bovenliggende
commit
752857c549
4 gewijzigde bestanden met toevoegingen van 55 en 16 verwijderingen
  1. 1 2
      src/App.vue
  2. 1 1
      src/components/common/BMenu.vue
  3. 51 7
      src/components/common/BMenuItem.vue
  4. 2 6
      src/components/common/TopContainer.vue

+ 1 - 2
src/App.vue

@@ -19,9 +19,8 @@ export default {
 
 <style lang="stylus">
   #app 
-    font-family "Microsoft YaHei",Arial,Helvetica,sans-serifsans-serif
+    font-family "Microsoft YaHei",Arial,Helvetica,sans-serif
     -webkit-font-smoothing antialiased
-    -moz-osx-font-smoothing grayscale
     font-size 12px
     margin 0
     padding 0

+ 1 - 1
src/components/common/BMenu.vue

@@ -14,7 +14,7 @@ import BMenuItem from 'components/common/BMenuItem'
 export default {
 	data() {
 		return {
-			itemNum: [1, 2, 3, 4, 5]
+			itemNum: [1]
 		}
 	},
 	components: {

+ 51 - 7
src/components/common/BMenuItem.vue

@@ -1,25 +1,69 @@
 <template>
 	<li class="m-i">
-		<a href="">
-			<em>首页</em>
+		<a class="i-link" href="">
+			<em>{{title}}</em>
+			<div class="v-num">
+				<span class="addnew_1">{{num}}</span>
+			</div>
 		</a>
 	</li>
 </template>
 
 <script>
 export default {
-	
+	data() {
+		return {
+			title: '动画',
+			num: '888+'
+		}
+	},
+	props: []
 }
 </script>
 
-<style lang="stylus" scoped>
+<style lang="stylus">
 	.m-i
 		float left
 		position relative
 		font-size  14px
 		display block
 		height 50px
-		em
-			font-style normal
-			font-weight normal
+		a
+			color #222
+			display block
+			&.i-link
+				position relative
+				z-index 10
+				font-size 14px
+			em
+				line-height 50px
+				font-style normal
+				font-weight normal
+				display inline-block
+				vertical-align middle
+				margin 0 11px
+				height 42px
+				padding-top 8px
+		.v-num
+			position absolute
+			top 8px
+			left 0px
+			height 14px
+			width 100%
+			text-align center
+			span
+				position static
+				display inline-block
+				vertical-align top
+				top auto
+				margin-left 0
+				background-color #ffafc9
+				color #fff
+				border-radius 4px
+				height 12px
+				text-align center
+				font-family Calibri,Arial,Helvetica,sans-serifsans-serif
+				font-size 11px
+				min-width 18px
+				padding 1px 3px
 </style>

+ 2 - 6
src/components/common/TopContainer.vue

@@ -80,6 +80,7 @@ export default {
     position relative
     z-index 10000
     .z_top
+      background-color transparent
       height 42px
       background #fff
       box-shadow rgba(0, 0, 0, 0.1) 0 1px 2px
@@ -88,7 +89,7 @@ export default {
       width 100%
       position relative
       z-index 10000
-      font-family "Microsoft YaHei",Arial,Helvetica,sans-serifsans-serif
+      font-family "Microsoft YaHei",Arial,Helvetica,sans-serifsans-serif !important
       color #222
       .i-link
         padding 0 14px
@@ -144,10 +145,6 @@ export default {
           float left
           height 42px
           font-size 12px
-          span
-            font-weight bold
-          a
-            font-weight bold
           li
             .new
               position absolute
@@ -220,7 +217,6 @@ export default {
                       display block
                       margin 0px
                       padding 0px
-                      font-weight 700
                   .s-line
                     display inline-block
                     border-left 1px solid #222