diff --git a/pages/.DS_Store b/pages/.DS_Store
deleted file mode 100644
index c5c001b..0000000
Binary files a/pages/.DS_Store and /dev/null differ
diff --git a/pages/index/.DS_Store b/pages/index/.DS_Store
deleted file mode 100644
index 5008ddf..0000000
Binary files a/pages/index/.DS_Store and /dev/null differ
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 670c616..ece85f2 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -2,16 +2,11 @@
 	<view>
 		<!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->
 		<!-- // @touchstart="handleCanvasTouch" -->
-		<canvas
-			  @touchstart="handleTouchStart"
-			       @touchmove="handleTouchMove"
-			       @touchend="handleTouchEnd"
-						  :style="{
+		<canvas @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd" :style="{
 						         width: 1000 + 'px',
 						         height: 800 + 'px',
 						         transform: `translate(${offsetX}px, ${offsetY}px) scale(${scale})`
-						       }"
-		 canvas-id="canvas" id="canvas" ></canvas>
+						       }" canvas-id="canvas" id="canvas"></canvas>
 		<!-- 添加一个按钮，用于触发绘图 -->
 		<!-- <button @click="handleDraw">点击绘制圆形</button> -->
 	</view>
@@ -23,1979 +18,1997 @@
 		onMounted,
 		getCurrentInstance
 	} from 'vue'
-	import {  onReady } from '@dcloudio/uni-app'
-
-	const canvasWidth = ref(375) // 动态设置Canvas宽度
-	const canvasHeight = ref(400) // 动态设置Canvas高度
+	import {
+		onReady
+	} from '@dcloudio/uni-app'
+	// import {  useRafFn } from "./utils.js"
+	const canvasWidth = ref() // 动态设置Canvas宽度
+	const canvasHeight = ref() // 动态设置Canvas高度
 	const instance = getCurrentInstance()
 	const scale = ref(1)
 	const offsetX = ref(0)
 	const offsetY = ref(0)
 	const lastDistance = ref(-1)
+	
 	const startX = ref(0)
 	const startY = ref(0)
 	const isDragging = ref(false)
