设置-页面-静态

pages.json

@@ -28,12 +28,11 @@
       }
     },
     {
-    	"path" : "pages/set/set",
-    	"style" : 
-    	{
-    		"navigationBarTitleText" : "设置",
-			"autoBackButton":true
-    	}
+      "path": "pages/set/set",
+      "style": {
+        "navigationBarTitleText": "设置"
+	
+      }
     }
   ],
   "tabBar": {
@@ -64,8 +63,9 @@
   "globalStyle": {
     "navigationBarTextStyle": "black",
     "navigationBarTitleText": "设备租赁",
-    "navigationBarBackgroundColor": "#F8F8F8",
-    "backgroundColor": "#F8F8F8"
+    "navigationBarBackgroundColor": "#fff"
+	
+
   },
   "uniIdRouter": {},
   "mp-weixin": {

pages/set/set.vue

@@ -1,13 +1,96 @@
 <template>
-	<view class="">
-		
-	</view>
+  <view class="page">
+    <view class="info">
+      <view v-for="(item, index) in userInfoSettings" :key="index" class="info-row">
+        <view class="label">{{ item.label }}</view>
+        <view class="value">{{ item.value }} ></view>
+      </view>
+    </view>
+    <view class="log-out">退出登录</view>
+  </view>
 </template>
 
-<script setup>
-	
+<script>
+export default {
+  data() {
+    return {
+      userInfoSettings: [
+        {
+          label: '头像',
+          value: '', // 实际项目中这里可能是图片URL
+          icon: '灰色圆形图标', // 描述性文字，实际可用图片路径替换
+          type: 'avatar',
+        },
+        {
+          label: '昵称',
+          value: '昵称', // 默认占位文字，实际应为用户昵称
+          type: 'nickname',
+        },
+        {
+          label: '手机号',
+          value: '158****5964', // 脱敏后的手机号
+          type: 'phone',
+        },
+      ],
+    }
+  },
+}
 </script>
 
 <style lang="scss" scoped>
-	       
+.page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-height: 100vh;
+  background: #f3f5f6;
+
+  .info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 710rpx;
+    background: #ffffff;
+
+    border-radius: 10px;
+    opacity: 1;
+    margin: 30rpx auto;
+
+    //border: solid 1rpx red;
+
+    .info-row {
+      display: flex;
+      border-bottom: solid 1rpx #d8d8d8;
+      width: 646rpx;
+      padding: 40rpx 0;
+      margin: 0 34rpx;
+
+      .label {
+        flex: 1;
+        color: #3d3d3d;
+        font-size: 16px;
+      }
+
+      .value {
+        flex: 1;
+        text-align: right;
+        color: #bbbbbb;
+        font-size: 16px;
+      }
+    }
+  }
+
+  .log-out {
+    margin-top: 866rpx;
+    text-align: center;
+    line-height: 98rpx;
+    color: #f15a04;
+    font-size: 16px;
+    font-weight: 500;
+    width: 710rpx;
+    height: 98rpx;
+    background: #ffffff;
+    border-radius: 24.5px;
+  }
+}
 </style>