Dining_Hall/pages/sendACarSystem/components/AuditRecord.vue

129 lines
3.0 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div>
<uni-section title="审核记录" type="line"></uni-section>
<div class="cont">
<div class="list-cont" v-for="(item, index) in tableList" :key="index">
<div class="top-item">
<div class="left-item">
<div class="circle"></div>
<div class="date">{{ item.date }}</div>
</div>
<div class="time">
<u-icon name="clock" style="margin-right: 5px"></u-icon>
{{ item.time }}
</div>
</div>
<div class="item-cont">
<div><u-icon name="/static/images/user.png" size="36" style="margin-right: 5px"></u-icon></div>
<div>
<div style="margin-bottom: 15px;">
<span>{{ item.name }}</span>
<span style="margin-right: 10px">{{ item.phone }}</span>
<span style="color: #bbb;">{{ item.company }}</span>
</div>
<div style="margin-bottom: 6px;">{{ item.content }}</div>
<div>备注{{ item.remark }}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
opt: {
type: Object,
default: () => {}
}
},
data() {
return {
tableList: [
{
date: '08-01',
time: '2021-08-01 08:00',
content: '审核通过',
remark: '这是备注111',
name: '张三',
phone: '13888888888',
company: '机具公司'
},
{
date: '08-01',
time: '2021-08-01 08:00',
content: '审核通过',
remark: '这是备注222',
name: '李四',
phone: '13888888888',
company: '机具公司'
},
{
date: '08-01',
time: '2021-08-01 08:00',
content: '审核通过',
remark: '这是备注333',
name: '王五',
phone: '13888888888',
company: '机具公司'
},
{
date: '08-01',
time: '2021-08-01 08:00',
content: '审核通过',
remark: '这是备注444',
name: '赵六',
phone: '13888888888',
company: '机具公司'
}
]
}
},
mounted() {
console.log('🚀 ~ 详情 ~ this.opt', this.opt)
}
}
</script>
<style lang="scss" scoped>
.cont {
padding: 15px;
.top-item {
display: flex;
justify-content: space-between;
align-items: center;
color: #666;
.left-item {
display: flex;
align-items: center;
}
.circle {
width: 8px;
height: 8px;
border: 3px solid #409eff;
border-radius: 50%;
margin-right: 15px;
}
.time {
margin-right: 15px;
display: flex;
align-items: center;
}
}
.item-cont {
margin: 20px 0 20px 50px;
padding: 10px;
background-color: #fff;
color: #666;
border-radius: 8px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
display: flex;
align-items: flex-start;
}
}
</style>