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

114
src/assets/css/home-style.css
View File

@ -5,9 +5,9 @@
} }
:root { :root {
--theme-comment-color: rgba(178, 188, 250, 0.4);
--theme-bg-color: rgba(16 18 27 / 40%); --theme-bg-color: rgba(16 18 27 / 40%);
--border-color: rgba(113 119 144 / 25%); --border-color: rgba(28, 32, 37, 0.25);
--theme-color: #f9fafb; --theme-color: #f9fafb;
--inactive-color: rgb(113 119 144 / 78%); --inactive-color: rgb(113 119 144 / 78%);
--body-font: "Poppins", sans-serif; --body-font: "Poppins", sans-serif;
@ -24,6 +24,7 @@
} }
.light-mode { .light-mode {
--theme-comment-color: rgba(255, 202, 145, 0.4);
--theme-bg-color: rgb(255 255 255 / 31%); --theme-bg-color: rgb(255 255 255 / 31%);
--theme-color: #3c3a3a; --theme-color: #3c3a3a;
--inactive-color: #333333; --inactive-color: #333333;
@ -913,7 +914,7 @@ body.light-mode .video-bg:before {
/*main-container结构下的标头格式*/ /*main-container结构下的标头格式*/
.HeadLine{ .HeadLine{
margin-left:20px; margin-left:5px;
font-size:30px; font-size:30px;
display:flex; display:flex;
flex-direction:row; flex-direction:row;
@ -923,7 +924,8 @@ body.light-mode .video-bg:before {
/*main-container结构下的标头字体格式*/ /*main-container结构下的标头字体格式*/
.TitleFont{ .TitleFont{
margin-left:10px; margin-left:10px;
font-weight:600; font-weight:550;
font-family: STHupo;
} }
/*main-container结构下的标头矩形图案样式*/ /*main-container结构下的标头矩形图案样式*/
.HeadSquare{ .HeadSquare{
@ -933,3 +935,107 @@ body.light-mode .video-bg:before {
margin-top:3px; margin-top:3px;
background-color: #59a2a3; background-color: #59a2a3;
} }
/*详情页左侧部分*/
.LeftPart{
display: flex;
flex-direction: column;
}
/*背景板*/
.JustBack{
display: flex;
flex-direction: column;
color: var(--theme-color);
padding: 20px 40px;
height: 100%;
background-color: var(--theme-bg-color);
}
/** 总推荐标签 **/
.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{
font-family: STXihei;
font-weight:600;
font-size:13px;
margin-top:8px;
margin-left:5px;
width:155px;
height:30px;
border-radius:10px;
color: var(--theme-color);
}
#ALabel :hover{
transform: scale(1.05);
}
#Rec{
border-color:var(--border-color);
border-width:5px;
border-style:solid;
height:250px;
width: 340px;
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;
}

1
src/assets/img/Like.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1703249893507" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1710" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M907.636364 418.909091a124.276364 124.276364 0 0 0-101.934546-52.829091h-162.909091l36.072728-153.134545V209.454545a139.636364 139.636364 0 0 0-40.727273-98.676363A136.145455 136.145455 0 0 0 538.298182 69.818182a138.24 138.24 0 0 0-134.516364 134.981818l-3.490909 15.592727a186.181818 186.181818 0 0 1-180.829091 145.454546A128 128 0 0 0 93.090909 494.778182v330.472727A127.767273 127.767273 0 0 0 219.461818 954.181818h482.909091a126.370909 126.370909 0 0 0 120.32-90.065454l102.167273-330.24A130.094545 130.094545 0 0 0 907.636364 418.909091z" p-id="1711" data-spm-anchor-id="a313x.collections_detail.0.i3.3c4e3a81j8Ox83" class=""></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 980 B

1
src/assets/img/likeHover.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1703250378460" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1864" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M907.636364 418.909091a124.276364 124.276364 0 0 0-101.934546-52.829091h-162.909091l36.072728-153.134545V209.454545a139.636364 139.636364 0 0 0-40.727273-98.676363A136.145455 136.145455 0 0 0 538.298182 69.818182a138.24 138.24 0 0 0-134.516364 134.981818l-3.490909 15.592727a186.181818 186.181818 0 0 1-180.829091 145.454546A128 128 0 0 0 93.090909 494.778182v330.472727A127.767273 127.767273 0 0 0 219.461818 954.181818h482.909091a126.370909 126.370909 0 0 0 120.32-90.065454l102.167273-330.24A130.094545 130.094545 0 0 0 907.636364 418.909091z" p-id="1865" data-spm-anchor-id="a313x.collections_detail.0.i5.3c4e3a81j8Ox83" class="selected" fill="#faf25f"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1003 B

108
src/components/detail/HotRecomment.vue Normal file
View File

@ -0,0 +1,108 @@
<template>
<div style="width:340px;height:auto;display: flex;">
<div class="NavInfo" id="Rec" style="display:flex;flex-direction: column;">
<div style="background-color: rgba(255,147,207,0.2);
width:100%;border-radius:10px;
font-size:25px;border-color:var(--border-color) ;border-width: 5px">
<span style="padding-left:20px;color:var(--theme-color);font-family:STHupo"><i class="el-icon-s-opportunity"></i> 热门推荐</span>
</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:-10px;margin-top:-18px">
<img class="little-Circle" style="width:35px !important;height: 35px !important;" 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:-10px;margin-top:-18px">
<img class="little-Circle" style="width:35px !important;height: 35px !important;" 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:-10px;margin-top:-18px">
<img class="little-Circle" style="width:35px !important;height: 35px !important;" 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:-10px;margin-top:-18px">
<img class="little-Circle" style="width:35px !important;height: 35px !important;" 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:-10px;margin-top:-18px">
<img class="little-Circle" style="width:35px !important;height: 35px !important;" 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:-10px;margin-top:-18px">
<img class="little-Circle" style="width:35px !important;height: 35px !important;" 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:-10px;margin-top:-18px">
<img class="little-Circle" style="width:35px !important;height: 35px !important;" 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:-10px;margin-top:-18px">
<img class="little-Circle" style="width:35px !important;height: 35px !important;" src="../../assets/img/beauty.jpg"/>
<span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name:"HotRecomment",
data() {
return {
visible: false,
}},
mounted() {
},
created() {
},
computed: {
},
methods: {
}
}
</script>
<style scoped>
</style>

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

@ -1,9 +1,9 @@
<template> <template>
<div class="DefinedPage"> <div class="DefinedPage">
<div style="display: flex;flex-direction: column;"> <div class="LeftPart" style="overflow: auto">
<div class="content-wrapper" style="display:flex; flex-direction: row; flex-wrap: nowrap;height:430px !important;"> <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 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>
<div id="IconGroup" style="margin-top:60px;display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-20px"> <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>
</div> </div>
<div class="NavInfo" style="margin-top:45px;margin-left:50px;width:220px;"> <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" > <div class="NavInfo" >
<span style="width:200px">创建时间：2023年12月20日</span><br/> <span style="width:200px">创建时间：2023年12月20日</span><br/>
<span style="width:200px">创建用户：答辩超人</span><br/> <span style="width:200px">创建用户：答辩超人</span><br/>
@ -79,87 +77,11 @@
</div> </div>
</div> </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>
<div class="RecAll"> <!-- 标签详情-->
<div class="SingleLabel"> <div class="JustBack" style="width:670px;display:flex; flex-direction: column; flex-wrap: nowrap;">
<div class="app-card" id="ALabel"> <!--文章详情-->
<!-- <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">--> <div style="width:670px;color: var(--theme-color)">
<!-- </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>
</div>
</div>
<div style="width:100%;background-color: var(--theme-bg-color);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>
@ -178,29 +100,73 @@
91视频是免费软件，无需支付任何费用即可随时随地观看精彩视频。由于在使用过程中需要连接网络，因此根据不同网络的费用标准会产生相应的服务费用。推荐您使用无线网络WIFI连接方式以节约3G流量费。</span> 91视频是免费软件，无需支付任何费用即可随时随地观看精彩视频。由于在使用过程中需要连接网络，因此根据不同网络的费用标准会产生相应的服务费用。推荐您使用无线网络WIFI连接方式以节约3G流量费。</span>
</div> </div>
</div> </div>
<div style="width:100%;background-color: var(--theme-bg-color);color: var(--theme-color)"> <!--导航评论-->
</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="HeadLine" style="margin-top:50px">
<div class="HeadSquare"></div> <div class="HeadSquare"></div>
<div class="TitleFont"><i class="el-icon-s-marketing"></i>热度趋势</div> <div class="TitleFont"><i class="el-icon-s-marketing"></i>热度趋势</div>
</div> </div>
<div class="ArticleContent"> <div class="ArticleContent">
<div ref="ManuEchart" style="width:550px;height:300px;"></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" 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> </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> </template>
<script> <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 { export default {
name:"NavDetail", name:"NavDetail",
// eslint-disable-next-line vue/no-unused-components
components: {HotRecomment,NewRecomment,RandomRecomment,UserComment},
data() { data() {
return { return {
visible: false, visible: false,
//返回数据：时间列表
TimeList:[],
//返回数据：浏览量
PageView:[],
//Echart图
ManuChart:null,
// Echart图设置项：
MyOption:{},
}}, }},
mounted() { mounted() {
this.initPage();
}, },
created() { created() {
@ -209,7 +175,83 @@ export default {
}, },
methods: { 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"> <style lang="css">
.DefinedPage{ .DefinedPage{
display:flex; display:flex;
flex-direction: column; flex-direction: row;
width:100%; width:100%;
overflow: auto; overflow: auto;
} }
@ -228,7 +270,7 @@ export default {
/**标签详情**/ /**标签详情**/
.ArticleContent{ .ArticleContent{
width:80%; width:80%;
margin-left:60px; margin-left:50px;
margin-top:15px; margin-top:15px;
font-weight:550; font-weight:550;
font-size:18px; 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 { @property --rotate {

110
src/components/detail/NewRecomment.vue Normal file
View File

@ -0,0 +1,110 @@
<template>
<div style="width:340px;height:auto;display: flex;">
<div class="NavInfo" id="Rec" style="display:flex;flex-direction: column;">
<div style="background-color: rgba(255,147,207,0.2);
width:100%;border-radius:10px;
font-size:25px;border-color:var(--border-color) ;border-width: 5px">
<span style="padding-left:20px;color:var(--theme-color);font-family:STHupo"><i class="el-icon-s-flag"></i>
最新推荐
</span>
</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:-10px;margin-top:-18px">
<img class="little-Circle" style="width:35px !important;height: 35px !important;" 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:-10px;margin-top:-18px">
<img class="little-Circle" style="width:35px !important;height: 35px !important;" 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:-10px;margin-top:-18px">
<img class="little-Circle" style="width:35px !important;height: 35px !important;" 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:-10px;margin-top:-18px">
<img class="little-Circle" style="width:35px !important;height: 35px !important;" 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:-10px;margin-top:-18px">
<img class="little-Circle" style="width:35px !important;height: 35px !important;" 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:-10px;margin-top:-18px">
<img class="little-Circle" style="width:35px !important;height: 35px !important;" 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:-10px;margin-top:-18px">
<img class="little-Circle" style="width:35px !important;height: 35px !important;" 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:-10px;margin-top:-18px">
<img class="little-Circle" style="width:35px !important;height: 35px !important;" src="../../assets/img/beauty.jpg"/>
<span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name:"NewRecomment",
data() {
return {
visible: false,
}},
mounted() {
},
created() {
},
computed: {
},
methods: {
}
}
</script>
<style scoped>
</style>

109
src/components/detail/RandomRecomment.vue Normal file
View File

@ -0,0 +1,109 @@
<template>
<div style="width:340px;height:auto;display: flex;">
<div class="NavInfo" id="Rec" style="display:flex;flex-direction: column;">
<div style="background-color: rgba(255,147,207,0.2);
width:100%;border-radius:10px;
font-size:25px;border-color:var(--border-color) ;border-width: 5px">
<span style="padding-left:20px;color:var(--theme-color);font-family:STHupo"><i class="el-icon-s-data"></i>
随机推荐
</span>
</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:-10px;margin-top:-18px">
<img class="little-Circle" style="width:35px !important;height: 35px !important;" 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:-10px;margin-top:-18px">
<img class="little-Circle" style="width:35px !important;height: 35px !important;" 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:-10px;margin-top:-18px">
<img class="little-Circle" style="width:35px !important;height: 35px !important;" 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:-10px;margin-top:-18px">
<img class="little-Circle" style="width:35px !important;height: 35px !important;" 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:-10px;margin-top:-18px">
<img class="little-Circle" style="width:35px !important;height: 35px !important;" 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:-10px;margin-top:-18px">
<img class="little-Circle" style="width:35px !important;height: 35px !important;" 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:-10px;margin-top:-18px">
<img class="little-Circle" style="width:35px !important;height: 35px !important;" 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:-10px;margin-top:-18px">
<img class="little-Circle" style="width:35px !important;height: 35px !important;" src="../../assets/img/beauty.jpg"/>
<span style="margin-top:2px;margin-left:10px;width:90%;text-align: center">弱智吧</span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name:"RandomRecomment",
data() {
return {
visible: false,
}},
mounted() {
},
created() {
},
computed: {
},
methods: {
}
}
</script>
<style scoped>
</style>

157
src/components/detail/UserComment.vue Normal file
View File

@ -0,0 +1,157 @@
<template>
<div style="display: flex;flex-direction: column;flex-wrap: nowrap">
<!-- 发布评论 -->
<el-card style="background-color: var(--theme-comment-color) !important">
<form style="width:560px;">
<div style="display: flex;flex-direction: column;flex-wrap: nowrap">
<span style="font-family: STHupo;color:var(--theme-color)">请输入评分</span>
<el-rate style="margin-top:5px" ></el-rate>
<div style="display: flex;flex-direction: row;margin-top:5px">
<img class="little-Circle" style="width:60px !important;height: 60px !important;" src="../../assets/img/beauty.jpg"/>
<el-input style="width:350px;margin-top:12px;margin-left:10px;" type="textarea" placeholder="请输入一条友善的评论~"></el-input>
<el-button type="success" plain style="height:40px;width:70px;margin-left:10px;margin-top:12px">
<span style="font-family: STHupo;font-size:20px;margin-left:-5px;">提交</span>
</el-button>
</div>
</div>
</form>
</el-card>
<!--评论-->
<el-card style="background-color: var(--theme-comment-color) !important;margin-top:10px">
<div style="display: flex;flex-direction: column;">
<span style="font-family: STHupo;font-size:25px;margin-left:-10px;color:var(--theme-color)">评论广场</span>
<!--单条评论-->
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-top:40px">
<img class="little-Circle" style="width:50px !important;height:50px !important;margin-top:20px;" src="../../assets/img/beauty.jpg"/>
<div style="display: flex;flex-direction: column">
<div style="display: flex;flex-direction: row;color:var(--theme-color);margin-left:5px;">
<span style="font-family: STHupo;width:50px">用户:</span><span style="font-size:13px;margin-left:5px;width:100px">JK少女</span>
<span style="font-family: STHupo;margin-left:15px;width:100px">评论时间:</span><span style="font-size:13px;margin-left:2px;width:150px">2023年12月22日</span>
<div style="display: flex;flex-direction: row-reverse;width:0%">
<el-button type="success" icon="el-icon-thumb" size="small" circle style="margin-top:-7px;"></el-button>
</div>
</div>
<div class='arrow-box popper border arrow-left'
style="background-color: var(--theme-comment-color);margin-left:10px;margin-top:7px;width:430px;border: 3px solid var(--border-color)">
<div style="margin-left:10px;margin-top:5px;color:var(--theme-color);font-size:15px">
8~18 位包含大小写字母、数字、特殊字符的密码8~18 位包含大小写字母、数字、特殊字符的密码8~18 位包含大小写字母、数字、特殊字符的密码
</div>
</div>
</div>
</div>
</div>
</el-card>
</div>
</template>
<script>
export default {
name:"UserComment",
data() {
return {
visible: false,
}},
mounted() {
},
created() {
},
computed: {
},
methods: {
}
}
</script>
<style scoped>
#likeMe{
width:10px;
height:10px;
font-size:35px;
color: #fc9090;
}
#likeMe :hover{
color:yellow !important;
}
$popper-border-color: #f00;
$popper-background-color: #000;
.popper {
display: inline-block;
color: #fff;
font-size: 14px;
line-height: 18px;
padding: 18px;
max-width: 288px;
position: relative;
border-radius: 5px;
background: $popper-background-color;
box-sizing: border-box;
box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
}
.arrow-box {
z-index: 5;
position: relative;
background: $popper-background-color;
box-sizing: border-box;
box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
&.arrow-left {
&::after,
&::before {
position: absolute;
top: 50%;
left: 0;
content: " ";
height: 0;
width: 0;
pointer-events: none;
border: solid transparent;
box-sizing: border-box;
transform-origin: 0 0;
transform: translateY(-8px) rotate(45deg);
}
&::after {
z-index: 4;
border-width: 6px;
border-style: solid;
border-color: transparent transparent $popper-background-color $popper-background-color;
}
&::before {
z-index: 3;
left: -1px;
border-width: 6px;
border-style: solid;
border-color: transparent transparent $popper-border-color $popper-border-color;
box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.3);
}
}
}
.popper,
.arrow-box {
&.border {
border: 1px solid $popper-border-color;
}
}
</style>