mfx/web-fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pk 重构ui风格

Browse Source
This commit is contained in:
没复习
2026-02-08 20:53:39 +08:00
parent 9f2b9a1997
commit 658f50cc51
7 changed files with 106 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/views/pk-mini/Message.vue
View File

@@ -261,8 +261,10 @@ onUnmounted(() => {
.message-page {
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;
}
@@ -273,7 +275,7 @@ onUnmounted(() => {
.conversation-list {
height: 100%;
overflow: auto;
background: #fafafa;
background-color: #f9fafb; // gray-50
}
.conversation-item {
@@ -281,11 +283,11 @@ onUnmounted(() => {
padding: 15px;
cursor: pointer;
transition: background 0.2s;
border-bottom: 1px solid #eee;
border-bottom: 1px solid #f1f5f9; // slate-100
}
.conversation-item:hover, .conversation-item.active {
background: #f0f0f0;
background-color: #eff6ff; // blue-50
}
.conv-avatar {
@@ -315,17 +317,17 @@ onUnmounted(() => {
.conv-name {
font-weight: bold;
color: #333;
color: #0f172a; // slate-900
}
.conv-time {
font-size: 12px;
color: #999;
color: #94a3b8; // slate-400
}
.conv-preview {
font-size: 13px;
color: #666;
color: #64748b; // slate-500
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -373,24 +375,24 @@ onUnmounted(() => {
.text-message {
padding: 12px 16px;
background: #f5f5f5;
background-color: #f1f5f9; // slate-100
border-radius: 12px;
font-size: 15px;
line-height: 1.5;
}
.message-item.mine .text-message {
background: #7bbd0093;
background-color: #dbeafe; // blue-100
}
.chat-input-area {
border-top: 1px solid #eee;
border-top: 1px solid #f1f5f9; // slate-100
}
.input-toolbar {
display: flex;
padding: 10px 15px;
background: #e4f9f9;
background-color: #eff6ff; // blue-50
}
.toolbar-btn {
@@ -405,11 +407,11 @@ onUnmounted(() => {
}
.toolbar-btn:hover {
background: rgba(255, 255, 255, 0.8);
background-color: rgba(255, 255, 255, 0.8);
}
.toolbar-btn .material-icons-round {
color: #03aba8;
color: #2563eb; // blue-600
}
.input-box {
@@ -434,7 +436,7 @@ onUnmounted(() => {
flex-direction: column;
align-items: center;
justify-content: center;
color: #03aba8;
color: #2563eb; // blue-600
}
.placeholder-icon {
@@ -446,6 +448,6 @@ onUnmounted(() => {
.empty-tip {
text-align: center;
padding: 50px;
color: #999;
color: #94a3b8; // slate-400
}
</style>

12
src/views/pk-mini/Mine.vue
View File

@@ -88,7 +88,7 @@ const tabs = [
height: 90px;
margin: 0 10px;
border-radius: 24px;
background-color: #cef1eb;
background-color: #f1f5f9; // slate-100
border: 2px solid transparent;
display: flex;
align-items: center;
@@ -102,8 +102,8 @@ const tabs = [
}
.tab-item.active {
background: linear-gradient(90deg, #e4ffff, #ffffff);
border-color: #03aba8;
background: linear-gradient(90deg, #eff6ff, #ffffff); // from-blue-50 to-white
border-color: #2563eb; // blue-600
}
.tab-icon {
@@ -124,11 +124,11 @@ const tabs = [
.tab-label {
font-size: 24px;
color: #636363;
color: #64748b; // slate-500
}
.tab-item.active .tab-label {
color: #03aba8;
color: #2563eb; // blue-600
font-weight: bold;
}
@@ -136,7 +136,7 @@ const tabs = [
flex: 1;
height: calc(100% - 110px);
background-color: #ffffff;
border-radius: 16px;
border-radius: 12px;
overflow: hidden;
}
</style>

70
src/views/pk-mini/PkHall.vue
View File

@@ -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 {

7
src/views/pk-mini/PkMiniWorkbench.vue
View File

@@ -84,9 +84,7 @@ onUnmounted(() => {
.pk-mini-workbench {
width: 100%;
height: 100%;
background-image: url(@/assets/pk-mini/bg.png);
background-size: cover;
background-position: center;
background-color: #f9fafb; // gray-50
}
.pk-container {
@@ -96,7 +94,8 @@ onUnmounted(() => {
.pk-aside {
height: 100%;
background: transparent;
background-color: #ffffff;
border-right: 1px solid #f1f5f9; // slate-100
}
.pk-main {