112 lines
2.2 KiB
Vue
112 lines
2.2 KiB
Vue
<template>
|
|
<view class="card">
|
|
<view class="card-header">
|
|
<view class="content-combined">
|
|
<text class="center-element">{{item.matCode}}</text>
|
|
<text class="right-element">{{currentIndex + 1}}/{{cardData.length}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="card-content">
|
|
<view class="content-item">
|
|
<text>名称:</text>
|
|
<text>{{item.matName}}</text>
|
|
</view>
|
|
<view class="content-item">
|
|
<text>批次:</text>
|
|
<text>{{item.matBatch}}</text>
|
|
</view>
|
|
<view class="content-item">
|
|
<text>规格:</text>
|
|
<text>{{item.matSpec}}</text>
|
|
</view>
|
|
<view class="content-item" style="font-weight: 600;">
|
|
<text>数量:</text>
|
|
<text>{{item.matQty}}</text>
|
|
</view>
|
|
<view class="content-combined">
|
|
<view class="content-item" style="font-weight: 400;color: firebrick;">
|
|
<text>库位:</text>
|
|
<text>{{item.locationCode}}</text>
|
|
</view>
|
|
<view class="content-item" style="font-weight: 400;color: firebrick;">
|
|
<text>货架:</text>
|
|
<text>{{item.shelfCode}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="content-combined">
|
|
<view class="content-item" style="font-weight: 600;color: violet;">
|
|
<text>人员:</text>
|
|
<text>{{item.modifyUser}}</text>
|
|
</view>
|
|
<view class="content-time">
|
|
<text>更新时间:</text>
|
|
<text>{{item.modifyTime}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref
|
|
} from 'vue';
|
|
const props = defineProps({
|
|
item: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
currentIndex: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
cardData: {
|
|
type: Array,
|
|
required: true
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.card {
|
|
border: 3rpx solid black;
|
|
border-radius: 15rpx;
|
|
margin: 8rpx;
|
|
padding: 8rpx;
|
|
background-color: beige;
|
|
}
|
|
|
|
.card-header {
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 2rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.content-item {
|
|
margin-bottom: 5rpx;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.content-time {
|
|
margin-bottom: 0rpx;
|
|
font-size: 19rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.content-combined {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 5rpx;
|
|
}
|
|
|
|
.center-element {
|
|
align-items: center;
|
|
}
|
|
|
|
.right-element {
|
|
margin-left: auto;
|
|
}
|
|
</style> |