Merge branch 'master' of http://192.168.12.3:3000/xingyy/uni-admission-fee

pages/my/my.vue

@@ -1,7 +1,65 @@
 <template>
-  <div>
+  <div class="mine">
-    <my-tabbar :currentPage="'pages/my/my'"></my-tabbar>
+
+    <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,4 +70,166 @@ 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>