Browse Source

fix: demo 例子优化

lilinsen 5 years ago
parent
commit
01f890974a
2 changed files with 21 additions and 14 deletions
  1. 12 11
      src/packages/radio/demo.vue
  2. 9 3
      src/packages/radio/radio.scss

+ 12 - 11
src/packages/radio/demo.vue

@@ -47,9 +47,9 @@
            <div class="cell-reslout"> 选择结果 {{resloutdemo1}}: {{labelReslut3}}</div> 
         </div>
       <h4>按钮样式</h4>
-    <nut-cell>
-        <span slot="title">        
-          <radio-group 
+    <div class="demo-cell">     
+          <div class="test-button-box">
+            <radio-group 
             :list="labelList2"
             :name="'test'"
             :styleType="'label'"
@@ -60,11 +60,9 @@
             :reslout-attr="resloutdemo1"   
             v-model="labelReslut"                 
           />
-        </span>
-      </nut-cell>
-      <nut-cell>
-        <span slot="title"> 选择结果 {{resloutdemo1}}: {{labelReslut}}</span>
-      </nut-cell>
+          </div>
+          <div class="cell-reslout"> 选择结果 {{resloutdemo1}}: {{labelReslut}}</div> 
+      </div>     
   </div>
 </template>
 
@@ -165,11 +163,14 @@ export default {
 	}
 }
 .demo-cell{
-  background: #fff;
-  padding:0 20px;
+  background: #fff;  
 }
 .cell-reslout{
-  padding:20px 0;
+  border-top: 1px solid #E6E6E6;
+  padding:20px 20px;
   font-size: 15px;
 }
+.test-button-box{
+  padding:18px 20px;
+}
 </style>

+ 9 - 3
src/packages/radio/radio.scss

@@ -20,6 +20,11 @@
 	flex-direction:row-reverse;
 	justify-content: flex-end;
 	position: relative;
+	padding:0 20px;
+	border-bottom: 1px solid #E6E6E6;
+	&:last-child{
+		border-bottom:	none;
+	}
 	.box-border{
 		box-sizing: border-box;
 		width: 24px;
@@ -54,8 +59,8 @@
 	line-height: 28px;
 	height: 28px;	
 	position: relative;
-	font-size: 14px;	
-	padding:0 15px;
+	font-size: 14px;
+	width: 82px;
 	cursor: pointer;
 	label{
 		display: inline-block;		
@@ -113,8 +118,9 @@
 	align-items: center;
 	border-bottom: 1px solid #E6E6E6;
 	position: relative;
+	padding: 0 20px;
 	&:last-child{
-		// border-bottom:	none;
+		border-bottom:	none;
 	}
 	input{
 		top: 0;