feat:优化UI

src/views/goods/infoSet.vue

@@ -11,10 +11,14 @@
 
     <el-card class="detail-card">
       <div class="detail">
-        <div class="detail_title">{{ `名称：${goodsParams.name || ''}` }}</div>
+        <div class="desc" >
+          <div class="detail_title" style="min-width: 80px; text-align: end">钱币名称：</div>
+          <div class="detail_title">{{ goodsParams.name }}</div>
+        </div>
+
         <div class="desc">
-          <div class="detail_desc">详细介绍：</div>
-          <div class="detail_desc-content" v-html="goodsParams.detail"/>
+          <div class="detail_desc-content" style="min-width: 80px">详细介绍：</div>
+          <div class="detail_desc-content">{{ goodsParams.detail | trimHtml }}</div>
         </div>
 
         <div class="detail_image">
@@ -221,6 +225,13 @@ import CheckLargeImageDialog from './components/CheckLargeImageDialog'
 export default {
   name: 'InfoSet',
   components: { CheckLargeImageDialog, SelectImageDialog, VuePictureCut, VuePictureCutMask, VuePictureCutMenu },
+  filters: {
+    trimHtml(html_str) {
+      var text = html_str.replace(/<[^<>]+>/g, '')
+      // console.log(text);
+      return text
+    }
+  },
   data() {
     return {
       pictureCut: null,
@@ -258,7 +269,6 @@ export default {
       isFixed: false
     }
   },
-
   computed: {
     headers() {
       return {
@@ -615,21 +625,25 @@ export default {
   .desc {
     display: flex;
     flex-direction: row;
+    align-content: start;
+    margin-top: 15px;
     .detail_desc-content {
       font-weight: normal;
       font-size: 16px;
       padding: 0px;
+      margin: 0;
     }
+
   }
   .detail_desc-html {
     width: auto;
   }
   .detail_title {
+
     font-weight: bold;
   }
 
   .detail_desc {
-    margin-top: 15px;
     font-weight: normal;
     font-size: 16px;
   }
@@ -642,6 +656,7 @@ export default {
       margin-top: 15px;
     }
     .list {
+      margin-top: 10px;
       .select_item {
         width: 100px;
         height: 100px;