-	const imgUrl = ref('https://assets.sx25.troyrc.com/sx25/images/events/XBDT.jpg'); 
-	const polygonList = [
-    {
-      "areacode": "ksmj71jukqf7",
-      "areaname": "B2区",
-      "polygon": [
-        348,
-        193,
-        348,
-        216,
-        348,
-        240,
-        348,
-        263,
-        363,
-        263,
-        377,
-        263,
-        392,
-        263,
-        392,
-        240,
-        392,
-        216,
-        392,
-        193,
-        377,
-        193,
-        363,
-        193,
-        348,
-        193
-      ],
-      "row_size": 20,
-      "col_size": 30,
-      "stage": "2",
-      "amount": 0,
-      "hint": "B2区"
-    },
-    {
-      "areacode": "3ala2e74fet0",
-      "areaname": "A2区",
-      "polygon": [
-        488,
-        251,
-        473,
-        262,
-        453,
-        281,
-        455,
-        290,
-        494,
-        290,
-        518,
-        290,
-        542,
-        290,
-        542,
-        273,
-        542,
-        257,
-        536,
-        205,
-        521,
-        207,
-        494,
-        240,
-        488,
-        251
-      ],
-      "row_size": 25,
-      "col_size": 50,
-      "stage": "2",
-      "amount": 286,
-      "hint": "A2区"
-    },
-    {
-      "areacode": "h4pff5jukqf9",
-      "areaname": "N3区",
-      "polygon": [
-        527,
-        96,
-        519,
-        107,
-        536,
-        140,
-        564,
-        172,
-        596,
-        182,
-        610,
-        176,
-        611,
-        166,
-        594,
-        149,
-        581,
-        138,
-        583,
-        142,
-        567,
-        119,
-        560,
-        114,
-        527,
-        96
-      ],
-      "row_size": 20,
-      "col_size": 35,
-      "stage": "2",
-      "amount": 0,
-      "hint": "N3区"
-    },
-    {
-      "areacode": "8nbhrh2gt604",
-      "areaname": "H1区",
-      "polygon": [
-        348,
-        144,
-        348,
-        152,
-        348,
-        162,
-        348,
-        170,
-        361,
-        170,
-        374,
-        170,
-        388,
-        169,
-        387,
-        162,
-        387,
-        152,
-        387,
-        144,
-        374,
-        144,
-        361,
-        144,
-        348,
-        144
-      ],
-      "row_size": 20,
-      "col_size": 30,
-      "stage": "2",
-      "amount": 0,
-      "hint": "H1区"
-    },
-    {
-      "areacode": "0kc0kw2gt605",
-      "areaname": "N20区",
-      "polygon": [
-        582,
-        341,
-        582,
-        361,
-        582,
-        381,
-        602,
-        380,
-        600,
-        400,
-        614,
-        401,
-        620,
-        401,
-        622,
-        366,
-        619,
-        360,
-        621,
-        341,
-        614,
-        341,
-        597,
-        341,
-        582,
-        341
-      ],
-      "row_size": 20,
-      "col_size": 30,
-      "stage": "2",
-      "amount": 0,
-      "hint": "N20区"
-    },
-    {
-      "areacode": "xrc8rwej0jkc",
-      "areaname": "G区",
-      "polygon": [
-        113,
-        371,
-        113,
-        397,
-        113,
-        424,
-        113,
-        450,
-        118,
-        450,
-        124,
-        450,
-        129,
-        450,
-        129,
-        424,
-        129,
-        397,
-        129,
-        371,
-        124,
-        371,
-        118,
-        371,
-        113,
-        371
-      ],
-      "row_size": 10,
-      "col_size": 37,
-      "stage": "2",
-      "amount": 0,
-      "hint": "G区"
-    },
-    {
-      "areacode": "bjhut82gt607",
-      "areaname": "N11区",
-      "polygon": [
-        58,
-        323,
-        58,
-        345,
-        58,
-        367,
-        58,
-        389,
-        71,
-        389,
-        83,
-        389,
-        96,
-        389,
-        96,
-        367,
-        96,
-        345,
-        96,
-        323,
-        83,
-        323,
-        71,
-        323,
-        58,
-        323
-      ],
-      "row_size": 16,
-      "col_size": 26,
-      "stage": "2",
-      "amount": 0,
-      "hint": "N11区"
-    },
-    {
-      "areacode": "xrwmq3sa807n",
-      "areaname": "L区",
-      "polygon": [
-        541,
-        196,
-        554,
-        223,
-        553,
-        252,
-        554,
-        282,
-        555,
-        285,
-        564,
-        285,
-        568,
-        284,
-        567,
-        253,
-        568,
-        222,
-        559,
-        191,
-        564,
-        188,
-        555,
-        188,
-        541,
-        196
-      ],
-      "row_size": 15,
-      "col_size": 50,
-      "stage": "2",
-      "amount": 0,
-      "hint": "L区"
-    },
-    {
-      "areacode": "aekymdjukqf6",
-      "areaname": "N2区",
-      "polygon": [
-        577,
-        204,
-        579,
-        216,
-        579,
-        240,
-        602,
-        252,
-        602,
-        267,
-        609,
-        267,
-        618,
-        267,
-        621,
-        240,
-        615,
-        221,
-        611,
-        191,
-        609,
-        189,
-        595,
-        194,
-        577,
-        204
-      ],
-      "row_size": 20,
-      "col_size": 30,
-      "stage": "2",
-      "amount": 0,
-      "hint": "N2区"
-    },
-    {
-      "areacode": "g1aynfej0jku",
-      "areaname": "E区",
-      "polygon": [
-        114,
-        215,
-        114,
-        236,
-        114,
-        257,
-        114,
-        278,
-        119,
-        278,
-        124,
-        278,
-        129,
-        278,
-        129,
-        257,
-        129,
-        236,
-        129,
-        215,
-        124,
-        215,
-        119,
-        215,
-        114,
-        215
-      ],
-      "row_size": 10,
-      "col_size": 34,
-      "stage": "2",
-      "amount": 0,
-      "hint": "E区"
-    },
-    {
-      "areacode": "66g4bm74fetb",
-      "areaname": "N14区",
-      "polygon": [
-        155,
-        529,
-        149,
-        538,
-        148,
-        542,
-        142,
-        551,
-        170,
-        563,
-        192,
-        563,
-        213,
-        563,
-        213,
-        550,
-        213,
-        538,
-        213,
-        525,
-        192,
-        525,
-        170,
-        525,
-        155,
-        529
-      ],
-      "row_size": 20,
-      "col_size": 30,
-      "stage": "2",
-      "amount": 0,
-      "hint": "N14区"
-    },
-    {
-      "areacode": "31q0udej0jkx",
-      "areaname": "J区",
-      "polygon": [
-        393,
-        137,
-        393,
-        152,
-        393,
-        168,
-        393,
-        183,
-        414,
-        183,
-        434,
-        183,
-        455,
-        183,
-        455,
-        168,
-        455,
-        152,
-        455,
-        137,
-        434,
-        137,
-        414,
-        137,
-        393,
-        137
-      ],
-      "row_size": 20,
-      "col_size": 30,
-      "stage": "2",
-      "amount": 0,
-      "hint": "J区"
-    },
-    {
-      "areacode": "tsew3ejukqfb",
-      "areaname": "N17区",
-      "polygon": [
-        445,
-        532,
-        445,
-        544,
-        445,
-        555,
-        445,
-        567,
-        468,
-        567,
-        492,
-        567,
-        515,
-        560,
-        515,
-        555,
-        515,
-        544,
-        503,
-        527,
-        492,
-        532,
-        468,
-        532,
-        445,
-        532
-      ],
-      "row_size": 20,
-      "col_size": 30,
-      "stage": "2",
-      "amount": 0,
-      "hint": "N17区"
-    },
-    {
-      "areacode": "t4wshyjukqfc",
-      "areaname": "G区",
-      "polygon": [
-        224,
-        139,
-        224,
-        153,
-        224,
-        169,
-        224,
-        183,
-        245,
-        183,
-        265,
-        183,
-        286,
-        183,
-        286,
-        169,
-        286,
-        153,
-        286,
-        139,
-        265,
-        139,
-        245,
-        139,
-        224,
-        139
-      ],
-      "row_size": 20,
-      "col_size": 30,
-      "stage": "2",
-      "amount": 0,
-      "hint": "G区"
-    },
-    {
-      "areacode": "bp2jtyjukqfd",
-      "areaname": "N10区",
-      "polygon": [
-        60,
-        256,
-        60,
-        276,
-        60,
-        297,
-        60,
-        317,
-        73,
-        317,
-        85,
-        317,
-        98,
-        317,
-        98,
-        297,
-        98,
-        276,
-        98,
-        256,
-        85,
-        256,
-        73,
-        256,
-        60,
-        256
-      ],
-      "row_size": 16,
-      "col_size": 26,
-      "stage": "2",
-      "amount": 0,
-      "hint": "N10区"
-    },
-    {
-      "areacode": "pee7rxjukqfe",
-      "areaname": "N9区",
-      "polygon": [
-        63,
-        181,
-        63,
-        203,
-        63,
-        224,
-        63,
-        246,
-        76,
-        246,
-        89,
-        246,
-        102,
-        246,
-        102,
-        224,
-        102,
-        203,
-        102,
-        181,
-        89,
-        181,
-        76,
-        181,
-        63,
-        181
-      ],
-      "row_size": 16,
-      "col_size": 31,
-      "stage": "2",
-      "amount": 0,
-      "hint": "N9区"
-    },
-    {
-      "areacode": "ga8mwdsa8081",
-      "areaname": "N7区",
-      "polygon": [
-        159,
-        87,
-        159,
-        100,
-        159,
-        113,
-        159,
-        126,
-        185,
-        126,
-        212,
-        126,
-        238,
-        126,
-        238,
-        113,
-        238,
-        100,
-        238,
-        87,
-        212,
-        87,
-        185,
-        87,
-        159,
-        87
-      ],
-      "row_size": 20,
-      "col_size": 30,
-      "stage": "2",
-      "amount": 0,
-      "hint": "N7区"
-    },
-    {
-      "areacode": "0trbqk2gt60a",
-      "areaname": "M区",
-      "polygon": [
-        552,
-        283,
-        552,
-        309,
-        552,
-        335,
-        552,
-        361,
-        557,
-        361,
-        564,
-        361,
-        569,
-        361,
-        569,
-        335,
-        569,
-        309,
-        569,
-        283,
-        564,
-        283,
-        557,
-        283,
-        552,
-        283
-      ],
-      "row_size": 15,
-      "col_size": 40,
-      "stage": "2",
-      "amount": 75,
-      "hint": "M区"
-    },
-    {
-      "areacode": "0yup992gt60b",
-      "areaname": "N4区",
-      "polygon": [
-        440,
-        89,
-        440,
-        101,
-        440,
-        113,
-        440,
-        125,
-        471,
-        125,
-        503,
-        125,
-        507,
-        114,
-        512,
-        105,
-        512,
-        99,
-        505,
-        95,
-        492,
-        89,
-        471,
-        89,
-        440,
-        89
-      ],
-      "row_size": 20,
-      "col_size": 30,
-      "stage": "2",
-      "amount": 0,
-      "hint": "N4区"
-    },
-    {
-      "areacode": "x4uxg3jukqcr",
-      "areaname": "Q区",
-      "polygon": [
-        223,
-        467,
-        223,
-        483,
-        223,
-        499,
-        223,
-        515,
-        257,
-        515,
-        290,
-        515,
-        324,
-        515,
-        324,
-        499,
-        324,
-        483,
-        324,
-        467,
-        290,
-        467,
-        257,
-        467,
-        223,
-        467
-      ],
-      "row_size": 20,
-      "col_size": 40,
-      "stage": "2",
-      "amount": 0,
-      "hint": "Q区"
-    },
-    {
-      "areacode": "j6l96jjukqcg",
-      "areaname": "O区",
-      "polygon": [
-        437,
-        472,
-        437,
-        486,
-        437,
-        501,
-        437,
-        515,
-        465,
-        515,
-        492,
-        515,
-        514,
-        502,
-        523,
-        499,
-        520,
-        486,
-        497,
-        463,
-        476,
-        469,
-        465,
-        472,
-        437,
-        472
-      ],
-      "row_size": 20,
-      "col_size": 44,
-      "stage": "2",
-      "amount": 0,
-      "hint": "O区"
-    },
-    {
-      "areacode": "g4r5lysa8087",
-      "areaname": "N13区",
-      "polygon": [
-        89,
-        485,
-        89,
-        499,
-        89,
-        514,
-        89,
-        528,
-        106,
-        528,
-        123,
-        528,
-        140,
-        528,
-        140,
-        514,
-        140,
-        499,
-        140,
-        485,
-        123,
-        485,
-        106,
-        485,
-        89,
-        485
-      ],
-      "row_size": 20,
-      "col_size": 36,
-      "stage": "2",
-      "amount": 0,
-      "hint": "N13区"
-    },
-    {
-      "areacode": "q6tq75ej0jl0",
-      "areaname": "N18区",
-      "polygon": [
-        528,
-        486,
-        535,
-        509,
-        535,
-        520,
-        536,
-        527,
-        552,
-        532,
-        540,
-        531,
-        551,
-        544,
-        582,
-        511,
-        595,
-        495,
-        566,
-        480,
-        566,
-        482,
-        540,
-        470,
-        528,
-        486
-      ],
-      "row_size": 20,
-      "col_size": 36,
-      "stage": "2",
-      "amount": 0,
-      "hint": "N18区"
-    },
-    {
-      "areacode": "twgl38ej0jl1",
-      "areaname": "N19区",
-      "polygon": [
-        583,
-        409,
-        583,
-        435,
-        595,
-        461,
-        589,
-        482,
-        600,
-        484,
-        605,
-        481,
-        610,
-        473,
-        611,
-        463,
-        617,
-        442,
-        619,
-        413,
-        615,
-        409,
-        599,
-        409,
-        583,
-        409
-      ],
-      "row_size": 20,
-      "col_size": 30,
-      "stage": "2",
-      "amount": 0,
-      "hint": "N19区"
-    },
-    {
-      "areacode": "mnxkfajukqcl",
-      "areaname": "D区",
-      "polygon": [
-        111,
-        290,
-        111,
-        314,
-        111,
-        339,
-        111,
-        363,
-        116,
-        363,
-        122,
-        363,
-        127,
-        363,
-        127,
-        339,
-        127,
-        314,
-        127,
-        290,
-        122,
-        290,
-        116,
-        290,
-        111,
-        290
-      ],
-      "row_size": 10,
-      "col_size": 30,
-      "stage": "2",
-      "amount": 0,
-      "hint": "D区"
-    },
-    {
-      "areacode": "5k7ubtej0jl3",
-      "areaname": "N12区",
-      "polygon": [
-        57,
-        390,
-        57,
-        419,
-        57,
-        447,
-        57,
-        476,
-        71,
-        476,
-        85,
-        476,
-        99,
-        476,
-        99,
-        447,
-        99,
-        419,
-        99,
-        390,
-        85,
-        390,
-        71,
-        390,
-        57,
-        390
-      ],
-      "row_size": 16,
-      "col_size": 30,
-      "stage": "2",
-      "amount": 0,
-      "hint": "N12区"
-    },
-    {
-      "areacode": "bt8yrj74fetj",
-      "areaname": "D4区",
-      "polygon": [
-        234,
-        412,
-        223,
-        423,
-        215,
-        440,
-        215,
-        463,
-        236,
-        463,
-        256,
-        463,
-        277,
-        463,
-        277,
-        440,
-        277,
-        419,
-        277,
-        396,
-        256,
-        396,
-        242,
-        402,
-        234,
-        412
-      ],
-      "row_size": 20,
-      "col_size": 30,
-      "stage": "2",
-      "amount": 0,
-      "hint": "D4区"
-    },
-    {
-      "areacode": "sm0jwq2gt60m",
-      "areaname": "P区",
-      "polygon": [
-        355,
-        486,
-        355,
-        501,
-        329,
-        500,
-        329,
-        515,
-        365,
-        515,
-        400,
-        515,
-        436,
-        515,
-        436,
-        500,
-        436,
-        484,
-        436,
-        469,
-        400,
-        469,
-        360,
-        469,
-        355,
-        486
-      ],
-      "row_size": 20,
-      "col_size": 40,
-      "stage": "2",
-      "amount": 0,
-      "hint": "P区"
-    },
-    {
-      "areacode": "dn5kn974fetl",
-      "areaname": "B3区",
-      "polygon": [
-        286,
-        193,
-        286,
-        216,
-        286,
-        238,
-        286,
-        261,
-        302,
-        261,
-        319,
-        261,
-        335,
-        261,
-        335,
-        238,
-        335,
-        216,
-        335,
-        193,
-        319,
-        193,
-        302,
-        193,
-        286,
-        193
-      ],
-      "row_size": 20,
-      "col_size": 30,
-      "stage": "2",
-      "amount": 0,
-      "hint": "B3区"
-    },
-    {
-      "areacode": "32lnp9jukqcs",
-      "areaname": "D3区",
-      "polygon": [
-        286,
-        398,
-        286,
-        419,
-        286,
-        441,
-        286,
-        462,
-        302,
-        462,
-        317,
-        462,
-        333,
-        462,
-        333,
-        441,
-        333,
-        419,
-        333,
-        398,
-        317,
-        398,
-        302,
-        398,
-        286,
-        398
-      ],
-      "row_size": 20,
-      "col_size": 30,
-      "stage": "2",
-      "amount": 0,
-      "hint": "D3区"
-    },
-    {
-      "areacode": "u1w8mhej0jlk",
-      "areaname": "D2区",
-      "polygon": [
-        347,
-        396,
-        347,
-        418,
-        347,
-        441,
-        347,
-        463,
-        362,
-        463,
-        376,
-        463,
-        391,
-        463,
-        391,
-        441,
-        391,
-        418,
-        391,
-        396,
-        376,
-        396,
-        362,
-        396,
-        347,
-        396
-      ],
-      "row_size": 20,
-      "col_size": 30,
-      "stage": "2",
-      "amount": 0,
-      "hint": "D2区"
-    },
-    {
-      "areacode": "p42ypdej0jla",
-      "areaname": "D1区",
-      "polygon": [
-        404,
-        397,
-        404,
-        419,
-        404,
-        440,
-        404,
-        462,
-        424,
-        462,
-        444,
-        462,
-        464,
-        462,
-        464,
-        440,
-        460,
-        435,
-        457,
-        425,
-        443,
-        411,
-        424,
-        397,
-        404,
-        397
-      ],
-      "row_size": 20,
-      "col_size": 30,
-      "stage": "2",
-      "amount": 0,
-      "hint": "D1区"
-    },
-    {
-      "areacode": "0ca4mx2gt615",
-      "areaname": "H2区",
-      "polygon": [
-        293,
-        144,
-        293,
-        153,
-        293,
-        162,
-        293,
-        171,
-        307,
-        171,
-        321,
-        171,
-        335,
-        171,
-        335,
-        162,
-        335,
-        153,
-        335,
-        144,
-        321,
-        144,
-        307,
-        144,
-        293,
-        144
-      ],
-      "row_size": 20,
-      "col_size": 30,
-      "stage": "2",
-      "amount": 0,
-      "hint": "H2区"
-    },
-    {
-      "areacode": "q4bf4074fets",
-      "areaname": "F区",
-      "polygon": [
-        163,
-        139,
-        163,
-        155,
-        163,
-        170,
-        163,
-        186,
-        181,
-        186,
-        199,
-        186,
-        217,
-        186,
-        217,
-        170,
-        217,
-        155,
-        217,
-        139,
-        199,
-        139,
-        181,
-        139,
-        163,
-        139
-      ],
-      "row_size": 20,
-      "col_size": 35,
-      "stage": "2",
-      "amount": 0,
-      "hint": "F区"
-    },
-    {
-      "areacode": "wpks2e74fett",
-      "areaname": "N8区",
-      "polygon": [
-        93,
-        121,
-        93,
-        136,
-        93,
-        149,
-        93,
-        164,
-        108,
-        164,
-        123,
-        164,
-        138,
-        164,
-        138,
-        149,
-        138,
-        136,
-        138,
-        121,
-        123,
-        121,
-        108,
-        121,
-        93,
-        121
-      ],
-      "row_size": 20,
-      "col_size": 35,
-      "stage": "2",
-      "amount": 0,
-      "hint": "N8区"
-    },
-    {
-      "areacode": "9xnc21jukqd0",
-      "areaname": "N区",
-      "polygon": [
-        552,
-        372,
-        554,
-        401,
-        553,
-        423,
-        545,
-        459,
-        555,
-        465,
-        558,
-        462,
-        562,
-        453,
-        568,
-        426,
-        569,
-        398,
-        565,
-        367,
-        564,
-        367,
-        561,
-        369,
-        552,
-        372
-      ],
-      "row_size": 15,
-      "col_size": 40,
-      "stage": "2",
-      "amount": 89,
-      "hint": "N区"
-    },
-    {
-      "areacode": "ul1nl874fetw",
-      "areaname": "R区",
-      "polygon": [
-        157,
-        469,
-        157,
-        484,
-        157,
-        497,
-        157,
-        512,
-        177,
-        512,
-        196,
-        512,
-        216,
-        512,
-        216,
-        497,
-        216,
-        484,
-        216,
-        469,
-        196,
-        469,
-        177,
-        469,
-        157,
-        469
-      ],
-      "row_size": 20,
-      "col_size": 40,
-      "stage": "2",
-      "amount": 0,
-      "hint": "R区"
-    },
-    {
-      "areacode": "8ejjq6ej0jlg",
-      "areaname": "B1区",
-      "polygon": [
-        406,
-        193,
-        406,
-        214,
-        406,
-        237,
-        406,
-        258,
-        424,
-        258,
-        442,
-        258,
-        460,
-        257,
-        461,
-        237,
-        461,
-        217,
-        461,
-        193,
-        442,
-        193,
-        424,
-        193,
-        406,
-        193
-      ],
-      "row_size": 20,
-      "col_size": 30,
-      "stage": "2",
-      "amount": 0,
-      "hint": "B1区"
-    },
-    {
-      "areacode": "kt5npejukqd3",
-      "areaname": "K区",
-      "polygon": [
-        466,
-        140,
-        466,
-        155,
-        466,
-        172,
-        466,
-        187,
-        481,
-        187,
-        494,
-        187,
-        509,
-        187,
-        509,
-        172,
-        509,
-        155,
-        509,
-        140,
-        494,
-        140,
-        481,
-        140,
-        466,
-        140
-      ],
-      "row_size": 20,
-      "col_size": 40,
-      "stage": "2",
-      "amount": 0,
-      "hint": "K区"
-    },
-    {
-      "areacode": "w1perrjukqd5",
-      "areaname": "N15区",
-      "polygon": [
-        225,
-        530,
-        225,
-        545,
-        224,
-        565,
-        247,
-        566,
-        247,
-        578,
-        290,
-        582,
-        325,
-        580,
-        326,
-        561,
-        326,
-        545,
-        326,
-        530,
-        292,
-        530,
-        259,
-        530,
-        225,
-        530
-      ],
-      "row_size": 20,
-      "col_size": 40,
-      "stage": "2",
-      "amount": 0,
-      "hint": "N15区"
-    },
-    {
-      "areacode": "c9e74k2gt61e",
-      "areaname": "C3区",
-      "polygon": [
-        134,
-        364,
-        134,
-        380,
-        134,
-        396,
-        134,
-        412,
-        160,
-        412,
-        185,
-        412,
-        211,
-        412,
-        211,
-        396,
-        211,
-        380,
-        211,
-        364,
-        185,
-        364,
-        160,
-        364,
-        134,
-        364
-      ],
-      "row_size": 24,
-      "col_size": 43,
-      "stage": "2",
-      "amount": 0,
-      "hint": "C3区"
-    },
-    {
-      "areacode": "y424tp2gt61f",
-      "areaname": "A3区",
-      "polygon": [
-        451,
-        364,
-        453,
-        373,
-        470,
-        390,
-        486,
-        399,
-        493,
-        413,
-        516,
-        414,
-        541,
-        414,
-        541,
-        398,
-        541,
-        380,
-        541,
-        364,
-        516,
-        364,
-        493,
-        364,
-        451,
-        364
-      ],
-      "row_size": 30,
-      "col_size": 60,
-      "stage": "2",
-      "amount": 0,
-      "hint": "A3区"
-    },
-    {
-      "areacode": "d2ekxysa808x",
-      "areaname": "C2区",
-      "polygon": [
-        133,
-        241,
-        133,
-        259,
-        133,
-        276,
-        133,
-        294,
-        158,
-        294,
-        185,
-        294,
-        210,
-        294,
-        210,
-        276,
-        210,
-        259,
-        210,
-        241,
-        185,
-        241,
-        158,
-        241,
-        133,
-        241
-      ],
-      "row_size": 24,
-      "col_size": 40,
-      "stage": "2",
-      "amount": 0,
-      "hint": "C2区"
-    },
-    {
-      "areacode": "x26ltu2gt61h",
-      "areaname": "C1区",
-      "polygon": [
-        134,
-        304,
-        134,
-        318,
-        134,
-        333,
-        134,
-        347,
-        165,
-        347,
-        197,
-        347,
-        228,
-        347,
-        228,
-        333,
-        228,
-        318,
-        228,
-        304,
-        197,
-        304,
-        165,
-        304,
-        134,
-        304
-      ],
-      "row_size": 24,
-      "col_size": 30,
-      "stage": "2",
-      "amount": 0,
-      "hint": "C1区"
-    },
-    {
-      "areacode": "02apw92gt618",
-      "areaname": "N1区",
-      "polygon": [
-        581,
-        276,
-        581,
-        296,
-        581,
-        316,
-        604,
-        321,
-        606,
-        335,
-        607,
-        336,
-        620,
-        335,
-        620,
-        316,
-        620,
-        296,
-        620,
-        276,
-        607,
-        276,
-        594,
-        276,
-        581,
-        276
-      ],
-      "row_size": 20,
-      "col_size": 30,
-      "stage": "2",
-      "amount": 0,
-      "hint": "N1区"
-    },
-    {
-      "areacode": "sgatj4jukqdb",
-      "areaname": "N5区",
-      "polygon": [
-        334,
-        75,
-        334,
-        92,
-        334,
-        109,
-        334,
-        126,
-        367,
-        126,
-        399,
-        126,
-        432,
-        126,
-        432,
-        109,
-        432,
-        92,
-        432,
-        75,
-        399,
-        75,
-        367,
-        75,
-        334,
-        75
-      ],
-      "row_size": 20,
-      "col_size": 35,
-      "stage": "2",
-      "amount": 0,
-      "hint": "N5区"
-    },
-    {
-      "areacode": "c4m1arjukqdc",
-      "areaname": "B4区",
-      "polygon": [
-        216,
-        193,
-        216,
-        215,
-        216,
-        239,
-        216,
-        261,
-        236,
-        261,
-        256,
-        261,
-        276,
-        261,
-        276,
-        239,
-        276,
-        215,
-        276,
-        193,
-        256,
-        193,
-        236,
-        193,
-        216,
-        193
-      ],
-      "row_size": 20,
-      "col_size": 30,
-      "stage": "2",
-      "amount": 0,
-      "hint": "B4区"
-    },
-    {
-      "areacode": "fsp4282gt61b",
-      "areaname": "N6区",
-      "polygon": [
-        246,
-        74,
-        246,
-        91,
-        246,
-        109,
-        246,
-        126,
-        273,
-        126,
-        299,
-        126,
-        326,
-        126,
-        326,
-        109,
-        326,
-        91,
-        326,
-        74,
-        299,
-        74,
-        273,
-        74,
-        246,
-        74
-      ],
-      "row_size": 20,
-      "col_size": 35,
-      "stage": "2",
-      "amount": 0,
-      "hint": "N6区"
-    },
-    {
-      "areacode": "9hw55eej0jlx",
-      "areaname": "A1区",
-      "polygon": [
-        454,
-        306,
-        454,
-        320,
-        454,
-        336,
-        454,
-        350,
-        484,
-        350,
-        513,
-        350,
-        543,
-        350,
-        543,
-        336,
-        543,
-        320,
-        543,
-        306,
-        513,
-        306,
-        484,
-        306,
-        454,
-        306
-      ],
-      "row_size": 25,
-      "col_size": 50,
-      "stage": "2",
-      "amount": 0,
-      "hint": "A1区"
-    },
-    {
-      "areacode": "cddsjlsa8097",
-      "areaname": "N16区",
-      "polygon": [
-        335,
-        534,
-        335,
-        550,
-        335,
-        565,
-        335,
-        581,
-        369,
-        581,
-        404,
-        581,
-        438,
-        581,
-        438,
-        565,
-        438,
-        550,
-        438,
-        534,
-        404,
-        534,
-        369,
-        534,
-        335,
-        534
-      ],
-      "row_size": 20,
-      "col_size": 40,
-      "stage": "2",
-      "amount": 0,
-      "hint": "N16区"
-    }
-  ]
+	const imgUrl = ref('https://assets.sx25.troyrc.com/sx25/images/events/XBDT.jpg'); // 修改为ref
+	const blocks = ref(
+	[
+	    {
+	      "areacode": "ksmj71jukqf7",
+	      "areaname": "B2区",
+	      "polygon": [
+	        348,
+	        193,
+	        348,
+	        216,
+	        348,
+	        240,
+	        348,
+	        263,
+	        363,
+	        263,
+	        377,
+	        263,
+	        392,
+	        263,
+	        392,
+	        240,
+	        392,
+	        216,
+	        392,
+	        193,
+	        377,
+	        193,
+	        363,
+	        193,
+	        348,
+	        193
+	      ],
+	      "row_size": 20,
+	      "col_size": 30,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "B2区"
+	    },
+	    {
+	      "areacode": "3ala2e74fet0",
+	      "areaname": "A2区",
+	      "polygon": [
+	        488,
+	        251,
+	        473,
+	        262,
+	        453,
+	        281,
+	        455,
+	        290,
+	        494,
+	        290,
+	        518,
+	        290,
+	        542,
+	        290,
+	        542,
+	        273,
+	        542,
+	        257,
+	        536,
+	        205,
+	        521,
+	        207,
+	        494,
+	        240,
+	        488,
+	        251
+	      ],
+	      "row_size": 25,
+	      "col_size": 50,
+	      "stage": "2",
+	      "amount": 286,
+	      "hint": "A2区"
+	    },
+	    {
+	      "areacode": "h4pff5jukqf9",
+	      "areaname": "N3区",
+	      "polygon": [
+	        527,
+	        96,
+	        519,
+	        107,
+	        536,
+	        140,
+	        564,
+	        172,
+	        596,
+	        182,
+	        610,
+	        176,
+	        611,
+	        166,
+	        594,
+	        149,
+	        581,
+	        138,
+	        583,
+	        142,
+	        567,
+	        119,
+	        560,
+	        114,
+	        527,
+	        96
+	      ],
+	      "row_size": 20,
+	      "col_size": 35,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "N3区"
+	    },
+	    {
+	      "areacode": "8nbhrh2gt604",
+	      "areaname": "H1区",
+	      "polygon": [
+	        348,
+	        144,
+	        348,
+	        152,
+	        348,
+	        162,
+	        348,
+	        170,
+	        361,
+	        170,
+	        374,
+	        170,
+	        388,
+	        169,
+	        387,
+	        162,
+	        387,
+	        152,
+	        387,
+	        144,
+	        374,
+	        144,
+	        361,
+	        144,
+	        348,
+	        144
+	      ],
+	      "row_size": 20,
+	      "col_size": 30,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "H1区"
+	    },
+	    {
+	      "areacode": "0kc0kw2gt605",
+	      "areaname": "N20区",
+	      "polygon": [
+	        582,
+	        341,
+	        582,
+	        361,
+	        582,
+	        381,
+	        602,
+	        380,
+	        600,
+	        400,
+	        614,
+	        401,
+	        620,
+	        401,
+	        622,
+	        366,
+	        619,
+	        360,
+	        621,
+	        341,
+	        614,
+	        341,
+	        597,
+	        341,
+	        582,
+	        341
+	      ],
+	      "row_size": 20,
+	      "col_size": 30,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "N20区"
+	    },
+	    {
+	      "areacode": "xrc8rwej0jkc",
+	      "areaname": "G区",
+	      "polygon": [
+	        113,
+	        371,
+	        113,
+	        397,
+	        113,
+	        424,
+	        113,
+	        450,
+	        118,
+	        450,
+	        124,
+	        450,
+	        129,
+	        450,
+	        129,
+	        424,
+	        129,
+	        397,
+	        129,
+	        371,
+	        124,
+	        371,
+	        118,
+	        371,
+	        113,
+	        371
+	      ],
+	      "row_size": 10,
+	      "col_size": 37,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "G区"
+	    },
+	    {
+	      "areacode": "bjhut82gt607",
+	      "areaname": "N11区",
+	      "polygon": [
+	        58,
+	        323,
+	        58,
+	        345,
+	        58,
+	        367,
+	        58,
+	        389,
+	        71,
+	        389,
+	        83,
+	        389,
+	        96,
+	        389,
+	        96,
+	        367,
+	        96,
+	        345,
+	        96,
+	        323,
+	        83,
+	        323,
+	        71,
+	        323,
+	        58,
+	        323
+	      ],
+	      "row_size": 16,
+	      "col_size": 26,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "N11区"
+	    },
+	    {
+	      "areacode": "xrwmq3sa807n",
+	      "areaname": "L区",
+	      "polygon": [
+	        541,
+	        196,
+	        554,
+	        223,
+	        553,
+	        252,
+	        554,
+	        282,
+	        555,
+	        285,
+	        564,
+	        285,
+	        568,
+	        284,
+	        567,
+	        253,
+	        568,
+	        222,
+	        559,
+	        191,
+	        564,
+	        188,
+	        555,
+	        188,
+	        541,
+	        196
+	      ],
+	      "row_size": 15,
+	      "col_size": 50,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "L区"
+	    },
+	    {
+	      "areacode": "aekymdjukqf6",
+	      "areaname": "N2区",
+	      "polygon": [
+	        577,
+	        204,
+	        579,
+	        216,
+	        579,
+	        240,
+	        602,
+	        252,
+	        602,
+	        267,
+	        609,
+	        267,
+	        618,
+	        267,
+	        621,
+	        240,
+	        615,
+	        221,
+	        611,
+	        191,
+	        609,
+	        189,
+	        595,
+	        194,
+	        577,
+	        204
+	      ],
+	      "row_size": 20,
+	      "col_size": 30,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "N2区"
+	    },
+	    {
+	      "areacode": "g1aynfej0jku",
+	      "areaname": "E区",
+	      "polygon": [
+	        114,
+	        215,
+	        114,
+	        236,
+	        114,
+	        257,
+	        114,
+	        278,
+	        119,
+	        278,
+	        124,
+	        278,
+	        129,
+	        278,
+	        129,
+	        257,
+	        129,
+	        236,
+	        129,
+	        215,
+	        124,
+	        215,
+	        119,
+	        215,
+	        114,
+	        215
+	      ],
+	      "row_size": 10,
+	      "col_size": 34,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "E区"
+	    },
+	    {
+	      "areacode": "66g4bm74fetb",
+	      "areaname": "N14区",
+	      "polygon": [
+	        155,
+	        529,
+	        149,
+	        538,
+	        148,
+	        542,
+	        142,
+	        551,
+	        170,
+	        563,
+	        192,
+	        563,
+	        213,
+	        563,
+	        213,
+	        550,
+	        213,
+	        538,
+	        213,
+	        525,
+	        192,
+	        525,
+	        170,
+	        525,
+	        155,
+	        529
+	      ],
+	      "row_size": 20,
+	      "col_size": 30,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "N14区"
+	    },
+	    {
+	      "areacode": "31q0udej0jkx",
+	      "areaname": "J区",
+	      "polygon": [
+	        393,
+	        137,
+	        393,
+	        152,
+	        393,
+	        168,
+	        393,
+	        183,
+	        414,
+	        183,
+	        434,
+	        183,
+	        455,
+	        183,
+	        455,
+	        168,
+	        455,
+	        152,
+	        455,
+	        137,
+	        434,
+	        137,
+	        414,
+	        137,
+	        393,
+	        137
+	      ],
+	      "row_size": 20,
+	      "col_size": 30,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "J区"
+	    },
+	    {
+	      "areacode": "tsew3ejukqfb",
+	      "areaname": "N17区",
+	      "polygon": [
+	        445,
+	        532,
+	        445,
+	        544,
+	        445,
+	        555,
+	        445,
+	        567,
+	        468,
+	        567,
+	        492,
+	        567,
+	        515,
+	        560,
+	        515,
+	        555,
+	        515,
+	        544,
+	        503,
+	        527,
+	        492,
+	        532,
+	        468,
+	        532,
+	        445,
+	        532
+	      ],
+	      "row_size": 20,
+	      "col_size": 30,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "N17区"
+	    },
+	    {
+	      "areacode": "t4wshyjukqfc",
+	      "areaname": "G区",
+	      "polygon": [
+	        224,
+	        139,
+	        224,
+	        153,
+	        224,
+	        169,
+	        224,
+	        183,
+	        245,
+	        183,
+	        265,
+	        183,
+	        286,
+	        183,
+	        286,
+	        169,
+	        286,
+	        153,
+	        286,
+	        139,
+	        265,
+	        139,
+	        245,
+	        139,
+	        224,
+	        139
+	      ],
+	      "row_size": 20,
+	      "col_size": 30,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "G区"
+	    },
+	    {
+	      "areacode": "bp2jtyjukqfd",
+	      "areaname": "N10区",
+	      "polygon": [
+	        60,
+	        256,
+	        60,
+	        276,
+	        60,
+	        297,
+	        60,
+	        317,
+	        73,
+	        317,
+	        85,
+	        317,
+	        98,
+	        317,
+	        98,
+	        297,
+	        98,
+	        276,
+	        98,
+	        256,
+	        85,
+	        256,
+	        73,
+	        256,
+	        60,
+	        256
+	      ],
+	      "row_size": 16,
+	      "col_size": 26,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "N10区"
+	    },
+	    {
+	      "areacode": "pee7rxjukqfe",
+	      "areaname": "N9区",
+	      "polygon": [
+	        63,
+	        181,
+	        63,
+	        203,
+	        63,
+	        224,
+	        63,
+	        246,
+	        76,
+	        246,
+	        89,
+	        246,
+	        102,
+	        246,
+	        102,
+	        224,
+	        102,
+	        203,
+	        102,
+	        181,
+	        89,
+	        181,
+	        76,
+	        181,
+	        63,
+	        181
+	      ],
+	      "row_size": 16,
+	      "col_size": 31,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "N9区"
+	    },
+	    {
+	      "areacode": "ga8mwdsa8081",
+	      "areaname": "N7区",
+	      "polygon": [
+	        159,
+	        87,
+	        159,
+	        100,
+	        159,
+	        113,
+	        159,
+	        126,
+	        185,
+	        126,
+	        212,
+	        126,
+	        238,
+	        126,
+	        238,
+	        113,
+	        238,
+	        100,
+	        238,
+	        87,
+	        212,
+	        87,
+	        185,
+	        87,
+	        159,
+	        87
+	      ],
+	      "row_size": 20,
+	      "col_size": 30,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "N7区"
+	    },
+	    {
+	      "areacode": "0trbqk2gt60a",
+	      "areaname": "M区",
+	      "polygon": [
+	        552,
+	        283,
+	        552,
+	        309,
+	        552,
+	        335,
+	        552,
+	        361,
+	        557,
+	        361,
+	        564,
+	        361,
+	        569,
+	        361,
+	        569,
+	        335,
+	        569,
+	        309,
+	        569,
+	        283,
+	        564,
+	        283,
+	        557,
+	        283,
+	        552,
+	        283
+	      ],
+	      "row_size": 15,
+	      "col_size": 40,
+	      "stage": "2",
+	      "amount": 75,
+	      "hint": "M区"
+	    },
+	    {
+	      "areacode": "0yup992gt60b",
+	      "areaname": "N4区",
+	      "polygon": [
+	        440,
+	        89,
+	        440,
+	        101,
+	        440,
+	        113,
+	        440,
+	        125,
+	        471,
+	        125,
+	        503,
+	        125,
+	        507,
+	        114,
+	        512,
+	        105,
+	        512,
+	        99,
+	        505,
+	        95,
+	        492,
+	        89,
+	        471,
+	        89,
+	        440,
+	        89
+	      ],
+	      "row_size": 20,
+	      "col_size": 30,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "N4区"
+	    },
+	    {
+	      "areacode": "x4uxg3jukqcr",
+	      "areaname": "Q区",
+	      "polygon": [
+	        223,
+	        467,
+	        223,
+	        483,
+	        223,
+	        499,
+	        223,
+	        515,
+	        257,
+	        515,
+	        290,
+	        515,
+	        324,
+	        515,
+	        324,
+	        499,
+	        324,
+	        483,
+	        324,
+	        467,
+	        290,
+	        467,
+	        257,
+	        467,
+	        223,
+	        467
+	      ],
+	      "row_size": 20,
+	      "col_size": 40,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "Q区"
+	    },
+	    {
+	      "areacode": "j6l96jjukqcg",
+	      "areaname": "O区",
+	      "polygon": [
+	        437,
+	        472,
+	        437,
+	        486,
+	        437,
+	        501,
+	        437,
+	        515,
+	        465,
+	        515,
+	        492,
+	        515,
+	        514,
+	        502,
+	        523,
+	        499,
+	        520,
+	        486,
+	        497,
+	        463,
+	        476,
+	        469,
+	        465,
+	        472,
+	        437,
+	        472
+	      ],
+	      "row_size": 20,
+	      "col_size": 44,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "O区"
+	    },
+	    {
+	      "areacode": "g4r5lysa8087",
+	      "areaname": "N13区",
+	      "polygon": [
+	        89,
+	        485,
+	        89,
+	        499,
+	        89,
+	        514,
+	        89,
+	        528,
+	        106,
+	        528,
+	        123,
+	        528,
+	        140,
+	        528,
+	        140,
+	        514,
+	        140,
+	        499,
+	        140,
+	        485,
+	        123,
+	        485,
+	        106,
+	        485,
+	        89,
+	        485
+	      ],
+	      "row_size": 20,
+	      "col_size": 36,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "N13区"
+	    },
+	    {
+	      "areacode": "q6tq75ej0jl0",
+	      "areaname": "N18区",
+	      "polygon": [
+	        528,
+	        486,
+	        535,
+	        509,
+	        535,
+	        520,
+	        536,
+	        527,
+	        552,
+	        532,
+	        540,
+	        531,
+	        551,
+	        544,
+	        582,
+	        511,
+	        595,
+	        495,
+	        566,
+	        480,
+	        566,
+	        482,
+	        540,
+	        470,
+	        528,
+	        486
+	      ],
+	      "row_size": 20,
+	      "col_size": 36,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "N18区"
+	    },
+	    {
+	      "areacode": "twgl38ej0jl1",
+	      "areaname": "N19区",
+	      "polygon": [
+	        583,
+	        409,
+	        583,
+	        435,
+	        595,
+	        461,
+	        589,
+	        482,
+	        600,
+	        484,
+	        605,
+	        481,
+	        610,
+	        473,
+	        611,
+	        463,
+	        617,
+	        442,
+	        619,
+	        413,
+	        615,
+	        409,
+	        599,
+	        409,
+	        583,
+	        409
+	      ],
+	      "row_size": 20,
+	      "col_size": 30,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "N19区"
+	    },
+	    {
+	      "areacode": "mnxkfajukqcl",
+	      "areaname": "D区",
+	      "polygon": [
+	        111,
+	        290,
+	        111,
+	        314,
+	        111,
+	        339,
+	        111,
+	        363,
+	        116,
+	        363,
+	        122,
+	        363,
+	        127,
+	        363,
+	        127,
+	        339,
+	        127,
+	        314,
+	        127,
+	        290,
+	        122,
+	        290,
+	        116,
+	        290,
+	        111,
+	        290
+	      ],
+	      "row_size": 10,
+	      "col_size": 30,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "D区"
+	    },
+	    {
+	      "areacode": "5k7ubtej0jl3",
+	      "areaname": "N12区",
+	      "polygon": [
+	        57,
+	        390,
+	        57,
+	        419,
+	        57,
+	        447,
+	        57,
+	        476,
+	        71,
+	        476,
+	        85,
+	        476,
+	        99,
+	        476,
+	        99,
+	        447,
+	        99,
+	        419,
+	        99,
+	        390,
+	        85,
+	        390,
+	        71,
+	        390,
+	        57,
+	        390
+	      ],
+	      "row_size": 16,
+	      "col_size": 30,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "N12区"
+	    },
+	    {
+	      "areacode": "bt8yrj74fetj",
+	      "areaname": "D4区",
+	      "polygon": [
+	        234,
+	        412,
+	        223,
+	        423,
+	        215,
+	        440,
+	        215,
+	        463,
+	        236,
+	        463,
+	        256,
+	        463,
+	        277,
+	        463,
+	        277,
+	        440,
+	        277,
+	        419,
+	        277,
+	        396,
+	        256,
+	        396,
+	        242,
+	        402,
+	        234,
+	        412
+	      ],
+	      "row_size": 20,
+	      "col_size": 30,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "D4区"
+	    },
+	    {
+	      "areacode": "sm0jwq2gt60m",
+	      "areaname": "P区",
+	      "polygon": [
+	        355,
+	        486,
+	        355,
+	        501,
+	        329,
+	        500,
+	        329,
+	        515,
+	        365,
+	        515,
+	        400,
+	        515,
+	        436,
+	        515,
+	        436,
+	        500,
+	        436,
+	        484,
+	        436,
+	        469,
+	        400,
+	        469,
+	        360,
+	        469,
+	        355,
+	        486
+	      ],
+	      "row_size": 20,
+	      "col_size": 40,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "P区"
+	    },
+	    {
+	      "areacode": "dn5kn974fetl",
+	      "areaname": "B3区",
+	      "polygon": [
+	        286,
+	        193,
+	        286,
+	        216,
+	        286,
+	        238,
+	        286,
+	        261,
+	        302,
+	        261,
+	        319,
+	        261,
+	        335,
+	        261,
+	        335,
+	        238,
+	        335,
+	        216,
+	        335,
+	        193,
+	        319,
+	        193,
+	        302,
+	        193,
+	        286,
+	        193
+	      ],
+	      "row_size": 20,
+	      "col_size": 30,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "B3区"
+	    },
+	    {
+	      "areacode": "32lnp9jukqcs",
+	      "areaname": "D3区",
+	      "polygon": [
+	        286,
+	        398,
+	        286,
+	        419,
+	        286,
+	        441,
+	        286,
+	        462,
+	        302,
+	        462,
+	        317,
+	        462,
+	        333,
+	        462,
+	        333,
+	        441,
+	        333,
+	        419,
+	        333,
+	        398,
+	        317,
+	        398,
+	        302,
+	        398,
+	        286,
+	        398
+	      ],
+	      "row_size": 20,
+	      "col_size": 30,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "D3区"
+	    },
+	    {
+	      "areacode": "u1w8mhej0jlk",
+	      "areaname": "D2区",
+	      "polygon": [
+	        347,
+	        396,
+	        347,
+	        418,
+	        347,
+	        441,
+	        347,
+	        463,
+	        362,
+	        463,
+	        376,
+	        463,
+	        391,
+	        463,
+	        391,
+	        441,
+	        391,
+	        418,
+	        391,
+	        396,
+	        376,
+	        396,
+	        362,
+	        396,
+	        347,
+	        396
+	      ],
+	      "row_size": 20,
+	      "col_size": 30,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "D2区"
+	    },
+	    {
+	      "areacode": "p42ypdej0jla",
+	      "areaname": "D1区",
+	      "polygon": [
+	        404,
+	        397,
+	        404,
+	        419,
+	        404,
+	        440,
+	        404,
+	        462,
+	        424,
+	        462,
+	        444,
+	        462,
+	        464,
+	        462,
+	        464,
+	        440,
+	        460,
+	        435,
+	        457,
+	        425,
+	        443,
+	        411,
+	        424,
+	        397,
+	        404,
+	        397
+	      ],
+	      "row_size": 20,
+	      "col_size": 30,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "D1区"
+	    },
+	    {
+	      "areacode": "0ca4mx2gt615",
+	      "areaname": "H2区",
+	      "polygon": [
+	        293,
+	        144,
+	        293,
+	        153,
+	        293,
+	        162,
+	        293,
+	        171,
+	        307,
+	        171,
+	        321,
+	        171,
+	        335,
+	        171,
+	        335,
+	        162,
+	        335,
+	        153,
+	        335,
+	        144,
+	        321,
+	        144,
+	        307,
+	        144,
+	        293,
+	        144
+	      ],
+	      "row_size": 20,
+	      "col_size": 30,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "H2区"
+	    },
+	    {
+	      "areacode": "q4bf4074fets",
+	      "areaname": "F区",
+	      "polygon": [
+	        163,
+	        139,
+	        163,
+	        155,
+	        163,
+	        170,
+	        163,
+	        186,
+	        181,
+	        186,
+	        199,
+	        186,
+	        217,
+	        186,
+	        217,
+	        170,
+	        217,
+	        155,
+	        217,
+	        139,
+	        199,
+	        139,
+	        181,
+	        139,
+	        163,
+	        139
+	      ],
+	      "row_size": 20,
+	      "col_size": 35,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "F区"
+	    },
+	    {
+	      "areacode": "wpks2e74fett",
+	      "areaname": "N8区",
+	      "polygon": [
+	        93,
+	        121,
+	        93,
+	        136,
+	        93,
+	        149,
+	        93,
+	        164,
+	        108,
+	        164,
+	        123,
+	        164,
+	        138,
+	        164,
+	        138,
+	        149,
+	        138,
+	        136,
+	        138,
+	        121,
+	        123,
+	        121,
+	        108,
+	        121,
+	        93,
+	        121
+	      ],
+	      "row_size": 20,
+	      "col_size": 35,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "N8区"
+	    },
+	    {
+	      "areacode": "9xnc21jukqd0",
+	      "areaname": "N区",
+	      "polygon": [
+	        552,
+	        372,
+	        554,
+	        401,
+	        553,
+	        423,
+	        545,
+	        459,
+	        555,
+	        465,
+	        558,
+	        462,
+	        562,
+	        453,
+	        568,
+	        426,
+	        569,
+	        398,
+	        565,
+	        367,
+	        564,
+	        367,
+	        561,
+	        369,
+	        552,
+	        372
+	      ],
+	      "row_size": 15,
+	      "col_size": 40,
+	      "stage": "2",
+	      "amount": 89,
+	      "hint": "N区"
+	    },
+	    {
+	      "areacode": "ul1nl874fetw",
+	      "areaname": "R区",
+	      "polygon": [
+	        157,
+	        469,
+	        157,
+	        484,
+	        157,
+	        497,
+	        157,
+	        512,
+	        177,
+	        512,
+	        196,
+	        512,
+	        216,
+	        512,
+	        216,
+	        497,
+	        216,
+	        484,
+	        216,
+	        469,
+	        196,
+	        469,
+	        177,
+	        469,
+	        157,
+	        469
+	      ],
+	      "row_size": 20,
+	      "col_size": 40,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "R区"
+	    },
+	    {
+	      "areacode": "8ejjq6ej0jlg",
+	      "areaname": "B1区",
+	      "polygon": [
+	        406,
+	        193,
+	        406,
+	        214,
+	        406,
+	        237,
+	        406,
+	        258,
+	        424,
+	        258,
+	        442,
+	        258,
+	        460,
+	        257,
+	        461,
+	        237,
+	        461,
+	        217,
+	        461,
+	        193,
+	        442,
+	        193,
+	        424,
+	        193,
+	        406,
+	        193
+	      ],
+	      "row_size": 20,
+	      "col_size": 30,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "B1区"
+	    },
+	    {
+	      "areacode": "kt5npejukqd3",
+	      "areaname": "K区",
+	      "polygon": [
+	        466,
+	        140,
+	        466,
+	        155,
+	        466,
+	        172,
+	        466,
+	        187,
+	        481,
+	        187,
+	        494,
+	        187,
+	        509,
+	        187,
+	        509,
+	        172,
+	        509,
+	        155,
+	        509,
+	        140,
+	        494,
+	        140,
+	        481,
+	        140,
+	        466,
+	        140
+	      ],
+	      "row_size": 20,
+	      "col_size": 40,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "K区"
+	    },
+	    {
+	      "areacode": "w1perrjukqd5",
+	      "areaname": "N15区",
+	      "polygon": [
+	        225,
+	        530,
+	        225,
+	        545,
+	        224,
+	        565,
+	        247,
+	        566,
+	        247,
+	        578,
+	        290,
+	        582,
+	        325,
+	        580,
+	        326,
+	        561,
+	        326,
+	        545,
+	        326,
+	        530,
+	        292,
+	        530,
+	        259,
+	        530,
+	        225,
+	        530
+	      ],
+	      "row_size": 20,
+	      "col_size": 40,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "N15区"
+	    },
+	    {
+	      "areacode": "c9e74k2gt61e",
+	      "areaname": "C3区",
+	      "polygon": [
+	        134,
+	        364,
+	        134,
+	        380,
+	        134,
+	        396,
+	        134,
+	        412,
+	        160,
+	        412,
+	        185,
+	        412,
+	        211,
+	        412,
+	        211,
+	        396,
+	        211,
+	        380,
+	        211,
+	        364,
+	        185,
+	        364,
+	        160,
+	        364,
+	        134,
+	        364
+	      ],
+	      "row_size": 24,
+	      "col_size": 43,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "C3区"
+	    },
+	    {
+	      "areacode": "y424tp2gt61f",
+	      "areaname": "A3区",
+	      "polygon": [
+	        451,
+	        364,
+	        453,
+	        373,
+	        470,
+	        390,
+	        486,
+	        399,
+	        493,
+	        413,
+	        516,
+	        414,
+	        541,
+	        414,
+	        541,
+	        398,
+	        541,
+	        380,
+	        541,
+	        364,
+	        516,
+	        364,
+	        493,
+	        364,
+	        451,
+	        364
+	      ],
+	      "row_size": 30,
+	      "col_size": 60,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "A3区"
+	    },
+	    {
+	      "areacode": "d2ekxysa808x",
+	      "areaname": "C2区",
+	      "polygon": [
+	        133,
+	        241,
+	        133,
+	        259,
+	        133,
+	        276,
+	        133,
+	        294,
+	        158,
+	        294,
+	        185,
+	        294,
+	        210,
+	        294,
+	        210,
+	        276,
+	        210,
+	        259,
+	        210,
+	        241,
+	        185,
+	        241,
+	        158,
+	        241,
+	        133,
+	        241
+	      ],
+	      "row_size": 24,
+	      "col_size": 40,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "C2区"
+	    },
+	    {
+	      "areacode": "x26ltu2gt61h",
+	      "areaname": "C1区",
+	      "polygon": [
+	        134,
+	        304,
+	        134,
+	        318,
+	        134,
+	        333,
+	        134,
+	        347,
+	        165,
+	        347,
+	        197,
+	        347,
+	        228,
+	        347,
+	        228,
+	        333,
+	        228,
+	        318,
+	        228,
+	        304,
+	        197,
+	        304,
+	        165,
+	        304,
+	        134,
+	        304
+	      ],
+	      "row_size": 24,
+	      "col_size": 30,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "C1区"
+	    },
+	    {
+	      "areacode": "02apw92gt618",
+	      "areaname": "N1区",
+	      "polygon": [
+	        581,
+	        276,
+	        581,
+	        296,
+	        581,
+	        316,
+	        604,
+	        321,
+	        606,
+	        335,
+	        607,
+	        336,
+	        620,
+	        335,
+	        620,
+	        316,
+	        620,
+	        296,
+	        620,
+	        276,
+	        607,
+	        276,
+	        594,
+	        276,
+	        581,
+	        276
+	      ],
+	      "row_size": 20,
+	      "col_size": 30,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "N1区"
+	    },
+	    {
+	      "areacode": "sgatj4jukqdb",
+	      "areaname": "N5区",
+	      "polygon": [
+	        334,
+	        75,
+	        334,
+	        92,
+	        334,
+	        109,
+	        334,
+	        126,
+	        367,
+	        126,
+	        399,
+	        126,
+	        432,
+	        126,
+	        432,
+	        109,
+	        432,
+	        92,
+	        432,
+	        75,
+	        399,
+	        75,
+	        367,
+	        75,
+	        334,
+	        75
+	      ],
+	      "row_size": 20,
+	      "col_size": 35,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "N5区"
+	    },
+	    {
+	      "areacode": "c4m1arjukqdc",
+	      "areaname": "B4区",
+	      "polygon": [
+	        216,
+	        193,
+	        216,
+	        215,
+	        216,
+	        239,
+	        216,
+	        261,
+	        236,
+	        261,
+	        256,
+	        261,
+	        276,
+	        261,
+	        276,
+	        239,
+	        276,
+	        215,
+	        276,
+	        193,
+	        256,
+	        193,
+	        236,
+	        193,
+	        216,
+	        193
+	      ],
+	      "row_size": 20,
+	      "col_size": 30,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "B4区"
+	    },
+	    {
+	      "areacode": "fsp4282gt61b",
+	      "areaname": "N6区",
+	      "polygon": [
+	        246,
+	        74,
+	        246,
+	        91,
+	        246,
+	        109,
+	        246,
+	        126,
+	        273,
+	        126,
+	        299,
+	        126,
+	        326,
+	        126,
+	        326,
+	        109,
+	        326,
+	        91,
+	        326,
+	        74,
+	        299,
+	        74,
+	        273,
+	        74,
+	        246,
+	        74
+	      ],
+	      "row_size": 20,
+	      "col_size": 35,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "N6区"
+	    },
+	    {
+	      "areacode": "9hw55eej0jlx",
+	      "areaname": "A1区",
+	      "polygon": [
+	        454,
+	        306,
+	        454,
+	        320,
+	        454,
+	        336,
+	        454,
+	        350,
+	        484,
+	        350,
+	        513,
+	        350,
+	        543,
+	        350,
+	        543,
+	        336,
+	        543,
+	        320,
+	        543,
+	        306,
+	        513,
+	        306,
+	        484,
+	        306,
+	        454,
+	        306
+	      ],
+	      "row_size": 25,
+	      "col_size": 50,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "A1区"
+	    },
+	    {
+	      "areacode": "cddsjlsa8097",
+	      "areaname": "N16区",
+	      "polygon": [
+	        335,
+	        534,
+	        335,
+	        550,
+	        335,
+	        565,
+	        335,
+	        581,
+	        369,
+	        581,
+	        404,
+	        581,
+	        438,
+	        581,
+	        438,
+	        565,
+	        438,
+	        550,
+	        438,
+	        534,
+	        404,
+	        534,
+	        369,
+	        534,
+	        335,
+	        534
+	      ],
+	      "row_size": 20,
+	      "col_size": 40,
+	      "stage": "2",
+	      "amount": 0,
+	      "hint": "N16区"
+	    }
+	  ]
+	);
+	async function draw() {
+		const ctx = uni.createCanvasContext('canvas', instance);
+		ctx.save(); // 保存当前状态
+		ctx.translate(offsetX.value, offsetY.value); // 应用偏移
+		ctx.scale(scale.value, scale.value); // 应用缩放
+		const res = await uni.getImageInfo({
+			src: imgUrl.value
+		});
+		ctx.drawImage(res.path, 0, 0, canvasWidth.value, canvasHeight.value);
+		ctx.restore(); // 恢复之前保存的状态
+		// 绘制每个图形
+		blocks.value.forEach((block) => {
+			ctx.beginPath();
+			// ctx.fillStyle = block.color;
+			// 应用缩放
+				ctx.scale(scale.value, scale.value); // 应用缩放
+			switch (block.hint) {
+				case block.hint: // 四边形
+					for (let i = 0; i < block.polygon.length; i += 2) {
+						const x = block.polygon[i];
+						const y = block.polygon[i + 1];
+						if (i === 0) {
+							ctx.moveTo(x, y);
+						} else {
+							ctx.lineTo(x, y);
+						}
+					}
+					ctx.closePath();
+					break;
+			}
 
-async function draw() {
-  const ctx = uni.createCanvasContext('canvas', instance);
-  ctx.save(); // 保存当前状态
-  ctx.translate(offsetX.value, offsetY.value); // 应用偏移
-  ctx.scale(scale.value, scale.value); // 应用缩放
-  const res = await uni.getImageInfo({ src: imgUrl.value });
-  ctx.drawImage(res.path, 0, 0); // 根据变换后的坐标系绘制图片
-  ctx.restore(); // 恢复之前保存的状态
-	
+			ctx.restore(); // 恢复缩放前的状态，避免影响其他绘制
 
-  ctx.draw();
-}
+			ctx.stroke(); // 绘制边框
+			if (block.color) ctx.fill(); // 如果有填充色就填充
+		});
+
+		ctx.draw()
+	}
+
+
+
+	// 处理canvas触摸事件
+	function handleCanvasTouch(event) {
+		// 获取触摸点的坐标
+		const x = event.touches[0].x;
+		const y = event.touches[0].y;
+		console.log(x, y, '12');
+
+	}
 
