delivery_manage_front/src/views/order/historyDelivery/index.vue

<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryRef" v-show="showSearch" label-width="100px">
			<el-row>
				<el-col :span="4">
					<el-form-item label="目的地" prop="destName">
						<el-input v-model="queryParams.destName" placeholder="请输入目的地" clearable
							@keyup.enter="handleQuery" />
					</el-form-item>
				</el-col>
				<el-col :span="5">
					<el-form-item label="配送日期" prop="deliveryDate">
						<el-date-picker clearable v-model="queryParams.deliveryDate" type="date"
							value-format="YYYY-MM-DD" placeholder="请选择配送日期">
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="5">
					<el-form-item label="配送车牌" prop="vehiclePlate">
						<el-input v-model="queryParams.vehiclePlate" placeholder="请输入配送车牌" clearable
							@keyup.enter="handleQuery" />
					</el-form-item>
				</el-col>
				<el-col :span="5">
					<el-form-item label="接收单位" prop="receiverOrgName">
						<el-input v-model="queryParams.receiverOrgName" placeholder="请输入接收单位" clearable
							@keyup.enter="handleQuery" />
					</el-form-item>
				</el-col>
				<el-col :span="5">
					<el-form-item>
						<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
						<el-button icon="Refresh" @click="resetQuery">重置</el-button>
					</el-form-item>
				</el-col>
			</el-row>

		</el-form>

		<el-row :gutter="10" class="mb8">

			<el-col :span="1.5">
				<el-button type="warning" plain icon="Download" @click="handleExport"
					v-hasPermi="['document:order:export']">导出</el-button>
			</el-col>
			<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>

		<el-table v-loading="loading" :data="orderList" @selection-change="handleSelectionChange">
			<!-- <el-table-column type="selection" width="55" align="center" /> -->
			<el-table-column label="配送单号" align="center" prop="orderNo" width="200" />
			<el-table-column label="出库单据号" align="center" prop="billNoCk" width="200" >
				<template #default="scope">
					<span v-if="scope.row.billNoCk">{{ scope.row.billNoCk }}</span>
					<el-tag type="danger" v-else>手动创建</el-tag>
					
				</template>
			</el-table-column>
			<el-table-column label="起始地点名称" align="center" prop="originName" />
			<el-table-column label="目的地点名称" align="center" prop="destName" />
			<el-table-column label="配送日期" align="center" prop="deliveryDate" width="180">
				<template #default="scope">
					<span>{{ parseTime(scope.row.deliveryDate, '{y}-{m}-{d}') }}</span>
				</template>
			</el-table-column>
			<el-table-column label="配送车牌" align="center" prop="plateNo" />
			<!-- <el-table-column label="配送费" align="center" prop="" /> -->
			<el-table-column label="发货人姓名" align="center" prop="shipperName" />

			<el-table-column label="接收人姓名" align="center" prop="receiverName" />
			<el-table-column label="明细数量" align="center" prop="itemCount">
				<template #default="scope">
					<span>{{ scope.row.items.length }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" width="250">
				<template #default="scope">
					<el-button link type="primary" @click="handlePic(scope.row)">现场照片</el-button>
					<el-button link type="primary" @click="handleBill(scope.row)">配送单</el-button>
					<el-button link type="primary" @click="handleHistory(scope.row)">历史轨迹</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize" @pagination="getList" />

		<!-- 添加或修改配送单据主对话框 -->
		<el-dialog title="历史轨迹" v-model="open" :fullscreen="true" append-to-body>

			<div style="position: relative">
				<div style="position: absolute; right: 10px; top: 10px; z-index: 1">
					<el-button @click="silderInput">开始回放</el-button>
					<el-button @click="pauseAnimation">暂停回放</el-button>
					<el-button @click="resumeAnimation">继续回放</el-button>
					<!-- <el-slider v-model="sliderVal" :step="1" @input="sliderChange" @change="silderInput" :max="lineArr.length - 1"
				:min="0"></el-slider> -->
				</div>
				<div style="position: absolute; left: 50px; bottom: 30px;z-index: 1; width: 95%; height: 20px;  "></div>
				<div id="amapcontainer" style="width: 100%; height: 770px"></div>
			</div>
		</el-dialog>
		<el-dialog title="物料明细" v-model="openDetail" append-to-body width="80%">
			<el-table v-loading="detailLoading" :data="wlList">
				<el-table-column label="项目号" align="center" prop="xmNo" width="150" />
				<el-table-column label="项目描述" align="center" prop="xmMs" width="250" />
				<el-table-column label="物料号" align="center" prop="wlNo" width="100" />
				<el-table-column label="物料描述" align="center" prop="wlMs" width="250" />
				<el-table-column label="供应商名称" align="center" prop="gysMc" width="200" />
				<el-table-column label="合同单价" align="center" prop="htDj" />
				<el-table-column label="订单编号" align="center" prop="sapNo" width="150" />
				<el-table-column label="计量单位" align="center" prop="dw" />
				<el-table-column label="实际入库数量" align="center" prop="realQty" width="120" />
				<el-table-column label="库位码" align="center" prop="pcode" width="120" />
				<el-table-column label="托盘码" align="center" prop="trayCode" />
				<el-table-column label="身份码" align="center" prop="entityId" width="200" />
				<el-table-column label="物资类型" align="center" prop="wlTypeName" />
				<el-table-column label="所属仓库" align="center" prop="cangkuName" width="150" />


				<el-table-column label="库龄" align="center" prop="stockAge" />
				<el-table-column label="理货员" align="center" prop="lihuoYName" />

				<el-table-column label="备注" align="center" prop="remark" width="200" />


			</el-table>
		</el-dialog>
		<el-dialog title="配送单" v-model="openBill" append-to-body width="80%">
			<div class="delivery-form">
				<!-- 表格容器 -->
				<table border="1" cellpadding="5" cellspacing="0"
					style="width: 90%; margin: 20px auto; border-collapse: collapse; font-size: 14px;">
					<!-- 标题行 -->
					<tr>
						<td colspan="8" style="text-align: center; font-weight: bold; font-size: 18px;">
							国网唐山供电公司贾庵子仓库货物配送单
						</td>
					</tr>

					<!-- 配送项目名称 & 项目编号 -->
					<tr>
						<td colspan="2">配送项目名称</td>
						<td colspan="3">{{ billData.length > 0 ? billData[0].xmMs : '' }}</td>
						<td style="width: 100px;">项目编号</td>
						<td colspan="2">{{ billData.length > 0 ? billData[0].xmNo : '' }}</td>
					</tr>


					<!-- 配送地址 -->
					<tr>
						<td colspan="2">配送地址</td>
						<td colspan="3">{{ billData.length > 0 ? billData[0].destName : '' }}</td>
						<td style="width: 100px;">配送日期</td>
						<td colspan="2">{{ billData.length > 0 ? billData[0].deliveryDate : '' }}</td>
					</tr>

					<!-- 配送车号 -->
					<tr>
						<td colspan="2">配送车号</td>
						<td colspan="3">{{ billData.length > 0 ? billData[0].plateNo : '' }}</td>
						<td style="width: 100px;">司机签名</td>
						<td colspan="2">
							<el-image style="width: 50px; height: 20px"
								:src="urlFun(billData.length > 0 ? billData[0].attachments : [], 'SIGN_DRIVER')"
								:preview-src-list="urlFun1(billData.length > 0 ? billData[0].attachments : [], 'SIGN_DRIVER')"
								 />
						</td>
					</tr>

					<!-- 接收单位 -->
					<tr>
						<td colspan="2">接收单位</td>
						<td colspan="3">{{ billData.length > 0 ? billData[0].receiverOrgName : '' }}</td>
						<td style="width: 100px;">配送吨数</td>
						<td colspan="2">{{ billData.length > 0 ? billData[0].deliveryTon : '' }}</td>
					</tr>

					<!-- 发货人联系方式 -->
					<tr>
						<td colspan="2">发货人联系方式姓名</td>
						<td colspan="3">{{ billData.length > 0 ? billData[0].shipperName : '' }}/{{ billData.length > 0 ?
							billData[0].shipperPhone : '' }}</td>
						<td style="width: 100px;">制单</td>
						<td colspan="2">{{ billData.length > 0 ? billData[0].makerUserName : '' }}</td>
					</tr>

					<!-- 接收人联系 -->
					<tr>
						<td colspan="2">接收人联系方式姓名</td>
						<td colspan="3">{{ billData.length > 0 ? billData[0].receiverName : '' }}/{{ billData.length > 0 ?
							billData[0].receiverPhone : '' }}</td>
						<td style="width: 100px;">出库复核</td>
						<td colspan="2">
							<el-image style="width: 50px; height: 20px"
								:src="urlFun(billData.length > 0 ? billData[0].attachments : [], 'SIGN_COURIER')"
								:preview-src-list="urlFun1(billData.length > 0 ? billData[0].attachments : [], 'SIGN_COURIER')"
								 />
						</td>
					</tr>

					<!-- 物资明细表 -->
					<tr>
						<td style="width: 50px;">序号</td>
						<td>物料编码</td>
						<td class="wzmc">物资名称</td>
						<td>数量</td>
						<td>单位</td>
						<td style="width: 100px;">订单号</td>
						<td>供应商名称</td>
						<td>备注</td>
					</tr>

					<!-- 数据行 1 -->
					<tr v-for="(item, index) in billData" :key="index">
						<td style="width: 50px;">{{ index + 1 }}</td>
						<td>{{ item.wlNo }}</td>
						<td class="wzmc">{{ item.wlMs }}</td>
						<td>{{ item.realQty }}</td>
						<td>{{ item.dw }}</td>
						<td style="width: 150px;">{{ item.sapNo }}</td>
						<td>{{ item.gysMc }}</td>
						<td>{{ item.remark }}</td>
					</tr>

					<!-- 接收物资状态 -->
					<tr>
						<td colspan="2">接收物资状态</td>
						<td colspan="6">
							<label><input type="radio" name="status"
									:checked="billData.length > 0 ? (billData[0].receiveStatus == 1 ? 'true' : '') : ''" />
								数量齐全、状态完好</label>
							<label><input type="radio" name="status"
									:checked="billData.length > 0 ? (billData[0].receiveStatus == 2 ? 'checked' : '') : ''" />
								存在问题：</label>
							<input type="text" style="width: 70%;"
								:value="billData.length > 0 ? billData[0].receiveProblem : ''" readonly />
						</td>
					</tr>

					<!-- 接收人确认 -->
					 <!-- :preview-src-list="srcList" -->
					<tr>
						<td colspan="2">接收人确认</td>
						<td colspan="6">
							签字：<el-image style="width: 50px; height: 20px"
								:src="urlFun(billData.length > 0 ? billData[0].attachments : [], 'SIGN_RECEIVER')"
								:preview-src-list="urlFun1(billData.length > 0 ? billData[0].attachments : [], 'SIGN_RECEIVER')"
								
								 />
							<br /><br />
							日期：
							<input type="text" readonly style="width: 50px;" :value="deliveryDate.year" /> 年
							<input type="text" readonly style="width: 50px;" :value="deliveryDate.month" /> 月
							<input type="text" readonly placeholder="日" style="width: 50px;"
								:value="deliveryDate.day" /> 日
						</td>
					</tr>
				</table>
			</div>
		</el-dialog>
		<el-dialog title="现场照片" v-model="openPic" append-to-body>
			<div class="demo-image">
				<div v-for="(fit, index) in picList" :key="index" class="block">
					<span class="demonstration">{{ bizTypeCn(fit) }}</span>
					<el-image style="width: 100px; height: 100px" :src="fit.url"  :preview-src-list="srcList" />
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script setup name="Order">
import { listOrder, detailOrder, getHistory } from "@/api/waitDelivery/waitDelivery"
import AMapLoader from "@amap/amap-jsapi-loader";
import { ref } from "vue";
const { proxy } = getCurrentInstance()

const orderList = ref([])
const open = ref(false)
const openDetail = ref(false)
const openBill = ref(false)
const openPic = ref(false)
const loading = ref(true)
const detailLoading = ref(false)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const title = ref("")
const wlList = ref([])

const data = reactive({

	queryParams: {
		pageNum: 1,
		pageSize: 10,
		orderStatus: 3,
		destName: null,    // 目的地名称
		deliveryDate: null,  // 配送日期
		plateNo: null,   // 车牌号
		receiverOrgName: null // 接收单位
	},

})
//配送单
const billData = ref([])
const deliveryDate = ref({})
const srcList = ref([])
const picList = ref([])
const map = ref(null) // 高德地图实例
const int = ref(null)
const lineArr = ref([])	// 轨迹
const marker = ref(null)
const polyline = ref(null)
const passedPolyline = ref(null)
const percentage = ref(50) // 进度条进度
const sliderVal = ref(0)
const progressTime = ref(0)
const markerSpeed = ref(100) // 初始化速度
const afterData = ref([])//后面的数据

const { queryParams } = toRefs(data)

/** 查询配送单据主列表 */
function getList() {
	loading.value = true
	listOrder(queryParams.value).then(response => {
		orderList.value = response.rows
		total.value = response.total
		loading.value = false
	})
}

// 取消按钮
function cancel() {
	open.value = false
	reset()
}

// 表单重置
function reset() {

	proxy.resetForm("orderRef")
}

/** 搜索按钮操作 */
function handleQuery() {
	queryParams.value.pageNum = 1
	getList()
}

/** 重置按钮操作 */
function resetQuery() {
	proxy.resetForm("queryRef")
	handleQuery()
}

// 多选框选中数据
function handleSelectionChange(selection) {
	ids.value = selection.map(item => item.id)
	single.value = selection.length != 1
	multiple.value = !selection.length
}

/** 新增按钮操作 */
function handleAdd() {
	reset()
	open.value = true
	title.value = "添加配送单据主"
}

//明细
//   function handleDetail(row) {
// 	openDetail.value = true
// 	// detailLoading.value = true
// 	detailOrder({orderNo:row.orderNo}).then(response=>{
// 	//   detailLoading.value = false
// 	  wlList.value = response.data

// 	})

//   }
//现场照片
function handlePic(row) {
	openPic.value = true
	detailOrder({ orderNo: row.orderNo }).then(response => {
		if (response.data.length > 0) {
			picList.value = response.data[0].attachments.filter(item => item.bizType == 'PHOTO_SITE' || item.bizType == 'PHOTO_BILL')
			srcList.value = picList.value.map(item => item.url)
		}
	})
}
function bizTypeCn(row) {
	if (row.bizType == 'PHOTO_SITE' && row.scene == 'ORIGIN') {
		return '起点照片'
	} else if (row.bizType == 'PHOTO_SITE' && row.scene == 'DEST') {
		return '终点照片'
	} else if (row.bizType == 'PHOTO_BILL') {
		return '配送单照片'
	}
}

//配送单
function handleBill(row) {
	openBill.value = true

	detailOrder({ orderNo: row.orderNo }).then(response => {
		console.log(2222222)
	console.log(response)
	// return
		//   detailLoading.value = false
		//   wlList.value = response.data
		billData.value = response.data
		deliveryDate.value = {
			year: response.data[0].deliveryDate.substring(0, 4),
			month: response.data[0].deliveryDate.substring(5, 7),
			day: response.data[0].deliveryDate.substring(8, 10),
		}
		// billData.value.push(response.data[0])
		// billData.value.push(response.data[0])
		// billData.value.push(response.data[0])
		// billData.value.push(response.data[0])
		// billData.value.push(response.data[0])
		// billData.value.push(response.data[0])
		// billData.value.push(response.data[0])
		// billData.value.push(response.data[0])
		// srcList.value = billData.value[0].attachments.map(item => item.url)
		// console.log(billData.value)
	})
}
function urlFun(attachments, bizType) {
	// console.log(33333)
		const onedata = attachments.find((x) => x.bizType == bizType)
		// srcList.value = onedata ? [onedata.url] : []
		return onedata ? onedata.url : ''

	// console.log(onedata)
}
function urlFun1(attachments, bizType) {
	// console.log(44444)
		const onedata = attachments.find((x) => x.bizType == bizType)
		return onedata ? [onedata.url] : []

	// console.log(onedata)
}


//   点击历史轨迹按钮，打开弹框
async function handleHistory(row) {


	const response = await getHistory({ orderNo: row.orderNo, plateNo: row.plateNo })
	if (response.data.length > 0) {
		open.value = true
		// let lonLat = []
		for (let i = 0; i < response.data.length; i++) {
			lineArr.value.push([response.data[i].lng, response.data[i].lat])

		}

		// 轨迹经纬度去重，否定有问题;
		const uniqueCoordinates = lineArr.value.filter((item, index, self) => {
			return self.findIndex(t => t[0] === item[0] && t[1] === item[1]) === index;
		});
		lineArr.value = uniqueCoordinates;
		initAMap();
	}else{
		proxy.$modal.msgWarning("暂无轨迹");
	}


}


function initAMap() {
	AMapLoader.load({
		key: "27719d64d6131bd1b93a15c49cab39c3", // 申请好的Web端开发者Key，首次调用 load 时必填
		version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
		plugins: [
			"AMap.Scale",
			"AMap.ToolBar",
			"AMap.ControlBar",
			"AMap.Geocoder",
			"AMap.Marker",
			"AMap.CitySearch",
			"AMap.Geolocation",
			"AMap.AutoComplete",
			"AMap.InfoWindow",
			"AMap.moveAnimation"
		], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
	}).then((AMap) => {
		// 获取到作为地图容器的DOM元素，创建地图实例
		map.value = new AMap.Map("amapcontainer", {
			//设置地图容器id
			resizeEnable: true,
			viewMode: "3D", // 使用3D视图
			zoomEnable: true, // 地图是否可缩放，默认值为true
			dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
			doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为true
			zoom: 17, //初始化地图级别
			center: [118.201897, 39.70742], // 初始化中心点坐标 北京
			// mapStyle: "amap://styles/darkblue", // 设置颜色底层
		});
		marker.value = new AMap.Marker({
			position: [118.201897, 39.70742],
			icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
			offset: new AMap.Pixel(-13, -26),
		});
		map.value.add(marker.value);

		// 所有路线轨迹(初始轨迹);
		polyline.value = new AMap.Polyline({
			path: lineArr.value,
			showDir: true,
			strokeColor: "#28F", //线颜色
			// strokeOpacity: 1,     //线透明度
			strokeWeight: 6, //线宽
			// strokeStyle: "solid"  //线样式
		});
		map.value.add(polyline.value);
		// 走过的路径
		passedPolyline.value = new AMap.Polyline({
			strokeColor: "#AF5", //线颜色
			strokeWeight: 6, //线宽
		});
		map.value.add(passedPolyline.value);
		map.value.setFitView(); // 根据覆盖物自适应展示地图
	})
		.catch((e) => {
			console.log(e);
		});
}
// 松开手触发
function silderInput() {
	let array = [];
	if (afterData.value.length === 0) {
		array = lineArr.value;
	} else {
		array = afterData.value
	}
	// var that = this;
	AMap.plugin("AMap.MoveAnimation", () => {
		progressTime.value = formatSeconds(0);
		//   markerSpeed.value = markerSpeed.value * speedCount.value;//markerSpeed的值是100;
		marker.value.moveAlong(array, {
			duration: 500, //可根据实际采集时间间隔设置速度
			// JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
			autoRotation: true,
		});
		marker.value.on("moving", (e) => {
			// lat:34.998553
			// lng:108.478947
			let lngs = e.passedPath[e.passedPath.length - 1].lng; // 经度 当前所在的位置信息; 
			let lats = e.passedPath[e.passedPath.length - 1].lat; // 纬度
			let info = [];
			info.push('<div style="margin-top: -10px;">');
			info.push("经度 :" + lngs);
			info.push("纬度 :" + lats);
			let infoWindow = new AMap.InfoWindow({
				content: info.join("<br/>"),
				offset: new AMap.Pixel(3, -20),
			});
			infoWindow.open(map.value, e.target.getPosition());
			var index = lineArr.value.findIndex(([lng, lat]) => lng === lngs && lat === lats);
			if (index > 0) {
				sliderVal.value = index;
			}
		});
	});
}
function sliderChange(val) {
	let beforeData = lineArr.value.slice(0, val + 1);//包含val;
	afterData.value = lineArr.value.slice(val + 1);//不包含val;因为不包含所以不能设置setPostion;
	let info = [];
	info.push('<div style="margin-top: -10px;">');
	info.push("经度 :" + lineArr.value[val][0]);
	info.push("纬度 :" + lineArr.value[val][1]);
	let infoWindow = new AMap.InfoWindow({
		content: info.join("<br/>"),
		offset: new AMap.Pixel(3, -20),
	});
	infoWindow.open(map.value, new AMap.LngLat(lineArr.value[val][0], lineArr.value[val][1]));
	if (val > 0) {//解决车闪烁问题;
		marker.value.setPosition(new AMap.LngLat(lineArr.value[val][0], lineArr.value[val][1]));
	}
	if (beforeData.length > 0) {
		passedPolyline.value.setPath(beforeData);//设置走过的路径;
	}
}
function monitorInterval() {
	int.value = setInterval(() => {
		sliderVal.value += 1 * speedCount.value;
	}, (TIME_VARIABLE / 100) * 100);
}
function pauseAnimation() {
	clearInterval(int.value);
	marker.value.pauseMove();
}
function resumeAnimation() {
	marker.value.resumeMove();
}
function formatSeconds(value) {
	var secondTime = parseInt(value); // 秒
	var minuteTime = 0; // 分
	var hourTime = 0; // 小时
	if (secondTime > 60) {
		minuteTime = parseInt(secondTime / 60);
		secondTime = parseInt(secondTime % 60);
		if (minuteTime > 60) {
			hourTime = parseInt(minuteTime / 60);
			minuteTime = parseInt(minuteTime % 60);
		}
	}
	var result =
		parseInt(secondTime) < 10
			? "0" + parseInt(secondTime)
			: "" + parseInt(secondTime);
	result =
		parseInt(minuteTime) < 10
			? "0" + parseInt(minuteTime) + ":" + result
			: "" + parseInt(minuteTime) + ":" + result;
	return result;
}

/** 导出按钮操作 */
function handleExport() {
	proxy.download('document/order/export', {
		...queryParams.value
	}, `order_${new Date().getTime()}.xlsx`)
}

getList()
//   handleBill({orderNo:'DO20251203155940338'})
//   handlePic({orderNo:'DO20251203155940338'})
</script>
<style scoped>
.delivery-form {
	font-family: "SimSun", "宋体", sans-serif;
	background-color: #fff;
	padding: 20px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	max-height: 700px;
	overflow: auto;
}

table {
	border: 1px solid black;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.5;
}

td {
	border: 1px solid black;
	padding: 5px;
	text-align: left;
	vertical-align: top;
}

td:first-child {
	width: 120px;
}

/* 表格标题居中 */
table tr:first-child td {
	text-align: center;
	font-weight: bold;
	font-size: 18px;
}

/* 修正列宽和换行 */
/* td:nth-child(3) {
	width: 250px;
	} */

/* 调整输入框样式 */
input[type="text"] {
	border: none;
	border-bottom: 1px solid #ccc;
	padding: 2px;
	font-size: 14px;
}

.wzmc {
	width: 300px;
}

.demo-image .block {
	padding: 30px 0;
	text-align: center;
	border-right: solid 1px var(--el-border-color);
	display: inline-block;
	width: 20%;
	min-width: 100px;
	box-sizing: border-box;
	vertical-align: top;
}

.demo-image .block:last-child {
	border-right: none;
}

.demo-image .demonstration {
	display: block;
	color: var(--el-text-color-secondary);
	font-size: 14px;
	margin-bottom: 20px;
}
</style>