随手拍改造完成

src/components/common.scss

@@ -1,5 +1,21 @@
 @import '~uview-ui/theme.scss';
 @import "ckeditor";
+
+/**
+常用内外边距样式
+ */
+@each $padMar, $pm in (mar:margin, pad:padding) {
+  @each $pos, $p in (l:left, r:right, t:top, b:bottom) {
+    @each $v in (8, 10, 16, 20, 32, 48, 64) {
+      .#{$padMar}-#{$pos+$v} {
+        #{$pm}-#{$p}: #{$v}px
+      }
+    }
+  }
+}
+.bg-fff{
+  background-color: #fff;
+}
 @font-face {
   font-family: 'iconfont';
   /* project id 1862352 */
@@ -47,9 +63,31 @@ page {
 .bg-hover {
   background: #eee !important;
 }
-
 .flex {
   display: flex;
+  align-items: center;
+
+  &.spb {
+    justify-content: space-between;
+  }
+
+  &.wrap {
+    flex-wrap: wrap;
+  }
+
+  &.column {
+    flex-direction: column;
+  }
+
+  &.start {
+    align-items: flex-start;
+  }
+}
+
+.fill {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
 }
 
 .flex-align {
@@ -489,263 +527,6 @@ button::after {
   background-color: #fff;
 }
 
-/**
- * author: Di (微信小程序开发工程师)
- * organization: WeAppDev(微信小程序开发论坛)(http://weappdev.com)
- *         垂直微信小程序开发交流社区
- *
- * github地址: https://github.com/icindy/wxParse
- *
- * for: 微信小程序富文本解析
- * detail : http://weappdev.com/t/wxparse-alpha0-1-html-markdown/184
- */
-
-.wxParse {
-  width: 100%;
-  font-family: Helvetica, sans-serif;
-  font-size: 28px;
-  color: #666;
-  line-height: 1.8;
-}
-
-.wxParse view {
-  word-break: hyphenate;
-}
-
-.wxParse .inline {
-  display: inline;
-  margin: 0;
-  padding: 0;
-}
-
-.wxParse .div {
-  margin: 0;
-  padding: 0;
-}
-
-.wxParse .h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
-.wxParse .h2 {
-  font-size: 1.5em;
-  margin: 0.83em 0;
-}
-
-.wxParse .h3 {
-  font-size: 1.17em;
-  margin: 1em 0;
-}
-
-.wxParse .h4 {
-  margin: 1.33em 0;
-}
-
-.wxParse .h5 {
-  font-size: 0.83em;
-  margin: 1.67em 0;
-}
-
-.wxParse .h6 {
-  font-size: 0.67em;
-  margin: 2.33em 0;
-}
-
-.wxParse .h1,
-.wxParse .h2,
-.wxParse .h3,
-.wxParse .h4,
-.wxParse .h5,
-.wxParse .h6,
-.wxParse .b,
-.wxParse .strong {
-  font-weight: bolder;
-}
-
-.wxParse .p {
-  margin: 1em 0;
-  word-wrap: break-word;
-}
-
-.wxParse .i,
-.wxParse .cite,
-.wxParse .em,
-.wxParse .var,
-.wxParse .address {
-  font-style: italic;
-}
-
-.wxParse .pre,
-.wxParse .tt,
-.wxParse .code,
-.wxParse .kbd,
-.wxParse .samp {
-  font-family: monospace;
-}
-
-.wxParse .pre {
-  overflow: auto;
-  background: #f5f5f5;
-  padding: 8px;
-  white-space: pre;
-  margin: 1em 0;
-}
-
-.wxParse .code {
-  display: inline;
-  background: #f5f5f5;
-}
-
-.wxParse .big {
-  font-size: 1.17em;
-}
-
-.wxParse .small,
-.wxParse .sub,
-.wxParse .sup {
-  font-size: 0.83em;
-}
-
-.wxParse .sub {
-  vertical-align: sub;
-}
-
-.wxParse .sup {
-  vertical-align: super;
-}
-
-.wxParse .s,
-.wxParse .strike,
-.wxParse .del {
-  text-decoration: line-through;
-}
-
-.wxParse .strong,
-.wxParse .s {
-  display: inline;
-}
-
-.wxParse .a {
-  color: deepskyblue;
-}
-
-.wxParse .video {
-  text-align: center;
-  margin: 10px 0;
-}
-
-.wxParse .video-video {
-  width: 100%;
-}
-
-.wxParse .img {
-  display: inline-block;
-  width: 0;
-  height: 0;
-  max-width: 100% !important;
-  overflow: hidden;
-}
-
-.wxParse .blockquote {
-  margin: 5px 0;
-  padding: 10px 0 10px 10px;
-  font-family: Courier, Calibri, "宋体";
-  background: #f5f5f5;
-  border-left: 3px solid #dbdbdb;
-}
-
-.wxParse .blockquote .p {
-  margin: 0;
-}
-
-.wxParse .ul,
-.wxParse .ol {
-  display: block;
-  margin: 1em 0;
-  padding-left: 16px;
-}
-
-.wxParse .ol {
-  list-style-type: disc;
-}
-
-.wxParse .ol {
-  list-style-type: decimal;
-}
-
-.wxParse .li {
-  display: list-item;
-  align-items: baseline;
-  text-align: match-parent;
-}
-
-.wxParse .ul .ul,
-.wxParse .ol .ul {
-  list-style-type: circle;
-}
-
-.wxParse .ol .ol .ul,
-.wxParse .ol .ul .ul,
-.wxParse .ul .ol .ul,
-.wxParse .ul .ul .ul {
-  list-style-type: square;
-}
-
-.wxParse .u {
-  text-decoration: underline;
-}
-
-.wxParse .hide {
-  display: none;
-}
-
-.wxParse .del {
-  display: inline;
-}
-
-.wxParse .figure {
-  overflow: hidden;
-}
-
-.wxParse .table {
-  width: 100%;
-  overflow: auto;
-}
-
-.wxParse .thead,
-.wxParse .tfoot,
-.wxParse .tr {
-  display: flex;
-  flex-direction: row;
-}
-
-.wxParse .tr {
-  width: 100%;
-  display: flex;
-  /*border-right: 1px solid #e0e0e0;*/
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.wxParse .th,
-.wxParse .td {
-  display: flex;
-  width: 260px;
-  overflow: auto;
-  padding: 5px;
-  /*border-left: 1px solid #e0e0e0;*/
-  text-align: center;
-}
-
-.wxParse .td:last-child {
-  border-top: 1px solid #e0e0e0;
-}
-
-.wxParse .th {
-  background: #f0f0f0;
-  border-top: 1px solid #e0e0e0;
-}
-
 .btn-wrapper {
   position: fixed;
   left: 50%;
@@ -757,6 +538,18 @@ button::after {
   background: #f3f6f9;
 }
 
+.bottomBtn {
+  color: #fff;
+  font-size: 34px;
+  background: #4181FF;
+  border-radius: 16px;
+  height: 88px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 8px 24px;
+}
+
 .btn-wrapper {
   .btn {
     width: 686px;