Browse Source

图标下方添加文字,同时取消悬停文字提示.

master
宋杰 3 weeks ago
parent
commit
aeb41b5dcd
  1. 18
      src/views/components/HistoryRecord.vue

18
src/views/components/HistoryRecord.vue

@ -187,19 +187,21 @@
</div> </div>
<div class="bottom-container"> <div class="bottom-container">
<div class="bottom-btn" @click="handleAnnouncementClick" title="公告">
<div class="bottom-btn" @click="handleAnnouncementClick">
<img <img
class="bottom-announcement" class="bottom-announcement"
src="https://d31zlh4on95l9h.cloudfront.net/images/172be9b9c4d936f2f6b182ef7a4bed10.png" src="https://d31zlh4on95l9h.cloudfront.net/images/172be9b9c4d936f2f6b182ef7a4bed10.png"
alt="icon" alt="icon"
/> />
<div style="color: aliceblue;">公告</div>
</div> </div>
<div class="bottom-btn" @click="handleFeedbackClick" title="用户反馈">
<div class="bottom-btn" @click="handleFeedbackClick">
<img <img
class="bottom-feedback" class="bottom-feedback"
src="https://d31zlh4on95l9h.cloudfront.net/images/ed88a0a7095c3cd1e0b51ffcca7f4068.png" src="https://d31zlh4on95l9h.cloudfront.net/images/ed88a0a7095c3cd1e0b51ffcca7f4068.png"
alt="icon" alt="icon"
/> />
<div style="color: aliceblue;">用户反馈</div>
</div> </div>
</div> </div>
</div> </div>
@ -1216,10 +1218,14 @@ onMounted(() => {
.bottom-btn { .bottom-btn {
width: 50%; width: 50%;
display: flex; display: flex;
flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
} }
.bottom-btn:hover {
transform: scale(1.2);
}
.mobile-bottom-btn { .mobile-bottom-btn {
width: 100%; width: 100%;
@ -1239,9 +1245,9 @@ onMounted(() => {
width: auto; width: auto;
} }
.bottom-feedback:hover {
/* .bottom-feedback:hover {
transform: scale(1.2); transform: scale(1.2);
}
} */
.bottom-announcement { .bottom-announcement {
width: 30%; width: 30%;
@ -1260,9 +1266,9 @@ onMounted(() => {
font-size: 1.1rem; font-size: 1.1rem;
} }
.bottom-announcement:hover {
/* .bottom-announcement:hover {
transform: scale(1.2); transform: scale(1.2);
}
} */
/* 移动端适配 */ /* 移动端适配 */
@media (max-width: 768px) { @media (max-width: 768px) {

Loading…
Cancel
Save