|
|
@@ -0,0 +1,508 @@
|
|
|
+<template>
|
|
|
+ <div class="timeline-container">
|
|
|
+ <div class="timeline-content">
|
|
|
+ <div class="timeline-entry-list">
|
|
|
+ <div class="gameBox">
|
|
|
+ <div class="item" :class="{ 'dim': isDim }" v-if="isShowItem==true">
|
|
|
+ <div class="integralBox">
|
|
|
+ <div class="integral">125000</div>
|
|
|
+ </div>
|
|
|
+ <div class="timer">
|
|
|
+ <div class="second">{{ countdown }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="topicNum">
|
|
|
+ <div class="topic">{{itemNum+1}}/5</div>
|
|
|
+ </div>
|
|
|
+ <div class="questionBox">
|
|
|
+ <div class="title animated zoomIn">
|
|
|
+ <span style="text-align: center;">{{ question[itemNum].ask }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="content animated" :class="animate_showChoice" v-if="animate_showChoice">
|
|
|
+ <div v-for="(item,index) in question[itemNum].answer" :key="index" class="answerItem" :class="index == clickIndex ? answerColor : ''" @click="answer(item,index)">
|
|
|
+ <span>{{ item.answer }}</span>
|
|
|
+ <img v-if="index == clickIndex&&answerColor=='error'" class="invisible" src="@/assets/image/answerGame/item/error.png" alt="错误">
|
|
|
+ <img v-if="index == clickIndex&&answerColor=='right'" class="invisible" style="width: 25px;" src="@/assets/image/answerGame/item/right.png" alt="正确">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="home" :class="{ 'dim': isDim }" v-else>
|
|
|
+ <img class="rules" src="@/assets/image/answerGame/home/rules.png" alt="互动规则" @click="clickRuleWrapper">
|
|
|
+ <img class="answer" src="@/assets/image/answerGame/home/answer.png" alt="答题按钮" @click="clickAnswer">
|
|
|
+ <img class="exit" src="@/assets/image/answerGame/home/exit.png" alt="答题按钮">
|
|
|
+ </div>
|
|
|
+ <div class="ruleWrapper" v-if="isRuleWrapper">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>互动规则</span>
|
|
|
+ <span style="float: right; font-size: 20px;cursor: pointer;" @click="closeRuleWrapper">
|
|
|
+ <i class="el-icon-close"></i>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div v-for="o in 4" :key="o">
|
|
|
+ {{'列表内容 ' + o }}
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ <div class="confirmWrapper" v-if="isConfirmWrapper">
|
|
|
+ <img class="goHome" src="@/assets/image/answerGame/item/goHome.png" alt="返回首页" @click="clickGoHome">
|
|
|
+ </div>
|
|
|
+ <div class="failWrapper" v-if="isFailWrapper">
|
|
|
+ <img class="goHome" src="@/assets/image/answerGame/item/goHome.png" alt="返回首页" @click="clickGoHome">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <SiderInfo></SiderInfo>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import SiderInfo from '@/components/SiderInfo.vue'
|
|
|
+export default{
|
|
|
+ components: {
|
|
|
+ SiderInfo
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isConfirmWrapper:false,
|
|
|
+ isFailWrapper:false,
|
|
|
+ animate_showChoice:'zoomIn',
|
|
|
+ localClick:false,
|
|
|
+ clickIndex:-1,
|
|
|
+ answerColor:'',
|
|
|
+ isShowItem:false,
|
|
|
+ isRuleWrapper: false,
|
|
|
+ isDim:false,
|
|
|
+ question:[
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ sortId: 1,
|
|
|
+ ask: "最早的粽子并不是端午节的特产，那粽子是什么时期被正式定为端午节食品的？1111",
|
|
|
+ answer: [
|
|
|
+ {right: false, answer: "南北朝时期11"},
|
|
|
+ {right: false, answer: "春秋时期11"},
|
|
|
+ {right: true, answer: "晋代11"},
|
|
|
+ {right: false, answer: "周商时期11"}],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ sortId: 2,
|
|
|
+ ask: "最早的粽子并不是端午节的特产，那粽子是什么时期被正式定为端午节食品的？2222",
|
|
|
+ answer: [
|
|
|
+ {right: false, answer: "南北朝时期22"},
|
|
|
+ {right: false, answer: "春秋时期22"},
|
|
|
+ {right: true, answer: "晋代22"},
|
|
|
+ {right: false, answer: "周商时期22"}],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ sortId: 3,
|
|
|
+ ask: "最早的粽子并不是端午节的特产，那粽子是什么时期被正式定为端午节食品的？333",
|
|
|
+ answer: [
|
|
|
+ {right: false, answer: "南北朝时期33"},
|
|
|
+ {right: false, answer: "春秋时期33"},
|
|
|
+ {right: true, answer: "晋代33"},
|
|
|
+ {right: false, answer: "周商时期33"}],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ sortId: 4,
|
|
|
+ ask: "最早的粽子并不是端午节的特产，那粽子是什么时期被正式定为端午节食品的？4444",
|
|
|
+ answer: [
|
|
|
+ {right: false, answer: "南北朝时期44"},
|
|
|
+ {right: false, answer: "春秋时期44"},
|
|
|
+ {right: true, answer: "晋代44"},
|
|
|
+ {right: false, answer: "周商时期44"}],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ sortId: 5,
|
|
|
+ ask: "最早的粽子并不是端午节的特产，那粽子是什么时期被正式定为端午节食品的？5555",
|
|
|
+ answer: [
|
|
|
+ {right: false, answer: "南北朝时期55"},
|
|
|
+ {right: false, answer: "春秋时期55"},
|
|
|
+ {right: true, answer: "晋代55"},
|
|
|
+ {right: false, answer: "周商时期55"}],
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ chooseStr: '',
|
|
|
+ itemNum: 0,
|
|
|
+ result: [],
|
|
|
+ timer:null,
|
|
|
+ countdown:60,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created(){},
|
|
|
+ methods:{
|
|
|
+ clickGoHome(){
|
|
|
+ this.isFailWrapper = false;
|
|
|
+ this.isConfirmWrapper = false;
|
|
|
+ this.isDim = false;
|
|
|
+ this.isShowItem = false;
|
|
|
+ },
|
|
|
+ timerCountdown(){
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ this.countdown--;
|
|
|
+ if (this.countdown == 0) {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ let resLength = 5 - this.result.length;
|
|
|
+ for (let i = 0; i < resLength; i++) {
|
|
|
+ this.result.push('');
|
|
|
+ }
|
|
|
+ this.isDim = true;
|
|
|
+ this.isFailWrapper = true;
|
|
|
+ this.countdown = 60;
|
|
|
+ console.log(this.result);
|
|
|
+ }
|
|
|
+ }, 1000)
|
|
|
+ },
|
|
|
+ answer(val,index){
|
|
|
+ console.log(this.itemNum);
|
|
|
+ if(!this.localClick && this.itemNum<5){
|
|
|
+ this.clickIndex = index;
|
|
|
+ if(val.right){
|
|
|
+ this.answerColor = 'right';
|
|
|
+ }else{
|
|
|
+ this.answerColor = 'error';
|
|
|
+ }
|
|
|
+ this.localClick = true;
|
|
|
+ setTimeout(() => {
|
|
|
+ this.result.push(val.answer);
|
|
|
+ this.clickIndex = -1;
|
|
|
+ this.answerColor = '';
|
|
|
+ this.animate_showChoice = 'fadeOut';
|
|
|
+ if(this.itemNum==4){
|
|
|
+ clearInterval(this.timer);
|
|
|
+ this.localClick = true;
|
|
|
+ this.isDim = true;
|
|
|
+ this.isConfirmWrapper = true;
|
|
|
+ this.countdown = 60;
|
|
|
+ console.log(this.result);
|
|
|
+ }else{
|
|
|
+ this.itemNum++
|
|
|
+ this.localClick = false;
|
|
|
+ setTimeout(() => {
|
|
|
+ this.animate_showChoice = 'fadeIn';
|
|
|
+ }, 1500)
|
|
|
+ }
|
|
|
+
|
|
|
+ }, 1500)
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ clickAnswer(){
|
|
|
+ this.isShowItem = true;
|
|
|
+ this.timerCountdown();
|
|
|
+ },
|
|
|
+ clickRuleWrapper(){
|
|
|
+ this.isDim = true;
|
|
|
+ this.isRuleWrapper = true;
|
|
|
+ },
|
|
|
+ closeRuleWrapper(){
|
|
|
+ this.isDim = false;
|
|
|
+ this.isRuleWrapper = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+.animated {
|
|
|
+ animation-duration: 1s;
|
|
|
+ animation-fill-mode: forwards;
|
|
|
+}
|
|
|
+@keyframes zoomIn {
|
|
|
+ from {
|
|
|
+ opacity: 0;
|
|
|
+ transform: scale3d(.2, .2, .2);
|
|
|
+ }
|
|
|
+
|
|
|
+ 50% {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+.zoomIn {
|
|
|
+ animation-name: zoomIn;
|
|
|
+}
|
|
|
+@keyframes fadeIn {
|
|
|
+ from {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.fadeIn {
|
|
|
+ animation-name: fadeIn;
|
|
|
+}
|
|
|
+@keyframes fadeOut {
|
|
|
+ from {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.fadeOut {
|
|
|
+ animation-name: fadeOut;
|
|
|
+}
|
|
|
+.timeline-container{
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+.timeline-entry-list{
|
|
|
+ margin-right: 17.5rem;
|
|
|
+ border-radius: 2px;
|
|
|
+ width: 720px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.timeline-entry-list .gameBox{
|
|
|
+ border-radius: 4px 4px 0 0;
|
|
|
+ position: relative;
|
|
|
+ padding: 2.667rem 0;
|
|
|
+ z-index: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ background-color: #fff;
|
|
|
+ padding-left: 2.67rem;
|
|
|
+ padding-right: 2.67rem;
|
|
|
+ margin-bottom: 2rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ min-height: 280px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-content: center;
|
|
|
+}
|
|
|
+.gameBox .item{
|
|
|
+ position: relative;
|
|
|
+ z-index: 10;
|
|
|
+ background: url(@/assets/image/answerGame/item/itemBg.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 450px;
|
|
|
+ height: 800px;
|
|
|
+}
|
|
|
+.item .integralBox{
|
|
|
+ position: absolute;
|
|
|
+ top: 7.3%;
|
|
|
+ right: 8%;
|
|
|
+ width: 90px;
|
|
|
+ height: 35.2px;
|
|
|
+ /* background: greenyellow; */
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ line-height: 35.2px;
|
|
|
+}
|
|
|
+.integralBox .integral{
|
|
|
+ font-size: 16px;
|
|
|
+ color: orange;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+.item .timer{
|
|
|
+ position: absolute;
|
|
|
+ background: url(@/assets/image/answerGame/item/timer.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ top: 15%;
|
|
|
+ right: 10%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.timer .second{
|
|
|
+ font-size: 16px;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+.item .topicNum{
|
|
|
+ position: absolute;
|
|
|
+ background: url(@/assets/image/answerGame/item/topicNum.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 120px;
|
|
|
+ height: 42px;
|
|
|
+ top: 25%;
|
|
|
+ left: 4.8%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.topicNum .topic{
|
|
|
+ font-size: 16px;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+.item .questionBox{
|
|
|
+ position: absolute;
|
|
|
+ width: 450px;
|
|
|
+ top: 35%;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.questionBox .title{
|
|
|
+ margin:auto 50px;
|
|
|
+ height: 180px;
|
|
|
+ font-size: 18px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ /* font-weight: 600; */
|
|
|
+}
|
|
|
+.content{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.answerItem{
|
|
|
+ cursor: pointer;
|
|
|
+ margin: 10px 0;
|
|
|
+ color: #3883fa;
|
|
|
+ background: rgb(221, 218, 218);
|
|
|
+ border-radius: 20px;
|
|
|
+ width: 80%;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.right {
|
|
|
+ /*选择正确的答案颜色*/
|
|
|
+ background: #3ede58;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.error {
|
|
|
+ /*选择错误的答案颜色*/
|
|
|
+ background: #e53117;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.invisible{
|
|
|
+ width: 25px;
|
|
|
+ position: absolute;
|
|
|
+ right: 15px;
|
|
|
+}
|
|
|
+.gameBox .home{
|
|
|
+ position: relative;
|
|
|
+ z-index: 10;
|
|
|
+ background: url(@/assets/image/answerGame/home/homeBg.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 450px;
|
|
|
+ height: 800px;
|
|
|
+}
|
|
|
+.home .rules{
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ width: 50px;
|
|
|
+ top: 32%;
|
|
|
+ left: 5%;
|
|
|
+}
|
|
|
+.home .answer{
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ width: 200px;
|
|
|
+ bottom: 15%;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin:auto;
|
|
|
+}
|
|
|
+.home .exit{
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ width: 200px;
|
|
|
+ bottom: 8%;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin:auto;
|
|
|
+}
|
|
|
+.hidden {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+.show {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.dim {
|
|
|
+ opacity:0.6;
|
|
|
+ /* filter: black(5px); */
|
|
|
+ pointer-events: none;
|
|
|
+}
|
|
|
+
|
|
|
+ .clearfix:before,
|
|
|
+ .clearfix:after {
|
|
|
+ display: table;
|
|
|
+ content: "";
|
|
|
+ }
|
|
|
+ .clearfix:after {
|
|
|
+ clear: both
|
|
|
+ }
|
|
|
+ .ruleWrapper{
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ z-index: 12;
|
|
|
+ }
|
|
|
+ .box-card {
|
|
|
+ width: 350px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .confirmWrapper{
|
|
|
+ position: absolute;
|
|
|
+ background: url(@/assets/image/answerGame/item/finish.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 254px;
|
|
|
+ height: 260px;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ z-index: 12;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: end;
|
|
|
+ }
|
|
|
+ .confirmWrapper .goHome{
|
|
|
+ cursor: pointer;
|
|
|
+ width: 112px;
|
|
|
+ height: 55px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .failWrapper{
|
|
|
+ position: absolute;
|
|
|
+ background: url(@/assets/image/answerGame/item/fail.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 240px;
|
|
|
+ height: 208.5px;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ z-index: 12;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: end;
|
|
|
+ }
|
|
|
+ .failWrapper .goHome{
|
|
|
+ cursor: pointer;
|
|
|
+ width: 112px;
|
|
|
+ height: 55px;
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|
|
|
+<style>
|
|
|
+.el-card__header {
|
|
|
+ padding: 10px 20px !important;
|
|
|
+}
|
|
|
+</style>
|
