submit
parent
c346019269
commit
bd6eee493f
@ -0,0 +1,291 @@
|
||||
<template>
|
||||
<div class="order-details">
|
||||
<title-block title="寄存画作">
|
||||
<template #left>
|
||||
<div> <image style="width: 112rpx;height: 52rpx" src="../../static/zu506@3x.png"></image></div>
|
||||
</template>
|
||||
</title-block>
|
||||
<div class="content2">
|
||||
<image src="../../static/zu709@3x.png"></image>
|
||||
</div>
|
||||
<tm-poup height="1400" v-model="show_1" position="bottom">
|
||||
<div class="poup">
|
||||
<div class="content1">
|
||||
<div class="wrap1">请选择您的寄存时限</div>
|
||||
<div class="wrap2">
|
||||
<image src="https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/d84593b3-10a8-4d86-be8c-b048b03b22c7.png"></image>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content2"></div>
|
||||
<div class="content3">
|
||||
<div class="wrap1">1个月</div>
|
||||
<div class="wrap1">3个月</div>
|
||||
<div class="wrap1 active">6个月</div>
|
||||
<div class="wrap4">
|
||||
<div class="wrap4_1">12个月</div>
|
||||
<div class="wrap4_2">*暂时不可选</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</tm-poup>
|
||||
<div class="content3">
|
||||
<div class="prompt">*扫描自动填入</div>
|
||||
<div class="wrap1">
|
||||
<div class="wrap1_1">
|
||||
<div class="wrap1_1_1">画作编号</div>
|
||||
<div class="wrap1_1_2"></div>
|
||||
<div class="wrap1_1_3">
|
||||
<input placeholder-style="color: #939393;font-size: 24rpx;" placeholder="画作编号" />
|
||||
</div>
|
||||
<div class="wrap1_1_4"></div>
|
||||
</div>
|
||||
<div class="wrap1_1">
|
||||
<div class="wrap1_1_1">画作名称</div>
|
||||
<div class="wrap1_1_2"></div>
|
||||
<div class="wrap1_1_3">
|
||||
<input placeholder-style="color: #939393;font-size: 24rpx;" placeholder="画作名称" />
|
||||
</div>
|
||||
<div class="wrap1_1_4"></div>
|
||||
</div>
|
||||
<div class="wrap1_1">
|
||||
<div class="wrap1_1_1">画家名称</div>
|
||||
<div class="wrap1_1_2"></div>
|
||||
<div class="wrap1_1_3">
|
||||
<input placeholder-style="color: #939393;font-size: 24rpx;" placeholder="画家名称" />
|
||||
</div>
|
||||
<div class="wrap1_1_4">
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrap1_1">
|
||||
<div class="wrap1_1_1">画作平尺数</div>
|
||||
<div class="wrap1_1_2"></div>
|
||||
<div class="wrap1_1_3">
|
||||
<input placeholder-style="color: #939393;font-size: 24rpx;" placeholder="画作平尺数" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrap2"></div>
|
||||
</div>
|
||||
<div class="content4">
|
||||
<div class="wrap1">
|
||||
<div class="wrap1_1">
|
||||
<div class="wrap1_1_1">订单编号</div>
|
||||
<div class="wrap1_1_2"></div>
|
||||
<div class="wrap1_1_3">
|
||||
<input placeholder-style="color: #939393;font-size: 24rpx;" placeholder="订单编号" />
|
||||
</div>
|
||||
<div class="wrap1_1_4"></div>
|
||||
</div>
|
||||
<div class="wrap1_1">
|
||||
<div class="wrap1_1_1">寄存地址</div>
|
||||
<div class="wrap1_1_2"></div>
|
||||
<div class="wrap1_1_3">
|
||||
<input placeholder-style="color: #939393;font-size: 24rpx;" placeholder="寄存地址" />
|
||||
</div>
|
||||
<div class="wrap1_1_4"></div>
|
||||
<div class="wrap1_1_5">
|
||||
<image src="../../static/zu611@3x.png"></image>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrap1_1">
|
||||
<div class="wrap1_1_1">寄存时限</div>
|
||||
<div class="wrap1_1_2"></div>
|
||||
<div class="wrap1_1_3">
|
||||
<input placeholder-style="color: #939393;font-size: 24rpx;" placeholder="寄存时限" />
|
||||
</div>
|
||||
<div @click="show_1=true" class="wrap1_1_5">
|
||||
<image src="../../static/zu612@3x.png"></image>
|
||||
</div>
|
||||
<div class="wrap1_1_4">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrap2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "order-details",
|
||||
data(){
|
||||
return{
|
||||
show_1:true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.order-details{
|
||||
background-image: url("https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/4fdc9a0f-d72a-46b6-a04d-ed56d5465213.png");
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
padding-left: 30rpx;
|
||||
padding-right: 30rpx;
|
||||
background-size: cover;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
.poup{
|
||||
padding-top: 28rpx;
|
||||
padding-left: 30rpx;
|
||||
padding-right: 30rpx;
|
||||
&>.content3{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.wrap4{
|
||||
border-radius: 32rpx;
|
||||
margin-top: 30rpx;
|
||||
width: 220rpx;
|
||||
height: 84rpx;
|
||||
background: #D8D8D8;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.wrap4_1{
|
||||
color: #626262;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.wrap4_2{
|
||||
color: #BE7E7E;
|
||||
font-size: 16rpx;
|
||||
|
||||
}
|
||||
}
|
||||
.wrap1{
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
margin-right: 16rpx;
|
||||
font-size: 28rpx;
|
||||
border-radius: 32rpx;
|
||||
border: 2rpx solid #76C458;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 220rpx;
|
||||
height: 84rpx;
|
||||
&:nth-child(3){
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.active{
|
||||
color: #fff;
|
||||
background:#76C458 ;
|
||||
}
|
||||
}
|
||||
}
|
||||
&>.content2{
|
||||
height: 1rpx;
|
||||
background:#626262 ;
|
||||
}
|
||||
&>.content1{
|
||||
margin-bottom: 36rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.wrap1{
|
||||
color: #000;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.wrap2{
|
||||
image{
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&>.content4{
|
||||
margin-top: 60rpx;
|
||||
.wrap1{
|
||||
border: 1rpx dashed #DFE9F0;
|
||||
background-color: #fff;
|
||||
.wrap1_1{
|
||||
position: relative;
|
||||
height: 114rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.wrap1_1_4{
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
height: 0;
|
||||
width: 636rpx;
|
||||
border-bottom: 0.5px solid #626262;
|
||||
}
|
||||
.wrap1_1_5{
|
||||
right: 42rpx;
|
||||
position: absolute;
|
||||
image{
|
||||
width: 46.34rpx;
|
||||
height: 20rpx;
|
||||
}
|
||||
}
|
||||
.wrap1_1_2{
|
||||
margin-right: 36rpx;
|
||||
width: 0;
|
||||
height: 66rpx;
|
||||
border-left: 0.5px solid #626262;
|
||||
|
||||
}
|
||||
.wrap1_1_1{
|
||||
width: 210rpx;
|
||||
padding-left: 32rpx;
|
||||
|
||||
color: #626262;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&>.content3{
|
||||
margin-top: 60rpx;
|
||||
.prompt{
|
||||
color: #4E964D;
|
||||
font-size: 16rpx;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
.wrap1{
|
||||
border: 1rpx dashed #DFE9F0;
|
||||
background-color: #fff;
|
||||
.wrap1_1{
|
||||
position: relative;
|
||||
height: 114rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.wrap1_1_4{
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
height: 0;
|
||||
width: 636rpx;
|
||||
border-bottom: 0.5px solid #626262;
|
||||
}
|
||||
.wrap1_1_2{
|
||||
margin-right: 36rpx;
|
||||
width: 0;
|
||||
height: 66rpx;
|
||||
border-left: 0.5px solid #626262;
|
||||
|
||||
}
|
||||
.wrap1_1_1{
|
||||
width: 210rpx;
|
||||
padding-left: 32rpx;
|
||||
|
||||
color: #626262;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&>.content2{
|
||||
margin-top: 42rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
image{
|
||||
width: 404rpx;
|
||||
height: 306rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 4.4 KiB |
Loading…
Reference in New Issue