feat: There is no way the,Laws

src/pages/details/otherLawsStandDetails/index.vue

@@ -6,8 +6,8 @@
       <span>{{sarStandardsInfoEO.lawsNumber}}-{{sarStandardsInfoEO.lawsYear}} 《{{sarStandardsInfoEO.lawsName}}》 企标详情</span>
     </div>
     <!--主体内容-->
-    <div class="details-content">
+    <div class="details-content" style="position: relative">
-      <div class="details-content-modular basic-information">
+      <div class="details-content-modular basic-information" style="border-top: 2px dashed #D1D1D1;">
       </div>
       <div
         class="details-content-modular clearfix"
@@ -15,6 +15,19 @@
         :key="index"
         v-if="item.isShowImp === '0'"
       >
+        <el-collapse v-model="activeNames" @change="handleChange">
+          <div v-if="item.label === '基础信息'" class="details-content-modular basic-information"
+               style="border-top:none;position: absolute;right: 36px;border: none">
+            <div class="modular-header" style="height: 50px;">
+              <div class="modular-header-btn">
+                <el-button v-if="sarStandardsInfoEO.collectId" @click="collectClick(sarStandardsInfoEO.collectId)" title="取消收藏" class="collection-btn" icon="icon-collection" :loading="isSubmit"></el-button>
+                <el-button v-else @click="collectClick()" title="收藏" class="collection-btn" icon="el-icon-star-off" :loading="isSubmit"></el-button>
+                <el-button class="relation-btn" icon="icon-relation" @click="relateEvent()">更新LOG</el-button>
+              </div>
+            </div>
+          </div>
+          <el-collapse-item  :name="item.label" @click.native="handleChange1(item.label)">
+            <template slot="title">
               <div class="modular-header" v-if="item.label !== '基础信息'">
                 <div class="modular-header-title"><i class="icon-modular-title"/><span>{{ item.label }}</span></div>
               </div>
@@ -22,20 +35,16 @@
                 <div class="modular-header-title"><i class="icon-modular-title"/><span>{{ item.label }}</span></div>
                 <!-- <div class="modular-header-title"><i class="icon-modular-title" /><span>企标信息</span>-->
                 <!--              </div>-->
-          <div class="modular-header-btn">
-            <el-button v-if="sarStandardsInfoEO.collectId" @click="collectClick(sarStandardsInfoEO.collectId)" title="取消收藏" class="collection-btn" icon="icon-collection" :loading="isSubmit"></el-button>
-            <el-button v-else @click="collectClick()" title="收藏" class="collection-btn" icon="el-icon-star-off" :loading="isSubmit"></el-button>
-            <el-button class="relation-btn" icon="icon-relation" @click="relateEvent()">更新LOG</el-button>
-          </div>
               </div>
+            </template>
             <div class="modular-content">
               <template v-if = "item.label === '基础信息'">
-            <div class="details-content-modular basic-information" style="margin-bottom: 0">
+                <div class="details-content-modular basic-information" style="margin-bottom: 0;border: none">
                   <div class="basic-information-content">
                     <p style="color: #C42626;" class="half"><label style=" margin-right: 157px;">政策编号</label><span>{{ sarStandardsInfoEO.lawsNumber }}</span></p>
                     <p class="half"><label style=" margin-right: 157px;">政策文号</label><span>{{ sarStandardsInfoEO.lawsNo || '-' }}</span></p>
                     <p><label style=" margin-right: 157px;">中文名称</label><span>{{ sarStandardsInfoEO.lawsName || '-' }}</span></p>
-              <p style="border: none;"><label style=" margin-right: 157px;">英文名称</label><span>{{ sarStandardsInfoEO.lawsEnName || '-' }}</span></p>
+                    <p v-if="activeState" style=""><label style=" margin-right: 157px;">英文名称</label><span>{{ sarStandardsInfoEO.lawsEnName || '-' }}</span></p>
                     <p class="half"><label style=" margin-right: 157px;">发文日期</label><span>{{ sarStandardsInfoEO.issueTime || '-' }}</span></p>
                     <p class="half"><label style=" margin-right: 157px;">发文单位</label><span>{{ sarStandardsInfoEO.issueCompany || '-' }}</span></p>
                     <p class="half"><label style=" margin-right: 157px;">发文单位</label><span>{{ sarStandardsInfoEO.issueCompany || '-' }}</span></p>
@@ -63,8 +72,7 @@
               >
                 <div
                         :key="childIndex"
