<template> <div class="order-details"> <title-block class="titile-d" :title="type === 'detail' ? '详情' : '确认订单'" > <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="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"> 共计{{ listPaintings.length }}幅画作 </div> </div> </div> </div> <scroll-view class="content-center" :style="{ marginTop: `${contentListHeight + 10}px`, marginBottom: type === 'detail' ? '30rpx' : '180rpx' }" @scroll="scrollDetail" :scroll-into-view="scrollId" scroll-y="true" > <div class="content-scroll" v-for="(item, index) of listPaintings" :id="`item-${index}`" > <div class="painting-name" v-if="listPaintings.length > 1"> <div class="wrap1">画作{{ index + 1 }}:</div> <div class="wrap2" style="display: none" @click="itemDelete" > 删除 </div> </div> <div class="content2"> <u-upload :fileList="listPaintings[index].fileList1" @afterRead=" (e) => { afterRead(e, index) } " @delete=" (e) => { deletePic(e, index) } " 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> <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" disabled v-model="listPaintings[index].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" disabled v-model="listPaintings[index].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" disabled v-model="listPaintings[index].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" disabled v-model=" listPaintings[index].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"> <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[index].warehouseID ? addressList.find( (x) => x.ID === listPaintings[index] .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"> <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[index].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> </scroll-view> <div class="content5" v-if="type !== 'detail'"> <div class="wrap4" v-show="isExpand1" :style="{ top: `-${152 * listPaintings.length}rpx` }" > <div class="item" v-for="(item, index) in listPaintings"> <div class="item_1">{{ index + 1 }}</div> <div class="item_2">{{ item.artworkNum }}</div> <div class="item_3">{{ item.artworkName }}</div> <div class="item_4">¥ {{ item.expectedPayment }}</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">预计 ¥{{ totalMoney || '0' }}</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"> <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="[ 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> <!-- <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="listPaintings[currentIndex].endAt" ></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>--> <u-picker :show="show_1" ref="uPicker" :columns="columns" @confirm="confirmDate" @close="show_1 = false" @change="changeHandler" ></u-picker> <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' import { type } from '../../uni_modules/uni-forms/components/uni-forms/utils' 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 { itemHeight: 0, scrollId: 'item-0', columns: [[180], ['*'], [1, 2, 3, 4, 5], ['='], [180]], currentIndex: 0, listPaintings: [ { expectedPayment: '', fileList1: [], artworkNum: '', artworkName: '', artistName: '', artworkSquareSize: '', warehouseID: '', endAt: '' } ], contentListHeight: 0, isExpand: false, isExpand1: false, listHeight: 308, minDate: '', type: '', 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: '', status: 0 } }, computed: { totalMoney() { return this.listPaintings.reduce((total, item) => { return total + Number(item.expectedPayment) }, 0) }, currentArtworkSquareSize() { if ( this.currentIndex >= 0 && this.currentIndex < this.listPaintings.length ) { return this.listPaintings[this.currentIndex].artworkSquareSize } return null }, currentEndAt() { if ( this.currentIndex >= 0 && this.currentIndex < this.listPaintings.length ) { return this.listPaintings[this.currentIndex].endAt } return null } }, watch: { currentArtworkSquareSize(newValue, oldValue) { if (newValue !== oldValue) { this.obtainAmount() } }, currentEndAt(newValue, oldValue) { console.log(newValue, oldValue) if (newValue !== oldValue) { this.obtainAmount() } } }, onLoad(load) { if (load.url) { this.url = load.url this.getDetailUrl() } if (load.type === 'detail') { this.getData() this.type = load.type } if (load.type === 'scan') { this.listPaintings = uni.getStorageSync('scanlist')?.map((x) => { return { ...x, expectedPayment: '', warehouseID: '', fileList1: [{ url: x.artworkImg }] } }) } this.listPaintings = uni.getStorageSync('orderingInfo').listPaintings }, mounted() { this.getCycle() if (this.$mp.query.url) { this.url = this.$mp.query.url this.getDetailUrl() } this.getAddress() this.$nextTick(async () => { this.itemHeight = await this.getElementHeight('.content-scroll') this.getheight() }) }, methods: { getElementHeight(selector) { return new Promise((resolve, reject) => { const query = uni.createSelectorQuery() query .select(selector) .boundingClientRect((data) => { if (data) { resolve(data.height) // 成功获取高度时,通过 Promise 返回 } else { reject(new Error('无法获取元素高度')) // 如果找不到元素或获取高度失败时,通过 Promise 返回错误 } }) .exec() }) }, async scrollDetail(event) { const scrollTop = event.detail.scrollTop // 获取当前滚动位置 const totalHeight = this.listPaintings.length * this.itemHeight const scrollPercent = (scrollTop / totalHeight) * 100 const index = Math.floor(scrollTop / this.itemHeight) // 计算索引 /* console.log(`滚动了 ${scrollPercent}%`); console.log(`滚动到了第 ${index} 个元素的位置`);*/ this.currentIndex = index }, async getData() { const data1 = { ID: Number(this.$mp.query.ID) } const res1 = await postDataByParams( '/api/v2/warehouse/detail', data1 ) if (res1.code === 200) { this.info = res1.data } }, changeHandler(e) { const { columnIndex, value, values, index, picker = this.$refs.uPicker } = e if (columnIndex === 2) { picker.setColumnValues(this.columns.length - 1, [ this.columns[2][e.index] * this.columns[0][0] ]) } }, 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.scrollId = `item-${index}` this.currentIndex = index }, addPainting() { this.listPaintings.push({ expectedPayment: '', fileList1: [], artworkNum: '', artworkName: '', artistName: '', artworkSquareSize: '', warehouseID: this.listPaintings[0].warehouseID, endAt: this.listPaintings[0].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() 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.listPaintings[this.currentIndex].endAt = data.value[data.value.length - 1] this.obtainAmount() this.show_1 = false }, openShow1() { if (!this.listPaintings[this.currentIndex].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) => { const { path } = JSON.parse(res.data).data resolve(path) } }) }) }, deletePic() { this.fileList1 = [] }, // 新增图片 async afterRead(event, index) { // 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式 let lists = [].concat(event.file) let fileListLen = this.listPaintings[index].fileList1.length lists.map((item) => { this.listPaintings[index].fileList1.push({ ...item, status: 'uploading', message: '上传中' }) }) for (let i = 0; i < lists.length; i++) { const result = await this.uploadFilePromise( lists[i].url, 'check' ) let item = this.listPaintings[index].fileList1[fileListLen] this.listPaintings[index].fileList1.splice( fileListLen, 1, Object.assign(item, { status: 'success', message: '', url: result }) ) fileListLen++ } }, async signContract() { this.loading = true const data1 = { batchId: uni.getStorageSync('orderingInfo').transactionId } const res1 = await postDataByParams( '/api/v2/warehouse/create', data1 ) if (res1.code === 200) { uni.login({ provider: 'weixin', success: async ({ code }) => { const res3 = await this.$api.login.getOpenId({ code }) if (res3.code === 200) { const res2 = await postDataByParams( '/api/v2/warehouse/paid', { ID: res1.data.ID } ) if (res2.code === 200) { uni.requestPayment({ ...res2.data, fail: (res) => { this.loading = false }, success: () => { this.loading = false uni.navigateTo({ url: `/pages/paySuccess/paySuccess?ID=${res1.data.ID}` }) } }) } else { this.loading = false this.$common.msgToast(res2.msg) } } else { this.$common.msgToast(res3.msg) } } }) } }, async obtainAmount() { uni.setStorageSync( 'endAt', new Date( Date.now() + this.listPaintings[this.currentIndex].endAt * 86400000 ) ?.toISOString() ?.slice(0, 10) ) const data = { orders: [ { artworkSquareSize: Number( this.listPaintings[this.currentIndex] .artworkSquareSize ), endAt: new Date( Date.now() + this.listPaintings[this.currentIndex].endAt * 86400000 ) ?.toISOString() ?.slice(0, 10) } ] } const res = await postDataByParams( '/api/v2/warehouse/calculate', data ) if (res.code === 200) { this.listPaintings[this.currentIndex].expectedPayment = res.data.orders?.[0]?.money } }, confirmCycle() { this.show_1 = false }, confirmAddress() { this.show_2 = false }, selectAddress(item) { this.listPaintings[this.currentIndex].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' }) } }, 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() { if (this.type === 'detail') { uni.switchTab({ url: '/pages/home/index' }) } else { 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; 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; 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; width: 750rpx; position: fixed; 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; justify-content: center; align-items: center; width: 392rpx; height: 56rpx; color: #fff; font-size: 32rpx; background: #76c458; } .wrap1 { margin-left: 18rpx; 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; } } } } .content-center { overflow-y: scroll; .content-scroll { .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); } } & > .content4 { margin-bottom: 24rpx; 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 { display: flex; justify-content: center; image { width: 404rpx; height: 306rpx; } } & > .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); } } } } } } </style>