Springboot3+Vue3实现前台页面的设计

1.做页面最重要的东西有哪些？

1.1布局

1.element-plus里面的行列布局el-row、el-col组合

2.flex布局

常见的布局：一般是图文并茂，宫格（上下），宫格（左右）

1.2样式

字体大小，颜色，粗细，外边距，内边距，背景颜色，宽，高，行高，边：font-size，color，font-weight，margin，padding，background，width，height，line-height，border

2.页面成品

3.关键代码

<template>
  <div style="background-color: #f6f9fc">
    <el-menu
        :default-active="1"
        class="el-menu-demo"
        mode="horizontal"
    >
      <el-menu-item index="1">系统首页</el-menu-item>
      <el-menu-item @click="layout">退出</el-menu-item>
    </el-menu>
    <div style="width:80%;margin: 20px auto;">
      <div style="font-size: 20px;border-left: 5px solid #2fbd67;padding-left: 10px;height: 30px;line-height: 30px;margin-bottom: 10px">租房公告信息</div>
      <div>
        <el-row :gutter="20">
          <el-col :span="6" v-for="item in data.tableData" style="margin-bottom: 20px">
            <img :src="item.fengMian" alt="" style="width: 100%; height: 250px; border-radius: 5px">
            <div style="font-weight: bold;margin-top: 5px">{{item.biaoTi}}</div>
            <div style="display: flex;align-items: center;margin-top: 10px;grid-gap: 10px">
              <img :src="item.faBuRenAvatar" alt="" style="width:30px;height: 30px;border-radius: 50%">
              <div style="font-size: 15px">{{item.faBuRen}}</div>
              <div style="color: #666666">{{ formatTime(item.faBuShiJian) }}</div>
            </div>

          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script setup>
import  {reactive} from "vue";
import request from "@/utils/request.js";
import {ElMessage, ElMessageBox} from "element-plus";
import dayjs from 'dayjs';
const data=reactive({
  huZhuDate:[],
  fangYuanLeiXing:null,
  tableData:[],
  pageNum:1,
  pageSize:8,
  total:0,
  user:JSON.parse(localStorage.getItem('pro1-user') || "{}"),
})
// 格式化时间
const formatTime = (timeStr) => {
  return dayjs(timeStr).format('YYYY-MM-DD');  // 2025-04-18
  // return dayjs(timeStr).format('MM月DD日 HH:mm'); // 04月18日 16:00
};
const layout =()=>{
  //清理缓存
  localStorage.removeItem('pro1-user')
  location.href='/login'
}
const loadHuZhu = () => {
  request.get('/huzhu/selectAll').then(res => {
    if (res.code==='200'){
      data.huZhuDate=res.data
    }else {
      ElMessage.error(res.msg)
    }
  })
}
loadHuZhu()
const load = () => {
  request.get('/gonggaoxinxi/selectPage',{
    params:{
      pageNum:data.pageNum,
      pageSize:data.pageSize,
      biaoTi:data.biaoTi,
    }
  }).then(res=>{
    data.tableData=res.data.list
    data.total=res.data.total
  })
}
load()
</script>