forked from wangziqi/gongxue-base
style: tighten H5 guards and legacy student UI
This commit is contained in:
Codex
@@ -74,31 +74,36 @@
|
||||
@media (min-width: 900px) {
|
||||
.student-legacy-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 260px minmax(0, 1fr);
|
||||
gap: 28px;
|
||||
grid-template-columns: 256px minmax(0, 1fr);
|
||||
gap: 24px;
|
||||
min-height: 100vh;
|
||||
padding: 24px;
|
||||
padding: 16px 24px 16px 16px;
|
||||
background:
|
||||
linear-gradient(to right, rgba(15, 23, 42, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(15, 23, 42, 0.03) 1px, transparent 1px),
|
||||
#f4f6f9;
|
||||
background-size: 40px 40px;
|
||||
}
|
||||
|
||||
.legacy-student-sidebar {
|
||||
position: sticky;
|
||||
top: 24px;
|
||||
top: 16px;
|
||||
display: flex;
|
||||
height: calc(100vh - 48px);
|
||||
height: calc(100vh - 32px);
|
||||
flex-direction: column;
|
||||
padding: 22px;
|
||||
border: 1px solid rgba(226, 232, 240, 0.9);
|
||||
border-radius: 30px;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
|
||||
padding: 20px 16px;
|
||||
border-right: 1px solid #e5e7eb;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: none;
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.legacy-brand-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
padding: 6px 4px 24px;
|
||||
padding: 4px 8px 28px;
|
||||
}
|
||||
|
||||
.legacy-brand-icon {
|
||||
@@ -108,7 +113,7 @@
|
||||
flex: 0 0 48px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 16px;
|
||||
border-radius: 14px;
|
||||
background: var(--tiku-primary);
|
||||
box-shadow: 0 10px 20px rgba(17, 82, 212, 0.26);
|
||||
}
|
||||
@@ -126,7 +131,7 @@
|
||||
.legacy-brand-name {
|
||||
display: block;
|
||||
color: #111827;
|
||||
font-size: 19px;
|
||||
font-size: 18px;
|
||||
font-weight: 950;
|
||||
line-height: 1.25;
|
||||
overflow: hidden;
|
||||
@@ -138,7 +143,7 @@
|
||||
display: block;
|
||||
margin-top: 3px;
|
||||
color: var(--tiku-primary);
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
@@ -146,8 +151,8 @@
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding-top: 8px;
|
||||
gap: 7px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #f1f5f9;
|
||||
}
|
||||
|
||||
@@ -155,9 +160,9 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
min-height: 52px;
|
||||
min-height: 48px;
|
||||
padding: 0 14px;
|
||||
border-radius: 16px;
|
||||
border-radius: 12px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
@@ -173,10 +178,10 @@
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 10px;
|
||||
border-radius: 8px;
|
||||
background: #f1f5f9;
|
||||
color: inherit;
|
||||
font-size: 16px;
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
@@ -185,7 +190,7 @@
|
||||
}
|
||||
|
||||
.legacy-nav-text {
|
||||
font-size: 18px;
|
||||
font-size: 15px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
@@ -193,7 +198,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding-top: 18px;
|
||||
margin-top: 10px;
|
||||
padding: 16px 8px 12px;
|
||||
border-top: 1px solid #f1f5f9;
|
||||
}
|
||||
|
||||
@@ -222,7 +228,7 @@
|
||||
.legacy-sidebar-user-name {
|
||||
display: block;
|
||||
color: #334155;
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 850;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -236,10 +242,24 @@
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, #fef3c7, #fde68a);
|
||||
color: #92400e;
|
||||
font-size: 13px;
|
||||
font-size: 11px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.legacy-logout-button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
margin-top: 8px;
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
background: #fef2f2;
|
||||
color: #ef4444;
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.legacy-mobile-dock {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -1,17 +1,18 @@
|
||||
import { PropsWithChildren } from 'react';
|
||||
import Taro from '@tarojs/taro';
|
||||
import { Text, View } from '@tarojs/components';
|
||||
import { Button, Text, View } from '@tarojs/components';
|
||||
import { getTenantContext } from '@/services/api';
|
||||
import { logout } from '@/services/auth';
|
||||
import { currentPagePath } from '@/services/routeGuard';
|
||||
import './StudentLegacyShell.css';
|
||||
|
||||
const navItems = [
|
||||
{ name: '首页', path: '/pages/student/home/index' },
|
||||
{ name: '背单词', path: '/pages/student/vocabulary/index' },
|
||||
{ name: '知识手册', path: '/pages/student/handbook/index' },
|
||||
{ name: '购买', path: '/pages/student/checkout/index' },
|
||||
{ name: '分数线', path: '/pages/student/scoreline/index' },
|
||||
{ name: '我的', path: '/pages/student/profile/index' },
|
||||
{ name: '学习工作台', path: '/pages/student/home/index', mark: '台' },
|
||||
{ name: '背单词', path: '/pages/student/vocabulary/index', mark: '词' },
|
||||
{ name: '知识手册', path: '/pages/student/handbook/index', mark: '册' },
|
||||
{ name: '购买', path: '/pages/student/checkout/index', mark: '购' },
|
||||
{ name: '分数线', path: '/pages/student/scoreline/index', mark: '线' },
|
||||
{ name: '个人中心', path: '/pages/student/profile/index', mark: '我' },
|
||||
];
|
||||
|
||||
function isActivePath(currentPath: string, itemPath: string) {
|
||||
@@ -24,6 +25,11 @@ export function StudentLegacyShell({ children }: PropsWithChildren) {
|
||||
const currentPath = currentPagePath();
|
||||
const brandName = tenant?.branding.brandName || tenant?.branding.shortName || '工学题库';
|
||||
|
||||
async function handleLogout() {
|
||||
await logout();
|
||||
Taro.reLaunch({ url: '/pages/student/login/index' });
|
||||
}
|
||||
|
||||
return (
|
||||
<View className='student-legacy-layout'>
|
||||
<View className='legacy-student-sidebar'>
|
||||
@@ -39,7 +45,7 @@ export function StudentLegacyShell({ children }: PropsWithChildren) {
|
||||
<View className='legacy-nav-list'>
|
||||
{navItems.map(item => (
|
||||
<View className={`legacy-nav-item ${isActivePath(currentPath, item.path) ? 'active' : ''}`} key={item.path} onClick={() => Taro.navigateTo({ url: item.path })}>
|
||||
<Text className='legacy-nav-dot'>{item.name.slice(0, 1)}</Text>
|
||||
<Text className='legacy-nav-dot'>{item.mark}</Text>
|
||||
<Text className='legacy-nav-text'>{item.name}</Text>
|
||||
</View>
|
||||
))}
|
||||
@@ -53,13 +59,14 @@ export function StudentLegacyShell({ children }: PropsWithChildren) {
|
||||
<Text className='legacy-sidebar-user-tag'>SVIP</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Button className='legacy-logout-button' onClick={handleLogout}>退出登录</Button>
|
||||
</View>
|
||||
<View className='student-legacy-main'>{children}</View>
|
||||
<View className='legacy-mobile-dock'>
|
||||
{navItems.slice(0, 5).map(item => (
|
||||
<View className={`legacy-dock-item ${isActivePath(currentPath, item.path) ? 'active' : ''}`} key={item.path} onClick={() => Taro.navigateTo({ url: item.path })}>
|
||||
<Text className='legacy-dock-dot'>{item.name.slice(0, 1)}</Text>
|
||||
<Text className='legacy-dock-text'>{item.name}</Text>
|
||||
<Text className='legacy-dock-dot'>{item.mark}</Text>
|
||||
<Text className='legacy-dock-text'>{item.name === '学习工作台' ? '首页' : item.name}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
@@ -16,12 +16,15 @@
|
||||
var path = window.location.pathname || '';
|
||||
var portal = '<%= process.env.TARO_APP_PORTAL || "student" %>';
|
||||
var redirect = path + (window.location.search || '');
|
||||
var isRootEntry = !path || path === '/' || /\/index\.html$/.test(path);
|
||||
var publicStudentPaths = {
|
||||
'/pages/student/login/index': true,
|
||||
'/pages/student/region/index': true,
|
||||
'/pages/student/catalog/index': true,
|
||||
'/pages/student/scoreline/index': true
|
||||
'/pages/student/region/index': true
|
||||
};
|
||||
if (isRootEntry) {
|
||||
window.location.replace('/pages/bootstrap/index?redirect=' + encodeURIComponent('/'));
|
||||
return;
|
||||
}
|
||||
if (path.indexOf('/pages/student/') === 0 && !publicStudentPaths[path]) {
|
||||
window.location.replace('/pages/bootstrap/index?redirect=' + encodeURIComponent(redirect));
|
||||
return;
|
||||
|
||||
@@ -73,7 +73,7 @@ export default function StudentCatalogPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<View className='student-page'>
|
||||
<View className='student-page catalog-page'>
|
||||
<View className='student-topbar'>
|
||||
<View className='student-title-block'>
|
||||
<Text className='student-kicker'>Question Bank</Text>
|
||||
|
||||
@@ -198,7 +198,7 @@ export default function StudentCheckoutPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<View className='student-page'>
|
||||
<View className='student-page checkout-page'>
|
||||
<View className='student-topbar'>
|
||||
<View className='student-title-block'>
|
||||
<Text className='student-kicker'>Checkout</Text>
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
.student-page {
|
||||
min-height: 100vh;
|
||||
padding: 28px;
|
||||
background:
|
||||
linear-gradient(to right, rgba(15, 23, 42, 0.032) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(15, 23, 42, 0.032) 1px, transparent 1px),
|
||||
#f4f6f9;
|
||||
background-size: 40px 40px;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
@@ -68,27 +73,27 @@
|
||||
|
||||
.ghost-button {
|
||||
flex: 0 0 auto;
|
||||
width: 132px;
|
||||
height: 64px;
|
||||
width: 104px;
|
||||
height: 48px;
|
||||
border: 1px solid var(--tiku-border);
|
||||
border-radius: 999px;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
color: var(--tiku-primary);
|
||||
font-size: 24px;
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
line-height: 64px;
|
||||
box-shadow: 0 5px 18px rgba(15, 23, 42, 0.05);
|
||||
line-height: 48px;
|
||||
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
|
||||
}
|
||||
|
||||
.hero-band {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 280px;
|
||||
margin-top: 34px;
|
||||
margin-top: 24px;
|
||||
padding: 36px 32px;
|
||||
border-radius: 30px;
|
||||
border-radius: 24px;
|
||||
background: linear-gradient(135deg, #1152d4 0%, #2563eb 56%, #60a5fa 100%);
|
||||
box-shadow: 0 18px 34px rgba(17, 82, 212, 0.2);
|
||||
box-shadow: 0 14px 30px rgba(17, 82, 212, 0.2);
|
||||
}
|
||||
|
||||
.hero-band::before,
|
||||
@@ -182,10 +187,10 @@
|
||||
.home-stat {
|
||||
min-height: 126px;
|
||||
padding: 20px 18px;
|
||||
border: 1px solid var(--tiku-border);
|
||||
border-radius: 24px;
|
||||
border: 1px solid #f1f5f9;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: var(--tiku-shadow);
|
||||
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
|
||||
}
|
||||
|
||||
.home-stat-value {
|
||||
@@ -209,13 +214,23 @@
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: block;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 18px;
|
||||
color: var(--tiku-text);
|
||||
font-size: 30px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.section-title::before {
|
||||
content: "";
|
||||
width: 8px;
|
||||
height: 24px;
|
||||
border-radius: 999px;
|
||||
background: #1152d4;
|
||||
}
|
||||
|
||||
.entry-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
@@ -228,22 +243,35 @@
|
||||
min-height: 176px;
|
||||
padding: 24px;
|
||||
border: 0;
|
||||
border-radius: 28px;
|
||||
border-radius: 24px;
|
||||
color: #fff;
|
||||
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
|
||||
box-shadow: 0 8px 25px rgba(15, 23, 42, 0.1);
|
||||
transition: transform 180ms ease, box-shadow 180ms ease;
|
||||
}
|
||||
|
||||
.entry-tile::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -26px;
|
||||
bottom: -38px;
|
||||
width: 118px;
|
||||
height: 118px;
|
||||
right: -22px;
|
||||
bottom: -22px;
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
}
|
||||
|
||||
.entry-tile::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 22px;
|
||||
bottom: 24px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-right: 3px solid rgba(255, 255, 255, 0.46);
|
||||
border-bottom: 3px solid rgba(255, 255, 255, 0.46);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.entry-label {
|
||||
display: block;
|
||||
position: relative;
|
||||
@@ -295,10 +323,10 @@
|
||||
gap: 16px;
|
||||
min-height: 104px;
|
||||
padding: 20px 22px;
|
||||
border: 1px solid var(--tiku-border);
|
||||
border-radius: 24px;
|
||||
border: 1px solid #f1f5f9;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 5px 16px rgba(15, 23, 42, 0.04);
|
||||
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
|
||||
}
|
||||
|
||||
.quick-name {
|
||||
@@ -329,17 +357,17 @@
|
||||
width: 100%;
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
padding: 36px;
|
||||
padding: 28px 32px 36px;
|
||||
padding-bottom: 48px;
|
||||
}
|
||||
|
||||
.hero-band {
|
||||
min-height: 320px;
|
||||
padding: 44px;
|
||||
min-height: 240px;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 52px;
|
||||
font-size: 44px;
|
||||
}
|
||||
|
||||
.entry-grid {
|
||||
|
||||
@@ -60,10 +60,10 @@ export default function StudentHomePage() {
|
||||
<View className='hero-content'>
|
||||
<Text className='hero-kicker'>今天也是元气满满的一天</Text>
|
||||
<Text className='hero-title'>继续你的备考之旅</Text>
|
||||
<Text className='hero-copy'>刷题、错题、背单词、资料和会员权益已接入新 SaaS 后端。</Text>
|
||||
<Text className='hero-copy'>已经连续学习的每一天，都会让你离目标院校更近一步。</Text>
|
||||
<View className='hero-actions'>
|
||||
<Button className='hero-primary' onClick={() => Taro.navigateTo({ url: '/pages/student/catalog/index' })}>开始刷题</Button>
|
||||
<Button className='hero-secondary' onClick={() => Taro.navigateTo({ url: '/pages/student/profile/index' })}>学习报告</Button>
|
||||
<Button className='hero-secondary' onClick={() => Taro.navigateTo({ url: '/pages/student/reports/index' })}>学习报告</Button>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
@@ -476,7 +476,7 @@ export default function StudentPracticePage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<View className='student-page'>
|
||||
<View className='student-page practice-page'>
|
||||
<View className='student-topbar'>
|
||||
<View className='student-title-block'>
|
||||
<Text className='student-kicker'>{session ? `${index + 1}/${questions.length || session.questionCount}` : 'Practice'}</Text>
|
||||
|
||||
@@ -342,7 +342,7 @@ export default function StudentProfilePage() {
|
||||
const avatarPreset = profile?.avatarPreset || profile?.avatar?.preset || 'male';
|
||||
|
||||
return (
|
||||
<View className='student-page'>
|
||||
<View className='student-page profile-page'>
|
||||
<View className='student-topbar'>
|
||||
<View className='student-title-block'>
|
||||
<Text className='student-kicker'>Profile</Text>
|
||||
|
||||
@@ -66,7 +66,7 @@ export default function StudentReportsPage() {
|
||||
const current = report || reports[0] || null;
|
||||
|
||||
return (
|
||||
<View className='student-page'>
|
||||
<View className='student-page reports-page'>
|
||||
<View className='student-topbar'>
|
||||
<View className='student-title-block'>
|
||||
<Text className='student-kicker'>Report</Text>
|
||||
|
||||
@@ -59,7 +59,7 @@ export default function StudentReviewPage() {
|
||||
const items = mode === 'wrong' ? wrongItems : favoriteItems;
|
||||
|
||||
return (
|
||||
<View className='student-page'>
|
||||
<View className='student-page review-page'>
|
||||
<View className='student-topbar'>
|
||||
<View className='student-title-block'>
|
||||
<Text className='student-kicker'>Review</Text>
|
||||
|
||||
@@ -1370,6 +1370,418 @@
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
/* Legacy web visual polish shared by student sub-pages. */
|
||||
.student-page:not(.login-page) {
|
||||
background:
|
||||
linear-gradient(to right, rgba(15, 23, 42, 0.032) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(15, 23, 42, 0.032) 1px, transparent 1px),
|
||||
#f4f6f9;
|
||||
background-size: 40px 40px;
|
||||
}
|
||||
|
||||
.student-topbar {
|
||||
padding: 4px 0 2px;
|
||||
}
|
||||
|
||||
.student-kicker {
|
||||
color: #1152d4;
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.student-title {
|
||||
color: #111827;
|
||||
font-size: 36px;
|
||||
font-weight: 950;
|
||||
}
|
||||
|
||||
.student-subtitle {
|
||||
max-width: 820px;
|
||||
color: #64748b;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.section-block,
|
||||
.section {
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.section-heading,
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 14px;
|
||||
color: #111827;
|
||||
font-size: 26px;
|
||||
font-weight: 920;
|
||||
}
|
||||
|
||||
.section-heading::before,
|
||||
.section-title::before {
|
||||
content: "";
|
||||
width: 8px;
|
||||
height: 24px;
|
||||
border-radius: 999px;
|
||||
background: #1152d4;
|
||||
}
|
||||
|
||||
.quiet-panel,
|
||||
.report-panel,
|
||||
.metric,
|
||||
.list-row,
|
||||
.profile-card,
|
||||
.asset-preview-panel,
|
||||
.scoreline-filter-panel,
|
||||
.trend-chart {
|
||||
border-color: #f1f5f9;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
|
||||
}
|
||||
|
||||
.quiet-panel,
|
||||
.report-panel {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.list-row {
|
||||
position: relative;
|
||||
padding: 18px 20px;
|
||||
transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
|
||||
}
|
||||
|
||||
.list-row:nth-child(3n + 1),
|
||||
.list-row:nth-child(3n + 2),
|
||||
.list-row:nth-child(3n) {
|
||||
border-color: #f1f5f9;
|
||||
}
|
||||
|
||||
.list-row.active {
|
||||
border-color: #bfdbfe;
|
||||
background: #eff6ff;
|
||||
box-shadow: 0 8px 18px rgba(17, 82, 212, 0.08);
|
||||
}
|
||||
|
||||
.row-main {
|
||||
color: #111827;
|
||||
font-size: 25px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.row-meta {
|
||||
color: #64748b;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.metric {
|
||||
min-height: 116px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.compact-metric {
|
||||
min-height: 96px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
color: #111827;
|
||||
font-size: 31px;
|
||||
font-weight: 950;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
color: #94a3b8;
|
||||
font-size: 18px;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.primary-button,
|
||||
.secondary-button,
|
||||
.pill-button,
|
||||
.danger-button {
|
||||
height: 56px;
|
||||
border-radius: 12px;
|
||||
font-size: 21px;
|
||||
font-weight: 850;
|
||||
line-height: 56px;
|
||||
}
|
||||
|
||||
.primary-button {
|
||||
background: #1152d4;
|
||||
box-shadow: 0 8px 18px rgba(17, 82, 212, 0.16);
|
||||
}
|
||||
|
||||
.secondary-button,
|
||||
.pill-button {
|
||||
border-color: #e5e7eb;
|
||||
color: #475569;
|
||||
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
|
||||
}
|
||||
|
||||
.secondary-button.active,
|
||||
.pill-button.active {
|
||||
border-color: #1152d4;
|
||||
background: #eff6ff;
|
||||
color: #1152d4;
|
||||
}
|
||||
|
||||
.danger-button {
|
||||
border-color: #fecaca;
|
||||
background: #fff1f2;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
min-height: 32px;
|
||||
padding: 0 10px;
|
||||
border-radius: 8px;
|
||||
font-size: 18px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.input,
|
||||
.textarea {
|
||||
border-color: #e5e7eb;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
border-color: #dbeafe;
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
color: #64748b;
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
.catalog-page .toolbar {
|
||||
padding: 14px;
|
||||
border: 1px solid #f1f5f9;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
|
||||
}
|
||||
|
||||
.catalog-page .grid-two .metric {
|
||||
min-height: 156px;
|
||||
border-left: 4px solid #1152d4;
|
||||
}
|
||||
|
||||
.catalog-page .grid-two .metric:nth-child(2n) {
|
||||
border-left-color: #10b981;
|
||||
}
|
||||
|
||||
.catalog-page .list-row::after,
|
||||
.review-page .list-row::after,
|
||||
.assets-page .list-row::after,
|
||||
.video-page .list-row::after {
|
||||
content: "›";
|
||||
position: absolute;
|
||||
right: 18px;
|
||||
top: 50%;
|
||||
color: #cbd5e1;
|
||||
font-size: 34px;
|
||||
font-weight: 400;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.catalog-page .list-row,
|
||||
.assets-page .list-row {
|
||||
padding-right: 52px;
|
||||
}
|
||||
|
||||
.practice-page {
|
||||
max-width: 960px;
|
||||
}
|
||||
|
||||
.practice-page .student-topbar {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.practice-page .student-title {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.practice-page > .quiet-panel:first-of-type {
|
||||
border-color: #bfdbfe;
|
||||
background: linear-gradient(135deg, #eff6ff, #fff);
|
||||
}
|
||||
|
||||
.practice-page .list-stack > .quiet-panel:first-child {
|
||||
padding: 26px;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.practice-page .list-stack > .quiet-panel:first-child .rich-paragraph {
|
||||
color: #111827;
|
||||
font-size: 30px;
|
||||
font-weight: 760;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.practice-page .list-row {
|
||||
padding: 16px;
|
||||
border-width: 2px;
|
||||
border-color: #f3f4f6;
|
||||
border-radius: 14px;
|
||||
background: rgba(248, 250, 252, 0.72);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.practice-page .list-row.active {
|
||||
border-color: #bfdbfe;
|
||||
background: rgba(239, 246, 255, 0.9);
|
||||
}
|
||||
|
||||
.practice-page .option-prefix {
|
||||
flex-basis: 36px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 999px;
|
||||
background: #fff;
|
||||
color: #64748b;
|
||||
font-size: 18px;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.practice-page .list-row.active .option-prefix {
|
||||
border-color: #1152d4;
|
||||
background: #1152d4;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.practice-page .answer-detail,
|
||||
.reports-page .answer-detail {
|
||||
border-color: #bbf7d0;
|
||||
background: linear-gradient(135deg, #ecfdf5, #fff);
|
||||
}
|
||||
|
||||
.practice-page .answer-detail-label,
|
||||
.reports-page .answer-detail-label {
|
||||
color: #047857;
|
||||
}
|
||||
|
||||
.answer-sheet {
|
||||
gap: 10px;
|
||||
padding: 16px;
|
||||
border: 1px solid #f1f5f9;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
|
||||
}
|
||||
|
||||
.answer-card {
|
||||
height: 46px;
|
||||
border-radius: 12px;
|
||||
font-size: 18px;
|
||||
line-height: 46px;
|
||||
}
|
||||
|
||||
.reports-page .report-panel,
|
||||
.checkout-page .quiet-panel,
|
||||
.profile-page .profile-card {
|
||||
border-color: #bfdbfe;
|
||||
background: linear-gradient(135deg, #eff6ff, #fff 74%);
|
||||
}
|
||||
|
||||
.reports-page .report-panel > .metric-value,
|
||||
.checkout-page .amount-text {
|
||||
color: #1152d4;
|
||||
font-size: 42px;
|
||||
font-weight: 950;
|
||||
}
|
||||
|
||||
.checkout-page .list-row.active {
|
||||
border-color: #1152d4;
|
||||
background: linear-gradient(135deg, #eff6ff, #fff);
|
||||
}
|
||||
|
||||
.checkout-page .list-row.active::before {
|
||||
content: "推荐";
|
||||
position: absolute;
|
||||
right: 18px;
|
||||
top: 16px;
|
||||
padding: 3px 9px;
|
||||
border-radius: 7px;
|
||||
background: #facc15;
|
||||
color: #1f2937;
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.profile-page > .grid-two {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.profile-avatar {
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.avatar-choice {
|
||||
border-radius: 14px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.trend-chart {
|
||||
gap: 8px;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.trend-bar-track {
|
||||
height: 112px;
|
||||
}
|
||||
|
||||
.assets-page .list-row {
|
||||
min-height: 128px;
|
||||
}
|
||||
|
||||
.asset-preview-frame {
|
||||
border-color: #f1f5f9;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.asset-security-strip {
|
||||
border-color: #dbeafe;
|
||||
background: #eff6ff;
|
||||
}
|
||||
|
||||
.notifications-page .notification-row.active,
|
||||
.profile-page .notification-row.active {
|
||||
border-color: #bfdbfe;
|
||||
background: #eff6ff;
|
||||
}
|
||||
|
||||
.notifications-page .notification-summary-grid .metric:first-child .metric-value,
|
||||
.profile-page .notification-toolbar + .list-stack .notification-row.active .row-main {
|
||||
color: #1152d4;
|
||||
}
|
||||
|
||||
.vocabulary-card {
|
||||
border-color: #f1f5f9;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
|
||||
}
|
||||
|
||||
.vocabulary-card.revealed {
|
||||
border-color: #bfdbfe;
|
||||
background: linear-gradient(135deg, #eff6ff, #fff);
|
||||
}
|
||||
|
||||
.vocabulary-word {
|
||||
color: #111827;
|
||||
font-size: 58px;
|
||||
font-weight: 950;
|
||||
}
|
||||
|
||||
.vocabulary-answer {
|
||||
border-color: #f1f5f9;
|
||||
border-radius: 16px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
.student-page {
|
||||
width: 100%;
|
||||
@@ -1387,27 +1799,27 @@
|
||||
}
|
||||
|
||||
.student-topbar {
|
||||
padding: 24px 28px;
|
||||
border: 1px solid rgba(226, 232, 240, 0.9);
|
||||
border-radius: 28px;
|
||||
padding: 20px 24px;
|
||||
border: 1px solid #f1f5f9;
|
||||
border-radius: 18px;
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
|
||||
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
|
||||
}
|
||||
|
||||
.student-page > .toolbar,
|
||||
.student-page > .section-block > .toolbar {
|
||||
padding: 14px;
|
||||
border: 1px solid var(--tiku-border);
|
||||
border-radius: 24px;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: var(--tiku-shadow);
|
||||
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
|
||||
}
|
||||
|
||||
.quiet-panel,
|
||||
.report-panel,
|
||||
.scoreline-filter-panel,
|
||||
.asset-preview-panel {
|
||||
border-radius: 28px;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.answer-sheet {
|
||||
@@ -1430,6 +1842,13 @@
|
||||
.asset-preview-panel {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.profile-page > .grid-two,
|
||||
.reports-page .grid-two,
|
||||
.notifications-page .notification-summary-grid,
|
||||
.vocabulary-stats-grid {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 420px) {
|
||||
@@ -1480,4 +1899,13 @@
|
||||
min-height: 520px;
|
||||
height: 520px;
|
||||
}
|
||||
|
||||
.practice-page .toolbar.wrap {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.reports-page .report-panel > .metric-value,
|
||||
.checkout-page .amount-text {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -41,7 +41,7 @@ export default function StudentVideoPage() {
|
||||
const playUrl = playback?.playback?.url;
|
||||
|
||||
return (
|
||||
<View className='student-page'>
|
||||
<View className='student-page video-page'>
|
||||
<View className='student-topbar'>
|
||||
<View className='student-title-block'>
|
||||
<Text className='student-kicker'>Video</Text>
|
||||
|
||||
@@ -54,11 +54,7 @@ export function shouldGuardPath(path: string) {
|
||||
if (isPublicPath(path)) return false;
|
||||
if (appEnv.portal === 'tenant-admin') return path.startsWith('/pages/tenant-admin/');
|
||||
if (appEnv.portal === 'platform-admin') return path.startsWith('/pages/platform-admin/');
|
||||
return path.startsWith('/pages/student/') && ![
|
||||
'/pages/student/region/index',
|
||||
'/pages/student/catalog/index',
|
||||
'/pages/student/scoreline/index',
|
||||
].includes(path);
|
||||
return path.startsWith('/pages/student/') && path !== '/pages/student/region/index';
|
||||
}
|
||||
|
||||
export function landingPath() {
|
||||
|
||||
Reference in New Issue
Block a user