前端

information.vue

@@ -0,0 +1,137 @@
+<template>
+	
+	<view class="header">
+		<navigator url="/pages/login/login">
+			<image src="../../static/exit.png" class="exit" style="height: 32px;width: 32px;"></image>
+		</navigator>		
+	</view>
+
+	
+  <view class="profile-container">
+    <!-- Static Avatar -->
+    <navigator url="/pages/login/login">
+      <view class="avatar-display">
+        <image src='../../static/ava.png' mode="aspectFit" class="avatar-image" />
+      </view>
+    </navigator>
+	
+    <!-- Editable Personal Information -->
+    <view class="form">
+      <view class="input-group">
+        <text class="label">姓名</text>
+        <input v-model="name" class="info-input" />
+      </view>
+      <view class="input-group">
+        <text class="label">学号</text>
+        <input v-model="studentId" class="info-input" />
+      </view>
+      <view class="input-group">
+        <text class="label">班级</text>
+        <input v-model="className" class="info-input" />
+      </view>
+      <view class="input-group">
+        <text class="label">年龄</text>
+        <input v-model="age" class="info-input" />
+      </view>
+      <view class="input-group">
+        <text class="label">专业</text>
+        <input v-model="major" class="info-input" />
+      </view>
+      <button @click="saveInfo" class="save-button">保存信息</button>
+    </view>
+  </view>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      name: '',
+      studentId: '',
+      className: '',
+      age: '',
+      major: ''
+    };
+  },
+  methods: {
+    saveInfo() {
+      // Logic to save the information
+      uni.showToast({
+        title: '信息已保存',
+        icon: 'success'
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.header{
+	display: flex;
+	justify-content: right;
+	margin: 10px 10px;
+}	
+	
+.exit{
+	font-weight: bold;
+	cursor: pointer;
+}	
+	
+.profile-container {
+  padding: 20px;
+}
+
+.avatar-display {
+  margin-top: 20px;	
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+.avatar-image {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+}
+
+.form {
+  margin-top: 40px;	
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.input-group {
+  margin-bottom: 15px;
+  width: 90%;
+}
+
+.label {
+  font-weight: bold;
+}
+
+.info-input {
+  margin: 5px auto;
+  border: 1px solid #ccc;
+  padding: 5px;
+  border-radius: 4px;
+}
+
+.info {
+  margin-left: 5px;
+}
+
+.save-button {
+  margin-top: 30px;	
+  background-color: #1E90FF;
+  width: 320px;
+  height: 60px;
+  color: white;
+  padding: 10px;
+  border: none;
+  border-radius: 5px;
+  text-align: center;
+}
+</style>