i

src/pages/user/index.config.ts

@@ -0,0 +1,4 @@
+export default definePageConfig({
+  navigationBarTitleText: '个人中心',
+  navigationStyle: 'custom',
+})

src/pages/user/index.vue

@@ -0,0 +1,169 @@
+<template>
+  <view class="app">
+    <view class="user-center-card__header__transparent">
+      <view class="user-center-card__header__avatar">
+        <nut-avatar size="large">
+          <img
+              src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
+          />
+        </nut-avatar>
+      </view>
+      <view class="user-center-card__header__info">
+        <view class="user-center-card__header__info__name">小明</view>
+        <view class="user-center-card__header__info__desc">这个人很懒，什么都没有留下</view>
+      </view>
+    </view>
+    <!--我的订单-->
+    <view class="cell-card">
+      <view class="top">
+        <view>我的订单</view>
+        <view class="sub">
+          <view>全部订单</view>
+          <ArrowRight/>
+        </view>
+      </view>
+      <view class="center">
+        <view class="center-t">
+          <Order size="25px"/>
+          <view class="center-text">待付款</view>
+        </view>
+        <view class="center-t">
+          <Clock size="25px"/>
+          <view class="center-text">待使用</view>
+        </view>
+        <view class="center-t">
+          <Shop size="25px"/>
+          <view class="center-text">已使用</view>
+        </view>
+        <view class="center-t">
+          <Del size="25px"/>
+          <view class="center-text">已失效</view>
+        </view>
+      </view>
+    </view>
+
+    <!--  我的服务  -->
+
+    <view class="user-center">
+      <view>我的服务</view>
+      <view class="box">
+        <view class="box-mini" v-for="item in 10">
+          <image src="http://jdt168.com/uploads/def/20230612/890553361077384e0c1b1d9e164e2feb.png"/>
+          <view>我的账户</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import {reactive, toRefs} from 'vue';
+import {ArrowRight, Order, Del, Clock, Shop} from '@nutui/icons-vue-taro';
+
+</script>
+
+<style lang="scss">
+.app {
+  box-sizing: border-box;
+  background-color: #f5f5f5;
+  height: 100vh;
+  background-image: url('https://cdn-we-retail.ym.tencent.com/miniapp/template/user-center-bg-v1.png');
+  background-size: auto 40%;
+  background-repeat: no-repeat;
+  position: relative;
+}
+
+.user-center-card__header__transparent {
+  position: absolute;
+  left: 30px;
+  top: 200px;
+  background-color: transparent;
+  //height: 100%;
+  width: 100%;
+  display: flex;
+  //flex-direction: row;
+  align-items: center;
+
+  .user-center-card__header__info {
+    margin-left: 20px;
+    color: #333;
+    font-weight: bolder;
+  }
+}
+
+.cell-card {
+  box-sizing: border-box;
+  position: absolute;
+  top: 350px;
+  background-color: #fff;
+  border-radius: 20px;
+  margin: 20px;
+  padding: 30px;
+  width: 710px;
+
+  .top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .sub {
+      display: flex;
+      color: #c9c9c9;
+      align-items: center;
+    }
+  }
+
+  .center {
+    display: flex;
+    justify-content: space-between;
+    color: #666;
+
+    .center-t {
+      margin-top: 30px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+
+      .center-text {
+        margin-top: 20px;
+      }
+    }
+  }
+}
+
+
+.user-center {
+  box-sizing: border-box;
+  position: absolute;
+  top: 640px;
+  background-color: #fff;
+  border-radius: 20px;
+  margin: 20px;
+  padding: 30px;
+  width: 710px;
+
+  .box {
+    box-sizing: border-box;
+    margin-top: 20px;
+    display: flex;
+    //justify-content: space-between;
+    flex-wrap: wrap;
+
+    .box-mini {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 150px;
+      margin-bottom: 20px;
+      margin-right: 13px;
+
+      image {
+        width: 80px;
+        height: 80px;
+      }
+    }
+
+  }
+}
+</style>