fix: demo styles

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui",
-  "version": "2.2.6",
+  "version": "2.2.7",
   "description": "一套轻量级移动端Vue组件库",
   "typings": "dist/types/index.d.ts",
   "main": "dist/nutui.js",

src/packages/address/demo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="address-box">
+  <div class="address-box demo-list">
     <h4>选择自定义地址</h4>
     <div class="address-list init" @click="showAddress">
       <div class="titile">选择地址</div>

src/packages/button/demo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-list-pd">
     <h4>常规按钮</h4>
     <div class="bg">
       <nut-button @click="clickHandler" :disabled="disabled">去结算</nut-button>
@@ -90,12 +90,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.bg {
-  margin: 0 10px;
-}
-.gap {
-  height: 10px;
-}
 .white-bg {
   padding: 10px;
   background: #fff;

src/packages/buttongroup/demo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-list">
     <h4>常规按钮组</h4>
     <nut-buttongroup>
       <nut-button type="light">重置</nut-button>

src/packages/cell/demo.vue

@@ -1,10 +1,8 @@
 <template>
-  <div>
+  <div class="demo-list">
     <h4>基本用法</h4>
-    <div>
       <nut-cell title="我是标题" desc="描述文字" @click-cell="clickEvnt" to="/index"> </nut-cell>
       <nut-cell :is-link="true" link-url="//m.jd.com" :show-icon="true" title="带链接" target="_target"> </nut-cell>
-    </div>
     <h4>通过Slot插槽分发内容</h4>
     <div>
       <nut-cell :is-link="true" :show-icon="true">

src/packages/circleprogress/demo.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="demo-list">
-    <p>基本用法</p>
+    <h4>基本用法</h4>
     <div>
       <nut-cell>
         <span slot="title">
@@ -8,7 +8,7 @@
         </span>
       </nut-cell>
     </div>
-    <p>环形进度条自定义样式</p>
+    <h4>环形进度条自定义样式</h4>
     <div>
       <nut-cell>
         <span slot="title">
@@ -16,7 +16,7 @@
         </span>
       </nut-cell>
     </div>
-    <p>环形进度条自定义内容</p>
+    <h4>环形进度条自定义内容</h4>
     <div>
       <nut-cell>
         <span slot="title">
@@ -26,7 +26,7 @@
         </span>
       </nut-cell>
     </div>
-    <p>动态改变环形进度条的进度</p>
+    <h4>动态改变环形进度条的进度</h4>
     <div>
       <nut-cell>
         <span slot="title">

src/packages/elevator/demo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-list">
     <nut-elevator
       :dataArray="dataList"
       :showIndicator="true"

src/packages/flex/demo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-list">
     <h4>基础布局</h4>
     <div class="box-item">
       <nut-row>

src/packages/gesture/demo.vue

@@ -19,7 +19,6 @@
       <h4>绑定多个事件</h4>
       <p>press、tap、pan</p>
     </div>
-
     <div class="show">{{ text }}</div>
   </div>
 </template>

src/packages/icon/demo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-list">
     <h4>所有ICON，单击可复制</h4>
     <table>
       <tr>

src/packages/imagepicker/demo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-list-pd">
     <h4>基本用法</h4>
     <nut-imagepicker @imgMsg="imgMsg" :imgList.sync="imgList1"></nut-imagepicker>
     <h4>指定宽度和高度都是120px,图片间距是10px</h4>

src/packages/lazyload/demo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="lazyloadDemo">
+  <div class="lazyloadDemo demo-list">
     <h4>基础使用</h4>
     <img v-lazy="imageArray[0]" />
     <h4>背景图懒加载</h4>

src/packages/leftslip/demo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-list">
     <h4>基本用法</h4>
     <div>
       <nut-leftslip ref="demo1">
@@ -58,9 +58,10 @@
         >
       </nut-leftslip>
     </div>
-    <p>禁止滑动</p>
-    <div>
+    <div class="demo-list-pd">
       <button class="btn" @click="disabledHandle">{{isDisable ? '开启滑动' : '禁止滑动'}}</button>
+      </div>
+      <div>
       <nut-leftslip :disabled="isDisable">
         <div slot="slip-main" class="slip-main">左滑触发删除</div>
         <div slot="slipbtns" class="slipbtns"><a href="javascript:;">删除</a></div>

src/packages/luckdraw/demo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="luckDrawBox">
+  <div class="luckDrawBox demo-list">
     <h4>基本用法</h4>
     <div>
       <nut-cell>

src/packages/menu/demo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-list">
     <h4>单选</h4>
     <div class="list list1">
       <span slot="title" @click="switchMenu('isVisible1', 1)" ref="title1">综合</span>

src/packages/navbar/demo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-list">
     <h4>默认用法</h4>
     <nut-navbar @on-click-back="back" @on-click-title="title" :leftShow="false" :rightShow="false" @on-click-more="more"></nut-navbar>
     <h4>增加左侧按钮</h4>

src/packages/popup/demo.vue

@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <h2 class="title">基本用法</h2>
+  <div class="demo-list">
+    <h4>基本用法</h4>
     <div>
         <nut-cell
         isLink
@@ -12,7 +12,7 @@
     </div>
     <nut-popup :style="{ padding: '30px 50px' }"   v-model="showBasic" >正文</nut-popup>
 
-    <h2 class="title">弹出位置</h2>
+    <h4>弹出位置</h4>
     <div>
         <nut-cell
         isLink
@@ -61,7 +61,7 @@
         :style="{ width: '20%', height: '100%' }"
         ></nut-popup>
     </div>
-    <h2 class="title">关闭图标</h2>
+    <h4>关闭图标</h4>
     <div>
         <nut-cell
         isLink
@@ -106,7 +106,7 @@
         ></nut-popup>
     </div>
 
-    <h2 class="title">圆角弹框</h2>
+    <h4>圆角弹框</h4>
     <div>
         <nut-cell
         isLink
@@ -122,7 +122,7 @@
         :style="{ height: '20%' }"
         ></nut-popup>
     </div>
-    <h2 class="title">指定挂载节点</h2>
+    <h4>指定挂载节点</h4>
     <div>
         <nut-cell
         isLink
@@ -160,18 +160,4 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.title {
-  text-align: left;
-  margin: 0;
-  padding: 32px 16px 16px;
-  color: rgba(69, 90, 100, 0.6);
-  font-weight: normal;
-  font-size: 14px;
-  line-height: 16px;
-}
-.demo {
-  padding-left: 0;
-  padding-right: 0;
-  overflow: hidden;
-}
 </style>

src/packages/rate/demo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-list">
     <h4>基本用法</h4>
     <div>
       <nut-cell>

src/packages/signature/demo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-list">
     <h4>基本用法</h4>
     <p>默认</p>
     <p><nut-signature @confirm="confirm" @clear="clear"></nut-signature></p>

src/packages/swiper/demo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="vueSwiper">
+  <div id="vueSwiper" class="demo-list">
     <h4>横向无缝切换</h4>
     <nut-swiper :paginationVisibile="true" direction="horizontal" :swiperData="dataImgItem">
       <div v-for="(item, index) in dataImgItem" :key="index" class="nut-swiper-slide ">

src/packages/tab/demo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-list-pd">
     <!-- DEMO区域 -->
     <h4>默认用法</h4>
     <nut-tab @tab-switch="tabSwitch">

src/packages/tabbar/demo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-list">
     <h4>图标文本标签栏</h4>
     <nut-tabbar @tab-switch="tabSwitch1" type="card" :tabbar-list="tabList1"></nut-tabbar>
     <h4>带有tips的文本标签栏</h4>

src/packages/tabselect/demo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-list">
     <nut-cell isLink title="展示单选弹出层" :showIcon="true" @click.native="show = true"> </nut-cell>
     <nut-tabselect
       :mainTitle="mainTitle"

src/packages/textbox/demo.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="textbox-demo">
+    <div class="demo-list">
         <!-- <h4>示例</h4> -->
         <h4>默认用法 支持异步回显数据</h4>
          <nut-textbox v-model="val"></nut-textbox>

src/packages/timeline/demo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-list-pd">
     <h4>基本用法</h4>
     <nut-timeline>
       <nut-timelineitem>

src/packages/video/demo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-list">
     <h4>基本用法</h4>
     <div class="video-con">
       <nut-video :sources="sources" :options="options" @play="play" @pause="pause" @playend="playend"> </nut-video>