|
|
|
@ -1,13 +1,757 @@ |
|
|
|
<template> |
|
|
|
<div> |
|
|
|
<el-button type="primary">众筹</el-button> |
|
|
|
<div class="interactive-container"> |
|
|
|
<!-- 顶部区域 --> |
|
|
|
<div class="top-section"> |
|
|
|
<!-- 主标题 --> |
|
|
|
<div class="main-title"> |
|
|
|
<img src="@/assets/img/zhongchou/大标题.png" alt=""> |
|
|
|
<div class="activity-period">活动时间：2025/07/26~2025/08/05</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 活动规则按钮 --> |
|
|
|
<div class="rules-btn" @click="showRules"> |
|
|
|
<img src="@/assets/img/zhongchou/活动需知.png" alt="活动规则" /> |
|
|
|
<span class="rules-text">活动规则</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 主要交互区域 --> |
|
|
|
<div class="main-interactive-area"> |
|
|
|
<!-- 左侧美股区域 --> |
|
|
|
<div class="stock-area left-area" @click="handleAreaClick('us')" |
|
|
|
:class="{ active: activeArea === 'us', 'side': activeArea === 'hk' }"> |
|
|
|
<div class="stock-content"> |
|
|
|
<div class="stock-card us-card"> |
|
|
|
<div class="card-content us-content"> |
|
|
|
<div class="progress-section"> |
|
|
|
<div class="progress-bar"> |
|
|
|
<div class="progress-fill"></div> |
|
|
|
</div> |
|
|
|
<div class="time-markers"> |
|
|
|
<div class="marker" v-for="time in [0, 3, 6, 9, 12, 15]" :key="time"> |
|
|
|
{{ time }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="stock-info"> |
|
|
|
<h3>距美股实时数据</h3> |
|
|
|
<h3>还剩15分钟</h3> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 美股助力按钮和底座 --> |
|
|
|
<div class="boost-section"> |
|
|
|
<div class="boost-btn us-boost-btn" :class="{ 'boosted': usBoostStatus }" |
|
|
|
@click.stop="handleBoostClick('us')"></div> |
|
|
|
<div class="base-image"> |
|
|
|
<img src="@/assets/img/zhongchou/底座.png" alt="底座" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 中央火箭区域 --> |
|
|
|
<div class="rocket-area" :class="{ hidden: activeArea !== null }"> |
|
|
|
<div class="rocket-container"> |
|
|
|
<div class="rocket-body"> |
|
|
|
<img src="@/assets/img/zhongchou/火箭.png" alt="火箭" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 右侧港股区域 --> |
|
|
|
<div class="stock-area right-area" @click="handleAreaClick('hk')" |
|
|
|
:class="{ active: activeArea === 'hk', 'side': activeArea === 'us' }"> |
|
|
|
<div class="stock-content"> |
|
|
|
<div class="stock-card hk-card"> |
|
|
|
<div class="card-content hk-content"> |
|
|
|
<div class="stock-info"> |
|
|
|
<h3>距港股实时数据</h3> |
|
|
|
<h3>还剩6分钟</h3> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="progress-section"> |
|
|
|
<div class="progress-bar"> |
|
|
|
<div class="progress-fill"></div> |
|
|
|
</div> |
|
|
|
<div class="time-markers"> |
|
|
|
<div class="marker" v-for="time in [0, 3, 6, 9, 12, 15]" :key="time"> |
|
|
|
{{ time }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 港股助力按钮和底座 --> |
|
|
|
<div class="boost-section"> |
|
|
|
<div class="boost-btn hk-boost-btn" :class="{ 'boosted': hkBoostStatus }" |
|
|
|
@click.stop="handleBoostClick('hk')"></div> |
|
|
|
<div class="base-image"> |
|
|
|
<img src="@/assets/img/zhongchou/底座.png" alt="底座" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 活动规则弹窗 --> |
|
|
|
<div v-if="showRulesModal" class="modal-overlay" @click="hideRules"> |
|
|
|
<div class="modal-content" @click.stop> |
|
|
|
<div class="modal-background"> |
|
|
|
<div class="modal-text"> |
|
|
|
<div class="rules-list"> |
|
|
|
<p>1. 活动时间为2025年7月26日-2025年8月5日。</p> |
|
|
|
<p>2. 每人每天有3个活动助力参与机会。</p> |
|
|
|
<p>3. 助力时间为15分钟，每一个人参与助力，即可时间</p> |
|
|
|
<p> 分钟！</p> |
|
|
|
<p>4. 助力成功后，平台服务市场将获取实时数据！</p> |
|
|
|
<p>5. 平台对数据众筹上线后，您的方案数据将优化成对应</p> |
|
|
|
<p> 大数据的实时数据优化参考。</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="close-btn" @click="hideRules"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup> |
|
|
|
import { ref } from 'vue' |
|
|
|
|
|
|
|
const activeArea = ref(null) |
|
|
|
const usBoostStatus = ref(false) // 美股助力状态 |
|
|
|
const hkBoostStatus = ref(false) // 港股助力状态 |
|
|
|
const showRulesModal = ref(false) // 活动规则弹窗显示状态 |
|
|
|
|
|
|
|
const handleAreaClick = (area) => { |
|
|
|
if (activeArea.value === area) { |
|
|
|
activeArea.value = null |
|
|
|
} else { |
|
|
|
activeArea.value = area |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const handleBoostClick = (area) => { |
|
|
|
if (area === 'us' && !usBoostStatus.value) { |
|
|
|
usBoostStatus.value = true |
|
|
|
console.log('美股已助力'); |
|
|
|
} else if (area === 'hk' && !hkBoostStatus.value) { |
|
|
|
hkBoostStatus.value = true |
|
|
|
console.log('港股已助力'); |
|
|
|
} |
|
|
|
// 这里可以添加助力相关的业务逻辑 |
|
|
|
} |
|
|
|
|
|
|
|
const showRules = () => { |
|
|
|
showRulesModal.value = true |
|
|
|
} |
|
|
|
|
|
|
|
const hideRules = () => { |
|
|
|
showRulesModal.value = false |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
/* 禁用页面滚动 */ |
|
|
|
:global(html, body) { |
|
|
|
overflow: hidden; |
|
|
|
margin: 0; |
|
|
|
padding: 0; |
|
|
|
height: 100%; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
:global(#app) { |
|
|
|
overflow: hidden; |
|
|
|
height: 100vh; |
|
|
|
width: 100vw; |
|
|
|
} |
|
|
|
|
|
|
|
.interactive-container { |
|
|
|
width: 100vw; |
|
|
|
height: 100vh; |
|
|
|
background: url('@/assets/img/zhongchou/bg.png') no-repeat center center; |
|
|
|
background-size: 100% 100%; |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
overflow: hidden; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
|
|
|
|
/* 顶部区域样式 */ |
|
|
|
.top-section { |
|
|
|
display: flex; |
|
|
|
width: 100%; |
|
|
|
margin-top: -7%; |
|
|
|
margin-bottom: 10%; |
|
|
|
} |
|
|
|
|
|
|
|
/* 主标题样式 */ |
|
|
|
.main-title { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
flex: 1; |
|
|
|
gap: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
/* 主标题图片响应式样式 */ |
|
|
|
.main-title img { |
|
|
|
max-width: 100%; |
|
|
|
height: auto; |
|
|
|
width: auto; |
|
|
|
max-height: 80px; |
|
|
|
object-fit: contain; |
|
|
|
} |
|
|
|
|
|
|
|
/* 活动规则按钮样式 */ |
|
|
|
.rules-btn { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
margin-right: 3%; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
|
|
|
|
.rules-btn img { |
|
|
|
width: auto; |
|
|
|
height: 40px; |
|
|
|
margin-bottom: 5px; |
|
|
|
} |
|
|
|
|
|
|
|
.rules-text { |
|
|
|
color: #fff; |
|
|
|
font-size: 12px; |
|
|
|
font-weight: 500; |
|
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
|
|
|
|
.rules-btn:hover { |
|
|
|
transform: scale(1.1); |
|
|
|
} |
|
|
|
|
|
|
|
.main-title h1 { |
|
|
|
font-size: 3rem; |
|
|
|
color: #fff; |
|
|
|
margin: 0; |
|
|
|
text-shadow: 0 0 20px rgba(0, 150, 255, 0.8); |
|
|
|
background: linear-gradient(45deg, #00aaff, #0066cc); |
|
|
|
-webkit-background-clip: text; |
|
|
|
-webkit-text-fill-color: transparent; |
|
|
|
background-clip: text; |
|
|
|
} |
|
|
|
|
|
|
|
.activity-period { |
|
|
|
background-image: url("@/assets/img/zhongchou/时间边框.png"); |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-size: contain; |
|
|
|
background-position: center; |
|
|
|
font-size: 1.2rem; |
|
|
|
color: rgba(255, 255, 255, 0.9); |
|
|
|
display: inline-block; |
|
|
|
padding: 10px 20px; |
|
|
|
min-width: fit-content; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 主要交互区域 */ |
|
|
|
.main-interactive-area { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
width: 100%; |
|
|
|
height: 400px; |
|
|
|
position: relative; |
|
|
|
perspective: 1200px; |
|
|
|
transform-style: preserve-3d; |
|
|
|
} |
|
|
|
|
|
|
|
/* 股票区域基础样式 */ |
|
|
|
.stock-area { |
|
|
|
position: absolute; |
|
|
|
width: 25vw; |
|
|
|
height: 28vw; |
|
|
|
min-width: 300px; |
|
|
|
min-height: 350px; |
|
|
|
max-width: 500px; |
|
|
|
max-height: 600px; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
transition: transform 1s ease; |
|
|
|
transform-style: preserve-3d; |
|
|
|
transform-origin: center center; |
|
|
|
} |
|
|
|
|
|
|
|
/* 美股卡片默认位置 - 火箭左侧，向内倾斜 */ |
|
|
|
.left-area { |
|
|
|
transform: translateX(-25vw) rotateY(25deg) scale(1.5); |
|
|
|
} |
|
|
|
|
|
|
|
/* 港股卡片默认位置 - 火箭右侧，向内倾斜 */ |
|
|
|
.right-area { |
|
|
|
transform: translateX(25vw) rotateY(-25deg) scale(1.5); |
|
|
|
} |
|
|
|
|
|
|
|
/* 美股hover效果 - 在原有倾斜基础上轻微上移 */ |
|
|
|
.left-area:hover:not(.active):not(.side) { |
|
|
|
transform: translateX(-25vw) rotateY(35deg) translateY(-10px) scale(1.55); |
|
|
|
transition: transform 0.3s ease; |
|
|
|
} |
|
|
|
|
|
|
|
/* 港股hover效果 - 在原有倾斜基础上轻微上移 */ |
|
|
|
.right-area:hover:not(.active):not(.side) { |
|
|
|
transform: translateX(25vw) rotateY(-35deg) translateY(-10px) scale(1.55); |
|
|
|
transition: transform 0.3s ease; |
|
|
|
} |
|
|
|
|
|
|
|
/* 美股激活时 - 移动到页面中心并取消倾斜 */ |
|
|
|
.left-area.active { |
|
|
|
transform: translateX(0) rotateY(0deg) scale(1.6); |
|
|
|
z-index: 20; |
|
|
|
} |
|
|
|
|
|
|
|
/* 港股激活时 - 移动到页面中心并取消倾斜 */ |
|
|
|
.right-area.active { |
|
|
|
transform: translateX(0) rotateY(0deg) scale(1.6); |
|
|
|
z-index: 20; |
|
|
|
} |
|
|
|
|
|
|
|
/* 美股在港股激活时 - 移动到后面并保持倾斜 */ |
|
|
|
.left-area.side { |
|
|
|
transform: translateX(-35vw) rotateY(25deg) scale(0.9) !important; |
|
|
|
z-index: 1 !important; |
|
|
|
opacity: 0.4; |
|
|
|
} |
|
|
|
|
|
|
|
/* 港股在美股激活时 - 移动到后面并保持倾斜 */ |
|
|
|
.right-area.side { |
|
|
|
transform: translateX(35vw) rotateY(-25deg) scale(0.9) !important; |
|
|
|
z-index: 1 !important; |
|
|
|
opacity: 0.4; |
|
|
|
} |
|
|
|
|
|
|
|
/* 火箭区域 - 始终在圆筒中心 */ |
|
|
|
.rocket-area { |
|
|
|
position: absolute; |
|
|
|
z-index: 10; |
|
|
|
transform: translateZ(0); |
|
|
|
transition: opacity 0.5s ease; |
|
|
|
} |
|
|
|
|
|
|
|
.rocket-area.hidden { |
|
|
|
opacity: 0.3; |
|
|
|
} |
|
|
|
|
|
|
|
/* 股票卡片样式 */ |
|
|
|
.stock-card { |
|
|
|
width: 100%; |
|
|
|
height: auto; |
|
|
|
background-size: 100% 100%; |
|
|
|
background-position: center; |
|
|
|
background-repeat: no-repeat; |
|
|
|
} |
|
|
|
|
|
|
|
/* 美股卡片背景 */ |
|
|
|
.us-card { |
|
|
|
background-image: url('@/assets/img/zhongchou/美股.png'); |
|
|
|
} |
|
|
|
|
|
|
|
/* 港股卡片背景 */ |
|
|
|
.hk-card { |
|
|
|
background-image: url('@/assets/img/zhongchou/港股.png') !important; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.card-content { |
|
|
|
width: 100%; |
|
|
|
height: auto; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: flex-start; |
|
|
|
gap: 20px; |
|
|
|
padding: 20px 20px 20px 20px; |
|
|
|
box-sizing: border-box; |
|
|
|
/* 确保padding不会增加总宽度 */ |
|
|
|
overflow: hidden; |
|
|
|
/* 防止内容溢出 */ |
|
|
|
} |
|
|
|
|
|
|
|
/* 美股内容布局 - 进度条在左边 */ |
|
|
|
.us-content { |
|
|
|
flex-direction: row; |
|
|
|
} |
|
|
|
|
|
|
|
/* 港股内容布局 - 进度条在右边 */ |
|
|
|
.hk-content { |
|
|
|
flex-direction: row; |
|
|
|
} |
|
|
|
|
|
|
|
/* 股票信息 */ |
|
|
|
.stock-info { |
|
|
|
text-align: center; |
|
|
|
color: #fff; |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: flex-start; |
|
|
|
align-items: center; |
|
|
|
min-width: 0; |
|
|
|
/* 允许flex项目收缩到内容以下 */ |
|
|
|
max-width: 150px; |
|
|
|
/* 限制最大宽度 */ |
|
|
|
} |
|
|
|
|
|
|
|
/* 股票信息标题样式 */ |
|
|
|
.stock-info h3 { |
|
|
|
margin: 5px 0; |
|
|
|
font-size: 1rem; |
|
|
|
line-height: 1.2; |
|
|
|
word-wrap: break-word; |
|
|
|
/* 允许长单词换行 */ |
|
|
|
overflow-wrap: break-word; |
|
|
|
/* 现代浏览器支持 */ |
|
|
|
hyphens: auto; |
|
|
|
/* 自动断字 */ |
|
|
|
} |
|
|
|
|
|
|
|
/* 进度条区域 */ |
|
|
|
.progress-section { |
|
|
|
display: flex; |
|
|
|
align-items: flex-start; |
|
|
|
gap: 15px; |
|
|
|
} |
|
|
|
|
|
|
|
.progress-bar { |
|
|
|
width: 20px; |
|
|
|
height: 200px; |
|
|
|
background: rgba(255, 255, 255, 0.2); |
|
|
|
border-radius: 10px; |
|
|
|
position: relative; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
/* 股票内容容器 */ |
|
|
|
.stock-content { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
width: 100%; |
|
|
|
height: auto |
|
|
|
} |
|
|
|
|
|
|
|
/* 助力按钮区域样式 */ |
|
|
|
.boost-section { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
position: relative; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
/* 助力按钮样式 */ |
|
|
|
.boost-btn { |
|
|
|
border: none; |
|
|
|
cursor: pointer; |
|
|
|
transition: transform 0.3s ease; |
|
|
|
z-index: 2; |
|
|
|
background-size: contain; |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-position: center; |
|
|
|
width: 200px; |
|
|
|
height: 60px; |
|
|
|
} |
|
|
|
|
|
|
|
/* 美股助力按钮 */ |
|
|
|
.us-boost-btn { |
|
|
|
background-image: url('@/assets/img/zhongchou/助力美股.png'); |
|
|
|
} |
|
|
|
|
|
|
|
/* 美股已助力状态 */ |
|
|
|
.us-boost-btn.boosted { |
|
|
|
background-image: url('@/assets/img/zhongchou/美股已助力.png'); |
|
|
|
} |
|
|
|
|
|
|
|
/* 港股助力按钮 */ |
|
|
|
.hk-boost-btn { |
|
|
|
background-image: url('@/assets/img/zhongchou/助力港股.png'); |
|
|
|
} |
|
|
|
|
|
|
|
/* 港股已助力状态 */ |
|
|
|
.hk-boost-btn.boosted { |
|
|
|
background-image: url('@/assets/img/zhongchou/港股已助力.png'); |
|
|
|
} |
|
|
|
|
|
|
|
/* 底座样式 */ |
|
|
|
.base-image { |
|
|
|
margin-top: -10px; |
|
|
|
z-index: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.base-image img { |
|
|
|
width: auto; |
|
|
|
height: 40px; |
|
|
|
display: block; |
|
|
|
} |
|
|
|
|
|
|
|
.progress-fill { |
|
|
|
position: absolute; |
|
|
|
bottom: 0; |
|
|
|
width: 100%; |
|
|
|
background: linear-gradient(to top, #00ff00, #ffaa00, #ff4444); |
|
|
|
border-radius: 10px; |
|
|
|
transition: height 0.8s ease; |
|
|
|
} |
|
|
|
|
|
|
|
.us-card .progress-fill { |
|
|
|
height: 20%; |
|
|
|
} |
|
|
|
|
|
|
|
.hk-card .progress-fill { |
|
|
|
height: 60%; |
|
|
|
} |
|
|
|
|
|
|
|
.time-markers { |
|
|
|
display: flex; |
|
|
|
flex-direction: column-reverse; |
|
|
|
height: 200px; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.marker { |
|
|
|
color: #fff; |
|
|
|
font-size: 0.9rem; |
|
|
|
text-shadow: 0 0 5px rgba(255, 255, 255, 0.8); |
|
|
|
} |
|
|
|
|
|
|
|
.us-btn { |
|
|
|
background: linear-gradient(45deg, #0066cc, #0099ff); |
|
|
|
color: white; |
|
|
|
box-shadow: 0 5px 15px rgba(0, 100, 255, 0.4); |
|
|
|
} |
|
|
|
|
|
|
|
.hk-btn { |
|
|
|
background: linear-gradient(45deg, #cc3333, #ff6666); |
|
|
|
color: white; |
|
|
|
box-shadow: 0 5px 15px rgba(255, 50, 50, 0.4); |
|
|
|
} |
|
|
|
|
|
|
|
.boost-btn:hover { |
|
|
|
background-size: 110%; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.rocket-container { |
|
|
|
position: relative; |
|
|
|
width: 100%; |
|
|
|
height: auto; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
|
|
|
|
/* .rocket-glow { |
|
|
|
position: absolute; |
|
|
|
width: 300px; |
|
|
|
height: 300px; |
|
|
|
border-radius: 50%; |
|
|
|
background: radial-gradient(circle, |
|
|
|
rgba(0, 150, 255, 0.3) 0%, |
|
|
|
rgba(0, 100, 255, 0.2) 30%, |
|
|
|
transparent 70%); |
|
|
|
animation: pulse 2s ease-in-out infinite; |
|
|
|
} */ |
|
|
|
|
|
|
|
.rocket-body { |
|
|
|
position: relative; |
|
|
|
z-index: 2; |
|
|
|
animation: float 3s ease-in-out infinite; |
|
|
|
} |
|
|
|
|
|
|
|
.rocket-body img { |
|
|
|
width: 12vw; |
|
|
|
height: auto; |
|
|
|
min-width: 80px; |
|
|
|
max-width: 200px; |
|
|
|
} |
|
|
|
|
|
|
|
/* 动画效果 */ |
|
|
|
@keyframes pulse { |
|
|
|
|
|
|
|
0%, |
|
|
|
100% { |
|
|
|
transform: scale(1); |
|
|
|
opacity: 0.7; |
|
|
|
} |
|
|
|
|
|
|
|
50% { |
|
|
|
transform: scale(1.1); |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes float { |
|
|
|
|
|
|
|
0%, |
|
|
|
100% { |
|
|
|
transform: translateY(0px); |
|
|
|
} |
|
|
|
|
|
|
|
50% { |
|
|
|
transform: translateY(-10px); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/* 响应式设计 - 针对不同屏幕尺寸优化 */ |
|
|
|
/* @media (max-width: 1200px) { |
|
|
|
.main-title img { |
|
|
|
max-height: 70px; |
|
|
|
} |
|
|
|
} */ |
|
|
|
|
|
|
|
@media (max-width: 768px) { |
|
|
|
.main-title img { |
|
|
|
max-height: 60px; |
|
|
|
} |
|
|
|
|
|
|
|
.main-interactive-area { |
|
|
|
flex-direction: column; |
|
|
|
gap: 30px; |
|
|
|
} |
|
|
|
|
|
|
|
.stock-area { |
|
|
|
width: 35vw; |
|
|
|
height: 40vw; |
|
|
|
min-width: 280px; |
|
|
|
min-height: 320px; |
|
|
|
margin: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.left-area { |
|
|
|
transform: translateX(-40vw) rotateY(25deg) scale(1.3); |
|
|
|
} |
|
|
|
|
|
|
|
.right-area { |
|
|
|
transform: translateX(40vw) rotateY(-25deg) scale(1.3); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/* @media (max-width: 480px) { |
|
|
|
.main-title img { |
|
|
|
max-height: 50px; |
|
|
|
} |
|
|
|
} */ |
|
|
|
|
|
|
|
/* 弹窗样式 */ |
|
|
|
.modal-overlay { |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
width: 100vw; |
|
|
|
height: 100vh; |
|
|
|
background: rgba(0, 0, 0, 0.7); |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
z-index: 1000; |
|
|
|
} |
|
|
|
|
|
|
|
.modal-content { |
|
|
|
position: relative; |
|
|
|
width: 500px; |
|
|
|
height: 400px; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.modal-background { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
background-image: url('@/assets/img/zhongchou/框.png'); |
|
|
|
background-size: 100% 100%; |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-position: center; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
padding: 40px 30px 30px 30px; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.modal-text { |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
color: #fff; |
|
|
|
text-align: left; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.rules-list { |
|
|
|
width: 100%; |
|
|
|
line-height: 1.6; |
|
|
|
margin-top: 10%; |
|
|
|
margin-left: 10%; |
|
|
|
} |
|
|
|
|
|
|
|
.rules-list p { |
|
|
|
margin: 8px 0; |
|
|
|
font-size: 0.9rem; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
.close-btn { |
|
|
|
background-image: url('@/assets/img/zhongchou/知道了.png'); |
|
|
|
background-size: 100%; |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-position: center; |
|
|
|
width: 120px; |
|
|
|
height: 40px; |
|
|
|
cursor: pointer; |
|
|
|
transition: transform 0.2s ease; |
|
|
|
} |
|
|
|
|
|
|
|
.close-btn:hover { |
|
|
|
transform: scale(1.05); |
|
|
|
} |
|
|
|
|
|
|
|
/* |
|
|
|
@media (max-width: 768px) { |
|
|
|
.main-interactive-area { |
|
|
|
flex-direction: column; |
|
|
|
gap: 30px; |
|
|
|
} |
|
|
|
|
|
|
|
.stock-area { |
|
|
|
width: 300px; |
|
|
|
height: 400px; |
|
|
|
margin: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.rocket-area { |
|
|
|
order: -1; |
|
|
|
} |
|
|
|
|
|
|
|
.main-title { |
|
|
|
top: 30px; |
|
|
|
} |
|
|
|
|
|
|
|
.main-title h1 { |
|
|
|
font-size: 2rem; |
|
|
|
} |
|
|
|
} */ |
|
|
|
</style> |
宋杰
1 month ago
