398 lines
13 KiB
Vue
398 lines
13 KiB
Vue
<template>
|
||
<div class="DefinedPage" >
|
||
<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: 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">
|
||
<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">http://91vedio/1145141919</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 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视频网站】手机二维码</span><br/><br/>
|
||
<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">91视频网站</span><br/>
|
||
<div class="NavInfo" >
|
||
<span style="width:200px">创建时间：2023年12月20日</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">114514 次</div>
|
||
</div>
|
||
<i class="el-icon-s-custom" id="little-Circle-content" style=" padding:5px;"></i>
|
||
</el-tooltip>
|
||
</div>
|
||
<div class="little-Circle" id="Rank" 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;">
|
||
<span style="font-size:20px">★★★☆☆</span>
|
||
<br/>
|
||
<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;">
|
||
<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 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="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 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="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() {
|
||
|
||
},
|
||
computed: {
|
||
|
||
},
|
||
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);
|
||
}
|
||
}
|
||
|
||
}
|
||
</script>
|
||
<style lang="css">
|
||
.DefinedPage{
|
||
display:flex;
|
||
flex-direction: row;
|
||
width:100%;
|
||
overflow: auto;
|
||
}
|
||
</style>
|
||
|
||
|
||
<style scoped>
|
||
/**标签详情**/
|
||
.ArticleContent{
|
||
width:80%;
|
||
margin-left:50px;
|
||
margin-top:15px;
|
||
font-weight:550;
|
||
font-size:18px;
|
||
color: var(--theme-color);
|
||
}
|
||
/**趋势图**/
|
||
.LookNumEchart{
|
||
width:80%;
|
||
margin-left:60px;
|
||
margin-top:15px;
|
||
font-weight:550;
|
||
font-size:18px;
|
||
color: var(--theme-color);
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
@property --rotate {
|
||
syntax: "<angle>";
|
||
initial-value: 132deg;
|
||
inherits: false;
|
||
}
|
||
|
||
:root {
|
||
--card-height: 65vh;
|
||
--card-width: calc(var(--card-height) / 1.5);
|
||
}
|
||
|
||
|
||
body {
|
||
min-height: 100vh;
|
||
background: #212534;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
padding-top: 2rem;
|
||
padding-bottom: 2rem;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.card {
|
||
background: #191c29;
|
||
width: var(--card-width);
|
||
height: var(--card-height);
|
||
padding: 3px;
|
||
position: relative;
|
||
border-radius: 6px;
|
||
justify-content: center;
|
||
align-items: center;
|
||
text-align: center;
|
||
display: flex;
|
||
font-size: 1.5em;
|
||
color: rgb(88 199 250 / 0%);
|
||
font-weight: 700;
|
||
cursor: pointer;
|
||
font-family: fantasy;
|
||
}
|
||
|
||
.card:hover {
|
||
color: rgb(88 199 250 / 100%);
|
||
transition: color 1s;
|
||
}
|
||
.card:hover:before, .card:hover:after {
|
||
animation: none;
|
||
opacity: 0;
|
||
}
|
||
|
||
|
||
.card::before {
|
||
content: "";
|
||
width: 108%;
|
||
height: 108%;
|
||
border-radius: 8px;
|
||
background-image: linear-gradient(
|
||
var(--rotate)
|
||
, #5ddcff, #3c67e3 43%, #4e00c2);
|
||
position: absolute;
|
||
z-index: -1;
|
||
//top: -1%;
|
||
//left: -2%;
|
||
animation: spin 2.5s linear infinite;
|
||
}
|
||
|
||
.card::after {
|
||
position: absolute;
|
||
content: "";
|
||
top: calc(var(--card-height) / 6);
|
||
left: 0;
|
||
right: 0;
|
||
z-index: -1;
|
||
height: 100%;
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
transform: scale(0.8);
|
||
filter: blur(calc(var(--card-height) / 6));
|
||
background-image: linear-gradient(
|
||
var(--rotate)
|
||
, #5ddcff, #3c67e3 43%, #4e00c2);
|
||
opacity: 1;
|
||
transition: opacity .5s;
|
||
animation: spin 2.5s linear infinite;
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% {
|
||
--rotate: 0deg;
|
||
}
|
||
100% {
|
||
--rotate: 360deg;
|
||
}
|
||
}
|
||
|
||
a {
|
||
color: #212534;
|
||
text-decoration: none;
|
||
font-family: sans-serif;
|
||
font-weight: bold;
|
||
margin-top: 2rem;
|
||
}
|
||
</style> |