cbz/page_index/pages/repair/repair.vue

<template>
	<view class="content">
		<u-navbar title=" " @leftClick="leftClick" :placeholder="true" :autoBack="true">
			<view slot="center" class="hflex nav">
				<view class="nav_item" :class="nav_index == 1 ? 'nav_active' : ''" @click="changeNav(nav_index)">维修单</view>
				<view class="nav_item" :class="nav_index == 2 ? 'nav_active' : ''" @click="changeNav(nav_index)">维修工</view>
			</view>
		</u-navbar>
		<view  v-if="nav_index == 1">
			<view class="top">
				<view class="top_title">快修订单</view>
				<view class="vflex dm_box">
					<block v-if="domWidth == 0">
						<view class="hflex dm_scroll" id="dm1" :style="'--dom-width:' + domWidth + ';' ">
							<view class="hflex acenter dm1">
								<block v-for="(item,index) in bullet_chat" :key="index">
									<view class="hflex acenter dm" @click="orderDetail(item.id)">
										<image :src="item.user.headimg" mode="aspectFill" class="dm_img"></image>
										<view class="dm_text hflex text_hide">{{item.describe}}</view>
									</view>
								</block>
							</view>
						</view>
					</block>
					<block v-else>
						<view class="hflex dm_scroll"  id="dm1" :style="'--dom-width:' + domWidth + ';' ">
							<view class="hflex acenter dm1">
								<block v-for="(item,index) in bullet_chat" :key="index">
									<view class="hflex acenter dm" @click="orderDetail(item.id)">
										<image :src="item.user.headimg" mode="aspectFill" class="dm_img"></image>
										<view class="dm_text hflex text_hide">{{item.describe}}</view>
									</view>
								</block>
							</view>
							<view class="hflex acenter ">
								<block v-for="(item,index) in bullet_chat" :key="index">
									<view class="hflex acenter dm" @click="orderDetail(item.id)">
										<image :src="item.user.headimg" mode="aspectFill" class="dm_img"></image>
										<view class="dm_text hflex text_hide">{{item.describe}}</view>
									</view>
								</block>
							</view>
						</view>
					</block>
					
					<block v-if="domWidth == 0">
						<view class="hflex dm_scroll" :style="'--dom-width:' + domWidth + ';' ">
							<view class="hflex acenter dm1">
								<block v-for="(item,index) in bullet_chat" :key="index">
									<view class="hflex acenter dm" @click="orderDetail(item.id)">
										<image :src="item.user.headimg" mode="aspectFill" class="dm_img"></image>
										<view class="dm_text hflex text_hide">{{item.describe}}</view>
									</view>
								</block>
							</view>
						</view>
					</block>
					<block v-else>
						<view class="hflex dm_scroll1" :style="'--dom-width:' + domWidth + ';' ">
							<view class="hflex acenter dm1">
								<block v-for="(item,index) in bullet_chat" :key="index">
									<view class="hflex acenter dm" @click="orderDetail(item.id)">
										<image :src="item.user.headimg" mode="aspectFill" class="dm_img"></image>
										<view class="dm_text hflex text_hide">{{item.describe}}</view>
									</view>
								</block>
							</view>
							<view class="hflex acenter ">
								<block v-for="(item,index) in bullet_chat" :key="index">
									<view class="hflex acenter dm" @click="orderDetail(item.id)">
										<image :src="item.user.headimg" mode="aspectFill" class="dm_img"></image>
										<view class="dm_text hflex text_hide">{{item.describe}}</view>
									</view>
								</block>
							</view>
						</view>
					</block>
				</view>
				
			</view>
			<view class="box">
				<view class="hflex acenter jbetween">
					<block v-for="(item,index) in tabs" :key="index">
						<view class="tabs_item" @click="changeTab(item.index)" :class="tabs_active == item.index?'tabs_active':''">{{item.name}}</view>
					</block>
				</view>
				<view class="list">
					<block v-for="(item,index) in pageList" :key="index">
						<view class="list_item" @tap.stop="orderDetail(item.id)">
							<view class="item_top hflex acenter jbetween">
								<view class="hflex acenter" v-if="item.quick == 1">
									<image src="https://ship-expert.zhousi.hdlkeji.com/common/repair1.png" class="top_img"></image>
									<view class="top_text">普修</view>
								</view>
								<view class="hflex acenter" v-if="item.quick == 2">
									<image src="https://ship-expert.zhousi.hdlkeji.com/common/repair2.png" class="top_img"></image>
									<view class="">快修</view>
								</view>
								<view class="top_btn" @click.stop="meetOrder(item.id,index)" v-if="item.status == 1">接单</view>
								<view class="top_btn top_btn1" @click.stop="seeOffer(item.id,index)" v-if="item.status == 2">已接单</view>
							</view>
							<view class="item_name cell text_hide">{{item.describe}}</view>
							<view class="hflex acenter cell">
								<u-icon name="map-fill" color="#888888" size="14"></u-icon>
								<view class="text_style1" style="padding-left: 16rpx;">{{item.area}} {{item.address}}</view>
							</view>
							<view class="hflex acenter cell">
								<u-icon name="clock-fill" color="#888888" size="14"></u-icon>
								<view class="text_style1" style="padding-left: 16rpx;">维修时间：{{item.start_time}}至{{item.end_time}}</view>
							</view>
							<view class="img_list cell" v-if="item.imgs.length > 1">
								<block v-for="(item2,index2) in item.imgs" :key="index2">
									<image :src="item2" mode="aspectFill" class="item_img" @tap.stop="perview(item.imgs)"></image>
								</block>
							</view>
							<view class="img_list cell" v-if="item.imgs.length == 1">
								<block v-for="(item2,index2) in item.imgs" :key="index2">
									<image :src="item2" mode="aspectFill" class="item_img2" @tap.stop="perview(item.imgs)"></image>
								</block>
							</view>
							<view class="item_bottom hflex acenter jbetween">
								<view class="hflex acenter">
									<image :src="item.user.headimg" class="bottom_img"></image>
									<view class="bottom_text text_hide" style="padding-left: 8rpx;">{{item.user.nickname}}</view>
								</view>
								<view class="bottom_text">发布于{{item.create_at}}</view>
							</view>
						</view>
					</block>
				</view>
			</view>
			
		</view>
		<view class="" v-if="nav_index == 2">
			<view class="search">
				<u-input v-model="serach_value" type="text" :border="true" placeholder="输入搜索关键词" shape="circle"
					prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" @confirm="search">
					<template slot="suffix">
						<view @click="search">搜索</view>
					</template>
				</u-input>
			</view>
			<block v-for="(item,index) in pageList2" :key="index">
				<view class="box1 hflex" @click="toDetail2(item.id)">
					<image :src="item.user.headimg" mode="aspectFill" class="item_avatar"></image>
					<view class="vflex" style="padding-left: 20rpx;">
						<view class="hflex aend">
							<view class="item_name">{{item.name}}</view>
							<view class="text_style1"style="padding-left: 8rpx;">{{item.phone}}</view>
						</view>
						<view class="hflex acenter cell">
							<image src="https://ship-expert.zhousi.hdlkeji.com/common/company.png" class="item_icon"></image>
							<view class="text_style1" style="padding-left: 16rpx;">{{item.company_name}}</view>
						</view>
						<view class="hflex astart cell">
							<u-icon name="map-fill" color="#b8b8b8" size="14"></u-icon>
							<view class="text_style1" style="padding-left: 16rpx;">{{item.city}} {{item.area}}</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<view class="add" v-show="!repair_show">
			<image src="https://ship-expert.zhousi.hdlkeji.com/common/add.png" @click="openRelease" class="add_img"></image>
		</view>
		<view class="add2" v-show="repair_show">
			<view class="add vflex aend">
				<view class="hflex acenter jcenter release_box" @click="receivingOrder">
					<image src="https://ship-expert.zhousi.hdlkeji.com/common/repair_icon1.png" class="box_img"></image>
					<view class="box_text">维修工发布接单需求</view>
				</view>
				<view class="hflex acenter jcenter release_box" @click="repairOrder">
					<image src="https://ship-expert.zhousi.hdlkeji.com/common/repair_icon2.png" class="box_img"></image>
					<view class="box_text">船老板发布维修订单</view>
				</view>
				<image src="https://ship-expert.zhousi.hdlkeji.com/common/close.png" @click="close" class="add_img"></image>
			</view>
		</view>
		<u-modal :show="show_tips" :closeOnClickOverlay="true" :showConfirmButton="false">
			<view class="popup1">
				<image src="https://ship-expert.zhousi.hdlkeji.com/common/small-bell.png" class="popup_img"></image>
				<view class="popup1_title">温馨提示</view>
				<view class="popup1_text">您还不是维修工，不能参与报价，可立即申请成为维修工</view>
				<view class="popup1_btn" @click="toApply">立即申请</view>
				<view class="popup1_text" style="margin: 36rpx 0 0;" @click="close">暂不</view>
			</view>
		</u-modal>
		<u-popup :show="show_offer" mode="center" :round="10" :closeable="true" :safeAreaInsetBottom="false" @close="close">
			<view class="popup">
				<view class="popup_title">立即报价</view>
				<view class="input_bg hflex acenter">
					<view class="price">￥</view>
					<u-input v-model="offer" placeholder="填写你的报价" border="none"></u-input>
				</view>
				<view class="hflex acenter">
					<image src="https://ship-expert.zhousi.hdlkeji.com/common/icon_tips.png" style="width: 24rpx;height: 24rpx;padding-right: 6rpx"></image>
					<view class="popup_info">报价可先不填，可等评估后再填写</view>
				</view>
				<view class="hflex acenter" style="padding:30rpx 0 20rpx;">
					<view class="price">上传图片及资质证明图</view>
				</view>
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="9"></u-upload>
				<view class="popup_btn" @click="submit">提交</view>
			</view>
		</u-popup>
		<u-popup :show="see_offer" mode="center" :round="10" :closeable="true" :safeAreaInsetBottom="false" @close="close">
			<view class="popup" v-if="info">
				<view class="popup_title">报价信息</view>
				<view class="popup_name">当前报价</view>
				<view class="">
					<block v-for="(item,index) in info.list" :key="index">
						<view class="hflex acenter input_bg">
							<view class="popup_text">第{{index + 1}}次报价</view>
							<view class="red">{{item.price == 0 ? '暂无报价' : item.price}}</view>
						</view>
					</block>
				</view>
				<!-- <view class="hflex acenter input_bg" v-if="info.list.length >= 2">
					<view class="popup_text">第二次报价</view>
					<view class="red">{{info.list[1].price}}</view>
				</view>
				<view class="hflex acenter input_bg" v-if="info.list.length >= 3">
					<view class="popup_text">第三次报价</view>
					<view class="red">{{info.list[2].price}}</view>
				</view> -->
				<view class="popup_name">图片及资质证明图片</view>
				<view>
					<block v-for="(item,index) in info.imgs" :key="index">
						<image :src="item" mode="aspectFill" style="width: 188rpx;height: 188rpx;margin: 0 14rpx 20rpx 0;border-radius: 16rpx;"></image>
					</block>
				</view>
				<view class="popup_btn" @click="tooffer()">查看详情</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				nav_index: 1,
				domWidth: 0,
				bullet_chat: [
				],
				tabs: [
					{
						index: 0,
						name: '全部'
					},
					{
						index: 1,
						name: '快修'
					},
					{
						index: 2,
						name: '普修'
					}
				],
				tabs_active: 0,
				pageList: [],
				page: 1,
				limit: 15,
				total: 1,
				temp: '',
				repair_show: false,
				serach_value: '',
				pageList2: [
				],
				maintenance: false,
				show_tips: false,
				show_offer: false,
				offer: '',
				fileList1: [],
				imgs: '',
				id: '',
				info: {},
				see_offer: false,
				index: ''
			}
		},
		onLoad() {
			that = this
			that.maintenance = uni.getStorageSync('maintenance')
		},
		onShow() {
			var token = uni.getStorageSync('token')
			if(!token) {
				$api.info('请先登录')
				setTimeout(() =>{
					$api.jump('/pages/login/code_login')
				}, 1000)
			}
			that.getchatList()
			that.getList()
			that.getList2()
		},
		mounted() {
			
			
		},
		methods: {
			// 返回
			leftClick() {
				console.log('返回');
				$api.jump(-1)
			},
			getWidth() {
				const query = uni.createSelectorQuery().in(this);
				query.select('#dm1').boundingClientRect(data => {
					console.log("data: ",data);
				  that.domWidth = `-${data.width}px`
				  that.temp = `${that.domWidth};`
				  console.log("temp:",that.temp);
				}).exec();
			},
			getchatList() {
				$api.req({
					url: '/data/api.auth.ShipEngineMaintenance/quicklist',
					method: 'POST'
				}, function(res) {
					if(res.code == 1) {
						console.log(res);
						that.bullet_chat = res.data
						setTimeout(() => {
							that.getWidth()
						}, 500)
					}
				})
			},
			getList() {
				$api.req({
					url: '/data/api.auth.ShipEngineMaintenance/repairlist',
					method: 'POST',
					data: {
						type: that.tabs_active + 1,
						page: that.page
					}
				}, function(res) {
					if(res.code == 1) {
						console.log(res);
						if(that.page !== 1) {
							that.pageList = that.pageList.concat(res.data.data)
						} else {
							that.pageList = res.data.data
						}
						that.total = res.data.total
						that.limit = res.data.per_page
					}
				})
			},
			getList2() {
				$api.req({
					url: '/data/api.auth.ShipEngineMaintenance/acceptancelist',
					method: "POST",
					data: {
						keyword: that.serach_value,
						page: that.page
					}
				}, function(res) {
					if(res.code == 1) {
						if(that.page !== 1) {
							that.pageList2 = that.pageList2.concat(res.data.data)
						} else {
							that.pageList2 = res.data.data
						}
						that.total = res.data.total
						that.limit = res.data.per_page
					}
				})
			},
			// 切换导航栏
			changeNav(index) {
				if (index == 1) {
					that.nav_index = 2
					that.getList2()
				} else {
					that.nav_index = 1
					that.getList()
				}
				that.page = 1
			},
			// 切换tabs
			changeTab(index) {
				that.tabs_active = index
				that.page = 1
				that.getList()
			},
			// 点击加号
			openRelease() {
				that.repair_show = true
			},
			// 关闭
			close() {
				that.repair_show = false
				that.show_tips = false
				that.show_offer = false
				that.see_offer = false
			},
			perview(list) {
				uni.previewImage({
					urls: list
				})
			},
			// 发布接单需求
			receivingOrder() {
				if(that.maintenance) {
					$api.jump('/page_index/pages/repair/receivingOrder')
					that.close()
				} else {
					that.show_tips = true
				}
				
			},
			// 去申请
			toApply() {
				that.close()
				$api.jump('/page_shop/pages/service/applyMaintenance')
			},
			// 发布维修订单
			repairOrder() {
				$api.jump('/page_index/pages/repair/repairOrder')
				that.close()
			},
			// 接单
			meetOrder(id,index) {
				that.index = index
				if(that.maintenance) {
					that.show_offer = true
					that.id = id
				} else {
					that.show_tips = true
				}
				// that.show_tips = true
				// that.show_offer = true
				// that.id = id
			},
			seeOffer(id,index) {
				that.index = index
				if(!that.maintenance) {
					that.show_tips = true
					return
				}
				$api.req({
					url: '/data/api.auth.ShipEngineMaintenance/offerinfo',
					method: 'POST',
					data: {
						id: id
					}
				}, function(res) {
					if(res.code == 1) {
						that.see_offer = true
						that.id = id
						that.info = res.data
					}
				})
			},
			tooffer() {
				$api.jump('/page_shop/pages/order/offer2?id=' + that.id + '&status=' + that.pageList[that.index].status)
				that.close()
			},
			submit() {
				$api.req({
					url: '/data/api.auth.ShipEngineMaintenance/repairoffer',
					method: 'POST',
					data: {
						id: that.id,
						price: that.offer,
						imgs: that.imgs
					}
				}, function(res) {
					if(res.code == 1) {
						$api.info(res.info)
						that.close()
						that.offer = ''
						that.imgs = ''
						that.fileList1 = []
						that.page = 1
						that.getList()
					}
				})
			},
			// 订单详情
			orderDetail(id) {
				$api.jump('/page_index/pages/repair/orderDetail?id=' + id)
			},
			// 维修工详情
			toDetail2(id) {
				$api.jump('/page_index/pages/repair/repairDetail?id=' + id)
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				uni.showLoading({
					title: '上传中',
					mask: true
				})
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result.url
					}))
					fileListLen++
					if(lists.length - 1 == i) {
						uni.hideLoading()
					}
				}
				if(that[`fileList${event.name}`].length > 0) {
					for(var i=0;i<that[`fileList${event.name}`].length;i++) {
						if(i == that[`fileList${event.name}`].length -1) {
							that.imgs += that[`fileList${event.name}`][i].url
						} else {
							that.imgs += that[`fileList${event.name}`][i].url + ','
						}
					}
				}
			},
			// 上传图片
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: $api.config.baseUrl + '/data/api.auth.Center/upload',  
						filePath: url,
						name: 'file',
						header: {
							'content-type': 'application/x-www-form-urlencoded',
							'api-token': uni.getStorageSync('token').token?uni.getStorageSync('token').token:'',
							'api-name': 'wxapp'
						},
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								var data = JSON.parse(res.data)
								resolve(data.data)
							}, 1000)
						}
					});
				})
			},
			search() {
				console.log(that.serach_value);
				that.page = 1
				that.pageList2 = []
				that.getList2()
			},
			onReachBottom() {
				console.log("到底了");
				if (that.page * that.limit >= that.total) {
					$api("没有更多了")
				} else {
					this.page++
					if(that.nav_index = 1) {
						that.getList()
					} else {
						that.getList2()
					}
				}
				
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content::v-deep {
		background: #F4F4F4;
		.nav {
			width: 350rpx;
			height: 60rpx;
			background: #F4F4F4;
			border-radius: 30rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #020202;
			.nav_item {
				width: 50%;
				height: 60rpx;
				background: #F4F4F4;
				border-radius: 15px;
				text-align: center;
				line-height: 60rpx;
			}
			.nav_active {
				background: #506DFF;
				color: #FFFFFF;
			}
		}
		.top {
			width: 100%;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 20rpx 0 0;
			.top_title {
				width: 100%;
				padding-left: 20rpx;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #F4F4F4;
				font-size: 26rpx;
				font-weight: 400;
				color: #222222;
				position: relative;
			}
			.top_title::before {
				content: '';
				width: 8rpx;
				height: 28rpx;
				background: #506DFF;
				position: absolute;
				left: 0;
				top: 5rpx;
			}
			.dm_box {
				width: 100%;
				height: 162rpx;
				overflow: hidden;
				position: relative;
				
				.dm {
					width: auto;
					height: 48rpx;
					background: #E7EBFF;
					border-radius: 36rpx;
					margin: 0 17rpx;
					padding: 0 20rpx 0 0;
					
					.dm_img {
						width: 44rpx;
						height: 44rpx;
						border-radius: 50%;
						flex: none;
					}
					.dm_text {
						max-width: 350rpx;
						margin-left: 12rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #222222;
						white-space: nowrap;
					}
					
				}
			}
		}
		.box {
			margin-top: 20rpx;
			width: 100%;
			box-sizing: border-box;
			background: linear-gradient(180deg, #FFFFFF 0%, #F4F4F4 100%);
			padding: 20rpx 30rpx 88rpx;
			.tabs_item {
				width: 33%;
				font-size: 32rpx;
				font-weight: 400;
				color: #666666;
				text-align: center;
			}
			.tabs_active {
				position: relative;
				font-weight: 500;
				color: #222222;
			}
			.tabs_active::after{
				content: "";
				position: absolute;
				width: 64rpx;
				height: 12rpx;
				background: linear-gradient(270deg, #F9F9F9 0%, #506DFF 100%);
				border-radius: 6rpx;
				opacity: 0.8;
				bottom: 0;
				left: 38%;
			}
			.list {
				.list_item {
					margin-top: 20rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					box-sizing: border-box;
					padding: 20rpx;
					.item_top {
						padding: 0 0 12rpx;
						border-bottom: 1rpx solid #F4F4F4;
						.top_img {
							width: 40rpx;
							height: 40rpx;
							margin-right: 8rpx;
						}
						.top_text {
							font-size: 28rpx;
							font-weight: 500;
							color: #222222;
						}
						.top_btn {
							text-align: center;
							width: 132rpx;
							height: 52rpx;
							line-height: 52rpx;
							background: #506DFF;
							box-shadow: 0px 0px 16rpx 0px rgba(80,109,255,0.42);
							border-radius: 26rpx;
							font-size: 26rpx;
							font-weight: 400;
							color: #FFFFFF;
						}
						.top_btn1 {
							background: rgba(80, 109, 255, .5);
						}
					}
					.item_name {
						font-size: 30rpx;
						font-weight: 500;
						color: #222222;
					}
					.cell {
						padding: 10rpx 0;
					}
					.text_style1 {
						font-size: 26rpx;
						font-weight: 400;
						color: #222222;
					}
					.img_list {
						.item_img {
							width: 210rpx;
							height: 160rpx;
							border-radius: 8rpx;
							margin: 0 8rpx 20rpx 0;
						}
						.item_img2 {
							width: 100%;
							height: 320rpx;
						}
						.item_img:nth-child(3n) {
							margin: 0 0 20rpx;
						}
					}
					.item_bottom {
						width: 100%;
						padding-top: 26rpx;
						border-top: 1rpx solid #F4F4F4;
						.bottom_img {
							width: 40rpx;
							height: 40rpx;
							border-radius: 50%;
						} 
						.bottom_text {
							
							max-width: 300rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #999999;
						}
					}
					
				}
			}
		}
		.add {
			position: fixed;
			right: 30rpx;
			bottom: 186rpx;
			z-index: 99;
			.add_img {
				width: 96rpx;
				height: 96rpx;
			}
		}
		.add2 {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, .3);
			z-index: 99;
			.add {
				position: fixed;
				right: 30rpx;
				bottom: 186rpx;
				.release_box {
					width: 320rpx;
					height: 72rpx;
					opacity: 1;
					background: linear-gradient(270deg, #88A6FF 0%, #506DFF 100%);
					border-radius: 40rpx;
					margin-bottom: 40rpx;
					.box_img {
						width: 32rpx;
						height: 32rpx;
					}
					.box_text {
						font-size: 26rpx;
						font-weight: 400;
						color: #FFFFFF;
						padding-left: 10rpx;
					}
				}
				.add_img {
					width: 72rpx;
					height: 72rpx;
				}
			}
		}
		.search {
			// background: #fff;
			width: 100%;
			height: 88rpx;
			box-sizing: border-box;
			padding: 12rpx 30rpx;
			.u-input {
				background-color: #fff;
				height: 64rpx;
				padding: 0 0 0 18rpx !important;
				border: 1rpx solid #506Dff;
				margin-bottom: 12rpx;
			}
			.u-input__content__subfix-icon {
				width: 128rpx;
				height: 64rpx;
				background-color: #506Dff;
				border-radius: 32rpx;
				color: #fff;
				font-size: 28rpx;
				text-align: center;
				line-height: 64rpx;
			}
		}
		.box1 {
			// width: 100%;
			background: #FFFFFF;
			border-radius: 8px;
			box-sizing: border-box;
			padding: 24rpx 20rpx;
			margin: 20rpx 30rpx;
			.item_avatar {
				width: 84rpx;
				height: 84rpx;
				border-radius: 50%;
			}
			.cell {
				margin-top: 20rpx;
			}
			.item_icon {
				width: 28rpx;
				height: 28rpx;
			}
			.text_style1 {
				font-size: 24rpx;
				font-weight: 400;
				color: #555555;
			}
			.item_name {
				font-size: 30rpx;
				font-weight: 500;
				color: #222222;
			}
		}
		.u-popup__content {
			overflow: unset !important;
		}
		.u-modal__content {
			padding: 0 !important;
		}
		.u-modal {
			width: 530rpx !important;
			background: url('https://ship-expert.zhousi.hdlkeji.com/common/eject.png') no-repeat;
			background-size: 100%;
			overflow: unset !important; 
		}
		.popup1 {
			width: 530rpx;
			// height: 520rpx;
			border-radius: 40rpx;
			position: relative;
			box-sizing: border-box;
			padding: 0 40rpx 40rpx;
			.popup_img {
				width: 174rpx;
				height: 172rpx;
				position: absolute;
				top: -50rpx;
				left: 178rpx;
				z-index: 99;
			}
			.popup1_title {
				margin-top: 134rpx;
				text-align: center;
				font-size: 48rpx;
				font-weight: 400;
				color: #222222;
			}
			
			.popup1_text {
				width: 100%;
				text-align: center;
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
				margin: 44rpx auto 52rpx;
			}
			.popup1_btn {
				margin: 0 auto;
				width: 310rpx;
				height: 84rpx;
				background: linear-gradient(90deg, #506DFF 0%, #88A6FF 100%);
				box-shadow: 0px 4rpx 24rpx 0px rgba(90,119,255,0.36);
				border-radius: 42rpx;
				text-align: center;
				line-height: 84rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
		.popup {
			width: 670rpx;
			background: #FFFFFF;
			border-radius: 10px;
			box-sizing: border-box;
			padding: 36rpx 30rpx 24rpx;
			.popup_title {
				width: 100%;
				text-align: center;
				font-size: 32rpx;
				font-weight: 500;
				color: #222222;
				margin-bottom: 24rpx;
			}
			.popup_name {
				font-size: 26rpx;
				font-weight: 400;
				color: #222222;
				padding: 28rpx 0 20rpx;
			}
			.popup_text {
				font-size: 22rpx;
				font-weight: 500;
				color: #777777;
				padding-right: 60rpx;
			}
			.input_bg {
				background: #F4F4F4;
				border-radius: 8px;
				box-sizing: border-box;
				padding: 16rpx 20rpx;
				margin: 20rpx 0;
				.price {
					font-size: 32rpx;
					font-weight: 500;
					color: #222222;
					padding-right: 20rpx;
				}
				.u-textarea {
					background-color: #F4F4F4 !important;
				}
				.red {
					font-size: 28rpx;
					font-weight: bold;
					color: #FF3636;
				}
			}
			.popup_info {
				font-size: 20rpx;
				font-weight: 400;
				color: #C0C0C0;
				line-height: 28rpx;
			}
			.popup_btn {
				width: 610rpx;
				height: 80rpx;
				background: #506DFF;
				border-radius: 40rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
				text-align: center;
				line-height: 80rpx;
				margin: 20rpx 0;
			}
		}
	}
	.dm_scroll {
		position:absolute;
		top: 24rpx;
		left: 0%;
		animation: rowScrollTest 10s linear infinite;
	}
	.dm_scroll1 {
		position:absolute;
		top: 96rpx;
		left: 0%;
		animation: rowScrollTest 12s linear infinite;
	}
	
	@keyframes rowScrollTest {
		from {
			// left: 100%;
			transform: translateX(1);
		}
		to {
			// left: 0%;
			transform: translateX(var(--dom-width));
		}
		
	}
</style>