Browse Source

fix: demo 样式走查修改

richard1015 5 years ago
parent
commit
ecda045564

+ 7 - 7
src/packages/calendar/demo.vue

@@ -20,13 +20,6 @@
     </div>
 
     <div>
-      <nut-cell 
-        :showIcon="true"  
-        title="选择时间段"
-        :desc="date1 ? `${date1[0]}至${date1[1]}` : '请选择'"
-        @click.native="openSwitch('isVisible1')">
-      </nut-cell>
-
       <nut-calendar
         :is-visible="isVisible1"
         :default-value="date1"
@@ -37,6 +30,13 @@
         @choose="setChooseValue1"
       >
       </nut-calendar>
+
+       <nut-cell 
+        :showIcon="true"  
+        title="选择时间段"
+        :desc="date1 ? `${date1[0]}至${date1[1]}` : '请选择'"
+        @click.native="openSwitch('isVisible1')">
+      </nut-cell>
     </div>
     <!-- <div>
       <nut-cell 

+ 1 - 4
src/packages/cell/cell.scss

@@ -74,7 +74,4 @@
 	&:last-child .nut-cell {
 		border-bottom: none;
 	}
-}
-.demo-list p{
-	padding: 0px !important;
-}
+}

+ 11 - 10
src/packages/checkbox/demo.vue

@@ -41,9 +41,8 @@
           <nut-checkbox v-model="checkbox6" size="large">大号</nut-checkbox>
         </span>
       </nut-cell>
-
-      <p>size可选值:'small', 'base', 'large'</p>
     </div>
+    <p>size可选值:'small', 'base', 'large'</p>
 
     <h4>禁用动效</h4>
     <div>
@@ -57,8 +56,8 @@
           <nut-checkbox v-model="checkbox8" :animation="false">没有动效</nut-checkbox>
         </span>
       </nut-cell>
-      <p>animation属性值为false时,禁用自带动效</p>
     </div>
+    <p>animation属性值为false时,禁用自带动效</p>
 
     <h4>事件</h4>
     <div>
@@ -68,7 +67,9 @@
         </span>
         <span slot="desc">{{ result }}</span>
       </nut-cell>
-      <p>值发生变化时,将触发change事件</p>
+    </div>
+    <p>值发生变化时,将触发change事件</p>
+    <div>
       <nut-cell>
         <span slot="title">
           <nut-checkbox v-model="checkbox10" :label="'选项值1'" @change="getChange">change事件</nut-checkbox>
@@ -81,8 +82,8 @@
         </span>
         <span slot="desc">{{ result3 }}</span>
       </nut-cell>
-      <p>设置label时,可获取选项label值</p>
     </div>
+    <p>设置label时,可获取选项label值</p>
 
     <h4>自定义Class</h4>
     <div>
@@ -142,10 +143,10 @@ export default {
 
 <style lang="scss">
 .nut-checkbox.my-checkbox {
-	input:checked {
-		background-image: radial-gradient(circle, #fff 0%, #fff 50%, $primary-color 60%);
-		background-size: 50% 50%;
-		border: none;
-	}
+  input:checked {
+    background-image: radial-gradient(circle, #fff 0%, #fff 50%, $primary-color 60%);
+    background-size: 50% 50%;
+    border: none;
+  }
 }
 </style>

+ 48 - 38
src/packages/datepicker/demo.vue

@@ -4,12 +4,14 @@
       >此 Demo 在 PC 端浏览器与移动端浏览器体验差异较大,建议在 Android 或 iOS 设备上体验。</nut-noticebar
     >
     <h4>选择年月日</h4>
-    <nut-cell 
-      :showIcon="true"  
-      title="每列不显示中文(年/月/日)"
-      :desc="date ? date : '请选择'"
-      @click.native="switchPicker('isVisible')">
-    </nut-cell>
+    <div>
+      <nut-cell 
+        :showIcon="true"  
+        title="每列不显示中文(年/月/日)"
+        :desc="date ? date : '请选择'"
+        @click.native="switchPicker('isVisible')">
+      </nut-cell>
+    </div>
     <nut-datepicker
       :is-visible="isVisible"
       type="date"
@@ -20,14 +22,16 @@
     ></nut-datepicker>
 
     <h4>选择时间</h4>
-    <nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible3')">
-      <span slot="title">
-        <label>选择时间</label>
-      </span>
-      <div slot="desc" class="selected-option">
-        <span class="show-value">{{ time ? `${time}` : '请选择' }}</span>
-      </div>
-    </nut-cell>
+    <div>
+      <nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible3')">
+        <span slot="title">
+          <label>选择时间</label>
+        </span>
+        <div slot="desc" class="selected-option">
+          <span class="show-value">{{ time ? `${time}` : '请选择' }}</span>
+        </div>
+      </nut-cell>
+    </div>
     <nut-datepicker
       :is-visible="isVisible3"
       type="time"
@@ -38,14 +42,16 @@
     ></nut-datepicker>
 
     <h4>限制开始结束时间</h4>
-    <nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible2')">
-      <span slot="title">
-        <label>日期时间选择</label>
-      </span>
-      <div slot="desc" class="selected-option">
-        <span class="show-value">{{ datetime ? datetime : '请选择' }}</span>
-      </div>
-    </nut-cell>
+    <div>
+      <nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible2')">
+        <span slot="title">
+          <label>日期时间选择</label>
+        </span>
+        <div slot="desc" class="selected-option">
+          <span class="show-value">{{ datetime ? datetime : '请选择' }}</span>
+        </div>
+      </nut-cell>
+    </div>
     <nut-datepicker
       :is-visible="isVisible2"
       title="选择日期时间"
@@ -58,14 +64,16 @@
     ></nut-datepicker>
 
     <h4>限制开始结束小时</h4>
-    <nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible4')">
-      <span slot="title">
-        <label>选择时间</label>
-      </span>
-      <div slot="desc" class="selected-option">
-        <span class="show-value">{{ time1 ? time1 : '请选择' }}</span>
-      </div>
-    </nut-cell>
+    <div>
+      <nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible4')">
+        <span slot="title">
+          <label>选择时间</label>
+        </span>
+        <div slot="desc" class="selected-option">
+          <span class="show-value">{{ time1 ? time1 : '请选择' }}</span>
+        </div>
+      </nut-cell>
+    </div>
     <nut-datepicker
       :is-visible="isVisible4"
       type="time"
@@ -79,14 +87,16 @@
     ></nut-datepicker>
 
     <h4>分钟数递增步长设置</h4>
-    <nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible5')">
-      <span slot="title">
-        <label>分钟数递增步长设置</label>
-      </span>
-      <div slot="desc" class="selected-option">
-        <span class="show-value">{{ time2 ? time2 : '请选择时间' }}</span>
-      </div>
-    </nut-cell>
+    <div>
+      <nut-cell :showIcon="true" :isLink="true" @click.native="switchPicker('isVisible5')">
+        <span slot="title">
+          <label>分钟数递增步长设置</label>
+        </span>
+        <div slot="desc" class="selected-option">
+          <span class="show-value">{{ time2 ? time2 : '请选择时间' }}</span>
+        </div>
+      </nut-cell>
+    </div>
     <nut-datepicker
       :is-visible="isVisible5"
       type="time"

+ 1 - 1
src/packages/menu/demo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-list">
     <h4>基础样式</h4>
     <nut-menu mask :list="list" type="simple" @open="onOpen" @close="onClose" />
     <h4>多选样式</h4>