Sara
1 year ago
parent
02ec91ea1e
commit
012d5c9b91
@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="travel-container">
|
||||
<!-- 封面 -->
|
||||
<div class="travel-header my-animation-slide-top">
|
||||
<!-- 背景图片 -->
|
||||
<video class="index-video" autoplay="autoplay" muted="muted" loop="loop"
|
||||
:src="$constant.favoriteVideo">
|
||||
</video>
|
||||
<div style="position: absolute;left: 20px;top: 20px">
|
||||
<!-- 标题 -->
|
||||
<div style="margin: 10px">
|
||||
<div>
|
||||
旅拍集
|
||||
</div>
|
||||
<div style="font-size: 36px;font-weight: bold;line-height: 1.5;margin-top: 20px">
|
||||
这里是我的旅拍哦
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="position: absolute;left: 20px;bottom: 40px;margin: 10px">
|
||||
每一张照片都是一次美好的记忆。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="travel-content my-animation-slide-bottom">
|
||||
<!-- 标签 -->
|
||||
<div class="photo-title-warp" v-if="!$common.isEmpty(photoTitleList)">
|
||||
<div v-for="(item, index) in photoTitleList" :key="index"
|
||||
:class="{isActive: photoPagination.classify === item.classify}"
|
||||
@click="changePhotoTitle(item.classify)">
|
||||
<proTag :info="item.classify+' '+item.count"
|
||||
:color="$constant.before_color_list[Math.floor(Math.random() * 6)]"
|
||||
style="margin: 12px">
|
||||
</proTag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="photo-title">
|
||||
{{photoPagination.classify}}
|
||||
</div>
|
||||
|
||||
<photo :resourcePathList="photoList"></photo>
|
||||
<div class="pagination-wrap">
|
||||
<div @click="pagePhotos()" class="pagination" v-if="photoPagination.total !== photoList.length">
|
||||
下一页
|
||||
</div>
|
||||
<div v-else style="user-select: none">
|
||||
~~到底啦~~
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<div style="background: var(--favoriteBg)">
|
||||
<myFooter></myFooter>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
const myFooter = () => import( "./common/myFooter");
|
||||
const photo = () => import( "./common/photo");
|
||||
const proTag = () => import( "./common/proTag");
|
||||
|
||||
export default {
|
||||
components: {
|
||||
photo,
|
||||
proTag,
|
||||
myFooter
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
photoPagination: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
resourceType: "lovePhoto",
|
||||
classify: ""
|
||||
},
|
||||
photoTitleList: [],
|
||||
photoList: []
|
||||
}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
|
||||
created() {
|
||||
this.getPhotoTitles();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
getPhotoTitles() {
|
||||
this.$http.get(this.$constant.baseURL + "/webInfo/listAdminLovePhoto")
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.photoTitleList = res.data;
|
||||
this.photoPagination = {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
resourceType: "lovePhoto",
|
||||
classify: this.photoTitleList[0].classify
|
||||
};
|
||||
this.changePhoto();
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
},
|
||||
changePhotoTitle(classify) {
|
||||
if (classify !== this.photoPagination.classify) {
|
||||
this.photoPagination = {
|
||||
current: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
resourceType: "lovePhoto",
|
||||
classify: classify
|
||||
};
|
||||
this.photoList = [];
|
||||
this.changePhoto();
|
||||
}
|
||||
},
|
||||
pagePhotos() {
|
||||
this.photoPagination.current = this.photoPagination.current + 1;
|
||||
this.changePhoto();
|
||||
},
|
||||
changePhoto() {
|
||||
this.$http.post(this.$constant.baseURL + "/webInfo/listResourcePath", this.photoPagination)
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.photoList = this.photoList.concat(res.data.records);
|
||||
this.photoPagination.total = res.data.total;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.travel-container {
|
||||
padding: 25px;
|
||||
background: var(--favoriteBg);
|
||||
}
|
||||
|
||||
.travel-header {
|
||||
margin: 60px auto 30px;
|
||||
height: 300px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 20px;
|
||||
max-width: 1200px;
|
||||
color: var(--white);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.index-video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
background: var(--lightGreen);
|
||||
}
|
||||
|
||||
.travel-content {
|
||||
margin: 0 auto;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.photo-title-warp {
|
||||
max-width: 1150px;
|
||||
margin: 50px auto;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.isActive {
|
||||
animation: scale 2.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.photo-title {
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
line-height: 80px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.pagination-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
padding: 13px 15px;
|
||||
border: 1px solid var(--lightGray);
|
||||
border-radius: 3rem;
|
||||
color: var(--greyFont);
|
||||
width: 100px;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1150px) {
|
||||
.photo-title-warp {
|
||||
max-width: 780px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,98 @@
|
||||
if (document.querySelector(".author-content.author-content-item.single")) {
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.id = "header_canvas";
|
||||
canvas.style.position = "absolute";
|
||||
canvas.style.bottom = "0";
|
||||
canvas.width = 844;
|
||||
canvas.height = 346;
|
||||
document.querySelector(".author-content.author-content-item.single").appendChild(canvas);
|
||||
const parent = document.querySelector(".author-content.author-content-item.single").parentNode;
|
||||
parent.className = "thumbnail_canvas";
|
||||
(function () {
|
||||
var canvas,
|
||||
ctx,
|
||||
width,
|
||||
height,
|
||||
bubbles,
|
||||
animateHeader = true;
|
||||
initHeader();
|
||||
|
||||
function initHeader() {
|
||||
canvas = document.getElementById("header_canvas");
|
||||
window_resize();
|
||||
if (canvas) {
|
||||
ctx = canvas.getContext("2d");
|
||||
//建立泡泡
|
||||
bubbles = [];
|
||||
var num = width * 0.04; //气泡数量
|
||||
for (var i = 0; i < num; i++) {
|
||||
var c = new Bubble();
|
||||
bubbles.push(c);
|
||||
}
|
||||
animate();
|
||||
}
|
||||
}
|
||||
|
||||
function animate() {
|
||||
if (animateHeader) {
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
for (var i in bubbles) {
|
||||
bubbles[i].draw();
|
||||
}
|
||||
}
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
function window_resize() {
|
||||
//canvas铺满窗口
|
||||
//width = window.innerWidth;
|
||||
//height = window.innerHeight;
|
||||
|
||||
//如果需要铺满内容可以换下面这个
|
||||
const panel = document.querySelector(".thumbnail_canvas");
|
||||
if (panel) {
|
||||
width = panel.offsetWidth;
|
||||
height = panel.offsetHeight;
|
||||
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
}
|
||||
}
|
||||
|
||||
window.onresize = function () {
|
||||
window_resize();
|
||||
};
|
||||
|
||||
function Bubble() {
|
||||
var _this = this;
|
||||
(function () {
|
||||
_this.pos = {};
|
||||
init();
|
||||
})();
|
||||
|
||||
function init() {
|
||||
_this.pos.x = Math.random() * width;
|
||||
_this.pos.y = height + Math.random() * 100;
|
||||
_this.alpha = 0.1 + Math.random() * 0.5; //气泡透明度
|
||||
_this.alpha_change = 0.0002 + Math.random() * 0.0005; //气泡透明度变化速度
|
||||
_this.scale = 0.2 + Math.random() * 0.8; //气泡大小
|
||||
_this.scale_change = Math.random() * 0.002; //气泡大小变化速度
|
||||
_this.speed = 0.1 + Math.random() * 0.4; //气泡上升速度
|
||||
}
|
||||
|
||||
//气泡
|
||||
this.draw = function () {
|
||||
if (_this.alpha <= 0) {
|
||||
init();
|
||||
}
|
||||
_this.pos.y -= _this.speed;
|
||||
_this.alpha -= _this.alpha_change;
|
||||
_this.scale += _this.scale_change;
|
||||
ctx.beginPath();
|
||||
ctx.arc(_this.pos.x, _this.pos.y, _this.scale * 10, 0, 2 * Math.PI, false);
|
||||
ctx.fillStyle = "rgba(255,255,255," + _this.alpha + ")";
|
||||
ctx.fill();
|
||||
};
|
||||
}
|
||||
})();
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
module.exports = {
|
||||
devServer: {
|
||||
port: 80
|
||||
}
|
||||
},
|
||||
productionSourceMap: false
|
||||
}
|
||||
|
||||
Loading…
Reference in new issue