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-21 21:12:34 +08:00
parent 1fe29e35b8
commit a45d591988
3 changed files with 142 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,6 +5,7 @@
}
:root {
--theme-bg-color: rgba(16 18 27 / 40%);
--border-color: rgba(113 119 144 / 25%);
--theme-color: #f9fafb;
@ -888,7 +889,6 @@ body.light-mode .video-bg:before {
.MyPopover{
max-width:200px;
max-height:100px;
/*overflow: auto;*/
}
.MyPopover::-webkit-scrollbar {
@ -910,3 +910,25 @@ body.light-mode .video-bg:before {
-ms-overflow-style: none;
}
/*main-container结构下的标头格式*/
.HeadLine{
margin-left:20px;
font-size:30px;
display:flex;
flex-direction:row;
flex-wrap:nowrap;
align-items: center;
}
/*main-container结构下的标头字体格式*/
.TitleFont{
margin-left:10px;
font-weight:600;
}
/*main-container结构下的标头矩形图案样式*/
.HeadSquare{
width:4px;
height:25px;
margin-left:5px;
margin-top:3px;
background-color: #59a2a3;
}

BIN
src/assets/img/Banner01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 297 KiB

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

@ -1,16 +1,44 @@
<template>
<div style="display:flex; flex-direction: column;width: 100%;">
<div class="DefinedPage">
<div style="display: flex;flex-direction: column;">
<div class="content-wrapper" style="display:flex; flex-direction: row; flex-wrap: nowrap">
<div class="content-wrapper" style="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>
<div class="NavInfo" style="margin-top:45px;margin-left:50px;width:200px;">
<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;">91视频网站</span><br/>
<div class="NavInfo" >
<span>创建时间：2023年12月20日</span><br/>
<span>创建用户：答辩超人</span><br/>
<span>所属标签：｛小视频｝</span><br/>
<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"
@ -20,7 +48,7 @@
<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:6px;"></i>
<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;">
@ -35,7 +63,7 @@
<span>评分： 3.8分</span>
</div>
</div>
<i class="el-icon-star-on" id="little-Circle-content" style=" padding:7px; "></i>
<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;">
@ -45,18 +73,18 @@
<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:7.5px; "></i>
<i class="el-icon-warning" id="little-Circle-content" style=" padding:5px; "></i>
</el-tooltip>
</div>
</div>
</div>
</div>
<div class="NavInfo" id="Rec" style="margin-top:45px;display: flex">
<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:40px;"><i class="el-icon-s-opportunity"></i> 热门推荐</span>
<span style="padding-left:20px;"><i class="el-icon-s-opportunity"></i> 热门推荐</span>
</div>
<div class="RecAll">
<div class="SingleLabel">
@ -93,7 +121,7 @@
</div>
</div>
</div>
<div class="SingleLabel" style=" margin-left:10px;">
<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>-->
@ -131,10 +159,34 @@
</div>
</div>
<div class="content-wrapper" style="width:100%;height:150px;">
hyhyh
<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>
</div>
<!-- <img src=""/>-->
</div>
@ -162,7 +214,37 @@ export default {
}
</script>
<style lang="css">
.DefinedPage{
display:flex;
flex-direction: column;
width:100%;
overflow: auto;
}
</style>
<style scoped>
/**标签详情**/
.ArticleContent{
width:80%;
margin-left:60px;
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);
}
/** 总推荐标签 **/
.RecAll{
display:flex;
@ -182,7 +264,7 @@ export default {
#ALabel{
margin-top:8px;
margin-left:5px;
width:210px;
width:202px;
height:55px;
border-radius:10px;
}
@ -197,19 +279,32 @@ export default {
border-radius:10px;
height:300px;
width: 450px;
background-image: url("../../assets/img/FacPic.jpg");
background-color: rgba(255, 255, 255, 0.49);
background-position: center 0px;
background-size: 130% auto;
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;
background-color: rgba(175, 175, 175, 0.5);
border-color:var(--border-color);
border-style:solid;
background-color: rgba(175, 175, 175, 0.32);
}
#little-Circle-content{
font-size:25px;