first commit
This commit is contained in:
Vendored
+275
@@ -0,0 +1,275 @@
|
||||
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
|
||||
!*** css ./node_modules/@tarojs/webpack5-runner/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[0].use[4]!./src/app.scss ***!
|
||||
\************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
|
||||
@charset "UTF-8";
|
||||
/* ==========================================================
|
||||
全局主题系统 — 白天 / 黑夜两套主题（纯色背景）
|
||||
使用 CSS 变量 + 微信 2.7.0+ 支持
|
||||
========================================================== */
|
||||
/* --- 页面根容器主题（.theme-light / .theme-dark 放在每个页面根 View 上）--- */
|
||||
.theme-light {
|
||||
min-height: 100vh;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.theme-dark {
|
||||
min-height: 100vh;
|
||||
background-color: #1e1e2f;
|
||||
}
|
||||
|
||||
/* 变量定义 */
|
||||
.theme-light {
|
||||
--line-card: 3rpx dashed #ffb7c5;
|
||||
--line-star: #ffb7c5;
|
||||
--text-primary: #5c3a3a;
|
||||
--text-secondary: #b08d8d;
|
||||
--text-muted: #d28a8a;
|
||||
--accent-pink: #ff9a9e;
|
||||
--accent-blue: #5b8cff;
|
||||
--btn-gradient: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%);
|
||||
--shadow-card: 0 8rpx 24rpx rgba(255, 154, 158, 0.12);
|
||||
--bg-input: #f8f9fa;
|
||||
--bg-card: #ffffff;
|
||||
}
|
||||
|
||||
.theme-dark {
|
||||
--line-card: 3rpx dashed #5b8cff;
|
||||
--line-star: #5b8cff;
|
||||
--text-primary: #e0e0f0;
|
||||
--text-secondary: #a0a0c0;
|
||||
--text-muted: #7070a0;
|
||||
--accent-pink: #ff7eb3;
|
||||
--accent-blue: #5cadff;
|
||||
--btn-gradient: linear-gradient(135deg, #ff7eb3 0%, #7a5cff 100%);
|
||||
--shadow-card: 0 8rpx 24rpx rgba(0, 0, 0, 0.3);
|
||||
--bg-input: #252540;
|
||||
--bg-card: #2a2a40;
|
||||
}
|
||||
|
||||
/* page 基础字体 */
|
||||
page {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", "Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
/* ==========================================================
|
||||
全局组件样式
|
||||
========================================================== */
|
||||
.dashed-card {
|
||||
background: var(--bg-card);
|
||||
border: var(--line-card);
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
-webkit-box-shadow: var(--shadow-card);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
/* 虚线无填充星星（左上角装饰） */
|
||||
.star-badge {
|
||||
position: absolute;
|
||||
top: -10rpx;
|
||||
left: -10rpx;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.star-badge::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
background: var(--bg-card);
|
||||
-webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
|
||||
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
|
||||
border: 2rpx dashed var(--line-star);
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* === 常用工具类 === */
|
||||
.container {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flex-between {
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: space-between;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.flex-column {
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mt-10 {
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.mt-20 {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.mb-10 {
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.mb-20 {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
/* === 通用按钮 === */
|
||||
.btn-gradient {
|
||||
background: var(--btn-gradient);
|
||||
color: var(--text-primary);
|
||||
border-radius: 50rpx;
|
||||
padding: 24rpx 48rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
-webkit-box-shadow: 0 8rpx 24rpx rgba(255, 154, 158, 0.25);
|
||||
box-shadow: 0 8rpx 24rpx rgba(255, 154, 158, 0.25);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.theme-dark .btn-gradient {
|
||||
color: #ffffff;
|
||||
-webkit-box-shadow: 0 8rpx 24rpx rgba(122, 92, 255, 0.3);
|
||||
box-shadow: 0 8rpx 24rpx rgba(122, 92, 255, 0.3);
|
||||
}
|
||||
|
||||
.btn-gradient:active {
|
||||
opacity: 0.9;
|
||||
-webkit-transform: scale(0.98);
|
||||
-ms-transform: scale(0.98);
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: var(--bg-card);
|
||||
color: var(--accent-blue);
|
||||
border: var(--line-card);
|
||||
border-radius: 50rpx;
|
||||
padding: 20rpx 48rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 固定底部操作栏 */
|
||||
.action-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--bg-card);
|
||||
border-top: var(--line-card);
|
||||
padding: 20rpx 32rpx calc(20rpx + env(safe-area-inset-bottom));
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: space-between;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
gap: 24rpx;
|
||||
z-index: 500;
|
||||
-webkit-box-shadow: 0 -8rpx 24rpx rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 -8rpx 24rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
/* === 标题文字 === */
|
||||
.page-title {
|
||||
font-size: 40rpx;
|
||||
font-weight: 800;
|
||||
color: var(--text-primary);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
display: block;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
/* === 状态标签 === */
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 8rpx 20rpx;
|
||||
border-radius: 50rpx;
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.badge-pink {
|
||||
background: rgba(255, 154, 158, 0.15);
|
||||
color: var(--accent-pink);
|
||||
}
|
||||
|
||||
.badge-blue {
|
||||
background: rgba(160, 196, 255, 0.15);
|
||||
color: var(--accent-blue);
|
||||
}
|
||||
|
||||
.badge-green {
|
||||
background: rgba(139, 211, 161, 0.15);
|
||||
color: #2ecc71;
|
||||
}
|
||||
|
||||
.badge-gray {
|
||||
background: rgba(128, 128, 128, 0.15);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* === 安全区占位 === */
|
||||
.safe-bottom {
|
||||
height: constant(safe-area-inset-bottom);
|
||||
height: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.safe-bottom-placeholder {
|
||||
height: 160rpx;
|
||||
}
|
||||
Reference in New Issue
Block a user