|
|
@@ -0,0 +1,351 @@
|
|
|
+<template>
|
|
|
+ <div class="timeline-container">
|
|
|
+ <div class="timeline-content">
|
|
|
+ <div class="timeline-entry-list">
|
|
|
+ <div class="gameBox">
|
|
|
+ <div class="home">
|
|
|
+ <div :class="{ 'dim': isDim }">
|
|
|
+ <!-- <img class="rules" src="@/assets/image/answerGame/siQingRi/rules.png" alt="互动规则" @click="clickRuleWrapper"> -->
|
|
|
+ <img class="answer" src="@/assets/image/answerGame/siQingRi/answer.png" alt="答题按钮" @click="clickAnswer">
|
|
|
+ <img class="exit" src="@/assets/image/answerGame/siQingRi/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" @click="getOut">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <SiderInfo></SiderInfo>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { homeData,MidAutumnSignIn } from "@/api/allApi";
|
|
|
+import SiderInfo from '@/components/SiderInfo.vue';
|
|
|
+export default{
|
|
|
+ components: {
|
|
|
+ SiderInfo
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ actId:this.$route.query.actId,
|
|
|
+ rule:'',
|
|
|
+ isConfirmWrapper:false,
|
|
|
+ isRuleWrapper: false,
|
|
|
+ isDim:false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+ this.getHomeData();
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ getOut(){
|
|
|
+ this.$router.push({
|
|
|
+ path: '/home/festiveEvents',
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getHomeData(){
|
|
|
+ homeData({actId:this.actId}).then(response=>{
|
|
|
+ console.log(response.data.data);
|
|
|
+ this.rule = response.data.data.rule;
|
|
|
+ }).catch(err => {
|
|
|
+ console.log(err)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ clickAnswer(){
|
|
|
+ // this.isDim = true;
|
|
|
+ // this.isConfirmWrapper = true;
|
|
|
+ MidAutumnSignIn({actId:this.actId}).then(response=>{
|
|
|
+ this.isDim = true;
|
|
|
+ this.isConfirmWrapper = true;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ clickRuleWrapper(){
|
|
|
+ this.isDim = true;
|
|
|
+ this.isRuleWrapper = true;
|
|
|
+ },
|
|
|
+ closeRuleWrapper(){
|
|
|
+ this.isDim = false;
|
|
|
+ this.isRuleWrapper = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+.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: 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/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: 375px;
|
|
|
+ top: 28%;
|
|
|
+ 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/siQingRi/homeBg.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 375px;
|
|
|
+ height: 667px;
|
|
|
+}
|
|
|
+.home .rules{
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ width: 50px;
|
|
|
+ top: 20%;
|
|
|
+ left: 5%;
|
|
|
+}
|
|
|
+.home .top{
|
|
|
+ position: absolute;
|
|
|
+ bottom: 23%;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin:auto;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.home .answer{
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ width: 180px;
|
|
|
+ bottom: 22%;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin:auto;
|
|
|
+}
|
|
|
+.home .exit{
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ width: 180px;
|
|
|
+ bottom: 12%;
|
|
|
+ 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{
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ background: url(@/assets/image/answerGame/siQingRi/finish.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 253px;
|
|
|
+ height: 213px;
|
|
|
+ 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: 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: flex-end;
|
|
|
+ }
|
|
|
+ .failWrapper .goHome{
|
|
|
+ cursor: pointer;
|
|
|
+ width: 112px;
|
|
|
+ height: 55px;
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|
|
|
+<style>
|
|
|
+.el-card__header {
|
|
|
+ padding: 10px 20px !important;
|
|
|
+}
|
|
|
+</style>
|
