88 lines
2.4 KiB
Vue
88 lines
2.4 KiB
Vue
<template>
|
||
<view class="recoder-item bg-fff default-box-padding border-r-18">
|
||
<view class="u-flex u-row-between">
|
||
<view class="u-flex user-head-img">
|
||
<image lazy-load src="@/static/uni.png" class="user-head-img" mode=""></image>
|
||
</view>
|
||
<view class="u-flex-1 u-flex u-row-between u-p-l-24">
|
||
<view class="color-666">13416472917</view>
|
||
<view class="u-font-32 font-bold">
|
||
<text class="color-999">已过期</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="u-m-t-24 goods border-bottom u-p-b-24">
|
||
<view class="u-flex bg-gray u-p-10 border-r-12">
|
||
<view class="u-flex goods-img">
|
||
<image lazy-load src="@/static/uni.png" class="goods-img" mode=""></image>
|
||
</view>
|
||
<view class="u-flex-1 u-p-l-24">
|
||
<view class="font-bold">言力经典330ml</view>
|
||
<view class="color-999 u-m-t-16">剩余：9瓶</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<view class="u-m-t-24">
|
||
<view class="u-flex">
|
||
<text class="color-999">取酒码</text>
|
||
<text class="font-bold u-m-l-24">3920240529160807875</text>
|
||
</view>
|
||
<view class="u-flex u-m-t-16">
|
||
<text class="color-999">到期时间</text>
|
||
<text class="font-bold u-m-l-24">2024-06-18 16:08:07</text>
|
||
</view>
|
||
<view class="u-flex u-m-t-16">
|
||
<text class="color-999">最新记录</text>
|
||
<text class="font-bold u-m-l-24">取出1瓶，还剩下9瓶</text>
|
||
</view>
|
||
</view>
|
||
<view class="u-flex u-row-right u-m-t-24">
|
||
<view class="u-m-r-30">
|
||
<my-button shape="circle" plain width="160" height="60" type="cancel"><view>取酒</view></my-button>
|
||
</view>
|
||
<my-button shape="circle" width="180" height="60"><view>查看详情</view></my-button>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
</template>
|
||
|
||
<script setup>
|
||
import myButton from '@/components/my-components/my-button'
|
||
import go from '@/commons/utils/go.js'
|
||
function toDetail(){
|
||
go.to('PAGES_STORING_WINE_RECORD_DETAIL',{id:1})
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.border-bottom{
|
||
border-color: rgb(245, 245, 245);
|
||
}
|
||
$head-img-size:80rpx;
|
||
.recoder-item {
|
||
margin-bottom: 32rpx;
|
||
|
||
.user-head-img {
|
||
width: $head-img-size;
|
||
height: $head-img-size;
|
||
background-color: rgb(204, 204, 204);
|
||
border-radius: 8rpx;
|
||
overflow: hidden;
|
||
}
|
||
.goods{
|
||
padding-left: calc( $head-img-size + 24rpx);
|
||
.goods-img{
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
background-color: rgb(204, 204, 204);
|
||
border-radius: 8rpx;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
}
|
||
</style> |