19. Springboot3+Vue3实现前台首页的设计

696 字约 2 分钟读完3508 次阅读更新于 2026/5/3

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

做一个页面，只需要考虑两个东西：布局和样式。比如说你要画一张人面像，要先画轮廓，简单的勾勒一下大概一些元素的位置（布局）；然后再针对具体的位置，我们去画鼻子画眼睛（样式）。

布局

  1. element-plus里面的行列布局：el-row和el-col的组合。
  2. flex布局
display: flex; align-items: center; justify-content: center

常见的布局有哪些？一般是图文并茂，比如宫格（上下）、宫格（左右）

样式

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

页面关键代码

<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">旅游攻略</div>
  <div style="margin-top: 20px; display: flex; grid-gap: 20px" v-for="item in data.introductionData">
    <div style="flex: 1">
      <img :src="item.img" alt="" style="width: 100%; height: 220px; display: block; border-radius: 5px">
    </div>
    <div style="flex: 3">
      <div style="font-size: 20px; font-weight: bold">{{ item.title }}</div>
      <div style="margin-top: 10px; font-size: 15px; color: #666666; line-height: 25px; height: 125px; text-align: justify" class="line5">{{ item.description }}</div>
      <div style="display: flex; align-items: center; margin-top: 10px; grid-gap: 10px">
        <img :src="item.userAvatar" alt="" style="width: 30px; height: 30px; border-radius: 50%">
        <div style="font-size: 15px">{{ item.userName }}</div>
        <div style="color: #666666">{{ item.time }}</div>
      </div>
    </div>
  </div>
</div>

<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">旅游攻略</div>
  <div style="margin-top: 20px">
    <el-row :gutter="20">
      <el-col :span="6" v-for="item in data.introductionData" style="margin-bottom: 20px">
        <img :src="item.img" alt="" style="width: 100%; height: 250px; border-radius: 5px">
        <div style="font-size: 17px; font-weight: bold; margin-top: 10px">{{ item.title }}</div>
        <div style="display: flex; align-items: center; margin-top: 10px; grid-gap: 10px">
          <img :src="item.userAvatar" alt="" style="width: 30px; height: 30px; border-radius: 50%">
          <div style="font-size: 15px">{{ item.userName }}</div>
          <div style="color: #666666">{{ item.time }}</div>
        </div>
      </el-col>
    </el-row>
  </div>
</div>