|
@@ -8,7 +8,16 @@
|
|
<span>{{ item.name }}</span>
|
|
<span>{{ item.name }}</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</li>
|
|
|
|
+ <transition name="likeAddAnimate">
|
|
|
|
+ <div class="good" v-show="isShowGood">
|
|
|
|
+ <div class="pic">
|
|
|
|
+ <img :src="require(`@/assets/images/proj2022/mobile/like_${theme}.png`)" alt="" />
|
|
|
|
+ </div>
|
|
|
|
+ <div class="num">+{{ goodNum + 1 }}</div>
|
|
|
|
+ </div>
|
|
|
|
+ </transition>
|
|
</ul>
|
|
</ul>
|
|
|
|
+
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
@@ -197,10 +206,9 @@ export default {
|
|
}
|
|
}
|
|
});
|
|
});
|
|
});
|
|
});
|
|
- this.$bus.$on("isShowHuDong", (data) => {
|
|
|
|
- this.isShowHuDong=data
|
|
|
|
- })
|
|
|
|
-
|
|
|
|
|
|
+ this.$bus.$on("isShowHuDong", (data) => {
|
|
|
|
+ this.isShowHuDong = data;
|
|
|
|
+ });
|
|
});
|
|
});
|
|
},
|
|
},
|
|
};
|
|
};
|
|
@@ -325,6 +333,7 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+
|
|
.likeAddAnimate-enter-active,
|
|
.likeAddAnimate-enter-active,
|
|
.likeAddAnimate-leave-active {
|
|
.likeAddAnimate-leave-active {
|
|
transition: all 2.5s ease;
|
|
transition: all 2.5s ease;
|
|
@@ -336,13 +345,13 @@ export default {
|
|
}
|
|
}
|
|
.likeAddAnimate-enter-to,
|
|
.likeAddAnimate-enter-to,
|
|
.likeAddAnimate-leave-to {
|
|
.likeAddAnimate-leave-to {
|
|
- transform: translate(-50%, -80px) scale(1.2);
|
|
|
|
|
|
+ transform: translate(-50%, -60px) scale(1.1);
|
|
opacity: 1;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.good {
|
|
.good {
|
|
- position: fixed;
|
|
|
|
- bottom: 60px;
|
|
|
|
- left: 50%;
|
|
|
|
|
|
+ position: absolute;
|
|
|
|
+ bottom: 0px;
|
|
|
|
+ right: 10%;
|
|
display: flex;
|
|
display: flex;
|
|
.pic {
|
|
.pic {
|
|
width: 35px;
|
|
width: 35px;
|
|
@@ -353,7 +362,6 @@ export default {
|
|
}
|
|
}
|
|
.num {
|
|
.num {
|
|
margin-top: 10px;
|
|
margin-top: 10px;
|
|
- margin-left: 10px;
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@@ -423,7 +431,7 @@ export default {
|
|
position: absolute;
|
|
position: absolute;
|
|
top: 0;
|
|
top: 0;
|
|
left: 10px;
|
|
left: 10px;
|
|
- width: 60px!important;
|
|
|
|
|
|
+ width: 60px !important;
|
|
}
|
|
}
|
|
.brightness {
|
|
.brightness {
|
|
&::before {
|
|
&::before {
|
|
@@ -431,17 +439,17 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
> ul {
|
|
> ul {
|
|
- width: 76%!important;
|
|
|
|
|
|
+ width: 76% !important;
|
|
height: 50%;
|
|
height: 50%;
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
justify-content: flex-end;
|
|
- align-items: flex-end!important;
|
|
|
|
|
|
+ align-items: flex-end !important;
|
|
text-align: center;
|
|
text-align: center;
|
|
z-index: 9999;
|
|
z-index: 9999;
|
|
position: absolute;
|
|
position: absolute;
|
|
- bottom: 0!important;
|
|
|
|
|
|
+ bottom: 0 !important;
|
|
left: 50%;
|
|
left: 50%;
|
|
- transform: translateX(-50%)!important;
|
|
|
|
|
|
+ transform: translateX(-50%) !important;
|
|
> li {
|
|
> li {
|
|
display: inline-block;
|
|
display: inline-block;
|
|
padding: 0 0;
|
|
padding: 0 0;
|
|
@@ -486,4 +494,5 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
</style>
|
|
</style>
|