|
|
@@ -0,0 +1,525 @@
|
|
|
+<template>
|
|
|
+ <div class="timeline-container">
|
|
|
+ <div class="timeline-content">
|
|
|
+ <div class="timeline-entry-list">
|
|
|
+ <div class="gameBox">
|
|
|
+ <div class="item" v-if="isShowItem==true">
|
|
|
+ <div :class="{ 'dim': isDim }">
|
|
|
+ <div class="timer">
|
|
|
+ <div class="second">{{ countdown }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="topicNum">
|
|
|
+ <div class="topic">{{itemNum+1}}/5</div>
|
|
|
+ </div>
|
|
|
+ <div class="questionBox" v-if="questions.length>0">
|
|
|
+ <div class="title animated zoomIn">
|
|
|
+ <span style="text-align: center;">{{ questions[itemNum].ask }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="content animated" :class="animate_showChoice" v-if="animate_showChoice">
|
|
|
+ <div v-for="(item,index) in questions[itemNum].answers" :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/qiXi/error.png" alt="错误">
|
|
|
+ <img v-if="index == clickIndex&&answerColor=='right'" class="invisible" style="width: 25px;" src="@/assets/image/answerGame/qiXi/right.png" alt="正确">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="home" v-else>
|
|
|
+ <div :class="{ 'dim': isDim }">
|
|
|
+ <img class="rules" src="@/assets/image/answerGame/qiXi/rules.png" alt="互动规则" @click="clickRuleWrapper">
|
|
|
+ <div class="top" v-if="top">
|
|
|
+ <span style="font-size: 18px;color: #fff;font-weight: 600;">排名:{{ top }}</span>
|
|
|
+ </div>
|
|
|
+ <img class="answer" src="@/assets/image/answerGame/qiXi/answer.png" alt="答题按钮" @click="clickAnswer">
|
|
|
+ <img class="exit" src="@/assets/image/answerGame/qiXi/exit.png" alt="退出互动" @click="getOut">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </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-html="rule"></div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ <div class="confirmWrapper" v-if="isConfirmWrapper">
|
|
|
+ <img class="goHome" src="@/assets/image/answerGame/qiXi/goHome.png" alt="返回首页" @click="clickGoHome">
|
|
|
+ </div>
|
|
|
+ <div class="failWrapper" v-if="isFailWrapper">
|
|
|
+ <img class="goHome" src="@/assets/image/answerGame/qiXi/goHome.png" alt="返回首页" @click="clickGoHome">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <SiderInfo></SiderInfo>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { homeData,questionList,submitAnswer } from "@/api/allApi";
|
|
|
+import SiderInfo from '@/components/SiderInfo.vue';
|
|
|
+import { mapGetters } from 'vuex';
|
|
|
+export default{
|
|
|
+ components: {
|
|
|
+ SiderInfo
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ actId:this.$route.query.actId,
|
|
|
+ roomId:'',
|
|
|
+ rule:'',
|
|
|
+ top:'',
|
|
|
+ isConfirmWrapper:false,
|
|
|
+ isFailWrapper:false,
|
|
|
+ animate_showChoice:'zoomIn',
|
|
|
+ localClick:false,
|
|
|
+ clickIndex:-1,
|
|
|
+ answerColor:'',
|
|
|
+ isShowItem:false,
|
|
|
+ isRuleWrapper: false,
|
|
|
+ isDim:false,
|
|
|
+ questions:[],
|
|
|
+ chooseStr: '',
|
|
|
+ itemNum: 0,
|
|
|
+ result: [],
|
|
|
+ timer:null,
|
|
|
+ countdown:60,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // 将 getter 映射到当前组件的计算属性
|
|
|
+ ...mapGetters(['userInfo'])
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+ this.getHomeData();
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ getOut(){
|
|
|
+ this.$router.push({
|
|
|
+ path: '/home/festiveEvents',
|
|
|
+ });
|
|
|
+ },
|
|
|
+ saveAnswer(){
|
|
|
+ submitAnswer({answers:this.result,roomId:this.roomId}).then(response=>{
|
|
|
+ console.log(response.data.data);
|
|
|
+ this.result = [];
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getQuestionList(){
|
|
|
+ questionList({}).then(response=>{
|
|
|
+ console.log(response.data.data);
|
|
|
+ this.questions = response.data.data.questions;
|
|
|
+ this.roomId = response.data.data.roomId;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getHomeData(){
|
|
|
+ homeData({actId:this.actId}).then(response=>{
|
|
|
+ console.log(response.data.data);
|
|
|
+ this.rule = response.data.data.rule;
|
|
|
+ this.top = response.data.data.top;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ clickGoHome(){
|
|
|
+ this.getHomeData();
|
|
|
+ this.isFailWrapper = false;
|
|
|
+ this.isConfirmWrapper = false;
|
|
|
+ this.isDim = false;
|
|
|
+ this.isShowItem = false;
|
|
|
+ this.countdown = 60;
|
|
|
+ this.itemNum = 0;
|
|
|
+ this.animate_showChoice = 'fadeIn';
|
|
|
+ this.localClick = 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.saveAnswer();
|
|
|
+ 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.saveAnswer();
|
|
|
+ console.log(this.result);
|
|
|
+ }else{
|
|
|
+ setTimeout(() => {
|
|
|
+ this.itemNum++
|
|
|
+ this.animate_showChoice = 'fadeIn';
|
|
|
+ this.localClick = false;
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ clickAnswer(){
|
|
|
+ this.getQuestionList();
|
|
|
+ this.isShowItem = true;
|
|
|
+ this.timerCountdown();
|
|
|
+ // if(this.top){
|
|
|
+ // this.$message({
|
|
|
+ // message: '今日已答题！',
|
|
|
+ // type: 'warning'
|
|
|
+ // });
|
|
|
+ // return;
|
|
|
+ // }else{
|
|
|
+ // this.getQuestionList();
|
|
|
+ // 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: 0.5s;
|
|
|
+ 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/qiXi/itemBg.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 375px;
|
|
|
+ height: 667px;
|
|
|
+}
|
|
|
+.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/qiXi/timer.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ top: 5%;
|
|
|
+ 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/qiXi/topicNum.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 120px;
|
|
|
+ height: 42px;
|
|
|
+ top: 14%;
|
|
|
+ left: 4.5%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.topicNum .topic{
|
|
|
+ font-size: 16px;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+.item .questionBox{
|
|
|
+ position: absolute;
|
|
|
+ width: 375px;
|
|
|
+ top: 18%;
|
|
|
+ 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: #bc2641;
|
|
|
+ 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/qiXi/homeBg.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 375px;
|
|
|
+ height: 667px;
|
|
|
+}
|
|
|
+.home .rules{
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ width: 50px;
|
|
|
+ top: 22%;
|
|
|
+ left: 2%;
|
|
|
+}
|
|
|
+.home .top{
|
|
|
+ position: absolute;
|
|
|
+ bottom: 18.5%;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin:auto;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.home .answer{
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ width: 200px;
|
|
|
+ bottom: 10%;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin:auto;
|
|
|
+}
|
|
|
+.home .exit{
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ width: 200px;
|
|
|
+ bottom: 2%;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin:auto;
|
|
|
+}
|
|
|
+.hidden {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+.show {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.dim {
|
|
|
+ /* opacity:0.6; */
|
|
|
+ height:100%;
|
|
|
+ width:100%;
|
|
|
+ background: rgba(0,0,0,.4);
|
|
|
+ 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/qiXi/finish.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 240px;
|
|
|
+ height: 275px;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ z-index: 12;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: flex-end;
|
|
|
+ }
|
|
|
+ .confirmWrapper .goHome{
|
|
|
+ cursor: pointer;
|
|
|
+ width: 100px;
|
|
|
+ height: 40px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .failWrapper{
|
|
|
+ position: absolute;
|
|
|
+ background: url(@/assets/image/answerGame/qiXi/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: flex-end;
|
|
|
+ }
|
|
|
+ .failWrapper .goHome{
|
|
|
+ cursor: pointer;
|
|
|
+ width: 100px;
|
|
|
+ height: 40px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|
|
|
+<style>
|
|
|
+.el-card__header {
|
|
|
+ padding: 10px 20px !important;
|
|
|
+}
|
|
|
+</style>
|
