freight-web/src/pages/index/shipmenting.vue

100 lines
2.1 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>
<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>