Ren??

src/assets/images/ren/ren.json

@@ -0,0 +1,832 @@
+[
+ {
+  "name": "汗",
+  "left": 287,
+  "top": 425,
+  "width": 12,
+  "height": 14,
+  "visible": 1,
+  "layer_id": 2961,
+  "group_layer_id": 2931
+ },
+ {
+  "name": "追真剣",
+  "left": 234,
+  "top": 383,
+  "width": 76,
+  "height": 27,
+  "visible": 1,
+  "layer_id": 3022,
+  "group_layer_id": 2923
+ },
+ {
+  "name": "笑１",
+  "left": 232,
+  "top": 380,
+  "width": 78,
+  "height": 29,
+  "visible": 1,
+  "layer_id": 2842,
+  "group_layer_id": 2923
+ },
+ {
+  "name": "笑２",
+  "left": 235,
+  "top": 385,
+  "width": 76,
+  "height": 32,
+  "visible": 1,
+  "layer_id": 2845,
+  "group_layer_id": 2923
+ },
+ {
+  "name": "怒１",
+  "left": 239,
+  "top": 382,
+  "width": 63,
+  "height": 28,
+  "visible": 1,
+  "layer_id": 2848,
+  "group_layer_id": 2923
+ },
+ {
+  "name": "怒２",
+  "left": 240,
+  "top": 382,
+  "width": 60,
+  "height": 26,
+  "visible": 1,
+  "layer_id": 2864,
+  "group_layer_id": 2923
+ },
+ {
+  "name": "悲１",
+  "left": 237,
+  "top": 386,
+  "width": 70,
+  "height": 28,
+  "visible": 1,
+  "layer_id": 2855,
+  "group_layer_id": 2923
+ },
+ {
+  "name": "悲２",
+  "left": 238,
+  "top": 391,
+  "width": 66,
+  "height": 28,
+  "visible": 1,
+  "layer_id": 2859,
+  "group_layer_id": 2923
+ },
+ {
+  "name": "泣１",
+  "left": 243,
+  "top": 388,
+  "width": 58,
+  "height": 30,
+  "visible": 1,
+  "layer_id": 2865,
+  "group_layer_id": 2923
+ },
+ {
+  "name": "泣２",
+  "left": 240,
+  "top": 386,
+  "width": 65,
+  "height": 31,
+  "visible": 1,
+  "layer_id": 2870,
+  "group_layer_id": 2923
+ },
+ {
+  "name": "驚１",
+  "left": 232,
+  "top": 379,
+  "width": 78,
+  "height": 31,
+  "visible": 1,
+  "layer_id": 2877,
+  "group_layer_id": 2923
+ },
+ {
+  "name": "驚２",
+  "left": 232,
+  "top": 379,
+  "width": 78,
+  "height": 33,
+  "visible": 1,
+  "layer_id": 2882,
+  "group_layer_id": 2923
+ },
+ {
+  "name": "照１",
+  "left": 234,
+  "top": 382,
+  "width": 77,
+  "height": 31,
+  "visible": 1,
+  "layer_id": 2887,
+  "group_layer_id": 2923
+ },
+ {
+  "name": "照２",
+  "left": 239,
+  "top": 385,
+  "width": 70,
+  "height": 31,
+  "visible": 1,
+  "layer_id": 2893,
+  "group_layer_id": 2923
+ },
+ {
+  "name": "えっへん",
+  "left": 235,
+  "top": 384,
+  "width": 72,
+  "height": 25,
+  "visible": 1,
+  "layer_id": 2899,
+  "group_layer_id": 2923
+ },
+ {
+  "name": "ギャグ笑",
+  "left": 234,
+  "top": 383,
+  "width": 76,
+  "height": 33,
+  "visible": 1,
+  "layer_id": 2905,
+  "group_layer_id": 2923
+ },
+ {
+  "name": "ギャグ怒",
+  "left": 239,
+  "top": 384,
+  "width": 61,
+  "height": 29,
+  "visible": 1,
+  "layer_id": 2910,
+  "group_layer_id": 2923
+ },
+ {
+  "name": "ギャグ泣",
+  "left": 239,
+  "top": 389,
+  "width": 63,
+  "height": 26,
+  "visible": 1,
+  "layer_id": 2915,
+  "group_layer_id": 2923
+ },
+ {
+  "name": "ギャグ驚",
+  "left": 235,
+  "top": 383,
+  "width": 66,
+  "height": 23,
+  "visible": 1,
+  "layer_id": 2918,
+  "group_layer_id": 2923
+ },
+ {
+  "name": "追真剣",
+  "left": 238,
+  "top": 392,
+  "width": 78,
+  "height": 41,
+  "visible": 0,
+  "layer_id": 3020,
+  "group_layer_id": 2925
+ },
+ {
+  "name": "笑１",
+  "left": 238,
+  "top": 390,
+  "width": 78,
+  "height": 43,
+  "visible": 0,
+  "layer_id": 2843,
+  "group_layer_id": 2925
+ },
+ {
+  "name": "笑２",
+  "left": 244,
+  "top": 395,
+  "width": 69,
+  "height": 37,
+  "visible": 0,
+  "layer_id": 2846,
+  "group_layer_id": 2925
+ },
+ {
+  "name": "怒１",
+  "left": 238,
+  "top": 391,
+  "width": 78,
+  "height": 42,
+  "visible": 0,
+  "layer_id": 2850,
+  "group_layer_id": 2925
+ },
+ {
+  "name": "怒２",
+  "left": 238,
+  "top": 391,
+  "width": 78,
+  "height": 42,
+  "visible": 0,
+  "layer_id": 2853,
+  "group_layer_id": 2925
+ },
+ {
+  "name": "悲１",
+  "left": 238,
+  "top": 392,
+  "width": 78,
+  "height": 41,
+  "visible": 0,
+  "layer_id": 2856,
+  "group_layer_id": 2925
+ },
+ {
+  "name": "悲２",
+  "left": 240,
+  "top": 396,
+  "width": 75,
+  "height": 37,
+  "visible": 0,
+  "layer_id": 2861,
+  "group_layer_id": 2925
+ },
+ {
+  "name": "泣１",
+  "left": 243,
+  "top": 396,
+  "width": 71,
+  "height": 37,
+  "visible": 1,
+  "layer_id": 3025,
+  "group_layer_id": 2925
+ },
+ {
+  "name": "泣２",
+  "left": 238,
+  "top": 394,
+  "width": 78,
+  "height": 60,
+  "visible": 0,
+  "layer_id": 3024,
+  "group_layer_id": 2925
+ },
+ {
+  "name": "驚１",
+  "left": 238,
+  "top": 390,
+  "width": 78,
+  "height": 43,
+  "visible": 0,
+  "layer_id": 2880,
+  "group_layer_id": 2925
+ },
+ {
+  "name": "驚２",
+  "left": 238,
+  "top": 390,
+  "width": 78,
+  "height": 43,
+  "visible": 0,
+  "layer_id": 2885,
+  "group_layer_id": 2925
+ },
+ {
+  "name": "照１",
+  "left": 238,
+  "top": 392,
+  "width": 78,
+  "height": 41,
+  "visible": 0,
+  "layer_id": 2891,
+  "group_layer_id": 2925
+ },
+ {
+  "name": "照２",
+  "left": 244,
+  "top": 395,
+  "width": 69,
+  "height": 37,
+  "visible": 0,
+  "layer_id": 2896,
+  "group_layer_id": 2925
+ },
+ {
+  "name": "えっへん",
+  "left": 244,
+  "top": 396,
+  "width": 68,
+  "height": 38,
+  "visible": 0,
+  "layer_id": 2902,
+  "group_layer_id": 2925
+ },
+ {
+  "name": "ギャグ笑",
+  "left": 244,
+  "top": 395,
+  "width": 69,
+  "height": 37,
+  "visible": 0,
+  "layer_id": 2908,
+  "group_layer_id": 2925
+ },
+ {
+  "name": "ギャグ怒",
+  "left": 244,
+  "top": 401,
+  "width": 66,
+  "height": 33,
+  "visible": 0,
+  "layer_id": 2913,
+  "group_layer_id": 2925
+ },
+ {
+  "name": "ギャグ泣",
+  "left": 244,
+  "top": 405,
+  "width": 66,
+  "height": 47,
+  "visible": 0,
+  "layer_id": 2916,
+  "group_layer_id": 2925
+ },
+ {
+  "name": "ギャグ驚",
+  "left": 248,
+  "top": 395,
+  "width": 57,
+  "height": 37,
+  "visible": 0,
+  "layer_id": 2920,
+  "group_layer_id": 2925
+ },
+ {
+  "name": "追開け",
+  "left": 270,
+  "top": 430,
+  "width": 19,
+  "height": 16,
+  "visible": 1,
+  "layer_id": 2980,
+  "group_layer_id": 2927
+ },
+ {
+  "name": "追閉じ",
+  "left": 271,
+  "top": 430,
+  "width": 18,
+  "height": 14,
+  "visible": 0,
+  "layer_id": 2969,
+  "group_layer_id": 2927
+ },
+ {
+  "name": "追真剣",
+  "left": 273,
+  "top": 433,
+  "width": 12,
+  "height": 13,
+  "visible": 0,
+  "layer_id": 3023,
+  "group_layer_id": 2927
+ },
+ {
+  "name": "笑１",
+  "left": 269,
+  "top": 429,
+  "width": 21,
+  "height": 18,
+  "visible": 0,
+  "layer_id": 2844,
+  "group_layer_id": 2927
+ },
+ {
+  "name": "笑２",
+  "left": 268,
+  "top": 428,
+  "width": 24,
+  "height": 22,
+  "visible": 0,
+  "layer_id": 2847,
+  "group_layer_id": 2927
+ },
+ {
+  "name": "怒１",
+  "left": 272,
+  "top": 433,
+  "width": 15,
+  "height": 12,
+  "visible": 0,
+  "layer_id": 2851,
+  "group_layer_id": 2927
+ },
+ {
+  "name": "怒２",
+  "left": 268,
+  "top": 428,
+  "width": 25,
+  "height": 23,
+  "visible": 0,
+  "layer_id": 2854,
+  "group_layer_id": 2927
+ },
+ {
+  "name": "悲１",
+  "left": 272,
+  "top": 434,
+  "width": 14,
+  "height": 11,
+  "visible": 0,
+  "layer_id": 2857,
+  "group_layer_id": 2927
+ },
+ {
+  "name": "悲２",
+  "left": 272,
+  "top": 435,
+  "width": 15,
+  "height": 12,
+  "visible": 0,
+  "layer_id": 2862,
+  "group_layer_id": 2927
+ },
+ {
+  "name": "泣１",
+  "left": 270,
+  "top": 431,
+  "width": 21,
+  "height": 17,
+  "visible": 0,
+  "layer_id": 2869,
+  "group_layer_id": 2927
+ },
+ {
+  "name": "泣２",
+  "left": 270,
+  "top": 433,
+  "width": 22,
+  "height": 13,
+  "visible": 0,
+  "layer_id": 2876,
+  "group_layer_id": 2927
+ },
+ {
+  "name": "驚１",
+  "left": 272,
+  "top": 432,
+  "width": 14,
+  "height": 16,
+  "visible": 0,
+  "layer_id": 2881,
+  "group_layer_id": 2927
+ },
+ {
+  "name": "驚２",
+  "left": 268,
+  "top": 427,
+  "width": 26,
+  "height": 25,
+  "visible": 0,
+  "layer_id": 2886,
+  "group_layer_id": 2927
+ },
+ {
+  "name": "照１",
+  "left": 269,
+  "top": 431,
+  "width": 20,
+  "height": 15,
+  "visible": 0,
+  "layer_id": 2892,
+  "group_layer_id": 2927
+ },
+ {
+  "name": "照２",
+  "left": 268,
+  "top": 430,
+  "width": 23,
+  "height": 19,
+  "visible": 0,
+  "layer_id": 2897,
+  "group_layer_id": 2927
+ },
+ {
+  "name": "えっへん",
+  "left": 269,
+  "top": 429,
+  "width": 22,
+  "height": 20,
+  "visible": 0,
+  "layer_id": 2903,
+  "group_layer_id": 2927
+ },
+ {
+  "name": "ギャグ笑",
+  "left": 267,
+  "top": 427,
+  "width": 26,
+  "height": 24,
+  "visible": 0,
+  "layer_id": 2909,
+  "group_layer_id": 2927
+ },
+ {
+  "name": "ギャグ怒",
+  "left": 270,
+  "top": 430,
+  "width": 20,
+  "height": 16,
+  "visible": 0,
+  "layer_id": 2914,
+  "group_layer_id": 2927
+ },
+ {
+  "name": "ギャグ泣",
+  "left": 270,
+  "top": 434,
+  "width": 19,
+  "height": 11,
+  "visible": 0,
+  "layer_id": 2917,
+  "group_layer_id": 2927
+ },
+ {
+  "name": "ギャグ驚",
+  "left": 267,
+  "top": 427,
+  "width": 25,
+  "height": 24,
+  "visible": 0,
+  "layer_id": 2921,
+  "group_layer_id": 2927
+ },
+ {
+  "name": "G頬",
+  "left": 249,
+  "top": 415,
+  "width": 59,
+  "height": 28,
+  "visible": 0,
+  "layer_id": 813,
+  "group_layer_id": 2314
+ },
+ {
+  "name": "頬１",
+  "left": 246,
+  "top": 410,
+  "width": 65,
+  "height": 35,
+  "visible": 0,
+  "layer_id": 2369,
+  "group_layer_id": 2314
+ },
+ {
+  "name": "頬２",
+  "left": 245,
+  "top": 410,
+  "width": 66,
+  "height": 35,
+  "visible": 0,
+  "layer_id": 2364,
+  "group_layer_id": 2314
+ },
+ {
+  "name": "頬３",
+  "left": 245,
+  "top": 408,
+  "width": 66,
+  "height": 38,
+  "visible": 0,
+  "layer_id": 2360,
+  "group_layer_id": 2314
+ },
+ {
+  "name": "頬４",
+  "left": 242,
+  "top": 406,
+  "width": 69,
+  "height": 44,
+  "visible": 1,
+  "layer_id": 2356,
+  "group_layer_id": 2314
+ },
+ {
+  "name": "頬５",
+  "left": 245,
+  "top": 410,
+  "width": 66,
+  "height": 36,
+  "visible": 0,
+  "layer_id": 2352,
+  "group_layer_id": 2314
+ },
+ {
+  "name": "斜め１",
+  "left": 148,
+  "top": 323,
+  "width": 309,
+  "height": 600,
+  "visible": 1,
+  "layer_id": 2346,
+  "group_layer_id": 2086
+ },
+ {
+  "name": "斜め２",
+  "left": 148,
+  "top": 323,
+  "width": 309,
+  "height": 600,
+  "visible": 0,
+  "layer_id": 2345,
+  "group_layer_id": 2086
+ },
+ {
+  "name": "斜め１",
+  "left": 147,
+  "top": 323,
+  "width": 313,
+  "height": 600,
+  "visible": 1,
+  "layer_id": 2934,
+  "group_layer_id": 2090
+ },
+ {
+  "name": "斜め２",
+  "left": 147,
+  "top": 323,
+  "width": 313,
+  "height": 600,
+  "visible": 1,
+  "layer_id": 2933,
+  "group_layer_id": 2090
+ },
+ {
+  "name": "斜め１",
+  "left": 137,
+  "top": 323,
+  "width": 367,
+  "height": 602,
+  "visible": 1,
+  "layer_id": 2340,
+  "group_layer_id": 2094
+ },
+ {
+  "name": "斜め２",
+  "left": 137,
+  "top": 323,
+  "width": 367,
+  "height": 602,
+  "visible": 1,
+  "layer_id": 2339,
+  "group_layer_id": 2094
+ },
+ {
+  "name": "斜め１",
+  "left": 148,
+  "top": 323,
+  "width": 294,
+  "height": 599,
+  "visible": 0,
+  "layer_id": 2338,
+  "group_layer_id": 2098
+ },
+ {
+  "name": "斜め２",
+  "left": 148,
+  "top": 323,
+  "width": 290,
+  "height": 599,
+  "visible": 1,
+  "layer_id": 2337,
+  "group_layer_id": 2098
+ },
+ {
+  "name": "斜め１",
+  "left": 149,
+  "top": 323,
+  "width": 293,
+  "height": 593,
+  "visible": 1,
+  "layer_id": 2335,
+  "group_layer_id": 2103
+ },
+ {
+  "name": "斜め２",
+  "left": 149,
+  "top": 323,
+  "width": 242,
+  "height": 593,
+  "visible": 0,
+  "layer_id": 2336,
+  "group_layer_id": 2103
+ },
+ {
+  "name": "汗",
+  "left": 0,
+  "top": 0,
+  "width": 0,
+  "height": 0,
+  "visible": 0,
+  "layer_id": 2931,
+  "group_layer_id": 974
+ },
+ {
+  "name": "眉",
+  "left": 0,
+  "top": 0,
+  "width": 0,
+  "height": 0,
+  "visible": 0,
+  "layer_id": 2923,
+  "group_layer_id": 974
+ },
+ {
+  "name": "目",
+  "left": 0,
+  "top": 0,
+  "width": 0,
+  "height": 0,
+  "visible": 1,
+  "layer_id": 2925,
+  "group_layer_id": 974
+ },
+ {
+  "name": "口",
+  "left": 0,
+  "top": 0,
+  "width": 0,
+  "height": 0,
+  "visible": 0,
+  "layer_id": 2927,
+  "group_layer_id": 974
+ },
+ {
+  "name": "頬",
+  "left": 0,
+  "top": 0,
+  "width": 0,
+  "height": 0,
+  "visible": 0,
+  "layer_id": 2314,
+  "group_layer_id": 975
+ },
+ {
+  "name": "喫茶店服",
+  "left": 0,
+  "top": 0,
+  "width": 0,
+  "height": 0,
+  "visible": 0,
+  "layer_id": 2086,
+  "group_layer_id": 975
+ },
+ {
+  "name": "パジャマ",
+  "left": 0,
+  "top": 0,
+  "width": 0,
+  "height": 0,
+  "visible": 0,
+  "layer_id": 2090,
+  "group_layer_id": 975
+ },
+ {
+  "name": "私服２",
+  "left": 0,
+  "top": 0,
+  "width": 0,
+  "height": 0,
+  "visible": 0,
+  "layer_id": 2094,
+  "group_layer_id": 975
+ },
+ {
+  "name": "私服１",
+  "left": 0,
+  "top": 0,
+  "width": 0,
+  "height": 0,
+  "visible": 1,
+  "layer_id": 2098,
+  "group_layer_id": 975
+ },
+ {
+  "name": "裸",
+  "left": 0,
+  "top": 0,
+  "width": 0,
+  "height": 0,
+  "visible": 0,
+  "layer_id": 2103,
+  "group_layer_id": 975
+ }
+]

