Skip to content
Snippets Groups Projects
Commit 1f6819b0 authored by 张 达's avatar 张 达
Browse files

统一按钮鼠标悬停时的样式 

修改歌曲详情信息展示逻辑
parent 5c7c8954
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/Comment.vue
+ 20
− 22
View file @ 1f6819b0
......@@ -287,7 +287,7 @@ const changeSortBy = (type) => {
<textarea placeholder="请输入您的评论..." v-model="comment" @input="adjustHeight"></textarea>
<span
class="custom-button"
style="color: white; font-size: 20px; position: absolute; bottom: 8px; right: 2%"
style="color: white; font-size: 20px; position: absolute; bottom: 14px; right: 2%"
@click.stop="handleSubmit"
>发布</span>
</div>
......@@ -356,43 +356,39 @@ const changeSortBy = (type) => {
</div>
</div>
<div v-if="showDetail" class="song-info-container">
<div class="song-info-row">
<div class="song-info-row" v-if="state.song.title">
<div class="song-info-label">歌曲:</div>
<div class="song-info-value">{{ state.song.title }}</div>
</div>
<div class="song-info-row">
<div class="song-info-row" v-if="state.song.artist">
<div class="song-info-label">艺人:</div>
<div class="song-info-value">{{ state.song.artist }}</div>
</div>
<div class="song-info-row">
<div class="song-info-row" v-if="state.song.album">
<div class="song-info-label">专辑:</div>
<div class="song-info-value">{{ state.song.album }}</div>
</div>
<div class="song-info-row">
<div class="song-info-row" v-if="state.song.lyricist">
<div class="song-info-label">作词:</div>
<div class="song-info-value">未提供</div>
<div class="song-info-value">{{ state.song.lyricist }}</div>
</div>
<div class="song-info-row">
<div class="song-info-row" v-if="state.song.composer">
<div class="song-info-label">作曲:</div>
<div class="song-info-value">未提供</div>
<div class="song-info-value">{{ state.song.composer }}</div>
</div>
<div class="song-info-row">
<div class="song-info-row" v-if="state.song.language">
<div class="song-info-label">歌曲语种:</div>
<div class="song-info-value">未提供</div>
<div class="song-info-value">{{ state.song.language }}</div>
</div>
<div class="song-info-row">
<div class="song-info-row" v-if="state.song.genre">
<div class="song-info-label">歌曲流派:</div>
<div class="song-info-value">未提供</div>
<div class="song-info-value">{{ state.song.genre }}</div>
</div>
<div class="song-info-row">
<div class="song-info-label">原唱:</div>
<div class="song-info-value">未提供</div>
</div>
<div class="song-info-row">
<div class="song-info-row" v-if="state.song.recordCompany">
<div class="song-info-label">唱片公司:</div>
<div class="song-info-value">未提供</div>
<div class="song-info-value">{{ state.song.recordCompany }}</div>
</div>
<div class="song-info-row">
<div class="song-info-row" v-if="state.song.description">
<div class="song-info-label">详细介绍:</div>
<div class="song-info-value">{{ state.song.description }}</div>
</div>
......@@ -526,14 +522,16 @@ const changeSortBy = (type) => {
padding: 10px;
font-size: 15px;
border: 1px solid rgba(255, 255, 255, 0.1);
background-color: rgba(0, 0, 0, 0.3);
background-color: rgba(0, 0, 0, 0.2);
color: #fff;
resize: none;
outline: none;
backdrop-filter: blur(10px);
&:focus {
border-color: rgba(255, 255, 255, 0.2); /* 输入时边框颜色稍微变亮 */
box-shadow: none; /* 移除默认的焦点阴影 */
border-color: rgba(255, 255, 255, 0.2);
box-shadow: none;
background-color: rgba(0, 0, 0, 0.15);
}
&::placeholder {
......
src/components/Header.vue
+ 49
− 53
View file @ 1f6819b0
......@@ -84,7 +84,8 @@ function callSearch() {
<div class="search-box">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-search">
class="feather feather-search"
@click="callSearch">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
......@@ -171,23 +172,22 @@ function callSearch() {
}
.home-btn:hover {
transform: scale(1.1);
color: #efeeee;
background-color: #404040;
transform: translateY(-2px);
}
.home-btn:hover::after {
content: '回到主页';
color: #000000;
position: absolute;
top: 100%;
top: 35px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(255, 255, 255, 0.8);
padding: 3px 4px;
border-radius: 3px;
white-space: nowrap;
background-color: #282828;
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 14px;
white-space: nowrap;
z-index: 1000;
}
.manage-btn {
......@@ -208,9 +208,7 @@ function callSearch() {
}
.manage-btn:hover {
transform: scale(1.1);
color: #efeeee;
background-color: #404040;
transform: translateY(-2px);
}
/*
......@@ -218,16 +216,17 @@ function callSearch() {
*/
.manage-btn:hover::after {
content: '增加歌曲';
color: #000000;
position: absolute;
top: 100%;
top: 35px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(255, 255, 255, 0.8);
padding: 3px 4px;
border-radius: 3px;
white-space: nowrap;
background-color: #282828;
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 14px;
white-space: nowrap;
z-index: 1000;
}
.search-box {
......@@ -292,22 +291,21 @@ input[type="text"]:focus {
.more-btn:hover {
transform: scale(1.1);
color: #efeeee;
background-color: #404040;
}
.more-btn:hover::after {
content: '更多';
color: #000000;
position: absolute;
top: 100%;
left: 50%;
top: 32px;
left: 38%;
transform: translateX(-50%);
background-color: rgba(255, 255, 255, 0.8);
padding: 3px 4px;
border-radius: 3px;
white-space: nowrap;
background-color: #282828;
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 14px;
white-space: nowrap;
z-index: 1000;
}
.role-icon {
......@@ -328,23 +326,22 @@ input[type="text"]:focus {
}
.role-icon svg:hover {
transform: scale(1.1);
color: #efeeee;
background-color: #404040;
transform: translateY(-2px);
}
.role-icon:hover::after {
content: '个人主页';
color: #000000;
position: absolute;
top: 100%;
top: 35px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(255, 255, 255, 0.8);
padding: 3px 4px;
border-radius: 3px;
white-space: nowrap;
background-color: #282828;
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 14px;
white-space: nowrap;
z-index: 1000;
}
.set-icon {
......@@ -365,23 +362,22 @@ input[type="text"]:focus {
}
.set-icon svg:hover {
transform: scale(1.1);
color: #efeeee;
background-color: #404040;
transform: translateY(-2px);
}
.set-icon:hover::after {
content: '设置';
color: #000000;
position: absolute;
top: 100%;
top: 35px;
left: 38%;
transform: translateX(-50%);
background-color: rgba(255, 255, 255, 0.8);
padding: 3px 4px;
border-radius: 3px;
white-space: nowrap;
background-color: #282828;
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 14px;
white-space: nowrap;
z-index: 1000;
}
.exit-icon {
......@@ -402,23 +398,23 @@ input[type="text"]:focus {
}
.exit-icon svg:hover {
transform: scale(1.1);
color: red;
background-color: #404040;
transform: translateY(-2px);
}
.exit-icon:hover::after {
content: '退出';
color: red;
position: absolute;
top: 100%;
top: 35px;
left: 38%;
transform: translateX(-50%);
background-color: rgba(245, 245, 245, 0.8);
padding: 3px 4px;
border-radius: 3px;
white-space: nowrap;
background-color: #282828;
padding: 4px 8px;
border-radius: 4px;
font-size: 14px;
white-space: nowrap;
z-index: 1000;
}
@keyframes slideIn {
......
src/views/HomePage.vue
+ 14
− 14
View file @ 1f6819b0
......@@ -533,6 +533,7 @@ onMounted(() => {
<el-container v-if="midComponents == 2" class="playlist-container"
style="overflow: auto; height: 730px ;border-radius: 12px" >
<el-button class="exit-search"
data-tooltip="退出"
:class="{ 'adjusted-position': showRightContent }"
@click="setMidComponents(1)"></el-button>
<Comment :song-id=currentSongId :user-id=currentUserId></Comment>
......@@ -540,6 +541,7 @@ onMounted(() => {
<el-container v-if="midComponents == 3" class="playlist-container"
style="overflow: auto; height: 730px ;border-radius: 12px">
<el-button class="exit-search"
data-tooltip="退出"
:class="{ 'adjusted-position': showRightContent }"
@click="setMidComponents(1)"></el-button>
<SearchView :songResult="songResult" :playlistResult="playlistResult"/>
......@@ -1689,22 +1691,20 @@ footer {
color: #fff;
}
.exit-search:hover::after {
content: "Exit";
/* 修改提示文字样式，与feature-icon保持一致 */
.exit-search[data-tooltip]:hover::after {
content: attr(data-tooltip);
position: absolute;
top: 35px;
right: 0;
background-color: #fff;
color: #000;
padding: 5px 10px;
border-radius: 5px;
font-size: 14px;
opacity: 0;
transition: opacity 0.3s ease;
}
.exit-search:hover::after {
opacity: 1;
left: 50%;
transform: translateX(-50%);
background-color: #282828;
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
z-index: 1000;
}
.exit-search.adjusted-position {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment