更新前端线自适应显示问题
This commit is contained in:
parent
1b78ad1626
commit
aecd161337
@ -1,6 +1,5 @@
|
||||
<template>
|
||||
<el-aside :width="width" class="common-aside">
|
||||
<!-- 加载状态 -->
|
||||
<el-aside :width="width" class="common-aside" :class="{ 'mobile-open': mobileOpen }">
|
||||
<div v-if="loading" class="loading-spinner">
|
||||
<i class="el-icon-loading" style="font-size: 24px; color: #fff"></i>
|
||||
</div>
|
||||
@ -27,7 +26,10 @@
|
||||
:default-active="route.path"
|
||||
>
|
||||
<!-- 菜单标题 -->
|
||||
<h3>{{ isCollapse ? "管理" : asideTitle }}</h3>
|
||||
<h3>
|
||||
{{ isCollapse ? "管理" : asideTitle }}
|
||||
<span class="mobile-close-btn" @click="closeMobile">✕</span>
|
||||
</h3>
|
||||
|
||||
<!-- 无模块时显示提示（在首页 /home 时不显示，避免重复） -->
|
||||
<el-menu-item v-if="!currentModule && route.path !== '/home'" index="/home">
|
||||
@ -144,6 +146,10 @@
|
||||
</template>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
|
||||
<teleport to="body">
|
||||
<div v-if="mobileOpen" class="aside-mobile-overlay" @click="closeMobile" />
|
||||
</teleport>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -165,6 +171,14 @@ const store = useAllDataStore();
|
||||
const isCollapse = computed(() => store.state.isCollapse);
|
||||
const width = computed(() => (store.state.isCollapse ? "64px" : "200px"));
|
||||
|
||||
const mobileOpen = ref(false);
|
||||
|
||||
function openMobile() { mobileOpen.value = true; }
|
||||
function closeMobile() { mobileOpen.value = false; }
|
||||
function toggleMobile() { mobileOpen.value = !mobileOpen.value; }
|
||||
|
||||
defineExpose({ openMobile, closeMobile, toggleMobile });
|
||||
|
||||
const asideBgColor = ref("#304156");
|
||||
const asideTextColor = ref("#bfcbd9");
|
||||
const activeColor = ref("#3973FF");
|
||||
@ -315,6 +329,8 @@ const list = computed(() => {
|
||||
});
|
||||
|
||||
const handleMenuSelect = (index) => {
|
||||
// 移动端点击菜单后关闭侧边栏
|
||||
closeMobile();
|
||||
if (index === "/home") {
|
||||
emit("menu-click", {
|
||||
path: "/home",
|
||||
@ -417,6 +433,38 @@ h3 {
|
||||
margin: 0;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.mobile-close-btn {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
transition: background 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.mobile-close-btn {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 菜单样式
|
||||
@ -522,7 +570,17 @@ h3 {
|
||||
// 响应式设计
|
||||
@media (max-width: 768px) {
|
||||
.common-aside {
|
||||
width: 100% !important;
|
||||
position: fixed !important;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
height: 100vh !important;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s ease, width 0.3s ease !important;
|
||||
|
||||
&.mobile-open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-menu) {
|
||||
@ -530,3 +588,18 @@ h3 {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.aside-mobile-overlay {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.aside-mobile-overlay {
|
||||
display: block;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
z-index: 999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -72,6 +72,8 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted } from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
|
||||
const emit = defineEmits(['collapse']);
|
||||
import { useAllDataStore, useMenuStore, useTabsStore } from "@/stores";
|
||||
import { useAuthStore } from "@/stores/auth";
|
||||
import { logout, getCurrentUser } from "@/api/login";
|
||||
@ -198,7 +200,11 @@ const roleLabel = computed(() => {
|
||||
});
|
||||
|
||||
const handleCollapse = () => {
|
||||
store.state.isCollapse = !store.state.isCollapse;
|
||||
if (window.innerWidth <= 768) {
|
||||
emit('collapse');
|
||||
} else {
|
||||
store.state.isCollapse = !store.state.isCollapse;
|
||||
}
|
||||
};
|
||||
|
||||
const goHome = () => {
|
||||
|
||||
@ -10,6 +10,7 @@ import { ElMessage } from 'element-plus';
|
||||
const tabsStore = useTabsStore();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const asideRef = ref(null);
|
||||
const defaultDashboardPath = '/home';
|
||||
|
||||
// 根据当前路由恢复 tab（刷新时使用）
|
||||
@ -379,10 +380,12 @@ const canCloseRight = computed(() => {
|
||||
<template>
|
||||
<div class="common-layout">
|
||||
<el-container class="main-container">
|
||||
<common-aside @menu-click="handleAsideMenuClick" />
|
||||
<div class="aside-wrapper">
|
||||
<common-aside ref="asideRef" @menu-click="handleAsideMenuClick" />
|
||||
</div>
|
||||
<el-container>
|
||||
<el-header class="main-header">
|
||||
<common-header />
|
||||
<common-header @collapse="() => asideRef?.toggleMobile()" />
|
||||
</el-header>
|
||||
<el-main class="right-main">
|
||||
<div class="multi-tabs-wrapper">
|
||||
@ -496,6 +499,22 @@ const canCloseRight = computed(() => {
|
||||
visibility: visible !important;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.aside-wrapper {
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.aside-wrapper {
|
||||
width: 0 !important;
|
||||
overflow: visible;
|
||||
}
|
||||
.right-main {
|
||||
padding: 12px 8px !important;
|
||||
}
|
||||
}
|
||||
.main-header {
|
||||
background-color: var(--header-bg-color, #3973ff);
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
@ -494,7 +494,7 @@ async function handleReplenish() {
|
||||
<el-button type="success" @click="openAddDialog('batch')"
|
||||
>批量添加</el-button
|
||||
>
|
||||
<el-button @click="markExtractForSelected">批量标记提取</el-button>
|
||||
<el-button @click="markExtractForSelected">批量提取</el-button>
|
||||
<el-button @click="apiDocVisible = true">接口说明</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -438,7 +438,7 @@ function copyCardInfo(row) {
|
||||
<el-button type="success" @click="openAddDialog('batch')"
|
||||
>批量添加</el-button
|
||||
>
|
||||
<el-button @click="markExtractForSelected">批量标记提取</el-button>
|
||||
<el-button @click="markExtractForSelected">批量提取</el-button>
|
||||
<el-button @click="apiDocVisible = true">接口说明</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -437,7 +437,7 @@ function copyCardInfo(row) {
|
||||
<el-button type="success" @click="openAddDialog('batch')"
|
||||
>批量添加</el-button
|
||||
>
|
||||
<el-button @click="markExtractForSelected">批量标记提取</el-button>
|
||||
<el-button @click="markExtractForSelected">批量提取</el-button>
|
||||
<el-button @click="apiDocVisible = true">接口说明</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="statistics-container">
|
||||
<el-row :gutter="20" class="data-overview">
|
||||
<el-col :span="6" v-for="item in summaryData" :key="item.title">
|
||||
<el-col :xs="12" :sm="12" :md="6" v-for="item in summaryData" :key="item.title">
|
||||
<el-card shadow="hover" class="data-card">
|
||||
<div class="card-content">
|
||||
<div class="icon-box" :style="{ backgroundColor: item.color }">
|
||||
@ -21,12 +21,12 @@
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20" class="charts-row">
|
||||
<el-col :span="16">
|
||||
<el-col :xs="24" :sm="24" :md="16">
|
||||
<el-card shadow="hover" header="用户增长趋势">
|
||||
<div ref="lineChartRef" class="chart-box"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :xs="24" :sm="24" :md="8">
|
||||
<el-card shadow="hover" header="用户等级分布">
|
||||
<div ref="pieChartRef" class="chart-box"></div>
|
||||
</el-card>
|
||||
@ -95,12 +95,17 @@ const initCharts = () => {
|
||||
pieChartInstance.value = echarts.init(pieChartRef.value);
|
||||
pieChartInstance.value.setOption({
|
||||
tooltip: { trigger: 'item' },
|
||||
legend: { bottom: '0%', left: 'center' },
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
right: '5%',
|
||||
top: 'center',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '等级分布',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
center: ['35%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
|
||||
label: { show: false },
|
||||
@ -141,6 +146,8 @@ onUnmounted(() => {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.data-card {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.card-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -148,6 +155,7 @@ onUnmounted(() => {
|
||||
.icon-box {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -158,9 +166,13 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.text-box {
|
||||
min-width: 0;
|
||||
.title {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.value {
|
||||
font-size: 24px;
|
||||
@ -180,6 +192,9 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.charts-row {
|
||||
.el-col {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.chart-box {
|
||||
height: 350px;
|
||||
width: 100%;
|
||||
@ -187,6 +202,28 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.statistics-container {
|
||||
padding: 12px;
|
||||
|
||||
.data-overview .data-card .card-content {
|
||||
.icon-box {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
font-size: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.text-box .value {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.charts-row .chart-box {
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 深度修改 Element Plus 卡片头部样式
|
||||
:deep(.el-card__header) {
|
||||
font-weight: bold;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="statistics-container">
|
||||
<el-row :gutter="20" class="data-overview">
|
||||
<el-col :span="6" v-for="item in summaryData" :key="item.title">
|
||||
<el-col :xs="12" :sm="12" :md="6" v-for="item in summaryData" :key="item.title">
|
||||
<el-card shadow="hover" class="data-card">
|
||||
<div class="card-content">
|
||||
<div class="icon-box" :style="{ backgroundColor: item.color }">
|
||||
@ -21,12 +21,12 @@
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20" class="charts-row">
|
||||
<el-col :span="16">
|
||||
<el-col :xs="24" :sm="24" :md="16">
|
||||
<el-card shadow="hover" header="用户增长趋势">
|
||||
<div ref="lineChartRef" class="chart-box"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :xs="24" :sm="24" :md="8">
|
||||
<el-card shadow="hover" header="用户等级分布">
|
||||
<div ref="pieChartRef" class="chart-box"></div>
|
||||
</el-card>
|
||||
@ -36,10 +36,11 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, shallowRef } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import { User, Pointer, Connection, Histogram } from "@element-plus/icons-vue";
|
||||
import { ref, onMounted, onUnmounted, shallowRef } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { User, Pointer, Connection, Histogram } from '@element-plus/icons-vue';
|
||||
|
||||
// --- 类型定义 ---
|
||||
interface SummaryItem {
|
||||
title: string;
|
||||
value: number;
|
||||
@ -49,96 +50,78 @@ interface SummaryItem {
|
||||
isUp: boolean;
|
||||
}
|
||||
|
||||
// --- 响应式数据 ---
|
||||
const lineChartRef = ref<HTMLElement | null>(null);
|
||||
const pieChartRef = ref<HTMLElement | null>(null);
|
||||
const lineChartInstance = shallowRef<echarts.ECharts | null>(null);
|
||||
const pieChartInstance = shallowRef<echarts.ECharts | null>(null);
|
||||
|
||||
const summaryData = ref<SummaryItem[]>([
|
||||
{
|
||||
title: "总用户数",
|
||||
value: 12840,
|
||||
icon: User,
|
||||
color: "#3973FF",
|
||||
percentage: 12,
|
||||
isUp: true,
|
||||
},
|
||||
{
|
||||
title: "今日新增",
|
||||
value: 156,
|
||||
icon: Pointer,
|
||||
color: "#67C23A",
|
||||
percentage: 5,
|
||||
isUp: true,
|
||||
},
|
||||
{
|
||||
title: "活跃用户",
|
||||
value: 3420,
|
||||
icon: Connection,
|
||||
color: "#E6A23C",
|
||||
percentage: 2,
|
||||
isUp: false,
|
||||
},
|
||||
{
|
||||
title: "留存率",
|
||||
value: 85,
|
||||
icon: Histogram,
|
||||
color: "#F56C6C",
|
||||
percentage: 1,
|
||||
isUp: true,
|
||||
},
|
||||
{ title: '总用户数', value: 12840, icon: User, color: '#3973FF', percentage: 12, isUp: true },
|
||||
{ title: '今日新增', value: 156, icon: Pointer, color: '#67C23A', percentage: 5, isUp: true },
|
||||
{ title: '活跃用户', value: 3420, icon: Connection, color: '#E6A23C', percentage: 2, isUp: false },
|
||||
{ title: '留存率', value: 85, icon: Histogram, color: '#F56C6C', percentage: 1, isUp: true },
|
||||
]);
|
||||
|
||||
// --- 初始化图表 ---
|
||||
const initCharts = () => {
|
||||
// 折线图配置
|
||||
if (lineChartRef.value) {
|
||||
lineChartInstance.value = echarts.init(lineChartRef.value);
|
||||
lineChartInstance.value.setOption({
|
||||
tooltip: { trigger: "axis" },
|
||||
grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
|
||||
tooltip: { trigger: 'axis' },
|
||||
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
||||
xAxis: {
|
||||
type: "category",
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
},
|
||||
yAxis: { type: "value" },
|
||||
yAxis: { type: 'value' },
|
||||
series: [
|
||||
{
|
||||
name: "新增用户",
|
||||
type: "line",
|
||||
name: '新增用户',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: [120, 132, 101, 134, 90, 230, 210],
|
||||
areaStyle: { opacity: 0.3 },
|
||||
itemStyle: { color: "#3973FF" },
|
||||
},
|
||||
],
|
||||
itemStyle: { color: '#3973FF' }
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
// 饼图配置
|
||||
if (pieChartRef.value) {
|
||||
pieChartInstance.value = echarts.init(pieChartRef.value);
|
||||
pieChartInstance.value.setOption({
|
||||
tooltip: { trigger: "item" },
|
||||
legend: { bottom: "0%", left: "center" },
|
||||
tooltip: { trigger: 'item' },
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
right: '5%',
|
||||
top: 'center',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "等级分布",
|
||||
type: "pie",
|
||||
radius: ["40%", "70%"],
|
||||
name: '等级分布',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
center: ['35%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: { borderRadius: 10, borderColor: "#fff", borderWidth: 2 },
|
||||
itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
|
||||
label: { show: false },
|
||||
data: [
|
||||
{ value: 1048, name: "普通用户" },
|
||||
{ value: 735, name: "VIP会员" },
|
||||
{ value: 580, name: "超级管理员" },
|
||||
{ value: 484, name: "运营人员" },
|
||||
],
|
||||
},
|
||||
],
|
||||
{ value: 1048, name: '普通用户' },
|
||||
{ value: 735, name: 'VIP会员' },
|
||||
{ value: 580, name: '超级管理员' },
|
||||
{ value: 484, name: '运营人员' }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// --- 生命周期与自适应 ---
|
||||
const handleResize = () => {
|
||||
lineChartInstance.value?.resize();
|
||||
pieChartInstance.value?.resize();
|
||||
@ -146,23 +129,25 @@ const handleResize = () => {
|
||||
|
||||
onMounted(() => {
|
||||
initCharts();
|
||||
window.addEventListener("resize", handleResize);
|
||||
window.addEventListener('resize', handleResize);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener("resize", handleResize);
|
||||
window.removeEventListener('resize', handleResize);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.statistics-container {
|
||||
padding: 20px;
|
||||
min-height: calc(100vh - 180px);
|
||||
min-height: 100vh;
|
||||
|
||||
.data-overview {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.data-card {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.card-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -170,6 +155,7 @@ onUnmounted(() => {
|
||||
.icon-box {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -180,9 +166,13 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.text-box {
|
||||
min-width: 0;
|
||||
.title {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.value {
|
||||
font-size: 24px;
|
||||
@ -192,16 +182,9 @@ onUnmounted(() => {
|
||||
}
|
||||
.trend {
|
||||
font-size: 12px;
|
||||
&.up {
|
||||
color: #67c23a;
|
||||
}
|
||||
&.down {
|
||||
color: #f56c6c;
|
||||
}
|
||||
span {
|
||||
color: #909399;
|
||||
margin-left: 4px;
|
||||
}
|
||||
&.up { color: #67c23a; }
|
||||
&.down { color: #f56c6c; }
|
||||
span { color: #909399; margin-left: 4px; }
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -209,6 +192,9 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.charts-row {
|
||||
.el-col {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.chart-box {
|
||||
height: 350px;
|
||||
width: 100%;
|
||||
@ -216,9 +202,32 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.statistics-container {
|
||||
padding: 12px;
|
||||
|
||||
.data-overview .data-card .card-content {
|
||||
.icon-box {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
font-size: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.text-box .value {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.charts-row .chart-box {
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 深度修改 Element Plus 卡片头部样式
|
||||
:deep(.el-card__header) {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@ -544,7 +544,9 @@ const clearCache = async () => {
|
||||
<style scoped>
|
||||
.login-bg {
|
||||
min-height: 100vh;
|
||||
width: 100vw;
|
||||
width: 100%;
|
||||
padding: 24px;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(120deg, #e6f0ff 0%, #f5fcff 55%, #eaf6ff 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -555,7 +557,8 @@ const clearCache = async () => {
|
||||
|
||||
.login-card {
|
||||
display: flex;
|
||||
min-width: 770px;
|
||||
width: min(100%, 920px);
|
||||
max-width: 920px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 22px;
|
||||
box-shadow:
|
||||
@ -617,7 +620,7 @@ const clearCache = async () => {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
min-width: 320px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
@ -936,24 +939,117 @@ const clearCache = async () => {
|
||||
}
|
||||
|
||||
@media (max-width: 940px) {
|
||||
.login-bg {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
min-width: 330px;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.login-side {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
border-radius: 0 0 18px 18px;
|
||||
padding: 32px 18px 24px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.brand {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.illus {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.login-panel {
|
||||
padding: 30px 22px 34px 22px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
padding-top: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.login-bg {
|
||||
padding: 12px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
min-height: calc(100vh - 24px);
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.login-side {
|
||||
padding: 24px 16px 20px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
gap: 10px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
font-size: 18px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.login-panel {
|
||||
padding: 24px 16px 28px;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.login-desc {
|
||||
font-size: 14px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.input,
|
||||
.code-btn,
|
||||
.login-btn {
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.remember-me-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.action-links {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 420px) {
|
||||
.login-bg {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
min-height: 100vh;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.login-side {
|
||||
padding: 20px 14px 18px;
|
||||
}
|
||||
|
||||
.login-panel {
|
||||
padding: 20px 14px 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user