Transform blog list into message list

Because of a sudden whim after finishing the design recently, I made a latest news on the page routing. After looking for many kinds of websites to learn, I found that I don’t know art or css. It suddenly occurred to me that the blog list items I made before can be changed into the latest news list. directly dry

There is nothing to say, everything is in the code, go to the code

<template>
    <div class="page">

        <!-- 消息列表 -->
        <section class="">
            <section class="question-list-lh-bj-list-pr">
                <ul class="pr-10">
                <li v-for="(item,index) in noticeList" :key="index" class="noter-cont">
                      <aside class="noter-pic-notice">
                        <img :alt="item.title" :src="item.picture" class="img-responsive-notice">
                      </aside>
                      <div class="nptice-ntr">
                        <font class="nptice-ntr-word"> 
                          商品名称:{
    
    {item.title}}
                        </font>
                      </div>
                    <div class="noter-txt-content">
                        消息内容:<p>{
    
    {item.content}}</p>
                    </div>
                    <div class="noter-txt-time">
                        <span class="">
                            <font class="">发布时间:{
    
    {item.gmtCreate}}</font>
                        </span>
                    </div>
                    </li>
                </ul>
            </section>
        </section>

        <!-- 页面尾部 分页 -->
          <div style="margin: 30px 0;text-align: center;overflow: auto;">
            <el-pagination
                  @size-change="sizeChangeHandle"
                  @current-change="currentChangeHandle"
                  :current-page="current"
                  :page-sizes="[8,12,16,32]"
                  :page-size="pageSize"
                  :total="totalPage"
                  layout="total, sizes, prev, pager, next, jumper">
               </el-pagination>
          </div>
    </div>
</template>

on js

<script>
import {getAllNotiverFront} from '../../api/notice'
export default {
      components: {},
        data() {
          return {
             value: new Date(),
             param:{},
             current: 1,
             pageSize: 8,
             totalPage: 0,
             noticeList:[],
          };
        },
        mounted() {
        },
        methods: {
        //调用notice接口获取数据
        initDataList(){
            this.param = {
                'title':''
            }
            getAllNotiverFront(this.current,this.pageSize,this.param).then((resp)=>{
                console.log("调用getAllNotiverFront接口返回的出参是:",resp.data);
                const {code,message,data} = resp.data
                if(code==='00000'){
                    this.noticeList = data.records;
                    this.totalPage = data.total;
                }else{
                    this.noticeList = "";
                }
            })
        },
        // 每页数
        sizeChangeHandle (val) {
            this.pageSize = val
            this.current = 1
            this.initMenuInfoList()
          },
        // 当前页
        currentChangeHandle (val) {
            this.current = val
            this.initMenuInfoList()
          },
          handleClick(tab, event) {
            console.log(tab, event);
          },
        },
        created(){
            this.initDataList();
        },
      };
</script>

on css