关于前端: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>