样式修正,支持配置登录方式、icon等

This commit is contained in:
2025-12-24 14:12:44 +08:00
parent 3d1e19030a
commit 3499a516fe
33 changed files with 246 additions and 345 deletions

View File

@@ -130,18 +130,18 @@ onMounted(() => {
color: #606266;
&:hover {
color: #409eff;
color: #C62828;
}
&.is-active {
color: #409eff;
color: #C62828;
font-weight: 600;
}
}
.el-tabs__active-bar {
height: 3px;
background: linear-gradient(90deg, #409eff 0%, #66b1ff 100%);
background: linear-gradient(90deg, #C62828 0%, #66b1ff 100%);
}
}
@@ -184,7 +184,7 @@ onMounted(() => {
&:hover {
background: linear-gradient(90deg, #e3f2fd 0%, #f5f5f5 100%);
border-left-color: #409eff;
border-left-color: #C62828;
transform: translateX(4px);
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
@@ -227,13 +227,13 @@ onMounted(() => {
white-space: nowrap;
&:hover {
color: #409eff;
color: #C62828;
}
}
.item-arrow {
font-size: 16px;
color: #409eff;
color: #C62828;
opacity: 0;
transition: all 0.3s ease;
flex-shrink: 0;

View File

@@ -104,17 +104,19 @@
</el-table>
<!-- 分页 -->
<el-pagination
v-if="total > 0"
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:total="total"
:page-sizes="[10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
class="pagination"
@size-change="handlePageChange"
@current-change="handlePageChange"
/>
<div class="pagination-container" v-if="total >= 0">
<el-pagination
v-if="total > 0"
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:total="total"
:page-sizes="[10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
class="pagination"
@size-change="handlePageChange"
@current-change="handlePageChange"
/>
</div>
</div>
</template>

View File

@@ -20,9 +20,9 @@
<div class="login-header">
<div class="logo-section">
<div class="logo">
<img src="@/assets/imgs/logo-icon.svg" alt="Logo" />
<img :src="loginLogoUrl" alt="Logo" />
</div>
<h1 class="platform-title">红色思政学习平台</h1>
<h1 class="platform-title">{{ systemName }}</h1>
</div>
</div>
@@ -194,6 +194,8 @@ const store = useStore();
// 获取系统配置
const smsLoginEnabled = computed(() => store.getters['system/smsLoginEnabled']);
const emailLoginEnabled = computed(() => store.getters['system/emailLoginEnabled']);
const systemName = computed(() => store.getters['system/systemName']);
const loginLogoUrl = computed(() => store.getters['system/loginLogoUrl']);
// 是否支持密码找回
const canResetPassword = computed(() => smsLoginEnabled.value || emailLoginEnabled.value);
@@ -554,16 +556,14 @@ onUnmounted(() => {
.logo {
width: 36px;
height: 36px;
background: #C62828;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
padding: 3px;
img {
width: 30px;
height: 30px;
width: 100%;
height: 100%;
object-fit: contain;
}
}

View File

@@ -20,9 +20,9 @@
<div class="forgot-password-header">
<div class="logo-section">
<div class="logo">
<img src="@/assets/imgs/logo-icon.svg" alt="Logo" />
<img :src="loginLogoUrl" alt="Logo" />
</div>
<h1 class="platform-title">红色思政学习平台</h1>
<h1 class="platform-title">{{ systemName }}</h1>
</div>
<h2 class="forgot-password-title">找回密码</h2>
</div>
@@ -193,6 +193,8 @@ const store = useStore();
// 获取系统配置
const smsLoginEnabled = computed(() => store.getters['system/smsLoginEnabled']);
const emailLoginEnabled = computed(() => store.getters['system/emailLoginEnabled']);
const systemName = computed(() => store.getters['system/systemName']);
const loginLogoUrl = computed(() => store.getters['system/loginLogoUrl']);
// 是否支持密码找回(至少一种方式启用)
const canResetPassword = computed(() => smsLoginEnabled.value || emailLoginEnabled.value);
@@ -571,22 +573,21 @@ onUnmounted(() => {
.logo-section {
display: flex;
align-items: center;
justify-content: center;
gap: 11px;
margin-bottom: 16px;
.logo {
width: 36px;
height: 36px;
background: #C62828;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
padding: 3px;
img {
width: 30px;
height: 30px;
width: 100%;
height: 100%;
object-fit: contain;
}
}
@@ -753,12 +754,6 @@ onUnmounted(() => {
text-align: center;
margin-bottom: 32px;
.logo img {
width: 64px;
height: 64px;
margin-bottom: 16px;
}
.title {
font-size: 24px;
font-weight: 600;

View File

@@ -20,9 +20,9 @@
<div class="login-header">
<div class="logo-section">
<div class="logo">
<img src="@/assets/imgs/logo-icon.svg" alt="Logo" />
<img :src="loginLogoUrl" alt="Logo" />
</div>
<h1 class="platform-title">红色思政学习平台</h1>
<h1 class="platform-title">{{ systemName }}</h1>
</div>
</div>
@@ -221,6 +221,8 @@ const store = useStore();
// 获取系统配置
const smsLoginEnabled = computed(() => store.getters['system/smsLoginEnabled']);
const emailLoginEnabled = computed(() => store.getters['system/emailLoginEnabled']);
const systemName = computed(() => store.getters['system/systemName']);
const loginLogoUrl = computed(() => store.getters['system/loginLogoUrl']);
// 是否显示验证码登录选项卡
const showCaptchaLoginTab = computed(() => smsLoginEnabled.value || emailLoginEnabled.value);
@@ -609,16 +611,14 @@ onMounted(() => {
.logo {
width: 36px;
height: 36px;
background: #C62828;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
padding: 3px;
img {
width: 30px;
height: 30px;
width: 100%;
height: 100%;
object-fit: contain;
}
}

View File

@@ -20,9 +20,9 @@
<div class="login-header">
<div class="logo-section">
<div class="logo">
<img src="@/assets/imgs/logo-icon.svg" alt="Logo" />
<img :src="loginLogoUrl" alt="Logo" />
</div>
<h1 class="platform-title">红色思政学习平台</h1>
<h1 class="platform-title">{{ systemName }}</h1>
</div>
</div>
@@ -221,6 +221,8 @@ const store = useStore();
// 获取系统配置(必须先定义,因为后续初始化会用到)
const smsLoginEnabled = computed(() => store.getters['system/smsLoginEnabled']);
const emailLoginEnabled = computed(() => store.getters['system/emailLoginEnabled']);
const systemName = computed(() => store.getters['system/systemName']);
const loginLogoUrl = computed(() => store.getters['system/loginLogoUrl']);
// 登录模式password-密码登录captcha-验证码登录
const loginMode = ref<'password' | 'captcha'>('password');
@@ -612,16 +614,14 @@ onMounted(() => {
.logo {
width: 36px;
height: 36px;
background: #C62828;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
padding: 3px;
img {
width: 30px;
height: 30px;
width: 100%;
height: 100%;
object-fit: contain;
}
}

View File

@@ -20,9 +20,9 @@
<div class="login-header">
<div class="logo-section">
<div class="logo">
<img src="@/assets/imgs/logo-icon.svg" alt="Logo" />
<img :src="loginLogoUrl" alt="Logo" />
</div>
<h1 class="platform-title">红色思政学习平台</h1>
<h1 class="platform-title">{{ systemName }}</h1>
</div>
</div>
@@ -208,6 +208,8 @@ const store = useStore();
// 获取系统配置
const smsLoginEnabled = computed(() => store.getters['system/smsLoginEnabled']);
const emailLoginEnabled = computed(() => store.getters['system/emailLoginEnabled']);
const systemName = computed(() => store.getters['system/systemName']);
const loginLogoUrl = computed(() => store.getters['system/loginLogoUrl']);
// 注册方式
const registerType = ref<RegisterType>(RegisterType.USERNAME);
@@ -600,16 +602,14 @@ onUnmounted(() => {
.logo {
width: 36px;
height: 36px;
background: #C62828;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
padding: 3px;
img {
width: 30px;
height: 30px;
width: 100%;
height: 100%;
object-fit: contain;
}
}

View File

@@ -20,9 +20,9 @@
<div class="register-header">
<div class="logo-section">
<div class="logo">
<img src="@/assets/imgs/logo-icon.svg" alt="Logo" />
<img :src="loginLogoUrl" alt="Logo" />
</div>
<h1 class="platform-title">红色思政学习平台</h1>
<h1 class="platform-title">{{ systemName }}</h1>
</div>
<h2 class="register-title">{{ registerTypeTitle }}</h2>
@@ -215,6 +215,8 @@ const store = useStore();
// 获取系统配置
const smsLoginEnabled = computed(() => store.getters['system/smsLoginEnabled']);
const emailLoginEnabled = computed(() => store.getters['system/emailLoginEnabled']);
const systemName = computed(() => store.getters['system/systemName']);
const loginLogoUrl = computed(() => store.getters['system/loginLogoUrl']);
// 注册方式
const registerType = ref<RegisterType>(RegisterType.USERNAME);
@@ -617,16 +619,14 @@ onUnmounted(() => {
.logo {
width: 36px;
height: 36px;
background: #C62828;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
padding: 3px;
img {
width: 30px;
height: 30px;
width: 100%;
height: 100%;
object-fit: contain;
}
}

View File

@@ -886,6 +886,10 @@ function getItemStatusType(status?: number): 'info' | 'warning' | 'success' {
.resource-action {
flex-shrink: 0;
button {
background-color: #C62828;
border: none;
}
}
}