master

分支 (1)

管理

管理

master

demo
/
index.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">
			<div class="cent" style="background-color: rgb(239,243,245);	height: calc(100vh - 60px);">
				<div v-show="btnIndex==0">
					<h3>首页</h3>

					<p>写在前面</p>
					<p>采用vue框架多页面模式</p>
					<p>未使用任何布局组件</p>
					<p>采用组件的话各种弹窗选择都能实现</p>
					<p>点击下方工单按钮查看</p>
					<a href="order.html">去工单详情</a>
					<br><br><br>

					<h3>可以看看前几天用组件做的</h3>
					<a href="http://www.xmxjs.club:90/#/pages/chronicDisease/index">点击跳转项目1</a>
					<br>
					<a href="http://www.i-d.top/volunteer/">点击跳转项目2</a>

				</div>
				<div v-show="btnIndex==1">
					<div style="background-color: #FFFFFF;height: 70px;">
						<div @click="typeIndex=i" style="float: left;text-align: center;" :style="'width: '+(100/types.length)+'%;'" v-for="(v,i) in types">
							<span :style="typeIndex==i?'border-bottom: 3px solid #13227a;font-weight:bold':''" style="line-height: 70px;padding-bottom: 5px;">{{v}}</span>
						</div>
					</div>

					<div>
						<div style="margin-top: 10px;background-color: #fff;">
							<div style="padding: 10px;border-bottom: 1px solid #ddd;">
								<span style="border-left: 3px solid #13227a;padding-left: 10px;">工单编号：123456</span>
								<span style="float: right;color: rgb(226,185,97);">未完成</span>
							</div>
							<p style="margin: 10px 10px 0 10px;border-bottom: 1px solid #ddd;padding-bottom: 10px;">报修物品：<label style="color: #888;float: right;">教学楼5栋6楼6017卫生间漏水</label></p>
							<p style="margin: 10px 10px 0 10px;border-bottom: 1px solid #ddd;padding-bottom: 10px;">预约时间：<label style="color: #888;float: right;">2020-12-26 16：30</label></p>
							<div style="padding: 10px;text-align: right;">
								<span style="color: #ddd;float: left;">报修时间：2020-12-26 14：32</span>
								<label style="padding: 5px 10px;border: 1px solid aqua;border-radius: 20px;color: aqua;">
									查看详情
								</label>
							</div>
						</div>

					</div>
				</div>
				<div v-show="btnIndex==2">
					没有
				</div>
			</div>
			<div class="foot" style="width: 100vw;height: 60px;background-color: #FFFFFF;">
				<div @click="btnIndex=i" style="float: left;text-align: center;padding-top: 5px;" :style="'width: '+(100/btns.length)+'%;'" v-for="(v,i) in btns">
					<img style="width: 30px;" :src="'img/btns/'+v.name+(btnIndex==i?'-b':'')+'.png'" >
					<p style="font-size: 10px;" :style="btnIndex==i?'color:#13227a':'color:#8a8a8a'">{{v.text}}</p>
				</div>
			</div>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script>
			var data = {
				btns:[//8a8a8a   13227a
					{text:"首页",name:"index"},
					{text:"工单",name:"order"},
					{text:"我的",name:"my"},
				],
				btnIndex:0,
				types:["全部","未完成","已完成","已取消"],
				typeIndex:0
			}
			var vue = new Vue({
				el:"#app",
				data
			})
		</script>
	</body>
</html>