标签

src/project/saas/AppResidentDocument/Add.vue

@@ -96,12 +96,15 @@
     </div>
     <div class="item">
       <span class="tips">*</span>
-      <div class="border">
+      <div class="border item-right">
         <span class="label">居民标签</span>
-        <span class="value" @click="toChooseTags">
+        <!-- <span class="value" @click="toChooseTags">
           <span class="color-999">请选择</span>
           <img src="./components/img/right-icon.png" alt="">
-        </span>
+        </span> -->
+        <div class="tag-list" @click="toChooseTags">
+          <div class="tag" v-for="(item, index) in 10" :key="index">残疾人</div>
+        </div>
       </div>
     </div>
     <div class="item mar-b0">
@@ -340,6 +343,28 @@ export default {
       .color-999{
         color: #999;
       }
+
+      &.item-right {
+        display: block;
+
+        .tag-list {
+          display: flex;
+          flex-wrap: wrap;
+          line-height: 1;
+          margin-top: 42px;
+
+          .tag {
+            height: 64px;
+            line-height: 64px;
+            margin: 0 16px 16px 0;
+            padding: 0 32px;
+            color: #333333;
+            font-size: 28px;
+            background: #F3F4F7;
+            border-radius: 4px;
+          }
+        }
+      }
     }
     .not-border{
       border-bottom: 0;

src/project/saas/AppResidentDocument/Tags.vue

@@ -6,6 +6,9 @@
         <div class="item" v-for="(item, index) in 20" :class="[currIndex === index ? 'active' : '']" :key="index">婴儿</div>
       </div>
     </div>
+    <div class="add-btn" @click="submit">
+      <div>保存</div>
+    </div>
   </div>
 </template>
 
@@ -31,12 +34,30 @@
 
 <style lang="scss" scoped>
   .tags {
-    padding: 16px 0;
+    padding: 16px 0 130px;
 
     * {
       box-sizing: border-box;
     }
 
+    .add-btn {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      z-index: 999;
+      width: 100%;
+      height: 112px;
+      line-height: 112px;
+      background: #3975C6;
+      font-size: 32px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #FFF;
+      div{
+        text-align: center;
+      }
+    }
+
     .tags-group {
       margin-bottom: 16px;
       padding: 0 32px 16px;