样式修正,支持配置登录方式、icon等
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -886,6 +886,10 @@ function getItemStatusType(status?: number): 'info' | 'warning' | 'success' {
|
||||
|
||||
.resource-action {
|
||||
flex-shrink: 0;
|
||||
button {
|
||||
background-color: #C62828;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user