feat: 前端UI/UX全面优化 - CSS变量系统/交互动画/按下反馈/弹窗动画/输入框聚焦增强

src/views/ssq/HitAnalysis.vue

@@ -123,14 +123,10 @@
 <script>
 import api, { lotteryApi } from '../../api/index.js'
 import { userStore } from '../../store/user.js'
-import { ElSelect, ElOption, ElMessage } from 'element-plus'
+import { ElMessage } from 'element-plus'
 
 export default {
   name: 'HitAnalysis',
-  components: {
-    ElSelect,
-    ElOption
-  },
   data() {
     return {
       loading: false,

src/views/ssq/Home.vue

@@ -1106,52 +1106,10 @@
 import { lotteryApi } from '../../api'
 import { userStore } from '../../store/user'
 import AlgorithmProcessModal from '../../components/AlgorithmProcessModal.vue'
-import { 
-  ElButton, 
-  ElCard, 
-  ElSteps, 
-  ElStep, 
-  ElInput, 
-  ElRadioGroup, 
-  ElRadioButton,
-  ElDialog,
-  ElAlert,
-  ElCheckbox,
-  ElDivider,
-  ElSkeleton,
-  ElTag,
-  ElSelect,
-  ElOption
-} from 'element-plus'
-import { ArrowLeft, Warning, Check, InfoFilled, Trophy, QuestionFilled, Bell, Promotion } from '@element-plus/icons-vue'
-
 export default {
   name: 'Home',
   components: {
-    AlgorithmProcessModal,
-    ElButton,
-    ElCard,
-    ElSteps,
-    ElStep,
-    ElInput,
-    ElRadioGroup,
-    ElRadioButton,
-    ElDialog,
-    ElAlert,
-    ElCheckbox,
-    ElDivider,
-    ElSkeleton,
-    ElTag,
-    ArrowLeft,
-    Warning,
-    Check,
-    InfoFilled,
-    QuestionFilled,
-    Bell,
-    Promotion,
-    ElSelect,
-    ElOption,
-    Trophy
+    AlgorithmProcessModal
   },
   data() {
     return {
@@ -2186,6 +2144,14 @@ export default {
   box-shadow: 0 6px 16px rgba(229, 62, 62, 0.4);
 }
 
+.custom-btn-primary:active {
+  transform: translateY(0) scale(0.97);
+}
+
+.custom-btn-default:active {
+  transform: scale(0.97);
+}
+
 /* 消息弹窗特殊样式 */
 .custom-message-dialog {
   width: 400px;
@@ -2282,7 +2248,7 @@ export default {
 /* 页面容器 */
 .home-container {
   padding: 20px 20px 8px 20px;
-  background-color: #f0f2f5;
+  background-color: var(--color-bg-page, #f0f2f5);
   min-height: calc(100vh - 70px);
   display: flex;
   flex-direction: column;
@@ -2457,14 +2423,20 @@ export default {
 }
 
 .position-item:hover {
-  transform: translateY(-1px);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.position-item:active {
+  transform: scale(0.97);
+  transition-duration: 0.1s;
 }
 
 .position-item.selected {
-  border-color: #e53e3e;
-  background: rgba(229, 62, 62, 0.1);
+  border-color: var(--color-primary, #e53e3e);
+  background: var(--color-primary-bg, rgba(229, 62, 62, 0.08));
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(229, 62, 62, 0.2);
+  box-shadow: 0 4px 12px var(--color-primary-shadow, rgba(229, 62, 62, 0.2));
 }
 
 .position-title {
@@ -3138,7 +3110,7 @@ export default {
 }
 
 .login-confirm-btn:active {
-  transform: translateY(0);
+  transform: translateY(0) scale(0.96);
 }
 
 .single-btn {

src/views/ssq/LineAnalysis.vue

@@ -263,33 +263,8 @@
 
 <script>
 import { lotteryApi } from '@/api'
-import { 
-  ElButton, 
-  ElCard, 
-  ElAvatar, 
-  ElDivider, 
-  ElAlert, 
-  ElResult, 
-  ElIcon,
-  ElCollapse,
-  ElCollapseItem
-} from 'element-plus'
-import { ArrowLeft, InfoFilled } from '@element-plus/icons-vue'
-
 export default {
   name: 'LineAnalysis',
-  components: {
-    ElButton, 
-    ElCard, 
-    ElAvatar, 
-    ElDivider, 
-    ElAlert, 
-    ElResult, 
-    ElIcon,
-    ElCollapse,
-    ElCollapseItem,
-    InfoFilled
-  },
   data() {
     return {
       analysisType: '', // 'red-red', 'blue-blue', 'red-blue', 'blue-red'

src/views/ssq/Lottery.vue

@@ -577,7 +577,7 @@ export default {
 <style scoped>
 .ssq-lottery-page {
   min-height: calc(100vh - 70px);
-  background: #f5f5f5;
+  background: var(--color-bg-page, #f0f2f5);
   padding: 16px 0;
 }
 

src/views/ssq/PrizeStatistics.vue

@@ -80,14 +80,8 @@
 <script>
 import api from '../../api/index.js'
 import { userStore } from '../../store/user.js'
-import { ElSelect, ElOption } from 'element-plus'
-
 export default {
   name: 'PrizeStatistics',
-  components: {
-    ElSelect,
-    ElOption
-  },
   data() {
     return {
       loading: false,

src/views/ssq/SsqTableAnalysis.vue

@@ -93,28 +93,8 @@
 
 <script>
 import { lotteryApi } from '../../api/index.js'
-import { 
-  ElButton, 
-  ElCard, 
-  ElSkeleton, 
-  ElAlert, 
-  ElTable, 
-  ElTableColumn, 
-  ElEmpty
-} from 'element-plus'
-import { ArrowLeft } from '@element-plus/icons-vue'
-
 export default {
   name: 'SsqTableAnalysis',
-  components: {
-    ElButton,
-    ElCard,
-    ElSkeleton,
-    ElAlert,
-    ElTable,
-    ElTableColumn,
-    ElEmpty
-  },
   data() {
     return {
       drawsData: [],

src/views/ssq/SurfaceAnalysis.vue

@@ -251,43 +251,8 @@
 
 <script>
 import { lotteryApi } from '@/api'
-import { 
-  ElButton, 
-  ElCard, 
-  ElAvatar, 
-  ElDivider, 
-  ElAlert, 
-  ElResult, 
-  ElTag, 
-  ElStatistic,
-  ElTooltip,
-  ElIcon,
-  ElCollapse,
-  ElCollapseItem,
-  ElTable,
-  ElTableColumn
-} from 'element-plus'
-import { ArrowLeft, InfoFilled } from '@element-plus/icons-vue'
-
 export default {
   name: 'SurfaceAnalysis',
-  components: {
-    ElButton, 
-    ElCard, 
-    ElAvatar, 
-    ElDivider, 
-    ElAlert, 
-    ElResult, 
-    ElTag, 
-    ElStatistic,
-    ElTooltip,
-    ElIcon,
-    ElCollapse,
-    ElCollapseItem,
-    ElTable,
-    ElTableColumn,
-    InfoFilled
-  },
   data() {
     return {
       analysisType: '', // 'red-red', 'red-blue', 'blue-red'

src/views/ssq/TrendAnalysis.vue

@@ -149,46 +149,8 @@
 
 <script>
 import { lotteryApi } from '@/api'
-import {
-  ElButton,
-  ElCard,
-  ElRadioGroup,
-  ElRadioButton,
-  ElSkeleton,
-  ElAlert,
-  ElTable,
-  ElTableColumn,
-  ElPagination,
-  ElEmpty,
-  ElIcon
-} from 'element-plus'
-import { 
-  ArrowLeft, 
-  Document, 
-  Sort, 
-  Histogram, 
-  Menu 
-} from '@element-plus/icons-vue'
-
 export default {
   name: 'TrendAnalysis',
-  components: {
-    ElButton,
-    ElCard,
-    ElRadioGroup,
-    ElRadioButton,
-    ElSkeleton,
-    ElAlert,
-    ElTable,
-    ElTableColumn,
-    ElPagination,
-    ElEmpty,
-    ElIcon,
-    Document,
-    Sort,
-    Histogram,
-    Menu
-  },
   data() {
     return {
       loading: false,

src/views/ssq/UsageStats.vue

@@ -102,14 +102,8 @@
 <script>
 import api from '../../api/index.js'
 import { userStore } from '../../store/user.js'
-import { ElSelect, ElOption } from 'element-plus'
-
 export default {
   name: 'UsageStats',
-  components: {
-    ElSelect,
-    ElOption
-  },
   data() {
     return {
       loading: false,