Browse Source

fix: button 视觉走查

shenqistart 5 years ago
parent
commit
17907af7df
1 changed files with 38 additions and 34 deletions
  1. 38 34
      src/packages/button/demo.vue

+ 38 - 34
src/packages/button/demo.vue

@@ -1,5 +1,5 @@
 <template>
 <template>
-  <div>
+  <div class="btn-demo">
     <h4>按钮状态</h4>
     <h4>按钮状态</h4>
     <div class="btn-state">
     <div class="btn-state">
       <nut-button block>默认状态</nut-button>
       <nut-button block>默认状态</nut-button>
@@ -113,51 +113,55 @@ export default {
 </script>
 </script>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>
+.btn-demo {
+  padding: 0 15px;
+}
 .bg {
 .bg {
-	margin: 0 10px;
+  margin: 0 10px;
 }
 }
 
 
 .gap {
 .gap {
-	height: 10px;
+  height: 10px;
 }
 }
 
 
 .white-bg {
 .white-bg {
-	padding: 10px;
-	background: #fff;
+  padding: 10px;
+  background: #fff;
 }
 }
 
 
 .btn-state {
 .btn-state {
-	button {
-		margin-bottom: 10px;
-	}
+  button {
+    margin-bottom: 10px;
+    border-radius: 4px;
+  }
 }
 }
 
 
 .btn-size {
 .btn-size {
-	display: flex;
-	align-items: flex-end;
-	justify-content: space-around;
-	margin-top: 24px;
-
-	&.two {
-		button {
-			width: 168px;
-		}
-	}
-
-	&.three {
-		button {
-			width: 109px;
-		}
-	}
-
-	&.four {
-		button {
-			width: 79px;
-		}
-
-		.middle {
-			padding: 0;
-		}
-	}
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-around;
+  margin-top: 24px;
+
+  &.two {
+    button {
+      width: 168px;
+    }
+  }
+
+  &.three {
+    button {
+      width: 108px;
+    }
+  }
+
+  &.four {
+    button {
+      width: 79px;
+    }
+
+    .middle {
+      padding: 0;
+    }
+  }
 }
 }
 </style>
 </style>