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

案例优化页面UI调整

Browse Source
This commit is contained in:
zhangsir
2024-09-04 16:32:11 +08:00
parent 019ba29b03
commit 9ef5b5a6a3
10 changed files with 442 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -154,21 +154,21 @@
<!-- <div style="margin-right: 20px;color: #6E7B84;font-size: 14px;">当前已检索 <span style="color:#387DF7;">
{{ caseList.count }}</span> 条数据</div> -->
<div class="pub_time" @click="searchTime">
<div>发布时间</div>
<div class="text">发布时间</div>
<div class="triangle">
<div :style="{borderBottomColor:pubTimeNum===2?'#00f':'#DCDFE6'}" class="up-triangle"></div>
<div :style="{borderTopColor:pubTimeNum===1?'#00f':'#DCDFE6'}" class="down-triangle"></div>
<div :style="{borderBottomColor:pubTimeNum===2?'#387DF7':'#DCDFE6'}" class="up-triangle"></div>
<div :style="{borderTopColor:pubTimeNum===1?'#387DF7':'#DCDFE6'}" class="down-triangle"></div>
</div>
</div>
<div class="pub_time" @click="searchPageView">
<div>浏览量</div>
<div class="text">浏览量</div>
<div class="triangle">
<div :style="{borderBottomColor:pageViewNum===2?'#00f':'#DCDFE6'}" class="up-triangle"></div>
<div :style="{borderTopColor:pageViewNum===1?'#00f':'#DCDFE6'}" class="down-triangle"></div>
<div :style="{borderBottomColor:pageViewNum===2?'#387DF7':'#DCDFE6'}" class="up-triangle"></div>
<div :style="{borderTopColor:pageViewNum===1?'#387DF7':'#DCDFE6'}" class="down-triangle"></div>
</div>
</div>
<el-select v-model="years" multiple collapse-tags
style="margin-left: 20px; width: 147px; border-radius:20px !important;" placeholder="全部年份">
style=" width: 147px; border-radius:20px !important;" placeholder="全部年份">
<el-option v-for="item in caseYears" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
@@ -182,9 +182,11 @@
</div>
</div>
</div>
<div class="search_div_num">
当前已检索 <span style="color:#f00;">
{{ caseList.count }}</span> 条数据
<div class="back_num">
<div class="search_div_num">
当前已检索 <span style="color:#FF4040 ;">
{{ caseList.count }}</span> 条数据
</div>
</div>
<div class="data-content">
<div v-for="item in caseList.list" :key="item.id" class="case-list">
@@ -201,7 +203,9 @@
<span v-if="item.breCommend" class="comWords"
style="background-color:rgba(232, 139, 72);">荐</span>
<span v-if="item.excellent" class="comWords" style="background-color:red;">最佳</span>
<span class="comWords" style="background-color:orange">2024年度最佳</span>
<span class="comWords" style="width: 98px;height: 24px;background: #F99000;border-radius: 2px;font-weight: 400;font-size: 12px;color: #FFFFFF;padding: 3px 12px 4px 9px;">
2024年度最佳
</span>
</div>
<div class="case-info-date portal-time">
<i class="el-icon-time"></i>
@@ -285,7 +289,18 @@
</router-link>
<div id="fixd-box">
<div class="portal-ranking ranking-bg">
<p class="ranking-title">好评榜</p>
<div style="display: flex;justify-content: space-between;">
<p class="ranking-title">好评榜</p>
<el-dropdown trigger="click" @command="positiveReview">
<span class="el-dropdown-link">
{{favorableName}}<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="total">总</el-dropdown-item>
<el-dropdown-item command="quarter">季度</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<ul class="ranking-data">
<li v-for="(item, index) in Positive" :key="index" class="title-line-ellipsis"
style="cursor: pointer;margin-top:30px;line-height: 22px;">
@@ -299,19 +314,30 @@
<span class="portal-right-text blue-three" v-if="index == 2">
<img :src="`${webBaseUrl}/images/listblue03.png`" alt="">
</span>
<span class="portal-right-text" v-if="index == 3">
<!-- <span class="portal-right-text" v-if="index == 3">
<img :src="`${webBaseUrl}/images/list04.png`" alt="">
</span>
<span class="portal-right-text" v-if="index == 4">
<img :src="`${webBaseUrl}/images/list05.png`" alt="">
</span>
</span> -->
<span class="portal-title-desc" style="font-size: 14px;">{{ item.title }}</span>
</router-link>
</li>
</ul>
</div>
<div class="portal-ranking ranking-bg1" style="margin-top:26px">
<p class="ranking-title">人气榜</p>
<div style="display: flex;justify-content: space-between;">
<p class="ranking-title">人气榜</p>
<el-dropdown trigger="click" @command="popularityReview">
<span class="el-dropdown-link">
{{popularityName}}<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="total">总</el-dropdown-item>
<el-dropdown-item command="quarter">季度</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<ul class="ranking-data">
<li v-for="(item, index) in Popularity" :key="index" class="title-line-ellipsis"
style="cursor: pointer;margin-top:30px;line-height: 22px;">
@@ -336,26 +362,20 @@
</li>
</ul>
</div>
<div class="portal-ranking ranking-bg" style="margin-top:26px">
<div class="portal-ranking ranking-bg2" style="margin-top:26px">
<p class="ranking-title">推荐榜</p>
<ul class="ranking-data">
<li v-for="(item, index) in Positive" :key="index" class="title-line-ellipsis"
style="cursor: pointer;margin-top:30px;line-height: 22px;">
<router-link :to="'/case/detail?id=' + item.id">
<span class="portal-right-text blue-one" v-if="index == 0">
<img :src="`${webBaseUrl}/images/listblue01.png`" alt="">
<img :src="`${webBaseUrl}/images/listred01 .png`" alt="">
</span>
<span class="portal-right-text blue-tow" v-if="index == 1">
<img :src="`${webBaseUrl}/images/listblue02.png`" alt="">
<img :src="`${webBaseUrl}/images/listred02.png`" alt="">
</span>
<span class="portal-right-text blue-three" v-if="index == 2">
<img :src="`${webBaseUrl}/images/listblue03.png`" alt="">
</span>
<span class="portal-right-text" v-if="index == 3">
<img :src="`${webBaseUrl}/images/list04.png`" alt="">
</span>
<span class="portal-right-text" v-if="index == 4">
<img :src="`${webBaseUrl}/images/list05.png`" alt="">
<img :src="`${webBaseUrl}/images/listred03.png`" alt="">
</span>
<span class="portal-title-desc" style="font-size: 14px;">{{ item.title }}</span>
</router-link>
@@ -458,6 +478,12 @@ export default {
},
data() {
return {
switch: {
'total': '总',
'quarter': '季度',
},
favorableName: '季度',
popularityName: '季度',
pubTimeNum: 0,
pageViewNum: 0,
twoId:'',
@@ -796,6 +822,12 @@ export default {
},
methods: {
positiveReview(e){
this.favorableName = this.switch[e]
},
popularityReview(e){
this.popularityName = this.switch[e]
},
handleType(msg){
this.queryCondition.type = msg
},
@@ -1111,14 +1143,14 @@ export default {
// }
// });
// },
getPositive() {
apiCase.queryComments(5).then(res => {
if (res.status == 200) {
this.Positive = res.result;
console.log(res);
}
});
},
// getPositive() {
// apiCase.queryComments(5).then(res => {
// if (res.status == 200) {
// this.Positive = res.result;
// console.log(res);
// }
// });
// },
// 无用
async getdomain() {
let key = "org_domain";
@@ -1554,17 +1586,17 @@ export default {
getPopularity() {
apiCase.queryPraises(5).then(res => {
if (res.status == 200) {
this.Popularity = res.result;
if (res.result.length < 5) {
for (let i = 0; i = (5 - res.result.length); i++) {
this.Popularity.push({
authorName: '',
count: 1,
id: '',
title: '',
})
}
}
this.Popularity = res.result.slice(0,3);
// if (res.result.length < 5) {
// for (let i = 0; i = (5 - res.result.length); i++) {
// this.Popularity.push({
// authorName: '',
// count: 1,
// id: '',
// title: '',
// })
// }
// }
}
});
@@ -1572,18 +1604,18 @@ export default {
getPositive() {
apiCase.queryComments(5).then(res => {
if (res.status == 200) {
this.Positive = res.result;
if (res.result.length < 5) {
for (let i = 0; i = (5 - res.result.length); i++) {
this.Positive.push({
authorName: '',
count: 1,
id: '',
title: '',
})
}
this.Positive = res.result.slice(0,3);
// if (res.result.length < 5) {
// for (let i = 0; i = (5 - res.result.length); i++) {
// this.Positive.push({
// authorName: '',
// count: 1,
// id: '',
// title: '',
// })
// }
}
// }
}
});
},
@@ -1597,17 +1629,38 @@ export default {
</script>
<style scoped lang="scss">
.el-dropdown-link {
cursor: pointer;
font-weight: 400;
font-size: 14px;
color: rgba(51,51,51,0.9);
}
.el-icon--right{
margin-left: 14px !important;
}
.the_charts{
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
color: #000;
font-weight: 600;
font-size: 18px;
max-width: 400px;
min-width: 300px;
height: 67px;
background: #DDEDFF;
border-radius: 8px;
.text{
margin-right: 20px;
font-size: 18px;
color: #387DF7;
}
.icon{
position: absolute;
font-size: 18px;
color: #387DF7;
right: 25px;
top: 50%;
transform: translateY(-50%);
}
}
@@ -2198,96 +2251,172 @@ export default {
// margin-bottom: ;
.pub_time{
display: flex;
margin-right: 15px;
margin-right: 25px;
align-items: center;
cursor: pointer;
.text{
font-size: 14px;
color: #333333;
}
.triangle{
margin-left: 5px;
.up-triangle{
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid #DCDFE6;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 6px solid #DCDFE6;
margin-bottom: 2px;
}
.down-triangle{
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid #DCDFE6;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 6px solid #DCDFE6;
}
}
}
.time{
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-left: 15px;
width: 116px;
height: 38px;
border-radius: 4px;
// background: #04243C;
&:hover{
background: #387DF7;
.text{
color: #fff;
}
}
.png{
width: 20px;
height: 20px;
background: url('../../../assets/images/time.png') no-repeat;
width: 18px;
height: 18px;
background: url('../../../../public/images/browse.png') no-repeat;
background-size: 100%;
margin-right: 9px;
}
.text{
color: #6E7B84;
font-size: 14px;
color: #333333;
}
}
.time::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #04243C;
opacity: 0.05;
z-index: 1;
border-radius: 4px;
}
.time_active{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-left: 15px;
width: 116px;
height: 38px;
background: #387DF7;
border-radius: 4px;
.png{
width: 20px;
height: 20px;
background: url('../../../assets/images/time_active.png') no-repeat;
background: url('../../../../public/images/browse.png') no-repeat;
background-size: 100%;
margin-right: 9px;
}
.text{
color: #387DF7;
font-size: 14px;
color: #fff;
}
}
.collect{
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-left: 15px;
width: 116px;
height: 38px;
border-radius: 4px;
// background: #04243C;
&:hover{
background: #387DF7;
.text{
color: #fff;
}
}
.png{
width: 22px;
height: 22px;
background: url('../../../assets/images/collect.png') no-repeat;
width: 18px;
height: 18px;
background: url('../../../../public/images/collect.png') no-repeat;
background-size: 100%;
margin-right: 9px;
}
.text{
color: #6E7B84;
font-size: 14px;
color: #333333;
}
}
.collect::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #04243C;
opacity: 0.05;
z-index: 1;
border-radius: 4px;
}
.collect_active{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-left: 15px;
width: 116px;
height: 38px;
background: #387DF7;
border-radius: 4px;
.png{
width: 22px;
height: 22px;
background: url('../../../assets/images/collect_active.png') no-repeat;
width: 18px;
height: 18px;
background: url('../../../../public/images/collect.png') no-repeat;
background-size: 100%;
margin-right: 9px;
}
.text{
color: #387DF7;
font-size: 14px;
color: #fff;
}
}
}
.search_div_num{
height: 26px;
.back_num{
background: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
background-color: deepskyblue;
color: #387DF7;
padding: 0 40px;
.search_div_num{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 38px;
background: #DDEDFF;
border-radius: 4px;
border: 1px solid #387DF7;
color: #387DF7;
}
}
.data-content {
background-color: #fff;