qdintc/intc-vue-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 工作台页面，整体ui功能优化。

Browse Source
This commit is contained in:
tianyongbao
2025-11-14 02:13:02 +08:00
parent f4b0366a39
commit 459ab82cf2
62 changed files with 8331 additions and 3968 deletions
Download Patch File Download Diff File Expand all files Collapse all files

263
src/pages/login.vue
View File

@@ -1,41 +1,57 @@
<template>
<view class="normal-login-container">
<view class="logo-content align-center justify-center flex">
<image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
</image>
<view class="background-decoration"></view>
<view class="logo-content">
<view class="logo-wrapper">
<image class="logo-image" :src="globalConfig.appInfo.logo" mode="aspectFit"></image>
</view>
<text class="title">智聪记账管理平台</text>
<text class="subtitle">专业的财务管理工具</text>
</view>
<view class="login-form-content">
<view class="input-item flex align-center">
<view class="iconfont icon-user icon"></view>
<input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
</view>
<view class="input-item flex align-center">
<view class="iconfont icon-password icon"></view>
<input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
</view>
<view class="flex align-center" style="margin-left: 5px;">
<up-checkbox
:customStyle="{marginBottom: '8px'}"
label="记住密码"
name="agree"
usedAlone
@change="rememberMeChange()"
v-model:checked="rememberMe"
>
</up-checkbox>
</view>
<view class="action-btn">
<button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
<view class="form-card">
<view class="input-item">
<view class="input-icon">
<uni-icons type="person" size="20" color="#667eea"></uni-icons>
</view>
<input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
</view>
<view class="input-item">
<view class="input-icon">
<uni-icons type="locked" size="20" color="#667eea"></uni-icons>
</view>
<input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
</view>
<view class="remember-section">
<up-checkbox
:customStyle="{marginBottom: '8px'}"
label="记住密码"
name="agree"
usedAlone
@change="rememberMeChange()"
v-model:checked="rememberMe"
>
</up-checkbox>
</view>
<view class="action-btn">
<button @click="handleLogin" class="login-btn">
<text class="btn-text">登录</text>
</button>
</view>
</view>
</view>
<view class="xieyi text-center">
<text @click="handleRegister" class="text-blue">立即注册 </text>
<text class="text-grey1">&nbsp;&nbsp;</text>
<text @click="handleWebsite" class="text-blue">官方网站</text>
<text class="text-grey1">&nbsp;&nbsp;</text>
<text @click="handleUserAgrement" class="text-blue">用户服务协议</text>
<view class="footer-links">
<text @click="handleRegister" class="link-item">立即注册</text>
<text class="separator">·</text>
<text @click="handleWebsite" class="link-item">官方网站</text>
<text class="separator">·</text>
<text @click="handleUserAgrement" class="link-item">服务协议</text>
</view>
</view>
</template>
@@ -162,78 +178,177 @@ function handleUserAgrement() {
getCode();
</script>
<style lang="scss">
<style lang="scss" scoped>
page {
background-color: #ffffff;
display: flex;
flex-direction: column;
box-sizing: border-box;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100%;
height: auto;
}
.normal-login-container {
width: 100%;
display: flex;
flex-direction: column;
position: relative;
.background-decoration {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
pointer-events: none;
}
.logo-content {
width: 100%;
font-size: 21px;
text-align: center;
padding-top: 15%;
image {
border-radius: 4px;
padding-top: 120rpx;
position: relative;
z-index: 1;
.logo-wrapper {
display: inline-block;
margin-bottom: 32rpx;
.logo-image {
width: 140rpx;
height: 140rpx;
border-radius: 28rpx;
box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.2);
background: #ffffff;
padding: 20rpx;
}
}
.title {
margin-left: 10px;
display: block;
font-size: 48rpx;
font-weight: 700;
color: #ffffff;
margin-bottom: 12rpx;
}
.subtitle {
display: block;
font-size: 26rpx;
color: rgba(255, 255, 255, 0.8);
}
}
.login-form-content {
text-align: center;
margin: 20px auto;
margin-top: 15%;
width: 80%;
flex: 1;
margin-top: 80rpx;
padding: 0 48rpx;
position: relative;
z-index: 1;
.form-card {
background: #ffffff;
border-radius: 32rpx;
padding: 48rpx 40rpx;
box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.15);
}
.input-item {
margin: 20px auto;
background-color: #f5f6f7;
height: 45px;
border-radius: 20px;
margin-bottom: 32rpx;
background-color: #f5f7fa;
height: 96rpx;
border-radius: 48rpx;
display: flex;
align-items: center;
padding: 0 32rpx;
transition: all 0.3s ease;
&:focus-within {
background-color: #eff1f5;
box-shadow: 0 0 0 4rpx rgba(102, 126, 234, 0.1);
}
.icon {
font-size: 38rpx;
margin-left: 10px;
color: #999;
.input-icon {
margin-right: 20rpx;
display: flex;
align-items: center;
justify-content: center;
}
.input {
flex: 1;
font-size: 28rpx;
color: #303133;
&::placeholder {
color: #c0c4cc;
}
}
}
.remember-section {
margin-bottom: 40rpx;
padding-left: 8rpx;
}
.action-btn {
margin-top: 48rpx;
.login-btn {
width: 100%;
font-size: 14px;
line-height: 20px;
text-align: left;
padding-left: 15px;
height: 96rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 48rpx;
border: none;
box-shadow: 0 12rpx 32rpx rgba(102, 126, 234, 0.4);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
&::after {
border: none;
}
&:active {
transform: scale(0.98);
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
}
.btn-text {
color: #ffffff;
font-size: 32rpx;
font-weight: 600;
}
}
}
}
.login-btn {
margin-top: 40px;
height: 45px;
}
.xieyi {
color: #333;
margin-top: 20px;
}
.login-code {
height: 38px;
float: right;
.login-code-img {
height: 38px;
position: absolute;
margin-left: 10px;
width: 200rpx;
.footer-links {
text-align: center;
padding: 60rpx 0 80rpx;
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 16rpx;
.link-item {
color: rgba(255, 255, 255, 0.9);
font-size: 26rpx;
transition: all 0.3s ease;
&:active {
opacity: 0.7;
}
}
.separator {
color: rgba(255, 255, 255, 0.5);
font-size: 26rpx;
}
}
}
</style>