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 00:54:34 +08:00
parent 89aa365af9
commit 53e15a4ff4
5 changed files with 221 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -885,6 +885,21 @@ body.light-mode .video-bg:before {
background: var(--scrollbar-bg);
border-radius: 10px;
}
.MyPopover{
max-width:200px;
max-height:100px;
/*overflow: auto;*/
}
.MyPopover::-webkit-scrollbar {
width: 10px;
background-color: #ffce9a;
border-radius: 5px;
}
.MyPopover::-webkit-scrollbar-thumb {
background-color: #676767;
border-radius: 5px;
}
*::-webkit-scrollbar {
display: none;
}

BIN
src/assets/img/FacPic.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

BIN
src/assets/img/SkyPic.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 109 KiB

BIN
src/assets/img/beauty.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

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

@@ -1,31 +1,157 @@
<template>
<div style="display:flex; flex-direction: column;width: 100%;">
<div style="display: flex;flex-direction: column;">
<div class="content-wrapper" style="display:flex; flex-direction: row; flex-wrap: nowrap">
<div class="card" style=" width: 150px;height:150px;margin-top:50px">
戳戳跳转
</div>
<div class="NavInfo" style="margin-top:45px;margin-left:50px;">
<div class="NavInfo" style="margin-top:45px;margin-left:50px;width:200px;">
<span style="font-size:30px;">91视频网站</span><br/>
<el-icon><Star /></el-icon>
<div class="NavInfo">
<span>所属标签：</span><br/>
<span>创建时间：</span><br/>
<div style="width:40px;height:40px;border-radius:40px;background-color: white;"></div>
<span>创建时间：2023年12月20日</span><br/>
<span>创建用户：答辩超人</span><br/>
<span>所属标签：｛小视频｝</span><br/>
<div style="display: flex;flex-direction: row">
<div class="little-Circle" id="readNum" style=" margin-left:15px;">
<el-tooltip placement="top" width="150"
trigger="hover"
effect="dark" close-delay="2000">
<div class="MyPopover" slot="content">
<span style="font-size:12px !important;">【91视频网站】总浏览量</span><br/><br/>
<div style="width:100% ;text-align: center">114514 次</div>
</div>
<i class="el-icon-s-custom" id="little-Circle-content" style=" padding:6px;"></i>
</el-tooltip>
</div>
<div class="little-Circle" id="Rank" style="margin-left:15px;">
<el-tooltip placement="top" width="150"
trigger="hover"
effect="dark" close-delay="2000">
<div class="MyPopover" slot="content">
<span style="font-size:12px !important;">【91视频网站】总星级</span><br/><br/>
<div style="width:100% ;text-align: center;">
<span style="font-size:20px">★★★☆☆</span>
<br/>
<span>评分： 3.8分</span>
</div>
</div>
<i class="el-icon-star-on" id="little-Circle-content" style=" padding:7px; "></i>
</el-tooltip>
</div>
<div class="little-Circle" id="Rank" style="margin-left:15px;">
<el-tooltip placement="top" width="150"
trigger="hover"
effect="dark" close-delay="2000">
<div class="MyPopover" slot="content">
<span style="font-size:12px !important;">向管理员反馈问题</span><br/><br/>
</div>
<i class="el-icon-warning" id="little-Circle-content" style=" padding:7.5px; "></i>
</el-tooltip>
</div>
</div>
</div>
</div>
<div class="NavInfo" id="Rec" style="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>
</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:10px;">
<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>
<div class="content-wrapper" style="width:100%;height:150px;">
hyhyh
</div>
<!-- <img src=""/>-->
</div>
</div>
</template>
<!--[if lte IE 6]>
<script src="js/png.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('img, .logo,.ico');
</script>
<![endif]-->
<script>
export default {
name:"NavDetail",
data() {
return {
visible: false,
}},
mounted() {
@@ -43,6 +169,68 @@ export default {
}
</script>
<style scoped>
/** 总推荐标签 **/
.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:210px;
height:55px;
border-radius:10px;
}
#ALabel :hover{
transform: scale(1.05);
}
#Rec{
margin-left:70px;
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;
}
.little-Circle{
text-align: center;
width:40px;
height:40px;
border-radius:40px;
background-color: rgba(175, 175, 175, 0.5);
}
#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;
@@ -104,16 +292,16 @@ body {
.card::before {
content: "";
width: 104%;
height: 102%;
width: 108%;
height: 108%;
border-radius: 8px;
background-image: linear-gradient(
var(--rotate)
, #5ddcff, #3c67e3 43%, #4e00c2);
position: absolute;
z-index: -1;
top: -1%;
left: -2%;
//top: -1%;
//left: -2%;
animation: spin 2.5s linear infinite;
}