预览弹框

src/project/saas/AppCooperationPropaganda/scopedSelect.vue

@@ -29,6 +29,15 @@
         <u-icon name="arrow-right" color="#CCD0D3"></u-icon>
       </div>
     </div>
+    <div class="items">
+      <div>性别</div>
+      <div class="sex">
+        <span :class="sex == 0? 'active':''" @click="sex = 0">全部</span>
+        <span :class="sex == 1? 'active':''" @click="sex = 1">男</span>
+        <span :class="sex == 2? 'active':''" @click="sex = 2">女</span>
+      </div>
+    </div>
+
 
     <u-calendar v-model="showCalendar" mode="range" @change="selectDate"></u-calendar>
 
@@ -47,7 +56,8 @@ export default {
       type: "",
       showCalendar: false,
       startTime: '',
-      endTime: ''
+      endTime: '',
+      sex: "0",
     }
   },
   methods: {
@@ -92,6 +102,28 @@ export default {
     margin-bottom: 8px;
   }
 
+  .items {
+    padding: 32px;
+    box-sizing: border-box;
+    background: #FFF;
+    .sex {
+      margin-top: 32px;
+      span {
+        display: inline-block;
+        width: 30%;
+        border: 2px solid #CCCCCC;
+        text-align: center;
+        padding: 20px 0;
+        box-sizing: border-box;
+        margin-right: 16px;
+        border-radius: 8px;
+      }
+      .active {
+        background: #1365DD;
+        color: #FFF;
+      }
+    }
+  }
 
   .btn {
     position: fixed;