2024元旦签到

src/router/index.js

@@ -82,6 +82,10 @@ const routes = [
         path: '/home/festiveEvents/game',
         component: () => import('@/views/HomeView/Game.vue')
       },
+      {
+        path: '/home/festiveEvents/yuanDanQianDao',
+        component: () => import('@/views/HomeView/AnswerGame/YuanDanQianDao.vue')
+      },
       {
         path: '/home/festiveEvents/siQingRiQianDao',
         component: () => import('@/views/HomeView/AnswerGame/SiQingRiQianDao.vue')

src/views/HomeView/AnswerGame/YuanDanQianDao.vue

@@ -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/yuanDan/rules.png" alt="互动规则" @click="clickRuleWrapper"> -->
+                            <img class="answer" src="@/assets/image/answerGame/yuanDan/answer.png" alt="答题按钮" @click="clickAnswer">
+                            <img class="exit" src="@/assets/image/answerGame/yuanDan/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/yuanDan/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/yuanDan/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>

src/views/HomeView/FestiveEvents.vue

@@ -78,6 +78,16 @@ export default {
             console.log(val);
             //节日游戏
             if(val.type=='1'){
+                //元旦签到 正式45
+                if(val.actId==45){
+                    this.$router.push({
+                        path: '/home/festiveEvents/yuanDanQianDao',
+                        query: {
+                            actId:val.actId
+                        }
+                    });
+                    return;
+                }
                 //司庆日签到 测试45 正式44
                 if(val.actId==44){
                     this.$router.push({