-	// async function draw() {
-	// 	const ctx = uni.createCanvasContext('canvas', instance) // 创建canvas绘图上下文
-	// 	ctx.scale(scale.value, scale.value);
-	// 	const res = await uni.getImageInfo({
-	// 		src: imgUrl.value,
-	// 	})
-	// 	ctx.drawImage(res.path, 0, 0);
-		
-	// 	// ctx.beginPath();
-	// 	// ctx.moveTo(50, 50); // 左下角点
-	// 	// ctx.lineTo(150, 50); // 右下角点
-	// 	// ctx.lineTo(200, 100); // 右上角点
-	// 	// ctx.lineTo(100, 100); // 左上角点
-	// 	// ctx.closePath(); // 闭合路径
-	// 	// ctx.stroke(); // 绘制边框
-		
-	// 	// 先不删
-	// 	// let xoffset = 0, yoffset = 0, flag = false;
-	// 	// polygonList.forEach((level, index) => {
-	// 	// 	// console.log('level',level)
-	// 	// 	ctx.moveTo(level.polygon[0] + xoffset, level.polygon[0] + yoffset)
-	// 	// 	level.polygon.forEach((level2,level2Index)=>{
-	// 	// 		ctx.beginPath()
-	// 	// 		if(level2Index != level.polygon.length ){
-	// 	// 			ctx.lineTo(level2 + xoffset, level.polygon[level2Index+1])
-	// 	// 			console.log(level2 + xoffset, level.polygon[level2Index+1])
-	// 	// 		}else{
-	// 	// 			ctx.lineTo(level2 + xoffset, level.polygon[0])
-	// 	// 			console.log(level2 + xoffset, level.polygon[0])
-	// 	// 		}
-	// 	// 		ctx.closePath()
-	// 	// 	})
-	// 	// 	if(polygonList.length == index){
-	// 	// 		flag = true
-	// 	// 	}
-	// 	// })
-	// 	ctx.draw()
-	// }
-	
-		// 处理canvas触摸事件
-		function handleCanvasTouch(event) {
-			// 获取触摸点的坐标
-			const x = event.touches[0].x;
-			const y = event.touches[0].y;
-			console.log(x,y,'12');
-		
-		}
 
