upd: base demo css

src/packages/menu/demo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="demo">
+  <div class="demo full">
     <h2>基础用法</h2>
     <nut-menu>
       <nut-menu-item :menuList="menuList" title="最新商品"></nut-menu-item>

src/packages/navbar/demo.vue

@@ -1,10 +1,16 @@
 <template>
-  <div class="demo">
+  <div class="demo full">
     <h2>基础用法</h2>
     <nut-navbar leftShow title="订单详情" icon="share"></nut-navbar>
     <nut-navbar leftShow title="浏览记录" desc="清空"></nut-navbar>
     <!-- 是否支持自定义属性titIcon -->
-    <nut-navbar :leftShow="false" title="购物车" titIcon="locationg3" desc="编辑" icon="more"></nut-navbar>
+    <nut-navbar
+      :leftShow="false"
+      title="购物车"
+      titIcon="locationg3"
+      desc="编辑"
+      icon="more"
+    ></nut-navbar>
     <h2>增加tab及右侧按钮</h2>
     <nut-navbar title="商品" desc="编辑" icon="horizontal"></nut-navbar>
     <h2>多tab切换导航</h2>

src/packages/tab/demo.vue

@@ -1,46 +1,93 @@
 <template>
-  <div class="demo">
+  <div class="demo full">
     <h2>基础用法</h2>
     <nut-tab>
-      <nut-tab-panel tab-title="全部"><p class="content">这里是页签全部内容</p></nut-tab-panel>
-      <nut-tab-panel tab-title="待付款"><p class="content">这里是页签待付款内容</p></nut-tab-panel>
-      <nut-tab-panel tab-title="待收获"><p class="content">这里是页签待收获内容</p></nut-tab-panel>
-      <nut-tab-panel tab-title="已完成"><p class="content">这里是页签已完成内容</p></nut-tab-panel>
+      <nut-tab-panel tab-title="全部"
+        ><p class="content">这里是页签全部内容</p></nut-tab-panel
+      >
+      <nut-tab-panel tab-title="待付款"
+        ><p class="content">这里是页签待付款内容</p></nut-tab-panel
+      >
+      <nut-tab-panel tab-title="待收获"
+        ><p class="content">这里是页签待收获内容</p></nut-tab-panel
+      >
+      <nut-tab-panel tab-title="已完成"
+        ><p class="content">这里是页签已完成内容</p></nut-tab-panel
+      >
     </nut-tab>
 
     <h2>defaultIndex设置默认显示tab</h2>
     <h2>switchTab监听切换tab返回事件</h2>
     <nut-tab :default-index="1" @switch-tab="switchTab">
-      <nut-tab-panel tab-title="全部"><p class="content">这里是页签全部内容</p></nut-tab-panel>
-      <nut-tab-panel tab-title="待付款"><p class="content">这里是页签待付款内容</p></nut-tab-panel>
-      <nut-tab-panel tab-title="待收获"><p class="content">这里是页签待收获内容</p></nut-tab-panel>
-      <nut-tab-panel tab-title="已完成"><p class="content">这里是页签已完成内容</p></nut-tab-panel>
+      <nut-tab-panel tab-title="全部"
+        ><p class="content">这里是页签全部内容</p></nut-tab-panel
+      >
+      <nut-tab-panel tab-title="待付款"
+        ><p class="content">这里是页签待付款内容</p></nut-tab-panel
+      >
+      <nut-tab-panel tab-title="待收获"
+        ><p class="content">这里是页签待收获内容</p></nut-tab-panel
+      >
+      <nut-tab-panel tab-title="已完成"
+        ><p class="content">这里是页签已完成内容</p></nut-tab-panel
+      >
     </nut-tab>
 
     <h2> animatedTime 开启切换标签内容时的转场动画时间</h2>
     <nut-tab :animated-time="500">
-      <nut-tab-panel tab-title="全部"><p class="content">这里是页签全部内容</p></nut-tab-panel>
-      <nut-tab-panel tab-title="待付款"><p class="content">这里是页签待付款内容</p></nut-tab-panel>
-      <nut-tab-panel tab-title="待收获"><p class="content">这里是页签待收获内容</p></nut-tab-panel>
-      <nut-tab-panel tab-title="已完成"><p class="content">这里是页签已完成内容</p></nut-tab-panel>
+      <nut-tab-panel tab-title="全部"
+        ><p class="content">这里是页签全部内容</p></nut-tab-panel
+      >
+      <nut-tab-panel tab-title="待付款"
+        ><p class="content">这里是页签待付款内容</p></nut-tab-panel
+      >
+      <nut-tab-panel tab-title="待收获"
+        ><p class="content">这里是页签待收获内容</p></nut-tab-panel
+      >
+      <nut-tab-panel tab-title="已完成"
+        ><p class="content">这里是页签已完成内容</p></nut-tab-panel
+      >
     </nut-tab>
 
     <h2> 禁止tab内容滑动</h2>
     <nut-tab :no-swiping="true">
