单选多选颜色

src/apps/AppVillageDiscuss/Add.vue

@@ -35,6 +35,12 @@
 
       <div class="options" v-if="form.type == 1">
         <div class="oneopt" v-if="opts == 0">
+          <div class="items info" v-for="(item, index) in list" :key="index">
+            <img src="./img/22.png" alt="" @click="del(index)" />
+            <div class="rightopts" style="color: #666">{{ item }}</div>
+            <!-- <u-icon name="close-circle-fill" color="#666" @click="del(index)" :border="false"></u-icon> -->
+          </div>
+
           <div class="items">
             <img src="./img/22.png" alt="" />
 
@@ -42,6 +48,12 @@
               <u-input v-model="contents" placeholder="选项" maxlength="200" :clearable="false" />
             </div>
           </div>
+
+          <div class="items" @click="addOpts">
+            <img src="./img/11.png" alt="" />
+
+            <div class="addopts">添加选项</div>
+          </div>
         </div>
 
         <div class="moreopt" v-if="opts == 1">
@@ -49,6 +61,7 @@
             <div class="rightopts" style="color: #666">{{ item }}</div>
             <u-icon name="close-circle-fill" color="#666" @click="del(index)" :border="false"></u-icon>
           </div>
+
           <div class="items">
             <img src="./img/22.png" alt="" />
 
@@ -66,9 +79,9 @@
 
         <div class="submitType">提交方式</div>
         <div class="summitOpt">
-          <div class="leftopt" @click="opts = 0">单选</div>
+          <div class="leftopt" @click="opts = 0" :class="!opts ? 'current' : ''">单选</div>
 
-          <div class="rightopt" @click="opts = 1">多选</div>
+          <div class="rightopt" @click="opts = 1" :class="opts ? 'current' : ''">多选</div>
         </div>
 
         <div class="lines"></div>
@@ -165,6 +178,9 @@ export default {
         return this.$u.toast('请输入多选选项')
       }
 
+      if (this.form.contents) {
+        this.list.push(this.form.contents)
+      }
       if (this.opts == 1) {
         var lists = []
         this.list.map((item, index) => {
@@ -365,12 +381,22 @@ export default {
         box-sizing: border-box;
         margin: 54px 32px 38px 32px;
         .leftopt {
-          background: pink;
-          padding: 36px 126px 34px 128px;
+          // background: pink;
+          width: 320px;
+          height: 112px;
+          line-height: 112px;
+          background: #f5f5f5;
+          border-radius: 4px;
+          text-align: center;
         }
         .rightopt {
-          background: brown;
-          padding: 36px 126px 34px 128px;
+          // background: brown;
+          width: 320px;
+          height: 112px;
+          line-height: 112px;
+          background: #f5f5f5;
+          border-radius: 4px;
+          text-align: center;
         }
       }
 
@@ -477,5 +503,36 @@ export default {
   //     width: 100px;
   //   }
   // }
+
+  .current {
+    color: #1174fe;
+    background: #e7f1fe !important;
+    position: relative;
+
+    &:before {
+      position: absolute;
+      display: block;
+      content: ' ';
+      bottom: 0;
+      right: 0;
+      border: 24px solid #1576fe;
+      border-top-color: transparent;
+      border-left-color: transparent;
+      border-radius: inherit;
+      z-index: 1;
+    }
+
+    &:after {
+      position: absolute;
+      display: block;
+      content: '✓';
+      bottom: 0;
+      right: 0;
+      color: #fff;
+      z-index: 2;
+      line-height: normal;
+      font-weight: normal;
+    }
+  }
 }
 </style>