submit

pages/consignment-painting/index.vue

@@ -8,6 +8,35 @@
     <div class="content2">
       <image src="../../static/zu709@3x.png"></image>
     </div>
+    <tm-poup height="700" v-model="show_2" position="bottom">
+      <div class="poup1">
+        <div class="content1">
+          <div class="wrap1">更换您的寄存地址</div>
+          <div @click="show_1=false" class="wrap2">
+            <image src="https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/d84593b3-10a8-4d86-be8c-b048b03b22c7.png"></image>
+          </div>
+        </div>
+        <div class="content2"></div>
+        <div class="content3">
+          <div class="wrap1">
+            <div class="wrap1_1">某某某某某某某地方</div>
+            <div class="wrap1_2">*剩余12位置</div>
+          </div>
+          <div class="wrap1 active">
+            <div class="wrap1_1">某某某某某某某地方</div>
+            <div class="wrap1_2">剩余12位置</div>
+          </div>
+          <div class="wrap1 disabled">
+            <div class="wrap1_1">某某某某某某某地方</div>
+            <div class="wrap1_2">*已满员</div>
+          </div>
+        </div>
+        <div class="content2"></div>
+        <div class="content6">
+          <div class="wrap1">确定</div>
+        </div>
+      </div>
+    </tm-poup>
     <tm-poup height="1200" v-model="show_1" position="bottom">
       <div class="poup">
         <div class="content1">
@@ -149,8 +178,9 @@ export default {
       days.push(i)
     }
     return {
+      show_2:true,
       data:[],
-      show_1:true,
+      show_1:false,
       title: 'picker-view',
       years,
       year,
@@ -228,6 +258,93 @@ picker-view {
   background-size: cover;
   width: 100vw;
   height: 100vh;
+  .poup1{
+    padding-top: 28rpx;
+    padding-left: 30rpx;
+    padding-right: 30rpx;
+    &>.content6{
+      margin-top: 26rpx;
+      display: flex;
+      justify-content: center;
+      .wrap1{
+        color: #fff;
+        font-size: 28rpx;
+        width: 436rpx;
+        height: 60rpx;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: #76C458;
+        border-radius: 30rpx;
+      }
+    }
+    &>.content3{
+      margin-bottom: 70rpx;
+.wrap1{
+  margin-bottom: 18rpx;
+  border-radius: 32rpx;
+  height: 80rpx;
+  box-sizing: border-box;
+  border: 2px solid #76C458;
+  padding-left: 44rpx;
+  padding-right:42rpx ;
+    display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .wrap1_2{
+    color: #76C458;
+    font-size: 26rpx;
+  }
+  .wrap1_1{
+    font-size: 28rpx;
+    color: #000;
+  }
+  &.disabled{
+    border:none ;
+    background:#D8D8D8 ;
+    .wrap1_1{
+      color: #626262;
+      font-size: 28rpx;
+    }
+    .wrap1_2{
+      color: #626262;
+      font-size: 16rpx;
+    }
+  }
+  &.active{
+    background:#76C458 ;
+    .wrap1_2{
+      color: #fff;
+      font-size: 26rpx;
+    }
+    .wrap1_1{
+      font-size: 28rpx;
+      color: #fff;
+    }
+  }
+}
+    }
+    &>.content1{
+      margin-bottom: 36rpx;
+      display: flex;
+      justify-content: space-between;
+      .wrap1{
+        color: #000;
+        font-size: 32rpx;
+      }
+      .wrap2{
+        image{
+          width: 48rpx;
+          height: 48rpx;
+        }
+      }
+    }
+    &>.content2{
+      margin-bottom: 36rpx;
+      height: 1rpx;
+      background:#626262 ;
+    }
+  }
   .poup{
     padding-top: 28rpx;
     padding-left: 30rpx;