查看游戏规则

game/README.md

@@ -15,10 +15,6 @@ https://sit-cnzhengquan.4dage.com/game/index.html#/
 
 
 
-游戏规则
-
-
-
 
 
 
@@ -29,5 +25,3 @@ https://sit-cnzhengquan.4dage.com/game/index.html#/
 
 
 
-
-

game/src/App.vue

@@ -69,9 +69,9 @@ html, body {
 // }
 
 // 滚动条，只设置某一项可能导致不生效。
-// ::-webkit-scrollbar { background: #dddecc; width: 6px; height: 6px; }
-// ::-webkit-scrollbar-thumb { background: #828a5b; border-radius: 3px; }
-// ::-webkit-scrollbar-corner { background: #dddecc; }
+::-webkit-scrollbar { background: #dddecc; width: 6px; height: 6px; }
+::-webkit-scrollbar-thumb { background: #828a5b; border-radius: 3px; }
+::-webkit-scrollbar-corner { background: #dddecc; }
 
 // vue组件过渡效果
 .fade-out-leave-active {

game/src/components/GameRule.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="game-rule">
+    <div class="paper">
+      <h1>
+        {{ gameTitle }}
+      </h1>
+      <hr>
+      <div
+        class="rich-text"
+        v-html="richText"
+      />
+    </div>
+    <button
+      class="close"
+      @click="emit('close')"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt(390, 752)
+
+const emit = defineEmits(['close'])
+
+const props = defineProps(['gameTitle', 'richText'])
+
+</script>
+
+<style lang="less" scoped>
+.game-rule{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.7);
+  backdrop-filter: blur(calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
+  >.paper{
+    position: absolute;
+    left: 50%;
+    top: calc(66 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translate(-50%, 0);
+    width: calc(336 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(573 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    background: #FFFFFF;
+    border-radius: calc(11 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    padding-bottom: calc(34 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    padding-left: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    padding-right: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    >h1{
+      flex: 0 0 auto;
+      font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      font-family: Source Han Sans SC, Source Han Sans SC;
+      font-weight: bold;
+      color: #414141;
+      line-height: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+    >hr{
+      flex: 0 0 auto;
+      height: 0;
+      width: 100%;
+      border-top: 1px dashed #CFBB9C;
+      margin-top: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      margin-bottom: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
+    }
+    >.rich-text{
+      flex: 1 0 1px;
+      width: calc(100% + 0.5em);
+      overflow: auto;
+      padding-right: 0.5em;
+      :deep(p){
+        font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-family: Source Han Sans SC, Source Han Sans SC;
+        font-weight: 400;
+        color: #414141;
+        line-height: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        text-indent: 2em;
+      }
+      :deep(.media-wrap){
+        width: 100%;
+      }
+    }
+  }
+  >button.close{
+    position: absolute;
+    left: 50%;
+    top: calc(664 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translate(-50%, 0);
+    width: calc(52 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(52 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    background-image: url(@/assets/images/icon-close.png);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+}
+</style>

game/src/views/ExamPaper2.vue

@@ -12,7 +12,10 @@
         class="return-home"
         @click="onClickReturnHome"
       />
-      <button class="game-rule" />
+      <button
+        class="game-rule"
+        @click="isShowRule = true"
+      />
     </div>
 
     <div
@@ -104,6 +107,12 @@
       class="loading"
       type="spinner"
     />
+    <GameRule
+      v-show="isShowRule"
+      game-title="助农课堂"
+      :rich-text="store.state.gameRuleList[1].rtf"
+      @close="isShowRule=false"
+    />
   </div>
 </template>
 
@@ -115,6 +124,7 @@ import { useStore } from "vuex"
 import dayjs from 'dayjs'
 import { shuffle } from 'lodash'
 import { addScore, getScore, getExamQuestionList } from '@/api.js'
+import GameRule from '@/components/GameRule.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -125,6 +135,8 @@ const {
   windowSizeWhenDesignForRef,
 } = useSizeAdapt(390, 752)
 
+const isShowRule = ref(false)
+
 const isShowLoading = ref(true)
 getExamQuestionList().then((res) => {
   questionList.value = res.map((questionItem) => {
@@ -146,6 +158,9 @@ getExamQuestionList().then((res) => {
   isShowLoading.value = false
 
   timeCountIntervalId = setInterval(() => {
+    if (isShowRule.value) {
+      return
+    }
     timeCount.value--
     if (timeCount.value === 0) {
       clearInterval(timeCountIntervalId)

game/src/views/PairUp.vue

@@ -18,7 +18,10 @@
         class="return-home"
         @click="onClickReturnHome"
       />
-      <button class="game-rule" />
+      <button
+        class="game-rule"
+        @click="isShowRule = true"
+      />
     </div>
     <!-- 卡牌列表 -->
     <div
@@ -87,6 +90,12 @@
       :bonus-count="bonusPoint"
       @replay="replay"
     />
+    <GameRule
+      v-show="isShowRule"
+      game-title="企业翻翻看"
+      :rich-text="store.state.gameRuleList[2].rtf"
+      @close="isShowRule=false"
+    />
   </div>
 </template>
 
@@ -99,6 +108,7 @@ import dayjs from 'dayjs'
 import { shuffle } from 'lodash'
 import PairUpOver from '@/components/PairUpOver.vue'
 import { addScore, getScore } from '@/api.js'
+import GameRule from '@/components/GameRule.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -109,6 +119,8 @@ const {
   windowSizeWhenDesignForRef,
 } = useSizeAdapt(390, 752)
 
+const isShowRule = ref(false)
+
 function onClickReturnHome() {
   router.push({
     name: 'HomeView',
@@ -123,6 +135,9 @@ const isOver = ref(false)
 const timeCount = ref(store.state.gameRuleList[2].second)
 let timeCountIntervalId = null
 timeCountIntervalId = setInterval(() => {
+  if (isShowRule.value) {
+    return
+  }
   timeCount.value--
   if (timeCount.value === 0) {
     clearInterval(timeCountIntervalId)
@@ -160,6 +175,9 @@ function replay() {
   bonusPoint.value = 0
   timeCount.value = store.state.gameRuleList[2].second
   timeCountIntervalId = setInterval(() => {
+    if (isShowRule.value) {
+      return
+    }
     timeCount.value--
     if (timeCount.value === 0) {
       clearInterval(timeCountIntervalId)

game/src/views/PlantTree.vue

@@ -12,7 +12,10 @@
         class="return-home"
         @click="onClickReturnHome"
       />
-      <button class="game-rule" />
+      <button
+        class="game-rule"
+        @click="isShowRule = true"
+      />
     </div>
     <!-- 树苗 -->
     <transition
@@ -129,6 +132,12 @@
         <span class="number">{{ bonusPointForShow }}</span>
       </div>
     </div>
+    <GameRule
+      v-show="isShowRule"
+      game-title="乡村林场"
+      :rich-text="store.state.gameRuleList[0].rtf"
+      @close="isShowRule=false"
+    />
   </div>
 </template>
 
@@ -141,6 +150,7 @@ import dayjs from 'dayjs'
 import { showDialog } from 'vant'
 import { shuffle } from 'lodash'
 import { addScore, getScore } from '@/api.js'
+import GameRule from '@/components/GameRule.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -157,8 +167,10 @@ function onClickReturnHome() {
   })
 }
 
+const isShowRule = ref(false)
+
 /**
- * 游戏规则
+ * 游戏逻辑
  */
 const bonusPoint = ref(0)
 const bonusPointForShow = computed(() => {