<script setup>
import { ref } from 'vue'

const user = ref({
  name: '张三',
  email: 'zhangsan@example.com',
  studentId: '2024001',
  major: '计算机科学与技术',
  grade: '大二',
})
</script>

<template>
  <v-container>
    <v-row>
      <v-col cols="12" md="8" offset-md="2">
        <v-card>
          <v-card-title class="d-flex align-center">
            <v-icon class="mr-2">mdi-account</v-icon>
            个人资料
          </v-card-title>
          <v-card-text>
            <v-row>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="user.name"
                  label="姓名"
                  readonly
                  prepend-icon="mdi-account"
                />
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="user.email"
                  label="邮箱"
                  readonly
                  prepend-icon="mdi-email"
                />
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="user.studentId"
                  label="学号"
                  readonly
                  prepend-icon="mdi-card-account-details"
                />
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="user.major"
                  label="专业"
                  readonly
                  prepend-icon="mdi-school"
                />
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field
                  v-model="user.grade"
                  label="年级"
                  readonly
                  prepend-icon="mdi-account-group"
                />
              </v-col>
            </v-row>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>
