|
|
@ -5,22 +5,16 @@
|
|
|
|
<div class="travel-header my-animation-slide-top">
|
|
|
|
<div class="travel-header my-animation-slide-top">
|
|
|
|
<!-- 背景图片 -->
|
|
|
|
<!-- 背景图片 -->
|
|
|
|
<video class="index-video" autoplay="autoplay" muted="muted" loop="loop"
|
|
|
|
<video class="index-video" autoplay="autoplay" muted="muted" loop="loop"
|
|
|
|
:src="$constant.favoriteVideo">
|
|
|
|
:src="$constant.favoriteVideo2">
|
|
|
|
</video>
|
|
|
|
</video>
|
|
|
|
<div style="position: absolute;left: 20px;top: 20px">
|
|
|
|
<div style="position: absolute;left: 20px;top: 20px">
|
|
|
|
<!-- 标题 -->
|
|
|
|
<!-- 标题 -->
|
|
|
|
<div style="margin: 10px">
|
|
|
|
<div style="margin: 10px">
|
|
|
|
<div>
|
|
|
|
|
|
|
|
旅拍集
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div style="font-size: 36px;font-weight: bold;line-height: 1.5;margin-top: 20px">
|
|
|
|
<div style="font-size: 36px;font-weight: bold;line-height: 1.5;margin-top: 20px">
|
|
|
|
这里是我的旅拍哦
|
|
|
|
让照片留下医药学的足迹
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div style="position: absolute;left: 20px;bottom: 40px;margin: 10px">
|
|
|
|
|
|
|
|
每一张照片都是一次美好的记忆。
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="travel-content my-animation-slide-bottom">
|
|
|
|
<div class="travel-content my-animation-slide-bottom">
|
|
|
@ -61,11 +55,11 @@
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
|
|
const myFooter = () => import( "./common/myFooter");
|
|
|
|
const myFooter = () => import( "./common/myFooter");
|
|
|
|
const photo = () => import( "./common/photo");
|
|
|
|
const photo = () => import( "./common/photo");
|
|
|
|
const proTag = () => import( "./common/proTag");
|
|
|
|
const proTag = () => import( "./common/proTag");
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
components: {
|
|
|
|
components: {
|
|
|
|
photo,
|
|
|
|
photo,
|
|
|
|
proTag,
|
|
|
|
proTag,
|
|
|
@ -81,7 +75,10 @@
|
|
|
|
resourceType: "lovePhoto",
|
|
|
|
resourceType: "lovePhoto",
|
|
|
|
classify: ""
|
|
|
|
classify: ""
|
|
|
|
},
|
|
|
|
},
|
|
|
|
photoTitleList: [],
|
|
|
|
photoTitleList: [
|
|
|
|
|
|
|
|
{ classify: "公益计划", count: 6 },
|
|
|
|
|
|
|
|
{ classify: "科研项目", count: 2 },
|
|
|
|
|
|
|
|
],
|
|
|
|
photoList: []
|
|
|
|
photoList: []
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
@ -154,67 +151,67 @@
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
<style scoped>
|
|
|
|
|
|
|
|
|
|
|
|
.travel-container {
|
|
|
|
.travel-container {
|
|
|
|
padding: 25px;
|
|
|
|
padding: 25px;
|
|
|
|
background: var(--favoriteBg);
|
|
|
|
background: var(--favoriteBg);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.travel-header {
|
|
|
|
.travel-header {
|
|
|
|
margin: 60px auto 30px;
|
|
|
|
margin: 60px auto 30px;
|
|
|
|
height: 300px;
|
|
|
|
height: 400px;
|
|
|
|
position: relative;
|
|
|
|
position: relative;
|
|
|
|
overflow: hidden;
|
|
|
|
overflow: hidden;
|
|
|
|
border-radius: 20px;
|
|
|
|
border-radius: 20px;
|
|
|
|
max-width: 1200px;
|
|
|
|
max-width: 1200px;
|
|
|
|
color: var(--white);
|
|
|
|
color: var(--white);
|
|
|
|
user-select: none;
|
|
|
|
user-select: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.index-video {
|
|
|
|
.index-video {
|
|
|
|
width: 100%;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
height: 100%;
|
|
|
|
object-fit: cover;
|
|
|
|
object-fit: cover;
|
|
|
|
background: var(--lightGreen);
|
|
|
|
background: var(--lightGreen);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.travel-content {
|
|
|
|
.travel-content {
|
|
|
|
margin: 0 auto;
|
|
|
|
margin: 0 auto;
|
|
|
|
max-width: 1200px;
|
|
|
|
max-width: 1200px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.photo-title-warp {
|
|
|
|
.photo-title-warp {
|
|
|
|
max-width: 1150px;
|
|
|
|
max-width: 1150px;
|
|
|
|
margin: 50px auto;
|
|
|
|
margin: 50px auto;
|
|
|
|
padding: 20px;
|
|
|
|
padding: 20px;
|
|
|
|
border-radius: 10px;
|
|
|
|
border-radius: 10px;
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.isActive {
|
|
|
|
.isActive {
|
|
|
|
animation: scale 2.5s ease-in-out infinite;
|
|
|
|
animation: scale 2.5s ease-in-out infinite;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.photo-title {
|
|
|
|
.photo-title {
|
|
|
|
text-align: center;
|
|
|
|
text-align: center;
|
|
|
|
font-size: 30px;
|
|
|
|
font-size: 30px;
|
|
|
|
font-weight: 700;
|
|
|
|
font-weight: 700;
|
|
|
|
line-height: 80px;
|
|
|
|
line-height: 80px;
|
|
|
|
letter-spacing: 2px;
|
|
|
|
letter-spacing: 2px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.pagination-wrap {
|
|
|
|
.pagination-wrap {
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
justify-content: center;
|
|
|
|
margin-top: 40px;
|
|
|
|
margin-top: 40px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.pagination {
|
|
|
|
.pagination {
|
|
|
|
padding: 13px 15px;
|
|
|
|
padding: 13px 15px;
|
|
|
|
border: 1px solid var(--lightGray);
|
|
|
|
border: 1px solid var(--lightGray);
|
|
|
|
border-radius: 3rem;
|
|
|
|
border-radius: 3rem;
|
|
|
@ -223,12 +220,12 @@
|
|
|
|
user-select: none;
|
|
|
|
user-select: none;
|
|
|
|
cursor: pointer;
|
|
|
|
cursor: pointer;
|
|
|
|
text-align: center;
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width: 1150px) {
|
|
|
|
@media screen and (max-width: 1150px) {
|
|
|
|
.photo-title-warp {
|
|
|
|
.photo-title-warp {
|
|
|
|
max-width: 780px;
|
|
|
|
max-width: 780px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|