mod: button style

Author: KuangPF

src/css/app.css

@@ -1,37 +1,38 @@
-@import './button.css';
 page {
-    background-color: #F8F8F8;
-    font-size: 16px;
-    font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
+  background-color: #ededed;
+  font-size: 16px;
+  font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
 }
-
 .page__hd {
-    padding: 40px;
+  padding: 40px;
 }
-
 .page__bd {
-    padding-bottom: 40px;
+  padding-bottom: 40px;
 }
-
 .page__bd_spacing {
-    padding-left: 15px;
-    padding-right: 15px;
+  padding-left: 15px;
+  padding-right: 15px;
 }
 
 .page__ft {
-    padding-bottom: 10px;
-    text-align: center;
+  text-align: center;
+  padding: 0 0 10px;
+  padding: 0 0 calc(10px + constant(safe-area-inset-bottom));
+  padding: 0 0 calc(10px + env(safe-area-inset-bottom));
 }
 
 .page__title {
-    text-align: left;
-    font-size: 20px;
-    font-weight: 400;
+  text-align: left;
+  font-size: 20px;
+  font-weight: 400;
 }
 
 .page__desc {
-    margin-top: 5px;
-    color: #888888;
-    text-align: left;
-    font-size: 14px;
+  margin-top: 5px;
+  color: #888888;
+  text-align: left;
+  font-size: 14px;
+}
+.weui-cell_example:before {
+  left: 52px;
 }

src/main.json

@@ -47,5 +47,6 @@
     "navigationBarBackgroundColor": "#fff",
     "navigationBarTitleText": "weui for mpvue",
     "navigationBarTextStyle": "black"
-  }
+  },
+  "style": "v2"
 }

src/pages/button/index.vue

@@ -1,31 +1,23 @@
 <template>
   <div class="page">
-    <div class="page">
-      <div class="page__hd">
-        <div class="page__title">Button</div>
-        <div class="page__desc">按钮，WeUI采用小程序原生的按钮为主体，加入一些间距的样式。</div>
-      </div>
-      <div class="page__bd page__bd_spacing">
-        <button class="weui-btn" type="primary">页面主操作 Normal</button>
-        <button class="weui-btn" type="primary" disabled="true">页面主操作 Disabled</button>
-
-        <button class="weui-btn" type="default">页面次要操作 Normal</button>
-        <button class="weui-btn" type="default" disabled="true">页面次要操作 Disabled</button>
-
-        <button class="weui-btn" type="warn">警告类操作 Normal</button>
-        <button class="weui-btn" type="warn" disabled="true">警告类操作 Disabled</button>
+    <div class="page__hd">
+      <div class="page__title">Button</div>
+      <div class="page__desc">按钮，WeUI采用小程序原生的按钮为主体，加入一些间距的样式。</div>
+    </div>
+    <div class="page__bd page__bd_spacing">
+      <button class="weui-btn" type="primary">页面主操作</button>
+      <button class="weui-btn" type="primary" disabled="true">页面主操作</button>
 
-        <div class="button-sp-area">
-          <button class="weui-btn" type="primary" plain="true">按钮</button>
-          <button class="weui-btn" type="primary" disabled="true" plain="true">按钮</button>
+      <button class="weui-btn" type="default">页面次要操作</button>
+      <button class="weui-btn" type="default" disabled="true">页面次要操作</button>
 
-          <button class="weui-btn" type="default" plain="true">按钮</button>
-          <button class="weui-btn" type="default" disabled="true" plain="true">按钮</button>
+      <button class="weui-btn" type="warn">警告类操作</button>
+      <button class="weui-btn" type="warn" disabled="true">警告类操作</button>
 
-          <button class="weui-btn mini-btn" type="primary" size="mini">按钮</button>
-          <button class="weui-btn mini-btn" type="default" size="mini">按钮</button>
-          <button class="weui-btn mini-btn" type="warn" size="mini">按钮</button>
-        </div>
+      <div class="button-sp-area">
+        <button class="weui-btn mini-btn" type="primary" size="mini">按钮</button>
+        <button class="weui-btn mini-btn" type="default" size="mini">按钮</button>
+        <button class="weui-btn mini-btn" type="warn" size="mini">按钮</button>
       </div>
     </div>
   </div>
@@ -42,6 +34,13 @@ export default {
 }
 
 </script>
-<style>
-
+<style scoped>
+.button-sp-area{
+    margin: 0 auto;
+    padding-top: 15px;
+    text-align:center;
+}
+.mini-btn{
+    margin: 0 4px;
+}
 </style>