122 lines
3.1 KiB
Vue
122 lines
3.1 KiB
Vue
|
<template>
|
|||
|
|
<view class="carDetails">
|
|||
|
|
<view class="container">
|
|||
|
|
<view class="ul">
|
|||
|
|
<view class="li">船名：运程10</view>
|
|||
|
|
<view class="li">航次：HC97759809</view>
|
|||
|
|
<view class="li">贸易类型：外贸</view>
|
|||
|
|
<view class="li">进出口：进口</view>
|
|||
|
|
<view class="li">港口：巴塞罗那</view>
|
|||
|
|
<view class="li">提单号：TD6955975087</view>
|
|||
|
|
<view class="li">报关状态：未报关</view>
|
|||
|
|
<view class="li">报关单号：TD6955975087</view>
|
|||
|
|
<view class="li">场位：c4区15道*2</view>
|
|||
|
|
<view class="li">货代：上海海通国际汽车物流有限公司</view>
|
|||
|
|
<view class="li">联系人：张星星</view>
|
|||
|
|
<view class="li">联系方式：13266688888</view>
|
|||
|
|
<view class="li">品牌：特斯拉</view>
|
|||
|
|
<view class="li">车型：轿车</view>
|
|||
|
|
<view class="li">车型明细：轿车</view>
|
|||
|
|
<view class="li">型号：STAY-CONNECTB</view>
|
|||
|
|
<view class="li">源类型：新能源</view>
|
|||
|
|
<view class="li">数量：199</view>
|
|||
|
|
<view class="li">车长：199</view>
|
|||
|
|
<view class="li">车宽：199</view>
|
|||
|
|
<view class="li">车高：100</view>
|
|||
|
|
<view class="li">重量：1978</view>
|
|||
|
|
<view class="li">体积：979</view>
|
|||
|
|
<view class="li">单票数量：100</view>
|
|||
|
|
<view class="li">单票重量：1978</view>
|
|||
|
|
<view class="li">单票体积：979</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="tableInfo">
|
|||
|
|
<view class="title">车架号明细</view>
|
|||
|
|
<uni-table ref="table" :loading="loading" border emptyText="暂无更多数据">
|
|||
|
|
<uni-tr>
|
|||
|
|
<uni-th width="150" align="center">序号</uni-th>
|
|||
|
|
<uni-th align="center">车架号/条形码</uni-th>
|
|||
|
|
<uni-th align="center">场位</uni-th>
|
|||
|
|
</uni-tr>
|
|||
|
|
<uni-tr v-for="(item, index) in tableData" :key="index">
|
|||
|
|
<uni-td align="center">{{ item.id }}</uni-td>
|
|||
|
|
<uni-td align="center">{{item.vinCod}}</uni-td>
|
|||
|
|
<uni-td align="center">{{ item.field }}</uni-td>
|
|||
|
|
</uni-tr>
|
|||
|
|
</uni-table>
|
|||
|
|
<view class="pagination">
|
|||
|
|
<uni-pagination :total="total" :pageSize="pageSize" v-model="pageCurrent" title="标题文字" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
tableData: [{
|
|||
|
|
id: "01",
|
|||
|
|
vinCod: "CJH67892734895917",
|
|||
|
|
field: "A1-09-03"
|
|||
|
|
}, {
|
|||
|
|
id: "02",
|
|||
|
|
vinCod: "CJH67892734895917",
|
|||
|
|
field: "A1-09-03"
|
|||
|
|
}, {
|
|||
|
|
id: "03",
|
|||
|
|
vinCod: "CJH67892734895917",
|
|||
|
|
field: "A1-09-03"
|
|||
|
|
}],
|
|||
|
|
loading: false,
|
|||
|
|
// 每页数据量
|
|||
|
|
pageSize: 20,
|
|||
|
|
// 当前页
|
|||
|
|
pageCurrent: 1,
|
|||
|
|
// 数据总量
|
|||
|
|
total: 50,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="less" scoped>
|
|||
|
|
.carDetails {
|
|||
|
|
.container {
|
|||
|
|
padding: 30px 20px;
|
|||
|
|
background-color: #fff;
|
|||
|
|
|
|||
|
|
.ul {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
padding: 20px;
|
|||
|
|
border-bottom: 1px solid #ccc;
|
|||
|
|
|
|||
|
|
.li {
|
|||
|
|
width: 32%;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tableInfo {
|
|||
|
|
padding: 20px;
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/deep/.uni-table-th {
|
|||
|
|
background-color: #fafafa;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pagination {
|
|||
|
|
margin-top: 10px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|