Hooke / lls_program

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
2d985641 1 parent 40b8368c

style: 使用 CSS 变量统一管理主题颜色 

将硬编码的颜色值替换为 CSS 变量 --primary-color 和 --primary-color-rgb
Inline Side-by-side
Showing 4 changed files with 16 additions and 15 deletions
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
11 --error-color: #EF4444; 11 --error-color: #EF4444;
12 --color-primary: var(--primary-color); 12 --color-primary: var(--primary-color);
13 --color-text: #9CA3AF; 13 --color-text: #9CA3AF;
14 + --primary-color-rgb: 84, 171, 174;
14 } 15 }
15 16
16 .bg-blue-500 { 17 .bg-blue-500 {
......
...@@ -59,7 +59,7 @@ const scrollToTop = () => { ...@@ -59,7 +59,7 @@ const scrollToTop = () => {
59 bottom: 250rpx; 59 bottom: 250rpx;
60 width: 80rpx; 60 width: 80rpx;
61 height: 80rpx; 61 height: 80rpx;
62 - background: rgba(64, 158, 255, 0.8); 62 + background: rgba(var(--primary-color-rgb), 0.8);
63 border-radius: 50%; 63 border-radius: 50%;
64 display: flex; 64 display: flex;
65 align-items: center; 65 align-items: center;
...@@ -70,7 +70,7 @@ const scrollToTop = () => { ...@@ -70,7 +70,7 @@ const scrollToTop = () => {
70 z-index: 999; 70 z-index: 999;
71 71
72 &:hover { 72 &:hover {
73 - background: rgba(64, 158, 255, 1); 73 + background: rgba(var(--primary-color-rgb), 1);
74 transform: translateY(-4rpx); 74 transform: translateY(-4rpx);
75 } 75 }
76 76
......
1 <!-- 1 <!--
2 * @Date: 2025-01-09 00:00:00 2 * @Date: 2025-01-09 00:00:00
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-09-09 15:54:03 4 + * @LastEditTime: 2025-09-09 16:22:15
5 * @FilePath: /lls_program/src/components/RankingCard.vue 5 * @FilePath: /lls_program/src/components/RankingCard.vue
6 * @Description: 排行榜卡片组件 6 * @Description: 排行榜卡片组件
7 --> 7 -->
...@@ -329,7 +329,7 @@ defineExpose({ ...@@ -329,7 +329,7 @@ defineExpose({
329 329
330 <style lang="less"> 330 <style lang="less">
331 .ranking-card { 331 .ranking-card {
332 - background: linear-gradient(180deg, #4A90E2 0%, #357ABD 100%); 332 + background: linear-gradient(180deg, var(--primary-color) 0%, var(--primary-color) 100%);
333 border-radius: 20rpx; 333 border-radius: 20rpx;
334 padding: 40rpx; 334 padding: 40rpx;
335 margin: 30rpx; 335 margin: 30rpx;
...@@ -405,7 +405,7 @@ defineExpose({ ...@@ -405,7 +405,7 @@ defineExpose({
405 cursor: pointer; 405 cursor: pointer;
406 406
407 &.active { 407 &.active {
408 - color: #4A90E2; 408 + color: var(--primary-color);
409 font-weight: 600; 409 font-weight: 600;
410 transform: scale(1.02); 410 transform: scale(1.02);
411 } 411 }
...@@ -506,7 +506,7 @@ defineExpose({ ...@@ -506,7 +506,7 @@ defineExpose({
506 align-items: center; 506 align-items: center;
507 justify-content: center; 507 justify-content: center;
508 position: relative; 508 position: relative;
509 - background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%); 509 + background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color) 100%);
510 border-radius: 16rpx 16rpx 0 0; 510 border-radius: 16rpx 16rpx 0 0;
511 box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.2); 511 box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.2);
512 512
...@@ -600,7 +600,7 @@ defineExpose({ ...@@ -600,7 +600,7 @@ defineExpose({
600 .my-rank-number { 600 .my-rank-number {
601 width: 48rpx; 601 width: 48rpx;
602 height: 48rpx; 602 height: 48rpx;
603 - background: #4A90E2; 603 + background: var(--primary-color);
604 border-radius: 50%; 604 border-radius: 50%;
605 display: flex; 605 display: flex;
606 align-items: center; 606 align-items: center;
...@@ -648,7 +648,7 @@ defineExpose({ ...@@ -648,7 +648,7 @@ defineExpose({
648 .my-steps { 648 .my-steps {
649 font-size: 26rpx; 649 font-size: 26rpx;
650 font-weight: bold; 650 font-weight: bold;
651 - color: #4A90E2; 651 + color: var(--primary-color);
652 margin-bottom: 6rpx; 652 margin-bottom: 6rpx;
653 } 653 }
654 654
......
1 <!-- 1 <!--
2 * @Date: 2025-09-01 13:07:52 2 * @Date: 2025-09-01 13:07:52
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-09-09 15:56:24 4 + * @LastEditTime: 2025-09-09 16:21:17
5 * @FilePath: /lls_program/src/pages/FamilyRank/index.vue 5 * @FilePath: /lls_program/src/pages/FamilyRank/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -346,7 +346,7 @@ onMounted(async () => { ...@@ -346,7 +346,7 @@ onMounted(async () => {
346 <style lang="less"> 346 <style lang="less">
347 .family-rank-page { 347 .family-rank-page {
348 min-height: 100vh; 348 min-height: 100vh;
349 - background: linear-gradient(180deg, #4A90E2 0%, #357ABD 100%); 349 + background: linear-gradient(180deg, var(--primary-color) 0%, var(--primary-color) 100%);
350 padding-bottom: 120rpx; 350 padding-bottom: 120rpx;
351 351
352 .header { 352 .header {
...@@ -393,7 +393,7 @@ onMounted(async () => { ...@@ -393,7 +393,7 @@ onMounted(async () => {
393 cursor: pointer; 393 cursor: pointer;
394 394
395 &.active { 395 &.active {
396 - color: #4A90E2; 396 + color: var(--primary-color);
397 font-weight: 600; 397 font-weight: 600;
398 transform: scale(1.02); 398 transform: scale(1.02);
399 } 399 }
...@@ -500,7 +500,7 @@ onMounted(async () => { ...@@ -500,7 +500,7 @@ onMounted(async () => {
500 align-items: center; 500 align-items: center;
501 justify-content: center; 501 justify-content: center;
502 position: relative; 502 position: relative;
503 - background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%); 503 + background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color) 100%);
504 border-radius: 20rpx 20rpx 0 0; 504 border-radius: 20rpx 20rpx 0 0;
505 box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.2); 505 box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.2);
506 506
...@@ -649,7 +649,7 @@ onMounted(async () => { ...@@ -649,7 +649,7 @@ onMounted(async () => {
649 .steps { 649 .steps {
650 font-size: 32rpx; 650 font-size: 32rpx;
651 font-weight: bold; 651 font-weight: bold;
652 - color: #4A90E2; 652 + color: var(--primary-color);
653 } 653 }
654 } 654 }
655 } 655 }
...@@ -712,7 +712,7 @@ onMounted(async () => { ...@@ -712,7 +712,7 @@ onMounted(async () => {
712 .my-rank-number { 712 .my-rank-number {
713 width: 60rpx; 713 width: 60rpx;
714 height: 60rpx; 714 height: 60rpx;
715 - background: #4A90E2; 715 + background: var(--primary-color);
716 border-radius: 50%; 716 border-radius: 50%;
717 display: flex; 717 display: flex;
718 align-items: center; 718 align-items: center;
...@@ -760,7 +760,7 @@ onMounted(async () => { ...@@ -760,7 +760,7 @@ onMounted(async () => {
760 .my-steps { 760 .my-steps {
761 font-size: 32rpx; 761 font-size: 32rpx;
762 font-weight: bold; 762 font-weight: bold;
763 - color: #4A90E2; 763 + color: var(--primary-color);
764 margin-bottom: 8rpx; 764 margin-bottom: 8rpx;
765 } 765 }
766 766
......