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-23 18:40:56 +08:00
parent 11cfe766d7
commit f5178e42ae
11 changed files with 315 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -115,7 +115,7 @@
</div>
</div>
<!--用户评论-->
<div class="JustBack" style="width:670px;display:flex; flex-direction: column; flex-wrap: nowrap;">
<div class="JustBack" style="width:670px;height:auto;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>

55
src/components/detail/UserComment.vue
View File

@@ -19,18 +19,16 @@
</el-card>
<!--评论-->
<el-card style="background-color: var(--theme-comment-color) !important;margin-top:10px">
<div style="display: flex;flex-direction: column;">
<div style="display: flex;flex-direction: column;flex-wrap: wrap">
<span style="font-family: STHupo;font-size:25px;margin-left:-10px;color:var(--theme-color)">评论广场</span>
<!--单条评论-->
<el-divider></el-divider>
<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>
<span style="font-family: STHupo;margin-left:15px;width:100px">评论时间:</span><span style="font-size:13px;margin-left:0px;width:150px">2023年12月22日</span>
</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)">
@@ -38,10 +36,31 @@
8~18 位包含大小写字母、数字、特殊字符的密码8~18 位包含大小写字母、数字、特殊字符的密码8~18 位包含大小写字母、数字、特殊字符的密码
</div>
</div>
<div style="display: flex;flex-direction: row-reverse;width:100%;">
<span style="font-size:18px;font-family: STHupo;line-height:44px;margin-left:5px">112</span>
<el-button type="danger" icon="myIcon" size="medium" plain circle style="margin-top:6px;" ></el-button>
</div>
<!--子评论-->
<el-card style="background-color: var(--theme-comment-color) !important;margin-top:50px;margin-left:70px">
<div style="display: flex;flex-direction: column;flex-wrap: wrap">
<div style="display: flex;flex-direction: row;color:var(--theme-color);margin-left:5px;">
<img class="little-Circle" style="width:50px !important;height:50px !important;margin-top:10px;" src="../../assets/img/beauty.jpg"/>
<span style="font-family: STHupo;width:70px;margin-top:25px;margin-left:10px">JK少男</span>
<span style="font-family: STHupo;width:50px;margin-top:25px;color: rgba(255,78,78,0.5)!important;">回复 </span>
<span style="font-family: STHupo;width:70px;margin-top:25px;margin-left:7px">JK少女</span>
<span style="font-family: STHupo;width:70px;margin-top:25px;margin-left:7px">:</span>
</div>
</div>
<div style="display: flex;flex-direction: column;flex-wrap: wrap">
内容丰富多元,节目持续更新,内容播放清晰流畅,操作界面简单友好,真正为用户带来“悦享品质”的观映体验。
内容丰富多元,节目持续更新,内容播放清晰流畅,操作界面简单友好,真正为用户带来“悦享品质”的观映体验。
内容丰富多元,节目持续更新,内容播放清晰流畅,操作界面简单友好,真正为用户带来“悦享品质”的观映体验。
内容丰富多元,节目持续更新,内容播放清晰流畅,操作界面简单友好,真正为用户带来“悦享品质”的观映体验。
</div>
</el-card>
</div>
</div>
</div>
</el-card>
</div>
@@ -153,5 +172,27 @@ $popper-background-color: #000;
}
}
::v-deep .myIcon{
background: url("../../assets/img/Like3D.svg")center no-repeat;
width:15px;
height:15px;
background-size: cover;
}
::v-deep .myIcon:before {
content: "替";
font-size: 17px;
visibility: hidden;
}
::v-deep .myIcon:before {
content: "\e611";
}
::v-deep .el-divider{
background-color:var(--theme-color);
height:2px
}
</style>