2 Commits

  1. BIN
      src/assets/登录.png
  2. BIN
      src/assets/登录背景.png
  3. 26
      src/views/choujiang/Login.vue

BIN
src/assets/登录.png

Before

Width: 1920  |  Height: 1080  |  Size: 1.2 MiB

BIN
src/assets/登录背景.png

After

Width: 5760  |  Height: 3240  |  Size: 867 KiB

26
src/views/choujiang/Login.vue

@ -46,7 +46,7 @@ const handleLogin = () => {
</script> </script>
<style scoped> <style scoped>
.login-container { .login-container {
background-image: url('../../assets/loginback.png'); /* 确保路径正确 */
background-image: url('../../assets/登录背景.png'); /* 确保路径正确 */
background-position: center; background-position: center;
background-size: cover; background-size: cover;
height: 100vh; /* 确保背景图片覆盖整个视口高度 */ height: 100vh; /* 确保背景图片覆盖整个视口高度 */
@ -59,13 +59,13 @@ const handleLogin = () => {
.login-card { .login-card {
position: absolute; position: absolute;
top: 50%;
top: 55%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 300px; /* 设置固定宽度 */
height: 200px; /* 设置固定高度 */
padding: 2rem;
background: rgba(255, 255, 255, 0.8); /* 调整背景颜色为半透明白色 */
width: 450px; /* 增加卡片宽度 */
height: 285px;
padding: 2.5rem; /* 增加内边距 */
background: rgba(255, 255, 255, 0.3); /* 调整背景颜色为半透明白色 */
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
box-sizing: border-box; box-sizing: border-box;
@ -74,28 +74,28 @@ const handleLogin = () => {
input { input {
width: 100%; width: 100%;
padding: 0.8rem;
padding: 1.2rem;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 4px; border-radius: 4px;
font-size: 1rem;
margin-bottom: 2rem;
font-size: 1.3rem; /* 增大字体大小 */
margin-bottom: 2.5rem; /* 增加底部间距 */
box-sizing: border-box box-sizing: border-box
} }
.login-button { .login-button {
width: 100%; width: 100%;
padding: 0.8rem;
background-color: #42b983;
padding: 1.2rem; /* 增加按钮内边距 */
background-color: #e92821a3;
color: white; color: white;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
font-size: 1rem;
font-size: 1.3rem; /* 增大字体大小 */
cursor: pointer; cursor: pointer;
transition: background-color 0.3s; transition: background-color 0.3s;
box-sizing: border-box box-sizing: border-box
} }
.login-button:hover { .login-button:hover {
background-color: #359469;
transform: scale(1.03);
} }
</style> </style>
Loading…
Cancel
Save