pk 重构ui风格

src/views/pk-mini/PkHall.vue

@@ -621,8 +621,10 @@ onUnmounted(() => {
 .pk-hall {
   width: 100%;
   height: 100%;
-  background: white;
-  border-radius: 16px;
+  background-color: #ffffff;
+  border: 1px solid #f1f5f9; // slate-100
+  border-radius: 12px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); // shadow-sm
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -638,8 +640,8 @@ onUnmounted(() => {
   align-items: center;
   justify-content: space-around;
   padding: 0 20px;
-  background: linear-gradient(180deg, #f0fffe, #ffffff);
-  border-bottom: 1px solid #e0f0f0;
+  background: linear-gradient(180deg, #eff6ff, #ffffff); // from-blue-50 to-white
+  border-bottom: 1px solid #f1f5f9; // slate-100
 }
 
 .pk-splitter {
@@ -652,9 +654,9 @@ onUnmounted(() => {
   position: relative;
   width: 280px;
   height: 50px;
-  background-color: #4fcacd;
+  background-color: #3b82f6; // blue-500
   border-radius: 25px;
-  box-shadow: -3px 3px 4px #45aaac inset;
+  box-shadow: -3px 3px 4px rgba(37, 99, 235, 0.3) inset;
   display: flex;
   align-items: center;
 }
@@ -678,12 +680,12 @@ onUnmounted(() => {
   width: 140px;
   height: 50px;
   border-radius: 25px;
-  color: #03aba8;
+  color: #2563eb; // blue-600
   text-align: center;
   line-height: 50px;
   font-size: 18px;
   font-weight: bold;
-  background: linear-gradient(180deg, #e4ffff, #ffffff);
+  background: linear-gradient(180deg, #eff6ff, #ffffff); // from-blue-50 to-white
   transition: left 0.3s ease;
   z-index: 2;
 }
@@ -745,14 +747,14 @@ onUnmounted(() => {
 }
 
 .search-btn {
-  background: linear-gradient(0deg, #4FCACD, #5FDBDE);
+  background: linear-gradient(0deg, #2563eb, #3b82f6); // from-blue-600 to-blue-500
   color: white;
 }
 
 .reset-btn {
   background: white;
-  border: 1px solid #03aba8;
-  color: #03aba8;
+  border: 1px solid #2563eb; // blue-600
+  color: #2563eb; // blue-600
 }
 
 .search-btn:hover, .reset-btn:hover {
@@ -775,7 +777,7 @@ onUnmounted(() => {
   height: 100%;
   overflow: auto;
   padding: 15px;
-  background: white;
+  background-color: #ffffff;
   border-radius: 16px 0 0 16px;
 }
 
@@ -783,20 +785,22 @@ onUnmounted(() => {
   display: flex;
   padding: 20px;
   margin-bottom: 15px;
-  background: url('https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/PKbackground.png') no-repeat center/cover;
+  background-color: #ffffff;
+  border: 1px solid #f1f5f9; // slate-100
   border-radius: 12px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); // shadow-sm
   cursor: pointer;
   transition: all 0.3s;
 }
 
 .pk-card:hover {
-  box-shadow: 0 0 10px rgba(0,0,0,0.2);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); // shadow-md
   transform: scale(1.02);
 }
 
 .pk-card.selected {
-  background-color: #fffbfa;
-  border: 1px solid #f4d0c9;
+  background-color: rgba(239, 246, 255, 0.3); // blue-50/30
+  border-color: #bfdbfe; // blue-200
 }
 
 .pk-avatar {
@@ -840,19 +844,19 @@ onUnmounted(() => {
 }
 
 .pk-gender.male {
-  background: #59d8db;
+  background-color: #60a5fa; // blue-400
 }
 
 .pk-gender.female {
-  background: #f3876f;
+  background-color: #f472b6; // pink-400
 }
 
 .pk-country {
   padding: 2px 10px;
-  background: #e4f9f9;
+  background-color: #eff6ff; // blue-50
   border-radius: 10px;
   font-size: 12px;
-  color: #03aba8;
+  color: #2563eb; // blue-600
 }
 
 .pk-time {
@@ -884,15 +888,15 @@ onUnmounted(() => {
 .empty-tip {
   text-align: center;
   padding: 50px;
-  color: #03aba8;
+  color: #2563eb; // blue-600
   font-size: 16px;
 }
 
 // 聊天面板
 .chat-panel {
   height: 100%;
-  border-left: 1px solid #03aba82f;
-  background: white;
+  border-left: 1px solid #f1f5f9; // slate-100
+  background-color: #ffffff;
 }
 
 .chat-container {
@@ -980,7 +984,7 @@ onUnmounted(() => {
   justify-content: space-between;
   align-items: center;
   padding: 10px 15px;
-  background: #e4f9f9;
+  background-color: #eff6ff; // blue-50
 }
 
 .control-btns {
@@ -1011,14 +1015,14 @@ onUnmounted(() => {
 
 .send-btn {
   padding: 8px 20px;
-  color: #03aba8;
+  color: #2563eb; // blue-600
   cursor: pointer;
   border-radius: 8px;
   transition: all 0.2s;
 }
 
 .send-btn:hover {
-  background: #03aba82d;
+  background-color: #dbeafe; // blue-100
 }
 
 .input-box {
@@ -1039,7 +1043,7 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #03aba8;
+  color: #2563eb; // blue-600
   font-size: 18px;
   font-weight: bold;
 }
@@ -1086,13 +1090,13 @@ onUnmounted(() => {
 }
 
 .anchor-item:hover {
-  border-color: #4fcacd;
-  background: #f8ffff;
+  border-color: #60a5fa; // blue-400
+  background-color: rgba(239, 246, 255, 0.5); // blue-50/50
 }
 
 .anchor-item.selected {
-  border-color: #03aba8;
-  background: #e4f9f9;
+  border-color: #2563eb; // blue-600
+  background-color: #eff6ff; // blue-50
 }
 
 .anchor-avatar {
@@ -1128,11 +1132,11 @@ onUnmounted(() => {
 }
 
 .anchor-gender.male {
-  background: #59d8db;
+  background-color: #60a5fa; // blue-400
 }
 
 .anchor-gender.female {
-  background: #f3876f;
+  background-color: #f472b6; // pink-400
 }
 
 .anchor-coin {