轮播图

common/list.js

@@ -157,4 +157,12 @@ export function getChangeDetails(id){
       url:`/notice/change/${id}`,
       method:'get',
 })
+}
+//轮播图
+export function getLoopPic(params){
+  return request({
+      url:'/banner/list',
+      method:'get',
+      params:params
+})
 }
\ No newline at end of file

pages/index/index.vue

@@ -3,8 +3,8 @@
     <div class="content flex">
       <div class="banner">
         <el-carousel trigger="click" height="5.41rem">
-          <el-carousel-item v-for="(item,index) in 4" :key="index">
-            <h3 class="small">{{ item }}</h3>
+          <el-carousel-item v-for="(item,index) in picArr" :key="index">
+            <h3 class="small">{{ item.picUrl }}</h3>
           </el-carousel-item>
         </el-carousel>
       </div>
@@ -50,9 +50,22 @@
 </template>
 
 <script>
+import {getLoopPic} from '@/common/list.js'
   export default {
+    created(){
+      this.getLoopPic()
+    },
+    methods:{
+      async getLoopPic(){
+        let message = {}
+        message.status =1
+        const {data} = await getLoopPic(message)
+        this.picArr = data
+      }
+    },
     data() {
       return {
+        picArr:[],
         messageList: [{
             head: "基地直供专区",
             src: "../assets/head/home-fill.png",

pages/index/message/news.vue

 <template>
-    <div class="message ">
+    <div class="message " >
         <div class='sidebar'>
           <div class="sidebar-title">信息公告</div>
           <el-col :span="12">
@@ -12,16 +12,15 @@
             </el-menu>
           </el-col>
       </div>
-      <ul>
-        <li v-for="item in messageList" :key="item.id">
-          <!-- 怎么自动生成路由 并且实现组件跳转 -->
-          <nuxt-link :to="`/notice/news/details?id=${item.id}`"  class="flex-between">
+      <ul v-if="isList">
+        <li v-for="item in messageList" :key="item.id" @click="urlChage">
+          <nuxt-link :to="`/messsage/news/newsdetails?id=${item.id}`"  class="flex-between">
             <div class="t2">{{item.title}}</div>
             <div class="t1">发布时间：{{item.createTime}}</div>
           </nuxt-link>
         </li>
       </ul>
-      <div class="pagination flex-center">
+      <div class="pagination flex-center" v-if="isList">
           <el-pagination
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
@@ -31,6 +30,14 @@
               :total="total">
             </el-pagination style="postion:relative;transform:translateX(-50%)">
       </div>
+      <div v-for="item in contentList" :key="item.id" class="content" v-if="!isList">
+          <h1>{{item.title}}</h1>
+          <div class="flex">
+            <span>发布时间:{{createTime}}</span>
+            <span>作者:{{item.author}}</span>
+          </div>
+          <div>{{item.content}}</div>
+      </div>
    </div>
 
   
@@ -46,6 +53,10 @@ import {
   export default {
     data() {
       return {
+        contentList:'',
+        isList:true,
+        activeName: '1',
+        conText:"",
         activeIndex: '1',
         size:10,
         total:0,
@@ -73,17 +84,17 @@ import {
       message.size = 1
       this.getListContent(message)
       this.getCategoryList()
-      this.getCateList()
-      this.getList()
     },
     methods:{
+      urlChage(){
+        this.isList = !this.isList
+      },
       handleSelect(key, keyPath) {
         console.log(key, keyPath)
          let keyValue = key.slice(4)
          console.log(keyValue)
          let message = {}
           message.cateId = keyValue
-          /* console.log(message,'-----------------------') */
           this.getListContent(message)
       },
       //分类列表
@@ -93,18 +104,10 @@ import {
       },
       //文章列表
       async getListContent(params){
-        const {data} = await getListContent(params)
+        const {data,title} = await getListContent(params)
         this.messageList = data
+        this.contentList = data
       },
-     /*  //分类()
-      async getCateList(){
-        const {data} = await getCateList()
-      }, */
-      /* //查看文章
-      async getList(){
-        const {data} = await getList()
-        console.log(data)
-      }, */
       handleSizeChange(val) {
         this.getListContent(this.currentPage,val)
       },
@@ -162,6 +165,9 @@ import {
   .el-col-12 {
     width: 100%;
   }
+  .content{
+    width:925px
+  }
 </style>