src/components/KUNGalgameSettingPanel.vue

@@ -1,12 +1,157 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import loliData from '@/assets/images/ren/ren.json'
+import { onMounted } from 'vue'
+
+/* 随机数 */
+function getRandomNum(number1: number, number2: number) {
+  return Math.floor(Math.random() * number2) + number1
+}
+/* 随机汗水 */
+const randomSweat = getRandomNum(0, 1)
+/* 随机眉毛 */
+const randomBrow = getRandomNum(1, 18)
+/* 随机眼睛 */
+const randomEye = getRandomNum(19, 36)
+/* 随机嘴巴 */
+const randomMouth = getRandomNum(37, 56)
+/* 随机腮红 */
+const randomFace = getRandomNum(57, 62)
+/* 随机衣服 */
+const randomSkirt = getRandomNum(63, 72)
+// /* 衣服1 */
+// const randomSkirt1 = getRandomNum(63, 64)
+// /* 衣服2 */
+// const randomSkirt2 = getRandomNum(65, 66)
+// /* 衣服3 */
+// const randomSkirt3 = getRandomNum(67, 68)
+// /* 衣服4 */
+// const randomSkirt4 = getRandomNum(69, 70)
+// /* 衣服5 */
+// const randomSkirt5 = getRandomNum(71, 72)
+
+interface Loli {
+  group_layer_id: number
+  height: number
+  layer_id: number
+  left: number
+  name: string
+  top: number
+  visible: number
+  width: number
+}
+
+let loliObj: Loli = {
+  group_layer_id: 0,
+  height: 0,
+  layer_id: 0,
+  left: 0,
+  name: '',
+  top: 0,
+  visible: 0,
+  width: 0,
+}
+
+const loli = {
+  lass: loliData[randomSkirt],
+  eye: loliData[randomEye],
+  brow: loliData[randomBrow],
+  mouth: loliData[randomBrow],
+  face: loliData[randomFace],
+}
+
+// 看板娘的图片文件路径
+// const loliBody = require('`@/assets/images/ren/${loli.lass.layer_id}.png`')
+// const loliEye = require(`@/assets/images/ren/${loli.eye.group_layer_id}.png`)
+// const loliBrow = require(`@/assets/images/ren/${loli.brow.layer_id}.png`)
+// const loliMouth = require(`@/assets/images/ren/${loli.mouth.layer_id}.png`)
+// const loliFace = require(`@/assets/images/ren/${loli.face.layer_id}.png`)
+
+onMounted(() => {
+  // 看板娘的图片页面定位
+
+  // 身体定位
+  const loliBodyLeft = loli.lass.left + 'px'
+  const loliBodyTop = loli.lass.top + 'px'
+
+  console.log(loliBodyLeft)
+
+  // 眼睛定位
+  const loliEyeLeft = loli.eye.left + 'px'
+  const loliEyeTop = loli.eye.top + 'px'
+
+  // 眉毛定位
+  const loliBrowLeft = loli.brow.left + 'px'
+  const loliBrowTop = loli.brow.top + 'px'
+
+  // 嘴巴定位
+  const loliMouthLeft = loli.mouth.left + 'px'
+  const loliMouthTop = loli.mouth.top + 'px'
+
+  // 腮红定位
+  const loliFaceLeft = loli.face.left + 'px'
+  const loliFaceTop = loli.face.top + 'px'
+})
+</script>
 
 <template>
