Quellcode durchsuchen

feat(mobile): 调整登录页面logo位置到文字左侧

- 修改登录页面布局,将logo图片放置在标题文字左侧
- 使用flexbox水平布局,logo和文字左右排列
- 添加新的logo图片文件 logo-1.png
- 优化视觉层次和布局美观性

影响范围:移动端登录页面
zlwu vor 1 Jahr
Ursprung
Commit
975a4f2e33
2 geänderte Dateien mit 215 neuen und 0 gelöschten Zeilen
  1. 215 0
      mobile/src/pages/login/index.vue
  2. BIN
      mobile/src/static/logo-1.png

+ 215 - 0
mobile/src/pages/login/index.vue

@@ -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">&copy; 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>

BIN
mobile/src/static/logo-1.png