937 lines
24 KiB
Vue
937 lines
24 KiB
Vue
<template>
|
||
<div class="order-details">
|
||
<title-block title="寄存画作">
|
||
<template #left>
|
||
<div>
|
||
<image style="width: 112rpx;height: 52rpx"
|
||
src="https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/785cf885-c4c9-44b3-8155-4b39988c7ef8.png"
|
||
@click="back"></image>
|
||
</div>
|
||
</template>
|
||
</title-block>
|
||
<div class="content2">
|
||
<u-upload
|
||
:fileList="fileList1"
|
||
@afterRead="afterRead"
|
||
@delete="deletePic"
|
||
name="6"
|
||
multiple
|
||
:maxCount="1"
|
||
width="404rpx"
|
||
height="306rpx"
|
||
>
|
||
<div style="width: 404rpx;height: 306rpx;background: #000;border-radius: 20rpx;display: flex;flex-direction: column;align-items: center;justify-content: center">
|
||
<div style="margin-bottom: 14rpx">
|
||
<image style="width: 38.32rpx;height: 38.2rpx" src="../../static/zu142@3x.png"></image>
|
||
</div>
|
||
<div style="font-size: 32rpx;color: #fff">上传画作图片</div>
|
||
</div>
|
||
|
||
</u-upload>
|
||
|
||
</div>
|
||
<u-popup :round="15" :show="show_2" mode="bottom" @open="()=>{show_2=true}">
|
||
<div class="poup1" >
|
||
<div class="content1">
|
||
<div class="wrap1">更换您的寄存地址</div>
|
||
<div @click="show_2=false" 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 v-for="(item,index) in addressList" @click="selectAddress(item)"
|
||
:class="[warehouseID===item.ID?'active':'']" :key="index" class="wrap1">
|
||
<div class="wrap1_1">{{ item.address }}</div>
|
||
<div class="wrap1_2">*剩余{{ item.leftNum }}位置</div>
|
||
</div>
|
||
<!-- <div class="wrap1 active">
|
||
<div class="wrap1_1">某某某某某某某地方</div>
|
||
<div class="wrap1_2">剩余12位置</div>
|
||
</div>-->
|
||
<!-- <div class="wrap1 disabled">
|
||
<div class="wrap1_1">某某某某某某某地方</div>
|
||
<div class="wrap1_2">*已满员</div>
|
||
</div>-->
|
||
</div>
|
||
<div class="content2"></div>
|
||
<div class="content6" @click="confirmAddress">
|
||
<div class="wrap1">确定</div>
|
||
</div>
|
||
</div>
|
||
</u-popup>
|
||
|
||
<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 @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>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="content2"></div>
|
||
<div class="content7" @click="show = true">
|
||
<u-datetime-picker
|
||
:show="show"
|
||
@confirm="confirmDate"
|
||
mode="date"
|
||
@cancel="show=false"
|
||
:minDate="minDate"
|
||
></u-datetime-picker>
|
||
<u--input
|
||
readonly
|
||
placeholder="请输入内容"
|
||
border="surround"
|
||
v-model="value1"
|
||
></u--input>
|
||
</div>
|
||
|
||
|
||
<!-- <div class="content2"></div>
|
||
<div class="content4">起始日期</div>
|
||
<div class="content5">
|
||
<div class="wrap1">年份</div>
|
||
<div class="wrap2">月</div>
|
||
<div class="wrap3">日</div>
|
||
</div>-->
|
||
<!-- <div style="margin-left: -30rpx;margin-right: -30rpx">
|
||
<picker-view indicator-class="test" :value="value" @change="changeData" class="picker-view">
|
||
<picker-view-column>
|
||
<view style="display: flex;align-items: center;justify-content: center" class="item"
|
||
:class="[isDateFont(item,0)?'fontDate':'']" v-for="(item,index) in years" :key="index">{{ item }}年
|
||
</view>
|
||
</picker-view-column>
|
||
<picker-view-column>
|
||
<view style="display: flex;align-items: center;justify-content: center" class="item"
|
||
:class="[isDateFont(item,1)?'fontDate':'']" v-for="(item,index) in months" :key="index">{{ item }}月
|
||
</view>
|
||
</picker-view-column>
|
||
<picker-view-column>
|
||
<view style="display: flex;align-items: center;justify-content: center" class="item"
|
||
:class="[isDateFont(item,2)?'fontDate':'']" v-for="(item,index) in days" :key="index">{{ item }}日
|
||
</view>
|
||
</picker-view-column>
|
||
</picker-view>
|
||
</div>
|
||
<div class="content2"></div>-->
|
||
<div class="content6" @click="confirmCycle">
|
||
<div class="wrap1">确定</div>
|
||
</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>
|
||
<script>
|
||
import http from "@/http/api";
|
||
import {postDataByParams} from "../../http/service";
|
||
|
||
export default {
|
||
name: "order-details",
|
||
data() {
|
||
const date = new Date()
|
||
const years = []
|
||
const year = date.getFullYear()
|
||
const months = []
|
||
const month = date.getMonth() + 1
|
||
const days = []
|
||
const day = date.getDate()
|
||
for (let i = 1990; i <= date.getFullYear(); i++) {
|
||
years.push(i)
|
||
}
|
||
for (let i = 1; i <= 12; i++) {
|
||
months.push(i)
|
||
}
|
||
for (let i = 1; i <= 31; i++) {
|
||
days.push(i)
|
||
}
|
||
return {
|
||
minDate:'',
|
||
show: false,
|
||
value1: '',
|
||
loading:false,
|
||
fileList1:[],
|
||
dayMoney:'',
|
||
expectedPayment:'',
|
||
warehouseID: '',
|
||
cycleId: '',
|
||
cycleList: [],
|
||
addressList: [],
|
||
info: {},
|
||
show_2: false,
|
||
data: [],
|
||
show_1: false,
|
||
title: 'picker-view',
|
||
years,
|
||
year,
|
||
months,
|
||
month,
|
||
days,
|
||
day,
|
||
value: [9999, month - 1, day - 1],
|
||
visible: true,
|
||
url: ''//二维码扫码的结果用户发起请求的body体
|
||
}
|
||
},
|
||
watch:{
|
||
'info.artworkSquareSize':{
|
||
handler(){
|
||
this.obtainAmount()
|
||
}
|
||
},
|
||
value1(newValue){
|
||
this.obtainAmount()
|
||
|
||
}
|
||
},
|
||
mounted() {
|
||
const date = new Date();
|
||
date.setHours(0, 0, 0, 0);
|
||
this.minDate = date.getTime() + 24 * 60 * 60 * 1000;
|
||
// this.value1=this.timestampToDateString(date.getTime() + 24 * 60 * 60 * 1000)
|
||
this.getCycle()
|
||
if (this.$mp.query.url){
|
||
this.url=this.$mp.query.url
|
||
this.getDetailUrl()
|
||
}
|
||
this.getAddress()
|
||
const today = new Date();
|
||
this.value = [today.getFullYear() - 1990, today.getMonth(), today.getDate() - 1]
|
||
this.data = [today.getFullYear(), today.getMonth() + 1, today.getDate()]
|
||
},
|
||
methods: {
|
||
timestampToDateString(timestamp) {
|
||
const date = new Date(timestamp ); // 把时间戳乘以1000转换为Date对象需要的毫秒数
|
||
const year = date.getFullYear();
|
||
const month = ("0" + (date.getMonth() + 1)).slice(-2); // 月份是从0开始的，所以加1，用slice保证格式是2位数
|
||
const day = ("0" + date.getDate()).slice(-2); // 用slice保证格式是2位数
|
||
return year + "-" + month + "-" + day;
|
||
},
|
||
confirmDate(data){
|
||
this.value1=this.timestampToDateString(data.value)
|
||
this.show=false
|
||
},
|
||
openShow1(){
|
||
if (!this.info.artworkSquareSize){
|
||
uni.showToast({
|
||
title: "请先填写画作平尺数",
|
||
duration: 2000,
|
||
icon: "none",
|
||
});
|
||
return
|
||
}
|
||
this.show_1=true
|
||
},
|
||
uploadFilePromise(url, type = null) {
|
||
return new Promise((resolve) => {
|
||
uni.uploadFile({
|
||
url: http.baseUrl + "/api/wxuser/uploadpic",
|
||
filePath: url,
|
||
name: "file",
|
||
success: (res) => {
|
||
console.log(res,'res')
|
||
const { path } = JSON.parse(res.data).data;
|
||
resolve(path);
|
||
|
||
},
|
||
});
|
||
})
|
||
},
|
||
deletePic() {
|
||
this.fileList1=[]
|
||
},
|
||
// 新增图片
|
||
async afterRead(event) {
|
||
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
||
let lists = [].concat(event.file)
|
||
let fileListLen = this[`fileList1`].length
|
||
lists.map((item) => {
|
||
this[`fileList1`].push({
|
||
...item,
|
||
status: 'uploading',
|
||
message: '上传中'
|
||
})
|
||
})
|
||
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, {
|
||
status: 'success',
|
||
message: '',
|
||
url: result
|
||
}))
|
||
fileListLen++
|
||
}
|
||
},
|
||
async signContract(){
|
||
const checks = [
|
||
{
|
||
value: this.fileList1.length>0,
|
||
message: '请上传画作图片'
|
||
},
|
||
{
|
||
value: this.info.artworkSquareSize,
|
||
message: '请输入画作平尺数'
|
||
},
|
||
{
|
||
value: this.info.artistName,
|
||
message: '请输入画家名称'
|
||
},
|
||
{
|
||
value: this.info.artworkName,
|
||
message: '请输入画作名称'
|
||
},
|
||
{
|
||
value: this.info.artworkNum,
|
||
message: '请输入画作编号'
|
||
},{
|
||
value: this.warehouseID,
|
||
message: '请选择寄存地址'
|
||
}, {
|
||
value: this.value1,
|
||
message: '请选择寄存结束日期'
|
||
}]
|
||
for (const check of checks) {
|
||
if (!check.value) {
|
||
uni.showToast({
|
||
title: check.message,
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
}
|
||
this.loading=true
|
||
const data={
|
||
warehouseID:this.warehouseID,
|
||
artworkSquareSize:Number(this.info.artworkSquareSize),
|
||
artworkName: this.info.artworkName,
|
||
artworkImage:this.fileList1?.[0]?.url,
|
||
artworkNum:this.info.artworkNum,
|
||
artistName: this.info.artistName
|
||
}
|
||
const res = await postDataByParams('/api/warehouse/fdd/contract/h5',data)
|
||
if (res.code===200){
|
||
uni.setStorageSync("jumpUrl", res.data.jumpUrl)
|
||
this.info.artworkImg=this.fileList1[0].url
|
||
uni.setStorageSync("orderingInfo", {
|
||
cycleID:this.cycleId,
|
||
warehouseID:this.warehouseID,
|
||
transactionId:res.data.transactionId,
|
||
dayMoney:this.dayMoney,
|
||
info:this.info,
|
||
expectedPayment:this.expectedPayment,
|
||
addressName:this.addressList.find(x=>x.ID===this.warehouseID).address,
|
||
cycleName:this.cycleList.find(x=>x.ID===this.cycleId).name
|
||
})
|
||
uni.navigateTo({
|
||
url: `/pages/signwebview/index`,
|
||
});
|
||
this.loading=false
|
||
}
|
||
|
||
},
|
||
async obtainAmount(){
|
||
uni.setStorageSync("endAt", this.value1);
|
||
const data={
|
||
artworkSquareSize:Number(this.info.artworkSquareSize),
|
||
endAt:this.value1
|
||
}
|
||
const res = await postDataByParams('/api/warehouse/calculate',data)
|
||
if (res.code===200){
|
||
this.expectedPayment=res.data.money
|
||
this.dayMoney=res.data.dayMoney
|
||
}
|
||
},
|
||
confirmCycle() {
|
||
this.show_1 = false
|
||
},
|
||
confirmAddress() {
|
||
this.show_2 = false
|
||
},
|
||
selectAddress(item) {
|
||
this.warehouseID = item.ID
|
||
},
|
||
selectionPeriod(item) {
|
||
this.cycleId = item.ID
|
||
},
|
||
async getCycle() {
|
||
const res = await postDataByParams('/api/warehouse/cycle')
|
||
if (res.code === 200) {
|
||
this.cycleList = res.data.data
|
||
}
|
||
},
|
||
async getAddress() {
|
||
const res = await postDataByParams('/api/warehouse/address')
|
||
if (res.code === 200) {
|
||
this.addressList = res.data.data
|
||
}
|
||
},
|
||
async getDetailUrl() {
|
||
const data = {
|
||
url: this.url
|
||
}
|
||
const res = await postDataByParams('/api/warehouse/ocr', data)
|
||
if (res.code === 200) {
|
||
this.info = res.data
|
||
this.fileList1=[{url:this.info.artworkImg}]
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
console.log(res, 'getDetailUrl')
|
||
},
|
||
isDateFont(item, num) {
|
||
if (Array.isArray && this.data.length === 3) {
|
||
return this.data[num] === item
|
||
}
|
||
},
|
||
changeData(e) {
|
||
this.data = [e.detail.value[0] + 1990, e.detail.value[1] + 1, e.detail.value[2] + 1]
|
||
},
|
||
back() {
|
||
uni.navigateBack({delta: 2})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.fontDate {
|
||
color: #fff;
|
||
}
|
||
|
||
/deep/ .pickerSelected {
|
||
color: #ffffff !important;
|
||
z-index: 2;
|
||
}
|
||
|
||
/deep/ .test {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: -1;
|
||
background: #A9D897;
|
||
color: #fff;
|
||
height: 62rpx;
|
||
}
|
||
|
||
uni-picker-view {
|
||
display: block;
|
||
}
|
||
|
||
uni-picker-view .uni-picker-view-wrapper {
|
||
display: flex;
|
||
position: relative;
|
||
overflow: hidden;
|
||
height: 100%;
|
||
background-color: white;
|
||
}
|
||
|
||
uni-picker-view[hidden] {
|
||
display: none;
|
||
}
|
||
|
||
picker-view {
|
||
width: 100%;
|
||
// height: 600upx;
|
||
height: 400rpx;
|
||
margin-top: 20 upx;
|
||
}
|
||
|
||
.item {
|
||
line-height: 100 upx;
|
||
text-align: center;
|
||
}
|
||
|
||
.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;
|
||
|
||
& > .content5 {
|
||
|
||
align-items: center;
|
||
left: 0;
|
||
background: #fff;
|
||
width: 750rpx;
|
||
position: fixed;
|
||
bottom: 0;
|
||
height: 172rpx;
|
||
display: flex;
|
||
|
||
.wrap2 {
|
||
border-radius: 40rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 392rpx;
|
||
height: 56rpx;
|
||
color: #fff;
|
||
font-size: 32rpx;
|
||
background: #76C458;
|
||
}
|
||
|
||
.wrap1 {
|
||
margin-left: 58rpx;
|
||
margin-right: 70rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: start;
|
||
|
||
.wrap1_1 {
|
||
color: #939393;
|
||
font-size: 16rpx;
|
||
}
|
||
|
||
.wrap1_2 {
|
||
font-size: 32rpx;
|
||
color: #76C458;
|
||
}
|
||
}
|
||
}
|
||
|
||
.poup1 {
|
||
padding-top: 28rpx;
|
||
padding-left: 30rpx;
|
||
padding-right: 30rpx;
|
||
margin-bottom: 72rpx;
|
||
|
||
& > .content6 {
|
||
margin-top: 26rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
.wrap1 {
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
width: 436rpx;
|
||
height: 60rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: #76C458;
|
||
border-radius: 30rpx;
|
||
}
|
||
}
|
||
|
||
& > .content3 {
|
||
margin-bottom: 70rpx;
|
||
|
||
.wrap1 {
|
||
margin-bottom: 18rpx;
|
||
border-radius: 32rpx;
|
||
height: 80rpx;
|
||
box-sizing: border-box;
|
||
border: 2px solid #76C458;
|
||
padding-left: 44rpx;
|
||
padding-right: 42rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.wrap1_2 {
|
||
color: #76C458;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.wrap1_1 {
|
||
font-size: 28rpx;
|
||
color: #000;
|
||
}
|
||
|
||
&.disabled {
|
||
border: none;
|
||
background: #D8D8D8;
|
||
|
||
.wrap1_1 {
|
||
color: #626262;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.wrap1_2 {
|
||
color: #626262;
|
||
font-size: 16rpx;
|
||
}
|
||
}
|
||
|
||
&.active {
|
||
background: #76C458;
|
||
|
||
.wrap1_2 {
|
||
color: #fff;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.wrap1_1 {
|
||
font-size: 28rpx;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
& > .content1 {
|
||
margin-bottom: 36rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.wrap1 {
|
||
color: #000;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.wrap2 {
|
||
image {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
& > .content2 {
|
||
margin-bottom: 36rpx;
|
||
height: 1rpx;
|
||
background: #626262;
|
||
}
|
||
}
|
||
|
||
.poup {
|
||
margin-bottom: 72rpx;
|
||
padding-top: 28rpx;
|
||
padding-left: 30rpx;
|
||
padding-right: 30rpx;
|
||
&> .content7{
|
||
|
||
}
|
||
& > .content3 {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.wrap4 {
|
||
margin-bottom: 40rpx;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
|
||
& > .content6 {
|
||
margin-top: 26rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
.wrap1 {
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
width: 436rpx;
|
||
height: 60rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: #76C458;
|
||
border-radius: 30rpx;
|
||
}
|
||
}
|
||
|
||
& > .content5 {
|
||
margin-top: 36rpx;
|
||
height: 66rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom: 1rpx solid #BABABA;
|
||
border-top: 1rpx solid #BABABA;
|
||
|
||
.wrap1 {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-grow: 1;
|
||
color: #4E964D;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.wrap2 {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-grow: 1;
|
||
color: #4E964D;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.wrap3 {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-grow: 1;
|
||
color: #4E964D;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
|
||
& > .content4 {
|
||
font-size: 32rpx;
|
||
color: #000;
|
||
}
|
||
|
||
& > .content2 {
|
||
margin-bottom: 36rpx;
|
||
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>
|