You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
153 lines
3.4 KiB
153 lines
3.4 KiB
<template>
|
|
<el-row class="page">
|
|
<el-row class="block-view" v-for="(item,index) in expressList">
|
|
<el-row class="top">
|
|
<el-row> 运单号: {{item.express_no}}</el-row>
|
|
<el-row class="top-time"> 签收时间: {{item.s_datetime}}</el-row>
|
|
</el-row>
|
|
<el-row class="express-view">
|
|
<el-row class="express-no-view">
|
|
<el-text class="city">
|
|
{{item.senderCity}}
|
|
</el-text>
|
|
<el-text class="user">
|
|
{{item.senderName}}
|
|
</el-text>
|
|
</el-row>
|
|
<el-row class="express-no-view">
|
|
<el-image class="logo" src="/logo.png"></el-image>
|
|
<el-text class="sign">
|
|
已签收
|
|
</el-text>
|
|
</el-row>
|
|
<el-row class="express-no-view">
|
|
<el-text class="city">
|
|
{{item.receiverCity}}
|
|
</el-text>
|
|
<el-text class="user">
|
|
{{item.receiverName}}
|
|
</el-text>
|
|
</el-row>
|
|
<el-row class="express-icon-view">
|
|
<el-icon>
|
|
<Delete />
|
|
</el-icon>
|
|
<el-icon>
|
|
<Edit />
|
|
</el-icon>
|
|
</el-row>
|
|
</el-row>
|
|
|
|
<el-row class="line-view"></el-row>
|
|
</el-row>
|
|
|
|
</el-row>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
Delete,
|
|
Edit
|
|
} from '@element-plus/icons-vue'
|
|
import {
|
|
reactive
|
|
} from 'vue';
|
|
const expressList = reactive([{
|
|
"express_no": "SF1313131313123",
|
|
"senderCity":"深圳市",
|
|
"senderName":"冰凉凉1",
|
|
"receiverCity":"福州市",
|
|
"receiverName":"叶丽丽",
|
|
"s_datetime": "2024-10-24 11:58"
|
|
},
|
|
{
|
|
"express_no": "SF1313131313123",
|
|
"senderCity":"深圳市",
|
|
"senderName":"冰凉凉2",
|
|
"receiverCity":"福州市",
|
|
"receiverName":"叶丽丽",
|
|
"s_datetime": "2024-10-24 11:58"
|
|
},
|
|
{
|
|
"express_no": "SF1313131313123",
|
|
"senderCity":"深圳市",
|
|
"senderName":"冰凉凉3",
|
|
"receiverCity":"福州市",
|
|
"receiverName":"叶丽丽",
|
|
"s_datetime": "2024-10-24 11:58"
|
|
},
|
|
{
|
|
"express_no": "SF1313131313123",
|
|
"senderCity":"深圳市",
|
|
"senderName":"冰凉凉4",
|
|
"receiverCity":"福州市",
|
|
"receiverName":"叶丽丽",
|
|
"s_datetime": "2024-10-24 11:58"
|
|
}
|
|
])
|
|
</script>
|
|
|
|
<style>
|
|
.page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
background-color: white;
|
|
line-height: 20px;
|
|
}
|
|
.block-view {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.top {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
padding-left: 20px;
|
|
color: gray;
|
|
font-size: 12px;
|
|
}
|
|
.top-time {
|
|
margin-left: 120px;
|
|
}
|
|
.express-view {
|
|
display: flex;
|
|
flex-flow: row;
|
|
justify-content: space-around;
|
|
width: 100%;
|
|
}
|
|
.express-no-view {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.logo {
|
|
width: 40px;
|
|
height: 10px;
|
|
}
|
|
.city {
|
|
font-size: 20px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.user {
|
|
color: gray;
|
|
}
|
|
.sign {
|
|
color: red;
|
|
margin-top: 10px;
|
|
}
|
|
.express-icon-view {
|
|
width: 10%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
}
|
|
.line-view {
|
|
height: 0.5px;
|
|
width: 95%;
|
|
background-color: lightgray;
|
|
margin-top: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
</style> |