update code

src/App.vue

@@ -25,4 +25,45 @@ html,body{
 #app {
   .size;
 }
+
+img{
+    width: 100%; height: 100%; max-width: 100%;
+}
+
+.max1{
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    word-break: break-all;
+}
+
+.max2{
+    text-overflow: -o-ellipsis-lastline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.title{
+  color: #333;
+}
+.article .title,.article .info{
+  text-align: center;
+  margin: 10px;
+}
+.article .info{
+  color: #999;
+}
+.article .content p{
+  text-indent: 2em;
+  margin-bottom: 20px;
+  line-height: 1.5rem;
+}
+.article .content span{
+  line-height: 1.5rem;
+}
+
 </style>

src/view/detail.vue

@@ -3,45 +3,38 @@
     <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
       <el-breadcrumb-item class="location">您的位置:</el-breadcrumb-item>
       <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-      <el-breadcrumb-item>关于我们</el-breadcrumb-item>
-      <el-breadcrumb-item>协会简介</el-breadcrumb-item>
+      <el-breadcrumb-item>详情</el-breadcrumb-item>
     </el-breadcrumb>
     <el-card class="article" shadow="never" style="border-radius: 8px">
-      <h2 class="title">上海市集成电路行业协会简介</h2>
-      <div class="info">作者：SICA&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;发布日期：2011年12月28日&nbsp;星期三</div>
-      <div class="content">
-        <p>
-          上海市集成电路行业协会SHANGHAI&nbsp;INTEGRATED&nbsp;CIRCUIT&nbsp;INDUSTRY&nbsp;ASSOCIATION&nbsp;(缩写：SICA)，成立于2001年4月，为本市从事集成电路设计、制造、封装、测试、智能卡及其设备材料和其它直接相关的企事业单位自愿参加并组织起来的，不以营利为目的行业性社会团体法人。
-        </p>
-        <p>
-          协会现有各种所有制会员单位485家。总投资为298.6亿美元，注册资金为137.6亿美元。从业人员总数达155473人，其中技术人员为64952人。根据所有制情况分类，中外合资、合作60家，外商独资204家，内资109家，民营112家。其中从事设计205家，晶圆制造13家，封装测试38家，设备材料98家，分立器件3家，智能卡22家，科研院所及其配套106家。485家会员中，理事单位147家。其中常务理事46家，包括会长单位1家,副会长单位25家。
-        </p>
-        <p>
-          协会下设设计、制造、封装测试、设备材料、智能卡五个专业委员会。协会有独立的网站、《集成电路应用》杂志会刊（月刊），以及每月一期的简报，及时发布行业信息。协会为企业进行政策服务和政策协调，积极帮助打通产业链，进行行业统计和分析工作，开展各种交流合作研讨活动和行业标准制定及知识产权保护等工作。
-        </p>
-        <span>
-          会长单位：上海华虹（集团）有限公司<br/>
-          会&nbsp;长：张素心<br/>法定代表人：雷海波<br/>
-          秘书长：徐&nbsp;&nbsp;伟<br/>
-          协会地址：上海市浦东新区&nbsp;张江&nbsp;碧波路500号209室，邮政编码：201203<br/>
-          电&nbsp;话：021-50805257<br/>
-          传&nbsp;真：021-50805259<br/>
-          电子邮件：contact&#64;sica.org.cn
-        </span>
+      <h2 class="title">{{detail.title}}</h2>
+      <div class="info">作者：{{detail.author}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;发布日期：{{detail.publishTime}}&nbsp;</div>
+      <div class="content" v-html="detail.content">
       </div>
-      <img src="../assets/img/psyv4oida1jvaj8n2mxkx2kjp8iqzpm0bfa27bc4b3-005e-42ef-b01b-b2ee10e9bd65.png" style="width: 100%;height: 300px;margin: 20px 0;border-radius: 10px" >
     </el-card>
   </el-main>
 </template>
 
 <script>
+import {getDetailRequest} from "../api/data";
 export default {
   data() {
-    return {}
+    return {
+        detail: {}
+    }
 
   },
+  methods: {
+      async getDetailRequest(id){
+          let res = await getDetailRequest(id)
+          if(res.code == 200){
+            this.detail = {...res.data}
+            this.detail.publishTime = this.$moment(Number(this.detail.publishTime)).format("YYYY年MM月DD日")
+          }
+      },
+  },
   mounted() {
     // alert(this.$route.query.id)
+    this.getDetailRequest(this.$route.query.id)
   }
 }
 </script>

src/view/news.vue

@@ -3,7 +3,8 @@
     <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
       <el-breadcrumb-item class="location">您的位置:</el-breadcrumb-item>
       <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-      <el-breadcrumb-item>新闻资讯</el-breadcrumb-item>
+      <el-breadcrumb-item @click.native="goToList()">新闻资讯</el-breadcrumb-item>
+      <el-breadcrumb-item v-if="isShow">详情</el-breadcrumb-item>
     </el-breadcrumb>
     <el-row class="card_menu">
       <el-col :span="4">
@@ -17,11 +18,14 @@
               {{item.channelName}}</div>
         </el-card>
       </el-col>
-      <el-col :span="20">
-        <el-card shadow="never" style="margin: 0 10px;">
+      <el-col :span="20" style="padding: 0 10px;">
+        <el-card shadow="never"  v-if="!isShow">
           <ul style="list-style: none">
-            <li style="padding: 10px;border-bottom: 1px solid #eee;margin: 5px 0" 
-            v-for="(item,index) in dataList" :key="index">{{ index+1 }}、{{item.title}}<span style="float:right">{{item.publishTime}}</span></li>
+            <li :to='"/detail?id="+item.id' style="padding: 10px;border-bottom: 1px solid #eee;margin: 5px 0" 
+            v-for="(item,index) in dataList" :key="index" @click="goToDetail(item)">
+            
+                {{ index+1 }}、{{item.title}} 
+            <span style="float:right">{{item.publishTime}}</span></li>
           </ul>
           <el-pagination
             background
@@ -29,6 +33,14 @@
             :total="total" prev-text="上一页" next-text="下一页" style="float: right;margin: 10px">
           </el-pagination>
         </el-card>
+
+
+        <el-card class="article" shadow="never" style="border-radius: 8px" v-if="isShow">
+            <h2 class="title">上海市集成电路行业协会简介</h2>
+            <div class="info">作者：SICA&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;发布日期：2011年12月28日&nbsp;星期三</div>
+            <div class="content" v-html="activeItem.content"></div>
+            </el-card>
+
       </el-col>
     </el-row>
   </el-main>
@@ -44,10 +56,20 @@ export default {
         titleList: [],
         activeIndex: 0,
         dataList: [],
-        total: 0
+        total: 0,
+        isShow: false,
+        activeItem: {}
     }
   },
   methods: {
+      goToList(){
+        this.isShow = false
+        this.$forceUpdate()
+      },
+      goToDetail(item){
+          this.isShow = true
+          this.activeItem = {...item}
+      },
       async getChannelsRequest(){
           let res = await getChannelsRequest({current:1,size:100})
           if(res.code == 200){

src/view/overview.vue

@@ -2,7 +2,7 @@
   <div>
     <el-carousel trigger="click" height="400px">
       <el-carousel-item v-for="(item,index) in lunBoList" :key="index">
-        <img :src="item.aboutImgUrl"/>
+        <img :src="item.aboutImgUrl" />
       </el-carousel-item>
     </el-carousel>
     <el-main style="width: 1200px;margin: 0 auto">
@@ -20,7 +20,7 @@
         </el-col>
         <el-col :span="12"><div class="grid-content bg-purple-light"></div>
           <el-card class="box-card" shadow="never" style="margin: 0 10px; position: relative;" :body-style="{ padding: '0px',height:'418px' }">
-            <img :src="imgObj.aboutImgUrl"/>
+            <img :src="imgObj.aboutImgUrl" />
             <div class="img_info">
                 <span class="img_text">{{imgObj.title}}</span>
             </div>
@@ -49,7 +49,7 @@
               <h2>
                 <router-link :to='"/detail?id="+hangDamic.id'>{{hangDamic.title}}</router-link>
               </h2>
-              <p v-html="hangDamic.content"></p>
+              <p v-html="hangDamic.content" class="max2"></p>
               <img :src="hangDamic.aboutImgUrl" style="border-radius: 10px;margin: 10px 0" width="100%"/>
             </el-card>
           </el-col>
@@ -60,11 +60,13 @@
                 <router-link to="/policy" style="float: right; padding: 3px 0;color: #999999;font-size: 12px" type="text">更多&gt;&gt;</router-link>
               </div>
               <div class="list" v-for="(item, index) in chanList" :key="index">
-                <h2 style="display: flex; flex-direction: row">
-                  <router-link :to='"/detail?id="+item.id'><span style="flex: 1">{{item.title}}</span></router-link>
+                <h2 style="display: flex; flex-direction: row; 
+                    width: 100%; align-items: center;">
+                  <router-link :to='"/detail?id="+item.id'><span  class="max2">{{item.title}}</span></router-link>
+                    <span style="flex: 1"></span>
                     <span class="time">{{item.publishTime}}</span>
                 </h2>
-                <p v-html="item.content"></p>
+                <p v-html="item.content" class="max2"></p>
               </div>
             </el-card>
           </el-col>
@@ -82,10 +84,13 @@
             <el-card class="box-card" shadow="never" v-for="(item, index) in hezuoList" :key="index"
             :body-style="{ padding: '0px 20px' }">
               <h2>
-                <router-link :to='"/detail?id="+item.id'><span style="flex: 1">{{item.title}}</span></router-link>
+                <router-link :to='"/detail?id="+item.id'>
+                <span style="flex: 1">{{item.title}}</span>
+                </router-link>
               </h2>
-              <p v-html="item.content"></p>
-              <img :src="item.aboutImgUrl" style="border-radius: 10px;margin: 10px 0" width="100%"/>
+              <p v-html="item.content" class="max2"></p>
+              <img :src="item.aboutImgUrl" 
+              style="border-radius: 10px;margin: 10px 0" width="100%"/>
             </el-card>
           </el-col>
           <el-col :span="8">
@@ -103,7 +108,7 @@
               <h2>
                 <router-link :to='"/detail?id="+item.id'>{{item.title}}</router-link>
               </h2>
-              <p v-html="item.content"></p>
+              <p v-html="item.content" class="max2"></p>
               <img :src="item.aboutImgUrl" style="border-radius: 10px;margin: 10px 0" width="100%"/>
             </el-card>
           </el-col>
@@ -121,7 +126,7 @@
             :body-style="{ padding: '0px 20px' }">
               <h2><router-link :to='"/detail?id="+item.id'>{{item.title}}</router-link>
               </h2>
-              <p v-html="item.content"></p>
+              <p v-html="item.content" class="max2"></p>
               <img :src="item.aboutImgUrl" style="border-radius: 10px;margin: 10px 0" width="100%"/>
             </el-card>
           </el-col>
@@ -136,14 +141,16 @@
                 <router-link to="/exchange" style="float: right; padding: 3px 0;color: #999999;font-size: 12px" type="text">更多&gt;&gt;</router-link>
               </div>
               <div class="list" v-for="(item, index) in hezuoList" :key="index">
-                <h2 style="display: flex; flex-direction: row">
+                <h2 style="display: flex; flex-direction: row; 
+                    width: 100%; align-items: center;">
                   <router-link :to='"/detail?id="+item.id'>
-                    <span style="flex: 1">{{item.title}}</span>
+                    <span >{{item.title}}</span>
                   </router-link>
+                  <span style="flex: 1"></span>
                     <span class="time">{{item.publishTime}}</span>
 
                 </h2>
-                <p v-html="item.content"></p>
+                <p v-html="item.content" class="max2"></p>
               </div>
             </el-card>
             <div style="border-right: 1px solid #eee;width:1px;height: 320px;position: absolute;top:15px;right: 0"></div>
@@ -155,14 +162,15 @@
                 <router-link to="/company" style="float: right; padding: 3px 0;color: #999999;font-size: 12px" type="text">更多&gt;&gt;</router-link>
               </div>
               <div class="list" v-for="(item, index) in qiyeList" :key="index">
-                <h2 style="display: flex; flex-direction: row">
+                <h2 style="display: flex; flex-direction: row;width: 100%; align-items: center;">
                   <router-link :to='"/detail?id="+item.id'>
                   <span style="flex: 1">{{item.title}}</span>
                   </router-link>
+                  <span style="flex: 1"></span>
                     <span class="time">{{item.publishTime}}</span>
 
                 </h2>
-                <p v-html="item.content"></p>
+                <p v-html="item.content" class="max2"></p>
               </div>
             </el-card>
           </el-col>
@@ -183,10 +191,11 @@
 
                   <span style="flex: 1">{{item.title}}</span>
                   </router-link>
+                  <span style="flex: 1"></span>
                     <span class="time">{{item.publishTime}}</span>
 
                 </h2>
-                <p v-html="item.content"></p>
+                <p v-html="item.content" class="max2"></p>
                 <img :src="item.aboutImgUrl" style="border-radius: 10px;margin: 10px 0" width="100%"/>
               </div>
             </el-card>
@@ -205,7 +214,7 @@
                     <span class="time">{{item.publishTime}}</span>
 
                 </h2>
-                <p v-html="item.content"></p>
+                <p v-html="item.content" class="max2"></p>
                 <img :src="item.aboutImgUrl" style="border-radius: 10px;margin: 10px 0" width="100%"/>
               </div>
             </el-card>
@@ -282,6 +291,9 @@ export default {
           let res = await getChannelInformationsRequest({channelId: id});
           if(res.code == 200){
               if(weizhi){
+                  res.data.records.map((ite) => {
+                          ite.publishTime = this.$moment(Number(ite.publishTime)).format("MM-DD")
+                      })
                   if(weizhi == "A"){
                       // 重要信息
                     this.importList = res.data.records.slice(0, 10)
@@ -302,15 +314,15 @@ export default {
                   }else if(weizhi == "D"){
                       // 产业政策
                       this.chanList = res.data.records.slice(0, 4)
-                      this.chanList.map((ite) => {
-                          ite.publishTime = this.$moment(Number(ite.publishTime)).format("MM-DD")
-                      })
+                    //   this.chanList.map((ite) => {
+                    //       ite.publishTime = this.$moment(Number(ite.publishTime)).format("MM-DD")
+                    //   })
                   }else if(weizhi == "E"){
                       // 合作交流
                       this.hezuoList = res.data.records.slice(0, 4)
-                    this.hezuoList.map((ite) => {
-                          ite.publishTime = this.$moment(Number(ite.publishTime)).format("MM-DD")
-                      })
+                    // this.hezuoList.map((ite) => {
+                    //       ite.publishTime = this.$moment(Number(ite.publishTime)).format("MM-DD")
+                    //   })
                   }else if(weizhi == "F"){
                       // 知识产权
                       this.zhishiList = res.data.records.slice(0, 2)
@@ -322,9 +334,9 @@ export default {
                   }else if(weizhi == "I"){
                       // 企业认定
                       this.qiyeList = res.data.records.slice(0, 4)
-                      this.qiyeList.map((ite) => {
-                          ite.publishTime = this.$moment(Number(ite.publishTime)).format("MM-DD")
-                      })
+                    //   this.qiyeList.map((ite) => {
+                    //       ite.publishTime = this.$moment(Number(ite.publishTime)).format("MM-DD")
+                    //   })
                   }else if(weizhi == "J"){
                       // 行业管理
                       this.hangyeList = res.data.records.slice(0, 1)