修改小程序及大屏

government-mini-program/app.wxss

@@ -1,4 +1,5 @@
 /**app.wxss**/
+/* 全局容器 */
 .container {
   height: 100%;
   display: flex;
@@ -11,29 +12,235 @@
 
 /* 全局样式 */
 page {
-  background-color: #f5f5f5;
-  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif;
+  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  color: #2c3e50;
 }
 
-/* 通用按钮样式 */
-.btn {
-  border-radius: 8rpx;
-  font-size: 28rpx;
-  padding: 20rpx 40rpx;
+/* 主题色彩变量 */
+:root {
+  --primary-color: #4CAF50;
+  --primary-light: #81C784;
+  --primary-dark: #388E3C;
+  --secondary-color: #2196F3;
+  --accent-color: #FF9800;
+  --success-color: #4CAF50;
+  --warning-color: #FF9800;
+  --error-color: #F44336;
+  --text-primary: #2c3e50;
+  --text-secondary: #5a6c7d;
+  --text-muted: #95a5a6;
+  --background-primary: #ffffff;
+  --background-secondary: #f8f9fa;
+  --border-color: rgba(76, 175, 80, 0.1);
+  --shadow-light: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+  --shadow-medium: 0 8rpx 25rpx rgba(76, 175, 80, 0.15);
+  --shadow-heavy: 0 12rpx 40rpx rgba(0, 0, 0, 0.1);
 }
 
-/* 卡片样式 */
+/* 通用卡片样式 */
 .card {
-  background-color: #ffffff;
-  border-radius: 12rpx;
-  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
-  margin: 20rpx;
-  padding: 30rpx;
+  background: linear-gradient(145deg, #ffffff, #f8f9fa);
+  border-radius: 20rpx;
+  padding: 35rpx;
+  margin-bottom: 25rpx;
+  box-shadow: var(--shadow-light);
+  border: 2rpx solid var(--border-color);
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4rpx;
+  background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
+}
+
+.card:hover {
+  transform: translateY(-4rpx);
+  box-shadow: var(--shadow-medium);
+}
+
+/* 文字样式 */
+.title {
+  font-size: 36rpx;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 25rpx;
+  line-height: 1.4;
+}
+
+.subtitle {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin-bottom: 20rpx;
+  line-height: 1.4;
+}
+
+.text {
+  font-size: 28rpx;
+  color: var(--text-muted);
+  line-height: 1.6;
+  font-weight: 400;
+}
+
+/* 按钮样式 */
+.btn {
+  display: inline-block;
+  padding: 25rpx 45rpx;
+  border-radius: 18rpx;
+  text-align: center;
+  font-size: 32rpx;
+  font-weight: 600;
+  border: none;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+  box-shadow: var(--shadow-light);
+}
+
+.btn::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  transition: left 0.5s ease;
+}
+
+.btn:active::before {
+  left: 100%;
+}
+
+.btn.primary {
+  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+  color: #ffffff;
+}
+
+.btn.primary:active {
+  transform: translateY(2rpx);
+  box-shadow: var(--shadow-medium);
+}
+
+.btn.success {
+  background: linear-gradient(135deg, var(--success-color), #45a049);
+  color: #ffffff;
+}
+
+.btn.warning {
+  background: linear-gradient(135deg, var(--warning-color), #f57c00);
+  color: #ffffff;
+}
+
+.btn.danger {
+  background: linear-gradient(135deg, var(--error-color), #d32f2f);
+  color: #ffffff;
+}
+
+/* 布局工具类 */
+.flex {
+  display: flex;
+}
+
+.flex.center {
+  align-items: center;
+  justify-content: center;
+}
+
+.flex.between {
+  justify-content: space-between;
+  align-items: center;
+}
+
+.flex.around {
+  justify-content: space-around;
+  align-items: center;
+}
+
+.flex.column {
+  flex-direction: column;
+}
+
+/* 加载状态 */
+.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 50rpx;
+  color: var(--text-muted);
+  font-size: 30rpx;
+}
+
+/* 空状态 */
+.empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 100rpx 40rpx;
+  color: var(--text-muted);
+}
+
+.empty-icon {
+  font-size: 100rpx;
+  margin-bottom: 25rpx;
+  opacity: 0.6;
+  color: var(--primary-color);
+}
+
+.empty-text {
+  font-size: 32rpx;
+  font-weight: 500;
 }
 
 /* 分割线样式 */
 .divider {
   height: 2rpx;
-  background-color: #e0e0e0;
-  margin: 20rpx 0;
+  background: linear-gradient(90deg, transparent, var(--border-color), transparent);
+  margin: 30rpx 0;
 }
+
+/* 标签样式 */
+.tag {
+  display: inline-block;
+  padding: 12rpx 20rpx;
+  border-radius: 25rpx;
+  font-size: 26rpx;
+  font-weight: 500;
+  background: var(--background-secondary);
+  color: var(--text-secondary);
+  border: 2rpx solid var(--border-color);
+}
+
+.tag.primary {
+  background: linear-gradient(135deg, #e8f5e8, #f1f8e9);
+  color: var(--primary-color);
+  border-color: var(--primary-color);
+}
+
+.tag.success {
+  background: linear-gradient(135deg, #e8f5e8, #f1f8e9);
+  color: var(--success-color);
+  border-color: var(--success-color);
+}
+
+.tag.warning {
+  background: linear-gradient(135deg, #fff8e1, #fffbf0);
+  color: var(--warning-color);
+  border-color: var(--warning-color);
+}
+
+.tag.danger {
+  background: linear-gradient(135deg, #ffebee, #fef5f5);
+  color: var(--error-color);
+  border-color: var(--error-color);
+}
+