-      <nut-tab-panel tab-title="全部"><p class="content">这里是页签全部内容</p></nut-tab-panel>
-      <nut-tab-panel tab-title="待付款"><p class="content">这里是页签待付款内容</p></nut-tab-panel>
-      <nut-tab-panel tab-title="待收获"><p class="content">这里是页签待收获内容</p></nut-tab-panel>
-      <nut-tab-panel tab-title="已完成"><p class="content">这里是页签已完成内容</p></nut-tab-panel>
+      <nut-tab-panel tab-title="全部"
+        ><p class="content">这里是页签全部内容</p></nut-tab-panel
+      >
+      <nut-tab-panel tab-title="待付款"
+        ><p class="content">这里是页签待付款内容</p></nut-tab-panel
+      >
+      <nut-tab-panel tab-title="待收获"
+        ><p class="content">这里是页签待收获内容</p></nut-tab-panel
+      >
+      <nut-tab-panel tab-title="已完成"
+        ><p class="content">这里是页签已完成内容</p></nut-tab-panel
+      >
     </nut-tab>
 
-    <h2>标签数量超过 5 个时，标签栏可以在水平方向上滚动，切换时会自动将当前标签居中。</h2>
+    <h2
+      >标签数量超过 5
+      个时，标签栏可以在水平方向上滚动，切换时会自动将当前标签居中。</h2
+    >
     <nut-tab :animated-time="500">
-      <nut-tab-panel tab-title="全部"><p class="content">这里是页签全部内容</p></nut-tab-panel>
-      <nut-tab-panel tab-title="待付款"><p class="content">这里是页签待付款内容</p></nut-tab-panel>
-      <nut-tab-panel tab-title="待收获"><p class="content">这里是页签待收获内容</p></nut-tab-panel>
-      <nut-tab-panel tab-title="已完成"><p class="content">这里是页签已完成内容</p></nut-tab-panel>
-      <nut-tab-panel tab-title="已取消"><p class="content">这里是页签已取消内容</p></nut-tab-panel>
-      <nut-tab-panel tab-title="待评价"><p class="content">这里是页签待评价内容</p></nut-tab-panel>
+      <nut-tab-panel tab-title="全部"
+        ><p class="content">这里是页签全部内容</p></nut-tab-panel
+      >
+      <nut-tab-panel tab-title="待付款"
+        ><p class="content">这里是页签待付款内容</p></nut-tab-panel
+      >
+      <nut-tab-panel tab-title="待收获"
+        ><p class="content">这里是页签待收获内容</p></nut-tab-panel
+      >
+      <nut-tab-panel tab-title="已完成"
+        ><p class="content">这里是页签已完成内容</p></nut-tab-panel
+      >
+      <nut-tab-panel tab-title="已取消"
+        ><p class="content">这里是页签已取消内容</p></nut-tab-panel
+      >
+      <nut-tab-panel tab-title="待评价"
+        ><p class="content">这里是页签待评价内容</p></nut-tab-panel
+      >
     </nut-tab>
 
     <h2>设置slot:header可以自定义标签</h2>
@@ -49,27 +96,55 @@
         <template v-slot:header><nut-icon name="dongdong"></nut-icon></template>
         <p class="content">这里是页签全部内容</p>
       </nut-tab-panel>
