style(模板市场): 模板实例可以保持宽高比伸缩

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>

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;