详情标题展示

src/views/asset/Detail.vue

@@ -61,7 +61,7 @@
                 <div class="list_of_details_one_title">
                         <img :src="require('@assets/zuo@3x.png')" alt="" class="list_of_details_one_title_img" />
                         <div>
-                            <div class="list_of_details_one_title_con">{{ info.name }}</div>
+                            <div :class="infoNameLength?'list_of_details_one_title_cons':'list_of_details_one_title_con'">{{ info.name }}</div>
                             <div class="list_of_details_one_text" v-if="!info.consignment">
                                 <img
                                     :src="require('@assets/blockchain@3x.png')"
@@ -450,7 +450,7 @@
                 <div class="list_of_details_one_title">
                         <img :src="require('@assets/zuo@3x.png')" alt="" class="list_of_details_one_title_img" />
                         <div>
-                            <div class="list_of_details_one_title_con">{{ info.name }}</div>
+                            <div :class="infoNameLength?'list_of_details_one_title_cons':'list_of_details_one_title_con'">{{ info.name }}</div>
                             <div class="list_of_details_one_text">
                                 <img
                                     :src="require('@assets/blockchain@3x.png')"
@@ -842,7 +842,8 @@ export default {
             giftCollection: false,
             giftSuccess: require('@assets/zengsongchenggong@3x.png'),
             giftFailed: require('@assets/zengsongshibai@3x.png'),
-            collectionStatus: ''
+            collectionStatus: '',
+            infoNameLength: false
         };
     },
     computed: {
@@ -1148,7 +1149,11 @@ export default {
                         return item.name !== '悄悄话';
                     });
                 }
-
+                if (this.info.name.length > 14) {
+                        this.infoNameLength = true;
+                    } else {
+                        this.infoNameLength = false;
+                    }
                 this.$nextTick(() => {
                     if (this.isBuy) {
                         this.btn = this.$refs.btn;
@@ -1296,6 +1301,20 @@ export default {
                     color: #ffffff;
                     line-height: 28px;
                 }
+                .list_of_details_one_title_cons {
+                    width: 100%;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    text-align: center;
+                    margin-bottom: 4px;
+                    height: 28px;
+                    font-size: 16px;
+                    font-family: PingFangSC-Semibold, PingFang SC;
+                    font-weight: 600;
+                    color: #ffffff;
+                    line-height: 28px;
+                }
                 .list_of_details_one_text {
                     display: flex;
                     justify-content: center;