【Day2】【Vue】前端博客从0到1（首页功能模块初设计）前端vue.js

在前面将项目简单搭建完成后，我们开始在项目基础上在HelloWorld.vue上完成首页的总体设计

【【Day2】【Vue】前端博客从0到1（首页功能模块初设计）】首先来看看今天要完成的效果

文章图片

目前首页主要分为4各部分

导航栏
照片区
博客区
功能区

1. 导航区
导航区主要是使用了element-ui进行搭建：导航菜单
设计代码如下：

首页个人空间朋友

其中:default-active属性代表默认选中的菜单栏，mode代表菜单是横向还是纵向，@select是设置选中时执行的函数
2. 照片区
照片区主要是使用了element-ui的走马灯（链接）进行搭建
代码如下：

照片墙

3. 播客区和功能区
使用了card代码如下:

博客区功能区

4. 首页的总体设计已经简单设计完成，接下来将完善各个组件功能代码
总体代码：

h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } /* 走马灯样式开始 */ .el-carousel__item h3 { color: #475669; font-size: 18px; opacity: 0.75; line-height: 300px; margin: 0; }.el-carousel__item:nth-child(2n) { background-color: #99a9bf; }.el-carousel__item:nth-child(2n+1) { background-color: #d3dce6; } /* 走马灯样式结束 */ .intro-img{ margin-top: 20px; width: 100%; }.nav{ width: 100%; background-color: #fff; }.body{ width: 1080px; margin: 20px auto; display: flex; justify-content: space-between; } .content{ width: 700px; } .function{ width: 360px; height: 300px; }