diff --git a/src/components/GenerateImg.vue b/src/components/GenerateImg.vue
index 66bc940..af2f47a 100644
--- a/src/components/GenerateImg.vue
+++ b/src/components/GenerateImg.vue
@@ -322,22 +322,22 @@ const buttonUploadedPosition = (index) => {
 
   const ADJUSTMENT_CONFIG = {
     shenxian: { 
-      1:8, 2:6, 3:6, 4:5, 5:5, 6:4 
+      1:16, 2:12, 3:12, 4:10, 5:10, 6:8 
     },
     xianxia: { 
-      1:8, 2:6, 3:6, 4:5, 5:5, 6:4 
+      1:11, 2:12, 3:12, 4:10, 5:10, 6:8 
     },
     fugu: { 
-      1:6, 2:7, 3:7, 4:5, 5:5, 6:4 
+      1:12, 2:14, 3:14, 4:10, 5:10, 6:8 
     },
     xinzhongshi: { 
-      1:6, 2:7, 3:4, 4:5, 5:3, 6:4 
+      1:12, 2:14, 3:8, 4:10, 5:6, 6:8 
     },
     luying: { 
-      1:6, 2:7, 3:4, 4:5, 5:3, 6:4 
+      1:12, 2:14, 3:8, 4:10, 5:6, 6:8 
     },
     paidui:{ 
-      1:6, 2:7, 3:6, 4:5, 5:6, 6:4 
+      1:12, 2:14, 3:12, 4:10, 5:12, 6:8 
     }
   };
 
@@ -347,7 +347,7 @@ const buttonUploadedPosition = (index) => {
   }
 
   return {
-    top:`${adjustedTop}%`,
+    top:`${adjustedTop}vw`,
     left :pos.left ,
     "--item-width" :pos.width  
   };
diff --git a/src/components/PhotoSquare.vue b/src/components/PhotoSquare.vue
index 2eea5b4..c0af404 100644
--- a/src/components/PhotoSquare.vue
+++ b/src/components/PhotoSquare.vue
@@ -168,7 +168,7 @@ markers.value = [
         <RecycleScroller
             class="scroller"
             :items="images"
-            :item-size="8"
+            :item-size="1"
             key-field="id"
             v-slot="{ item, index }"
           >
@@ -338,7 +338,7 @@ markers.value = [
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: 8vh;
+  height: 100%;
   padding: 0 6vw;
 }
 
@@ -362,7 +362,7 @@ markers.value = [
   bottom: 1vh;
   left: 5vw;
   width: 90vw;
-  height: 8vh;
+  height: 17vw;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: bottom center;
@@ -390,7 +390,7 @@ markers.value = [
   display: flex;
   flex-flow: row;
   flex-wrap: wrap;
-  top: 10vw;
+  top: 15vw;
 }
 
 .image-container {
diff --git a/src/static/imagePositionMaps.js b/src/static/imagePositionMaps.js
index f40a555..c71a595 100644
--- a/src/static/imagePositionMaps.js
+++ b/src/static/imagePositionMaps.js
@@ -2,109 +2,109 @@ const imagePositionMaps = {
   shenxian: {
     1: {
       positions: [{
-          top: '41%',
-          left: '38%',
-          width: '55px'
+          top: '83vw',
+          left: '38vw',
+          width: '13vw'
         },
         {
-          top: '56%',
-          left: '57%',
-          width: '55px'
+          top: '114vw',
+          left: '57vw',
+          width: '13vw'
         }
       ]
     },
     2: {
       positions: [{
-          top: '43%',
-          left: '39%',
-          width: '55px'
+          top: '86vw',
+          left: '39vw',
+          width: '13vw'
         },
         {
-          top: '56%',
-          left: '60%',
-          width: '55px'
+          top: '114vw',
+          left: '60vw',
+          width: '13vw'
         }
       ]
     },
     3: {
       positions: [{
-          top: '49%',
-          left: '30%',
-          width: '55px'
+          top: '98vw',
+          left: '30vw',
+          width: '13vw'
         },
         {
-          top: '47%',
-          left: '53%',
-          width: '55px'
+          top: '95vw',
+          left: '53vw',
+          width: '13vw'
         }
       ]
     },
     4: {
       positions: [{
-          top: '40%',
-          left: '31%',
-          width: '50px'
+          top: '80vw',
+          left: '31vw',
+          width: '11vw'
         },
         {
-          top: '36%',
-          left: '61%',
-          width: '50px'
+          top: '72vw',
+          left: '61vw',
+          width: '11vw'
         },
         {
-          top: '62%',
-          left: '40%',
-          width: '50px'
+          top: '124vw',
+          left: '40vw',
+          width: '11vw'
         }
       ]
     },
     5: {
       positions: [{
-          top: '39%',
-          left: '32%',
-          width: '44px'
+          top: '76vw',
+          left: '32vw',
+          width: '10vw'
         },
         {
-          top: '36%',
-          left: '54%',
-          width: '44px'
+          top: '72vw',
+          left: '54vw',
+          width: '10vw'
         },
         {
-          top: '60%',
-          left: '43%',
-          width: '44px'
+          top: '118vw',
+          left: '43vw',
+          width: '10vw'
         },
         {
-          top: '55%',
-          left: '68%',
-          width: '44px'
+          top: '107vw',
+          left: '68vw',
+          width: '10vw'
         }
       ]
     },
     6: {
       positions: [{
-          top: '42%',
-          left: '26%',
-          width: '40px'
+          top: '84vw',
+          left: '26vw',
+          width: '8vw'
         },
         {
-          top: '39%',
-          left: '43%',
-          width: '40px'
+          top: '76vw',
+          left: '43vw',
+          width: '8vw'
         },
         {
-          top: '39%',
-          left: '59%',
-          width: '40px'
+          top: '76vw',
+          left: '59vw',
+          width: '8vw'
         },
         {
-          top: '44%',
-          left: '68%',
-          width: '40px'
+          top: '88vw',
+          left: '68vw',
+          width: '8vw'
         },
         {
-          top: '53%',
-          left: '41%',
-          width: '40px'
+          top: '106vw',
+          left: '41vw',
+          width: '8vw'
         }
       ]
     },
@@ -112,114 +112,114 @@ const imagePositionMaps = {
   xianxia: {
     1: {
       positions: [{
-          top: '46%',
-          left: '33%',
-          width: '55px'
+          top: '93vw',
+          left: '33vw',
+          width: '13vw'
         },
         {
-          top: '46%',
-          left: '61%',
-          width: '55px'
+          top: '93vw',
+          left: '61vw',
+          width: '13vw'
         }
       ]
     },
     2: {
       positions: [{
-          top: '41%',
-          left: '37%',
-          width: '55px'
+          top: '83vw',
+          left: '37vw',
+          width: '13vw'
         },
         {
-          top: '55%',
-          left: '55%',
-          width: '55px'
+          top: '110vw',
+          left: '55vw',
+          width: '13vw'
         }
       ]
     },
     3: {
       positions: [{
-          top: '40%',
-          left: '34%',
-          width: '55px'
+          top: '80vw',
+          left: '34vw',
+          width: '13vw'
         },
         {
-          top: '44%',
-          left: '57%',
-          width: '55px'
+          top: '88vw',
+          left: '57vw',
+          width: '13vw'
         },
         {
-          top: '61%',
-          left: '38%',
-          width: '55px'
+          top: '123vw',
+          left: '38vw',
+          width: '13vw'
         }
       ]
     },
     4: {
       positions: [{
-          top: '43%',
-          left: '37%',
-          width: '50px'
+          top: '86vw',
+          left: '37vw',
+          width: '11vw'
         },
         {
-          top: '45%',
-          left: '58%',
-          width: '50px'
+          top: '90vw',
+          left: '58vw',
+          width: '11vw'
         },
         {
-          top: '61%',
-          left: '42%',
-          width: '50px'
+          top: '123vw',
+          left: '42vw',
+          width: '11vw'
         }
       ]
     },
     5: {
       positions: [{
-          top: '43%',
-          left: '28%',
-          width: '44px'
+          top: '86vw',
+          left: '28vw',
+          width: '10vw'
         },
         {
-          top: '41%',
-          left: '55%',
-          width: '44px'
+          top: '83vw',
+          left: '55vw',
+          width: '10vw'
         },
         {
-          top: '55%',
-          left: '46%',
-          width: '44px'
+          top: '110vw',
+          left: '46vw',
+          width: '10vw'
         },
         {
-          top: '47%',
-          left: '68%',
-          width: '44px'
+          top: '95vw',
+          left: '68vw',
+          width: '10vw'
         }
       ]
     },
     6: {
       positions: [{
-          top: '42%',
-          left: '35%',
-          width: '40px'
+          top: '84vw',
+          left: '35vw',
+          width: '8vw'
         },
         {
-          top: '37%',
-          left: '53%',
-          width: '40px'
+          top: '74vw',
+          left: '53vw',
+          width: '8vw'
         },
         {
-          top: '40%',
-          left: '71%',
-          width: '40px'
+          top: '80vw',
+          left: '71vw',
+          width: '8vw'
         },
         {
-          top: '52%',
-          left: '27%',
-          width: '40px'
+          top: '103vw',
+          left: '27vw',
+          width: '8vw'
         },
         {
-          top: '55%',
-          left: '54%',
-          width: '40px'
+          top: '110vw',
+          left: '54vw',
+          width: '8vw'
         }
       ]
     },
@@ -227,109 +227,109 @@ const imagePositionMaps = {
   fugu: {
     1: {
       positions: [{
-          top: '35%',
-          left: '39%',
-          width: '55px'
+          top: '71vw',
+          left: '39vw',
+          width: '13vw'
         },
         {
-          top: '41%',
-          left: '56%',
-          width: '55px'
+          top: '83vw',
+          left: '56vw',
+          width: '13vw'
         }
       ]
     },
     2: {
       positions: [{
-          top: '45%',
-          left: '34%',
-          width: '55px'
+          top: '90vw',
+          left: '34vw',
+          width: '13vw'
         },
         {
-          top: '45%',
-          left: '53%',
-          width: '55px'
+          top: '90vw',
+          left: '53vw',
+          width: '13vw'
         }
       ]
     },
     3: {
       positions: [{
-          top: '43%',
-          left: '40%',
-          width: '55px'
+          top: '86vw',
+          left: '40vw',
+          width: '13vw'
         },
         {
-          top: '51%',
-          left: '61%',
-          width: '55px'
+          top: '103vw',
+          left: '61vw',
+          width: '13vw'
         }
       ]
     },
     4: {
       positions: [{
-          top: '46%',
-          left: '29%',
-          width: '50px'
+          top: '93vw',
+          left: '29vw',
+          width: '11vw'
         },
         {
-          top: '36%',
-          left: '55%',
-          width: '50px'
+          top: '72vw',
+          left: '55vw',
+          width: '11vw'
         },
         {
-          top: '646%',
-          left: '69%',
-          width: '50px'
+          top: '93vw',
+          left: '69vw',
+          width: '11vw'
         }
       ]
     },
     5: {
       positions: [{
-          top: '34%',
-          left: '35%',
-          width: '44px'
+          top: '69vw',
+          left: '35vw',
+          width: '10vw'
         },
         {
-          top: '38%',
-          left: '54%',
-          width: '44px'
+          top: '77vw',
+          left: '54vw',
+          width: '10vw'
         },
         {
-          top: '49%',
-          left: '32%',
-          width: '44px'
+          top: '98vw',
+          left: '32vw',
+          width: '10vw'
         },
         {
-          top: '53%',
-          left: '59%',
-          width: '44px'
+          top: '106vw',
+          left: '59vw',
+          width: '10vw'
         }
       ]
     },
     6: {
       positions: [{
-          top: '33%',
-          left: '49%',
-          width: '40px'
+          top: '65vw',
+          left: '49vw',
+          width: '8vw'
         },
         {
-          top: '36%',
-          left: '70%',
-          width: '40px'
+          top: '72vw',
+          left: '70vw',
+          width: '8vw'
         },
         {
-          top: '49%',
-          left: '34%',
-          width: '40px'
+          top: '98vw',
+          left: '34vw',
+          width: '8vw'
         },
         {
-          top: '50%',
-          left: '49%',
-          width: '40px'
+          top: '101vw',
+          left: '49vw',
+          width: '8vw'
         },
         {
-          top: '56%',
-          left: '62%',
-          width: '40px'
+          top: '114vw',
+          left: '62vw',
+          width: '8vw'
         }
       ]
     },
@@ -337,109 +337,109 @@ const imagePositionMaps = {
   xinzhongshi: {
     1: {
       positions: [{
-          top: '51%',
-          left: '31%',
-          width: '60px'
+          top: '103vw',
+          left: '31vw',
+          width: '13vw'
         },
         {
-          top: '46%',
-          left: '48%',
-          width: '60px'
+          top: '93vw',
+          left: '48vw',
+          width: '13vw'
         }
       ]
     },
     2: {
       positions: [{
-          top: '58%',
-          left: '29%',
-          width: '60px'
+          top: '118vw',
+          left: '29vw',
+          width: '13vw'
         },
         {
-          top: '39%',
-          left: '47%',
-          width: '60px'
+          top: '76vw',
+          left: '47vw',
+          width: '13vw'
         }
       ]
     },
     3: {
       positions: [{
-          top: '45.5%',
-          left: '34%',
-          width: '40px'
+          top: '94vw',
+          left: '34vw',
+          width: '8vw'
         },
         {
-          top: '47.5%',
-          left: '59.5%',
-          width: '40px'
+          top: '97vw',
+          left: '59.5vw',
+          width: '8vw'
         }
       ]
     },
     4: {
       positions: [{
-          top: '39%',
-          left: '37.5%',
-          width: '50px'
+          top: '76vw',
+          left: '37.5vw',
+          width: '11vw'
         },
         {
-          top: '42.5%',
-          left: '59%',
-          width: '50px'
+          top: '86vw',
+          left: '59vw',
+          width: '11vw'
         },
         {
-          top: '59%',
-          left: '50%',
-          width: '50px'
+          top: '120vw',
+          left: '50vw',
+          width: '11vw'
         }
       ]
     },
     5: {
       positions: [{
-          top: '40.5%',
-          left: '46%',
-          width: '44px'
+          top: '83vw',
+          left: '46vw',
+          width: '10vw'
         },
         {
-          top: '41%',
-          left: '66%',
-          width: '44px'
+          top: '83vw',
+          left: '66vw',
+          width: '10vw'
         },
         {
-          top: '47.5%',
-          left: '30.5%',
-          width: '44px'
+          top: '95vw',
+          left: '30.5vw',
+          width: '10vw'
         },
         {
-          top: '53%',
-          left: '59%',
-          width: '44px'
+          top: '106vw',
+          left: '59vw',
+          width: '10vw'
         }
       ]
     },
     6: {
       positions: [{
-          top: '41%',
-          left: '26%',
-          width: '36px'
+          top: '83vw',
+          left: '26vw',
+          width: '8vw'
         },
         {
-          top: '41%',
-          left: '47.6%',
-          width: '36px'
+          top: '83vw',
+          left: '47.6vw',
+          width: '8vw'
         },
         {
-          top: '52.5%',
-          left: '26.4%',
-          width: '36px'
+          top: '107vw',
+          left: '26.4vw',
+          width: '8vw'
         },
         {
-          top: '58%',
-          left: '44.5%',
-          width: '36px'
+          top: '118vw',
+          left: '44.5vw',
+          width: '8vw'
         },
         {
-          top: '49%',
-          left: '67%',
-          width: '36px'
+          top: '98vw',
+          left: '67vw',
+          width: '8vw'
         }
       ]
     },
@@ -447,109 +447,109 @@ const imagePositionMaps = {
   luying: {
     1: {
       positions: [{
-          top: '49%',
-          left: '33%',
-          width: '60px'
+          top: '99vw',
+          left: '33vw',
+          width: '13vw'
         },
         {
-          top: '53%',
-          left: '50%',
-          width: '60px'
+          top: '106vw',
+          left: '50vw',
+          width: '13vw'
         }
       ]
     },
     2: {
       positions: [{
-          top: '48%',
-          left: '33%',
-          width: '60px'
+          top: '99vw',
+          left: '33vw',
+          width: '13vw'
         },
         {
-          top: '57%',
-          left: '58%',
-          width: '60px'
+          top: '115vw',
+          left: '58vw',
+          width: '13vw'
         }
       ]
     },
     3: {
       positions: [{
-          top: '53%',
-          left: '39%',
-          width: '60px'
+          top: '106vw',
+          left: '39vw',
+          width: '13vw'
         },
         {
-          top: '53.5%',
-          left: '57.2%',
-          width: '60px'
+          top: '109vw',
+          left: '57.2vw',
+          width: '13vw'
         }
       ]
     },
     4: {
       positions: [{
-          top: '45%',
-          left: '29.5%',
-          width: '50px'
+          top: '90vw',
+          left: '29.5vw',
+          width: '11vw'
         },
         {
-          top: '44.5%',
-          left: '57.6%',
-          width: '50px'
+          top: '90vw',
+          left: '57.6vw',
+          width: '11vw'
         },
         {
-          top: '53.4%',
-          left: '45%',
-          width: '50px'
+          top: '110vw',
+          left: '45vw',
+          width: '11vw'
         }
       ]
     },
     5: {
       positions: [{
-          top: '49.7%',
-          left: '24%',
-          width: '44px'
+          top: '100vw',
+          left: '24vw',
+          width: '10vw'
         },
         {
-          top: '47%',
-          left: '61%',
-          width: '44px'
+          top: '95vw',
+          left: '61vw',
+          width: '10vw'
         },
         {
-          top: '57%',
-          left: '34.5%',
-          width: '44px'
+          top: '115vw',
+          left: '34.5vw',
+          width: '10vw'
         },
         {
-          top: '55%',
-          left: '49%',
-          width: '44px'
+          top: '110vw',
+          left: '49vw',
+          width: '10vw'
         }
       ]
     },
     6: {
       positions: [{
-          top: '41%',
-          left: '42%',
-          width: '40px'
+          top: '83vw',
+          left: '42vw',
+          width: '8vw'
         },
         {
-          top: '43%',
-          left: '63.6%',
-          width: '40px'
+          top: '86vw',
+          left: '63.6vw',
+          width: '8vw'
         },
         {
-          top: '50.5%',
-          left: '28%',
-          width: '40px'
+          top: '103vw',
+          left: '28vw',
+          width: '8vw'
         },
         {
-          top: '51.4%',
-          left: '51%',
-          width: '40px'
+          top: '105vw',
+          left: '52vw',
+          width: '8vw'
         },
         {
-          top: '57.5%',
-          left: '68%',
-          width: '40px'
+          top: '118vw',
+          left: '70vw',
+          width: '8vw'
         }
       ]
     },
@@ -557,104 +557,104 @@ const imagePositionMaps = {
   paidui: {
     1: {
       positions: [{
-          top: '46%',
-          left: '31%',
-          width: '60px'
+          top: '93vw',
+          left: '31vw',
+          width: '13vw'
         },
         {
-          top: '42%',
-          left: '48%',
-          width: '60px'
+          top: '84vw',
+          left: '48vw',
+          width: '13vw'
         }
       ]
     },
     2: {
       positions: [{
-          top: '49%',
-          left: '35%',
-          width: '60px'
+          top: '98vw',
+          left: '35vw',
+          width: '13vw'
         },
         {
-          top: '48%',
-          left: '54%',
-          width: '60px'
+          top: '99vw',
+          left: '54vw',
+          width: '13vw'
         }
       ]
     },
     3: {
       positions: [{
-          top: '57%',
-          left: '30%',
-          width: '50px'
+          top: '115vw',
+          left: '30vw',
+          width: '11vw'
         },
         {
-          top: '41%',
-          left: '51.2%',
-          width: '50px'
+          top: '83vw',
+          left: '51.2vw',
+          width: '11vw'
         }
       ]
     },
     4: {
       positions: [{
-          top: '41%',
-          left: '37.5%',
-          width: '50px'
+          top: '83vw',
+          left: '37.5vw',
+          width: '11vw'
         },
         {
-          top: '44.4%',
-          left: '64.6%',
-          width: '50px'
+          top: '89vw',
+          left: '64.6vw',
+          width: '11vw'
         },
         {
-          top: '56.4%',
-          left: '48%',
-          width: '50px'
+          top: '116vw',
+          left: '48vw',
+          width: '11vw'
         }
       ]
     },
     5: {
       positions: [{
-          top: '43.7%',
-          left: '29%',
-          width: '44px'
+          top: '88vw',
+          left: '29vw',
+          width: '10vw'
         },
         {
-          top: '40%',
-          left: '44%',
-          width: '44px'
+          top: '80vw',
+          left: '44vw',
+          width: '10vw'
         },
         {
-          top: '46%',
-          left: '64.5%',
-          width: '44px'
+          top: '93vw',
+          left: '64.5vw',
+          width: '10vw'
         }
       ]
     },
     6: {
       positions: [{
-          top: '38%',
-          left: '28%',
-          width: '40px'
+          top: '77vw',
+          left: '28vw',
+          width: '8vw'
         },
         {
-          top: '40%',
-          left: '56.6%',
-          width: '40px'
+          top: '80vw',
+          left: '56.6vw',
+          width: '8vw'
         },
         {
-          top: '49.5%',
-          left: '37%',
-          width: '40px'
+          top: '101vw',
+          left: '37vw',
+          width: '8vw'
         },
         {
-          top: '52%',
-          left: '53%',
-          width: '40px'
+          top: '106vw',
+          left: '53vw',
+          width: '8vw'
         },
         {
-          top: '53.5%',
-          left: '71.2%',
-          width: '40px'
+          top: '108vw',
+          left: '72vw',
+          width: '8vw'
         }
       ]
     },
diff --git a/src/static/positionMaps.js b/src/static/positionMaps.js
index 24f301f..dda4098 100644
--- a/src/static/positionMaps.js
+++ b/src/static/positionMaps.js
@@ -2,109 +2,109 @@ const positionMaps = {
   shenxian: {
     1: {
       positions: [{
-          top: '37%',
-          left: '36%',
-          width: '76px'
+          top: '74vw',
+          left: '36vw',
+          width: '18vw'
         },
         {
-          top: '52%',
-          left: '55%',
-          width: '76px'
+          top: '105vw',
+          left: '55vw',
+          width: '18vw'
         }
       ]
     },
     2: {
       positions: [{
-          top: '38%',
-          left: '38%',
-          width: '70px'
+          top: '75vw',
+          left: '38vw',
+          width: '16vw'
         },
         {
-          top: '51%',
-          left: '58%',
-          width: '70px'
+          top: '102vw',
+          left: '58vw',
+          width: '16vw'
         }
       ]
     },
     3: {
       positions: [{
-          top: '43%',
-          left: '28%',
-          width: '72px'
+          top: '86vw',
+          left: '28vw',
+          width: '17vw'
         },
         {
-          top: '41%',
-          left: '51%',
-          width: '72px'
+          top: '83vw',
+          left: '51vw',
+          width: '17vw'
         }
       ]
     },
     4: {
       positions: [{
-          top: '35%',
-          left: '30%',
-          width: '60px'
+          top: '70vw',
+          left: '30vw',
+          width: '14vw'
         },
         {
-          top: '31%',
-          left: '59%',
-          width: '60px'
+          top: '62vw',
+          left: '59vw',
+          width: '14vw'
         },
         {
-          top: '57%',
-          left: '38%',
-          width: '60px'
+          top: '114vw',
+          left: '38vw',
+          width: '14vw'
         }
       ]
     },
     5: {
       positions: [{
-          top: '34%',
-          left: '30%',
-          width: '58px'
+          top: '68vw',
+          left: '30vw',
+          width: '13vw'
         },
         {
-          top: '31%',
-          left: '52%',
-          width: '58px'
+          top: '62vw',
+          left: '52vw',
+          width: '13vw'
         },
         {
-          top: '55%',
-          left: '41%',
-          width: '58px'
+          top: '110vw',
+          left: '41vw',
+          width: '13vw'
         },
         {
-          top: '50%',
-          left: '66%',
-          width: '58px'
+          top: '99vw',
+          left: '66vw',
+          width: '13vw'
         }
       ]
     },
     6: {
       positions: [{
-          top: '38%',
-          left: '25%',
-          width: '50px'
+          top: '76vw',
+          left: '25vw',
+          width: '11vw'
         },
         {
-          top: '35%',
-          left: '42%',
-          width: '50px'
+          top: '70vw',
+          left: '42vw',
+          width: '11vw'
         },
         {
-          top: '35%',
-          left: '57%',
-          width: '50px'
+          top: '70vw',
+          left: '57.5vw',
+          width: '11vw'
         },
         {
-          top: '40%',
-          left: '67%',
-          width: '50px'
+          top: '80vw',
+          left: '67vw',
+          width: '11vw'
         },
         {
-          top: '49%',
-          left: '40%',
-          width: '50px'
+          top: '99vw',
+          left: '40.5vw',
+          width: '11vw'
         }
       ]
     },
@@ -112,114 +112,114 @@ const positionMaps = {
   xianxia: {
     1: {
       positions: [{
-          top: '42%',
-          left: '31%',
-          width: '76px'
+          top: '83vw',
+          left: '33vw',
+          width: '14vw'
         },
         {
-          top: '41%',
-          left: '58%',
-          width: '76px'
+          top: '81vw',
+          left: '59vw',
+          width: '14vw'
         }
       ]
     },
     2: {
       positions: [{
-          top: '36%',
-          left: '36%',
-          width: '70px'
+          top: '72vw',
+          left: '36vw',
+          width: '16vw'
         },
         {
-          top: '50%',
-          left: '54%',
-          width: '70px'
+          top: '99vw',
+          left: '54vw',
+          width: '16vw'
         }
       ]
     },
     3: {
       positions: [{
-          top: '34%',
-          left: '32%',
-          width: '72px'
+          top: '68vw',
+          left: '32vw',
+          width: '17vw'
         },
         {
-          top: '38%',
-          left: '55%',
-          width: '72px'
+          top: '75vw',
+          left: '55vw',
+          width: '17vw'
         },
         {
-          top: '55%',
-          left: '36%',
-          width: '72px'
+          top: '110vw',
+          left: '36vw',
+          width: '17vw'
         }
       ]
     },
     4: {
       positions: [{
-          top: '38%',
-          left: '36%',
-          width: '60px'
+          top: '75vw',
+          left: '36vw',
+          width: '14vw'
         },
         {
-          top: '40%',
-          left: '57%',
-          width: '60px'
+          top: '80vw',
+          left: '57vw',
+          width: '14vw'
         },
         {
-          top: '56%',
-          left: '41%',
-          width: '60px'
+          top: '111vw',
+          left: '41vw',
+          width: '14vw'
         }
       ]
     },
     5: {
       positions: [{
-          top: '39%',
-          left: '27%',
-          width: '58px'
+          top: '78vw',
+          left: '27vw',
+          width: '13vw'
         },
         {
-          top: '36%',
-          left: '53%',
-          width: '58px'
+          top: '72vw',
+          left: '53vw',
+          width: '13vw'
         },
         {
-          top: '50%',
-          left: '44%',
-          width: '58px'
+          top: '101vw',
+          left: '45vw',
+          width: '13vw'
         },
         {
-          top: '43%',
-          left: '67%',
-          width: '58px'
+          top: '86vw',
+          left: '68vw',
+          width: '13vw'
         }
       ]
     },
     6: {
       positions: [{
-          top: '38%',
-          left: '34%',
-          width: '50px'
+          top: '75vw',
+          left: '34vw',
+          width: '11vw'
         },
         {
-          top: '33%',
-          left: '51.6%',
-          width: '50px'
+          top: '66vw',
+          left: '52.4vw',
+          width: '11vw'
         },
         {
-          top: '36%',
-          left: '69%',
-          width: '50px'
+          top: '72vw',
+          left: '70vw',
+          width: '11vw'
         },
         {
-          top: '48%',
-          left: '26%',
-          width: '50px'
+          top: '95vw',
+          left: '27vw',
+          width: '11vw'
         },
         {
-          top: '51%',
-          left: '53%',
-          width: '50px'
+          top: '102vw',
+          left: '53vw',
+          width: '11vw'
         }
       ]
     },
@@ -227,109 +227,109 @@ const positionMaps = {
   fugu: {
     1: {
       positions: [{
-          top: '30%',
-          left: '38%',
-          width: '70px'
+          top: '60vw',
+          left: '38vw',
+          width: '16vw'
         },
         {
-          top: '36%',
-          left: '54%',
-          width: '70px'
+          top: '72vw',
+          left: '54vw',
+          width: '16vw'
         }
       ]
     },
     2: {
       positions: [{
-          top: '40%',
-          left: '32%',
-          width: '74px'
+          top: '80vw',
+          left: '32vw',
+          width: '17vw'
         },
         {
-          top: '40%',
-          left: '51%',
-          width: '74px'
+          top: '80vw',
+          left: '51vw',
+          width: '17vw'
         }
       ]
     },
     3: {
       positions: [{
-          top: '39%',
-          left: '39%',
-          width: '72px'
+          top: '79vw',
+          left: '39vw',
+          width: '17vw'
         },
         {
-          top: '46%',
-          left: '59%',
-          width: '72px'
+          top: '92vw',
+          left: '59vw',
+          width: '17vw'
         }
       ]
     },
     4: {
       positions: [{
-          top: '41%',
-          left: '28%',
-          width: '60px'
+          top: '83vw',
+          left: '28vw',
+          width: '14vw'
         },
         {
-          top: '31%',
-          left: '54%',
-          width: '60px'
+          top: '62vw',
+          left: '54vw',
+          width: '14vw'
         },
         {
-          top: '41%',
-          left: '68%',
-          width: '60px'
+          top: '83vw',
+          left: '68vw',
+          width: '14vw'
         }
       ]
     },
     5: {
       positions: [{
-          top: '30%',
-          left: '33%',
-          width: '58px'
+          top: '60vw',
+          left: '34vw',
+          width: '13vw'
         },
         {
-          top: '34%',
-          left: '52%',
-          width: '58px'
+          top: '68vw',
+          left: '53vw',
+          width: '13vw'
         },
         {
-          top: '45%',
-          left: '30.5%',
-          width: '58px'
+          top: '90vw',
+          left: '30.5vw',
+          width: '13vw'
         },
         {
-          top: '48.5%',
-          left: '57%',
-          width: '58px'
+          top: '98vw',
+          left: '57vw',
+          width: '13vw'
         }
       ]
     },
     6: {
       positions: [{
-          top: '29%',
-          left: '48%',
-          width: '50px'
+          top: '59vw',
+          left: '48.5vw',
+          width: '11vw'
         },
         {
-          top: '32%',
-          left: '68.6%',
-          width: '50px'
+          top: '64vw',
+          left: '69.6vw',
+          width: '11vw'
         },
         {
-          top: '44.5%',
-          left: '33%',
-          width: '50px'
+          top: '89vw',
+          left: '33.5vw',
+          width: '11vw'
         },
         {
-          top: '46.2%',
-          left: '47.4%',
-          width: '50px'
+          top: '93vw',
+          left: '48vw',
+          width: '11vw'
         },
         {
-          top: '52%',
-          left: '61%',
-          width: '50px'
+          top: '105vw',
+          left: '61.5vw',
+          width: '11vw'
         }
       ]
     },
@@ -337,109 +337,109 @@ const positionMaps = {
   xinzhongshi: {
     1: {
       positions: [{
-          top: '46%',
-          left: '31%',
-          width: '70px'
+          top: '92vw',
+          left: '31vw',
+          width: '16vw'
         },
         {
-          top: '41%',
-          left: '47%',
-          width: '70px'
+          top: '83vw',
+          left: '47vw',
+          width: '16vw'
         }
       ]
     },
     2: {
       positions: [{
-          top: '53%',
-          left: '28%',
-          width: '74px'
+          top: '107vw',
+          left: '28vw',
+          width: '17vw'
         },
         {
-          top: '34%',
-          left: '45%',
-          width: '74px'
+          top: '68vw',
+          left: '45vw',
+          width: '17vw'
         }
       ]
     },
     3: {
       positions: [{
-          top: '42%',
-          left: '34%',
-          width: '48px'
+          top: '85vw',
+          left: '34vw',
+          width: '12vw'
         },
         {
-          top: '43.5%',
-          left: '58.5%',
-          width: '48px'
+          top: '88vw',
+          left: '58.5vw',
+          width: '12vw'
         }
       ]
     },
     4: {
       positions: [{
-          top: '34%',
-          left: '36.5%',
-          width: '60px'
+          top: '68vw',
+          left: '36.5vw',
+          width: '14vw'
         },
         {
-          top: '37.5%',
-          left: '58%',
-          width: '60px'
+          top: '76vw',
+          left: '58vw',
+          width: '14vw'
         },
         {
-          top: '54%',
-          left: '49%',
-          width: '60px'
+          top: '109vw',
+          left: '49vw',
+          width: '14vw'
         }
       ]
     },
     5: {
       positions: [{
-          top: '37%',
-          left: '47%',
-          width: '44px'
+          top: '74vw',
+          left: '47vw',
+          width: '10vw'
         },
         {
-          top: '36.5%',
-          left: '66%',
-          width: '44px'
+          top: '73vw',
+          left: '66vw',
+          width: '10vw'
         },
         {
-          top: '43%',
-          left: '30.5%',
-          width: '44px'
+          top: '86vw',
+          left: '30.5vw',
+          width: '10vw'
         },
         {
-          top: '49%',
-          left: '59%',
-          width: '44px'
+          top: '99vw',
+          left: '59vw',
+          width: '10vw'
         }
       ]
     },
     6: {
       positions: [{
-          top: '38%',
-          left: '25%',
-          width: '48px'
+          top: '75vw',
+          left: '25vw',
+          width: '12vw'
         },
         {
-          top: '37%',
-          left: '46.6%',
-          width: '48px'
+          top: '74vw',
+          left: '46.6vw',
+          width: '12vw'
         },
         {
-          top: '48.5%',
-          left: '25%',
-          width: '48px'
+          top: '98vw',
+          left: '25vw',
+          width: '12vw'
         },
         {
-          top: '54%',
-          left: '43%',
-          width: '48px'
+          top: '109vw',
+          left: '43vw',
+          width: '12vw'
         },
         {
-          top: '45%',
-          left: '65%',
-          width: '48px'
+          top: '90vw',
+          left: '65vw',
+          width: '12vw'
         }
       ]
     },
@@ -447,109 +447,109 @@ const positionMaps = {
   luying: {
     1: {
       positions: [{
-          top: '44%',
-          left: '33%',
-          width: '70px'
+          top: '89vw',
+          left: '33vw',
+          width: '16vw'
         },
         {
-          top: '48%',
-          left: '49%',
-          width: '70px'
+          top: '96vw',
+          left: '49vw',
+          width: '16vw'
         }
       ]
     },
     2: {
       positions: [{
-          top: '43.5%',
-          left: '32%',
-          width: '74px'
+          top: '88vw',
+          left: '33vw',
+          width: '17vw'
         },
         {
-          top: '52%',
-          left: '57%',
-          width: '74px'
+          top: '104vw',
+          left: '58vw',
+          width: '17vw'
         }
       ]
     },
     3: {
       positions: [{
-          top: '45%',
-          left: '38%',
-          width: '74px'
+          top: '90vw',
+          left: '38vw',
+          width: '17vw'
         },
         {
-          top: '45.5%',
-          left: '55.5%',
-          width: '74px'
+          top: '91vw',
+          left: '55.5vw',
+          width: '17vw'
         }
       ]
     },
     4: {
       positions: [{
-          top: '40%',
-          left: '28.5%',
-          width: '60px'
+          top: '80vw',
+          left: '28.5vw',
+          width: '14vw'
         },
         {
-          top: '39.5%',
-          left: '56%',
-          width: '60px'
+          top: '79vw',
+          left: '56vw',
+          width: '14vw'
         },
         {
-          top: '49%',
-          left: '44%',
-          width: '60px'
+          top: '99vw',
+          left: '44vw',
+          width: '14vw'
         }
       ]
     },
     5: {
       positions: [{
-          top: '45.7%',
-          left: '24%',
-          width: '44px'
+          top: '91vw',
+          left: '24vw',
+          width: '10vw'
         },
         {
-          top: '43%',
-          left: '61%',
-          width: '44px'
+          top: '86vw',
+          left: '61vw',
+          width: '10vw'
         },
         {
-          top: '53%',
-          left: '34.5%',
-          width: '44px'
+          top: '107vw',
+          left: '34.5vw',
+          width: '10vw'
         },
         {
-          top: '51%',
-          left: '49%',
-          width: '44px'
+          top: '102vw',
+          left: '49.5vw',
+          width: '10vw'
         }
       ]
     },
     6: {
       positions: [{
-          top: '37.5%',
-          left: '42%',
-          width: '48px'
+          top: '76vw',
+          left: '42vw',
+          width: '12vw'
         },
         {
-          top: '39%',
-          left: '62.6%',
-          width: '48px'
+          top: '79vw',
+          left: '62.6vw',
+          width: '12vw'
         },
         {
-          top: '46.5%',
-          left: '27%',
-          width: '48px'
+          top: '93vw',
+          left: '27vw',
+          width: '12vw'
         },
         {
-          top: '47.4%',
-          left: '50%',
-          width: '48px'
+          top: '95vw',
+          left: '50vw',
+          width: '12vw'
         },
         {
-          top: '53.5%',
-          left: '67%',
-          width: '48px'
+          top: '108vw',
+          left: '68vw',
+          width: '12vw'
         }
       ]
     },
@@ -557,104 +557,104 @@ const positionMaps = {
   paidui: {
     1: {
       positions: [{
-          top: '41%',
-          left: '31%',
-          width: '70px'
+          top: '83vw',
+          left: '31vw',
+          width: '16vw'
         },
         {
-          top: '37%',
-          left: '47%',
-          width: '70px'
+          top: '74vw',
+          left: '47vw',
+          width: '16vw'
         }
       ]
     },
     2: {
       positions: [{
-          top: '44%',
-          left: '34%',
-          width: '74px'
+          top: '89vw',
+          left: '34vw',
+          width: '17vw'
         },
         {
-          top: '43.5%',
-          left: '52%',
-          width: '74px'
+          top: '88vw',
+          left: '52vw',
+          width: '17vw'
         }
       ]
     },
     3: {
       positions: [{
-          top: '51%',
-          left: '29%',
-          width: '60px'
+          top: '102vw',
+          left: '29vw',
+          width: '14vw'
         },
         {
-          top: '35.2%',
-          left: '49.5%',
-          width: '60px'
+          top: '71vw',
+          left: '49.5vw',
+          width: '14vw'
         }
       ]
     },
     4: {
       positions: [{
-          top: '36%',
-          left: '36.5%',
-          width: '60px'
+          top: '72vw',
+          left: '36.5vw',
+          width: '14vw'
         },
         {
-          top: '39.5%',
-          left: '54%',
-          width: '60px'
+          top: '79vw',
+          left: '54vw',
+          width: '14vw'
         },
         {
-          top: '52%',
-          left: '47%',
-          width: '60px'
+          top: '105vw',
+          left: '47vw',
+          width: '14vw'
         }
       ]
     },
     5: {
       positions: [{
-          top: '40%',
-          left: '27.5%',
-          width: '60px'
+          top: '80vw',
+          left: '27.5vw',
+          width: '14vw'
         },
         {
-          top: '36.5%',
-          left: '42%',
-          width: '60px'
+          top: '73vw',
+          left: '42vw',
+          width: '14vw'
         },
         {
-          top: '42%',
-          left: '62.5%',
-          width: '60px'
+          top: '85vw',
+          left: '62.5vw',
+          width: '14vw'
         }
       ]
     },
     6: {
       positions: [{
-          top: '35%',
-          left: '28%',
-          width: '46px'
+          top: '70vw',
+          left: '28vw',
+          width: '11vw'
         },
         {
-          top: '37%',
-          left: '55.6%',
-          width: '46px'
+          top: '74vw',
+          left: '55.6vw',
+          width: '11vw'
         },
         {
-          top: '46.5%',
-          left: '36%',
-          width: '46px'
+          top: '93vw',
+          left: '36vw',
+          width: '11vw'
         },
         {
-          top: '48.5%',
-          left: '52%',
-          width: '46px'
+          top: '98vw',
+          left: '52vw',
+          width: '11vw'
         },
         {
-          top: '50%',
-          left: '71%',
-          width: '46px'
+          top: '99vw',
+          left: '71vw',
+          width: '11vw'
         }
       ]
     },