You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
1.5 KiB
74 lines
1.5 KiB
<template>
|
|
<div class="gradient-1">
|
|
<div class="headArea">
|
|
<div class="haBody">
|
|
<div class="haBody-1">
|
|
<h1>
|
|
<a href="" class="logo">
|
|
<img src="../logo1.png" alt="">
|
|
</a>
|
|
</h1>
|
|
</div>
|
|
<div class="haBody-2"></div>
|
|
<div class="haBody-3"></div>
|
|
<div class="haBody-4"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
</script>
|
|
|
|
<style>
|
|
.gradient-1 {
|
|
width: 100%;
|
|
height: 100vh;
|
|
position: relative;
|
|
background: linear-gradient(45deg, #FFBBFF, #FFD7BE);
|
|
}
|
|
.headArea {
|
|
height: 50px;
|
|
width: 100%;
|
|
background-color: white;
|
|
display: flex; /* 使用 Flexbox 布局 */
|
|
justify-content: center; /* 水平居中 */
|
|
align-items: center; /* 垂直居中 */
|
|
}
|
|
.haBody{
|
|
display: flex;
|
|
width: 75%;
|
|
height: 100%;
|
|
background-color: lightblue;
|
|
}
|
|
.haBody-1{
|
|
display: flex;
|
|
background-image: url();
|
|
width: 100px;
|
|
height: 50px;
|
|
background-color: green;
|
|
}
|
|
.haBody-2{
|
|
display: flex;
|
|
width: 100px;
|
|
height: 50px;
|
|
background-color: blue;
|
|
}
|
|
.haBody-3{
|
|
display: flex;
|
|
width: 100px;
|
|
height: 50px;
|
|
background-color: red;
|
|
}
|
|
.haBody-4{
|
|
display: flex;
|
|
width: 100px;
|
|
height: 50px;
|
|
background-color: yellow;
|
|
}
|
|
.logo{
|
|
text-decoration: none;
|
|
|
|
}
|
|
</style> |