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

案例组件

Browse Source
This commit is contained in:
lmj
2022-06-07 18:07:44 +08:00
parent 0cf9d297e8
commit 2b26166ef2
2 changed files with 179 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
src/components/Case/caseItems.vue Normal file
View File

@@ -0,0 +1,157 @@
<template>
<div style="">
<div class="article-list" v-for="(item, idx) in items" :key="idx">
<div class="article-info" @click="jumpRouter(item)">
<div class="article-info-title">
<span v-if="item.isRead" class="readed">【已查看】</span>
<span class="noRead" v-else>【未查看】</span>
<span class="title one-line-ellipsis" v-html="$keywordActiveShow(item.cases.title,keyword)"></span>
</div>
<div v-html="$keywordActiveShow(item.cases.summary,keyword)" class="article-info-summary two-line-ellipsis">
</div>
<!-- v-html="$keywordActiveShow(item.summary,keyword)" -->
<div style="display:flex;justify-content: space-between;">
<div class="article-info-tools">
<!-- <authorInfo :avatar="item.avatar" :name="item.name" :info="item.orgInfo"></authorInfo> -->
<span style="color: #999999;">{{ item.time }}</span>
<span v-if="type=='myShare'" style="color: #999999;font-size: 14px;">分享给{{item.toAname}}</span>
<span v-else>{{item.sysCreateBy}}分享给我</span>
<!-- <interactBar ref="shareDialog" :type="0" :data="item" :shares="false" :views="false"></interactBar> -->
</div>
<div>
<el-button style="color: #8590A6;" v-if="!item.isRead&&type=='myShare'" type="text" icon="el-icon-refresh-right" @click.stop="deleteshares(item)">撤回</el-button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import apiShares from '@/api/modules/shares.js';
export default {
name:'caseItems',
props:{
items: {
//name,
type: Array,
default: () => []
},
type:{
type:String,
default:()=>{
return 'myShare'
}
},
keyword:{
type:String,
default:()=>{
return ''
}
}
},
mounted:{
deleteshares(item){
this.$emit('confirm',item)
},
},
created() {
console.log(this.items)
},
}
</script>
<style lang="scss" scoped>
.article-status1 {
padding: 3px;
border: 1px dotted #1ea0fa;
color: #1ea0fa;
}
.article-status2 {
padding: 3px;
border: 1px dotted #00aa00;
color: #00aa00;
}
.article-status3 {
padding: 3px;
border: 1px dotted #ff0000;
color: #ff0000;
}
.article-list {
border-bottom: 1px solid #dddddd;
// padding: 10px;
padding-bottom: 20px;
margin-top: 20px;
border-bottom: 1px solid #e9e9e9;
cursor: pointer;
}
.article-info {
cursor: pointer;
.article-info-title {
font-size: 16px;
font-weight: 400;
display: flex;
justify-content: flex-start;
align-items: center;
.readed{
font-size: 18px;
color: #3e7fff;
// margin-bottom: 6px;
}
.noRead{
font-size: 18px;
color:#FF3E3E;
// margin-bottom: 6px;
}
.title{
line-height: 25px;
margin-left: 10px;
font-size: 18px;
flex-shrink: 10000;
font-weight: 500;
color: #333333;
}
.el-button{
margin-left: auto;
}
// .article-info-date {
// height: 40px;
// line-height: 40px;
// float: right;
// font-weight: 200;
// color: #999999;
// i {
// margin-right: 5px;
// }
// }
}
.article-info-summary {
height: 46px;
font-weight: 200;
font-size: 16px;
line-height: 1.5;
margin:7px 0;
}
.article-info-tools {
color: #999999;
display: flex;
justify-content: flex-start;
align-items: center;
>span{
font-size: 14px;
color: #747474;
// margin-top: -2px;
}
// >span:first-of-type{
// margin-left: 10px;
// }
// >span:last-of-type{
// margin-top: -4px;
// margin-right:auto;
// }
}
}
</style>