完成ios首页改造

2025-10-27 13:56:27 +08:00
parent a9168201b3
commit 14f43e929f
15 changed files with 454 additions and 251 deletions
--- a/src/pages/point-book-profile.vue
+++ b/src/pages/point-book-profile.vue
@@ -0,0 +1,114 @@
+<script setup>
+import { ref } from "vue";
+import Avatar from "@/components/Avatar.vue";
+
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user } = storeToRefs(store);
+
+const toEditPage = () => {
+  uni.navigateTo({
+    url: "/pages/point-book-edit",
+  });
+};
+</script>
+
+<template>
+  <view class="container">
+    <view class="header">
+      <image :src="user.avatar" mode="widthFix" />
+      <button hover-class="none" @click="toEditPage">
+        <image src="../static/pen-yellow.png" mode="widthFix" />
+      </button>
+    </view>
+    <view class="body">
+      <view>
+        <button hover-class="none">
+          <image src="../static/user-yellow.png" mode="widthFix" />
+          <text>Name</text>
+          <image src="../static/back-grey.png" mode="widthFix" />
+        </button>
+        <button hover-class="none">
+          <image src="../static/email-yellow.png" mode="widthFix" />
+          <text>Email</text>
+          <image src="../static/back-grey.png" mode="widthFix" />
+        </button>
+        <button hover-class="none">
+          <image src="../static/password-yellow.png" mode="widthFix" />
+          <text>Password</text>
+          <image src="../static/back-grey.png" mode="widthFix" />
+        </button>
+      </view>
+      <button hover-class="none">Log out</button>
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.header {
+  position: relative;
+  margin-top: -120rpx;
+}
+.header > image {
+  width: 180rpx;
+  height: 180rpx;
+  border-radius: 50%;
+  border: 4rpx solid #fff;
+}
+.header > button {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+}
+.header > button > image {
+  width: 60rpx;
+  height: 60rpx;
+}
+.body {
+  width: 100%;
+  margin-top: 20rpx;
+}
+.body > view {
+  background-color: $uni-bg-color;
+  border-radius: 25px;
+  padding: 0 20px;
+}
+.body > view > button {
+  display: flex;
+  align-items: center;
+  padding: 20px 0;
+}
+.body > view > button:not(:last-child) {
+  border-bottom: 1rpx solid #e3e3e3;
+}
+.body > view > button > image:first-child {
+  width: 40rpx;
+  height: 40rpx;
+}
+.body > view > button > text {
+  flex: 1;
+  font-size: 26rpx;
+  color: #333333;
+  text-align: left;
+  padding-left: 20rpx;
+}
+.body > view > button > image:last-child {
+  width: 28rpx;
+  height: 28rpx;
+}
+.body > button:last-child {
+  margin-top: 24rpx;
+  background: $uni-bg-color;
+  border-radius: 24rpx;
+  font-size: 26rpx;
+  color: $uni-link-color;
+  text-align: center;
+  padding: 20px 0;
+}
+</style>