阅读背景:

vue项目1-pizza点餐系统7-路由之控制滚动行为

来源:互联网 

一、在home组件中设置具体信息,设计样式

<template>
     <div class="row">
         <div id="home" class="col-sm-12 text-center">
             <div id="background">
                 <h1>欢迎大家品尝Pizza!</h1>
                 <h2>这里有你非常喜欢的Pizza!</h2>
                 <button @click="gotoMenu" class="btn btn-success">跳转</button>
             </div>
         </div>
     </div>
 </template>


<style>
 /* 85vh是指高度占整个屏幕的85% ,vw宽度*/
 #home{
     background: url('../assets/pizza.jpg');
     height: 85vh;
     padding: 10%;
 }

 h1,h2{
     margin: 6%;
 }

.background{
    background: #eee;
    opacity: 0.8;
    max-width: 70vw;
    margin: 0 auto;
    padding: 20px 0;
}
</style>  <template>
     <di



你的当前访问异常,请进行认证后继续阅读剩余内容。

分享到: