llll/information.vue

<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>