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-22 22:58:27 +08:00
parent d20dea0944
commit 46905ed6f1
8 changed files with 751 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,9 +1,9 @@
<template>
<div class="DefinedPage">
<div style="display: flex;flex-direction: column;">
<div class="content-wrapper" style="display:flex; flex-direction: row; flex-wrap: nowrap;height:430px !important;">
<div class="LeftPart" style="overflow: auto">
<div class="JustBack" style="width:670px;display:flex; flex-direction: row; flex-wrap: nowrap;height:430px !important;">
<div id="ShowPic" style="display: flex;flex-direction: column;flex-wrap: wrap">
<div class="card" style=" width: 150px;height:150px;margin-top:50px">
<div class="card" style=" width: 180px;height:180px;margin-top:50px">
戳戳跳转
</div>
<div id="IconGroup" style="margin-top:60px;display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-20px">
@@ -31,10 +31,8 @@
</div>
</div>
</div>
<div class="NavInfo" style="margin-top:45px;margin-left:50px;width:220px;">
<span style="font-size:30px;">91视频网站</span><br/>
<span style="font-size:30px;font-family: STHupo">91视频网站</span><br/>
<div class="NavInfo" >
<span style="width:200px">创建时间：2023年12月20日</span><br/>
<span style="width:200px">创建用户：答辩超人</span><br/>
@@ -79,128 +77,96 @@
</div>
</div>
</div>
<div class="NavInfo" id="Rec" style="margin-left:20px;margin-top:45px;display: flex">
<div style="background-color: rgba(255,147,207,0.2);
width:100%;border-radius:10px;
font-size:25px">
<span style="padding-left:20px;"><i class="el-icon-s-opportunity"></i> 热门推荐</span>
</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">
<div class="HeadSquare"></div>
<div class="TitleFont"><i class="el-icon-s-promotion"></i>网站介绍</div>
</div>
<div class="RecAll">
<div class="SingleLabel">
<div class="app-card" id="ALabel">
<!-- <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
<!-- </div>-->
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-5px;margin-top:-12px">
<img class="little-Circle" src="../../assets/img/beauty.jpg"/>
<span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
</div>
</div>
<div class="app-card" id="ALabel">
<!-- <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
<!-- </div>-->
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-5px;margin-top:-12px">
<img class="little-Circle" src="../../assets/img/beauty.jpg"/>
<span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
</div>
</div>
<div class="app-card" id="ALabel">
<!-- <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
<!-- </div>-->
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-5px;margin-top:-12px">
<img class="little-Circle" src="../../assets/img/beauty.jpg"/>
<span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
</div>
</div>
<div class="app-card" id="ALabel">
<!-- <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
<!-- </div>-->
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-5px;margin-top:-12px">
<img class="little-Circle" src="../../assets/img/beauty.jpg"/>
<span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
</div>
</div>
</div>
<div class="SingleLabel" style=" margin-left:3px;">
<div class="app-card" id="ALabel">
<!-- <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
<!-- </div>-->
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-5px;margin-top:-12px">
<img class="little-Circle" src="../../assets/img/beauty.jpg"/>
<span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
</div>
</div>
<div class="app-card" id="ALabel">
<!-- <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
<!-- </div>-->
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-5px;margin-top:-12px">
<img class="little-Circle" src="../../assets/img/beauty.jpg"/>
<span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
</div>
</div>
<div class="app-card" id="ALabel">
<!-- <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
<!-- </div>-->
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-5px;margin-top:-12px">
<img class="little-Circle" src="../../assets/img/beauty.jpg"/>
<span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
</div>
</div>
<div class="app-card" id="ALabel">
<!-- <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
<!-- </div>-->
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-5px;margin-top:-12px">
<img class="little-Circle" src="../../assets/img/beauty.jpg"/>
<span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
</div>
</div>
</div>
<div class="ArticleContent">
<span>91视频一款免费、高清视频在线观看软件。内容丰富多元,节目持续更新,内容播放清晰流畅,操作界面简单友好,真正为用户带来“悦享品质”的观映体验。
全网视频大收罗；收费电影免费看；美剧、动漫、电影、电视剧迷们的福利社<br/>
畅享移动高清
为移动用户量身打造，操作界面清新友好内容丰富多元。
快速发现内容
分频道视频浏览，分类更合理，高效。
更小、更快、更流畅
安装包小、CPU占用少、播放更加流畅清晰。<br/>
使用91视频观看视频需要具备怎样的网络条件
支持无线网络WIFI（WLAN）及3G网络在线观看视频，播放清晰、流畅。其他2G等更低速度的移动网络播放视频时会出现速度慢、无法加载等异常情况，因此不建议使用。
91视频是免费软件，无需支付任何费用即可随时随地观看精彩视频。由于在使用过程中需要连接网络，因此根据不同网络的费用标准会产生相应的服务费用。推荐您使用无线网络WIFI连接方式以节约3G流量费。</span>
</div>
</div>
<!--导航评论-->
</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 ref="ManuEchart" style="width:550px;height:300px;"></div>
</div>
</div>
</div>
<div style="width:100%;background-color: var(--theme-bg-color);color: var(--theme-color)">
<div class="HeadLine">
<div class="HeadSquare"></div>
<div class="TitleFont"><i class="el-icon-s-promotion"></i>网站介绍</div>
</div>
<div class="ArticleContent">
<span>91视频一款免费、高清视频在线观看软件。内容丰富多元,节目持续更新,内容播放清晰流畅,操作界面简单友好,真正为用户带来“悦享品质”的观映体验。
全网视频大收罗；收费电影免费看；美剧、动漫、电影、电视剧迷们的福利社<br/>
畅享移动高清
为移动用户量身打造，操作界面清新友好内容丰富多元。
快速发现内容
分频道视频浏览，分类更合理，高效。
更小、更快、更流畅
安装包小、CPU占用少、播放更加流畅清晰。<br/>
使用91视频观看视频需要具备怎样的网络条件
支持无线网络WIFI（WLAN）及3G网络在线观看视频，播放清晰、流畅。其他2G等更低速度的移动网络播放视频时会出现速度慢、无法加载等异常情况，因此不建议使用。
91视频是免费软件，无需支付任何费用即可随时随地观看精彩视频。由于在使用过程中需要连接网络，因此根据不同网络的费用标准会产生相应的服务费用。推荐您使用无线网络WIFI连接方式以节约3G流量费。</span>
</div>
</div>
<div style="width:100%;background-color: var(--theme-bg-color);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 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:30px">
<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 class="RightPart" style="overflow: auto;display: flex;flex-direction: column">
<hot-recomment></hot-recomment>
<NewRecomment></NewRecomment>
<RandomRecomment></RandomRecomment>
</div>
</div>
</template>
<script>
import HotRecomment from "@/components/detail/HotRecomment.vue";
import NewRecomment from "@/components/detail/NewRecomment.vue";
import RandomRecomment from "@/components/detail/RandomRecomment.vue";
import UserComment from "@/components/detail/UserComment.vue";
import Vue from "vue";
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts;
export default {
name:"NavDetail",
// eslint-disable-next-line vue/no-unused-components
components: {HotRecomment,NewRecomment,RandomRecomment,UserComment},
data() {
return {
visible: false,
//返回数据：时间列表
TimeList:[],
//返回数据：浏览量
PageView:[],
//Echart图
ManuChart:null,
// Echart图设置项：
MyOption:{},
}},
mounted() {
this.initPage();
},
created() {
@@ -209,7 +175,83 @@ export default {
},
methods: {
// 初始化页面
initPage(){
var that = this;
// Echart图元素绑定Dom
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);
}
}
}
@@ -217,7 +259,7 @@ export default {
<style lang="css">
.DefinedPage{
display:flex;
flex-direction: column;
flex-direction: row;
width:100%;
overflow: auto;
}
@@ -228,7 +270,7 @@ export default {
/**标签详情**/
.ArticleContent{
width:80%;
margin-left:60px;
margin-left:50px;
margin-top:15px;
font-weight:550;
font-size:18px;
@@ -245,86 +287,9 @@ export default {
}
/** 总推荐标签 **/
.RecAll{
display:flex;
flex-direction: row;
}
/** 单列推荐标签 **/
.SingleLabel{
margin-top:2px;
//background-color: rgba(217, 217, 217, 0.5);
width:210px;
height: 100%;
border-radius:10px;
}
/** 单推荐标签 **/
#ALabel{
margin-top:8px;
margin-left:5px;
width:202px;
height:55px;
border-radius:10px;
}
#ALabel :hover{
transform: scale(1.05);
}
#Rec{
margin-left:70px;
border-radius:10px;
height:300px;
width: 450px;
background-color: var(--theme-bg-color);
}
.little-Triangle{
text-align:center;
width:100px;
height:40px;
border-color:var(--border-color);
border-style:solid;
border-width: 5px;
border-radius:5px;
background-color: rgba(175, 175, 175, 0.31);
}
.little-Triangle :hover{
transform: scale(1.07);
}
.little-Circle{
text-align: center;
width:40px;
height:40px;
border-radius:40px;
border-color:var(--border-color);
border-style:solid;
background-color: rgba(175, 175, 175, 0.32);
}
#little-Circle-content{
font-size:25px;
z-index:999;
}
#readNum :hover{
transform: scale(1.25);
}
#Rank :hover{
transform: scale(1.25);
}
.NavInfo{
font-weight:550;
display: flex;
flex-direction:column;
}
@property --rotate {