master

分支 (1)

管理

管理

master

demo
/
order.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta content="width=device-width,user-scalable=no" name="viewport">
		<title>预约报修</title>
		<link rel="stylesheet" type="text/css" href="./css/index.css"/>
	</head>
	<body>
		<div id="app">
			<p style="padding: 20px;margin-top:10px;border-bottom: 1px solid #eee;font-size: 20px;font-weight:bold">工单详情</p>
			<div v-for="(v,i) in order">
				<p style="margin: 10px 10px 0 10px;border-bottom: 1px solid #ddd;padding-bottom: 10px;">{{v.k}}：<label style="color: #888;float: right;">{{v.v}}</label></p>
			</div>
			<div style="width: 100vw;height: 20px;background-color: rgb(246,250,249);"></div>
			<div style="padding: 10px 20px ;">
				<p>备注：</p>
				<textarea style="width: 100%;height: 80px;margin-top: 10px;border-radius: 10px;border: 1px solid #ccc;" type="text" placeholder="请输入给维修师傅留言,不超过50字"></textarea>
			</div>
			<div style="padding: 10px 20px ;">
				<p>现场图片：</p>
				<div style="border: 1px solid #eee;width: 70px;height: 70px;text-align: center;line-height: 80px;border-radius: 10px;background-color: #eee;margin-top: 10px;">
					<svg t="1628339004498" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6950" width="30" height="30"><path d="M901.1 541.5H571.6V895c0 32.9-26.7 59.6-59.6 59.6-32.9 0-59.5-26.7-59.6-59.6V541.5H122.9c-32.5 0-58.9-26.4-58.9-58.9s26.4-58.9 58.9-58.9h329.5V129c0-32.9 26.7-59.6 59.6-59.6 32.9 0 59.5 26.7 59.6 59.6v294.6h329.5c32.5 0 58.9 26.4 58.9 58.9 0 32.6-26.4 59-58.9 59z" p-id="6951" fill="#8a8a8a"></path></svg>
				</div>
			</div>
			<div style="background-image: linear-gradient(to right, rgb(74,111,226) , rgb(113,182,251);margin: 20px;width: calc(100% - 40px);text-align: center;padding: 10px 0;border-radius: 20px;color: #FFFFFF;">
				提交
			</div>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script>
			var data = {
				order:[
					{k:"报修人",v:"张XX"},
					{k:"联系电话",v:"13888888888"},
					{k:"报修类别",v:"去选择"},
					{k:"报修详情",v:"请填写物品名称"},
					{k:"详细地址",v:"请填写详细地址"},
					{k:"预约时间",v:"去选择"},
				]
			}
			var vue = new Vue({
				el:"#app",
				data
			})
		</script>
	</body>
</html>