fix: taro checkbox radio的demo样式优化 (#523)

* fix: checkbox间距调整，官网案例样式调整

* fix: checkbox样式调整

* fix: taro drag

* fix: taro drag doc

* fix: checkbox间距调整

* upd: actionsheet shortpassword taro doc

* fix: password taro upd

* fix: drag taro demo

* fix: taro checkbox radio的demo样式优化

* fix: taro checkbox样式优化

* fix: checkbox h5样式优化

src/packages/__VUE/checkbox/demo.vue

@@ -63,7 +63,7 @@
           <nut-checkbox
             v-model="checkbox9"
             label="1"
-            style="margin: 2px 20px 15px 0"
+            style="margin: 2px 20px 0 0"
             >组合复选框</nut-checkbox
           >
           <nut-checkbox v-model="checkbox10" label="2">组合复选框</nut-checkbox>
@@ -87,7 +87,7 @@
           <nut-checkbox
             v-model="checkbox9"
             label="1"
-            style="margin: 2px 20px 15px 0"
+            style="margin: 2px 20px 0 0"
             >组合复选框</nut-checkbox
           >
           <nut-checkbox v-model="checkbox10" label="2">组合复选框</nut-checkbox>
@@ -194,4 +194,15 @@ export default createDemo({
 .demo-check {
   margin-right: 10px;
 }
+.nut-checkboxgroup {
+  display: flex;
+  flex-wrap: wrap;
+}
+.nut-checkbox {
+  display: flex;
+  margin-right: 20px;
+  .nut-checkbox__label {
+    margin-left: 10px;
+  }
+}
 </style>

src/packages/__VUE/checkbox/index.scss

@@ -1,5 +1,5 @@
 .nut-checkbox {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   &--reverse {
     flex-direction: row-reverse;

src/packages/__VUE/checkbox/index.taro.vue

@@ -131,6 +131,6 @@ export default create({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import 'index.scss';
 </style>

src/packages/__VUE/radio/demo.vue

@@ -17,7 +17,10 @@
           <nut-radio :label="2">单选框2</nut-radio>
         </nut-radiogroup>
       </nut-cell>
-      <nut-cell title="当前选中值" :desc="radioVal" />
+      <nut-cell>
+        <div class="demo-check">当前选中值</div>
+        <div>{{ radioVal }}</div>
+      </nut-cell>
     </nut-cell-group>
 
     <nut-cell-group title="单选框禁用">
@@ -61,7 +64,10 @@
           <nut-radio :label="2">触发事件</nut-radio>
         </nut-radiogroup>
       </nut-cell>
-      <nut-cell title="当前选中值" :desc="radioVal6" />
+      <nut-cell>
+        <div class="demo-check">当前选中值</div>
+        <div>{{ radioVal6 }}</div>
+      </nut-cell>
     </nut-cell-group>
   </div>
 </template>
@@ -101,4 +107,8 @@ export default createDemo({
 });
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.demo-check {
+  margin-right: 10px;
+}
+</style>

src/sites/mobile-taro/vue/src/base/pages/checkbox/index.vue

@@ -14,7 +14,10 @@
           >复选框</nut-checkbox
         >
       </nut-cell>
-      <nut-cell title="当前选中值" :desc="checkbox1" />
+      <nut-cell>
+        <div class="demo-check">当前选中值</div>
+        <div>{{ checkbox1 }}</div>
+      </nut-cell>
     </nut-cell-group>
 
     <nut-cell-group title="禁用状态">
@@ -63,7 +66,10 @@
           <nut-checkbox v-model="checkbox12" label="4">组合复选框</nut-checkbox>
         </nut-checkboxgroup>
       </nut-cell>
-      <nut-cell title="当前选中值" :desc="checkboxgroup1" />
+      <nut-cell>
+        <div class="demo-check">当前选中值</div>
+        <div>{{ checkboxgroup1 }}</div>
+      </nut-cell>
     </nut-cell-group>
     <nut-cell-group title="checkboxGroup禁用">
       <nut-cell>
@@ -87,7 +93,12 @@
         </nut-checkboxgroup>
       </nut-cell>
       <nut-cell>
-        <nut-button type="primary" @click="toggleAll(true)">全选</nut-button>
+        <nut-button
+          type="primary"
+          @click="toggleAll(true)"
+          style="margin: 0 10px 0 0"
+          >全选</nut-button
+        >
         <nut-button type="info" @click="toggleAll(false)">取消</nut-button>
       </nut-cell>
     </nut-cell-group>
@@ -151,4 +162,19 @@ export default {
   }
 };
 </script>
-<style lang="scss"></style>
+<style lang="scss">
+.demo-check {
+  margin-right: 10px;
+}
+.nut-checkboxgroup {
+  display: flex;
+  flex-wrap: wrap;
+}
+.nut-checkbox {
+  display: flex;
+  margin-right: 20px;
+  .nut-checkbox__label {
+    margin-left: 10px;
+  }
+}
+</style>

src/sites/mobile-taro/vue/src/base/pages/radio/index.vue

@@ -17,7 +17,10 @@
           <nut-radio :label="2">单选框2</nut-radio>
         </nut-radiogroup>
       </nut-cell>
-      <nut-cell title="当前选中值" :desc="radioVal" />
+      <nut-cell>
+        <div class="demo-check">当前选中值</div>
+        <div>{{ radioVal }}</div>
+      </nut-cell>
     </nut-cell-group>
 
     <nut-cell-group title="单选框禁用">
@@ -61,7 +64,10 @@
           <nut-radio :label="2">触发事件</nut-radio>
         </nut-radiogroup>
       </nut-cell>
-      <nut-cell title="当前选中值" :desc="radioVal6" />
+      <nut-cell>
+        <div class="demo-check">当前选中值</div>
+        <div>{{ radioVal6 }}</div>
+      </nut-cell>
     </nut-cell-group>
   </div>
 </template>
@@ -98,4 +104,8 @@ export default {
 };
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+.demo-check {
+  margin-right: 10px;
+}
+</style>