详情页修改
This commit is contained in:
parent
1fe29e35b8
commit
a45d591988
@ -5,6 +5,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
|
|
||||||
--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(113 119 144 / 25%);
|
||||||
--theme-color: #f9fafb;
|
--theme-color: #f9fafb;
|
||||||
@ -888,7 +889,6 @@ body.light-mode .video-bg:before {
|
|||||||
|
|
||||||
.MyPopover{
|
.MyPopover{
|
||||||
max-width:200px;
|
max-width:200px;
|
||||||
max-height:100px;
|
|
||||||
/*overflow: auto;*/
|
/*overflow: auto;*/
|
||||||
}
|
}
|
||||||
.MyPopover::-webkit-scrollbar {
|
.MyPopover::-webkit-scrollbar {
|
||||||
@ -910,3 +910,25 @@ body.light-mode .video-bg:before {
|
|||||||
-ms-overflow-style: none;
|
-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
BIN
src/assets/img/Banner01.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 297 KiB |
@ -1,16 +1,44 @@
|
|||||||
<template>
|
<template>
|
||||||
<div style="display:flex; flex-direction: column;width: 100%;">
|
<div class="DefinedPage">
|
||||||
<div style="display: flex;flex-direction: column;">
|
<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 class="card" style=" width: 150px;height:150px;margin-top:50px">
|
<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 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>
|
||||||
<div class="NavInfo" style="margin-top:45px;margin-left:50px;width:200px;">
|
|
||||||
|
|
||||||
|
<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;">91视频网站</span><br/>
|
||||||
<div class="NavInfo">
|
<div class="NavInfo" >
|
||||||
<span>创建时间:2023年12月20日</span><br/>
|
<span style="width:200px">创建时间:2023年12月20日</span><br/>
|
||||||
<span>创建用户:答辩超人</span><br/>
|
<span style="width:200px">创建用户:答辩超人</span><br/>
|
||||||
<span>所属标签:{小视频}</span><br/>
|
<span style="width:200px">所属标签:{小视频}</span><br/>
|
||||||
<div style="display: flex;flex-direction: row">
|
<div style="display: flex;flex-direction: row">
|
||||||
<div class="little-Circle" id="readNum" style=" margin-left:15px;">
|
<div class="little-Circle" id="readNum" style=" margin-left:15px;">
|
||||||
<el-tooltip placement="top" width="150"
|
<el-tooltip placement="top" width="150"
|
||||||
@ -20,7 +48,7 @@
|
|||||||
<span style="font-size:12px !important;">【91视频网站】总浏览量</span><br/><br/>
|
<span style="font-size:12px !important;">【91视频网站】总浏览量</span><br/><br/>
|
||||||
<div style="width:100% ;text-align: center">114514 次</div>
|
<div style="width:100% ;text-align: center">114514 次</div>
|
||||||
</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>
|
</el-tooltip>
|
||||||
</div>
|
</div>
|
||||||
<div class="little-Circle" id="Rank" style="margin-left:15px;">
|
<div class="little-Circle" id="Rank" style="margin-left:15px;">
|
||||||
@ -35,7 +63,7 @@
|
|||||||
<span>评分: 3.8分</span>
|
<span>评分: 3.8分</span>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</el-tooltip>
|
||||||
</div>
|
</div>
|
||||||
<div class="little-Circle" id="Rank" style="margin-left:15px;">
|
<div class="little-Circle" id="Rank" style="margin-left:15px;">
|
||||||
@ -45,18 +73,18 @@
|
|||||||
<div class="MyPopover" slot="content">
|
<div class="MyPopover" slot="content">
|
||||||
<span style="font-size:12px !important;">向管理员反馈问题</span><br/><br/>
|
<span style="font-size:12px !important;">向管理员反馈问题</span><br/><br/>
|
||||||
</div>
|
</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>
|
</el-tooltip>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</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);
|
<div style="background-color: rgba(255,147,207,0.2);
|
||||||
width:100%;border-radius:10px;
|
width:100%;border-radius:10px;
|
||||||
font-size:25px">
|
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>
|
||||||
<div class="RecAll">
|
<div class="RecAll">
|
||||||
<div class="SingleLabel">
|
<div class="SingleLabel">
|
||||||
@ -93,7 +121,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</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="app-card" id="ALabel">
|
||||||
<!-- <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
|
<!-- <div class="little-Circle" :style="{backgroundImage: 'url(' + '../../assets/img/beauty.jpg' + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
@ -131,10 +159,34 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content-wrapper" style="width:100%;height:150px;">
|
<div style="width:100%;background-color: var(--theme-bg-color);color: var(--theme-color)">
|
||||||
hyhyh
|
<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>
|
</div>
|
||||||
<!-- <img src=""/>-->
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
@ -162,7 +214,37 @@ export default {
|
|||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
<style lang="css">
|
||||||
|
.DefinedPage{
|
||||||
|
display:flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width:100%;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
<style scoped>
|
<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{
|
.RecAll{
|
||||||
display:flex;
|
display:flex;
|
||||||
@ -182,7 +264,7 @@ export default {
|
|||||||
#ALabel{
|
#ALabel{
|
||||||
margin-top:8px;
|
margin-top:8px;
|
||||||
margin-left:5px;
|
margin-left:5px;
|
||||||
width:210px;
|
width:202px;
|
||||||
height:55px;
|
height:55px;
|
||||||
border-radius:10px;
|
border-radius:10px;
|
||||||
}
|
}
|
||||||
@ -197,19 +279,32 @@ export default {
|
|||||||
border-radius:10px;
|
border-radius:10px;
|
||||||
height:300px;
|
height:300px;
|
||||||
width: 450px;
|
width: 450px;
|
||||||
background-image: url("../../assets/img/FacPic.jpg");
|
background-color: var(--theme-bg-color);
|
||||||
background-color: rgba(255, 255, 255, 0.49);
|
|
||||||
background-position: center 0px;
|
|
||||||
background-size: 130% auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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{
|
.little-Circle{
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width:40px;
|
width:40px;
|
||||||
height:40px;
|
height:40px;
|
||||||
border-radius: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{
|
#little-Circle-content{
|
||||||
font-size:25px;
|
font-size:25px;
|
||||||
|
Loading…
Reference in New Issue
Block a user