验收修改

app.html

@@ -6,6 +6,7 @@
   <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/element-ui/1.3.7/theme-default/index.css"/>
   <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_0d1jjt5tukcblnmi.css"/>
   <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.css"/>
+  <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_452262_1qlk0md3oua6ecdi.css"/>
   {{ HEAD }}
   <script>
     var _hmt = _hmt || [];

components/product/component/ComponentDetail.vue

@@ -17,10 +17,10 @@
             <div class="message-detail" v-if="list.brand">
               <div class="message-item">品牌</div>
               <div class="colon">:</div>
-              <div><a class="message-body blue" target="_blank" :href="`/product/brand/${list.brand.uuid}`">{{list.brand.nameCn}}</a></div>
+              <div :title="list.brand.nameCn"><a class="message-body blue" target="_blank" :href="`/product/brand/${list.brand.uuid}`">{{list.brand.nameCn}}</a></div>
             </div>
             <div class="message-detail">
-              <div class="message-item">供货状态</div>
+              <div class="message-item">产品生命周期</div>
               <div class="colon">:</div>
               <div class="message-body">
                 {{list.lifecycle | lifecycleFilter}}
@@ -35,10 +35,10 @@
               <div class="message-item">产品描述</div>
               <div class="colon">:</div>
               <div class="description" @click="showMoreDesc = true" v-if="!showMoreDesc">{{store.description | descriptionFilter}}
-                <span @click="showMoreDesc = false" ><i class="fa fa-angle-down"></i><span>展开</span></span>
+                <span @click="showMoreDesc = false" ><i class="iconfont icon-shouqi1"></i><span>展开</span></span>
               </div>
               <div class="description more-description" v-else>{{store.description}}
-                <span @click="showMoreDesc = false" ><i class="fa fa-angle-up"></i><span>收起</span></span>
+                <span @click="showMoreDesc = false" ><i class="iconfont icon-shouqi"></i><span>收起</span></span>
               </div>
             </div>
             <div class="message-detail">
@@ -59,12 +59,12 @@
       </div>
       <div class="product-params">
         <p class="product-params-header">产品参数<span>（仅供参考，以实际产品为准）</span>
-          <span class="show-more-param" @click="showMoreParam = !showMoreParam"><span>{{showMoreParam?'收起':'更多'}}</span><i class="fa" :class="{'fa fa-angle-down': !showMoreParam,'fa fa-angle-up': showMoreParam }"></i></span>
+          <span v-if="list.properties && list.properties.length > 6" class="show-more-param" @click="showMoreParam = !showMoreParam"><span>{{showMoreParam?'收起':'更多'}}</span><i class="fa" :class="{'fa fa-angle-down': !showMoreParam,'fa fa-angle-up': showMoreParam }"></i></span>
         </p>
         <ul>
-          <li v-for="prop in properties" v-if="prop.value">
-            <span>{{prop.property.labelCn}}</span>
-            <span>{{prop.value}}</span>
+          <li v-for="prop in properties">
+            <span>{{prop.property.labelCn || '-'}}</span>
+            <span>{{prop.value || '-'}}</span>
           </li>
         </ul>
       </div>
@@ -100,6 +100,7 @@
         return this.$store.state.componentDetail.detail
       },
       list () {
+        console.log(this.lists.data)
         return this.lists.data
       },
       properties () {
@@ -255,7 +256,7 @@
   }
   .componentDetail .container .component-message .message-item {
     float:left;
-    width:60px;
+    min-width: 60px;
     text-align: justify;
     text-align-last: justify;
     font-size: 14px;
@@ -267,6 +268,10 @@
   .componentDetail .container .component-message .message-body {
     float: left;
     font-size: 14px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 50px;
   }
   .componentDetail .container .component-message .message-body >img {
     cursor: pointer;
@@ -280,15 +285,7 @@
     float: right;
   }
   .componentDetail .container .component-message .description >span >i {
-    margin-left: 5px;
-    font-size: 16px;
     color: #5078cb;
-    width: 15px;
-    height: 15px;
-    border: 1px solid #5078cb;
-    line-height: 13px;
-    border-radius: 100%;
-    text-align: center;
   }
   .componentDetail .container .component-message .description >span >span {
     color: #5078cb;
@@ -296,6 +293,7 @@
   .componentDetail .container .component-message .description.more-description {
     padding: 13px 13px 30px 13px;
     border: 1px solid #e5e5e5;
+    border-top: none;
     position: absolute;
     right: 137px;
     width: 500px;
@@ -411,6 +409,10 @@
     line-height: 32px;
     text-align: center;
     border-right: 1px solid #e5e5e5;
+    vertical-align: middle;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
   .product-params >ul li:nth-child(4n), .product-params >ul li:nth-child(4n-1) {
     background: #f5f6f8;