s

pages/my/my.vue

@@ -1,7 +1,64 @@
 <template>
-<div>
+  <div class="mine" >
-  <my-tabbar></my-tabbar>
+
-</div>
+    <div class="content2">
+      <div class="wrap1">
+        <div class="wrap1_1">
+          <image src="../../static/06@3x (1).png"></image>
+        </div>
+        <div class="wrap1_2">
+          <div class="wrap1_2_1">
+            <div class="wrap1_2_1_1">某某某</div>
+            <div class="wrap1_2_1_2">已实名</div>
+          </div>
+          <div class="wrap1_2_2">178273938123</div>
+        </div>
+      </div>
+      <div class="wrap2" >
+        <div class="wrap2_1">
+          <image src="../../static/zu609@3x.png"></image>
+        </div>
+        <div class="wrap2_2">设置</div>
+      </div>
+    </div>
+    <div class="content1">
+    <div class="warp1">
+      <div class="warp1_1">23</div>
+      <div class="warp1_2">历史预约门票</div>
+    </div>
+      <div class="warp1">
+        <div class="warp1_1">2</div>
+        <div class="warp1_2">未使用门票</div>
+      </div>
+      <div class="warp1">
+        <div class="warp1_1">0</div>
+        <div class="warp1_2">过期门票</div>
+      </div>
+    </div>
+    <div class="content3">
+      <image style="height: 3rpx" src="../../static/zx303@3x.png"></image>
+    </div>
+    <div class="content4">
+      <div class="wrap1">·我未使用的门票</div>
+      <div class="wrap2">
+        <div class="wrap2_1">
+          <div class="wrap2_1_1">首都博物馆门票</div>
+          <div class="wrap2_1_2">
+            预约场馆:首都博物馆
+            预约日期:2023.12.30
+            预约类型:单人票
+          </div>
+          <div class="wrap2_1_3">
+          <image src="../../static/zu762@3x.png"></image>
+          </div>
+<image src="../../static/zu1036@3x.png"></image>
+        </div>
+        <div class="wrap2_2"></div>
+      </div>
+    </div>
+    <my-tabbar></my-tabbar>
+  </div>
+
 </template>
 <script>
 export default {
@@ -12,5 +69,168 @@ export default {
 
 
 <style scoped lang="scss">
+.mine{
+  box-sizing: border-box;
+  padding-top: 46rpx;
+  padding-left: 30rpx;
+  padding-right: 30rpx;
+  background-size: cover;
+  width: 100vw;
+  height: 100vh;
+  background-image: url("../../static/tc11@3x.png");
+  .content2{
+    margin-top: 30rpx;
+    display: flex;
+    .wrap2{
+      margin-left: auto;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      width: 182rpx;
+      height: 204rpx;
+      background: #4E964D;
+      border-radius: 40rpx;
+      .wrap2_1{
+        image{
+          width: 40.88rpx;
+          height: 40.88rpx;
+
+        }
+      }
+      .wrap2_2{
+        font-size: 20rpx;
+        color: #fff;
+      }
+    }
+    .wrap1{
+      width: 480rpx;
+      height:204rpx;
+      border-radius: 40rpx;
+      background: #fff;
+      display: flex;
+      align-items: center;
+      .wrap1_2{
+        margin-left: 30rpx;
+        display: flex;
+        flex-direction: column;
+        .wrap1_2_2{
+          color: #626262;
+          font-size: 24rpx;
+        }
+        .wrap1_2_1{
+          margin-bottom: 6rpx;
+          display: flex;
+          align-items: center;
+          .wrap1_2_1_1{
+            margin-right: 6rpx;
+            font-size: 28rpx;
+          }
+          .wrap1_2_1_2{
+            width: 76rpx;
+            height: 26rpx;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: #fff;
+            background:#76C458 ;
+            font-size: 16rpx;
+          }
+        }
+      }
+      .wrap1_1{
+        margin-left: 68rpx;
+        image{
+          width: 126rpx;
+          height: 126rpx;
 
+        }
+      }
+    }
+  }
+  .content4{
+    margin-top: 22rpx;
+    .wrap1{
+      color: #8CC4B2;
+      font-size: 28rpx;
+    }
+    .wrap2{
+      .wrap2_1{
+        position: relative;
+        .wrap2_1_3{
+          position: absolute;
+          z-index: 2;
+          width: 150rpx;
+          height: 56rpx;
+          background: #2E765E;
+          border-radius: 40rpx;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          right: 20rpx;
+          bottom: 22rpx;
+          image{
+            width: 119.5rpx;
+            height: 34rpx;
+          }
+        }
+        .wrap2_1_2{
+          white-space: pre-line;
+          font-size: 20rpx;
+          color: #fff;
+          position: absolute;
+          z-index: 2;
+          top: 66rpx;
+          left: 280rpx;
+        }
+        .wrap2_1_1{
+          font-size: 32rpx;
+          color: #fff;
+          top: 16rpx;
+          left: 280rpx;
+          z-index: 2;
+          position: absolute;
+        }
+
+      image{
+        height: 210rpx;
+        width: 100%;
+      }
+      }
+    }
+  }
+  .content3{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 38rpx;
+  }
+  .content1{
+    margin-top: 26rpx;
+height: 134rpx;
+    background: #fff;
+    border-radius: 40rpx;
+    display: flex;
+    padding-top: 34rpx;
+    padding-bottom: 30rpx;
+    box-sizing: border-box;
+    .warp1{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      flex-grow: 1;
+      border-right: 1px solid #D3E6F2;
+      &:last-child{
+        border-right: none;
+      }
+.warp1_1{
+  font-size: 28rpx;
+}
+      .warp1_2{
+        font-size: 20rpx;
+color: #979798;
+      }
+    }
+  }
+}
 </style>