-              class="modular-item"
+                        :class="item.label !== '过程稿件' ? 'modular-item half' : 'modular-item'"
-              :class="halfClass(child, item.child[childIndex + 1], childIndex)"
                 >
                   <label class="modular-content-p-name" :title="child.attrName">{{ child.attrName }}</label>
                   <span
@@ -150,6 +158,8 @@
 
               </template>
             </div>
+          </el-collapse-item>
+        </el-collapse>
       </div>
     </div>
     <div v-show="!isMoreAwayBtn" class="more" @click="moreClick">更多<img src="@/assets/images/shangqi/img/more.png"></div>
@@ -886,13 +896,26 @@ export default {
   components: {
     PutQuestionButton
   },
+  filters: {
+    ellipsis (value) {
+      if (!value) return ''
+      if (value.length > 12) {
+        return value.slice(0,12) + '...'
+      }
+      return value
+    }
+  },
   data () {
     return {
+      activeNames: ['基础信息'],
+      activeState: false,
       visiblePlanCheck: false,
       form: {},
       relateDialog: false,
+      relateDialog1: false,
       relateList: [],
       relateNowList: [],
+      relateNowList1: [],
       sarType: sarType,
       loading: true,
       showItemInfoModal: false,
@@ -1091,6 +1114,14 @@ export default {
   watch: {
   },
   methods: {
+    handleChange(val) {
+      console.log(val)
+    },
+    handleChange1(val) {
+      if(val && val === '基础信息'){
+        this.activeState = true
+      }
+    },
     getPlanStatusName(status) {
       switch (status) {
         case "1":
@@ -2097,6 +2128,62 @@ export default {
 <style lang="less" scoped>
 @import '~@/assets/styles/mixins';
 @import '~@/assets/styles/style';
+/deep/ .el-collapse{
+  border: none;
+}
+
+/deep/ .el-collapse-item__wrap{
+  border: none;
+}
+/deep/ .decomposition-btn {
+  position: absolute;
+  top: 6px;
+  right: 0;
+  padding: 0 10px;
+  height: 30px;
+  line-height: 30px;
+  font-size: 14px;
+  color: #07C160;
+  border: 1px solid #07C160;
+  background: rgba(1, 193, 96, 0.1);
+
+  /deep/ .icon-separate {
+    display: inline-block;
+    margin-right: 3px;
+    width: 16px;
+    height: 16px;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    background-position: center center;
+    vertical-align: sub;
+    background-image: url("~assets/images/shangqi/standardDetails/separate.png");
+  }
+}
+/deep/ .icon-download {
+  display: inline-block;
+  margin-left: 3px;
+  width: 18px;
+  height: 16px;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-position: center center;
+  vertical-align: sub;
+  cursor: pointer;
+  background-image: url("~assets/images/shangqi/img/download.png");
+}
+
+/deep/ .icon-download2 {
+  display: inline-block;
+  margin-left: 3px;
+  width: 18px;
+  height: 16px;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-position: center center;
+  vertical-align: sub;
+  cursor: pointer;
+  background-image: url("~assets/images/shangqi/img/download2.png");
+}
 .other-standard-details{
   padding: 15px 30px 0;
   width: 1200px;
@@ -2120,6 +2207,7 @@ export default {
         display: flex;
         align-items: center;
         justify-content: space-between;
+        width: 100%;
         height: 50px;
         border-bottom: 1px solid #E5E5E5;
         .modular-header-title{
@@ -2134,7 +2222,8 @@ export default {
             background-size: 100% 100%;
             background-position: center center;
             background-image: url("~assets/images/shangqi/standardDetails/modular-title.png");
-            vertical-align: top;
+            position: relative;
+            top: 2px;
           }
           & > span{
             padding-left: 10px;
@@ -2201,8 +2290,8 @@ export default {
           .modular-content-p-name{
             display: inline-block;
             width: 220px;
-            height: 50px;
+            height: 43px;
-            line-height: 50px;
+            line-height: 43px;
             font-size: 16px;
             color: #333333;
             vertical-align: top;
@@ -2282,16 +2371,14 @@ export default {
       }
     }
     .basic-information{
-      /*border-top: 2px dashed #D1D1D1;*/
-      border-bottom: 2px dashed #D1D1D1;
       .modular-header{
         height: 60px;
         border-bottom: none;
       }
       .basic-information-content{
         & > p{
-          min-height: 55px;
+          min-height: 43px;
-          line-height: 55px;
+          line-height: 43px;
           border-bottom: 1px solid #E5E5E5;
         }
       }