.1875084792839892:6ed96ef180bcaa204c95d2e9e13accaa_69a139bde787dc38300650c0.69a13ec1e787dc38300651dd.69a13ec17326ab07783472c1:Trae CN.T(2026/2/27 14:50:41)

src/css/common/theme.css

@@ -0,0 +1,63 @@
+:root {
+  --primary-color: #677D7C;
+  --primary-light: #8fa5a4;
+  --primary-dark: #4a5f5e;
+  --bg-color: #ffffff;
+  --bg-light: #f5f5f5;
+  --text-color: #333333;
+  --text-secondary: #666666;
+  --btn-shadow: rgba(103, 125, 124, 0.3);
+  --btn-hover-shadow: rgba(103, 125, 124, 0.5);
+}
+
+[data-theme="pink"] {
+  --primary-color: #e91e63;
+  --primary-light: #f48fb1;
+  --primary-dark: #c2185b;
+  --bg-color: #fce4ec;
+  --bg-light: #fff0f5;
+  --text-color: #4a1a2c;
+  --text-secondary: #7c4156;
+  --btn-shadow: rgba(233, 30, 99, 0.3);
+  --btn-hover-shadow: rgba(233, 30, 99, 0.5);
+}
+
+[data-theme="blue"] {
+  --primary-color: #2196f3;
+  --primary-light: #64b5f6;
+  --primary-dark: #1976d2;
+  --bg-color: #e3f2fd;
+  --bg-light: #f0f8ff;
+  --text-color: #0d3a5c;
+  --text-secondary: #3d6a8c;
+  --btn-shadow: rgba(33, 150, 243, 0.3);
+  --btn-hover-shadow: rgba(33, 150, 243, 0.5);
+}
+
+[data-theme="yellow"] {
+  --primary-color: #ff9800;
+  --primary-light: #ffb74d;
+  --primary-dark: #f57c00;
+  --bg-color: #fff8e1;
+  --bg-light: #fffaf0;
+  --text-color: #4a3500;
+  --text-secondary: #7c6536;
+  --btn-shadow: rgba(255, 152, 0, 0.3);
+  --btn-hover-shadow: rgba(255, 152, 0, 0.5);
+}
+
+body {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.g-hd, .g-bd, .g-ft {
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.g-bd {
+  background-color: var(--bg-light);
+  padding: 20px;
+  min-height: 300px;
+}

src/css/page/index.less

@@ -1,20 +1,41 @@
 .text{
   padding: 20px 0;
   font-size: 18px;
-  color:#f63;
+  color: var(--primary-color);
+  transition: color 0.3s ease;
 }
 .btn{
   width: 120px;
   height: 36px;
   line-height: 36px;
-  background-color: #677D7C;
+  background-color: var(--primary-color);
   color:#fff;
   text-align: center;
   border:none;
-  box-shadow: 0 1px 3px #999;
+  box-shadow: 0 2px 8px var(--btn-shadow);
   font-size: 16px;
   cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+}
+.btn:hover{
+  background-color: var(--primary-dark);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px var(--btn-hover-shadow);
+}
+.btn:active{
+  transform: translateY(0);
+  box-shadow: 0 1px 4px var(--btn-shadow);
 }
 .img{
   margin-top: 20px;
 }
+.img img{
+  max-width: 100%;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  transition: transform 0.3s ease;
+}
+.img img:hover{
+  transform: scale(1.02);
+}

src/js/components/dialog/css/dialog.css

@@ -17,11 +17,19 @@
   color:#666;
   background-color: rgba(255,255,255,.8);
   cursor: pointer;
+  transition: all 0.2s ease;
+}
+.v-dialog .close:hover{
+  background-color: var(--primary-color);
+  color: #fff;
+  transform: rotate(90deg);
 }
 .v-dialog .img{
   position: absolute;
   margin:auto;
   top:0;right: 0;bottom:0;left: 0;
   max-width: 90%;
   max-height: 90%;
+  border-radius: 8px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
 }

src/js/components/dialog/index.js

@@ -6,6 +6,13 @@ var html = require('./tmpl/dialog.html')
 /* eslint-disable no-undef */
 module.exports = function () {
   var $dialog = $(html).clone()
+
+  // 检查是否有自定义弹窗图片
+  var customDialogImage = localStorage.getItem('customDialogImage')
+  if (customDialogImage) {
+    $dialog.find('.img').attr('src', customDialogImage)
+  }
+
   $dialog.find('.close').on('click', function () {
     $dialog.fadeOut(function () {
       $(this).remove()