写在前面
本文章参考于两个开源项目分别为：POETIZE-最美博客，拾壹博客
如有侵权，请联系删除
正题
此页面为拾壹博客修改而成，采用了POETIZE的布局以及背景图片，技术栈:Springboot+Vue，主要涉及页面为网站的首页 所以在这里说一下修改的地方，更多的请查看demo。
index.vue（新增波浪背景）
<el-image
style="animation: header-effect 2s"
class="background-image-index"
v-once
lazy
src="https://img.xxx.com/backgroundPicture.jpg"
fit="cover"
>
</el-image>
<div id="bannerWave1"></div>
<div id="bannerWave2"></div>
css样式（两个图片交换移动形成波浪）
#bannerWave1 {
height: 84px;
background: url("../../assets/image/bannerwave1.png");
position: absolute;
width: 100%;
bottom: 0;
z-index: 10;
animation: gradientBG 120s linear infinite;
}
#bannerWave2 {
height: 100px;
background: url("../../assets/image/bannerwave2.png");
position: absolute;
width: 300%;
bottom: 0;
z-index: 5;
animation: gradientBG 120s linear infinite;
}
/* 背景位置移动 */
@keyframes gradientBG {
0% {
background-position: 0 50%;
}
20% {
background-position: 40% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
在原始页面修改之后会出现页面错乱的情况，在这里自己做了一些调整，完整demo：
<template>
<div class="main-container container" v-sy-loading="fullscreenLoading">
<div class="bg">
<el-image
style="animation: header-effect 2s"
class="background-image-index"
v-once
lazy
src="https://img.colabyte.com/backgroundPicture.jpg"
fit="cover"
>
</el-image>
<div id="bannerWave1"></div>
<div id="bannerWave2"></div>
</div>
<div class="main">
<el-tooltip
class="box-item"
effect="dark"
content="随机视频播放"
placement="right"
>
<div
@click="drawer = true"
class="hand-style"
style="
color: var(--theme-color);
position: fixed;
left: 20px;
bottom: 50%;
font-size: 1.5rem;
"
>
<!-- <el-icon><DArrowRight /></el-icon> -->
</div>
</el-tooltip>
<el-drawer title="我是标题" v-model="drawer" :with-header="false">
<div class="video-container">
<video style="width: 100%" controls autoplay :src="videoSrc"></video>
</div>
<div style="margin-left: 20px; margin-top: 10px">
<el-button
type="primary"
icon="DArrowRight"
@click="nextVideo"
></el-button>
</div>
</el-drawer>
<div class="main-box">
<div class="bannerBox" v-if="false" @wheel="goWheel">
<!-- 轮播图 -->
<el-carousel
height="150px"
class="banner"
arrow="always"
ref="swiper"
motion-blur
>
<el-carousel-item v-for="(item, index) in bannerList" :key="index">
<router-link class="hand-style" :to="'/article/' + item.id">
<img
class="bannerImg"
v-lazy="item.avatar"
:key="item.avatar"
/>
<h3 class="title">{{ item.title }}</h3>
</router-link>
</el-carousel-item>
</el-carousel>
</div>
<div class="top-right">
<SiteInfo />
<div class="rightBox">
<!-- <el-card
class="box-card"
style="perspective: 1000px; position: relative; height: 120px"
>
<div class="front">
<div style="width: 50%">
<h2>扫一扫</h2>
<span style="margin-left: 20px"> 关注公众号 </span>
</div>
<img
v-lazy="defaultSetting.overturnImg"
:key="defaultSetting.overturnImg"
alt=""
/>
</div>
<div class="back">
<div style="width: 50%">
<h2>扫一扫</h2>
<span style="margin-left: 20px"> 体验小程序 </span>
</div>
<img
v-lazy="defaultSetting.appletImg"
:key="defaultSetting.appletImg"
alt=""
/>
</div>
</el-card> -->
<!-- 推荐文章 -->
<el-card class="box-card recomArticle" v-if="newArticleList.length">
<div class="clearfix">
<span class="card-title">推荐文章</span>
</div>
<ul class="recomArticleUl">
<li v-for="(item, index) in newArticleList" :key="index">
<div
:class="index == 0 ? 'article-item-top1' : 'article-item'"
>
<div class="recomCover">
<router-link :to="'/article/' + item.id">
<div class="imgBox">
<span>{{ index + 1 }}</span>
<img
class="hand-style"
v-lazy="item.avatar"
:key="item.avatar"
/>
</div>
</router-link>
</div>
<p class="info">
<router-link
class="tuijian-title hand-style"
:to="'/article/' + item.id"
>
{{ item.title }}
</router-link>
<span class="time">{{ item.createTime }}</span>
</p>
</div>
</li>
</ul>
</el-card>
<!-- 关注我 -->
<el-card class="box-card guanzhu" v-if="false">
<div class="clearfix">
<span class="card-title">关注我</span>
</div>
<ul class="guanzhuList">
<li v-show="isShow(2)">
<div class="guanzhu-item qq">
<svg-icon name="qq" />
<a
class="hand-style"
:href="
'//wpa.qq.com/msgrd?v=3&uin=' +
webInfo.qqNumber +
'&site=qq&menu=yes'
"
target="_blank"
>
{{ webInfo.qqNumber }}
</a>
<span
title="点击复制"
@click="copy(webInfo.qqNumber)"
class="copyBtn name hand-style"
>
QQ号
</span>
</div>
</li>
<li v-show="isShow(6)">
<div class="guanzhu-item qqgroup">
<svg-icon name="qqgroup" />
<a class="hand-style" href="javascript:;">
{{ webInfo.qqGroup }}
</a>
<span
title="点击复制"
@click="copy(webInfo.qqGroup)"
class="copyBtn name hand-style"
>
QQ群
</span>
</div>
</li>
<li v-show="isShow(3)">
<div class="guanzhu-item github">
<svg-icon name="github" />
<a
class="hand-style"
:href="webInfo.github"
target="_blank"
>
{{ webInfo.github }}
</a>
<span
title="点击复制"
@click="copy(webInfo.github)"
class="copyBtn name hand-style"
>
github
</span>
</div>
</li>
<li v-show="isShow(4)">
<div class="guanzhu-item gitee">
<svg-icon name="gitee" />
<a class="hand-style" :href="webInfo.gitee" target="_blank">
{{ webInfo.gitee }}
</a>
<span
title="点击复制"
@click="copy(webInfo.gitee)"
class="copyBtn name hand-style"
>
gitee
</span>
</div>
</li>
<li v-show="isShow(1)">
<div class="guanzhu-item email">
<svg-icon name="email" />
<a
class="hand-style"
:href="'mailto:' + webInfo.email"
target="_blank"
title="邮箱"
>
{{ webInfo.email }}
</a>
<span
title="点击复制"
@click="copy(webInfo.email)"
class="copyBtn name hand-style"
>
邮箱
</span>
</div>
</li>
<li v-show="isShow(5)">
<div class="guanzhu-item wechat">
<svg-icon name="wechat" />
{{ webInfo.wechat }}
<span
title="点击复制"
@click="copy(webInfo.wechat)"
class="copyBtn name hand-style"
>
微信
</span>
</div>
</li>
</ul>
</el-card>
<!-- 标签墙 -->
<el-card class="box-card tag_container">
<div class="clearfix">
<span class="card-title"> 标签墙</span>
<router-link :to="'/tags'">
<a class="more hand-style no-select">更多</a>
</router-link>
</div>
<div class="tagBox">
<span
@click="handleClike(item.id, '/tags')"
:style="{
backgroundColor: `${randomColor()}`,
fontSize: item.font,
}"
class="tag-item hand-style"
v-for="(item, index) in tagList"
:key="index"
>
{{ item.name }}
</span>
</div>
</el-card>
<!-- 天气组件 -->
<el-card class="box-card weather" v-if="false">
<div class="clearfix">
<span class="card-title"> 今日天气</span>
</div>
<div id="he-plugin-standard"></div>
</el-card>
</div>
<el-card class="soft" v-if="false">
<a
:href="defaultSetting.poster1Href"
target="_blank"
class="hand-style"
>
<img
v-lazy="defaultSetting.poster1Img"
:key="defaultSetting.poster1Img"
alt=""
/>
<div class="soft-title">{{ defaultSetting.poster1Title }}</div>
<div class="soft-info">资源推荐</div>
<div class="overlay"></div>
</a>
</el-card>
</div>
<div
class="bigBox"
style="
display: flex;
flex-direction: column;
margin-left: 20px;
flex: 1;
"
>
<!-- 热门分类 -->
<div class="hot_category">
<el-tabs
v-model="activeName"
class="demo-tabs"
@tab-click="handleTabClick"
>
<el-tab-pane
v-for="(item, index) in categoryList"
:key="index"
:name="index + ''"
>
<template #label>
<span class="custom-tabs-label">
<el-icon style="margin-left: 3px">
<component :is="item.icon" />
</el-icon>
<span>{{ item.name }}</span>
</span>
</template>
</el-tab-pane>
</el-tabs>
</div>
<!-- 分割线 -->
<div
style="
width: 100%;
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
min-height: 500px;
max-height: 1000px;
overflow-y: auto;
border-radius: 10px;
"
class="content"
>
<div class="articleBox" v-if="articleList.length > 0">
<el-card
class="articleItem box-shadow-top wow pulse"
v-for="(item, index) in articleList"
:key="index"
>
<div class="articleInfo">
<div class="articleInfo-item">
<div>
<el-tooltip
class="box-item"
effect="dark"
content="原创文章"
placement="top"
>
<span v-if="item.isOriginal" class="original">
<el-icon><Tickets /></el-icon>
</span>
</el-tooltip>
<span v-if="item.isStick" class="top">置顶</span>
<router-link :to="'/article/' + item.id">
<h3 class="xiahuaxian hand-style">{{ item.title }}</h3>
</router-link>
<div class="summary">
<el-text line-clamp="3" size="large">
{{ item.summary }}
</el-text>
</div>
</div>
<router-link :to="'/article/' + item.id">
<div class="articleImgBox" style="">
<img
class="articleImg hand-style"
v-lazy="item.avatar"
:key="item.avatar"
/>
</div>
</router-link>
</div>
</div>
<div class="bottumItem">
<div class="articleUser">
<el-avatar
class="userAvatar"
:src="item.userAvatar"
></el-avatar>
<span>{{ item.nickname }}</span>
</div>
<div class="tag">
<el-tooltip
class="box-item"
effect="dark"
content="文章分类"
placement="top"
>
<el-tag
class="hand-style"
@click="handleClike(item.categoryId, '/category')"
>
<i class="el-icon-folder-opened"></i>
{{ item.categoryName }}
</el-tag>
</el-tooltip>
<el-tooltip
class="box-item"
effect="dark"
content="文章标签"
placement="top"
v-for="tag in item.tagList"
:key="tag.id"
>
<el-tag
:type="tagStyle[Math.round(Math.random() * 4)]"
class="hand-style"
@click="handleClike(tag.id, '/tags')"
>
<i class="el-icon-collection-tag"></i>
{{ tag.name }}
</el-tag>
</el-tooltip>
</div>
<div class="articleOhter">
<span class="item">
<el-icon><View /></el-icon>
<span class="name">阅读</span>{{ item.quantity }}
</span>
<span class="item">
<el-icon><ChatLineRound /></el-icon>
<span class="name">评论</span>{{ item.commentCount }}
</span>
<!-- <span class="item">
<span v-if="item.isCollect">
<i style="font-size: 1rem;" class="el-icon-star-on"></i>
<span class="name">收藏</span>{{ item.collectCount }}
</span>
<span v-else>
<i style="font-size: 1rem;" class="el-icon-star-off"></i>
<span class="name">收藏</span>{{ item.collectCount }}
</span>
</span> -->
<span class="item">
<i
style="font-size: 0.8rem"
class="iconfont icon-dianzan1"
></i>
<span class="name">赞</span>{{ item.likeCount }}
</span>
<span class="item">
<el-icon><Clock /></el-icon>{{ item.formatCreateTime }}
</span>
</div>
</div>
</el-card>
<!-- 分页按钮 -->
<div>
<sy-pagination
:pageNo="pageData.pageNo"
:pages="pages"
@changePage="handlePage"
/>
</div>
</div>
<sy-empty v-else message="很抱歉，暂无文章" />
</div>
</div>
</div>
<div class="sayBox box-shadow">
<router-link :to="'/say'">
<a
class="say-item"
@mouseleave="start"
@mouseenter="stop"
v-for="(item, index) in sayList"
:key="index"
v-show="index == currentIndex"
>
<svg-icon name="say"></svg-icon>
<span class="say-content" v-html="item.content"> </span>
</a>
</router-link>
</div>
<div class="content">
<!-- 左侧内容 -->
<div style="width: 100%" v-if="false">
<div class="articleBox" v-if="articleList.length > 0">
<el-card
class="articleItem box-shadow-top wow pulse"
v-for="(item, index) in articleList"
:key="index"
>
<div class="articleInfo">
<div class="articleInfo-item">
<div>
<el-tooltip
class="box-item"
effect="dark"
content="原创文章"
placement="top"
>
<span v-if="item.isOriginal" class="original">
<el-icon><Tickets /></el-icon>
</span>
</el-tooltip>
<span v-if="item.isStick" class="top">置顶</span>
<router-link :to="'/article/' + item.id">
<h3 class="xiahuaxian hand-style">{{ item.title }}</h3>
</router-link>
<div class="summary">
<el-text line-clamp="3" size="large">
{{ item.summary }}
</el-text>
</div>
</div>
<router-link :to="'/article/' + item.id">
<div class="articleImgBox" style="">
<img
class="articleImg hand-style"
v-lazy="item.avatar"
:key="item.avatar"
/>
</div>
</router-link>
</div>
</div>
<div class="bottumItem">
<div class="articleUser">
<el-avatar
class="userAvatar"
:src="item.userAvatar"
></el-avatar>
<span>{{ item.nickname }}</span>
</div>
<div class="tag">
<el-tooltip
class="box-item"
effect="dark"
content="文章分类"
placement="top"
>
<el-tag
class="hand-style"
@click="handleClike(item.categoryId, '/category')"
>
<i class="el-icon-folder-opened"></i>
{{ item.categoryName }}
</el-tag>
</el-tooltip>
<el-tooltip
class="box-item"
effect="dark"
content="文章标签"
placement="top"
v-for="tag in item.tagList"
:key="tag.id"
>
<el-tag
:type="tagStyle[Math.round(Math.random() * 4)]"
class="hand-style"
@click="handleClike(tag.id, '/tags')"
>
<i class="el-icon-collection-tag"></i>
{{ tag.name }}
</el-tag>
</el-tooltip>
</div>
<div class="articleOhter">
<span class="item">
<el-icon><View /></el-icon>
<span class="name">阅读</span>{{ item.quantity }}
</span>
<span class="item">
<el-icon><ChatLineRound /></el-icon>
<span class="name">评论</span>{{ item.commentCount }}
</span>
<!-- <span class="item">
<span v-if="item.isCollect">
<i style="font-size: 1rem;" class="el-icon-star-on"></i>
<span class="name">收藏</span>{{ item.collectCount }}
</span>
<span v-else>
<i style="font-size: 1rem;" class="el-icon-star-off"></i>
<span class="name">收藏</span>{{ item.collectCount }}
</span>
</span> -->
<span class="item">
<i
style="font-size: 0.8rem"
class="iconfont icon-dianzan1"
></i>
<span class="name">赞</span>{{ item.likeCount }}
</span>
<span class="item">
<el-icon><Clock /></el-icon>{{ item.formatCreateTime }}
</span>
</div>
</div>
</el-card>
<!-- 分页按钮 -->
<div>
<sy-pagination
:pageNo="pageData.pageNo"
:pages="pages"
@changePage="handlePage"
/>
</div>
</div>
<sy-empty v-else message="很抱歉，暂无文章" />
</div>
<!-- 右侧内容 -->
<div class="rightBox" v-if="false">
<el-card
class="box-card"
style="perspective: 1000px; position: relative; height: 120px"
>
<div class="front">
<div style="width: 50%">
<h2>扫一扫</h2>
<span style="margin-left: 20px"> 关注公众号 </span>
</div>
<img
v-lazy="defaultSetting.overturnImg"
:key="defaultSetting.overturnImg"
alt=""
/>
</div>
<div class="back">
<div style="width: 50%">
<h2>扫一扫</h2>
<span style="margin-left: 20px"> 体验小程序 </span>
</div>
<img
v-lazy="defaultSetting.appletImg"
:key="defaultSetting.appletImg"
alt=""
/>
</div>
</el-card>
<!-- 推荐文章 -->
<el-card class="box-card recomArticle" v-if="newArticleList.length">
<div class="clearfix">
<span class="card-title">推荐文章</span>
</div>
<ul class="recomArticleUl">
<li v-for="(item, index) in newArticleList" :key="index">
<div :class="index == 0 ? 'article-item-top1' : 'article-item'">
<div class="recomCover">
<router-link :to="'/article/' + item.id">
<div class="imgBox">
<span>{{ index + 1 }}</span>
<img
class="hand-style"
v-lazy="item.avatar"
:key="item.avatar"
/>
</div>
</router-link>
</div>
<p class="info">
<router-link
class="tuijian-title hand-style"
:to="'/article/' + item.id"
>
{{ item.title }}
</router-link>
<span class="time">{{ item.createTime }}</span>
</p>
</div>
</li>
</ul>
</el-card>
<!-- 关注我 -->
<!-- <el-card class="box-card guanzhu">
<div class="clearfix">
<span class="card-title">关注我</span>
</div>
<ul class="guanzhuList">
<li v-show="isShow(2)">
<div class="guanzhu-item qq">
<svg-icon name="qq" />
<a
class="hand-style"
:href="
'//wpa.qq.com/msgrd?v=3&uin=' +
webInfo.qqNumber +
'&site=qq&menu=yes'
"
target="_blank"
>
{{ webInfo.qqNumber }}
</a>
<span
title="点击复制"
@click="copy(webInfo.qqNumber)"
class="copyBtn name hand-style"
>
QQ号
</span>
</div>
</li>
<li v-show="isShow(6)">
<div class="guanzhu-item qqgroup">
<svg-icon name="qqgroup" />
<a class="hand-style" href="javascript:;">
{{ webInfo.qqGroup }}
</a>
<span
title="点击复制"
@click="copy(webInfo.qqGroup)"
class="copyBtn name hand-style"
>
QQ群
</span>
</div>
</li>
<li v-show="isShow(3)">
<div class="guanzhu-item github">
<svg-icon name="github" />
<a class="hand-style" :href="webInfo.github" target="_blank">
{{ webInfo.github }}
</a>
<span
title="点击复制"
@click="copy(webInfo.github)"
class="copyBtn name hand-style"
>
github
</span>
</div>
</li>
<li v-show="isShow(4)">
<div class="guanzhu-item gitee">
<svg-icon name="gitee" />
<a class="hand-style" :href="webInfo.gitee" target="_blank">
{{ webInfo.gitee }}
</a>
<span
title="点击复制"
@click="copy(webInfo.gitee)"
class="copyBtn name hand-style"
>
gitee
</span>
</div>
</li>
<li v-show="isShow(1)">
<div class="guanzhu-item email">
<svg-icon name="email" />
<a
class="hand-style"
:href="'mailto:' + webInfo.email"
target="_blank"
title="邮箱"
>
{{ webInfo.email }}
</a>
<span
title="点击复制"
@click="copy(webInfo.email)"
class="copyBtn name hand-style"
>
邮箱
</span>
</div>
</li>
<li v-show="isShow(5)">
<div class="guanzhu-item wechat">
<svg-icon name="wechat" />
{{ webInfo.wechat }}
<span
title="点击复制"
@click="copy(webInfo.wechat)"
class="copyBtn name hand-style"
>
微信
</span>
</div>
</li>
</ul>
</el-card> -->
<!-- 标签墙 -->
<el-card class="box-card tag_container">
<div class="clearfix">
<span class="card-title"> 标签墙</span>
<router-link :to="'/tags'">
<a class="more hand-style no-select">更多</a>
</router-link>
</div>
<div class="tagBox">
<span
@click="handleClike(item.id, '/tags')"
:style="{
backgroundColor: `${randomColor()}`,
fontSize: item.font,
}"
class="tag-item hand-style"
v-for="(item, index) in tagList"
:key="index"
>
{{ item.name }}
</span>
</div>
</el-card>
<!-- 天气组件 -->
<!-- <el-card class="box-card weather">
<div class="clearfix">
<span class="card-title"> 今日天气</span>
</div>
<div id="he-plugin-standard"></div>
</el-card> -->
</div>
</div>
</div>
</div>
</template>
<script setup name="Home">
import WOW from "wow.js";
import "wow.js/css/libs/animate.css";
import Clipboard from "clipboard";
import { listArticle, featchHomeData, listCategory } from "@/api";
import { listSay } from "@/api/say";
import SiteInfo from "@/components/authorInfo/index.vue";
import { useSiteStore } from "@/store/moudel/site.js";
import { ref } from "vue";
const { proxy } = getCurrentInstance();
const defaultSetting = ref(proxy.$setting);
const router = useRouter();
const siteStore = useSiteStore();
const webInfo = ref(siteStore.getWebInfo);
const centerDialogVisible = ref(false);
const drawer = ref(false);
const videoSrc = ref("http://api.yujn.cn/api/zzxjj.php");
const pageData = ref({
pageNo: 1,
pageSize: 10,
});
const activeName = ref("0");
const bannerList = ref([]);
const categoryList = ref([
{
id: null,
name: "最新",
icon: "Notification",
desc: "create_time",
},
{
id: null,
name: "最热",
icon: "HotWater",
desc: "quantity",
},
]);
const articleList = ref([]);
const pages = ref(0);
const tagList = ref([]);
const newArticleList = ref([]);
const tagStyle = ref(["success", "info", "warning", "danger"]);
const sayList = ref([]);
const currentIndex = ref(0);
const timer = ref();
const fullscreenLoading = ref(true);
const swiper = ref();
const swiperOpen = ref(true);
onBeforeUnmount(() => {
clearInterval(timer);
});
//点击分类tab标签
function handleTabClick(tab) {
let item = categoryList.value[tab.index];
pageData.value.pageNo = 1;
pageData.value.categoryId = item.id;
pageData.value.orderByDescColumn = item.desc;
listArticle(pageData.value).then((res) => {
articleList.value = res.data.records;
pages.value = res.data.pages;
});
}
//获取主页数据
function getHomeData() {
featchHomeData().then((res) => {
bannerList.value = res.extra.articles;
tagList.value = res.extra.tagCloud;
for (var i = 0; i < tagList.value.length; i++) {
tagList.value[i].font = Math.floor(Math.random() * 10) + 10 + "px";
}
newArticleList.value = res.extra.newArticleList;
});
}
//获取所有分类
function fetchCategoryList() {
listCategory().then((res) => {
categoryList.value.push(...res.data);
});
}
//要显示的联系方式
function isShow(type) {
return webInfo.value.showList.indexOf(type) != -1;
}
//获取所有文章
function getArticleList() {
listArticle(pageData.value)
.then((res) => {
articleList.value.push(...res.data.records);
pages.value = res.data.pages;
})
.finally(() => (fullscreenLoading.value = false));
}
//随机颜色
function randomColor() {
var letters = "0123456789ABCDEF";
var color = "#";
do {
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
} while (color === "#FFFFFF" || color === "#000000");
return color;
}
//切换视频
function nextVideo() {
videoSrc.value = videoSrc.value + "?temps=" + new Date().getTime();
}
//复制
function copy(value) {
const clipboard = new Clipboard(".copyBtn", {
text: () => value,
});
clipboard.on("success", () => {
clipboard.destroy();
});
clipboard.on("error", () => {
pro$toast.error("复制失败");
clipboard.destroy();
});
}
// 分页
function handlePage(val) {
fullscreenLoading.value = true;
pageData.value.pageNo = val;
getArticleList();
}
function handleClike(id, path) {
router.push({
path: path,
query: { id: id },
});
}
//初始化天气
function insertWeather() {
window.WIDGET = {
CONFIG: {
layout: "2",
width: 230,
height: 270,
background: "2",
dataColor: "000000",
borderRadius: "5",
key: "632bf35b75f643fda4f7154697df9f47",
},
};
const script = document.createElement("script");
script.src =
"https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0";
document.body.appendChild(script);
}
//说说列表
function handleGetSayList() {
let pageData = {
pageNo: 1,
pageSize: 5,
};
listSay(pageData).then((res) => {
sayList.value = res.data.records;
for (var i = 0; i < sayList.value.length; i++) {
//这里为过滤掉存在视频的说说
if (sayList.value[i].content.indexOf("<video") > -1) {
sayList.value.splice(i, 1);
i = i - 1;
}
}
start();
});
}
function stop() {
clearInterval(timer.value);
}
function start() {
clearInterval(timer.value);
if (sayList.value.length > 1) {
timer.value = setInterval(() => {
currentIndex.value++;
if (currentIndex.value > sayList.value.length - 1) {
currentIndex.value = 0;
}
}, 3500);
}
}
function goWheel() {
if (swiperOpen.value) {
if (event.deltaY > 0) {
//data中定义one为true 当one为true时执行
swiper.value.next(); //以此来控制每次轮播图切换的张数
}
if (event.deltaY < 0) {
swiper.value.prev();
}
}
swiperOpen.value = false;
setTimeout(() => {
swiperOpen.value = true;
}, 1000);
event.preventDefault();
}
onMounted(() => {
const wow = new WOW({
boxClass: "wow", // animated element css class (default is wow)
animateClass: "animated", // animation css class (default is animated)
offset: 0, // distance to the element when triggering the animation (default is 0)
mobile: true, // trigger animations on mobile devices (default is true)
live: true, // act on asynchronously loaded content (default is true)
callback: function (box) {
// the callback is fired every time an animation is started
// the argument that is passed in is the DOM node being animated
},
scrollContainer: null, // optional scroll container selector, otherwise use window
});
wow.init();
getHomeData();
getArticleList();
insertWeather();
fetchCategoryList();
handleGetSayList();
});
</script>
<style lang="scss" scoped>
.custom-tabs-label {
display: flex;
align-items: center;
}
::v-deep(.el-tabs__nav-wrap::after) {
background-color: var(--background-color);
}
::v-deep(.el-tabs__active-bar) {
background-color: var(--theme-color);
}
::v-deep(.el-dialog) {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 10px;
.el-dialog__header {
.el-dialog__title {
color: #fff;
}
}
.el-dialog__body {
background-color: rgb(140, 140, 140);
}
.conent {
text-align: center;
}
.footer-item {
color: #fff;
}
}
.banner {
position: relative;
height: 420px;
::v-deep(.el-carousel__container) {
height: 100% !important;
}
.title {
position: absolute;
height: 50px;
line-height: 50px;
text-align: center;
width: 100%;
bottom: 50px;
color: #fff;
background: rgba(0, 0, 0, 0.3);
z-index: 1;
}
.bannerImg {
width: 100%;
height: 100%;
}
}
.main-container {
@media screen and (max-width: 1118px) {
// padding-left: 10px;
// padding-right: 10px;
.top-right,
.rightBox,
.articleImg {
display: none;
}
.bg {
width: 100vw;
height: 50vh;
position: relative;
overflow: hidden;
.background-image-index {
width: 100vw;
height: 50vh;
// position: fixed;
z-index: -1;
}
.background-image-index::before {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
content: "";
}
#bannerWave1 {
height: 84px;
background: url("../../assets/image/bannerwave1.png");
position: absolute;
width: 100%;
bottom: 0;
z-index: 10;
animation: gradientBG 120s linear infinite;
}
#bannerWave2 {
height: 100px;
background: url("../../assets/image/bannerwave2.png");
position: absolute;
width: 300%;
bottom: 0;
z-index: 5;
animation: gradientBG 120s linear infinite;
}
/* 背景位置移动 */
@keyframes gradientBG {
0% {
background-position: 0 50%;
}
20% {
background-position: 40% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
@keyframes header-effect {
0% {
opacity: 0;
transform: translateY(-50px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
}
.main {
width: 100%;
margin-top: 0 !important;
.bannerBox {
width: 100%;
.banner {
height: 200px;
border-radius: 5px;
}
}
.articleInfo-item {
width: 95%;
}
.bigBox {
width: 100vw;
margin-left: 0 !important;
}
}
}
@media screen and (min-width: 1119px) {
.bg {
height: 50vh;
width: 100%;
margin-top: 60px;
position: relative;
// background: url("../../assets/image/backgroundPicture.jpg");
// background-size: 100% 100%;
// background-repeat: no-repeat;
// animation: 2s ease 0s 1 normal none running header-effect;
overflow: hidden;
.background-image-index {
width: 100vw;
height: 50vh;
// position: fixed;
z-index: -1;
}
.background-image-index::before {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
content: "";
}
#bannerWave1 {
height: 84px;
background: url("../../assets/image/bannerwave1.png");
position: absolute;
width: 200%;
bottom: 0;
z-index: 10;
animation: gradientBG 120s linear infinite;
}
#bannerWave2 {
height: 100px;
background: url("../../assets/image/bannerwave2.png");
position: absolute;
width: 400%;
bottom: 0;
z-index: 5;
animation: gradientBG 120s linear infinite;
}
/* 背景位置移动 */
@keyframes gradientBG {
0% {
background-position: 0 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
@keyframes header-effect {
0% {
opacity: 0;
transform: translateY(-50px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
}
.main {
width: 90%;
.bannerBox {
width: 70%;
::v-deep(.banner) {
border-radius: 5px;
}
}
.articleImgBox {
width: 180px;
height: 110px;
overflow: hidden;
border: 1px solid var(--border-line);
border-radius: 5px;
margin-left: auto;
&:hover .articleImg {
transform: scale(1.1);
}
.articleImg {
width: 100%;
height: 100%;
transition: all 0.5s;
}
}
.top-right {
display: inline-block;
width: 20%;
height: auto;
margin-left: 20px;
.box-card {
font-size: 16px;
padding: 12px;
background-color: var(--background-color);
color: var(--article-color);
margin-bottom: 15px;
.card-title {
padding-left: 40px;
&::before,
&::after {
position: absolute;
width: 12px;
height: 12px;
transform: none;
background: #fc625d;
border-radius: 50%;
top: 4px;
left: 20px;
content: "";
}
&::after {
left: 5px;
background-color: #fdbc40;
}
}
.front,
.back {
position: absolute;
width: 100%;
transform-style: preserve-3d;
backface-visibility: hidden;
transition-duration: 0.5s;
transition-timing-function: "ease-in";
}
.front {
display: flex;
align-items: center;
img {
width: 120px;
height: 120px;
}
}
.back {
transform: rotateY(180deg);
display: flex;
align-items: center;
img {
width: 120px;
height: 120px;
}
}
&:hover .front,
&:focus .front {
transform: rotateY(180deg);
}
&:hover .back,
&:focus .back {
transform: rotateY(0deg);
}
&:hover {
.clearfix {
&::before {
content: "";
width: 70px;
}
}
}
.clearfix {
position: relative;
margin-bottom: 20px;
svg {
width: 22px;
height: 22px;
vertical-align: -5px;
margin-right: 5px;
}
&::before {
content: "";
width: 25px;
border: 2px solid #333;
position: absolute;
bottom: -10px;
transition: width 0.5s;
}
}
}
.soft {
margin-top: 20px;
background-color: #007aff;
overflow: hidden;
height: 125px;
position: relative;
&:hover .overlay {
opacity: 0;
}
.overlay {
background: rgba(0, 0, 0, 0.3);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 1;
width: 100%;
height: 100%;
transition: all 0.5s;
}
a {
display: inline-block;
width: 100%;
text-decoration: none;
overflow: hidden;
img {
width: 100%;
height: 100%;
}
.soft-title,
.soft-info {
display: block;
padding: 5px;
text-align: center;
background: rgba(0, 0, 0, 0.7);
color: #fff;
}
.soft-title {
position: absolute;
bottom: 0;
width: 100%;
}
.soft-info {
position: absolute;
top: 5px;
left: 5px;
font-size: 0.8rem;
}
}
}
::v-deep(.el-image) {
width: 100%;
height: 47%;
&:last-child {
margin-top: 20px;
}
}
::v-deep(.wh_content_all) {
background-color: var(--theme-color);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
}
.rightBox {
width: 100%;
// margin-left: 20px;
margin-top: 15px;
.box-card {
font-size: 16px;
padding: 12px;
background-color: var(--background-color);
color: var(--article-color);
margin-bottom: 15px;
.card-title {
padding-left: 40px;
&::before,
&::after {
position: absolute;
width: 12px;
height: 12px;
transform: none;
background: #fc625d;
border-radius: 50%;
top: 4px;
left: 20px;
content: "";
}
&::after {
left: 5px;
background-color: #fdbc40;
}
}
.front,
.back {
position: absolute;
width: 100%;
transform-style: preserve-3d;
backface-visibility: hidden;
transition-duration: 0.5s;
transition-timing-function: "ease-in";
}
.back {
transform: rotateY(180deg);
display: flex;
align-items: center;
img {
width: 120px;
height: 120px;
}
}
&:hover .front,
&:focus .front {
transform: rotateY(180deg);
}
&:hover .back,
&:focus .back {
transform: rotateY(0deg);
}
&:hover {
.clearfix {
&::before {
content: "";
width: 70px;
}
}
}
.clearfix {
position: relative;
margin-bottom: 20px;
svg {
width: 22px;
height: 22px;
vertical-align: -5px;
margin-right: 5px;
}
&::before {
content: "";
width: 25px;
border: 2px solid #333;
position: absolute;
bottom: -10px;
transition: width 0.5s;
}
}
}
.recomArticle {
color: var(--article-color);
.recomArticleUl {
display: flex;
padding: 10px;
list-style: none;
flex-wrap: wrap;
li {
width: 100%;
margin-bottom: 20px;
.imgBox span {
background-color: #818b95;
}
&:first-child {
.imgBox span {
background-color: #f56c6c;
}
}
&:nth-child(2) {
.imgBox span {
background-color: #ffa41b;
}
}
&:nth-child(3) {
.imgBox span {
background-color: #409eff;
}
}
&:last-child {
margin-bottom: 10px;
}
&:hover {
::v-deep(.el-image__inner) {
transform: scale(1.1);
}
}
.article-item-top1,
.article-item {
.recomCover {
.imgBox {
margin-right: 10px;
border-radius: 5px;
overflow: hidden;
border: 1px solid var(--border-line);
position: relative;
span {
position: absolute;
display: inline-block;
width: 30px;
border-radius: 2px 8px 8px 2px;
text-align: right;
padding-right: 5px;
font-weight: 700;
color: #fff;
margin-top: 5px;
z-index: 50;
}
img {
width: 100%;
height: 100%;
transition: all 0.5s;
margin-right: 10px;
}
&:hover img {
transform: scale(1.1);
}
}
}
}
.article-item-top1 {
position: relative;
.recomCover {
//
width: 100%;
.imgBox {
width: 100%;
height: 150px;
}
}
.info {
.tuijian-title {
text-align: center;
width: 100%;
position: absolute;
bottom: 30px;
text-decoration: none;
color: #fff;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
background: rgba(0, 0, 0, 0.3);
padding: 5px 0;
&:hover {
color: var(--theme-color);
}
}
.time {
display: none;
}
}
}
.article-item {
height: 100%;
display: flex;
.info {
display: flex;
flex-direction: column;
.tuijian-title {
text-decoration: none;
color: var(--article-color);
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
height: 50%;
&:hover {
color: var(--theme-color);
}
}
.time {
font-size: 0.8rem;
color: var(--text-color);
margin-top: 10px;
}
}
.recomCover {
.imgBox {
width: 120px;
height: 75px;
}
}
}
}
}
}
.guanzhu {
.guanzhuList {
padding: 15px;
list-style: none;
.guanzhu-item {
margin-bottom: 20px;
height: 40px;
line-height: 40px;
font-size: 12px;
display: flex;
position: relative;
border-radius: 3px;
border: 1px solid #333;
a {
text-decoration: none;
color: var(--text-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
flex: 1;
&:hover {
color: var(--theme-color);
}
}
.name {
position: absolute;
right: 0;
width: 60px;
text-align: center;
color: #fff;
transition: width 0.35s;
}
&:hover .name {
width: 80px;
}
svg {
width: 20px;
height: 20px;
margin-left: 5px;
position: relative;
bottom: -10px;
margin-right: 10px;
}
}
.github {
border-color: #606266;
.name {
background-color: #606266;
}
}
.gitee {
border-color: red;
.name {
background-color: red;
}
}
.email {
border-color: #f56c87;
.name {
background-color: #f56c87;
}
}
.wechat {
border-color: #67c23a;
.name {
background-color: #67c23a;
}
}
.qq {
border-color: #409eff;
.name {
background-color: #409eff;
}
}
.qqgroup {
border-color: #ea9518;
.name {
background-color: #ea9518;
}
}
}
}
.tag_container {
font-size: 0.9rem;
background-color: var(--background-color);
&:hover {
transition: all 0.3s;
}
.clearfix {
font-size: 16px;
.more {
float: right;
margin-right: 10px;
font-size: 13px;
color: var(--text-color);
text-decoration: none;
&:hover {
color: var(--theme-color);
}
}
}
.tagBox {
padding-bottom: 10px;
height: auto;
margin-top: 10px;
}
}
.weather {
::v-deep(#he-plugin-standard) {
width: 100% !important;
background-color: var(--background-color) !important;
span,
a {
color: var(--text-color) !important;
}
}
}
}
}
}
.main {
margin-top: 80px;
.video-container {
position: relative;
max-width: 92vw;
max-height: 100vh;
border-radius: 40px;
box-shadow: rgba(0, 51, 203, 0.5) 0px 0px 40px;
overflow: hidden;
}
.main-box {
width: 100%;
display: flex;
}
.hot_category {
// margin-top: 30px;
::v-deep(.el-tabs__item:hover span) {
color: #409eff;
}
}
.sayBox {
background-color: var(--background-color);
width: 100%;
margin-bottom: 15px;
border-radius: 5px;
overflow: hidden;
::v-deep(a) {
text-decoration: none;
}
.say-item {
display: flex;
padding: 10px;
color: var(--article-color);
animation: fade-in 0.45s linear 1;
align-items: center;
@keyframes fade-in {
0% {
transform: translateY(-30px);
}
100% {
transform: translateY(0);
}
}
.say-content {
display: inline-block;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
svg {
margin-right: 15px;
width: 22px;
height: 22px;
vertical-align: -5px;
animation: show 1s ease-in-out infinite alternate;
}
@keyframes show {
0% {
opacity: 1;
}
100% {
opacity: 0.6;
}
}
}
}
.content {
display: flex;
justify-content: center;
.articleBox {
font-size: 1rem;
width: 98%;
.articleItem {
position: relative;
padding: 10px 5px 10px 15px;
background-color: var(--background-color);
margin-bottom: 20px;
margin-top: 20px;
.articleInfo {
color: var(--article-color);
.original {
position: absolute;
right: 0;
top: 0;
width: 0;
height: 0;
border-color: transparent #40c9c6;
/*上下颜色 左右颜色*/
border-width: 0 40px 40px 0;
border-style: solid;
i {
position: absolute;
top: 4px;
right: -37px;
font-size: 16px;
color: aquamarine;
}
}
.articleInfo-item {
display: flex;
height: 100px;
justify-content: space-between;
a {
color: var(--article-color);
}
.top {
background-image: -webkit-linear-gradient(
0deg,
#3ca5f6 0,
#a86af9 100%
);
padding-left: 5px;
padding-right: 5px;
display: inline-block;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
font-size: 0.9rem;
margin-right: 5px;
color: #fff;
}
h3 {
position: relative;
display: inline-block;
}
.summary {
margin-top: 10px;
}
}
}
.bottumItem {
align-items: center;
display: flex;
margin-top: 20px;
flex-wrap: wrap;
.articleUser {
line-height: 50px;
span {
color: var(--theme-color);
margin-left: 3px;
}
.userAvatar {
vertical-align: middle;
border: 1px solid var(--border-line);
transition: transform 0.5s;
&:hover {
transform: rotate(360deg);
}
}
}
.tag {
display: inline-block;
margin-left: 20px;
.el-tag {
margin-right: 8px;
}
}
.articleOhter {
margin-left: 20px;
font-size: 0.8rem;
color: var(--text-color);
.item {
margin-right: 10px;
.el-icon {
vertical-align: -2px;
}
.name {
margin-right: 3px;
}
i {
margin-right: 3px;
}
}
}
}
}
}
}
}
}
</style>
PC效果图：
手机端效果图：