-	
 	// 触摸开始
 	const handleTouchStart = (e) => {
 		console.log('handleTouchStart')
-	  if (e.touches.length === 1) {
-	    // 单指拖动
-	    startX.value = e.touches[0].clientX - offsetX.value
-	    startY.value = e.touches[0].clientY - offsetY.value
-	    isDragging.value = true
-	  } else if (e.touches.length === 2) {
-	    // 双指缩放
-	    const x1 = e.touches[0].clientX
-	    const y1 = e.touches[0].clientY
-	    const x2 = e.touches[1].clientX
-	    const y2 = e.touches[1].clientY
-	    lastDistance.value = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))
-	  }
+		// 获取触摸点的坐标
+		const x = e.touches[0].x;
+		const y = e.touches[0].y;
+		// 判断点击位置
+		blocks.value.forEach((block) => {
+			if (isPointInQuadrilateral(x, y, block.polygon)) {
+				uni.showModal({
+					title: '提示',
+					content: block.hint,
+					showCancel: true, // 显示取消按钮
+					success: (res) => {
+						if (res.confirm) {
+							console.log('用户点击了“确定”按钮');
+						} else if (res.cancel) {
+							console.log('用户点击了“取消”按钮');
+						}
+					},
+				});
+			}
+		});
+		if (e.touches.length === 1) {
+			// 单指拖动
+			startX.value = e.touches[0].clientX - offsetX.value
+			startY.value = e.touches[0].clientY - offsetY.value
+			isDragging.value = true
+		} else if (e.touches.length === 2) {
+			// 双指缩放
+			const x1 = e.touches[0].clientX
+			const y1 = e.touches[0].clientY
+			const x2 = e.touches[1].clientX
+			const y2 = e.touches[1].clientY
+			lastDistance.value = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))
+		}
 	}
