update: 第四套模板

src/views/game/cmh/gameTemplate.vue

@@ -42,7 +42,7 @@
 
 <script>
 import img from '../../../components/upload/img.vue';
-const box6 = [
+const template3Box = [
   {
     left: '24%',
     top: '202px'
@@ -68,8 +68,8 @@ const box6 = [
     top: '338px'
   }
 ];
-
-const box9 = [
+const leftVal = 0;
+const template1Box = [
   {
     left: 'calc(51% - 0px)',
     top: '204px'
@@ -107,12 +107,92 @@ const box9 = [
     top: '390px'
   }
 ];
+const template2Box = [
+  {
+    left: 'calc(24.5% -0)',
+    top: '202px'
+  },
+  {
+    left: 'calc(50% -0)',
+    top: '202px'
+  },
+  {
+    left: 'calc(75.5% -0)',
+    top: '202px'
+  },
+  {
+    left: 'calc(24.5% -0)',
+    top: '287px'
+  },
+  {
+    left: 'calc(50% -0)',
+    top: '287px'
+  },
+  {
+    left: 'calc(75.5% -0)',
+    top: '287px'
+  },
+  {
+    left: 'calc(24.5% -0)',
+    top: '379px'
+  },
+  {
+    left: 'calc(50% -0)',
+    top: '379px'
+  },
+  {
+    left: 'calc(75.5% -0)',
+    top: '379px'
+  }
+];
+const template4Box = [
+  {
+    left: `calc(24.4% - ${leftVal}px)`,
+    top: '153px'
+  },
+  {
+    left: `calc(50% - ${leftVal}px)`,
+    top: '153px'
+  },
+  {
+    left: `calc(76.6% - ${leftVal}px)`,
+    top: '153px'
+  },
+  {
+    left: `calc(24.4% - ${leftVal}px)`,
+    top: '261px'
+  },
+  {
+    left: `calc(50% - ${leftVal}px)`,
+    top: '261px'
+  },
+  {
+    left: `calc(76.6% - ${leftVal}px)`,
+    top: '261px'
+  },
+  {
+    left: `calc(24.4% - ${leftVal}px)`,
+    top: '370px'
+  },
+  {
+    left: `calc(50% - ${leftVal}px)`,
+    top: '370px'
+  },
+  {
+    left: `calc(76.6% - ${leftVal}px)`,
+    top: '370px'
+  }
+];
 export default {
   components: { img },
   data() {
     return {
       list: ['刷卡拉拉卡', '阿拉卡萨卢克和史莱克', '刷卡拉拉卡', '阿拉卡萨卢克和史莱克'],
-      boxList: box9,
+      template1Box,
+      boxList: [],
+      template2Box,
+      template3Box,
+      template4Box,
       backImageUrl: '',
       noticeImageUrl: '',
       boxImg: '',
@@ -136,12 +216,8 @@ export default {
   },
   watch: {
     templateId(val) {
-      if (val == 1 || val == 2) {
-        this.boxList = box9;
-      }
-      if (val == 3) {
-        this.boxList = box6;
-      }
+      if (!val) return;
+      this.boxList = this['template' + val + 'Box'];
     },
     basicData: {
       deep: true,
@@ -281,8 +357,8 @@ img {
 .box-box img {
   position: absolute;
   transform: translate(-50%, 0);
-  width: 95px;
-  height: 95px;
+  width: 90px;
+  height: 90px;
   animation-timing-function: ease-in;
   /* animation-name: box-animation; */
   animation-duration: 1s;