A1300399510/GterForumWeB
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

a1300399510@qq.com 提交于 2023/04/04 -18:20:01

Browse Source
This commit is contained in:
XiaoMo 2023-04-04 18:20:11 +08:00
parent bd80fa1b7f
commit a3f06d7402
1 changed files with 55 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/views/detail/detailIndex.vue
View File

@ -86,7 +86,7 @@
</div> </div>
</template> </template>
<template v-else> <template v-else-if="type == 3">
<div class="offer-content"> <div class="offer-content">
<div class="offer-content-box" v-if="tenementInfoState"> <div class="offer-content-box" v-if="tenementInfoState">
<template v-for="(item, index) in tenementKey"> <template v-for="(item, index) in tenementKey">
@ -104,6 +104,14 @@
</div> </div>
<div v-html="info.message" class="vHtmlMessage" style="">
</div>
</div>
</template>
<template v-else>
<div class="offer-content">
<div v-html="info.message" class="vHtmlMessage" style=""> <div v-html="info.message" class="vHtmlMessage" style="">
</div> </div>
</div> </div>
@ -195,7 +203,7 @@
<div class="bottom-item flex1 flexacenter"> <div class="bottom-item flex1 flexacenter">
<div class="bottom-operation-box flex1 flexacenter"> <div class="bottom-operation-box flex1 flexacenter">
<div class="bottom-operation-item flex1 flexcolumn flexcenter" @click="tapLike"> <div class="bottom-operation-item flex1 flexcolumn flexcenter" @click="tapLike()">
<div class="praise_bubble" id="praise_bubble" @click.stop="" <div class="praise_bubble" id="praise_bubble" @click.stop=""
:style="{ height: prepareLiskeState ? '' : '.5333rem' }"> :style="{ height: prepareLiskeState ? '' : '.5333rem' }">
<div class="bubble" v-for="(item, index) in listlist" :key="index"></div> <div class="bubble" v-for="(item, index) in listlist" :key="index"></div>
@ -366,7 +374,7 @@ export default {
if (this.type == 6) this.getOfferDetail() if (this.type == 6) this.getOfferDetail()
else if (this.type == 5) this.getsummaryDetails() else if (this.type == 5) this.getsummaryDetails()
else if (this.type == 0) this.getTenementDetails() else if (this.type == 3) this.getTenementDetails()
}) })
}, },
@ -478,7 +486,8 @@ export default {
d.style.backgroundImage = `url('./img/bg${b}.png')` d.style.backgroundImage = `url('./img/bg${b}.png')`
d.style.backgroundSize = 'contain' d.style.backgroundSize = 'contain'
d.className = `bubble`; d.className = `bubble`;
// d.style.animation = `bubble_${bl} 1.5s linear 1 forwards, bubble_big_${Math.floor(Math.random() * 3) + 1} 0.8s linear 1 forwards, bubble_y 1.5s linear 1 forwards` // d.style.animation = `bubble_1 bubble_${bl} 1.5s linear 1 forwards, bubble_big_${Math.floor(Math.random() * 3) + 1} 0.8s linear 1 forwards, bubble_y 1.5s linear 1 forwards`
// d.style.animation = `bubble_1 1.5s linear 1 forwards`
d.dataset.t = String(Date.now()); d.dataset.t = String(Date.now());
praiseBubble.appendChild(d); praiseBubble.appendChild(d);
@ -1068,15 +1077,48 @@ export default {
bottom: 1.2rem; bottom: 1.2rem;
background-color: transparent; background-color: transparent;
.bubble { /deep/ {
position: absolute;
width: 40px;
height: 40px; .bubble {
left: 0; position: absolute;
bottom: 0px; width: 40px;
background-repeat: no-repeat; height: 40px;
background-size: 100%; left: 0;
transform-origin: bottom; bottom: 0px;
background-repeat: no-repeat;
background-size: 100%;
transform-origin: bottom;
animation: like 1s ease-out, sway 0.2s ease-in-out infinite;
}
@keyframes like {
0% {
opacity: 1;
transform: translate(-50%, 0);
}
100% {
opacity: 0;
transform: translate(-50%, -50px);
}
}
@keyframes bubble_1 {
25% {
margin-left: -10px;
}
50% {
margin-left: -10px;
}
100% {
margin-left: -18px;
}
}
} }