-	
+
 	// 触摸移动
 	const handleTouchMove = (e) => {
-	  if (e.touches.length === 1 && isDragging.value) {
-	    // 单指移动逻辑...
-	    offsetX.value = e.touches[0].clientX - startX.value;
-	    offsetY.value = e.touches[0].clientY - startY.value;
-	  } else if (e.touches.length === 2) {
-	    // 双指缩放逻辑...
-	    const x1 = e.touches[0].clientX, y1 = e.touches[0].clientY;
-	    const x2 = e.touches[1].clientX, y2 = e.touches[1].clientY;
-	    const distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
-	    
-	    if (lastDistance.value > 0) {
-	      scale.value = Math.min(Math.max(scale.value * (distance / lastDistance.value), 0.5), 4);
-	      draw(); // 重新绘制Canvas内容
-	    }
-	    lastDistance.value = distance;
-	  }
+		console.log('11111');
+		if (e.touches.length === 1 && isDragging.value) {
+			// 单指移动逻辑...
+			offsetX.value = e.touches[0].clientX - startX.value;
+			offsetY.value = e.touches[0].clientY - startY.value;
+		} else if (e.touches.length === 2) {
+			// 双指缩放逻辑...
+			const x1 = e.touches[0].clientX,
+				y1 = e.touches[0].clientY;
+			const x2 = e.touches[1].clientX,
+				y2 = e.touches[1].clientY;
+			const distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
+
+			if (lastDistance.value > 0) {
+				scale.value = Math.min(Math.max(scale.value * (distance / lastDistance.value), 0.5), 4);
+				draw(); // 重新绘制Canvas内容
+			}
+			lastDistance.value = distance;
+		}
 	};
