feat(mobile): 调整登录页面logo位置到文字左侧
- 修改登录页面布局，将logo图片放置在标题文字左侧 - 使用flexbox水平布局，logo和文字左右排列 - 添加新的logo图片文件 logo-1.png - 优化视觉层次和布局美观性 影响范围：移动端登录页面
This commit is contained in:
zlwu committed
1 parent
28232d5d46
commit
975a4f2e33
2 files changed
+215
No files matched your search
@@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<view class="login-bg">
|
||||
<view class="login-card">
|
||||
<!-- Logo和标题区域 -->
|
||||
<view class="login-header">
|
||||
<view class="login-logo">
|
||||
<image class="logo-img" src="/static/logo-2.png" mode="aspectFit" />
|
||||
</view>
|
||||
<view class="login-text">
|
||||
<view class="login-title">智慧校园</view>
|
||||
<view class="login-subtitle">杭州第一技师学院</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 登录表单 -->
|
||||
<view class="login-form">
|
||||
<!-- 账号输入框 -->
|
||||
<view class="input-wrapper">
|
||||
<u-input
|
||||
v-model="username"
|
||||
placeholder="账号"
|
||||
type="text"
|
||||
:border="true"
|
||||
:custom-style="inputStyle"
|
||||
placeholder-style="color: #999; font-size: 16px"
|
||||
>
|
||||
<template #prefix>
|
||||
<text class="iconfont icon-user input-prefix-icon"></text>
|
||||
</template>
|
||||
</u-input>
|
||||
</view>
|
||||
<!-- 密码输入框 -->
|
||||
<view class="input-wrapper">
|
||||
<u-input
|
||||
v-model="password"
|
||||
placeholder="密码"
|
||||
type="password"
|
||||
:border="true"
|
||||
:custom-style="inputStyle"
|
||||
placeholder-style="color: #999; font-size: 16px"
|
||||
>
|
||||
<template #prefix>
|
||||
<text class="iconfont icon-lock input-prefix-icon"></text>
|
||||
</template>
|
||||
</u-input>
|
||||
</view>
|
||||
<!-- 登录按钮 -->
|
||||
<u-button type="primary" :custom-style="buttonStyle" @click="onLogin">
|
||||
<view class="login-btn-content">
|
||||
<!-- <text class="iconfont icon-login btn-icon"></text> -->
|
||||
<text class="login-btn-text">登录</text>
|
||||
</view>
|
||||
</u-button>
|
||||
</view>
|
||||
<!-- 版权信息 -->
|
||||
<view class="login-copyright">© 2025 杭州第一技师学院 All Rights Reserved.</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'LoginPage',
|
||||
data() {
|
||||
return {
|
||||
username: '',
|
||||
password: '',
|
||||
// uview-plus 输入框样式
|
||||
inputStyle: {
|
||||
height: '44px',
|
||||
borderRadius: '8px',
|
||||
borderColor: '#e3e8f0',
|
||||
backgroundColor: '#fff',
|
||||
fontSize: '16px',
|
||||
color: '#222',
|
||||
padding: '0 12px 0 12px',
|
||||
},
|
||||
// uview-plus 按钮样式
|
||||
buttonStyle: {
|
||||
width: '100%',
|
||||
height: '48px',
|
||||
borderRadius: '8px',
|
||||
backgroundColor: '#5d87ff',
|
||||
marginTop: '8px',
|
||||
boxShadow: '0 4px 12px 0 rgba(93, 135, 255, 0.3)',
|
||||
border: 'none',
|
||||
fontSize: '18px',
|
||||
fontWeight: '600',
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onLogin() {
|
||||
if (!this.username) {
|
||||
uni.showToast({ title: '请输入账号', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
if (!this.password) {
|
||||
uni.showToast({ title: '请输入密码', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
uni.showToast({ title: '仅原型演示，无实际登录', icon: 'success' });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.login-bg {
|
||||
min-height: 100vh;
|
||||
// background: linear-gradient(135deg, #5d87ff 0%, #a3bfff 100%);
|
||||
//background: linear-gradient(135deg, #ffffff 0%, #e5e9f1 100%);
|
||||
background-image: url('/static/logo-01.jpg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.login-card {
|
||||
width: 90vw;
|
||||
max-width: 350px;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 8px 32px 0 rgba(93, 135, 255, 0.15);
|
||||
padding: 36px 20px 24px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.login-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
gap: 16px;
|
||||
}
|
||||
.login-logo {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.logo-img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 12px;
|
||||
background: #f4f6fa;
|
||||
}
|
||||
.login-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.login-title {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
color: #222;
|
||||
margin-bottom: 4px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.login-subtitle {
|
||||
font-size: 14px;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity, 1));
|
||||
line-height: 1.2;
|
||||
}
|
||||
.login-form {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* uview-plus 输入框容器 */
|
||||
.input-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* uview-plus 输入框前缀图标 */
|
||||
.input-prefix-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 8px;
|
||||
filter: brightness(0) saturate(100%) invert(67%) sepia(8%) saturate(1179%) hue-rotate(195deg)
|
||||
brightness(95%) contrast(88%);
|
||||
}
|
||||
|
||||
/* uview-plus 按钮内容布局 */
|
||||
.login-btn-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* 按钮图标 */
|
||||
.btn-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
filter: brightness(0) saturate(100%) invert(100%);
|
||||
}
|
||||
|
||||
/* 按钮文字 */
|
||||
.login-btn-text {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.login-copyright {
|
||||
margin-top: 28px;
|
||||
font-size: 12px;
|
||||
color: #b0b8c9;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 274 KiB |
Reference in new issue
Block a user