-  <div class="root">设置面板</div>
+  <div class="root">
+    <div class="title">设置面板</div>
+    <div class="mode">白天 / 黑夜切换</div>
+    <div class="main">主页页面宽度设置</div>
+    <div class="background">论坛背景设置</div>
+    <div class="reset">恢复默认设置</div>
+    <!-- 看板娘 -->
+    <div class="container">
+      <!-- 身体 -->
+      <img class="lass" :src="loliBody" alt="ren" />
+      <img class="eye" :src="loliEye" alt="ren" />
+      <img class="brow" :src="loliBrow" alt="ren" />
+      <img class="mouth" :src="loliMouth" alt="ren" />
+      <img class="face" :src="loliFace" alt="ren" />
+    </div>
+  </div>
 </template>
 
 <style lang="less" scoped>
 .root {
+  width: 300px;
+  right: 0;
   position: absolute;
   background-color: aqua;
+  z-index: 1007;
+  overflow: hidden;
 }
+.container {
+  width: 500px;
+  height: 700px;
+  margin: auto;
+  position: relative;
+  left: -148px;
+  top: -220px;
+}
+/* .lass {
+  position: absolute;
+  left: v-bind(loliBodyLeft);
+  top: v-bind(loliBodyTop);
+}
+.eye {
+  position: absolute;
+  left: v-bind(loliEyeLeft);
+  top: v-bind(loliEyeTop);
+}
+.brow {
+  position: absolute;
+  left: v-bind(loliBrowLeft);
+  top: v-bind(loliBrowTop);
+}
+.mouth {
+  position: absolute;
+  left: v-bind(loliMouthLeft);
+  top: v-bind(loliMouthTop);
+}
+.face {
+  position: absolute;
+  left: v-bind(loliFaceLeft);
+  top: v-bind(loliFaceTop);
+} */
 </style>