【Edu-Web开发日志二——首页制作二】

首页制作二

• Main资讯部分布局设计
• • 目标效果图
  • 布局设计
• 资讯导航栏
• • 文字标题
  • 跳转链接
  • 合并
• 卡片部分
• • 重要资讯卡片
  • 次要资讯卡片
• 最终效果图
• Edu-Web系列开发日志目录
• • Edu-Web开发日志一——首页制作一

Main资讯部分布局设计

目标效果图

布局设计

• 资讯导航栏（红色框）
  • 文字标题
  • 跳转链接
• 重要资讯卡片（黄色框）
• 次要资讯卡片（蓝色框）

先用固定一个大容器在中间，并且设置背景颜色
template代码

<el-main style="background-color:#f7f4f5">
	<div class="news">
	</div>
</el-main>

style代码

.news{
  width: 70%;
  height:600px;
  margin:0 auto; /* 设置上下边距为0，左右边距为自动，这会使容器在水平方向居中 */
}

资讯导航栏

文字标题

<span style="font-size: 30px;font-weight: bold">最新资讯</span>

跳转链接

<span>
	<el-link href="" target="_blank" type="info">通知公告&nbsp&nbsp&nbsp&nbsp</el-link>
	<span class="info-line">&nbsp&nbsp&nbsp&nbsp</span>
	<el-link href="" target="_blank" type="info">培训动态&nbsp&nbsp&nbsp&nbsp</el-link>
	<span class="info-line"></span>
	<el-link href="" target="_blank" type="info">&nbsp&nbsp&nbsp&nbsp新闻资讯</el-link>
</span>

&nbsp是作为空格
target=“_blank” 表示在新窗口或新标签页中打开链接

合并

使用用flex布局合并

template代码

<div class="news_nav">
	<span style="font-size: 30px;font-weight: bold">最新资讯</span>
	<span>
		<el-link href="" target="_blank" type="info">通知公告&nbsp&nbsp&nbsp&nbsp</el-link>
		<span class="info-line">&nbsp&nbsp&nbsp&nbsp</span>
		<el-link href="" target="_blank" type="info">培训动态&nbsp&nbsp&nbsp&nbsp</el-link>
		<span class="info-line"></span>
		<el-link href="" target="_blank" type="info">&nbsp&nbsp&nbsp&nbsp新闻资讯</el-link>
	</span>
</div>

style代码

.news_nav{
  display: flex;
  justify-content: space-between;//从两边往中间填满
  padding-bottom: 20px;
}

卡片部分

考虑到重要资讯卡片和次要资讯卡片是横向并排放置，所以采用flex布局

template代码

<div class="card-container">
</div>

style代码

.card-container{
  display: flex;
}

重要资讯卡片

这里使用的是el-card组件

<el-card style="width: 500px;height: 460px;" body-style="padding: 0px">
	<img src="../assets/index_img/new.jpg"style="width: 500px;height: 300px;"/>
	<template #footer>
		<h2>填充文字</h2><p>日期</p><p>填充文字</p>
	</template>
</el-card>

• body-style=“padding: 0px” 可以让图片填充满整个卡片

• <template #footer>是在底部插入，<template #header>是在头部插入

次要资讯卡片

次要资讯卡片可以由四个卡片纵向排列

template代码

<div style="display: flex;flex-direction: column;padding-left: 20px;">
	<el-card class="el-card-custom" shadow="hover" body-style="padding: 0px">
		<h3>标题</h3>
		<p>日期</p>
		<p>填充文字</p>
	</el-card>
	<el-card class="el-card-custom" shadow="hover" body-style="padding: 0px">
		<h3>标题</h3>
		<p>日期</p>
		<p>填充文字</p>
	</el-card>
	<el-card class="el-card-custom" shadow="hover" body-style="padding: 0px">
		<h3>标题</h3>
		<p>日期</p>
		<p>填充文字</p>
	</el-card>
	<el-card style="height: 80px;width: 480px;border-radius: 0px;" shadow="Never" body-style="padding: 0px" >
		<p style="direction: rtl;"><el-link href="" type="info"><el-icon><DArrowRight/></el-icon>查看更多</el-link></p>
	</el-card>
</div>

• 因为在“查看更多”这里加入了一个Icon的图标，所以要引入一下

script代码

import {DArrowRight} from '@element-plus/icons-vue'

style代码

.el-card-custom{
  height: 125px;
  width: 460px;
  padding-left: 20px;
  border-radius: 0px;
  border-right: white;
  border-left: white;
  
}

最终效果图

Edu-Web系列开发日志目录

Edu-Web开发日志一——首页制作一