<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: '' } }, 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){ 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}`, }); }}) } } }, 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>