mirror of
https://gitee.com/ccnetcore/Yi
synced 2026-04-30 05:03:24 +08:00
69 lines
1.3 KiB
Vue
69 lines
1.3 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
import { showProductPackage } from '@/utils/product-package';
|
|||
|
|
|
|||
|
|
// 点击购买按钮
|
|||
|
|
function onProductPackage() {
|
|||
|
|
showProductPackage();
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<div class="buy-btn-container">
|
|||
|
|
<el-button
|
|||
|
|
class="buy-btn flex items-center gap-2 px-5 py-2 font-semibold shadow-lg"
|
|||
|
|
data-tour="buy-btn"
|
|||
|
|
@click="onProductPackage"
|
|||
|
|
>
|
|||
|
|
<span>立即购买</span>
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.buy-btn-container {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin: 0 22px 0 0;
|
|||
|
|
|
|||
|
|
.buy-btn {
|
|||
|
|
background: linear-gradient(90deg, #FFD700, #FFC107);
|
|||
|
|
color: #fff;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 9999px;
|
|||
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
transform: translateY(-2px);
|
|||
|
|
box-shadow: 0 8px 20px rgba(255, 215, 0, 0.5);
|
|||
|
|
background: linear-gradient(90deg, #FFC107, #FFD700);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-rocket {
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.animate-bounce {
|
|||
|
|
animation: bounce 1.2s infinite;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 移动端，屏幕小于756px
|
|||
|
|
@media screen and (max-width: 756px) {
|
|||
|
|
.buy-btn-container {
|
|||
|
|
margin: 0 ;
|
|||
|
|
|
|||
|
|
.buy-btn {
|
|||
|
|
font-size: 12px;
|
|||
|
|
max-width: 60px;
|
|||
|
|
padding: 8px 12px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes bounce {
|
|||
|
|
0%, 100% { transform: translateY(0); }
|
|||
|
|
50% { transform: translateY(-4px); }
|
|||
|
|
}
|
|||
|
|
</style>
|
