fix: 修改loading的style多余的bug&& 增加checkbox的样式类型 (#349)

YpchenLove · 7insummer · commit 6ccdf360463c · 2019-07-07T21:08:26.000+08:00
diff --git a/dist/checkbox/index.js b/dist/checkbox/index.js
@@ -20,6 +20,10 @@ Component({
       type: String,
       value: 'right'
     },
+    type: {
+      type: String,
+      value: 'square'  // square 方形   circle 圆形
+    },
     // checkbox的大小
     size: {
       type: [String, Number],
diff --git a/dist/checkbox/index.wxml b/dist/checkbox/index.wxml
@@ -1,14 +1,14 @@
 <view class="l-class  checkbox-wrapper" catchtap="onCheckBoxChangeTap">
   <label class='label-{{placement}} '>
-    <view wx:if="{{checked}}" class='checkbox' style="background:{{ checked?color:''}}; height:{{size}}rpx; width:{{size}}rpx">
+    <view wx:if="{{checked}}" class='checkbox  checkbox-type-{{ type }}' style="background:{{ checked ? color: '' }}; height:{{size}}rpx; width:{{size}}rpx">
       <image class='checkbox-{{shape==="right"? "right": "circle"}}' src='{{shape==="right"? right: circle}}'></image>
     </view>
-    <view wx:else style='background:{{  disabled? "#ccc":""}};  :;height:{{size}}rpx; width:{{size}}rpx' class='checkbox-unselected  checkbox'>
-        <image class='checkbox-{{shape==="right"? "right": "circle"}}' src='{{shape==="right"? right: circle}}'></image>
+    <view wx:else style='background:{{  disabled? "#ccc":""}};  :;height:{{size}}rpx; width:{{size}}rpx' class='checkbox-unselected  checkbox checkbox-type-{{ type }} '>
+      <image class='checkbox-{{shape==="right"? "right": "circle"}}' src='{{shape === "right"? right: circle}}'></image>
     </view>
     <view wx:if="{{ !custom }}" class="checkbox-title{{disabled? '-disabled': ''}} l-title-class">{{value}}</view>
     <view wx:else class="checkbox-title">
       <slot />
     </view>
   </label>
-</view>
+</view>
diff --git a/dist/checkbox/index.wxss b/dist/checkbox/index.wxss
@@ -1 +1 @@
-.label-left{display:flex;flex-direction:row;align-items:center;color:#333}.label-right{display:flex;flex-direction:row-reverse;align-items:center;color:#333}.checkbox{border-radius:50%;display:flex;flex-direction:row;align-items:center;justify-content:center;margin-right:20rpx}.checkbox-right{width:100%;height:100%}.checkbox-circle{width:100%;height:100%}.checkbox-title{font-size:28rpx;flex:1}.checkbox-title-disabled{font-size:28rpx;flex:1;color:#ccc}.checkbox-unselected{border:1px solid #c4c9d2;box-sizing:border-box}
+.label-left{display:flex;flex-direction:row;align-items:center;color:#333}.label-right{display:flex;flex-direction:row-reverse;align-items:center;color:#333}.checkbox{display:flex;flex-direction:row;align-items:center;justify-content:center;margin-right:20rpx}.checkbox-type-circle{border-radius:50%}.checkbox-type-square{border-radius:8rpx}.checkbox-right{width:100%;height:100%}.checkbox-circle{width:100%;height:100%}.checkbox-title{font-size:28rpx;flex:1}.checkbox-title-disabled{font-size:28rpx;flex:1;color:#ccc}.checkbox-unselected{border:1px solid #c4c9d2;box-sizing:border-box}
diff --git a/dist/input/index.wxss b/dist/input/index.wxss
@@ -1 +1 @@
-.form-item{position:relative;font-size:28rpx;color:#333;width:750rpx;height:88rpx;display:flex;flex-direction:row;align-items:center;padding-right:25rpx;box-sizing:border-box}.row{position:absolute;bottom:0;right:0;height:2rpx;width:730rpx;background:#f3f3f3}.text-require{color:#e23;vertical-align:middle}.form-label{display:flex;flex-direction:row;align-items:center;height:88rpx;padding-left:25rpx;padding-right:15rpx;box-sizing:border-box}.disabled{color:#9a9a9a!important}.mask{position:absolute;z-index:999;height:100%;width:100%}.form-label-right{justify-content:flex-end}.form-label-left{justify-content:flex-start}.input{height:100%;line-height:100%;flex:1}.close{height:30rpx;width:30rpx;background:#ddd;display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:50%;margin-right:20rpx}.pls-class{color:#9a9a9a}
+.form-item{position:relative;font-size:28rpx;color:#333;width:750rpx;height:88rpx;display:flex;flex-direction:row;align-items:center;padding-right:25rpx;box-sizing:border-box}.row{position:absolute;bottom:0;right:0;height:2rpx;width:730rpx;background:#f3f3f3}.text-require{color:#e23;vertical-align:middle}.form-label{display:flex;flex-direction:row;align-items:center;height:88rpx;padding-left:25rpx;padding-right:15rpx;box-sizing:border-box}.disabled{color:#9a9a9a!important}.mask{position:absolute;z-index:999;height:100%;width:100%}.form-label-right{justify-content:flex-end}.form-label-left{justify-content:flex-start}.input{height:100%;line-height:100%;flex:1}.close{height:36rpx;width:36rpx;background:#ddd;display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:50%;margin-right:20rpx}.pls-class{color:#9a9a9a}
diff --git a/dist/loading/index.wxml b/dist/loading/index.wxml
@@ -11,20 +11,20 @@
         <view class="spinner-container container1">
           <view class="circle1  {{type + '-' + size}}" style="background: {{color}}"></view>
           <view class="circle2  {{type + '-' + size}}" style="background: {{color}}"></view>
-          <view class="circle3  {{type + '-'+ size}}" style="background: {{color}}" style="background: {{color}}" style="background: {{color}}"></view>
-          <view class="circle4  {{type + '-'+ size}}" style="background: {{color}}" style="background: {{color}}"></view>
+          <view class="circle3  {{type + '-' + size}}" style="background: {{color}}"></view>
+          <view class="circle4  {{type + '-' + size}}" style="background: {{color}}"></view>
         </view>
         <view class="spinner-container container2">
-          <view class="circle1  {{type + '-'+ size}}" style="background: {{color}}"></view>
-          <view class="circle2  {{type + '-'+ size}}" style="background: {{color}}"></view>
-          <view class="circle3  {{type + '-'  +size}}" style="background: {{color}}"></view>
-          <view class="circle4  {{type + '-'+ size}}" style="background: {{color}}"></view>
+          <view class="circle1  {{type + '-' + size}}" style="background: {{color}}"></view>
+          <view class="circle2  {{type + '-' + size}}" style="background: {{color}}"></view>
+          <view class="circle3  {{type + '-' + size}}" style="background: {{color}}"></view>
+          <view class="circle4  {{type + '-' + size}}" style="background: {{color}}"></view>
         </view>
         <view class="spinner-container container3">
-          <view class="circle1  {{type + '-'+ size}}" style="background: {{color}}"></view>
-          <view class="circle2  {{type + '-'+ size}}" style="background: {{color}}"></view>
-          <view class="circle3  {{type + '-'+ size}}" style="background: {{color}}"></view>
-          <view class="circle4  {{type + '-'+size}}" style="background: {{color}}"></view>
+          <view class="circle1  {{type + '-' + size}}" style="background: {{color}}"></view>
+          <view class="circle2  {{type + '-' + size}}" style="background: {{color}}"></view>
+          <view class="circle3  {{type + '-' + size}}" style="background: {{color}}"></view>
+          <view class="circle4  {{type + '-' + size}}" style="background: {{color}}"></view>
         </view>
       </view>
       <view wx:if="{{ type === 'rotate'}}">
@@ -45,20 +45,20 @@
       <view class="spinner-container container1">
         <view class="circle1  {{type + '-' + size}}" style="background: {{color}}"></view>
         <view class="circle2  {{type + '-' + size}}" style="background: {{color}}"></view>
-        <view class="circle3  {{type + '-'+ size}}" style="background: {{color}}" style="background: {{color}}" style="background: {{color}}"></view>
-        <view class="circle4  {{type + '-'+ size}}" style="background: {{color}}" style="background: {{color}}"></view>
+        <view class="circle3  {{type + '-' + size}}" style="background: {{color}}"></view>
+        <view class="circle4  {{type + '-' + size}}" style="background: {{color}}"></view>
       </view>
       <view class="spinner-container container2">
-        <view class="circle1  {{type + '-'+ size}}" style="background: {{color}}"></view>
-        <view class="circle2  {{type + '-'+ size}}" style="background: {{color}}"></view>
-        <view class="circle3  {{type + '-'  +size}}" style="background: {{color}}"></view>
-        <view class="circle4  {{type + '-'+ size}}" style="background: {{color}}"></view>
+        <view class="circle1  {{type + '-' + size}}" style="background: {{color}}"></view>
+        <view class="circle2  {{type + '-' + size}}" style="background: {{color}}"></view>
+        <view class="circle3  {{type + '-' + size}}" style="background: {{color}}"></view>
+        <view class="circle4  {{type + '-' + size}}" style="background: {{color}}"></view>
       </view>
       <view class="spinner-container container3">
-        <view class="circle1  {{type + '-'+ size}}" style="background: {{color}}"></view>
-        <view class="circle2  {{type + '-'+ size}}" style="background: {{color}}"></view>
-        <view class="circle3  {{type + '-'+ size}}" style="background: {{color}}"></view>
-        <view class="circle4  {{type + '-'+size}}" style="background: {{color}}"></view>
+        <view class="circle1  {{type + '-' + size}}" style="background: {{color}}"></view>
+        <view class="circle2  {{type + '-' + size}}" style="background: {{color}}"></view>
+        <view class="circle3  {{type + '-' + size}}" style="background: {{color}}"></view>
+        <view class="circle4  {{type + '-' + size}}" style="background: {{color}}"></view>
       </view>
     </view>
     <view wx:if="{{ type === 'rotate'}}">
diff --git a/examples/dist/checkbox/index.js b/examples/dist/checkbox/index.js
@@ -20,6 +20,10 @@ Component({
       type: String,
       value: 'right'
     },
+    type: {
+      type: String,
+      value: 'square'  // square 方形   circle 圆形
+    },
     // checkbox的大小
     size: {
       type: [String, Number],
diff --git a/examples/dist/checkbox/index.wxml b/examples/dist/checkbox/index.wxml
@@ -1,14 +1,14 @@
 <view class="l-class  checkbox-wrapper" catchtap="onCheckBoxChangeTap">
   <label class='label-{{placement}} '>
-    <view wx:if="{{checked}}" class='checkbox' style="background:{{ checked?color:''}}; height:{{size}}rpx; width:{{size}}rpx">
+    <view wx:if="{{checked}}" class='checkbox  checkbox-type-{{ type }}' style="background:{{ checked ? color: '' }}; height:{{size}}rpx; width:{{size}}rpx">
       <image class='checkbox-{{shape==="right"? "right": "circle"}}' src='{{shape==="right"? right: circle}}'></image>
     </view>
-    <view wx:else style='background:{{  disabled? "#ccc":""}};  :;height:{{size}}rpx; width:{{size}}rpx' class='checkbox-unselected  checkbox'>
-        <image class='checkbox-{{shape==="right"? "right": "circle"}}' src='{{shape==="right"? right: circle}}'></image>
+    <view wx:else style='background:{{  disabled? "#ccc":""}};  :;height:{{size}}rpx; width:{{size}}rpx' class='checkbox-unselected  checkbox checkbox-type-{{ type }} '>
+      <image class='checkbox-{{shape==="right"? "right": "circle"}}' src='{{shape === "right"? right: circle}}'></image>
     </view>
     <view wx:if="{{ !custom }}" class="checkbox-title{{disabled? '-disabled': ''}} l-title-class">{{value}}</view>
     <view wx:else class="checkbox-title">
       <slot />
     </view>
   </label>
-</view>
+</view>
diff --git a/examples/dist/checkbox/index.wxss b/examples/dist/checkbox/index.wxss
@@ -1 +1 @@
-.label-left{display:flex;flex-direction:row;align-items:center;color:#333}.label-right{display:flex;flex-direction:row-reverse;align-items:center;color:#333}.checkbox{border-radius:50%;display:flex;flex-direction:row;align-items:center;justify-content:center;margin-right:20rpx}.checkbox-right{width:100%;height:100%}.checkbox-circle{width:100%;height:100%}.checkbox-title{font-size:28rpx;flex:1}.checkbox-title-disabled{font-size:28rpx;flex:1;color:#ccc}.checkbox-unselected{border:1px solid #c4c9d2;box-sizing:border-box}
+.label-left{display:flex;flex-direction:row;align-items:center;color:#333}.label-right{display:flex;flex-direction:row-reverse;align-items:center;color:#333}.checkbox{display:flex;flex-direction:row;align-items:center;justify-content:center;margin-right:20rpx}.checkbox-type-circle{border-radius:50%}.checkbox-type-square{border-radius:8rpx}.checkbox-right{width:100%;height:100%}.checkbox-circle{width:100%;height:100%}.checkbox-title{font-size:28rpx;flex:1}.checkbox-title-disabled{font-size:28rpx;flex:1;color:#ccc}.checkbox-unselected{border:1px solid #c4c9d2;box-sizing:border-box}
diff --git a/examples/dist/input/index.wxss b/examples/dist/input/index.wxss
@@ -1 +1 @@
-.form-item{position:relative;font-size:28rpx;color:#333;width:750rpx;height:88rpx;display:flex;flex-direction:row;align-items:center;padding-right:25rpx;box-sizing:border-box}.row{position:absolute;bottom:0;right:0;height:2rpx;width:730rpx;background:#f3f3f3}.text-require{color:#e23;vertical-align:middle}.form-label{display:flex;flex-direction:row;align-items:center;height:88rpx;padding-left:25rpx;padding-right:15rpx;box-sizing:border-box}.disabled{color:#9a9a9a!important}.mask{position:absolute;z-index:999;height:100%;width:100%}.form-label-right{justify-content:flex-end}.form-label-left{justify-content:flex-start}.input{height:100%;line-height:100%;flex:1}.close{height:30rpx;width:30rpx;background:#ddd;display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:50%;margin-right:20rpx}.pls-class{color:#9a9a9a}
+.form-item{position:relative;font-size:28rpx;color:#333;width:750rpx;height:88rpx;display:flex;flex-direction:row;align-items:center;padding-right:25rpx;box-sizing:border-box}.row{position:absolute;bottom:0;right:0;height:2rpx;width:730rpx;background:#f3f3f3}.text-require{color:#e23;vertical-align:middle}.form-label{display:flex;flex-direction:row;align-items:center;height:88rpx;padding-left:25rpx;padding-right:15rpx;box-sizing:border-box}.disabled{color:#9a9a9a!important}.mask{position:absolute;z-index:999;height:100%;width:100%}.form-label-right{justify-content:flex-end}.form-label-left{justify-content:flex-start}.input{height:100%;line-height:100%;flex:1}.close{height:36rpx;width:36rpx;background:#ddd;display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:50%;margin-right:20rpx}.pls-class{color:#9a9a9a}
diff --git a/examples/dist/loading/index.wxml b/examples/dist/loading/index.wxml
@@ -11,20 +11,20 @@
         <view class="spinner-container container1">
           <view class="circle1  {{type + '-' + size}}" style="background: {{color}}"></view>
           <view class="circle2  {{type + '-' + size}}" style="background: {{color}}"></view>
-          <view class="circle3  {{type + '-'+ size}}" style="background: {{color}}" style="background: {{color}}" style="background: {{color}}"></view>
-          <view class="circle4  {{type + '-'+ size}}" style="background: {{color}}" style="background: {{color}}"></view>
+          <view class="circle3  {{type + '-' + size}}" style="background: {{color}}"></view>
+          <view class="circle4  {{type + '-' + size}}" style="background: {{color}}"></view>
         </view>
         <view class="spinner-container container2">
-          <view class="circle1  {{type + '-'+ size}}" style="background: {{color}}"></view>
-          <view class="circle2  {{type + '-'+ size}}" style="background: {{color}}"></view>
-          <view class="circle3  {{type + '-'  +size}}" style="background: {{color}}"></view>
-          <view class="circle4  {{type + '-'+ size}}" style="background: {{color}}"></view>
+          <view class="circle1  {{type + '-' + size}}" style="background: {{color}}"></view>
+          <view class="circle2  {{type + '-' + size}}" style="background: {{color}}"></view>
+          <view class="circle3  {{type + '-' + size}}" style="background: {{color}}"></view>
+          <view class="circle4  {{type + '-' + size}}" style="background: {{color}}"></view>
         </view>
         <view class="spinner-container container3">
-          <view class="circle1  {{type + '-'+ size}}" style="background: {{color}}"></view>
-          <view class="circle2  {{type + '-'+ size}}" style="background: {{color}}"></view>
-          <view class="circle3  {{type + '-'+ size}}" style="background: {{color}}"></view>
-          <view class="circle4  {{type + '-'+size}}" style="background: {{color}}"></view>
+          <view class="circle1  {{type + '-' + size}}" style="background: {{color}}"></view>
+          <view class="circle2  {{type + '-' + size}}" style="background: {{color}}"></view>
+          <view class="circle3  {{type + '-' + size}}" style="background: {{color}}"></view>
+          <view class="circle4  {{type + '-' + size}}" style="background: {{color}}"></view>
         </view>
       </view>
       <view wx:if="{{ type === 'rotate'}}">
@@ -45,20 +45,20 @@
       <view class="spinner-container container1">
         <view class="circle1  {{type + '-' + size}}" style="background: {{color}}"></view>
         <view class="circle2  {{type + '-' + size}}" style="background: {{color}}"></view>
-        <view class="circle3  {{type + '-'+ size}}" style="background: {{color}}" style="background: {{color}}" style="background: {{color}}"></view>
-        <view class="circle4  {{type + '-'+ size}}" style="background: {{color}}" style="background: {{color}}"></view>
+        <view class="circle3  {{type + '-' + size}}" style="background: {{color}}"></view>
+        <view class="circle4  {{type + '-' + size}}" style="background: {{color}}"></view>
       </view>
       <view class="spinner-container container2">
-        <view class="circle1  {{type + '-'+ size}}" style="background: {{color}}"></view>
-        <view class="circle2  {{type + '-'+ size}}" style="background: {{color}}"></view>
-        <view class="circle3  {{type + '-'  +size}}" style="background: {{color}}"></view>
-        <view class="circle4  {{type + '-'+ size}}" style="background: {{color}}"></view>
+        <view class="circle1  {{type + '-' + size}}" style="background: {{color}}"></view>
+        <view class="circle2  {{type + '-' + size}}" style="background: {{color}}"></view>
+        <view class="circle3  {{type + '-' + size}}" style="background: {{color}}"></view>
+        <view class="circle4  {{type + '-' + size}}" style="background: {{color}}"></view>
       </view>
       <view class="spinner-container container3">
-        <view class="circle1  {{type + '-'+ size}}" style="background: {{color}}"></view>
-        <view class="circle2  {{type + '-'+ size}}" style="background: {{color}}"></view>
-        <view class="circle3  {{type + '-'+ size}}" style="background: {{color}}"></view>
-        <view class="circle4  {{type + '-'+size}}" style="background: {{color}}"></view>
+        <view class="circle1  {{type + '-' + size}}" style="background: {{color}}"></view>
+        <view class="circle2  {{type + '-' + size}}" style="background: {{color}}"></view>
+        <view class="circle3  {{type + '-' + size}}" style="background: {{color}}"></view>
+        <view class="circle4  {{type + '-' + size}}" style="background: {{color}}"></view>
       </view>
     </view>
     <view wx:if="{{ type === 'rotate'}}">
diff --git a/examples/pages/components/form/pages/checkbox/index.wxml b/examples/pages/components/form/pages/checkbox/index.wxml
@@ -10,6 +10,7 @@
         <l-checkbox-group current="{{current }}" l-class="l-radio-group" bind:linchange="change">
           <l-checkbox
             l-class="l-radio"
+            type="circle"
             l-title-class="l-title-class"
             wx:for="{{items1}}"
             wx:key="{{item.id}}" 
diff --git a/examples/pages/navigator/index/index.js b/examples/pages/navigator/index/index.js
@@ -2,11 +2,10 @@
 import naviConfigs from './navi.js'
 Page({
   data: {
-    naviConfigs: naviConfigs,
+    naviConfigs: naviConfigs
   },
 
   onLoad: function() {
-
   },
 
   onShareAppMessage() {
diff --git a/src/checkbox/index.js b/src/checkbox/index.js
@@ -20,6 +20,10 @@ Component({
       type: String,
       value: 'right'
     },
+    type: {
+      type: String,
+      value: 'square'  // square 方形   circle 圆形
+    },
     // checkbox的大小
     size: {
       type: [String, Number],
diff --git a/src/checkbox/index.less b/src/checkbox/index.less
@@ -15,14 +15,21 @@
 }
 
 .checkbox {
-  border-radius: 50%;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   margin-right: 20rpx;
 }
 
+.checkbox-type-circle {
+  border-radius: 50%;
+}
+
+.checkbox-type-square {
+  border-radius: 8rpx;
+}
+
 .checkbox-right {
   width: 100%;
   height: 100%;
diff --git a/src/checkbox/index.wxml b/src/checkbox/index.wxml
diff --git a/src/input/index.less b/src/input/index.less
diff --git a/src/loading/index.wxml b/src/loading/index.wxml

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		-.label-left{display:flex;flex-direction:row;align-items:center;color:#333}.label-right{display:flex;flex-direction:row-reverse;align-items:center;color:#333}.checkbox{border-radius:50%;display:flex;flex-direction:row;align-items:center;justify-content:center;margin-right:20rpx}.checkbox-right{width:100%;height:100%}.checkbox-circle{width:100%;height:100%}.checkbox-title{font-size:28rpx;flex:1}.checkbox-title-disabled{font-size:28rpx;flex:1;color:#ccc}.checkbox-unselected{border:1px solid #c4c9d2;box-sizing:border-box}
	`1`	+.label-left{display:flex;flex-direction:row;align-items:center;color:#333}.label-right{display:flex;flex-direction:row-reverse;align-items:center;color:#333}.checkbox{display:flex;flex-direction:row;align-items:center;justify-content:center;margin-right:20rpx}.checkbox-type-circle{border-radius:50%}.checkbox-type-square{border-radius:8rpx}.checkbox-right{width:100%;height:100%}.checkbox-circle{width:100%;height:100%}.checkbox-title{font-size:28rpx;flex:1}.checkbox-title-disabled{font-size:28rpx;flex:1;color:#ccc}.checkbox-unselected{border:1px solid #c4c9d2;box-sizing:border-box}
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		-.form-item{position:relative;font-size:28rpx;color:#333;width:750rpx;height:88rpx;display:flex;flex-direction:row;align-items:center;padding-right:25rpx;box-sizing:border-box}.row{position:absolute;bottom:0;right:0;height:2rpx;width:730rpx;background:#f3f3f3}.text-require{color:#e23;vertical-align:middle}.form-label{display:flex;flex-direction:row;align-items:center;height:88rpx;padding-left:25rpx;padding-right:15rpx;box-sizing:border-box}.disabled{color:#9a9a9a!important}.mask{position:absolute;z-index:999;height:100%;width:100%}.form-label-right{justify-content:flex-end}.form-label-left{justify-content:flex-start}.input{height:100%;line-height:100%;flex:1}.close{height:30rpx;width:30rpx;background:#ddd;display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:50%;margin-right:20rpx}.pls-class{color:#9a9a9a}
	`1`	+.form-item{position:relative;font-size:28rpx;color:#333;width:750rpx;height:88rpx;display:flex;flex-direction:row;align-items:center;padding-right:25rpx;box-sizing:border-box}.row{position:absolute;bottom:0;right:0;height:2rpx;width:730rpx;background:#f3f3f3}.text-require{color:#e23;vertical-align:middle}.form-label{display:flex;flex-direction:row;align-items:center;height:88rpx;padding-left:25rpx;padding-right:15rpx;box-sizing:border-box}.disabled{color:#9a9a9a!important}.mask{position:absolute;z-index:999;height:100%;width:100%}.form-label-right{justify-content:flex-end}.form-label-left{justify-content:flex-start}.input{height:100%;line-height:100%;flex:1}.close{height:36rpx;width:36rpx;background:#ddd;display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:50%;margin-right:20rpx}.pls-class{color:#9a9a9a}