更新华容道

gaojianghua · Aug 27, 2024 · ddb0909 · ddb0909
1 parent 2cc56bc
commit ddb0909
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 24 deletions.
diff --git a/src/components/games/Hua-Rong-Dao/components/control.vue b/src/components/games/Hua-Rong-Dao/components/control.vue
@@ -1,4 +1,3 @@
-
 <template>
     <div class="box ml-3 flex w-full p-3">
         <div class="box flex w-[16rem] flex-col items-center justify-center p-3 text-xl text-white">
@@ -9,11 +8,35 @@
             <div class="flex w-full items-center">
                 <span class="text-white">主图：</span>
                 <!-- @click="changeGameImg(item.value)" -->
-                <div :class="games.isStart ? 'disable' : ''" class="box relative w-[16rem] cursor-pointer rounded-md p-2 text-xl font-normal text-white" @click="openImg">
+                <div
+                    :class="games.isStart ? 'disable' : ''"
+                    class="box relative flex w-[16rem] cursor-pointer items-center rounded-md p-2 text-xl font-normal text-white"
+                    @click="openImg"
+                >
                     <p>{{ formInline.imgList[formInline.imgCurrent].label }}</p>
-                    <div v-if="imgShow" class="absolute left-0 top-[3.1rem] z-10 w-[15.8rem] rounded-md bg-zinc-800 p-2">
+                    <svg
+                        t="1724739822676"
+                        class="ml-auto transition-all"
+                        :style="{transform: imgShow ? 'rotate(180deg)' : ''}"
+                        viewBox="0 0 1024 1024"
+                        version="1.1"
+                        xmlns="http://www.w3.org/2000/svg"
+                        p-id="5072"
+                        width="16"
+                        height="16" 
+                    >
+                        <path
+                            d="M76 326L490.6 740.7c5.7 5.7 13.3 8.79999999 21.4 8.8s15.69999999-3.2 21.4-8.8L948 326c8.6-8.6 11.2-21.59999999 6.5-32.9-4.7-11.3-15.69999999-18.6-27.9-18.6l-829.3 0c-12.2 0-23.2 7.4-27.9 18.6-4.6 11.3-2.1 24.3 6.6 32.9z"
+                            p-id="5073"
+                            fill="#FFFFFF"
+                        />
+                    </svg>
+                    <div
+                        v-if="imgShow"
+                        class="absolute left-0 top-[3.1rem] z-10 w-[15.8rem] rounded-md bg-zinc-800 p-2"
+                    >
                         <div
-                            v-for="(item, i) in formInline.imgList" 
+                            v-for="(item, i) in formInline.imgList"
                             :key="item.value"
                             class="rounded-md p-2 text-white hover:bg-slate-100 hover:text-black"
                             @click="changeGameImg(item.value, item.label, i)"
@@ -25,11 +48,35 @@
             </div>
             <div class="mt-2 flex w-full items-center">
                 <span class="text-white">等级：</span>
-                <div :class="games.isStart ? 'disable' : ''" class="box relative w-[16rem] cursor-pointer rounded-md p-2 text-xl font-normal text-white" @click="openLevel">
+                <div
+                    :class="games.isStart ? 'disable' : ''"
+                    class="box relative flex w-[16rem] cursor-pointer items-center rounded-md p-2 text-xl font-normal text-white"
+                    @click="openLevel"
+                >
                     <p>{{ formInline.levelList[formInline.levelCurrent].label }}</p>
-                    <div v-if="levelShow" class="absolute left-0 top-[3.1rem] z-10 w-[15.8rem] rounded-md bg-zinc-800 p-2">
+                    <svg
+                        t="1724739822676"
+                        class="ml-auto transition-all"
+                        :style="{transform: levelShow ? 'rotate(180deg)' : ''}"
+                        viewBox="0 0 1024 1024"
+                        version="1.1"
+                        xmlns="http://www.w3.org/2000/svg"
+                        p-id="5072"
+                        width="16"
+                        height="16" 
+                    >
+                        <path
+                            d="M76 326L490.6 740.7c5.7 5.7 13.3 8.79999999 21.4 8.8s15.69999999-3.2 21.4-8.8L948 326c8.6-8.6 11.2-21.59999999 6.5-32.9-4.7-11.3-15.69999999-18.6-27.9-18.6l-829.3 0c-12.2 0-23.2 7.4-27.9 18.6-4.6 11.3-2.1 24.3 6.6 32.9z"
+                            p-id="5073"
+                            fill="#FFFFFF"
+                        />
+                    </svg>
+                    <div
+                        v-if="levelShow"
+                        class="absolute left-0 top-[3.1rem] z-10 w-[15.8rem] rounded-md bg-zinc-800 p-2"
+                    >
                         <div
