100 lines
2.1 KiB
Vue
100 lines
2.1 KiB
Vue
|
<template>
|
|||
|
|
<view class="card-box">
|
|||
|
|
<view class="top-flex-box">
|
|||
|
|
<view>
|
|||
|
|
<view>
|
|||
|
|
<text class="address">上海奉贤两网融合</text>
|
|||
|
|
<text class="type">(大磅)</text>
|
|||
|
|
</view>
|
|||
|
|
<view>
|
|||
|
|
<text class="number">收货单号：SHD20230901132333</text>
|
|||
|
|
</view>
|
|||
|
|
<view>
|
|||
|
|
<text class="name">陡其成</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view>
|
|||
|
|
<text class="btn">现场照片</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view>
|
|||
|
|
<text class="desc">毛重时间：2023-09-01 13:23:33</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex-box">
|
|||
|
|
<text>皮重：2510kg</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="btn-box">
|
|||
|
|
<u-button
|
|||
|
|
text="点击作废"
|
|||
|
|
color="#E8E8E8"
|
|||
|
|
:customStyle="{ color: '#999' }"
|
|||
|
|
></u-button>
|
|||
|
|
<u-button type="primary" text="点击编辑"></u-button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<script setup lang="ts"></script>
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.card-box {
|
|||
|
|
padding: 38rpx 50rpx;
|
|||
|
|
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
|
|||
|
|
border-radius: 13rpx;
|
|||
|
|
margin: 0rpx 25rpx;
|
|||
|
|
margin-top: 35rpx;
|
|||
|
|
font-family: Source Han Sans CN;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #000000;
|
|||
|
|
line-height: 41rpx;
|
|||
|
|
.top-flex-box {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
.btn {
|
|||
|
|
border-radius: 24rpx;
|
|||
|
|
border: 1px solid #00dcee;
|
|||
|
|
padding: 10rpx 30rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #00dcee;
|
|||
|
|
line-height: 41rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.address {
|
|||
|
|
margin-right: 30rpx;
|
|||
|
|
}
|
|||
|
|
.type,
|
|||
|
|
.desc {
|
|||
|
|
font-size: 21rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
.desc {
|
|||
|
|
margin-top: 30rpx;
|
|||
|
|
display: inline-block;
|
|||
|
|
}
|
|||
|
|
.name {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #000000;
|
|||
|
|
}
|
|||
|
|
.flex-box {
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #000000;
|
|||
|
|
line-height: 41rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
.btn-box {
|
|||
|
|
margin-top: 60rpx;
|
|||
|
|
display: flex;
|
|||
|
|
::v-deep button {
|
|||
|
|
border-radius: 43rpx;
|
|||
|
|
}
|
|||
|
|
::v-deep button + button {
|
|||
|
|
margin-left: 50rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|