1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<template>
<div class="content-item" v-if="data">
<div class="head">
<div class="cell picture">
<img :src="data.cover"/>
</div>
<div class="cell title">
{{data.producerName}}
</div>
</div>
<div class="body">
<div class="info">
<div class="title">{{data.mainTitle}}</div>
<div class="des">{{data.subheading}}</div>
<div class="date">{{data.releaseTime}}</div>
</div>
<div class="poster">
<div class="frame" v-if="data.producerPicUrl!==''" :style="{backgroundImage: 'url(' + data.producerPicUrl + ')' }"></div>
<div class="frame" v-if="data.producerPicUrl===''" :style="{backgroundImage: 'url(' + producerPicUrl + ')' }"></div>
<!-- <img :src="data.producerPicUrl !== '' ? data.producerPicUrl : producerPicUrl"/> -->
</div>
</div>
</div>
</template>
<script>
import _producerPicUrl from '../assets/images/org-default-picture.png'
export default {
name: 'ContentItem',
data () {
return {
producerPicUrl: _producerPicUrl
}
},
props: ['data'],
created () {
},
mounted: function () {
},
computed: {
},
methods: {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.content-item {
padding: 0.5em;
border-bottom:1px solid #eee;
min-height: 8em;
}
.content-item > .head {
display:table;
width:100%;
padding:0.6em 0;
}
.content-item > .head > .cell {
display: table-cell;
vertical-align: middle;
}
.content-item > .head > .cell.picture{
width: 2.5em;
}
.content-item > .head > .cell.picture > img{
width: 100%;
}
.content-item > .head > .cell.title {
font-size: 1em;
padding-left: 10px;
}
.content-item > .body {
display:table;
width:100%;
}
.content-item > .body > .info,
.content-item > .body > .poster {
display: table-cell;
vertical-align: middle;
color:#999999;
}
.content-item > .body > .info {
vertical-align: top;
position:relative;
padding-bottom: 1em;
/* width: 70% */
}
.content-item > .body > .info > .title {
font-size: 1.1em;
font-weight: bold;
margin-bottom: 0.2em;
color: #4B5760;
white-space:nowrap;
text-overflow:ellipsis;
max-width: 13em;
overflow:hidden;
}
.content-item > .body > .info > .date {
position:absolute;
width:100%;
bottom:0;
left:0;
}
.content-item > .body > .poster{
width: 7em;
}
.content-item > .body > .poster > .frame {
width: 7em;
height: 7em;
background-repeat: no-repeat;
background-size: 100% auto;
}
.content-item > .body > .poster > img {
width: 100%;
}
</style>