手机端布局页面写法
DOCTYPE html>
<head>
<title>服装定制流程title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="layui/css/layui.css" rel="stylesheet">
<style>
body {
touch-action: pan-y;
}
#table1 {
border-collapse: collapse;
width: 90%;
margin: 0 auto;
}
#table1 td {
border: 0px solid #ccc;
padding: 2px;
}
#table2 {
border-collapse: collapse;
width: 85%;
margin: 0 auto;
text-align:center;
}
#table2 td {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}
img{
border-radius:50%;
margin: 0 auto;
}
.steps-container {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.step {
position: relative;
/*width: 100%;*/
padding-bottom: 20px;
padding-left: 70px; /* 圆点左侧的间距 */
}
.step.active .step-circle {
background-color: teal;
color: #fff;
}
.step-line {
position: absolute;
top: 0;
left: 20px; /* 线条左侧的位置 */
width: 2px;
height: 100%;
background-color: #ddd;
z-index: -1; /* 线条位于圆点下方 */
}
.step:last-child .step-line {
display: none; /* 最后一个步骤不需要线条 */
}
.step-circle {
position: absolute;
left: 0;
top: 20px;
transform: translateY(-50%);
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
background-color: #ddd;
text-align: center;
font-size: 14px;
color: #333;
}
.step.active .step-circle {
background-color: teal;
color: #fff;
}
style>
head>
<body>
<table id = "table1">
<tr>
<td rowspan="3" align="center"><img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM7DqOaqpOwkciaoTnj38RJZpibmJeEERkTibXNpa7pPzsxTFibyZfAhAK5I3YKdzYIlV0utq1olH5wsuQ/132" width="70px" height="70px"; />td>
<td>蒙古穿婚纱布里亚特风td>
tr>
<tr>
<td>客户:乌里雅苏td>
tr>
<tr>
<td>微信:13009502995td>
tr>
table>
<table id = "table2">
<tr>
<td >身高td>
<td >体重td>
<td >体重td>
tr>
<tr>
<td >身高td>
<td >体重td>
<td >体重td>
tr>
<tr>
<td >身高td>
<td >体重td>
<td ><a href="" style="color: red;">更多参数>>a>td>
tr>
table>
<br>br>
<div class="steps-container">
<div class="step">
<div class="step-line">div>
<div class="step-circle">1div>
<h2 class="sub-title" style = "color: black;"> 导购接单h2>
<br>br>
<div>
<p style="font-size: 20px;">
<img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM7DqOaqpOwkciaoTnj38RJZpibmJeEERkTibXNpa7pPzsxTFibyZfAhAK5I3YKdzYIlV0utq1olH5wsuQ/132" width="20px" height="20px"/>
<input type="checkbox" name="step01" value="郭丙强" />郭丙强
<img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM7DqOaqpOwkciaoTnj38RJZpibmJeEERkTibXNpa7pPzsxTFibyZfAhAK5I3YKdzYIlV0utq1olH5wsuQ/132" width="20px" height="20px"/>
<input type="checkbox" name="step01" value="于利"/>于利
<img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM7DqOaqpOwkciaoTnj38RJZpibmJeEERkTibXNpa7pPzsxTFibyZfAhAK5I3YKdzYIlV0utq1olH5wsuQ/132" width="20px" height="20px"/>
<input type="checkbox" name="step01" value="测试1"/>测试1
p>
div>
<br>br>
div>
<div class="step">
<div class="step-line">div>
<div class="step-circle" style="background-color: red;">2div>
<h2 class="sub-title" style = "color: black;"> 裁剪派单h2>
<br>br>
<div>
<p style="font-size: 20px;">
<img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM7DqOaqpOwkciaoTnj38RJZpibmJeEERkTibXNpa7pPzsxTFibyZfAhAK5I3YKdzYIlV0utq1olH5wsuQ/132" width="20px" height="20px"/>
<input type="checkbox" name="step01" value="郭丙强" />郭丙强
<img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM7DqOaqpOwkciaoTnj38RJZpibmJeEERkTibXNpa7pPzsxTFibyZfAhAK5I3YKdzYIlV0utq1olH5wsuQ/132" width="20px" height="20px"/>
<input type="checkbox" name="step01" value="于利"/>于利
<img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM7DqOaqpOwkciaoTnj38RJZpibmJeEERkTibXNpa7pPzsxTFibyZfAhAK5I3YKdzYIlV0utq1olH5wsuQ/132" width="20px" height="20px"/>
<input type="checkbox" name="step01" value="测试1"/>测试1
p>
div>
<br>br>
div>
<div class="step">
<div class="step-line">div>
<div class="step-circle" >3div>
<h2 class="sub-title" style = "color: black;"> 缝纫派单h2>
<br>br>
<div>
<p style="font-size: 20px;">
<img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIYFuYEFuGQf8q5nz3o1icvPVktkyaeXn7eJyBVOfeOzlaILBYdcfMrf7PB1ns820gHupVIY8U0QiaQ/132" width="20px" height="20px"/>
<input type="checkbox" name="step02" value="刘金萍" />刘金萍
<img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIYFuYEFuGQf8q5nz3o1icvPVktkyaeXn7eJyBVOfeOzlaILBYdcfMrf7PB1ns820gHupVIY8U0QiaQ/132" width="20px" height="20px"/>
<input type="checkbox" name="step02" value="付丽云" />付丽云
<img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIYFuYEFuGQf8q5nz3o1icvPVktkyaeXn7eJyBVOfeOzlaILBYdcfMrf7PB1ns820gHupVIY8U0QiaQ/132" width="20px" height="20px"/>
<input type="checkbox" name="step02" value="惠建芳" />惠建芳
<img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIYFuYEFuGQf8q5nz3o1icvPVktkyaeXn7eJyBVOfeOzlaILBYdcfMrf7PB1ns820gHupVIY8U0QiaQ/132" width="20px" height="20px"/>
<input type="checkbox" name="step02" value="张爱玲" />张爱玲
<img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIYFuYEFuGQf8q5nz3o1icvPVktkyaeXn7eJyBVOfeOzlaILBYdcfMrf7PB1ns820gHupVIY8U0QiaQ/132" width="20px" height="20px"/>
<input type="checkbox" name="step02" value="张俊芳" />张俊芳
<img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIYFuYEFuGQf8q5nz3o1icvPVktkyaeXn7eJyBVOfeOzlaILBYdcfMrf7PB1ns820gHupVIY8U0QiaQ/132" width="20px" height="20px"/>
<input type="checkbox" name="step02" value="陈润红" />陈润红
<img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIYFuYEFuGQf8q5nz3o1icvPVktkyaeXn7eJyBVOfeOzlaILBYdcfMrf7PB1ns820gHupVIY8U0QiaQ/132" width="20px" height="20px"/>
<input type="checkbox" name="step02" value="测试2" />测试2
p>
div>
<br>br>
div>
<div class="step">
<div class="step-line">div>
<div class="step-circle" >4div>
<h2 class="sub-title" style = "color: black;"> 钉扣派单h2>
<br>br>
<div>
<p style="font-size: 20px;">
<img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM7DqOaqpOwkciaoTnj38RJZpibmJeEERkTibXNpa7pPzsxTFibyZfAhAK5I3YKdzYIlV0utq1olH5wsuQ/132" width="20px" height="20px"/>
<input type="checkbox" name="step03" value="Lkhagvasuren" />Lkhagvasuren
<img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM7DqOaqpOwkciaoTnj38RJZpibmJeEERkTibXNpa7pPzsxTFibyZfAhAK5I3YKdzYIlV0utq1olH5wsuQ/132" width="20px" height="20px"/>
<input type="checkbox" name="step03" value="测试3" />测试3
p>
div>
<br>br>
div>
<div class="step">
<div class="step-line">div>
<div class="step-circle" >5div>
<h2 class="sub-title" style = "color: black;"> 质检派单h2>
<br>br>
<div>
<p style="font-size: 20px;">
<img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM7DqOaqpOwkciaoTnj38RJZpibmJeEERkTibXNpa7pPzsxTFibyZfAhAK5I3YKdzYIlV0utq1olH5wsuQ/132" width="20px" height="20px"/>
<input type="checkbox" name="step04" value="那日苏" />那日苏
<img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q3auHgzwzM7DqOaqpOwkciaoTnj38RJZpibmJeEERkTibXNpa7pPzsxTFibyZfAhAK5I3YKdzYIlV0utq1olH5wsuQ/132" width="20px" height="20px"/>
<input type="checkbox" name="step04" value="测试4" />测试4
p>
div>
div>
div>
<div style="text-align: center;">
<button type="button" onclick="getCheckBox()" style="font-size: 20px; height:50px ;width: 100%; background-color: red;">确定派单button>
div>
body>
<script src="layui/layui.js">script>
<script type="text/javascript" src="assets/plugins/jquery-1.11.3.min.js">script>
<script type="text/javascript" src="assets/plugins/jquery.easing.1.3.js">script>
<script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js">script>
<script type="text/javascript" src="assets/plugins/jquery-scrollTo/jquery.scrollTo.min.js">script>
<script type="text/javascript" src="assets/plugins/prism/prism.js">script>
<script type="text/javascript" src="assets/js/main.js">script>
<script>
function workFlowView(){
window.open("http://39.104.17.29:7077/strutsJspAjax/index002.html");
}
function getCheckBox(){
var arr = new Array();
var arr01 = new Array();
var items = document.getElementsByName("step01");
for (i = 0; i < items.length; i++) {
if (items[i].checked) {
arr01.push(items[i].value);
arr.push(items[i].value);
}
}
if(arr01.length==0){
alert("请选择第一步中的人员");
return;
}
var arr02 = new Array();
var items = document.getElementsByName("step02");
for (i = 0; i < items.length; i++) {
if (items[i].checked) {
arr02.push(items[i].value);
arr.push(items[i].value);
}
}
if(arr02.length==0){
alert("请选择第二步中的人员");
return;
}
var arr03 = new Array();
var items = document.getElementsByName("step03");
for (i = 0; i < items.length; i++) {
if (items[i].checked) {
arr03.push(items[i].value);
arr.push(items[i].value);
}
}
if(arr03.length==0){
alert("请选择第三步中的人员");
return;
}
var arr04 = new Array();
var items = document.getElementsByName("step04");
for (i = 0; i < items.length; i++) {
if (items[i].checked) {
arr04.push(items[i].value);
arr.push(items[i].value);
}
}
if(arr04.length==0){
alert("请选择第四步中的人员");
return;
}
let that=this
let url = window.location.href
//let url = "http://www.menggu100.com:7077/strutsJspAjax/index001.html?orderIdByGrj=202308354657941354008000";
let p=url.split('?')[2]
let params=new URLSearchParams(p)
params.get('orderNo');
$.ajax({
type:"post",
url:"SendOrderAction?method=excuteAjax&personNames="+arr.toString()+"&orderNo="+params.get('orderNo'),
data:{//设置数据源
},
dataType:"json",//设置需要返回的数据类型
success:function(data){
var returnWebData = eval("("+data+")");//将数据转换成json类型，可以把data用alert()输出出来看看到底是什么样的结构
if(returnWebData.order_no=="yes"){
alert("已下发派遣任务！");
}else if(returnWebData.Warning=="insertSuccess"){
alert("下发派遣任务成功！");
}else{
}
},
error:function(){
//alert("系统异常，请稍后重试！");
}//这里不要加","
});
};
layui.use(function(){
var layer = layui.layer;
var util = layui.util;
// 事件
util.on('lay-on', {
"test-confirm01": function(){
layer.confirm('确认该流程执行完毕？点击确定按钮后无法修改！', {icon: 3}, function(){
}, function(){
});
},
"test-confirm02": function(){
layer.confirm('确认该流程执行完毕？点击确定按钮后无法修改！', {icon: 3}, function(){
}, function(){
});
},
})
});
script>
body>
html>
下面一行关键代码 的写法，适应于手机布局
<meta name="viewport" content="width=device-width, initial-scale=1.0">