mirror of
https://gitee.com/ccnetcore/Yi
synced 2026-04-08 02:06:41 +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>
|
