详情页
This commit is contained in:
parent
d20dea0944
commit
46905ed6f1
@ -5,9 +5,9 @@
|
||||
}
|
||||
|
||||
:root {
|
||||
|
||||
--theme-comment-color: rgba(178, 188, 250, 0.4);
|
||||
--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;
|
||||
--inactive-color: rgb(113 119 144 / 78%);
|
||||
--body-font: "Poppins", sans-serif;
|
||||
@ -24,6 +24,7 @@
|
||||
}
|
||||
|
||||
.light-mode {
|
||||
--theme-comment-color: rgba(255, 202, 145, 0.4);
|
||||
--theme-bg-color: rgb(255 255 255 / 31%);
|
||||
--theme-color: #3c3a3a;
|
||||
--inactive-color: #333333;
|
||||
@ -913,7 +914,7 @@ body.light-mode .video-bg:before {
|
||||
|
||||
/*main-container结构下的标头格式*/
|
||||
.HeadLine{
|
||||
margin-left:20px;
|
||||
margin-left:5px;
|
||||
font-size:30px;
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
@ -923,7 +924,8 @@ body.light-mode .video-bg:before {
|
||||
/*main-container结构下的标头字体格式*/
|
||||
.TitleFont{
|
||||
margin-left:10px;
|
||||
font-weight:600;
|
||||
font-weight:550;
|
||||
font-family: STHupo;
|
||||
}
|
||||
/*main-container结构下的标头矩形图案样式*/
|
||||
.HeadSquare{
|
||||
@ -933,3 +935,107 @@ body.light-mode .video-bg:before {
|
||||
margin-top:3px;
|
||||
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
1
src/assets/img/Like.svg
Normal 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>
|
After Width: | Height: | Size: 980 B |
1
src/assets/img/likeHover.svg
Normal file
1
src/assets/img/likeHover.svg
Normal 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>
|
After Width: | Height: | Size: 1003 B |
108
src/components/detail/HotRecomment.vue
Normal file
108
src/components/detail/HotRecomment.vue
Normal 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>
|
@ -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 {
|
||||
|
110
src/components/detail/NewRecomment.vue
Normal file
110
src/components/detail/NewRecomment.vue
Normal 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
109
src/components/detail/RandomRecomment.vue
Normal 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
157
src/components/detail/UserComment.vue
Normal 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>
|
Loading…
Reference in New Issue
Block a user