刘涛
@@ -0,0 +1,222 @@
|
||||
// ============================================
|
||||
// 呼籁旅行官网 - 全局样式
|
||||
// ============================================
|
||||
|
||||
// ---------- 重置 ----------
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: @font-size-base;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: @font-family-base;
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
color: @color-text-primary;
|
||||
background-color: @color-bg-white;
|
||||
}
|
||||
|
||||
// ---------- 排版 ----------
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: @font-weight-bold;
|
||||
line-height: @line-height-tight;
|
||||
color: @color-text-primary;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
|
||||
.respond-md({
|
||||
font-size: @font-size-hero;
|
||||
});
|
||||
|
||||
.respond-lg({
|
||||
font-size: @font-size-display;
|
||||
});
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: @font-size-xl;
|
||||
|
||||
.respond-md({
|
||||
font-size: @font-size-2xl;
|
||||
});
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: @font-size-lg;
|
||||
|
||||
.respond-md({
|
||||
font-size: @font-size-xl;
|
||||
});
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: @space-md;
|
||||
color: @color-text-secondary;
|
||||
}
|
||||
|
||||
a {
|
||||
color: @color-primary;
|
||||
text-decoration: none;
|
||||
transition: color @transition-fast;
|
||||
|
||||
&:hover {
|
||||
color: @color-primary-light;
|
||||
}
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
// ---------- 容器 ----------
|
||||
|
||||
.container {
|
||||
.container();
|
||||
}
|
||||
|
||||
// ---------- 段落区块 ----------
|
||||
|
||||
.section {
|
||||
.section-padding();
|
||||
}
|
||||
|
||||
.section--gray {
|
||||
background-color: @color-bg-gray;
|
||||
}
|
||||
|
||||
.section--warm {
|
||||
background-color: @color-bg-warm;
|
||||
}
|
||||
|
||||
.section--green {
|
||||
background-color: @color-primary-bg;
|
||||
}
|
||||
|
||||
.section--accent {
|
||||
background-color: @color-accent-bg;
|
||||
}
|
||||
|
||||
.section--dark {
|
||||
background-color: @color-primary-dark;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
// ---------- 辅助类 ----------
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
// ---------- 页面过渡 ----------
|
||||
|
||||
.page-enter-active,
|
||||
.page-leave-active {
|
||||
transition: opacity @transition-base;
|
||||
}
|
||||
|
||||
.page-enter-from,
|
||||
.page-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// ---------- 滚动入场动画 ----------
|
||||
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(16px);
|
||||
transition: opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1), transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
|
||||
&.is-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// 子元素交错入场（用于网格）
|
||||
.reveal-stagger {
|
||||
.reveal();
|
||||
|
||||
&:nth-child(2) { transition-delay: 0.08s; }
|
||||
&:nth-child(3) { transition-delay: 0.16s; }
|
||||
&:nth-child(4) { transition-delay: 0.24s; }
|
||||
&:nth-child(5) { transition-delay: 0.32s; }
|
||||
&:nth-child(6) { transition-delay: 0.40s; }
|
||||
}
|
||||
|
||||
// ---------- 页面摘要 TL;DR（GEO/SEO 语义摘要块）----------
|
||||
// 每个页面开头的精准摘要，帮助 AI 和搜索引擎理解"这个页面回答了什么问题"
|
||||
.page-tldr {
|
||||
background: @color-bg-gray;
|
||||
border-bottom: 1px solid @color-border;
|
||||
|
||||
.page-tldr-inner {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: @space-lg @space-xl;
|
||||
border-left: 3px solid @color-primary;
|
||||
background: @color-bg-white;
|
||||
border-radius: 0 @border-radius-md @border-radius-md 0;
|
||||
|
||||
p {
|
||||
font-size: @font-size-sm;
|
||||
color: @color-text-secondary;
|
||||
line-height: @line-height-loose;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 容器内居中 + 内边距
|
||||
.container {
|
||||
padding-top: @space-md;
|
||||
padding-bottom: @space-md;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- 无障碍：减少动效偏好 ----------
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
// ============================================
|
||||
// 呼籁旅行官网 - Less混入
|
||||
// ============================================
|
||||
|
||||
// 响应式断点
|
||||
.respond-md(@rules) {
|
||||
@media (min-width: @breakpoint-md) {
|
||||
@rules();
|
||||
}
|
||||
}
|
||||
|
||||
.respond-lg(@rules) {
|
||||
@media (min-width: @breakpoint-lg) {
|
||||
@rules();
|
||||
}
|
||||
}
|
||||
|
||||
.respond-xl(@rules) {
|
||||
@media (min-width: @breakpoint-xl) {
|
||||
@rules();
|
||||
}
|
||||
}
|
||||
|
||||
// 容器
|
||||
.container() {
|
||||
width: 100%;
|
||||
max-width: @container-max-width;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: @container-padding;
|
||||
padding-right: @container-padding;
|
||||
|
||||
.respond-lg({
|
||||
padding-left: @container-padding-desktop;
|
||||
padding-right: @container-padding-desktop;
|
||||
});
|
||||
}
|
||||
|
||||
// 段落间距 — 更大的呼吸感
|
||||
.section-padding() {
|
||||
padding-top: @space-2xl;
|
||||
padding-bottom: @space-2xl;
|
||||
|
||||
.respond-md({
|
||||
padding-top: @space-3xl;
|
||||
padding-bottom: @space-3xl;
|
||||
});
|
||||
|
||||
.respond-lg({
|
||||
padding-top: 100px;
|
||||
padding-bottom: 100px;
|
||||
});
|
||||
}
|
||||
|
||||
// 响应式网格：移动1列 → 平板2列 → 桌面3列
|
||||
.grid-responsive(@gap: @space-lg; @md-cols: 2; @lg-cols: 3) {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: @gap;
|
||||
|
||||
.respond-md({
|
||||
grid-template-columns: repeat(@md-cols, 1fr);
|
||||
});
|
||||
|
||||
.respond-lg({
|
||||
grid-template-columns: repeat(@lg-cols, 1fr);
|
||||
});
|
||||
}
|
||||
|
||||
// 多行截断
|
||||
.text-clamp(@lines: 3) {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: @lines;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
// ============================================
|
||||
// 呼籁旅行官网 - 设计变量
|
||||
// 视觉定位：精致温暖，草原+大地色调
|
||||
// ============================================
|
||||
|
||||
// ---------- 色彩系统 ----------
|
||||
|
||||
// 主色 - 深林绿：自然、稳重、值得信赖
|
||||
@color-primary: #2D6A4F;
|
||||
@color-primary-dark: #1B4332;
|
||||
@color-primary-light: #40916C;
|
||||
@color-primary-lighter: #B7E4C7;
|
||||
@color-primary-bg: #F0F7F4;
|
||||
|
||||
// 点缀 - 暖琥珀：温暖、家庭、亲和
|
||||
@color-accent: #D4883A;
|
||||
@color-accent-light: #E8A85C;
|
||||
@color-accent-bg: #FFF8F0;
|
||||
|
||||
// 中性色
|
||||
@color-text-primary: #1A1A2E;
|
||||
@color-text-secondary: #4A4A5A;
|
||||
@color-text-muted: #8A8A9A;
|
||||
@color-border: #E8E8ED;
|
||||
@color-divider: #F0F0F4;
|
||||
@color-bg-white: #FFFFFF;
|
||||
@color-bg-gray: #F7F8FA;
|
||||
@color-bg-warm: #FFFBF5;
|
||||
|
||||
// 语义色
|
||||
@color-success: #2D6A4F;
|
||||
@color-warning: #D4883A;
|
||||
@color-error: #C1292E;
|
||||
|
||||
// ---------- 字体 ----------
|
||||
|
||||
@font-family-base: -apple-system, BlinkMacSystemFont, "PingFang SC",
|
||||
"Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
|
||||
|
||||
@font-size-xs: 12px;
|
||||
@font-size-sm: 14px;
|
||||
@font-size-base: 16px;
|
||||
@font-size-md: 18px;
|
||||
@font-size-lg: 20px;
|
||||
@font-size-xl: 24px;
|
||||
@font-size-2xl: 30px;
|
||||
@font-size-3xl: 36px;
|
||||
@font-size-hero: 42px;
|
||||
@font-size-display: 48px;
|
||||
|
||||
@line-height-tight: 1.3;
|
||||
@line-height-normal: 1.5;
|
||||
@line-height-base: 1.7;
|
||||
@line-height-relaxed: 1.8;
|
||||
@line-height-loose: 2.0;
|
||||
|
||||
@font-weight-normal: 400;
|
||||
@font-weight-medium: 500;
|
||||
@font-weight-bold: 700;
|
||||
|
||||
// ---------- 间距（8px网格） ----------
|
||||
|
||||
@space-xs: 4px;
|
||||
@space-sm: 8px;
|
||||
@space-md: 16px;
|
||||
@space-lg: 24px;
|
||||
@space-xl: 32px;
|
||||
@space-2xl: 48px;
|
||||
@space-3xl: 64px;
|
||||
@space-4xl: 96px;
|
||||
|
||||
// ---------- 容器 ----------
|
||||
|
||||
@container-max-width: 1200px;
|
||||
@container-padding: 20px;
|
||||
@container-padding-desktop: 40px;
|
||||
|
||||
// ---------- 断点 ----------
|
||||
|
||||
@breakpoint-sm: 375px;
|
||||
@breakpoint-md: 768px;
|
||||
@breakpoint-lg: 1024px;
|
||||
@breakpoint-xl: 1200px;
|
||||
|
||||
// ---------- 圆角与阴影 ----------
|
||||
|
||||
@border-radius-sm: 4px;
|
||||
@border-radius-md: 8px;
|
||||
@border-radius-lg: 16px;
|
||||
@border-radius-xl: 24px;
|
||||
@border-radius-full: 9999px;
|
||||
|
||||
// 精致的阴影层次
|
||||
@shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
|
||||
@shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
|
||||
@shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
@shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||
@shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.10);
|
||||
@shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
|
||||
|
||||
// ---------- 过渡 ----------
|
||||
|
||||
@transition-fast: 0.15s ease;
|
||||
@transition-base: 0.25s ease;
|
||||
@transition-slow: 0.4s ease;
|
||||
在新工单中引用
屏蔽一个用户