LoveNav/love-nav-vue
LoveNav/love-nav-vue
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

兰代清没头发

Browse Source
This commit is contained in:
Zhang HaoYang 2023-12-24 22:28:00 +08:00
parent 1d23a9eaf0
commit a3479d41b8
2 changed files with 342 additions and 291 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

632
src/components/detail/NavDetail.vue
View File

@ -1,135 +1,141 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<LeftSide :category="category"></LeftSide> <LeftSide :category="category"></LeftSide>
<div class="DefinedPage" > <div class="DefinedPage">
<div class="LeftPart" style="overflow: auto"> <div class="LeftPart" style="overflow: auto">
<div class="JustBack" style="width:670px;display:flex; flex-direction: row; flex-wrap: nowrap;height:430px !important;"> <div class="JustBack"
<div id="ShowPic" style="display: flex;flex-direction: column;flex-wrap: wrap"> style="width:670px;display:flex; flex-direction: row; flex-wrap: nowrap;height:430px !important;">
<div class="card" style="width: 180px;height:180px;margin-top:50px;background-color: var( --theme-bg-color)" > <div id="ShowPic" style="display: flex;flex-direction: column;flex-wrap: wrap">
<img :src="UrlObj.icon"> <div class="card" style="width: 180px;height:180px;margin-top:50px;background-color: var( --theme-bg-color)"
</div> @click="ToURL()">
<div id="IconGroup" style="margin-top:60px;display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-20px"> <img :src="UrlObj.icon">
<div class="little-Triangle" style=" margin-left:15px;">
<el-tooltip placement="bottom" width="150"
trigger="hover"
effect="dark" close-delay="2000">
<div class="MyPopover" slot="content">
<span style="font-size:12px !important;">【91视频网站】完整URL</span><br/><br/>
<div style="width:100% ;text-align: center">{{UrlObj.url}}</div>
</div>
<i class="el-icon-link" id="little-Circle-content" style="font-weight:550;padding:5px;font-size:15px!important;margin-top:5px">完整URL</i>
</el-tooltip>
</div> </div>
<div class="little-Triangle" style=" margin-left:15px;"> <div id="IconGroup"
<el-tooltip placement="bottom" width="150" style="margin-top:60px;display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-20px">
trigger="hover" <div class="little-Triangle" style=" margin-left:15px;">
effect="dark" close-delay="2000"> <el-tooltip placement="bottom" width="150"
<div class="MyPopover" slot="content"> trigger="hover"
<span style="font-size:12px !important;">【91视频网站】手机二维码</span><br/><br/> effect="dark" close-delay="2000">
<div style="width:100% ;text-align: center"><img style="width:150px" src="../../assets/img/beauty.jpg" /></div>
</div>
<i class="el-icon-picture" id="little-Circle-content" style="font-weight:550; padding:5px;font-size:15px!important;margin-top:5px">手机查看</i>
</el-tooltip>
</div>
</div>
</div>
<div class="NavInfo" style="margin-top:45px;margin-left:50px;width:220px;">
<span style="font-size:30px;font-family: STHupo">{{UrlObj.name}}</span><br/>
<div class="NavInfo" >
<span style="width:200px">创建时间：{{Cdate}}</span><br/>
<span style="width:200px">创建用户：{{}}</span><br/>
<span style="width:200px">所属标签：｛小视频｝</span><br/>
<div style="display: flex;flex-direction: row">
<div class="little-Circle" id="readNum" style=" margin-left:15px;">
<el-tooltip placement="top" width="150"
trigger="hover"
effect="dark" close-delay="2000">
<div class="MyPopover" slot="content"> <div class="MyPopover" slot="content">
<span style="font-size:12px !important;">【91视频网站】总浏览量</span><br/><br/> <span style="font-size:12px !important;">【{{ UrlObj.name }}】完整URL</span><br/><br/>
<div style="width:100% ;text-align: center">{{UrlObj.views}} 次</div> <div style="width:100% ;text-align: center">{{ UrlObj.url }}</div>
</div> </div>
<i class="el-icon-s-custom" id="little-Circle-content" style=" padding:5px;"></i> <i class="el-icon-link" id="little-Circle-content"
style="font-weight:550;padding:5px;font-size:15px!important;margin-top:5px">完整URL</i>
</el-tooltip> </el-tooltip>
</div> </div>
<div class="little-Circle" id="Rank" style="margin-left:15px;"> <div class="little-Triangle" style=" margin-left:15px;">
<el-tooltip placement="top" width="150" <el-tooltip placement="bottom" width="150"
trigger="hover" trigger="hover"
effect="dark" close-delay="2000"> effect="dark" close-delay="2000">
<div class="MyPopover" slot="content"> <div class="MyPopover" slot="content">
<span style="font-size:12px !important;">【91视频网站】总星级</span><br/><br/> <span style="font-size:12px !important;">【{{ UrlObj.name }}】手机二维码</span><br/><br/>
<div style="width:100% ;text-align: center;"> <div style="width:100% ;text-align: center"><img style="width:150px"
<span style="font-size:20px">★★★☆☆</span> :src="getQR(UrlId,UrlObj.icon)"></div>
<br/> </div>
<span>评分： 3.8分</span> <i class="el-icon-picture" id="little-Circle-content"
style="font-weight:550; padding:5px;font-size:15px!important;margin-top:5px">手机查看</i>
</el-tooltip>
</div>
</div>
</div>
<div class="NavInfo" style="margin-top:45px;margin-left:50px;width:220px;">
<span style="font-size:30px;font-family: STHupo">{{ UrlObj.name }}</span><br/>
<div class="NavInfo">
<span style="width:200px">创建时间：{{ Cdate }}</span><br/>
<span style="width:200px">创建用户：{{}}</span><br/>
<span style="width:200px">所属标签：｛小视频｝</span><br/>
<div style="display: flex;flex-direction: row">
<div class="little-Circle" id="readNum" style=" margin-left:15px;">
<el-tooltip placement="top" width="150"
trigger="hover"
effect="dark" close-delay="2000">
<div class="MyPopover" slot="content">
<span style="font-size:12px !important;">【91视频网站】总浏览量</span><br/><br/>
<div style="width:100% ;text-align: center">{{ UrlObj.views }} 次</div>
</div> </div>
</div> <i class="el-icon-s-custom" id="little-Circle-content" style=" padding:5px;"></i>
<i class="el-icon-star-on" id="little-Circle-content" style=" padding:5.5px; "></i> </el-tooltip>
</el-tooltip> </div>
</div> <div class="little-Circle" id="Rank" style="margin-left:15px;">
<div class="little-Circle" id="Rank" style="margin-left:15px;" @click="WarnToAdmin()"> <el-tooltip placement="top" width="150"
<el-tooltip placement="top" width="150" trigger="hover"
trigger="hover" effect="dark" close-delay="2000">
effect="dark" close-delay="2000"> <div class="MyPopover" slot="content">
<div class="MyPopover" slot="content" > <span style="font-size:12px !important;">【91视频网站】总星级</span><br/><br/>
<span style="font-size:12px !important;">向管理员反馈问题</span><br/><br/> <div style="width:100% ;text-align: center;">
</div> <span style="font-size:20px">★★★☆☆</span>
<i class="el-icon-warning" id="little-Circle-content" style=" padding:5px; "></i> <br/>
</el-tooltip> <span>评分： 3.8分</span>
</div>
</div>
<i class="el-icon-star-on" id="little-Circle-content" style=" padding:5.5px; "></i>
</el-tooltip>
</div>
<div class="little-Circle" id="Rank" style="margin-left:15px;" @click="WarnToAdmin()">
<el-tooltip placement="top" width="150"
trigger="hover"
effect="dark" close-delay="2000">
<div class="MyPopover" slot="content">
<span style="font-size:12px !important;">向管理员反馈问题</span><br/><br/>
</div>
<i class="el-icon-warning" id="little-Circle-content" style=" padding:5px; "></i>
</el-tooltip>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <!-- 标签详情-->
<!-- 标签详情--> <div class="JustBack" style="width:670px;display:flex; flex-direction: column; flex-wrap: nowrap;">
<div class="JustBack" style="width:670px;display:flex; flex-direction: column; flex-wrap: nowrap;"> <!--文章详情-->
<!--文章详情--> <div style="width:670px;color: var(--theme-color)">
<div style="width:670px;color: var(--theme-color)"> <div class="HeadLine">
<div class="HeadLine"> <div class="HeadSquare"></div>
<div class="HeadSquare"></div> <div class="TitleFont"><i class="el-icon-s-promotion"></i>网站介绍</div>
<div class="TitleFont"><i class="el-icon-s-promotion"></i>网站介绍</div> </div>
<div class="ArticleContent">
{{ UrlObj.desc }}
</div>
</div> </div>
<div class="ArticleContent"> <!--导航评论-->
{{UrlObj.desc}} </div>
<!--热度趋势-->
<div class="JustBack" style="width:670px;display:flex; flex-direction: column; flex-wrap: nowrap;">
<div style="width:670px;color: var(--theme-color)">
<div class="HeadLine" style="margin-top:50px">
<div class="HeadSquare"></div>
<div class="TitleFont"><i class="el-icon-s-marketing"></i>热度趋势</div>
</div>
<div class="ArticleContent">
<div id="ManuEchart" style="width:550px;height:300px;"></div>
</div>
</div> </div>
</div> </div>
<!--导航评论--> <!--用户评论-->
</div> <div class="JustBack" style="width:670px;height:auto;display:flex; flex-direction: column; flex-wrap: nowrap;">
<!--热度趋势--> <div style="width:670px;color: var(--theme-color)">
<div class="JustBack" style="width:670px;display:flex; flex-direction: column; flex-wrap: nowrap;"> <div class="HeadLine" style="margin-top:30px">
<div style="width:670px;color: var(--theme-color)"> <div class="HeadSquare"></div>
<div class="HeadLine" style="margin-top:50px"> <div class="TitleFont"><i class="el-icon-s-comment"></i>用户评论</div>
<div class="HeadSquare"></div> </div>
<div class="TitleFont"><i class="el-icon-s-marketing"></i>热度趋势</div> <div class="ArticleContent" style="margin-left:6px !important;width:580px !important;">
</div> <el-card style="background-color: var(--theme-comment-color)">
<div class="ArticleContent">
<div ref="ManuEchart" style="width:550px;height:300px;"></div> <UserComment></UserComment>
</el-card>
</div>
</div> </div>
</div> </div>
</div> </div>
<!--用户评论--> <div class="RightPart" style="overflow: auto;display: flex;flex-direction: column">
<div class="JustBack" style="width:670px;height:auto;display:flex; flex-direction: column; flex-wrap: nowrap;"> <hot-recomment></hot-recomment>
<div style="width:670px;color: var(--theme-color)"> <NewRecomment></NewRecomment>
<div class="HeadLine" style="margin-top:30px"> <RandomRecomment></RandomRecomment>
<div class="HeadSquare"></div>
<div class="TitleFont"><i class="el-icon-s-comment"></i>用户评论</div>
</div>
<div class="ArticleContent" style="margin-left:6px !important;width:580px !important;">
<el-card style="background-color: var(--theme-comment-color)">
<UserComment></UserComment>
</el-card>
</div>
</div>
</div> </div>
</div> </div>
<div class="RightPart" style="overflow: auto;display: flex;flex-direction: column">
<hot-recomment></hot-recomment>
<NewRecomment></NewRecomment>
<RandomRecomment></RandomRecomment>
</div>
</div>
</div> </div>
</template> </template>
@ -142,58 +148,64 @@ import Vue from "vue";
import * as echarts from 'echarts' import * as echarts from 'echarts'
import axios from "axios"; import axios from "axios";
import LeftSide from "@/components/home/LeftSide.vue"; import LeftSide from "@/components/home/LeftSide.vue";
Vue.prototype.$echarts = echarts; Vue.prototype.$echarts = echarts;
export default { export default {
name:"NavDetail", name: "NavDetail",
// eslint-disable-next-line vue/no-unused-components // eslint-disable-next-line vue/no-unused-components
components: {LeftSide, HotRecomment,NewRecomment,RandomRecomment,UserComment}, components: {LeftSide, HotRecomment, NewRecomment, RandomRecomment, UserComment},
data() { data() {
return { return {
category:[], category: [],
visible: false, visible: false,
//返回数据：时间列表 //返回数据：时间列表
TimeList:[], TimeList: [],
//返回数据：浏览量 //返回数据：浏览量
PageView:[], PageView: [],
//Echart图 //Echart图
ManuChart:null, ManuChart: null,
// Echart图设置项： // 获取urlId:
MyOption:{}, UrlId: null,
// 获取urlId: // 获取标签对象：
UrlId :null, UrlObj: Object,
// 获取标签对象： // 创建时间：
UrlObj:Object, UnDate: null,
// 创建时间： Cdate: null,
UnDate:null, // 时间趋势对象：
Cdate:null, viewByTime: null,
}}, // 处理后的时间对象：
// 横轴时间：
xTime: [],
// y轴阅读量：
YView: [],
imageCode: null,
}
},
mounted() { mounted() {
this.initPage(); this.initPage();
this.GetNav(this.UrlId); this.getQR(this.UrlId, this.UrlObj.icon);
this.initEchart();
this.getCategories();
}, },
created() { created() {
}, },
computed: { computed: {},
},
methods: { methods: {
getCategories() { // 日访问：
ViewByTime(id) {
let _this = this; let _this = this;
axios({ axios.get('/api/getUrlAccess', {
method: 'post', params: {
url: '/api/UrlAndCate/disposeBookmarkExhibitedToJson', urlId: id
}).then(function (res) {
// console.log(res);
if (res.data.data) {
_this.category = res.data.data;
} else {
return false;
} }
}).then(function (res) {
_this.viewByTime = res.data;
// console.log(_this.viewByTime)
Object.keys(_this.viewByTime).forEach(key => {
_this.xTime.push(_this.viewByTime[key].time);
_this.YView.push(_this.viewByTime[key].views);
})
_this.initEchart(_this.xTime,_this.YView);
}).catch((error) => { }).catch((error) => {
Vue.prototype.$notify.error({ Vue.prototype.$notify.error({
title: '错误', title: '错误',
@ -202,140 +214,183 @@ export default {
}); });
}) })
}, },
// 获取二维码：
// 时间转换： getQR(url_id, icon_url) {
getFormatDate() { let _this = this;
var that = this; axios({
console.log(this.UnDate + "传入时间戳"); method: 'post',
var date = new Date(this.UnDate);// 时间戳为10位需*1000，时间戳为13位的话不需乘1000 url: '/api/qrcode/qrc_return',
var Y = date.getFullYear() + '年'; data: {
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月'; url_id: url_id,
var D = date.getDate() + '日 '; icon_url: icon_url
// var h = date.getHours() + ':';
// var m = date.getMinutes() + ':';
// var s = date.getSeconds();
that.Cdate = "" + Y + M + D ;
},
// 初始化页面
initPage(){
this.UrlId = this.$route.query.uid;
},
// 初始化Echart图
initEchart(){
var that = this;
this.ManuChart = this.$echarts.init(this.$refs.ManuEchart);
that.MyOption={
tooltip: {
trigger: 'item',
axisPointer: {
type: 'shadow'
},
backgroundColor: '#fff', // 悬浮框背景色
borderColor: '#000', // 悬浮框边框颜色
borderWidth: 1, // 悬浮框边框宽度
textStyle: { // 悬浮框文字样式
color: '#000',
fontSize: 12
}
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLine:{
show: true,
lineStyle: {
color: '#76aaff',
width: 2,
type: "solid"
}
}
},
yAxis: {
type: 'value',
splitLine:{
lineStyle:{
color:'#76aaff',
}
},
axisLine:{
show: true,
lineStyle: {
color: '#76aaff',
width: 2,
type: "solid"
}
},
axisLabel: {//y轴文字的配置
textStyle: {
color: '#76aaff',
margin: 15
},
// formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
}
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
label: {//文字的显示
show: true, //默认 显示文字
}
},
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'bar'
},
],
dataZoom: {
yAxisIndex: [0],
type:'inside',
start: 0,
end: 100,
zoomLock:true,
}
} }
that.ManuChart.setOption(that.MyOption,true); }).then(function (res) {
}, if (res.data) {
// 获取标签对象 _this.imageCode = "data:image/jpg;base64," + res.data;
GetNav(id){ }
let that = this;
axios({ return false;
method: 'post', }).catch((error) => {
url: '/api/UrlAndCate/clickUrl', Vue.prototype.$notify.error({
params: { title: '错误',
urlId : id message: error === null ? '' : error,
} offset: 0
}).then((res)=>{
that.UrlObj = res.data.data;
that.UnDate = that.UrlObj.createtime;
}).catch((error)=>{
Vue.prototype.$notify.error({
title: '错误',
message: error===null?'':error,
offset: 0
});
}); });
this.getFormatDate(); })
return this.imageCode
},
// 跳转：
ToURL() {
var that = this;
window.open(that.UrlObj.url, '_blank')
},
// 时间转换：
getFormatDate() {
var that = this;
console.log(this.UnDate + "传入时间戳");
var date = new Date(this.UnDate);// 时间戳为10位需*1000，时间戳为13位的话不需乘1000
var Y = date.getFullYear() + '年';
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月';
var D = date.getDate() + '日 ';
// var h = date.getHours() + ':';
// var m = date.getMinutes() + ':';
// var s = date.getSeconds();
that.Cdate = "" + Y + M + D;
},
// 初始化页面
initPage() {
this.UrlId = this.$route.query.uid;
this.GetNav(this.UrlId);
// this.initEchart();
},
// 初始化Echart图
initEchart(xline,yline) {
// var that = this;
var myChart = this.$echarts.init(
document.getElementById('ManuEchart')
);
var MyOption = {
tooltip: {
trigger: 'item',
axisPointer: {
type: 'shadow'
},
dataZoom: [{
type: 'slider', // 设置为滑动条型式
show: true, // 显示dataZoom组件
start: 0, // 默认显示的起始位置为0
end: 30, // 默认显示的结束位置为100
handleSize: 8, // 滑动条的手柄大小
handleStyle: {
color: '#DCE2E8' // 滑动条的手柄颜色
},
xAxisIndex: [0], // 表示控制第一个x轴
filterMode: 'filter' // 设置为filter模式，即数据超过范围时会被过滤掉
}]
,
backgroundColor: '#fff', // 悬浮框背景色
borderColor: '#000', // 悬浮框边框颜色
borderWidth: 1, // 悬浮框边框宽度
textStyle: { // 悬浮框文字样式
color: '#000',
fontSize: 12
}
},
xAxis: {
type: 'category',
data: xline,
axisLine: {
show: true,
lineStyle: {
color: '#76aaff',
width: 2,
type: "solid"
}
}
},
yAxis: {
type: 'value',
splitLine: {
lineStyle: {
color: '#76aaff',
}
},
axisLine: {
show: true,
lineStyle: {
color: '#76aaff',
width: 2,
type: "solid"
}
},
axisLabel: {//y轴文字的配置
textStyle: {
color: '#76aaff',
margin: 15
},
// formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
}
},
series: [
{
data: yline,
type: 'line',
label: {//文字的显示
show: true, //默认 显示文字
}
},
{
data: yline,
type: 'bar'
},
],
dataZoom: {
yAxisIndex: [0],
type: 'inside',
start: 0,
end: 100,
zoomLock: true,
}
}
myChart.setOption(MyOption, true);
},
// 获取标签对象
GetNav(id) {
let that = this;
axios({
method: 'post',
url: '/api/UrlAndCate/clickUrl',
params: {
urlId: id
}
}).then((res) => {
that.UrlObj = res.data.data;
that.UnDate = that.UrlObj.createtime;
}).catch((error) => {
Vue.prototype.$notify.error({
title: '错误',
message: error === null ? '' : error,
offset: 0
});
});
this.getFormatDate();
}, },
// 向管理员反馈 // 向管理员反馈
WarnToAdmin(){ WarnToAdmin() {
console.log(this.UrlId); console.log(this.xTime);
console.log(this.UrlObj);
console.log(this.UrlObj.createtime + typeof (this.UrlObj.createtime));
console.log(this.Cdate);
} }
} }
} }
</script> </script>
<style lang="css"> <style lang="css">
.DefinedPage{ .DefinedPage {
display:flex; display: flex;
flex-direction: row; flex-direction: row;
width:100%; width: 100%;
overflow: auto; overflow: auto;
} }
</style> </style>
@ -343,30 +398,26 @@ export default {
<style scoped> <style scoped>
/**标签详情**/ /**标签详情**/
.ArticleContent{ .ArticleContent {
width:80%; width: 80%;
margin-left:50px; margin-left: 50px;
margin-top:15px; margin-top: 15px;
font-weight:550; font-weight: 550;
font-size:18px; font-size: 18px;
color: var(--theme-color); color: var(--theme-color);
} }
/**趋势图**/ /**趋势图**/
.LookNumEchart{ .LookNumEchart {
width:80%; width: 80%;
margin-left:60px; margin-left: 60px;
margin-top:15px; margin-top: 15px;
font-weight:550; font-weight: 550;
font-size:18px; font-size: 18px;
color: var(--theme-color); color: var(--theme-color);
} }
@property --rotate { @property --rotate {
syntax: "<angle>"; syntax: "<angle>";
initial-value: 132deg; initial-value: 132deg;
@ -413,6 +464,7 @@ body {
color: rgb(88 199 250 / 100%); color: rgb(88 199 250 / 100%);
transition: color 1s; transition: color 1s;
} }
.card:hover:before, .card:hover:after { .card:hover:before, .card:hover:after {
animation: none; animation: none;
opacity: 0; opacity: 0;
@ -425,8 +477,7 @@ body {
height: 108%; height: 108%;
border-radius: 8px; border-radius: 8px;
background-image: linear-gradient( background-image: linear-gradient(
var(--rotate) var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
, #5ddcff, #3c67e3 43%, #4e00c2);
position: absolute; position: absolute;
z-index: -1; z-index: -1;
//top: -1%; //top: -1%;
@ -447,8 +498,7 @@ body {
transform: scale(0.8); transform: scale(0.8);
filter: blur(calc(var(--card-height) / 6)); filter: blur(calc(var(--card-height) / 6));
background-image: linear-gradient( background-image: linear-gradient(
var(--rotate) var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
, #5ddcff, #3c67e3 43%, #4e00c2);
opacity: 1; opacity: 1;
transition: opacity .5s; transition: opacity .5s;
animation: spin 2.5s linear infinite; animation: spin 2.5s linear infinite;

1
src/components/home/HomePage.vue
View File

@ -98,6 +98,7 @@ export default {
}).then(function (res) { }).then(function (res) {
if (res.data) { if (res.data) {
_this.navList = res.data; _this.navList = res.data;
console.log(res.data);
} }
}).catch((error) => { }).catch((error) => {
Vue.prototype.$notify.error({ Vue.prototype.$notify.error({