<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>
调整合适的比例放在一个页面上展示
本文探讨了在CSS布局中遇到的Flex居中对齐导致内容被裁切的问题，以及如何通过设置`margin:auto`和`width:max-content`结合`max-width:100%`来实现内容居中且在手机端出现滚动条的解决方案。同时提到了使用`margin-left:auto`和`margin-right:auto`作为替代方法，确保内容不溢出。
扫一扫
2961
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
