|
@@ -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>
|