关于前端:Day2Vue前端博客从0到1首页功能模块初设计

在后面将我的项目简略搭建实现后，咱们开始在我的项目根底上在HelloWorld.vue上实现首页的总体设计

首先来看看明天要实现的成果

目前首页次要分为4各局部

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

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

<div class="nav">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" style="margin: 0 auto;width:1080px">
        <el-menu-item index="1">首页</el-menu-item>
        <el-menu-item index="2">个人空间</el-menu-item>
        <el-menu-item index="3">敌人</el-menu-item>
      </el-menu>
    </div>

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

<div class="intro-img">
      <el-carousel :interval="5000" arrow="always" style="margin: 0 auto;width:1080px">
        <el-carousel-item v-for="item in 4" :key="item">
          <h3> 照片墙 </h3>
        </el-carousel-item>
      </el-carousel>
    </div>

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

<div class="body">
      <el-card class="content" >
        <h3>博客区</h3>
      </el-card>
      <el-card class="function">
        <h3>功能区</h3>
      </el-card>
    </div>

4. 首页的总体设计曾经简略设计实现，接下来将欠缺各个组件性能代码

总体代码：

<template>
  <div class="hello">
    <div class="nav">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" style="margin: 0 auto;width:1080px">
        <el-menu-item index="1">首页</el-menu-item>
        <el-menu-item index="2">个人空间</el-menu-item>
        <el-menu-item index="3">敌人</el-menu-item>
      </el-menu>
    </div>

    <div class="intro-img">
      <el-carousel :interval="5000" arrow="always" style="margin: 0 auto;width:1080px">
        <el-carousel-item v-for="item in 4" :key="item">
          <h3> 照片墙 </h3>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="body">
      <el-card class="content" >
        <h3>博客区</h3>
      </el-card>
      <el-card class="function">
        <h3>功能区</h3>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      activeIndex:'1',

    }
  },
  methods:{
    handleSelect(key, keyPath) {
      
    }
  }
}
</script>

<style scoped>
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;
}

</style>