From d6f1484a88ee2cc5f28c60818f014475208accd6 Mon Sep 17 00:00:00 2001
From: yvan <8574526@qq.com>
Date: Thu, 14 Aug 2025 18:11:57 +0800
Subject: [PATCH] 1

---
 styles/common.scss | 326 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 326 insertions(+)

diff --git a/styles/common.scss b/styles/common.scss
index 52dd71e..0a783ff 100644
--- a/styles/common.scss
+++ b/styles/common.scss
@@ -133,4 +133,330 @@
 .page-container-with-bg {
   @extend .page-container;
   background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
+}
+
+/* 通用背景渐变 */
+.gradient-bg {
+  background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
+}
+
+.gradient-bg-primary {
+  background: linear-gradient(135deg, #FF8A80, #FFB6C1);
+}
+
+.gradient-bg-success {
+  background: linear-gradient(135deg, #64B5F6, #81C784);
+}
+
+.gradient-bg-warning {
+  background: linear-gradient(135deg, #FFB74D, #FF8A65);
+}
+
+/* 通用卡片样式 */
+.card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20rpx);
+  border-radius: 24rpx;
+  padding: 24rpx;
+  box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
+  border: 1rpx solid rgba(255, 255, 255, 0.3);
+}
+
+.card-small {
+  @extend .card;
+  padding: 16rpx;
+  border-radius: 16rpx;
+  box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.1);
+}
+
+.card-large {
+  @extend .card;
+  padding: 32rpx;
+  border-radius: 28rpx;
+}
+
+/* 通用按钮样式 */
+.btn {
+  padding: 16rpx 32rpx;
+  border-radius: 24rpx;
+  border: none;
+  font-size: 28rpx;
+  font-weight: 600;
+  text-align: center;
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+
+.btn-primary {
+  @extend .btn;
+  background: linear-gradient(135deg, #FF8A80, #FFB6C1);
+  color: white;
+
+  &:active {
+    transform: scale(0.98);
+  }
+}
+
+.btn-secondary {
+  @extend .btn;
+  background: rgba(255, 255, 255, 0.9);
+  color: #FF8A80;
+  border: 2rpx solid rgba(255, 138, 128, 0.3);
+
+  &:active {
+    background: rgba(255, 255, 255, 0.7);
+  }
+}
+
+.btn-small {
+  padding: 12rpx 24rpx;
+  font-size: 24rpx;
+  border-radius: 20rpx;
+}
+
+.btn-large {
+  padding: 20rpx 40rpx;
+  font-size: 32rpx;
+  border-radius: 28rpx;
+}
+
+/* 通用输入框样式 */
+.input-container {
+  position: relative;
+  margin-bottom: 24rpx;
+}
+
+.input-field {
+  width: 100%;
+  padding: 20rpx 24rpx;
+  border: 2rpx solid rgba(255, 138, 128, 0.2);
+  border-radius: 16rpx;
+  background: rgba(255, 255, 255, 0.9);
+  font-size: 28rpx;
+  color: #333;
+
+  &:focus {
+    border-color: #FF8A80;
+    background: rgba(255, 255, 255, 1);
+  }
+
+  &::placeholder {
+    color: #999;
+  }
+}
+
+.input-label {
+  font-size: 28rpx;
+  color: #333;
+  margin-bottom: 12rpx;
+  font-weight: 600;
+}
+
+/* 通用列表样式 */
+.list-item {
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 16rpx;
+  padding: 24rpx;
+  margin-bottom: 16rpx;
+  box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.1);
+  transition: all 0.3s ease;
+
+  &:active {
+    transform: scale(0.98);
+    background: rgba(255, 255, 255, 0.8);
+  }
+}
+
+.list-item-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12rpx;
+}
+
+.list-item-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #333;
+}
+
+.list-item-subtitle {
+  font-size: 24rpx;
+  color: #666;
+  margin-top: 8rpx;
+}
+
+.list-item-content {
+  font-size: 28rpx;
+  color: #555;
+  line-height: 1.5;
+}
+
+/* 通用标签样式 */
+.tag {
+  display: inline-block;
+  padding: 8rpx 16rpx;
+  border-radius: 20rpx;
+  font-size: 22rpx;
+  font-weight: 500;
+  margin-right: 12rpx;
+  margin-bottom: 8rpx;
+}
+
+.tag-primary {
+  @extend .tag;
+  background: rgba(255, 138, 128, 0.1);
+  color: #FF8A80;
+  border: 1rpx solid rgba(255, 138, 128, 0.3);
+}
+
+.tag-success {
+  @extend .tag;
+  background: rgba(76, 175, 80, 0.1);
+  color: #4CAF50;
+  border: 1rpx solid rgba(76, 175, 80, 0.3);
+}
+
+.tag-warning {
+  @extend .tag;
+  background: rgba(255, 183, 77, 0.1);
+  color: #FFB74D;
+  border: 1rpx solid rgba(255, 183, 77, 0.3);
+}
+
+.tag-info {
+  @extend .tag;
+  background: rgba(33, 150, 243, 0.1);
+  color: #2196F3;
+  border: 1rpx solid rgba(33, 150, 243, 0.3);
+}
+
+/* 通用头像样式 */
+.avatar {
+  border-radius: 50%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #FF8A80, #FFB6C1);
+  color: white;
+  font-weight: 600;
+}
+
+.avatar-small {
+  @extend .avatar;
+  width: 48rpx;
+  height: 48rpx;
+  font-size: 20rpx;
+}
+
+.avatar-medium {
+  @extend .avatar;
+  width: 80rpx;
+  height: 80rpx;
+  font-size: 32rpx;
+}
+
+.avatar-large {
+  @extend .avatar;
+  width: 120rpx;
+  height: 120rpx;
+  font-size: 48rpx;
+}
+
+/* 通用图标样式 */
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+}
+
+.icon-small {
+  @extend .icon;
+  width: 32rpx;
+  height: 32rpx;
+  font-size: 16rpx;
+}
+
+.icon-medium {
+  @extend .icon;
+  width: 48rpx;
+  height: 48rpx;
+  font-size: 24rpx;
+}
+
+.icon-large {
+  @extend .icon;
+  width: 64rpx;
+  height: 64rpx;
+  font-size: 32rpx;
+}
+
+/* 通用分割线 */
+.divider {
+  height: 1rpx;
+  background: rgba(255, 138, 128, 0.1);
+  margin: 24rpx 0;
+}
+
+.divider-thick {
+  height: 2rpx;
+  background: rgba(255, 138, 128, 0.2);
+  margin: 32rpx 0;
+}
+
+/* 通用状态样式 */
+.status-dot {
+  width: 12rpx;
+  height: 12rpx;
+  border-radius: 50%;
+  display: inline-block;
+  margin-right: 8rpx;
+}
+
+.status-success {
+  background: #4CAF50;
+}
+
+.status-warning {
+  background: #FFB74D;
+}
+
+.status-error {
+  background: #F44336;
+}
+
+.status-info {
+  background: #2196F3;
+}
+
+/* 通用加载和空状态 */
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 80rpx 40rpx;
+  color: #999;
+}
+
+.loading-text {
+  font-size: 28rpx;
+  margin-top: 16rpx;
+}
+
+.empty-container {
+  @extend .loading-container;
+
+  .empty-icon {
+    font-size: 80rpx;
+    color: #ddd;
+    margin-bottom: 16rpx;
+  }
+
+  .empty-text {
+    font-size: 28rpx;
+    color: #999;
+  }
 }
\ No newline at end of file