Gods
/
go_fish_web
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

style: 调整返回首页按钮样式

Browse Source
main
LyMysterious 1 year ago
parent ff74dd1e9b
commit de5bcc3ce6
2 changed files with 251 additions and 297 deletions
Show Stats Download Patch File Download Diff File

9
src/pages/equipments/Equipments.vue
Unescape Escape View File

@ -57,14 +57,7 @@
</div> </div>
<div class="back-button"> <div class="back-button">
<el-button <el-button @click="$router.push({ name: 'Home' })" size="small" type="">返回首页</el-button>
@click="$router.push({ name: 'Home' })"
size="small"
type="default"
icon="ArrowLeft"
>
返回首页
</el-button>
</div> </div>
</div> </div>
</div> </div>

539
src/pages/fishing/Fishing.vue
Unescape Escape View File

@ -1,48 +1,28 @@
<template> <template>
<div class="fishing-page"> <div class="fishing-page">
<div class="fishing-container"> <div class="fishing-container">
<div class="fishing-area"> <div class="fishing-area">
<div <div class="fishing-animation" :class="{
class="fishing-animation"
:class="{
'fishing-active': isFishing, 'fishing-active': isFishing,
reeling: isReeling, reeling: isReeling,
}" }">
> <div class="fishing-scene" @click="handleFish"></div>
<div class="fishing-scene" @click="handleFish"></div> <div class="ripple"></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 />
</div>
</div>
<div class="log-area">
<FishingLog :logs="fishingLogs" />
<div class="back-button">
<el-button @click="goHome" size="small" type="">返回首页</el-button>
</div>
</div>
</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
/>
</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
>
</div>
</div>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
@ -64,352 +44,333 @@ const fishEscapeTimer = ref(null);
// 从localStorage加载缓存的钓鱼日志 // 从localStorage加载缓存的钓鱼日志
const loadCachedLogs = () => { const loadCachedLogs = () => {
const cachedLogs = localStorage.getItem("fishingLogs"); const cachedLogs = localStorage.getItem("fishingLogs");
if (cachedLogs) { if (cachedLogs) {
fishingLogs.value = JSON.parse(cachedLogs); fishingLogs.value = JSON.parse(cachedLogs);
} }
}; };
// 保存钓鱼日志到localStorage // 保存钓鱼日志到localStorage
const saveLogs = () => { const saveLogs = () => {
localStorage.setItem("fishingLogs", JSON.stringify(fishingLogs.value)); localStorage.setItem("fishingLogs", JSON.stringify(fishingLogs.value));
}; };
// 生成随机等待时间（1-3秒） // 生成随机等待时间（1-3秒）
const generateWaitTime = () => { const generateWaitTime = () => {
return Math.floor(Math.random() * 2000) + 1000; return Math.floor(Math.random() * 2000) + 1000;
}; };
// 生成随机逃跑概率（10%） // 生成随机逃跑概率（10%）
const willFishEscape = () => { const willFishEscape = () => {
return Math.random() < 0.1; return Math.random() < 0.1;
}; };
// 生成随机提竿失败概率（20%） // 生成随机提竿失败概率（20%）
const willReelFail = () => { const willReelFail = () => {
return Math.random() < 0.2; return Math.random() < 0.2;
}; };
// 组件挂载时加载缓存的日志 // 组件挂载时加载缓存的日志
onMounted(() => { onMounted(() => {
loadCachedLogs(); loadCachedLogs();
}); });
// 组件卸载时清除定时器 // 组件卸载时清除定时器
onBeforeUnmount(() => { onBeforeUnmount(() => {
if (fishEscapeTimer.value) { if (fishEscapeTimer.value) {
clearTimeout(fishEscapeTimer.value); clearTimeout(fishEscapeTimer.value);
} }
}); });
const handleFish = async () => { const handleFish = async () => {
// 下杆前校验：如果设置了下次钓鱼时间，则判断当前时间是否在等待中 // 下杆前校验：如果设置了下次钓鱼时间，则判断当前时间是否在等待中
if (nextPullTime.value) { if (nextPullTime.value) {
// 尝试将 nextPullTime 转换为 Date 对象 // 尝试将 nextPullTime 转换为 Date 对象
const nextTime = new Date(nextPullTime.value); const nextTime = new Date(nextPullTime.value);
if (Date.now() < nextTime.getTime()) { if (Date.now() < nextTime.getTime()) {
ElMessage.warning( ElMessage.warning(
`还未到下杆时间，请在 ${nextTime.toLocaleTimeString()} 后尝试` `还未到下杆时间，请在 ${nextTime.toLocaleTimeString()} 后尝试`
); );
return; return;
}
} }
} // 如果正在钓鱼且还处于等待上钩阶段，不允许操作
// 如果正在钓鱼且还处于等待上钩阶段，不允许操作 if (isFishing.value && !isWaiting.value) return;
if (isFishing.value && !isWaiting.value) return;
// 第一阶段：开始钓鱼
// 第一阶段：开始钓鱼 if (!isWaiting.value) {
if (!isWaiting.value) { isFishing.value = true;
isFishing.value = true; resultMessage.value = "放下鱼竿，等待不知好歹的🐟";
resultMessage.value = "放下鱼竿，等待不知好歹的🐟";
// 随机等待时间后判断是否有鱼上钩
// 随机等待时间后判断是否有鱼上钩 setTimeout(() => {
setTimeout(() => { if (willFishEscape()) {
if (willFishEscape()) { resultMessage.value = "鱼儿警觉地游走了... 🐟";
resultMessage.value = "鱼儿警觉地游走了... 🐟"; isFishing.value = false;
isFishing.value = false; return;
}
isWaiting.value = true;
resultMessage.value = "鱼儿上钩啦！速速收杆！速速速速速速";
isReeling.value = true;
// 设置逃跑计时器
fishEscapeTimer.value = setTimeout(() => {
if (isWaiting.value && isFishing.value) {
isWaiting.value = false;
isFishing.value = false;
resultMessage.value = "鱼儿挣脱逃走了！";
}
}, 5000); // 5秒内必须完成提竿
}, generateWaitTime());
return; return;
} }
isWaiting.value = true; // 清除逃跑计时器
resultMessage.value = "鱼儿上钩啦！速速收杆！速速速速速速"; if (fishEscapeTimer.value) {
clearTimeout(fishEscapeTimer.value);
fishEscapeTimer.value = null;
}
isReeling.value = true; // 第二阶段：达到目标点击次数，判断是否提竿成功
isWaiting.value = false;
isReeling.value = false;
// 设置逃跑计时器 if (willReelFail()) {
fishEscapeTimer.value = setTimeout(() => { isFishing.value = false;
if (isWaiting.value && isFishing.value) { resultMessage.value = "提竿时机不对，鱼儿溜走了！";
isWaiting.value = false; return;
isFishing.value = false; }
resultMessage.value = "鱼儿挣脱逃走了！";
} // 调用钓鱼接口
}, 5000); // 5秒内必须完成提竿 currentCatch.value = [];
}, generateWaitTime()); resultMessage.value = "正在钓鱼中...";
return;
} try {
const res = await fishingClick();
// 清除逃跑计时器 if (res.success && res.data) {
if (fishEscapeTimer.value) { const items = res.data.items || [];
clearTimeout(fishEscapeTimer.value); if (res.data.nextPullTime) {
fishEscapeTimer.value = null; nextPullTime.value = new Date(res.data.nextPullTime).toLocaleString();
} }
// 第二阶段：达到目标点击次数，判断是否提竿成功 if (items.length > 0) {
isWaiting.value = false; currentCatch.value = items;
isReeling.value = false;
// 构建展示信息
if (willReelFail()) { const messageList = items.map(
isFishing.value = false; (fish) =>
resultMessage.value = "提竿时机不对，鱼儿溜走了！"; `「${fish.isRare ? "稀有的" : ""}${fish.fishName}」，重量 ${fish.weight
return; }`
} );
resultMessage.value = `你钓到了：\n${messageList.join("\n")}`;
// 调用钓鱼接口 // 根据钓到的鱼的数量显示不同的消息和动画效果
currentCatch.value = []; if (items.length > 1) {
resultMessage.value = "正在钓鱼中..."; ElMessage({
message: `太棒了！一次钓到${items.length}条鱼！🎣✨`,
try { type: "success",
const res = await fishingClick(); duration: 5000,
if (res.success && res.data) { showClose: true,
const items = res.data.items || []; customClass: "multi-catch-message",
if (res.data.nextPullTime) { });
nextPullTime.value = new Date(res.data.nextPullTime).toLocaleString(); // 添加额外的动画类
} document
.querySelector(".fishing-animation")
if (items.length > 0) { .classList.add("multi-catch");
currentCatch.value = items; setTimeout(() => {
document
// 构建展示信息 .querySelector(".fishing-animation")
const messageList = items.map( .classList.remove("multi-catch");
(fish) => }, 3000);
`「${fish.isRare ? "稀有的" : ""}${fish.fishName}」，重量 ${ } else {
fish.weight ElMessage.success("钓鱼成功！🎣");
}` }
);
resultMessage.value = `你钓到了：\n${messageList.join("\n")}`; // 添加所有钓到的鱼到日志
// 根据钓到的鱼的数量显示不同的消息和动画效果 const newLogs = items.map((fish) => ({
if (items.length > 1) { time: new Date(),
ElMessage({ fishName: fish.fishName,
message: `太棒了！一次钓到${items.length}条鱼！🎣✨`, weight: fish.weight,
type: "success", isRare: fish.isRare,
duration: 5000, }));
showClose: true, fishingLogs.value.unshift(...newLogs);
customClass: "multi-catch-message", saveLogs();
}); } else {
// 添加额外的动画类 resultMessage.value = "什么也没钓到，下次好运 🍀";
document ElMessage.warning("什么也没钓到，下次好运 🍀");
.querySelector(".fishing-animation") }
.classList.add("multi-catch");
setTimeout(() => {
document
.querySelector(".fishing-animation")
.classList.remove("multi-catch");
}, 3000);
} else { } else {
ElMessage.success("钓鱼成功！🎣"); resultMessage.value = res.message || "钓鱼失败";
if (res.data?.nextPullTime) {
nextPullTime.value = new Date(res.data.nextPullTime).toLocaleString();
}
ElMessage.error(res.message || "钓鱼失败 🎣");
} }
} catch (err) {
// 添加所有钓到的鱼到日志 resultMessage.value = "钓鱼出错，请稍后重试";
const newLogs = items.map((fish) => ({ ElMessage.error("钓鱼出错，请稍后重试 🌊");
time: new Date(), console.error(err);
fishName: fish.fishName, } finally {
weight: fish.weight, isFishing.value = false;
isRare: fish.isRare,
}));
fishingLogs.value.unshift(...newLogs);
saveLogs();
} else {
resultMessage.value = "什么也没钓到，下次好运 🍀";
ElMessage.warning("什么也没钓到，下次好运 🍀");
}
} else {
resultMessage.value = res.message || "钓鱼失败";
if (res.data?.nextPullTime) {
nextPullTime.value = new Date(res.data.nextPullTime).toLocaleString();
}
ElMessage.error(res.message || "钓鱼失败 🎣");
} }
} catch (err) {
resultMessage.value = "钓鱼出错，请稍后重试";
ElMessage.error("钓鱼出错，请稍后重试 🌊");
console.error(err);
} finally {
isFishing.value = false;
}
}; };
const goHome = () => { const goHome = () => {
router.push("/"); router.push("/");
}; };
</script> </script>
<style scoped> <style scoped>
.fishing-page { .fishing-page {
padding: 20px; padding: 20px;
} }
.fishing-container { .fishing-container {
display: grid; display: grid;
grid-template-columns: 1fr 400px; grid-template-columns: 1fr 400px;
gap: 20px; gap: 20px;
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
min-height: calc(100vh - 40px); min-height: calc(100vh - 40px);
} }
.back-button { .back-button {
margin-top: 20px; margin-top: 20px;
text-align: center; 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 { .fishing-area {
text-align: center; text-align: center;
background: #fff; background: #fff;
padding: 20px; padding: 20px;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
position: relative; position: relative;
} }
.fishing-animation { .fishing-animation {
height: 500px; height: 500px;
position: relative; position: relative;
margin: 20px 0; margin: 20px 0;
overflow: hidden; overflow: hidden;
border-radius: 8px; border-radius: 8px;
background: #fff; background: #fff;
cursor: pointer; cursor: pointer;
} }
.fishing-scene { .fishing-scene {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
background: url("@/assets/fishing-scene.svg") no-repeat center; background: url("@/assets/fishing-scene.svg") no-repeat center;
background-size: cover; background-size: cover;
transition: transform 0.2s ease; transition: transform 0.2s ease;
cursor: pointer; cursor: pointer;
} }
.fishing-active .fishing-scene { .fishing-active .fishing-scene {
animation: scene-active 3s ease-in-out infinite; animation: scene-active 3s ease-in-out infinite;
} }
.reeling .fishing-scene { .reeling .fishing-scene {
animation: reel 0.2s ease-in-out; animation: reel 0.2s ease-in-out;
} }
.ripple { .ripple {
position: absolute; position: absolute;
width: 30px; width: 30px;
height: 30px; height: 30px;
background: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.7);
border-radius: 50%; border-radius: 50%;
left: 60%; left: 60%;
top: 70%; top: 70%;
transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0);
opacity: 0; opacity: 0;
} }
.fishing-active .ripple { .fishing-active .ripple {
animation: ripple 2s infinite; animation: ripple 2s infinite;
} }
.result { .result {
margin-top: 20px; margin-top: 20px;
} }
@keyframes ripple { @keyframes ripple {
0% { 0% {
transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0);
opacity: 1; opacity: 1;
} }
100% { 100% {
transform: translate(-50%, -50%) scale(4); transform: translate(-50%, -50%) scale(4);
opacity: 0; opacity: 0;
} }
} }
@keyframes scene-active { @keyframes scene-active {
0%, 0%,
100% { 100% {
transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg);
filter: brightness(1); filter: brightness(1);
} }
25% { 25% {
transform: scale(1.05) rotate(-2deg); transform: scale(1.05) rotate(-2deg);
filter: brightness(1.2); filter: brightness(1.2);
} }
75% { 75% {
transform: scale(1.05) rotate(2deg); transform: scale(1.05) rotate(2deg);
filter: brightness(1.2); filter: brightness(1.2);
} }
} }
@keyframes reel { @keyframes reel {
0% { 0% {
transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1);
} }
50% { 50% {
transform: rotate(-8deg) scale(1.1); transform: rotate(-8deg) scale(1.1);
} }
100% { 100% {
transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1);
} }
} }
/* 多条鱼时的特殊动画效果 */ /* 多条鱼时的特殊动画效果 */
@keyframes multi-catch { @keyframes multi-catch {
0%, 0%,
100% { 100% {
transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg);
filter: brightness(1) contrast(1); filter: brightness(1) contrast(1);
} }
25% { 25% {
transform: scale(1.15) rotate(-5deg); transform: scale(1.15) rotate(-5deg);
filter: brightness(1.3) contrast(1.1); filter: brightness(1.3) contrast(1.1);
} }
75% { 75% {
transform: scale(1.15) rotate(5deg); transform: scale(1.15) rotate(5deg);
filter: brightness(1.3) contrast(1.1); filter: brightness(1.3) contrast(1.1);
} }
} }
.multi-catch { .multi-catch {
animation: multi-catch 1s ease-in-out 3 !important; animation: multi-catch 1s ease-in-out 3 !important;
} }
.multi-catch-message { .multi-catch-message {
font-size: 16px !important; font-size: 16px !important;
font-weight: bold !important; font-weight: bold !important;
background: linear-gradient(45deg, #4caf50, #2196f3) !important; background: linear-gradient(45deg, #4caf50, #2196f3) !important;
color: white !important; color: white !important;
} }
.fishing-scene:active { .fishing-scene:active {
transform: scale(0.98); transform: scale(0.98);
} }
.fishing-animation:not(.fishing-active) .fishing-scene:hover { .fishing-animation:not(.fishing-active) .fishing-scene:hover {
transform: scale(1.02); transform: scale(1.02);
} }
</style> </style>

Write Preview
Loading…
Cancel
Save