-      <nut-tab-panel tab-title="待付款"><p class="content">这里是页签待付款内容</p></nut-tab-panel>
-      <nut-tab-panel tab-title="待收获"><p class="content">这里是页签待收获内容</p></nut-tab-panel>
-      <nut-tab-panel tab-title="已完成"><p class="content">这里是页签已完成内容</p></nut-tab-panel>
-      <nut-tab-panel tab-title="已取消"><p class="content">这里是页签已取消内容</p></nut-tab-panel>
-      <nut-tab-panel tab-title="待评价"><p class="content">这里是页签待评价内容</p></nut-tab-panel>
+      <nut-tab-panel tab-title="待付款"
+        ><p class="content">这里是页签待付款内容</p></nut-tab-panel
+      >
+      <nut-tab-panel tab-title="待收获"
+        ><p class="content">这里是页签待收获内容</p></nut-tab-panel
+      >
+      <nut-tab-panel tab-title="已完成"
+        ><p class="content">这里是页签已完成内容</p></nut-tab-panel
+      >
+      <nut-tab-panel tab-title="已取消"
+        ><p class="content">这里是页签已取消内容</p></nut-tab-panel
+      >
+      <nut-tab-panel tab-title="待评价"
+        ><p class="content">这里是页签待评价内容</p></nut-tab-panel
+      >
     </nut-tab>
 
     <h2>左右tab布局</h2>
     <nut-tab direction="vertical" :animated-time="500" :default-index="2">
-      <nut-tab-panel tab-title="页签一"><p class="content">这里是页签一内容</p></nut-tab-panel>
-      <nut-tab-panel tab-title="页签二"><p class="content">这里是页签二内容</p></nut-tab-panel>
-      <nut-tab-panel tab-title="页签三"><p class="content">这里是页签三内容</p></nut-tab-panel>
-      <nut-tab-panel tab-title="页签四"><p class="content">这里是页签四内容</p></nut-tab-panel>
-      <nut-tab-panel tab-title="页签五"><p class="content">这里是页签五内容</p></nut-tab-panel>
-      <nut-tab-panel tab-title="页签六"><p class="content">这里是页签六内容</p></nut-tab-panel>
-      <nut-tab-panel tab-title="页签七"><p class="content">这里是页签七内容</p></nut-tab-panel>
+      <nut-tab-panel tab-title="页签一"
+        ><p class="content">这里是页签一内容</p></nut-tab-panel
+      >
+      <nut-tab-panel tab-title="页签二"
+        ><p class="content">这里是页签二内容</p></nut-tab-panel
+      >
+      <nut-tab-panel tab-title="页签三"
+        ><p class="content">这里是页签三内容</p></nut-tab-panel
+      >
+      <nut-tab-panel tab-title="页签四"
+        ><p class="content">这里是页签四内容</p></nut-tab-panel
+      >
+      <nut-tab-panel tab-title="页签五"
+        ><p class="content">这里是页签五内容</p></nut-tab-panel
+      >
+      <nut-tab-panel tab-title="页签六"
+        ><p class="content">这里是页签六内容</p></nut-tab-panel
+      >
+      <nut-tab-panel tab-title="页签七"
+        ><p class="content">这里是页签七内容</p></nut-tab-panel
+      >
     </nut-tab>
 
     <h2>异步操作</h2>
     <nut-tab :animated-time="500" v-if="editList.length > 0">
-      <nut-tab-panel :tab-title="item.title" v-for="(item, index) in editList" :key="index">
+      <nut-tab-panel
+        :tab-title="item.title"
+        v-for="(item, index) in editList"
+        :key="index"
+      >
         <p class="content">这里是页签{{ index }}内容</p>
       </nut-tab-panel>
     </nut-tab>

src/packages/tabbar/demo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="demo">
+  <div class="demo full">
     <h2>基础用法</h2>
     <nut-tabbar :tab-List="tabList" @tab-switch="tabSwitch"></nut-tabbar>
 

src/sites/mobile/App.vue

@@ -70,8 +70,14 @@ export default defineComponent({
     background: #f7f8fa;
     overflow-x: hidden;
     overflow-y: auto;
-    padding: 0 25px;
-    padding-top: 57px;
+    padding: 57px 25px 0 25px;
+
+    &.full {
+      padding: 57px 0 0 0;
+      h2 {
+        padding-left: 25px;
+      }
+    }
 
     &.bg-w {
       background: #fff;

vue.config.js

@@ -18,6 +18,7 @@ module.exports = {
       }
     }
   },
+
   css: {
     loaderOptions: {
       // 给 sass-loader 传递选项
@@ -34,6 +35,15 @@ module.exports = {
       // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
       scss: {
         additionalData: `@import "~@/styles/variables.scss";@import "~@/sites/assets/styles/variables.scss";`
+      },
+      postcss: {
+        plugins: [
+          require('autoprefixer')({
+            // 配置使用 autoprefixer
+            // browsers: ['last 20 versions'],
+            overrideBrowserslist: ['last 20 versions'] // 记得这里要把 browsers 改为 overrideBrowserslist，autoprefixer 新版本的写法有变
+          })
+        ]
       }
     }
   },