-	
+
+
 	// 触摸结束
 	const handleTouchEnd = () => {
 		console.log('handleTouchEnd')
-	  lastDistance.value = -1
-	  isDragging.value = false
+		lastDistance.value = -1
+		isDragging.value = false
 	}
-	
+
 	// 按钮点击事件处理函数
 	const handleDraw = () => {
 		draw(); // 调用绘图函数
@@ -2007,21 +2020,51 @@ async function draw() {
 	// 	},300)
 	// 	// 确保在组件挂载后可以获取到Canvas元素
 	// })
+	// useRafFn(() => {
+	//   draw()
+	// })
 	onReady(() => {
 		console.log('onReadyonReady');
 		uni.downloadFile({
-			url:imgUrl.value,
-			success: function (sres) {
-				console.log(sres,'sres');
+			url: imgUrl.value,
+			success: function(sres) {
+				console.log(sres, 'sres');
 				imgUrl.value = sres.tempFilePath || sres.path
 				// setInterval(()=>{
-					draw()
+				draw()
 				// },16)
-			},fail:function(fres){
-				console.log('fres',fres)
-      }
+			},
+			fail: function(fres) {
+				console.log('fres', fres)
+			}
 		})
 	})
+function isPointInQuadrilateral(px, py, polygon) {
+    let inside = false;
+    const n = polygon.length / 2; // 因为每两个数表示一个点(x,y)
+    for (let i = 0; i < n; i++) {
+        let p1_x = polygon[2 * i];
+        let p1_y = polygon[2 * i + 1];
+        let p2_x, p2_y;
+        if (i === n - 1) { // 最后一个点与第一个点相连形成闭合
+            p2_x = polygon[0];
+            p2_y = polygon[1];
+        } else {
+            p2_x = polygon[2 * i + 2];
+            p2_y = polygon[2 * i + 3];
+        }
+
+        if (py > Math.min(p1_y, p2_y) && py <= Math.max(p1_y, p2_y) && px <= Math.max(p1_x, p2_x)) {
+            if (p1_y !== p2_y) {
+                let xinters = (py - p1_y) * (p2_x - p1_x) / (p2_y - p1_y) + p1_x;
+                if (p1_x === p2_x || px <= xinters) {
+                    inside = !inside;
+                }
+            }
+        }
+    }
+    return inside;
+}
 </script>
 
 <style scoped>
diff --git a/pages/index/utils.js b/pages/index/utils.js
new file mode 100644
index 0000000..2715f00
--- /dev/null
+++ b/pages/index/utils.js
@@ -0,0 +1,79 @@
+import { ref, onMounted, onUnmounted } from 'vue'
+
+export function useElementSize(targetSelector) {
+  const width = ref(0)
+  const height = ref(0)
+  let observer = null
+
+  const updateSize = () => {
+    const query = uni.createSelectorQuery()
+    query.select(targetSelector).boundingClientRect(rect => {
+      if (rect) {
+        width.value = rect.width
+        height.value = rect.height
+      }
+    }).exec()
+  }
+
+  onMounted(() => {
+    updateSize()
+    // 尝试使用 ResizeObserver（部分小程序基础库支持）
+    if (uni.createIntersectionObserver) {
+      observer = uni.createIntersectionObserver(this, {
+        observeAll: true
+      })
+      observer.relativeToViewport().observe(targetSelector, updateSize)
+    }
+  })
+
+  onUnmounted(() => {
+    observer?.disconnect()
+  })
+
+  return { width, height, updateSize }
+}
+
+export function useEventListener(target, event, handler) {
+  // 组件内事件
+  if (target.$on) {
+    target.$on(event, handler)
+    const stop = () => target.$off(event, handler)
+    onUnmounted(stop)
+    return stop
+  }
+  // 全局事件（需配合 uni.$emit 使用）
+  else {
+    uni.$on(event, handler)
+    const stop = () => uni.$off(event, handler)
+    onUnmounted(stop)
+    return stop
+  }
+}
+
+
+export function useRafFn(fn, { immediate = true } = {}) {
+  let isActive = false
+  let timerId = null
+
+  const loop = () => {
+    if (!isActive) return
+    fn()
+    timerId = setTimeout(loop, 16) // 模拟 60fps
+  }
+
+  const start = () => {
+    if (isActive) return
+    isActive = true
+    loop()
+  }
+
+  const stop = () => {
+    isActive = false
+    clearTimeout(timerId)
+  }
+
+  onUnmounted(stop)
+  immediate && start()
+
+  return { start, stop }
+}
\ No newline at end of file