金诚优选前端代码
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.
 
 
 
 
 

89 lines
1.9 KiB

<template>
<view>
<lf-nav title="物流详情" :showIcon="true"></lf-nav>
<view class="top">
<image class="img" src="https://picsum.photos/200/300" mode="aspectFill"></image>
<view>已签收</view>
</view>
<view class="head">
<view class="lf-flex">
<image class="avatar" src="https://picsum.photos/200/300" mode="aspectFill"></image>
<view class="name">邮政快递包裹 8374938754389</view>
</view>
<view class="copy" @click="copy">复制</view>
</view>
<view>
<uni-steps :options="options" active-color="#15716E" direction="column" :active="0"></uni-steps>
</view>
<view style="height: 90rpx;"></view>
</view>
</template>
<script>
import uniSteps from '@/components/uni-steps/uni-steps.vue';
export default {
components: {
uniSteps
},
data(){
return {
options: [
{title:'[已签收] 09-09 08:28',desc:'到达【南宁邮件处理中心】'},
{title:'[已签收] 09-09 08:28',desc:'到达【南宁邮件处理中心】'},
{title:'[已签收] 09-09 08:28',desc:'到达【南宁邮件处理中心】'},
{title:'[已签收] 09-09 08:28',desc:'到达【南宁邮件处理中心】'}]
}
},
onLoad(){
},
methods: {
copy(){
uni.setClipboardData({
data: '你好'
})
}
}
}
</script>
<style lang="scss" scoped="scoped">
.top{
width: 750rpx;
height: 100rpx;
background: #15716E;
display: flex;
align-items: center;
padding: 0 32rpx;
font-size: 36rpx;
color: #FFFFFF;
.img{
border-radius: 5rpx;
width: 70rpx;
height: 70rpx;
margin-right: 20rpx;
}
}
.head{
width: 750rpx;
height: 130rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32rpx;
.avatar{
width: 70rpx;
height: 70rpx;
border-radius: 50%;
margin-right: 20rpx;
}
.name{
font-size: 28rpx;
color: #222222;
}
.copy{
font-size: 28rpx;
color: #777;
}
}
</style>