vue2-template/src/views/AboutView.vue

<!--
<template>
  <div class="login-container">
    <div class="login-box">
      <h2>登录</h2>
      &lt;!&ndash; 用户名输入框 &ndash;&gt;
      <div class="input-group">
        <label for="username">用户名</label>
        <input type="text" id="username" placeholder="请输入用户名" required />
      </div>

      &lt;!&ndash; 密码输入框 &ndash;&gt;
      <div class="input-group">
        <label for="password">密码</label>
        <input type="password" id="password" placeholder="请输入密码" required />
      </div>

      &lt;!&ndash; 提交按钮 &ndash;&gt;
      <button type="submit" class="login-btn">登录</button>

      &lt;!&ndash; 忘记密码和注册链接 &ndash;&gt;
      <div class="footer">
        <a href="#">忘记密码?</a>
        <a href="#">没有账户? 注册</a>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 容器居中并覆盖整个屏幕 */
.login-container {
  display: flex;  /* 使用flex布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 满屏高度 */
  background-color: #f5f5f5; /* 背景颜色 */
}

/* 登录框的样式 */
.login-box {
  background: #fff; /* 背景白色 */
  padding: 30px; /* 内边距 */
  border-radius: 8px; /* 圆角边框 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  width: 300px; /* 固定宽度 */
  text-align: center; /* 内容居中 */
}

/* 标题样式 */
.login-box h2 {
  margin-bottom: 20px; /* 下边距 */
  font-family: 'Arial', sans-serif; /* 字体 */
  color: #333; /* 字体颜色 */
}

/* 输入框的通用样式 */
.input-group {
  margin-bottom: 20px; /* 每个输入框下方的间距 */
  text-align: left; /* 标签左对齐 */
}

.input-group label {
  font-size: 14px; /* 标签字体大小 */
  color: #555; /* 标签字体颜色 */
  display: block; /* 标签显示为块级元素 */
  margin-bottom: 5px; /* 标签与输入框之间的间距 */
}

.input-group input {
  width: 100%; /* 输入框宽度100% */
  padding: 10px; /* 内边距 */
  border: 1px solid #ccc; /* 边框 */
  border-radius: 4px; /* 圆角边框 */
  box-sizing: border-box; /* 包含内边距和边框在内的宽度计算 */
  font-size: 16px; /* 输入框字体大小 */
  outline: none; /* 去除点击时的边框 */
}

.input-group input:focus {
  border-color: #66afe9; /* 聚焦时边框颜色 */
  box-shadow: 0 0 5px rgba(102, 175, 233, 0.6); /* 聚焦时阴影效果 */
}

/* 登录按钮样式 */
.login-btn {
  background-color: #4CAF50; /* 按钮背景色 */
  color: white; /* 按钮文字颜色 */
  padding: 10px 20px; /* 按钮内边距 */
  border: none; /* 去掉默认边框 */
  border-radius: 4px; /* 圆角 */
  width: 100%; /* 按钮宽度100% */
  cursor: pointer; /* 鼠标悬停时显示为指针 */
  font-size: 16px; /* 按钮文字大小 */
  margin-top: 10px; /* 按钮顶部间距 */
}

.login-btn:hover {
  background-color: #45a049; /* 按钮悬停时背景色 */
}

/* 底部的链接样式 */
.footer {
  margin-top: 15px; /* 上边距 */
}

.footer a {
  color: #007bff; /* 链接颜色 */
  text-decoration: none; /* 去掉下划线 */
  font-size: 14px; /* 链接文字大小 */
  margin: 0 10px; /* 链接间距 */
}

.footer a:hover {
  text-decoration: underline; /* 悬停时显示下划线 */
}
</style>
-->


<template>

  <Father></Father>

</template>
<script setup lang="ts">
import Father from "@/views/Father.vue";
</script>