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 = {
|
module.exports = {
|
||||||
devServer: {
|
devServer: {
|
||||||
port: 80
|
port: 80
|
||||||
}
|
},
|
||||||
|
productionSourceMap: false
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in new issue