From 6087dcd92c5d7ba862f61ce998350c1d81da9556 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Wed, 3 Aug 2022 15:46:43 +0800
Subject: [PATCH] =?UTF-8?q?style(=E6=A8=A1=E6=9D=BF=E5=B8=82=E5=9C=BA):=20?=
 =?UTF-8?q?=E6=A8=A1=E6=9D=BF=E5=AE=9E=E4=BE=8B=E5=8F=AF=E4=BB=A5=E4=BF=9D?=
 =?UTF-8?q?=E6=8C=81=E5=AE=BD=E9=AB=98=E6=AF=94=E4=BC=B8=E7=BC=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/TemplateMarketItem.vue             | 16 +++++++++++-----
 .../src/views/panel/templateMarket/index.vue     | 10 ++++++----
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/frontend/src/views/panel/templateMarket/component/TemplateMarketItem.vue b/frontend/src/views/panel/templateMarket/component/TemplateMarketItem.vue
index a9d9d8ce9b..333334b857 100644
--- a/frontend/src/views/panel/templateMarket/component/TemplateMarketItem.vue
+++ b/frontend/src/views/panel/templateMarket/component/TemplateMarketItem.vue
@@ -25,6 +25,9 @@ export default {
     },
     baseUrl: {
       type: String
+    },
+    width: {
+      type: Number
     }
   },
   data() {
@@ -34,6 +37,8 @@ export default {
   computed: {
     classBackground() {
       return {
+        width: this.width + 'px',
+        height: this.width * 0.58 + 'px',
         background: `url(${this.thumbnailUrl}) no-repeat`,
         'background-size': `100% 100%`
       }
@@ -66,12 +71,12 @@ export default {
   .testcase-template {
     position: relative;
     display: inline-block;
-    margin: 24px 0 0 0;
+    margin: 0;
     box-shadow: 0 0 2px 0 rgba(31,31,31,0.15), 0 1px 2px 0 rgba(31,31,31,0.15);
     border: solid 2px #fff;
     box-sizing: border-box;
     border-radius: 4px;
-    height: 256px;
+    width: 100%;
   }
 
   .demonstration {
@@ -87,8 +92,6 @@ export default {
 
   .template-img {
     background-size: 100% 100%;
-    height: 180px;
-    width: 318px;
     margin: 0 auto;
     border: solid 2px #fff;
     box-sizing: border-box;
@@ -110,7 +113,10 @@ export default {
     position:absolute;
     bottom: 5px;
     left: 0px;
-    width: 318px;
+    width: 100%;
   }
 
+  .bottom-area{
+    height: 75px;
+  }
 </style>
diff --git a/frontend/src/views/panel/templateMarket/index.vue b/frontend/src/views/panel/templateMarket/index.vue
index c026bf1b49..6e34c31f9f 100644
--- a/frontend/src/views/panel/templateMarket/index.vue
+++ b/frontend/src/views/panel/templateMarket/index.vue
@@ -22,12 +22,13 @@
           v-for="(templateItem) in currentMarketTemplateShowList"
           v-show="templateItem.showFlag"
           :key="templateItem.id"
-          style="text-align: center"
+          style="text-align: center;padding: 24px 12px 0 12px"
           :style="{width: templateSpan}"
         >
           <template-market-item
             :template="templateItem"
             :base-url="baseUrl"
+            :width="templateCurWidth"
             @templateApply="templateApply"
             @templatePreview="templatePreview"
           />
@@ -85,7 +86,6 @@ import { groupTree, panelSave } from '@/api/panel/panel'
 import { DEFAULT_COMMON_CANVAS_STYLE_STRING } from '@/views/panel/panel'
 import MarketPreview from '@/views/panel/templateMarket/component/MarketPreview'
 import elementResizeDetectorMaker from 'element-resize-detector'
-import { PHONE_REGEX } from '@/utils/validate'
 
 export default {
   name: 'TemplateMarket',
@@ -94,6 +94,7 @@ export default {
     return {
       hasResult: true,
       templateMiniWidth: 330,
+      templateCurWidth: 310,
       templateSpan: '25%',
       previewModel: false,
       previewVisible: false,
@@ -155,8 +156,9 @@ export default {
     // 监听div变动事件
     erd.listenTo(templateMainDom, element => {
       _this.$nextTick(() => {
+        const curSeparator = Math.trunc(templateMainDom.offsetWidth / _this.templateMiniWidth)
         _this.templateSpan = (100 / Math.trunc(templateMainDom.offsetWidth / _this.templateMiniWidth)) + '%'
-        console.log('templateSpan=' + _this.templateSpan)
+        _this.templateCurWidth = Math.trunc(templateMainDom.offsetWidth / curSeparator) - 32
       })
     })
   },
@@ -260,7 +262,7 @@ export default {
   .template-main{
     text-align: center;
     border-radius: 4px;
-    padding-bottom: 24px;
+    padding: 0 12px 24px 12px;
     height: calc(100vh - 190px)!important;
     overflow-x: hidden;
     overflow-y: auto;