You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
175 lines
6.8 KiB
175 lines
6.8 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>简易点菜系统</title>
|
|
<link href="index.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="bootstrap.min.css"
|
|
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
|
<style>
|
|
.frame {
|
|
border: 1px solid black;
|
|
padding: 30px;
|
|
}
|
|
.order-frame{
|
|
width:700px
|
|
}
|
|
.icon{
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="frame">
|
|
<span>点餐画面</span>
|
|
<form>
|
|
<div class="input-group mt-3">
|
|
<div class="input-group-prepend col-3 pr-2 justify-content-end">
|
|
<span class="input-group-text">桌号</span>
|
|
</div>
|
|
<input type="text" class="form-control col-4">
|
|
<div class="input-group-prepend col-3 pr-2 justify-content-end">
|
|
<span class="input-group-text">客人姓名</span>
|
|
</div>
|
|
<input type="text" class="form-control col-4">
|
|
</div>
|
|
|
|
<div class="input-group mt-3">
|
|
<div class="input-group-prepend col-3 pr-2 justify-content-end">
|
|
<span class="input-group-text">预定</span>
|
|
</div>
|
|
<div class="custom-control custom-radio custom-control-inline mt-auto mb-auto">
|
|
<input type="radio" id="customRadioInline1" name="customRadioInline1" checked
|
|
class="custom-control-input">
|
|
<label class="custom-control-label" for="customRadioInline1">及时单</label>
|
|
</div>
|
|
<div class="custom-control custom-radio custom-control-inline mt-auto mb-auto">
|
|
<input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
|
|
<label class="custom-control-label" for="customRadioInline2">指定</label>
|
|
</div>
|
|
|
|
<input type="text" class="form-control col-4">
|
|
</div>
|
|
|
|
<div class="input-group mt-3">
|
|
<div class="input-group-prepend col-3 pr-2 justify-content-end">
|
|
<span class="input-group-text">联系方式(手机)</span>
|
|
</div>
|
|
|
|
<input type="text" class="form-control col-4">
|
|
</div>
|
|
|
|
<div class="input-group mt-3 order-frame">
|
|
<div class="input-group-prepend col-3 pr-2 justify-content-end">
|
|
<span class="input-group-text">点餐区</span>
|
|
</div>
|
|
|
|
<select class="custom-select">
|
|
<option selected>请选择分类</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</select>
|
|
|
|
<select class="custom-select">
|
|
<option selected>请选择品目</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</select>
|
|
|
|
<select class="custom-select">
|
|
<option selected>请选择材料</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</select>
|
|
|
|
<input type="text" class="form-control" placeholder="做法或数量">
|
|
</div>
|
|
|
|
<div class="input-group mt-3 order-frame">
|
|
<div class="col-3 text-right mt-auto mb-auto">
|
|
<img src="plus.svg" class="icon"/>
|
|
<img src="minus.svg" class="icon"/>
|
|
</div>
|
|
|
|
<select class="custom-select">
|
|
<option selected>请选择分类</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</select>
|
|
|
|
<select class="custom-select">
|
|
<option selected>请选择品目</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</select>
|
|
|
|
<select class="custom-select">
|
|
<option selected>请选择材料</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</select>
|
|
|
|
<input type="text" class="form-control" placeholder="做法或数量">
|
|
</div>
|
|
|
|
<div class="input-group mt-3 order-frame">
|
|
<div class="col-3 text-right mt-auto mb-auto">
|
|
<img src="plus.svg" class="icon"/>
|
|
<img src="minus.svg" class="icon"/>
|
|
</div>
|
|
|
|
<select class="custom-select">
|
|
<option selected>请选择分类</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</select>
|
|
|
|
<select class="custom-select">
|
|
<option selected>请选择品目</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</select>
|
|
|
|
<select class="custom-select">
|
|
<option selected>请选择材料</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</select>
|
|
|
|
<input type="text" class="form-control" placeholder="做法或数量">
|
|
</div>
|
|
|
|
<div class="input-group mt-3 justify-content-end">
|
|
<div class="input-group-prepend">
|
|
<span class="input-group-text">预结金额</span>
|
|
</div>
|
|
<input type="text" class="form-control col-2" disabled>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="input-group mt-3">
|
|
<div class="input-group-prepend">
|
|
<span class="input-group-text">备注</span>
|
|
</div>
|
|
<textarea class="form-control" aria-label="With textarea"></textarea>
|
|
</div>
|
|
<div class="mt-3 text-right">
|
|
<button class="btn btn-secondary col-3">提交</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |