修改首页

src/views/index.vue

@@ -46,7 +46,7 @@
           <el-tabs type="border-card">
             <el-tab-pane label="通知公告">
               <div class="tab-panel">
-                <div class="msg-item" v-for="(v,i) in msgsList" :key="v.id">
+                <div class="msg-item" v-for="(v,i) in msgsList" :key="v.id" @click="showMsg(v)">
                     <span>{{v.title}}</span>
                     <span>{{v.publishTime}}</span>
                 </div>
@@ -67,7 +67,29 @@
       </el-col>
     </el-row>
 
-
+    <!--  新闻详情  -->
+    <DialogCom
+      title="详情"
+      :visible.sync="show"
+      width="800px"
+      append-to-body
+      @close="handleClose">
+      <div class="panel-box" v-if="selectMsg">
+        <h2>{{selectMsg.title}}</h2>
+        <p>{{selectMsg.publishTime}}</p>
+        <div class="content-box">
+          <p>{{selectMsg.content}}</p>
+          <ul v-if="selectMsg.fileList && selectMsg.fileList.length > 0">
+            <li v-for="(v,i) in selectMsg.fileList" :key="v.url">
+              <a :href="imageUrl(v.url)" target="_blank">
+<!--                <i class="el-icon-document"></i>-->
+                {{v.name}}
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </DialogCom>
   </div>
 </template>
 
@@ -87,7 +109,9 @@ export default {
     return {
       dataList:[],
       fileList:[],
-      msgsList:[]
+      msgsList:[],
+      show:false,
+      selectMsg:null,
     }
   },
   mounted(){
@@ -95,6 +119,14 @@ export default {
   },
   methods: {
     imageUrl,
+    showMsg(v){
+      this.show = true;
+      this.selectMsg = v;
+    },
+    handleClose() {
+      this.show = false;
+      this.selectMsg = null;
+    },
     getData(){
       homeData().then(res=>{
         this.dataList = res.data;
@@ -159,7 +191,12 @@ export default {
   line-height: 39px;
   display: flex;
   justify-content: space-between;
+  cursor:pointer;
+  &:hover{
+    text-decoration: underline;
+  }
   >span{
+    display: inline-block;
     overflow: hidden;
     white-space:nowrap;
     text-overflow: ellipsis;
@@ -186,6 +223,7 @@ export default {
   &:hover{
     background-color: #1ea8e9;
     color:#fff;
+    transition: all .38s ease-out;
   }
 }
 .card-group {
@@ -249,7 +287,35 @@ export default {
     }
   }
 }
-
+.panel-box{
+  >h2{
+    text-align: center;
+  }
+  >p{
+    font-size: 14px;
+    color: #999;
+    text-align: end;
+  }
+  .content-box{
+    max-height: 600px;
+    overflow: auto;
+    >p{
+      text-indent: 2em;
+      word-break: break-word;
+      white-space: pre-wrap;
+      text-align: justify;
+      width: 100%;
+      color: #777;
+    }
+    >ul{
+      font-size: 15px;
+      color:#1ea8e9;
+      >li:hover{
+        text-decoration:underline;
+      }
+    }
+  }
+}
 @media (max-width:550px) {
   .card-panel-description {
     display: none;