188 lines
3.4 KiB
SCSS
188 lines
3.4 KiB
SCSS
// 全局样式
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
page {
|
|
background-color: #f8f8f8;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
|
}
|
|
|
|
// 通用按钮样式
|
|
button {
|
|
border: none;
|
|
outline: none;
|
|
|
|
&::after {
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
// 图标字体（暂时注释，如需使用请添加字体文件）
|
|
// @font-face {
|
|
// font-family: 'iconfont';
|
|
// src: url('/static/fonts/iconfont.ttf') format('truetype');
|
|
// }
|
|
|
|
// .iconfont {
|
|
// font-family: 'iconfont' !important;
|
|
// font-style: normal;
|
|
// -webkit-font-smoothing: antialiased;
|
|
// -moz-osx-font-smoothing: grayscale;
|
|
// }
|
|
|
|
// 通用类
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.flex-center {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.flex-between {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.text-right {
|
|
text-align: right;
|
|
}
|
|
|
|
.ellipsis {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ellipsis-2 {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
// 颜色变量 - 薄荷绿主题（参考习正小程序）
|
|
$primary-color: #7dd3c0; // 薄荷绿主色
|
|
$primary-light: #a8e6d7; // 浅薄荷绿
|
|
$primary-dark: #5cb8a3; // 深薄荷绿
|
|
$secondary-color: #ff6b9d; // 粉红色强调色
|
|
$accent-color: #ffd93d; // 黄色点缀
|
|
$success-color: #52c41a;
|
|
$warning-color: #faad14;
|
|
$error-color: #ff4d4f;
|
|
$text-color: #333;
|
|
$text-secondary: #666;
|
|
$text-placeholder: #999;
|
|
$border-color: #eee;
|
|
$bg-color: #f0f9f7; // 浅薄荷绿背景
|
|
$card-bg: #ffffff;
|
|
|
|
// 卡片样式
|
|
.card {
|
|
background: $card-bg;
|
|
border-radius: 16rpx;
|
|
padding: 24rpx;
|
|
margin-bottom: 20rpx;
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
// 按钮样式
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, $primary-color 0%, $primary-light 100%);
|
|
color: #fff;
|
|
border-radius: 48rpx;
|
|
padding: 24rpx 48rpx;
|
|
font-size: 28rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: linear-gradient(135deg, $secondary-color 0%, #ffb3c1 100%);
|
|
color: #fff;
|
|
border-radius: 48rpx;
|
|
padding: 24rpx 48rpx;
|
|
font-size: 28rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
// 标签样式
|
|
.tag {
|
|
display: inline-block;
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 8rpx;
|
|
font-size: 22rpx;
|
|
|
|
&.tag-primary {
|
|
background: rgba(125, 211, 192, 0.15);
|
|
color: $primary-color;
|
|
}
|
|
|
|
&.tag-hot {
|
|
background: linear-gradient(135deg, #ff6b9d 0%, #ff8fb3 100%);
|
|
color: #fff;
|
|
}
|
|
|
|
&.tag-new {
|
|
background: linear-gradient(135deg, #ffd93d 0%, #ffe066 100%);
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
// 价格样式
|
|
.price {
|
|
color: $secondary-color;
|
|
font-weight: bold;
|
|
|
|
.symbol {
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.amount {
|
|
font-size: 36rpx;
|
|
}
|
|
|
|
.unit {
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
// 渐变背景
|
|
.gradient-bg {
|
|
background: linear-gradient(135deg, $primary-color 0%, $primary-light 100%);
|
|
}
|
|
|
|
// 圆角图片
|
|
.round-image {
|
|
border-radius: 16rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
// 分割线
|
|
.divider {
|
|
height: 1rpx;
|
|
background: $border-color;
|
|
margin: 24rpx 0;
|
|
}
|
|
|
|
// 空状态图标
|
|
.empty-icon {
|
|
font-size: 120rpx;
|
|
display: block;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.empty-image {
|
|
width: 300rpx;
|
|
height: 300rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|