|
|
|
@ -1,6 +1,6 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="order-details">
|
|
|
|
|
<title-block title="寄存画作">
|
|
|
|
|
<title-block class="titile-d" title="寄存画作">
|
|
|
|
|
<template #left>
|
|
|
|
|
<div>
|
|
|
|
|
<image style="width: 112rpx;height: 52rpx"
|
|
|
|
@ -9,9 +9,39 @@
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</title-block>
|
|
|
|
|
<div class="content-list" v-if="listPaintings.length>1">
|
|
|
|
|
<div class="wrap1">*请注意确认寄存结束时间</div>
|
|
|
|
|
<div class="wrap2">
|
|
|
|
|
<div class="wrap2_1" :style="{height:`${listHeight}rpx`}">
|
|
|
|
|
<div :class="['item',index===currentIndex?'active':'']" @click="itemClick(index)" v-for="(item,index) of listPaintings">
|
|
|
|
|
<div class="item_1">{{index+1}}</div>
|
|
|
|
|
<div class="item_2">
|
|
|
|
|
<div class="item_2_1">
|
|
|
|
|
<img :src="listPaintings[index].fileList1[0].url" alt="">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item_2_2">{{listPaintings[index].artworkNum}}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item_3">{{listPaintings[index].artworkName}}</div>
|
|
|
|
|
<div class="item_4">{{listPaintings[index].warehouseID?addressList.find(x=>x.ID===listPaintings[index].warehouseID).address:''}}</div>
|
|
|
|
|
<div class="item_5">{{listPaintings[index].endAt}}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="wrap2_2" @click="expand">
|
|
|
|
|
<div class="wrap2_2_1" v-if="listPaintings.length>2" :style="{transform:`${isExpand?'rotate(180deg)':''}`}">
|
|
|
|
|
<img src="https://cdns.fontree.cn/fonchain-main/prod/image/default/approval/13639162-2871-4187-abc5-71c2d9f01ac2.png" alt="">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="wrap2_2_2">共计7幅画作</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content-center" :style="{marginTop:`${contentListHeight+10}px`}">
|
|
|
|
|
<div class="painting-name" v-if="listPaintings.length>1">
|
|
|
|
|
<div class="wrap1">画作{{currentIndex+1}}:</div>
|
|
|
|
|
<div class="wrap2" @click="itemDelete">删除</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content2">
|
|
|
|
|
<u-upload
|
|
|
|
|
:fileList="fileList1"
|
|
|
|
|
:fileList="listPaintings[currentIndex].fileList1"
|
|
|
|
|
@afterRead="afterRead"
|
|
|
|
|
@delete="deletePic"
|
|
|
|
|
name="6"
|
|
|
|
@ -28,8 +58,110 @@
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</u-upload>
|
|
|
|
|
</div>
|
|
|
|
|
<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 style="color: #939393;font-size: 24rpx;" v-model="listPaintings[currentIndex].artworkNum" 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 style="color: #939393;font-size: 24rpx;" v-model="listPaintings[currentIndex].artworkName" 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 style="color: #939393;font-size: 24rpx;" v-model="listPaintings[currentIndex].artistName" 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 style="color: #939393;font-size: 24rpx;" v-model="listPaintings[currentIndex].artworkSquareSize" 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" @click="show_2=true">
|
|
|
|
|
<div class="wrap1_1_1">寄存地址</div>
|
|
|
|
|
<div class="wrap1_1_2"></div>
|
|
|
|
|
<div class="wrap1_1_3">
|
|
|
|
|
<input style="color: #939393;font-size: 24rpx;" disabled :value="listPaintings[currentIndex].warehouseID?addressList.find(x=>x.ID===listPaintings[currentIndex].warehouseID).address:''" 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" @click="openShow1()">
|
|
|
|
|
<div class="wrap1_1_1">寄存时长</div>
|
|
|
|
|
<div class="wrap1_1_2"></div>
|
|
|
|
|
<div class="wrap1_1_3">
|
|
|
|
|
<input style="color: #939393;font-size: 24rpx;" :value="listPaintings[currentIndex].endAt" disabled placeholder-style="color: #939393;font-size: 24rpx;" placeholder="请选择寄存时长"/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="wrap1_1_5">
|
|
|
|
|
<image src="../../static/zu612@3x.png"></image>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="wrap2"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content7" @click="addPainting">
|
|
|
|
|
<div class="wrap1">
|
|
|
|
|
<div class="horizontal"></div>
|
|
|
|
|
<div class="vertical"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="wrap2">添加</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content5">
|
|
|
|
|
<div class="wrap4" v-show="isExpand1" :style="{top:`-${152*3}rpx`}">
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="item_1">1</div>
|
|
|
|
|
<div class="item_2">FL0011</div>
|
|
|
|
|
<div class="item_3">长江万里</div>
|
|
|
|
|
<div class="item_4">¥ 160</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="item_1">1</div>
|
|
|
|
|
<div class="item_2">FL0011</div>
|
|
|
|
|
<div class="item_3">长江万里</div>
|
|
|
|
|
<div class="item_4">¥ 160</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="item_1">1</div>
|
|
|
|
|
<div class="item_2">FL0011</div>
|
|
|
|
|
<div class="item_3">长江万里</div>
|
|
|
|
|
<div class="item_4">¥ 160</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="wrap3" @click="expand1" :style="{transform:`${isExpand1?'':'rotate(180deg)'}`}"> <img src="https://cdns.fontree.cn/fonchain-main/prod/image/default/approval/13639162-2871-4187-abc5-71c2d9f01ac2.png" alt=""></div>
|
|
|
|
|
<div class="wrap1">
|
|
|
|
|
<div class="wrap1_1">*仅微信付款</div>
|
|
|
|
|
<div class="wrap1_2">预计 ¥{{expectedPayment}}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="wrap2" @click="signContract">确认金额并签署合同</div>
|
|
|
|
|
</div>
|
|
|
|
|
<u-popup :round="15" :show="show_2" mode="bottom" @open="()=>{show_2=true}">
|
|
|
|
|
<div class="poup1" >
|
|
|
|
|
<div class="content1">
|
|
|
|
@ -42,7 +174,7 @@
|
|
|
|
|
<div class="content2"></div>
|
|
|
|
|
<div class="content3">
|
|
|
|
|
<div v-for="(item,index) in addressList" @click="selectAddress(item)"
|
|
|
|
|
:class="[warehouseID===item.ID?'active':'']" :key="index" class="wrap1">
|
|
|
|
|
:class="[listPaintings[currentIndex].warehouseID===item.ID?'active':'']" :key="index" class="wrap1">
|
|
|
|
|
<div class="wrap1_1">{{ item.address }}</div>
|
|
|
|
|
<div class="wrap1_2">*剩余{{ item.leftNum }}位置</div>
|
|
|
|
|
</div>
|
|
|
|
@ -65,7 +197,7 @@
|
|
|
|
|
<u-popup :round="15" :show="show_1" mode="bottom" @open="()=>{show_1=true}">
|
|
|
|
|
<div class="poup">
|
|
|
|
|
<div class="content1" style="margin-top: 20rpx">
|
|
|
|
|
<div class="wrap1">寄存结束日期</div>
|
|
|
|
|
<div class="wrap1">寄存时长</div>
|
|
|
|
|
<div @click="show_1=false" class="wrap2">
|
|
|
|
|
<image
|
|
|
|
|
src="https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/d84593b3-10a8-4d86-be8c-b048b03b22c7.png"></image>
|
|
|
|
@ -85,7 +217,7 @@
|
|
|
|
|
readonly
|
|
|
|
|
placeholder="点击选择"
|
|
|
|
|
border="surround"
|
|
|
|
|
v-model="value1"
|
|
|
|
|
v-model="listPaintings[currentIndex].endAt"
|
|
|
|
|
></u--input>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
@ -122,80 +254,6 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</u-popup>
|
|
|
|
|
|
|
|
|
|
<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 style="color: #939393;font-size: 24rpx;" v-model="info.artworkNum" 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 style="color: #939393;font-size: 24rpx;" v-model="info.artworkName" 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 style="color: #939393;font-size: 24rpx;" v-model="info.artistName" 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 style="color: #939393;font-size: 24rpx;" v-model="info.artworkSquareSize" 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" @click="show_2=true">
|
|
|
|
|
<div class="wrap1_1_1">寄存地址</div>
|
|
|
|
|
<div class="wrap1_1_2"></div>
|
|
|
|
|
<div class="wrap1_1_3">
|
|
|
|
|
<input style="color: #939393;font-size: 24rpx;" disabled :value="warehouseID?addressList.find(x=>x.ID===warehouseID).address:''" 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" @click="openShow1()">
|
|
|
|
|
<div class="wrap1_1_1">寄存结束日期</div>
|
|
|
|
|
<div class="wrap1_1_2"></div>
|
|
|
|
|
<div class="wrap1_1_3">
|
|
|
|
|
<input style="color: #939393;font-size: 24rpx;" :value="value1" disabled placeholder-style="color: #939393;font-size: 24rpx;" placeholder="请选择寄存结束日期"/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="wrap1_1_5">
|
|
|
|
|
<image src="../../static/zu612@3x.png"></image>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="wrap2"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content5">
|
|
|
|
|
<div class="wrap1">
|
|
|
|
|
<div class="wrap1_1">*仅微信付款</div>
|
|
|
|
|
<div class="wrap1_2">预计 ¥{{expectedPayment}}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="wrap2" @click="signContract">确认金额并签署合同</div>
|
|
|
|
|
</div>
|
|
|
|
|
<u-loading-page bgColor="rgba(0,0,0,0.5)" :loading="loading" loading-text="正在进入法大大签署..."></u-loading-page>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
@ -223,6 +281,20 @@ export default {
|
|
|
|
|
days.push(i)
|
|
|
|
|
}
|
|
|
|
|
return {
|
|
|
|
|
currentIndex:0,
|
|
|
|
|
listPaintings:[{
|
|
|
|
|
fileList1:[],
|
|
|
|
|
artworkNum:'',
|
|
|
|
|
artworkName:'',
|
|
|
|
|
artistName:'',
|
|
|
|
|
artworkSquareSize:'',
|
|
|
|
|
warehouseID:'',
|
|
|
|
|
endAt:''
|
|
|
|
|
}],
|
|
|
|
|
contentListHeight: 0,
|
|
|
|
|
isExpand:false,
|
|
|
|
|
isExpand1:false,
|
|
|
|
|
listHeight:308,
|
|
|
|
|
minDate:'',
|
|
|
|
|
show: false,
|
|
|
|
|
value1: '',
|
|
|
|
@ -276,6 +348,60 @@ export default {
|
|
|
|
|
this.data = [today.getFullYear(), today.getMonth() + 1, today.getDate()]
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
itemDelete(){
|
|
|
|
|
this.listPaintings.splice(this.currentIndex,1)
|
|
|
|
|
this.currentIndex=0
|
|
|
|
|
if (this.listPaintings.length===1){
|
|
|
|
|
this.contentListHeight=0
|
|
|
|
|
}
|
|
|
|
|
this.$nextTick(()=>{
|
|
|
|
|
this.getheight()
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
itemClick(index){
|
|
|
|
|
this.currentIndex=index
|
|
|
|
|
},
|
|
|
|
|
addPainting(){
|
|
|
|
|
this.listPaintings.push({
|
|
|
|
|
fileList1:[],
|
|
|
|
|
artworkNum:'',
|
|
|
|
|
artworkName:'',
|
|
|
|
|
artistName:'',
|
|
|
|
|
artworkSquareSize:'',
|
|
|
|
|
warehouseID:'',
|
|
|
|
|
endAt:''
|
|
|
|
|
})
|
|
|
|
|
this.$nextTick(()=>{
|
|
|
|
|
this.getheight()
|
|
|
|
|
})
|
|
|
|
|
this.currentIndex=this.currentIndex+1
|
|
|
|
|
},
|
|
|
|
|
getheight(){
|
|
|
|
|
let query = uni.createSelectorQuery().in(this);
|
|
|
|
|
query.select('.content-list').boundingClientRect(data => {
|
|
|
|
|
if (data) {
|
|
|
|
|
let query = uni.createSelectorQuery().in(this);
|
|
|
|
|
query.select('.titile-d').boundingClientRect(data1 => {
|
|
|
|
|
if (data1) {
|
|
|
|
|
this.contentListHeight=data.bottom-data1.bottom
|
|
|
|
|
}
|
|
|
|
|
}).exec();
|
|
|
|
|
}
|
|
|
|
|
}).exec();
|
|
|
|
|
},
|
|
|
|
|
expand1(){
|
|
|
|
|
this.isExpand1=!this.isExpand1
|
|
|
|
|
},
|
|
|
|
|
expand(){
|
|
|
|
|
if (this.isExpand){
|
|
|
|
|
this.listHeight=154*2
|
|
|
|
|
}else {
|
|
|
|
|
this.listHeight=154*(this.listPaintings.length<=7?this.listPaintings.length:7)
|
|
|
|
|
}
|
|
|
|
|
this.isExpand=!this.isExpand
|
|
|
|
|
},
|
|
|
|
|
timestampToDateString(timestamp) {
|
|
|
|
|
const date = new Date(timestamp ); // 把时间戳乘以1000转换为Date对象需要的毫秒数
|
|
|
|
|
const year = date.getFullYear();
|
|
|
|
@ -284,11 +410,11 @@ export default {
|
|
|
|
|
return year + "-" + month + "-" + day;
|
|
|
|
|
},
|
|
|
|
|
confirmDate(data){
|
|
|
|
|
this.value1=this.timestampToDateString(data.value)
|
|
|
|
|
this.listPaintings[this.currentIndex].endAt=this.timestampToDateString(data.value)
|
|
|
|
|
this.show=false
|
|
|
|
|
},
|
|
|
|
|
openShow1(){
|
|
|
|
|
if (!this.info.artworkSquareSize){
|
|
|
|
|
if (!this.listPaintings[this.currentIndex].artworkSquareSize){
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: "请先填写画作平尺数",
|
|
|
|
|
duration: 2000,
|
|
|
|
@ -320,9 +446,9 @@ export default {
|
|
|
|
|
async afterRead(event) {
|
|
|
|
|
// 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
|
|
|
|
|
let lists = [].concat(event.file)
|
|
|
|
|
let fileListLen = this[`fileList1`].length
|
|
|
|
|
let fileListLen = this.listPaintings[this.currentIndex].fileList1.length
|
|
|
|
|
lists.map((item) => {
|
|
|
|
|
this[`fileList1`].push({
|
|
|
|
|
this.listPaintings[this.currentIndex].fileList1.push({
|
|
|
|
|
...item,
|
|
|
|
|
status: 'uploading',
|
|
|
|
|
message: '上传中'
|
|
|
|
@ -330,9 +456,8 @@ export default {
|
|
|
|
|
})
|
|
|
|
|
for (let i = 0; i < lists.length; i++) {
|
|
|
|
|
const result = await this.uploadFilePromise(lists[i].url, 'check')
|
|
|
|
|
console.log(result)
|
|
|
|
|
let item = this[`fileList1`][fileListLen]
|
|
|
|
|
this[`fileList1`].splice(fileListLen, 1, Object.assign(item, {
|
|
|
|
|
let item = this.listPaintings[this.currentIndex].fileList1[fileListLen]
|
|
|
|
|
this.listPaintings[this.currentIndex].fileList1.splice(fileListLen, 1, Object.assign(item, {
|
|
|
|
|
status: 'success',
|
|
|
|
|
message: '',
|
|
|
|
|
url: result
|
|
|
|
@ -366,7 +491,7 @@ export default {
|
|
|
|
|
message: '请选择寄存地址'
|
|
|
|
|
}, {
|
|
|
|
|
value: this.value1,
|
|
|
|
|
message: '请选择寄存结束日期'
|
|
|
|
|
message: '请选择寄存时长'
|
|
|
|
|
}]
|
|
|
|
|
for (const check of checks) {
|
|
|
|
|
if (!check.value) {
|
|
|
|
@ -426,7 +551,7 @@ export default {
|
|
|
|
|
this.show_2 = false
|
|
|
|
|
},
|
|
|
|
|
selectAddress(item) {
|
|
|
|
|
this.warehouseID = item.ID
|
|
|
|
|
this.listPaintings[this.currentIndex].warehouseID = item.ID
|
|
|
|
|
},
|
|
|
|
|
selectionPeriod(item) {
|
|
|
|
|
this.cycleId = item.ID
|
|
|
|
@ -530,9 +655,119 @@ picker-view {
|
|
|
|
|
background-size: cover;
|
|
|
|
|
width: 100vw;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
position: relative;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
.content-list{
|
|
|
|
|
top: 130rpx;
|
|
|
|
|
z-index: 999;
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 686rpx;
|
|
|
|
|
margin-top: 34rpx;
|
|
|
|
|
text-align: right;
|
|
|
|
|
.wrap1{
|
|
|
|
|
margin-bottom: 10rpx;
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
color: rgba(78, 150, 77, 1);
|
|
|
|
|
}
|
|
|
|
|
.wrap2{
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
|
|
& > .content5 {
|
|
|
|
|
|
|
|
|
|
border-radius: 20rpx;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
padding-left: 18rpx;
|
|
|
|
|
padding-right: 32rpx;
|
|
|
|
|
.wrap2_2{
|
|
|
|
|
height: 60rpx;
|
|
|
|
|
position: relative;
|
|
|
|
|
.wrap2_2_2{
|
|
|
|
|
line-height: 60rpx;
|
|
|
|
|
color: rgba(118, 196, 88, 1);
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
}
|
|
|
|
|
.wrap2_2_1{
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: cover;
|
|
|
|
|
img{
|
|
|
|
|
width: 30rpx;
|
|
|
|
|
height: 16rpx;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.wrap2_1{
|
|
|
|
|
z-index: 999;
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
.item{
|
|
|
|
|
height: 154rpx;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
padding-left: 10rpx;
|
|
|
|
|
padding-right: 10rpx;
|
|
|
|
|
&.active{
|
|
|
|
|
background-color:rgb(245, 251, 242);
|
|
|
|
|
}
|
|
|
|
|
.item_5{
|
|
|
|
|
width: 134rpx;
|
|
|
|
|
color: rgba(98, 98, 98, 1);
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
}
|
|
|
|
|
.item_4{
|
|
|
|
|
margin-right: 28rpx;
|
|
|
|
|
width: 192rpx;
|
|
|
|
|
color: rgba(98, 98, 98, 1);
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
}
|
|
|
|
|
.item_3{
|
|
|
|
|
margin-right: 48rpx;
|
|
|
|
|
width: 78rpx;
|
|
|
|
|
color: rgba(98, 98, 98, 1);
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
}
|
|
|
|
|
.item_2{
|
|
|
|
|
margin-right: 24rpx;
|
|
|
|
|
width: 68rpx;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.item_2_2{
|
|
|
|
|
color: rgba(147, 147, 147, 1);
|
|
|
|
|
font-size: 20rpx;
|
|
|
|
|
}
|
|
|
|
|
.item_2_1{
|
|
|
|
|
background-color: #000;
|
|
|
|
|
width: 68rpx;
|
|
|
|
|
height: 68rpx;
|
|
|
|
|
img{
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.item_1{
|
|
|
|
|
margin-right: 18rpx;
|
|
|
|
|
color: rgba(88, 166, 107, 1);
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
width: 36rpx;
|
|
|
|
|
height: 36rpx;
|
|
|
|
|
border: 5rpx solid rgba(118, 196, 88, 1);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
background: transparent;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
& > .content5 {
|
|
|
|
|
align-items: center;
|
|
|
|
|
left: 0;
|
|
|
|
|
background: #fff;
|
|
|
|
@ -541,7 +776,56 @@ picker-view {
|
|
|
|
|
bottom: 0;
|
|
|
|
|
height: 172rpx;
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
|
|
.wrap4{
|
|
|
|
|
z-index: 999;
|
|
|
|
|
width: 100%;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
position: absolute;
|
|
|
|
|
.item{
|
|
|
|
|
height: 152rpx;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.item_4{
|
|
|
|
|
margin-right: 64rpx;
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
color: rgba(118, 196, 88, 1);
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
.item_3{
|
|
|
|
|
width: 100rpx;
|
|
|
|
|
margin-left: 48rpx;
|
|
|
|
|
color: rgba(98, 98, 98, 1);
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
}
|
|
|
|
|
.item_2{
|
|
|
|
|
width: 100rpx;
|
|
|
|
|
margin-left: 34rpx;
|
|
|
|
|
color: rgba(98, 98, 98, 1);
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
}
|
|
|
|
|
.item_1{
|
|
|
|
|
margin-left: 56rpx;
|
|
|
|
|
color: rgba(88, 166, 107, 1);
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
width: 36rpx;
|
|
|
|
|
height: 36rpx;
|
|
|
|
|
border: 5rpx solid rgba(118, 196, 88, 1);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
background: transparent;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.wrap3{
|
|
|
|
|
margin-left: 32rpx;
|
|
|
|
|
img{
|
|
|
|
|
width: 30rpx;
|
|
|
|
|
height: 16rpx;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.wrap2 {
|
|
|
|
|
border-radius: 40rpx;
|
|
|
|
|
display: flex;
|
|
|
|
@ -555,7 +839,7 @@ picker-view {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.wrap1 {
|
|
|
|
|
margin-left: 58rpx;
|
|
|
|
|
margin-left: 18rpx;
|
|
|
|
|
margin-right: 70rpx;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
@ -821,7 +1105,80 @@ picker-view {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.content-center{
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
margin-bottom: 180rpx;
|
|
|
|
|
.painting-name{
|
|
|
|
|
margin-top: 48rpx;
|
|
|
|
|
align-items: center;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
.wrap1{
|
|
|
|
|
color: rgba(0, 0, 0, 1);
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
}
|
|
|
|
|
.wrap2{
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
color: rgba(118, 196, 88, 1);
|
|
|
|
|
border-radius: 40rpx;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
width: 148rpx;
|
|
|
|
|
height: 56rpx;
|
|
|
|
|
border: 1px solid rgba(118, 196, 88, 1);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
&>.content7{
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
border-radius: 40rpx;
|
|
|
|
|
width: 228rpx;
|
|
|
|
|
height: 56rpx;
|
|
|
|
|
border: 3rpx solid rgba(118, 196, 88, 1);
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.wrap2{
|
|
|
|
|
color: rgba(118, 196, 88, 1);
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
}
|
|
|
|
|
.wrap1{
|
|
|
|
|
margin-right: 20rpx;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
width: 32rpx;
|
|
|
|
|
height: 32rpx;
|
|
|
|
|
border: 3rpx solid rgba(118, 196, 88, 1);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
background: transparent;
|
|
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
.horizontal {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translate(-50%,-50%);
|
|
|
|
|
width: 18rpx;
|
|
|
|
|
height: 2rpx;
|
|
|
|
|
background-color: rgba(118, 196, 88, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.vertical {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 50%;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translate(-50%,-50%);
|
|
|
|
|
width: 2rpx;
|
|
|
|
|
height: 18rpx;
|
|
|
|
|
background-color: rgba(118, 196, 88, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
& > .content4 {
|
|
|
|
|
margin-bottom: 24rpx;
|
|
|
|
|
margin-top: 60rpx;
|
|
|
|
|
|
|
|
|
|
.wrap1 {
|
|
|
|
@ -922,7 +1279,7 @@ picker-view {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
& > .content2 {
|
|
|
|
|
margin-top: 42rpx;
|
|
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
|
@ -932,4 +1289,5 @@ picker-view {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|