8.界面优化
8.1 优化首页
我们发现,在项目启动后,页面的头部和尾部已经能正常显示,但页面中间的文字,不是我们想要的。 如果想修改这里的文字或图片,则可以在项目根目录下的pages目录中,修改index.vue,因为当前项目默认访问的就是这个文件。
<template>
<section class="container">
<div>
<app-logo/>
<h1 class="title">
黑马旅游网
</h1>
<h2 class="subtitle">
你最值得信赖的旅游指导
</h2>
<div class="links">
<a
href="http://www.itcast.cn/"
target="_blank"
class="button--green">传智播客</a>
<a
href="http://www.itheima.com/"
target="_blank"
class="button--green">黑马程序员</a>
</div>
</div>
</section>
</template>
<script>
import AppLogo from '~/components/AppLogo.vue'
export default {
components: {
AppLogo
}
}
</script>
<!-- css样式,可以根据自己选择进行调整 -->
<style>
.container {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.title {
font-family: "Quicksand","Source Sans Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; /* 1 */
display: block;
font-weight: 300;
font-size: 70px;
color: #35495e;
letter-spacing: 1px;
}
.subtitle {
font-weight: 300;
font-size: 20px;
color: #526488;
word-spacing: 5px;
padding-bottom: 15px;
}
.links {
padding-top: 15px;
}
</style>
修改后,效果如图所示