【deepseek用例生成平台-07】首页顶部和底部的设计实现

【写在开头】：以后每节课最后会附上可复制的一行代码。自行粘贴。

    关于代码复制问题：最近直接复制粘贴后的格式是有问题的，要么就全塞进一行，要么就一字符一行，实在是苦不堪言。虽然还是有很多小伙伴喜欢手动敲一遍代码增加熟练度和理解，但其实许多代码根本不值得大家手打，一来容易写错，排查很麻烦。二来是这些代码意义不大，比如style样式不值得手打。所以，我决定把还是选择全塞进一行的方式吧，这样大家最多就是多按几个回车键，也能多理解下代码。也不影响阅读。想自己手打的还是可以手打，毕竟我会写的都手打了。

            关于首页的设计，我们目前遵循的还是上中下三部分。

上比较好说：可以做一些实时标签，来显示平台具体的状态。底部呢？除了一些通知信息外，似乎也没有什么太好的摆放。至于中间的主要部分，我们稍后再设计。

先快节奏的把顶部和底部搞完，打开HomeNew.vue:

顶部内容需要写在el-header标签内，先看效果:

代码如下：（我会分开截图vue组件三部分：template、script、style）

（解释：每个el-row的意思就是一行，gutter是间隔，每个el-col就是一列，:span就是列宽，每列里面有个el-tag标签。el-col和内部元素做成了循环。内部展示文案就是 text （文案）: count（数量），具体的数据变量写在了data()属性的return中，而每个标签使用了我自定义的同一个样式：custom-large-tag，具体样式内容写在了下面的style中。 ）

然后继续，做底部公告，先看效果：(顶部颜色我稍微调了一下嘿嘿)

代码如下：（只截取修妖写的部分，根据上下文找好插入位置）

代码解释：（这里很明显是用了一个v-for循环，循环的变了notice是我的通知，是个列表。这个列表后面会从接口获取，有多少条就显示多少条，由管理员在平台维护，公告信息中设置）

好了，本节到此结束，下节课我们要进军首页中部统计设计。