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

Loading…
Cancel
Save