hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-09 02:46:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

案例和问答首页样式修改

Browse Source
This commit is contained in:
zhaofang
2022-08-30 18:47:52 +08:00
parent 07aa2c8fb0
commit 0843d3b629
4 changed files with 107 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/assets/styles/portal-index.scss
View File

@@ -7,6 +7,7 @@
font-size: 24px; font-size: 24px;
font-family: JCHEadA; font-family: JCHEadA;
color: #D9D9D9; color: #D9D9D9;
margin-right: 10px;
} }
.portal-title-one{ .portal-title-one{
font-size: 24px; font-size: 24px;
@@ -64,6 +65,14 @@
.content-div{ .content-div{
width: 100% width: 100%
} }
.blue-one{
color: #387DF7;
}
.blue-tow{
color: #089DFF;
}
.blue-three{
color: #00C6FF;
}

2
src/components/Portal/authorInfo.vue
View File

@@ -106,7 +106,7 @@ import { userAvatarText } from "@/utils/tools.js";
line-height: 18px; line-height: 18px;
display: flex; display: flex;
.author-text{ .author-text{
color: #666666; color: #6E7B84;
margin-left: 4px; margin-left: 4px;
} }
.uavatar{ .uavatar{

184
src/views/portal/case/Index.vue
View File

@@ -68,7 +68,7 @@
</el-row> </el-row>
<el-row style="height:10px;background-color:#f6f7fc;" > <el-row style="height:10px;background-color:#f6f7fc;" >
</el-row> </el-row>
<el-row class="order-div" style="border: 1px solid #EBEEF5;border-bottom:none"> <el-row class="order-div" style="border-bottom:none">
<span class="quyer-tag"> <span class="quyer-tag">
<el-button type="text" class="order-class" @click="searchData('views')" :class="{ actice: queryCondition.orderField == 'views' }">最热</el-button> <el-button type="text" class="order-class" @click="searchData('views')" :class="{ actice: queryCondition.orderField == 'views' }">最热</el-button>
<el-button type="text" class="order-class" @click="searchData('')" :class="{ actice: queryCondition.orderField == '' }">最新</el-button> <el-button type="text" class="order-class" @click="searchData('')" :class="{ actice: queryCondition.orderField == '' }">最新</el-button>
@@ -83,13 +83,13 @@
<div class="case-info-title"> <div class="case-info-title">
<div class="case-titdiv"> <div class="case-titdiv">
<span class="case-tittext" v-html="item.title"></span> <span class="case-tittext" v-html="item.title"></span>
<div class="case-info-date"> <div class="case-info-date portal-time">
<i class="el-icon-time"></i> <i class="el-icon-time"></i>
<time-show :time="item.sysCreateTime"></time-show> <time-show :time="item.sysCreateTime"></time-show>
</div> </div>
</div> </div>
</div> </div>
<div style="height:40px;padding-top:5px "> <div style="height:58px;padding-top:14px ">
<author :avatar="item.authorInfo.avatar" :name="item.authorInfo.name" :info="item.authorInfo.orgInfo" :sex="item.authorInfo.sex"></author> <author :avatar="item.authorInfo.avatar" :name="item.authorInfo.name" :info="item.authorInfo.orgInfo" :sex="item.authorInfo.sex"></author>
</div> </div>
<div class="keyword-text clearfix"> <div class="keyword-text clearfix">
@@ -112,7 +112,7 @@
{{item.isAll?'收起':'展开'}} {{item.isAll?'收起':'展开'}}
</span> </span>
</div> </div>
<div style="display: flex;justify-content: space-between;"> <div style="display: flex;justify-content: flex-end;">
<div style="margin:8px 0;"> <div style="margin:8px 0;">
<interactBar :type="0" :shares="false" :data="item" :readonly="true"></interactBar> </div> <interactBar :type="0" :shares="false" :data="item" :readonly="true"></interactBar> </div>
</div> </div>
@@ -132,83 +132,33 @@
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<div style="width: 245px;margin-left: 5px;"> <div style="width: 410px;">
<div> <div>
<div id="fixd-box"> <div id="fixd-box">
<!-- <el-card class="ranking-card" > <div class="ranking-card portal-right-box list-bg">
<div slot="header"> <p class="portal-title-one" style="padding-bottom:12px">好评榜</p>
<span style="font-size: 14px;font-weight: 600;color: #333333;">贡献榜</span> <ul>
</div> <li style="cursor: pointer;margin-top:30px;" class="title-line-ellipsis" v-for="(item, index) in Positive" :key="index">
<div style="padding-bottom:10px"> <span class="portal-right-text blue-one" v-if="index==0">0{{index+1}}.</span>
<el-row class="ranking-title"> </el-row> <span class="portal-right-text blue-tow" v-if="index==1">0{{index+1}}.</span>
<el-row class="ranking-title bacolor" v-for="(item, index) in ankingList" :key="index" > <span class="portal-right-text blue-three" v-if="index==2">0{{index+1}}.</span>
<el-col :span="6" style="height:34px"> <span class="portal-right-text" v-if="index>2">0{{index+1}}.</span>
<img v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/> <span class="portal-title-desc" style="font-size: 14px;">{{ item.title }}</span>
<img v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/> </li>
<img v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/> </ul>
<span style="margin-left: 10px" v-if="index!=2&&index!=0&&index!=1">{{index+1}}</span> </div>
</el-col> <div style="margin-top:26px" class="ranking-card portal-right-box list-bg1">
<el-col :span="15" class="title-line-ellipsis"> {{ item.sysCreateUname }}</el-col> <p class="portal-title-one" style="padding-bottom:12px">人气榜</p>
</el-row> <ul>
</div> <li style="cursor: pointer;margin-top:30px;" v-for="(item, index) in Popularity" :key="index">
</el-card> --> <span class="portal-right-text orange-one" v-if="index==0">0{{index+1}}.</span>
<!-- <div style="height: 10px;"></div> --> <span class="portal-right-text orange-tow" v-if="index==1">0{{index+1}}.</span>
<el-card class="ranking-card" > <span class="portal-right-text orange-three" v-if="index==2">0{{index+1}}.</span>
<div slot="header"> <span class="portal-right-text" v-if="index>2">0{{index+1}}.</span>
<span style="font-size: 14px;font-weight: 600;color: #333333;">人气榜</span> <span class="portal-title-desc" style="font-size: 14px;">{{ item.title }}</span>
</div> </li>
<div style="padding-bottom:10px"> </ul>
<el-row class="ranking-title"> </div>
<!-- <el-col :span="15" style="color: #333333;font-size: 14px;">名称</el-col> -->
<!-- <el-col :offset="4" :span="5" class="center" style="color: #333333;font-size: 14px;">分数</el-col> -->
</el-row>
<el-row class="ranking-title bacolor" v-for="(item, index) in Popularity" :key="index" >
<el-col :span="6" style="height:34px">
<img v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
<img v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
<img v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
<div v-if="item.title">
<span style="margin-left: 10px" v-if="index!=2&&index!=0&&index!=1">{{index+1}}</span>
</div>
</el-col>
<!-- <el-tooltip :enterable="false" @click.native="jumpRouter(item)" effect="light" :content="item.title + '（' + item.authorName+ ')'" placement="bottom" :visible-arrow="false" popper-class="text-tooltip"> -->
<div :title="item.title + '（' + item.authorName+ ')'" @click="jumpRouter(item)">
<el-col :span="15" style="cursor: pointer;" class="title-line-ellipsis"> {{ item.title }}</el-col>
</div>
<!-- </el-tooltip> -->
<!-- <el-col class="center" style="color: #FF8E00;" :span="5">{{ item.score }}</el-col> -->
</el-row>
</div>
</el-card>
<div style="height: 10px;"></div>
<el-card class="ranking-card" >
<div slot="header">
<span style="font-size: 14px;font-weight: 600;color: #333333;">好评榜</span>
</div>
<div style="padding-bottom:10px">
<el-row class="ranking-title">
<!-- <el-col :span="15" style="color: #333333;font-size: 14px;">名称</el-col> -->
<!-- <el-col :offset="4" :span="5" class="center" style="color: #333333;font-size: 14px;">分数</el-col> -->
</el-row>
<el-row class="ranking-title bacolor" v-for="(item, index) in Positive" :key="index" >
<el-col :span="6" style="height:34px">
<img v-if="index===0" :src="`${webBaseUrl}/images/first.png`"/>
<img v-if="index===1" :src="`${webBaseUrl}/images/second.png`"/>
<img v-if="index===2" :src="`${webBaseUrl}/images/third.png`"/>
<div v-if="item.title">
<span style="margin-left: 10px" v-if="index!=2&&index!=0&&index!=1">{{index+1}}</span>
</div>
</el-col>
<!-- <el-tooltip :enterable="false" @click.native="jumpRouter(item)" effect="light" :content="item.title + '（' + item.authorName+ ')'" placement="bottom" :visible-arrow="false" popper-class="text-tooltip"> -->
<div :title="item.title+ '（' + item.authorName+ ')'" @click="jumpRouter(item)">
<el-col :span="15" style="cursor: pointer;" class="title-line-ellipsis"> {{ item.title }}</el-col>
</div>
<!-- </el-tooltip> -->
<!-- <el-col class="center" style="color: #FF8E00;" :span="5">{{ item.score }}</el-col> -->
</el-row>
</div>
</el-card>
</div> </div>
</div> </div>
</div> </div>
@@ -517,7 +467,7 @@ export default {
} }
if (scrollTop > 630) { if (scrollTop > 630) {
document.querySelector("#fixd-box").style.cssText = document.querySelector("#fixd-box").style.cssText =
"position: fixed;top: -250px;width:245.5px"; "position: fixed;top: -250px;width:410px";
} else { } else {
document.querySelector("#fixd-box").style.cssText = "position: static"; document.querySelector("#fixd-box").style.cssText = "position: static";
} }
@@ -759,7 +709,9 @@ export default {
display: flex; display: flex;
.case-tittext { .case-tittext {
font-size: 18px; font-size: 18px;
width: 80%; font-weight: 600;
color: #333333;
width: 73%;
display: -webkit-box; display: -webkit-box;
overflow: hidden; overflow: hidden;
word-break: break-all; word-break: break-all;
@@ -783,15 +735,16 @@ export default {
.keyword-text { .keyword-text {
div { div {
padding:0px 7px; padding:0px 8px;
margin-top: 5px; margin-top: 5px;
float: left; float: left;
line-height: 22px; line-height: 24px;
font-size: 14px; font-size: 12px;
color: #2974D6; border-radius:2px;
border: 1px solid #2974D6;
border-radius: 10px;
margin-right: 8px; margin-right: 8px;
color: #2C68FF;
height: 24px;
background: rgba(44,104,255,0.06);
} }
} }
.searBox { .searBox {
@@ -914,21 +867,20 @@ export default {
.quyer-tag { .quyer-tag {
// margin-left: 10px; // margin-left: 10px;
.order-class { .order-class {
color: #666666; padding:0px 12px;
width: 52px; color: #6E7B84;
// text-align: left; line-height: 32px;
border: 1px solid #dfdfdf; border-radius: 0px;
// padding-left: 5px;
// padding-top: 5px;
// padding-bottom: 5px;
// padding: 8px 20px;
.el-icon--right { .el-icon--right {
margin-left: 0; margin-left: 0;
} }
} }
.actice { .actice {
background: #3e7fff; border: 0px;
background: #387DF7;
color: #fff; color: #fff;
font-size: 14px;
border-radius: 4px;
} }
} }
/* 分页div */ /* 分页div */
@@ -939,19 +891,26 @@ export default {
} }
} }
.order-div { .order-div {
padding: 12px 15px; padding: 34px 50px 20px 50px;
background-color: #fff; background-color: #fff;
// margin-bottom: ; // margin-bottom: ;
} }
.data-content { .data-content {
background-color: #fff; background-color: #fff;
padding: 5px 10px; padding: 5px 50px;
::v-deep .interact-bar-btns{
.interact-bar-btn{
text-align: right;
min-width: 78px !important;
margin-right: 0;
}
}
.case-list:last-child { .case-list:last-child {
border-bottom: none; border-bottom: none;
} }
.case-list { .case-list {
border-bottom: 1px solid #dfdfdf; border-bottom: 1px solid #999;
margin: 8px 0px; margin: 8px 0px;
padding-bottom: 15px; padding-bottom: 15px;
padding-left: 5px; padding-left: 5px;
@@ -974,23 +933,24 @@ export default {
.case-info-date { .case-info-date {
flex: 1; flex: 1;
text-align: right; text-align: right;
font-size: 12px; font-weight: normal;
height: 30px; // font-size: 12px;
font-weight: 200; // height: 30px;
color: #8590a6; // font-weight: 200;
// color: #8590a6;
i { i {
margin-right: 5px; margin-right: 5px;
} }
} }
} }
.case-info-summary { .case-info-summary {
margin-top:8px; margin-top:16px;
cursor: pointer; cursor: pointer;
margin-bottom: 5px; margin-bottom: 5px;
word-break: break-all; word-break: break-all;
line-height: 25px; line-height: 24px;
font-size: 15px; font-size: 14px;
color: #121212; color: #333330;
font-weight: 400; font-weight: 400;
} }
.case-info-tools { .case-info-tools {
@@ -1045,13 +1005,21 @@ export default {
text-align: center; text-align: center;
} }
} }
.list-bg{
border-image: linear-gradient(180deg, rgba(8, 127, 255, 1), rgba(8, 127, 255, 0)) 1 1;
background: linear-gradient(180deg, #7bb4ed 0%, #fff 36%);
}
.list-bg1{
background: linear-gradient(180deg, #f3a46f 0%, #fff 36%)
}
.ranking-card { .ranking-card {
.center { .center {
text-align: center; text-align: center;
} }
} }
.right-box { .right-box {
line-height: 25px; line-height: 25px;
.ranking-title { .ranking-title {

41
src/views/portal/qa/Index.vue
View File

@@ -77,23 +77,23 @@
</el-card> </el-card>
</el-row> </el-row>
</div> </div>
<div style="width: 410px !important;"> <div style="width: 410px;">
<!-- <div> --> <!-- <div> -->
<div style="padding:0" id="qa-fixd"> <div style="padding:0" id="qa-fixd">
<div class="portal-model-btn" @click="$refs.addQuestion.askQuestionDialog = true">提问题</div> <div class="portal-model-btn" @click="$refs.addQuestion.askQuestionDialog = true">提问题</div>
<div class="portal-right-box list-bg"> <div class="portal-right-box list-bg">
<p class="portal-title-one" style="padding-bottom:12px">贡献榜</p> <p class="portal-title-one" style="padding-bottom:12px">贡献榜</p>
<ul> <ul>
<li v-for="(item, index) in ankingList" :key="index" style="margin-top:30px"> <li v-for="(item, index) in ankingList" :key="index" style="margin-top:30px">
<span class="portal-right-text orange-one" v-if="index==0" style="margin-right:94px">0{{index+1}}.</span> <span class="portal-right-text orange-one" v-if="index==0" style="margin-right:94px">0{{index+1}}.</span>
<span class="portal-right-text orange-tow" v-if="index==1" style="margin-right:94px">0{{index+1}}.</span> <span class="portal-right-text orange-tow" v-if="index==1" style="margin-right:94px">0{{index+1}}.</span>
<span class="portal-right-text orange-three" v-if="index==2" style="margin-right:94px">0{{index+1}}.</span> <span class="portal-right-text orange-three" v-if="index==2" style="margin-right:94px">0{{index+1}}.</span>
<span class="portal-right-text" v-if="index>2" style="margin-right:94px">0{{index+1}}.</span> <span class="portal-right-text" v-if="index>2" style="margin-right:94px">0{{index+1}}.</span>
<span class="portal-title-desc">{{ item.sysCreateUname }}</span> <span class="portal-title-desc">{{ item.sysCreateUname }}</span>
</li> </li>
</ul> </ul>
</div>
</div> </div>
</div>
<!-- </div> --> <!-- </div> -->
</div> </div>
</div> </div>
@@ -245,7 +245,7 @@ export default {
} }
} }
if(scrollTop > 400) { if(scrollTop > 400) {
document.querySelector('#qa-fixd').style.cssText = "position: fixed;top: 0;width:410px;"; document.querySelector('#qa-fixd').style.cssText = "position: fixed;top: 20px;width:410px;";
} else { } else {
document.querySelector('#qa-fixd').style.cssText = "position: static"; document.querySelector('#qa-fixd').style.cssText = "position: static";
} }
@@ -472,8 +472,6 @@ export default {
padding:0px 12px; padding:0px 12px;
color: #6E7B84; color: #6E7B84;
line-height: 32px; line-height: 32px;
// background-color: #FFFFFF;
// border: 1px solid #DDDDDD;
border-radius: 0px; border-radius: 0px;
} }
@@ -512,7 +510,8 @@ export default {
min-height: 382px; min-height: 382px;
::v-deep .interact-bar-btns{ ::v-deep .interact-bar-btns{
.interact-bar-btn{ .interact-bar-btn{
min-width: 30px !important; text-align: right;
min-width: 78px !important;
} }
} }
.qa-list:last-child { .qa-list:last-child {
@@ -520,12 +519,12 @@ export default {
} }
.qa-list { .qa-list {
// margin: 5px 0; // margin: 5px 0;
padding: 20px 10px; padding: 33px 0 ;
// padding-bottom: 10px; // padding-bottom: 10px;
// padding-left: 10px; // padding-left: 10px;
padding-right: 0px; padding-right: 0px;
margin-right:10px; margin-right:10px;
border-bottom: 1px solid #E8E8E8; border-bottom: 1px solid #999;
} }
.qa-info-box { .qa-info-box {
.qa-info { .qa-info {
@@ -558,7 +557,7 @@ export default {
.qa-info-summary { .qa-info-summary {
cursor: pointer; cursor: pointer;
line-height: 20px; line-height: 20px;
margin: 12px 0 20px 0; margin: 12px 0 27px 0;
// color: #121212; // color: #121212;
// height: 45px; // height: 45px;
// font-size: 15px; // font-size: 15px;