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

首页案例样式

Browse Source
This commit is contained in:
lmj
2022-06-02 16:42:13 +08:00
parent 26e9491c36
commit eaf5685fcb
5 changed files with 168 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/views/Index.vue
View File

@@ -105,6 +105,44 @@
</el-card>
</div>
</div>
</div>
<!-- 推荐案例2版 -->
<div class="modules">
<div class="modules-title">
<span class="modules-text">推荐案例</span>
<span class="quyer-tag">
<a :class="caseList.orderType==1?'current':''" @click="changeCaseOrder(1)">最新</a>
<a :class="caseList.orderType==2?'current':''" @click="changeCaseOrder(2)">最热</a>
</span>
<span class="more"><router-link to="/case">更多&nbsp;></router-link></span>
</div>
<div class="modules-list xrow" style="height: 235px;overflow: hidden;">
<div class="index-course xrow-course" v-for="ca in caseList.list" :key="ca.id">
<div class="casetwo" :body-style="{ padding: '0px' }">
<div class="case-top"></div>
<div class="case-conent">
<div class="case-time">
{{ca.sysCreateTime.substring(0,10)}}
</div>
<span class="case-title one-line-ellipsis">
<a :href="'case/detail?id='+ca.id" target="_blank">{{ca.title}}</a>
</span>
<div class="case-text three-line-ellipsis">
{{ca.content}}
</div>
<div class="case-inter">
<interactBar style="width:180px" :type="3" :readonly="true" :data="ca" :shares="false" :views="false"></interactBar>
</div>
</div>
<div style="margin-top:48%;margin-left:20px">
<authorInfo :avatar="ca.authorInfo.avatar" :name="ca.authorInfo.name" :info="ca.authorInfo.orgInfo" :sex="ca.authorInfo.sex"></authorInfo></div>
</div>
</div>
</div>
</div>
<!-- 推荐案例 -->
<!-- <div class="modules">
@@ -153,6 +191,7 @@
</el-col>
</el-row>
</div> -->
<!-- 推荐文章 -->
<div class="modules">
<!--内容块-->
@@ -313,7 +352,7 @@ export default {
list: []
},
caseList: {
num: 4,
num: 6,
orderType: 2,
list: []
},
@@ -426,6 +465,7 @@ export default {
let userIds = [];
res.result.forEach(item => {
item.authorInfo = { aid: '', name: '', orgInfo: '', avatar: '', code: '',sex:null };
if (item.authorId && item.authorId != '') {
userIds.push(item.authorId);
}
@@ -579,6 +619,58 @@ export default {
</script>
<style scoped lang="scss">
.three-line-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box;
-webkit-line-clamp: 3;
word-break: break-all;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.casetwo{
width: 100%;
height: 220px;
margin-bottom:15px;
position: relative;
background-color: #fff;
.case-top{
height: 70px;
background-image: linear-gradient(to right , #b8c7e2, #d0dcf3);
}
.case-conent{
width: 220px;
height: 160px;
box-shadow: 1px 1px 15px #ccc;
position: absolute;
top: 5%;
background-color: #fff;
left: 4%;
padding: 10px;
.case-time{
font-size: 10px;
color: #b1b1b1;
text-align: right;
}
.case-title{
font-size: 14px;
color: #333;
font-weight: bold;
margin-bottom:10px;
}
.case-text{
font-size: 14px;
color: #888888;
line-height: 18px;
margin-bottom:12px;
}
.case-inter{
position: absolute;
bottom: 5%;
}
}
}
// .qa-dai{
// color: #5da1ff;
// }