117 lines
2.2 KiB
Vue
117 lines
2.2 KiB
Vue
<template>
|
||
<div class="photo-content">
|
||
<div class="photo-border-box photo-01 animate__animated animate__rollIn">
|
||
<img :src="require('@/assets/img/IMG_1354.jpg')" />
|
||
</div>
|
||
|
||
<div class="text-box">
|
||
<p class="text-01 animate__animated animate__fadeInUp">
|
||
嘿！我的花子同学，生日快乐！
|
||
</p>
|
||
<p class="text-02 animate__animated animate__fadeInUp">
|
||
噢~还有，新年好！
|
||
</p>
|
||
<p class="text-03 animate__animated animate__fadeInUp">
|
||
祝愿你···
|
||
</p>
|
||
<p class="text-04 animate__animated animate__fadeInUp">
|
||
生活里有热汤和甜食
|
||
</p>
|
||
<p class="text-05 animate__animated animate__fadeInUp">
|
||
背包里有书本和远方
|
||
</p>
|
||
<p class="text-06 animate__animated animate__fadeInUp">
|
||
当然~
|
||
</p>
|
||
<p ref="text-07" class="text-07 animate__animated animate__fadeInUp">
|
||
也有我 ＞ω＜
|
||
</p>
|
||
</div>
|
||
|
||
<div class="pic-01 animate__animated animate__fadeInUp">
|
||
<img :src="require('@/assets/img/jiandaoshou.png')" />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "photo"
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.photo-content {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-image: url(../assets/img/5fc7076cc7715.png);
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
overflow: hidden;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.photo-border-box {
|
||
padding: 30px;
|
||
background-color: #fff;
|
||
box-shadow: #bbb 10px 10px 10px;
|
||
}
|
||
.photo-01 {
|
||
width: 360px;
|
||
height: 387px;
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 40px;
|
||
margin-left: -200px;
|
||
}
|
||
|
||
.text-box {
|
||
width: 100%;
|
||
// height: 500px;
|
||
position: absolute;
|
||
top: 550px;
|
||
left: 0;
|
||
& > p {
|
||
width: 100%;
|
||
color: #8e5e7d;
|
||
font-size: 30px;
|
||
text-align: center;
|
||
padding-bottom: 36px;
|
||
}
|
||
}
|
||
.text-01 {
|
||
animation-delay: 1.5s;
|
||
}
|
||
.text-02 {
|
||
animation-delay: 3.5s;
|
||
}
|
||
.text-03 {
|
||
animation-delay: 5.5s;
|
||
}
|
||
.text-04 {
|
||
animation-delay: 7.5s;
|
||
}
|
||
.text-05 {
|
||
animation-delay: 9.5s;
|
||
}
|
||
.text-06 {
|
||
animation-delay: 11.5s;
|
||
}
|
||
.text-07 {
|
||
animation-delay: 13.5s;
|
||
}
|
||
|
||
.pic-01 {
|
||
width: 270px;
|
||
height: 264px;
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
animation-delay: 15s;
|
||
}
|
||
</style>
|