|
|
|
|
@ -2,43 +2,23 @@
|
|
|
|
|
<div class="fishing-page">
|
|
|
|
|
<div class="fishing-container">
|
|
|
|
|
<div class="fishing-area">
|
|
|
|
|
<div
|
|
|
|
|
class="fishing-animation"
|
|
|
|
|
:class="{
|
|
|
|
|
<div class="fishing-animation" :class="{
|
|
|
|
|
'fishing-active': isFishing,
|
|
|
|
|
reeling: isReeling,
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
}">
|
|
|
|
|
<div class="fishing-scene" @click="handleFish"></div>
|
|
|
|
|
<div class="ripple"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="result" v-if="resultMessage || nextPullTime">
|
|
|
|
|
<el-alert
|
|
|
|
|
v-if="resultMessage"
|
|
|
|
|
:title="resultMessage"
|
|
|
|
|
:type="currentCatch.length > 0 ? 'success' : 'info'"
|
|
|
|
|
:closable="false"
|
|
|
|
|
show-icon
|
|
|
|
|
/>
|
|
|
|
|
<el-alert
|
|
|
|
|
v-if="nextPullTime"
|
|
|
|
|
:title="`下次可钓鱼时间:${nextPullTime}`"
|
|
|
|
|
type="warning"
|
|
|
|
|
:closable="false"
|
|
|
|
|
show-icon
|
|
|
|
|
/>
|
|
|
|
|
<el-alert v-if="resultMessage" :title="resultMessage" :type="currentCatch.length > 0 ? 'success' : 'info'"
|
|
|
|
|
:closable="false" show-icon />
|
|
|
|
|
<el-alert v-if="nextPullTime" :title="`下次可钓鱼时间:${nextPullTime}`" type="warning" :closable="false" show-icon />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="log-area">
|
|
|
|
|
<FishingLog :logs="fishingLogs" />
|
|
|
|
|
<div class="back-button">
|
|
|
|
|
<el-button
|
|
|
|
|
@click="goHome"
|
|
|
|
|
size="small"
|
|
|
|
|
type="default"
|
|
|
|
|
icon="ArrowLeft"
|
|
|
|
|
>返回</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button @click="goHome" size="small" type="">返回首页</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -181,8 +161,7 @@ const handleFish = async () => {
|
|
|
|
|
// 构建展示信息
|
|
|
|
|
const messageList = items.map(
|
|
|
|
|
(fish) =>
|
|
|
|
|
`「${fish.isRare ? "稀有的" : ""}${fish.fishName}」,重量 ${
|
|
|
|
|
fish.weight
|
|
|
|
|
`「${fish.isRare ? "稀有的" : ""}${fish.fishName}」,重量 ${fish.weight
|
|
|
|
|
}`
|
|
|
|
|
);
|
|
|
|
|
resultMessage.value = `你钓到了:\n${messageList.join("\n")}`;
|
|
|
|
|
@ -261,24 +240,6 @@ const goHome = () => {
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.back-button .el-button {
|
|
|
|
|
padding: 12px 24px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
border-radius: 24px;
|
|
|
|
|
transition: all 0.3s ease;
|
|
|
|
|
background: #409eff;
|
|
|
|
|
border: 1px solid #409eff;
|
|
|
|
|
color: white;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.back-button .el-button:hover {
|
|
|
|
|
transform: translateY(-2px);
|
|
|
|
|
box-shadow: 0 4px 16px rgba(64, 158, 255, 0.3);
|
|
|
|
|
background: #66b1ff;
|
|
|
|
|
border-color: #66b1ff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fishing-area {
|
|
|
|
|
text-align: center;
|
|
|
|
|
background: #fff;
|
|
|
|
|
|