<template>
<
div class="tug-of-war-container">
<!-- 背景
图片铺满全屏 -->
<img
:src="background" class="background-image" alt="背景"/>
<!-- 问题
图片 -->
<
div class="question-container">
<img
:src='questionImg' class="question-image" alt="
图片不存在"/>
</
div>
<el-select v-model="questionValue" placeholder="请选择" class="select-question">
<el-option
v-for="item in allQuestions"
:key="item.id"
:label="item.questionNumber"
:value="item.id"
@click="handleClick(item)">
</el-option>
</el-select>
<Edit/>
<!-- 移动
图片（按比例放大） -->
<
div class="move-container">
<img
:src="character"
class="move-image"
:style="{ transform
: `translateX(${imagePosition}px)` }"
alt="移动对象"
/>
</
div>
<!-- 选项按钮 -->
<
div class="options-container">
<button
class="option-btn left-option"
:disabled="answered"
@click="checkAnswer(question.resultLeft,'left')"
>
{{ question.optionOne }}
</button>
<button
class="option-btn right-option"
:disabled="answered"
@click="checkAnswer(question.resultRight,'right')"
>
{{ question.optionTwo }}
</button>
</
div>
<!-- 提示
图片 -->
<transition name="fade">
<img
v-show="showCorrectLeft"
:src="correctImg"
class="feedback-image correct-feedback-left"
alt="正确提示"
/>
</transition>
<transition name="fade">
<img
v-show="showCorrectRight"
:src="correctImg"
class="feedback-image correct-feedback-right"
alt="正确提示"
/>
</transition>
<transition name="fade">
<img
v-show="showIncorrectLeft"
:src="incorrectImg"
class="feedback-image incorrect-feedback-left"
alt="错误提示"
/>
</transition>
<transition name="fade">
<img
v-show="showIncorrectRight"
:src="incorrectImg"
class="feedback-image incorrect-feedback-right"
alt="错误提示"
/>
</transition>
</
div>
</template>
<script setup lang="ts">
import {onMounted, onUnmounted, ref} from 'vue';
import {getQuestionAll, getQuestionImg} from '@/api/modules/tug.of.war'
import Edit from './Edit.vue';
// 导入所有需要的
图片
import questionImgOld from '@/image/1.jpg';
import background from '@/image/background.jpg'
import character from '@/image/character.png'
import correctImg from '@/image/correct.png';
import incorrectImg from '@/image/incorrect.png';
import {TugOfWar} from "@/types/api/tugOfWar";
// 定义选项
const questionImg = ref<string>();
questionImg.value = questionImgOld
// 定义奖项配置
const question = ref(
{optionOne
: "", optionTwo
: "", resultLeft
: 1, resultRight
: 0}
)
//所有问题
const allQuestions = ref<TugOfWar[]>([]);
const questionValue = ref<string>();
//
图片位置状态
const imagePosition = ref<number>(0);
const initialPosition = ref<number>(0);
// 答题状态
const answered = ref<boolean>(false);
const showCorrectLeft = ref<boolean>(false);
const showCorrectRight = ref<boolean>(false);
const showIncorrectLeft = ref<boolean>(false);
const showIncorrectRight = ref<boolean>(false);
// 检查答案
const checkAnswer = (optionIndex
: number, direction
: String) => {
if (answered.value) return;
answered.value = true;
if (optionIndex === 1) {
if ("left" === direction) {
showCorrectLeft.value = true;
// 向左移动
图片
imagePosition.value = -250;
}
if ("right" === direction) {
showCorrectRight.value = true;
imagePosition.value = 250;
}
}
if (optionIndex === 0) {
if ("left" === direction) {
showIncorrectLeft.value = true;
// 向右移动
图片
imagePosition.value = 250;
}
if ("right" === direction) {
showIncorrectRight.value = true;
imagePosition.value = -250;
}
}
// 3秒后重置状态
setTimeout(resetGame, 3000);
};
// 重置游戏状态
const resetGame = () => {
answered.value = false;
showCorrectLeft.value = false;
showCorrectRight.value = false;
showIncorrectLeft.value = false;
showIncorrectRight.value = false;
imagePosition.value = 0;
};
// 响应式调整布局
const handleResize = () => {
// 在实际应用中，这里可以添加响应式布局调整逻辑
};
// 定义响应类型
interface ApiResponse {
data
: ArrayBuffer
headers
: {
'content-type'
: "image/jpeg"
}
}
const handleClick = async (questionOne
: TugOfWar) => {
try {
console.log(questionOne.id);
const response = await getQuestionImg({id
: questionOne.id});
console.log(response);
// 转换为 Blob（指定 MIME 类型）
const blob = new Blob([response], {type
: "image/jpeg"});
console.log(blob);
// 创建 Blob 对象
// 创建临时 URL
questionImg.value = URL.createObjectURL(blob);
// 生成临时 URL
} catch (error) {
console.error('Error loading image
:', error)
// 可以在此处添加错误处理逻辑
questionImg.value = questionImgOld
}
question.value.optionOne = questionOne.optionOne;
question.value.optionTwo = questionOne.optionTwo;
question.value.resultRight = questionOne.resultRight
question.value.resultLeft = questionOne.resultLeft
}
onMounted(async () => {
window.addEventListener('resize', handleResize);
allQuestions.value = await getQuestionAll()
console.log(allQuestions.value)
});
onUnmounted(() => {
window.removeEventListener('resize', handleResize);
});
</script>
<style scoped>
/* 基础样式重置 */
* {
margin
: 0;
padding: 0;
box-sizing
: border-box;
}
.tug-of-war-container {
position
: fixed;
top
: 0;
left
: 0;
width
: 100vw;
height
: 100vh;
overflow: hidden;
display
: flex;
flex-direction
: column;
justify-content
: space-between;
background
: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
}
/* 背景
图片铺满全屏 */
.background-image {
position
: absolute;
top
: 0;
left
: 56px;
width
: 93%;
height
: 100%;
object-fit
: cover;
z-index
: 1;
opacity
: 0.8;
}
/* 问题容器 */
.question-container {
position
: relative;
z-index
: 2;
display
: flex;
justify-content
: center;
padding-top
: 0px;
}
.question-image {
width
: 80%;
max-width
: 400px;
height
: 180px;
object-fit
: contain;
border
: 4px solid #ffd700;
border-radius
: 15px;
background
: rgba(255, 255, 255, 0.9);
box-shadow
: 0 8px 30px rgba(0, 0, 0, 0.5);
}
/* 移动
图片容器 */
.move-container {
position
: relative;
z-index
: 3;
display
: flex;
left
: 52px;
justify-content
: center;
align-items
: center;
height
: 300px;
margin
: 20px 0;
}
.move-image {
width
: 1200px; /* 放大移动
图片 */
height
: 1200px;
object-fit
: contain;
transition
: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
filter
: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5));
z-index
: 4;
}
/* 选项按钮容器 */
.options-container {
position
: relative;
z-index
: 5;
display
: flex;
justify-content
: space-between;
padding: 0 30%;
margin-bottom
: 30px;
}
.option-btn {
padding: 20px 50px;
font-size
: 24px;
font-weight
: bold;
border
: none;
border-radius
: 60px;
cursor
: pointer;
transition
: all 0.4s ease;
box-shadow
: 0 8px 20px rgba(0, 0, 0, 0.3);
position
: relative;
overflow: hidden;
z-index
: 6;
}
.left-option {
background
: linear-gradient(145deg, #ff416c, #ff4b2b);
color
: white;
}
.right-option {
background
: linear-gradient(145deg, #38ef7d, #11998e);
color
: white;
}
.option-btn
:hover
:not(
:disabled) {
transform
: translateY(-8px) scale(1.05);
box-shadow
: 0 12px 25px rgba(0, 0, 0, 0.4);
}
.option-btn
:active
:not(
:disabled) {
transform
: translateY(2px);
}
.option-btn
:disabled {
opacity
: 0.7;
cursor
: not-allowed;
}
/* 添加发光效果 */
.option-btn
::after {
content
: '';
position
: absolute;
top
: 0;
left
: 0;
width
: 100%;
height
: 100%;
background
: rgba(255, 255, 255, 0.1);
border-radius
: 60px;
transform
: scale(0);
transition
: transform 0.5s ease;
}
.option-btn
:hover
:not(
:disabled)
::after {
transform
: scale(1.5);
opacity
: 0;
}
/* 反馈
图片样式 */
.feedback-image {
position
: absolute;
transform
: translate(-50%, -50%);
width
: 250px;
height
: 250px;
object-fit
: contain;
z-index
: 10;
}
.correct-feedback-left {
top
: 85%;
left
: 20%;
animation
: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.correct-feedback-right {
top
: 85%;
left
: 80%;
animation
: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.incorrect-feedback-left {
top
: 85%;
left
: 20%;
animation
: shake 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
.incorrect-feedback-right {
top
: 85%;
left
: 80%;
animation
: shake 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
/* 动画效果 */
@keyframes popIn {
0% {
transform
: translate(-50%, -50%) scale(0.5);
opacity
: 0;
}
70% {
transform
: translate(-50%, -50%) scale(1.1);
opacity
: 1;
}
100% {
transform
: translate(-50%, -50%) scale(1);
}
}
@keyframes shake {
0%, 100% {
transform
: translate(-50%, -50%);
}
10%, 30%, 50%, 70%, 90% {
transform
: translate(-52%, -50%);
}
20%, 40%, 60%, 80% {
transform
: translate(-48%, -50%);
}
}
.fade-enter-active, .fade-leave-active {
transition
: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to {
opacity
: 0;
}
/* 响应式设计 */
@media (max-width
: 768px) {
.question-image {
width
: 90%;
height
: 150px;
}
.move-image {
width
: 120px;
height
: 120px;
}
.option-btn {
padding: 15px 30px;
font-size
: 18px;
}
}
@media (max-width
: 480px) {
.question-container {
padding-top
: 20px;
}
.question-image {
height
: 120px;
}
.move-image {
width
: 100px;
height
: 100px;
}
.option-btn {
padding: 12px 25px;
font-size
: 16px;
}
.feedback-image {
width
: 180px;
height
: 180px;
}
.example-showcase .el-dropdown + .el-dropdown {
margin-left
: 15px;
}
.example-showcase .el-dropdown-link {
cursor
: pointer;
color
: var(--el-color-primary);
display
: flex;
align-items
: center;
}
}
.select-question{
width
: 100px;
padding-left
: 0px;
}
</style>
调整合适的比例放在一个页面上展示
本文介绍了一种利用div的padding属性配合overflow:hidden样式来为图片占位的方法，有效避免了在网络延迟时图片加载造成的页面抖动现象，确保了页面布局的稳定性和用户体验。
扫一扫
5431
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
