110 lines
2.1 KiB
Vue
110 lines
2.1 KiB
Vue
|
<template>
|
||
|
|
<div class="wrapper" :style="{ background: background }">
|
||
|
|
<div class="left">
|
||
|
|
<div class="title">
|
||
|
|
<u-icon :name="icon" size="14"></u-icon>
|
||
|
|
<span>{{ state.title }}</span>
|
||
|
|
<span>{{ state.time }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="item">{{ state.fileName }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="right" v-if="showProgress">
|
||
|
|
<u-line-progress :percentage="state.studyProgress" :showText="false" activeColor="#1989FA" height="10" />
|
||
|
|
<span style="margin-left: 5px">{{ state.studyProgress || 0 }}%</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
itemData: {
|
||
|
|
type: Object,
|
||
|
|
default: () => {}
|
||
|
|
},
|
||
|
|
background: {
|
||
|
|
type: String,
|
||
|
|
default: '#F4F9FE'
|
||
|
|
},
|
||
|
|
showProgress: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
icon: {
|
||
|
|
type: String,
|
||
|
|
default: '/static/images/imgs/shiping.png'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
state: {
|
||
|
|
title: '',
|
||
|
|
time: '',
|
||
|
|
item: '',
|
||
|
|
progress: 0
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
setTimeout(() => {
|
||
|
|
this.state = this.itemData
|
||
|
|
}, 300)
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleItem() {
|
||
|
|
console.log('🚀 ~ handleItem ~ handleItem:', this.state)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.wrapper {
|
||
|
|
min-height: 80px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
border-radius: 5px;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
padding: 10px 0;
|
||
|
|
|
||
|
|
.left {
|
||
|
|
margin-left: 12px;
|
||
|
|
width: 60%;
|
||
|
|
|
||
|
|
.title {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 13px;
|
||
|
|
color: #676767;
|
||
|
|
:first-child {
|
||
|
|
margin-right: 2px;
|
||
|
|
}
|
||
|
|
:nth-child(2) {
|
||
|
|
margin-right: 20px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.item {
|
||
|
|
max-height: 80px;
|
||
|
|
width: 160px;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #333;
|
||
|
|
white-space: pre-wrap;
|
||
|
|
word-wrap: break-word;
|
||
|
|
overflow: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.right {
|
||
|
|
margin-right: 12px;
|
||
|
|
width: 40%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|