-                            v-for="(item, i) in formInline.levelList" 
+                            v-for="(item, i) in formInline.levelList"
                             :key="item.value"
                             class="rounded-md p-2 text-white hover:bg-slate-100 hover:text-black"
                             @click="changeGameLevel(item.label, item.value, i)"
@@ -39,16 +86,18 @@
                     </div>
                 </div>
             </div>
-            <button class="button main-bg-color ml-auto mt-3 rounded-md px-24 py-3 text-white" @click="changeGame">{{ games.isStart ? '结束游戏' : '开始游戏' }}</button>
+            <button class="button main-bg-color ml-auto mt-3 rounded-md px-24 py-3 text-white" @click="changeGame">
+                {{ games.isStart ? '结束游戏' : '开始游戏' }}
+            </button>
         </div>
     </div>
 </template>
 <script lang="ts" setup>
 import { reactive, toRefs } from 'vue';
 const props = defineProps<{ games: any }>();
 
-let imgShow = ref(false)
-let levelShow = ref(false)
+let imgShow = ref(false);
+let levelShow = ref(false);
 
 // 开始游戏、重来
 const changeGame = () => {
@@ -59,38 +108,38 @@ const changeGame = () => {
 };
 // 切换主图
 const changeGameImg = (img: string, name: string, i: number) => {
-    formInline.value.imgCurrent = i
+    formInline.value.imgCurrent = i;
     props.games.setImg(img);
 };
 // 切换主图
 const changeGameLevel = (level: string, value: number, i: number) => {
-    formInline.value.levelCurrent = i
+    formInline.value.levelCurrent = i;
     props.games.setLevel(value);
 };
 
 const openLevel = () => {
-    if (props.games.isStart) return
+    if (props.games.isStart) return;
     if (imgShow.value) {
-        imgShow.value = false
+        imgShow.value = false;
     }
-    levelShow.value = !levelShow.value
-}
+    levelShow.value = !levelShow.value;
+};
 
 const openImg = () => {
-    if (props.games.isStart) return
+    if (props.games.isStart) return;
     if (levelShow.value) {
-        levelShow.value = false
+        levelShow.value = false;
     }
-    imgShow.value = !imgShow.value
-}
+    imgShow.value = !imgShow.value;
+};
 
 const data = reactive({
     formInline: {
         imgCurrent: 0,
         imgList: [
             { label: '灰太狼', value: 'htl' },
             { label: '电音小姐姐', value: 'dy' },
-            { label: 'AI小姐姐', value: 'ai' },
+            { label: 'AI小姐姐', value: 'ai' }
         ],
         levelCurrent: 0,
         levelList: [
@@ -103,8 +152,9 @@ const data = reactive({
 const { formInline } = toRefs(data);
 </script>
 <style lang="scss" scoped>
-    .disable{
+    .disable {
         background-color: #ababab;
         color: #999;
+        
     }
 </style>
diff --git a/src/pages/article-details/[id].vue b/src/pages/article-details/[id].vue
@@ -1,3 +1,10 @@
+<!--
+ * @Author: 高江华 g598670138@163.com
+ * @Date: 2024-04-08 09:53:43
+ * @LastEditors: 高江华
+ * @LastEditTime: 2024-08-27 11:45:33
+ * @Description: file content
+-->
 <template>
     <div class="page mx-auto flex w-[100rem]">
         <div class="box h-full flex-1" />
@@ -10,7 +17,7 @@
                     <span class="main-color ml-[1.5rem] tracking-[1.5rem]">分享</span>
                 </div>
             </div>
-            <div class="overflow-y-scroll" :style="{ height: 'calc(100% - 2.8% - 3rem)' }">
+            <div class="overflow-y-scroll rounded-3xl" :style="{ height: 'calc(100% - 2.5% - 3rem)' }">
                 <div class="mt-5 px-[3%]">
                     <div class="text-center text-[1.3rem] font-medium tracking-wider text-[#ffffff]">相关文章</div>
                     <div
@@ -90,6 +97,6 @@ console.log(route.params.id);
 
 <style scoped>
     .page {
-        height: calc(100vh - 5rem - 1.5rem);
+        height: calc(100vh - 5rem - 1.6rem);
     }
 </style>