最近在做项目时,前端需要一个横向的时间轴,但是一直CV不到合适的,于是自己写了一个,现在将代码分享出来,被框住的部分
部分代码为layui,如果只需要红色框柱的部分,则只拷<div class=”content“>这个div中的代码和最上方的样式即可,代码如下
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<link rel="stylesheet" href="../../../css/layuimini.css" media="all">
<link rel="stylesheet" href="${pageContext.request.contextPath}/lib/layui-v2.6.3/css/layui.css" media="all">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/layuimini.css?v=2.0.4.2" media="all">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/themes/default.css" media="all">
<link rel="stylesheet" href="${pageContext.request.contextPath}/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
<style type="text/css">
body{
}
.content{
width: 1000px;
height:auto;
margin: -75px 0 0 311px;
display: inline-block;
}
.contract{
width: 100%;
height:auto;
display: inline-block;
}
.title{
padding:2px;
float:left;
height:30px;
width:50px;
margin:0 auto;
}
.contract .linesegs{
list-style-type: none;
float:left;
position: relative;
background-repeat: repeat-x;
height: 40px;
margin:0px;
padding-left:10px;
}
.linesegs li{
float: left;
width: 110px;
position: relative;
background-repeat: no-repeat;
}
.linesegs li .lines {
height:20px;
width:100%;
}
.linesegs li .dashed:after {
content: '';
display: block;
border-top:2px dashed #C9CDD4;;
width: 100%;
height: 2px;
}
.linesegs li .solid:after {
content: '';
display: block;
border-top:2px solid #41AE3C;
width: 100%;
height: 2px;
}
.linesegs li .radius:before {
content: '';
display: block;
position: relative;
width: 10px;
height: 10px;
top:5px;
background: #41AE3C;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
background-size: 10px 10px;
}
.linesegs li .b-radius:before {
content: '';
display: block;
position: relative;
width: 10px;
height: 10px;
top:5px;
background: #41AE3C;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
background-size: 10px 10px;
}
.linesegs li .showtext{
width:100%;
height:30%;
display: inline-block;
text-align: center;
}
.linesegs li .startdate{
width:100%;
height:1px;
margin-top:10px;
font-size:12px;
text-align: left;
position: relative;
left:-10px;
}
.class1{
margin-top: 20px;
margin-left: -7px;
font-size: 14px;
}
</style>
</head>
<body>
<div class="layui-container">
<button type="button" id="addProject" class="layui-btn layui-btn-normal" style="border-radius: 10px;">发起新项目</button>
<button type="button" id="pastProject" class="layui-btn layui-btn-normal" style="border-radius: 10px;float: right">历史项目</button>
<div class=""layui-inline>
<form class="layui-form" action="">
<div class="layui-input-inline" style="float: left">
<select name="orderByName" lay-filter="orderByName" style="width: 1150px;float: left">
<option value="0">项目名称</option>
<option value="1" >项目编号</option>
<option value="2">供应商</option>
</select>
</div>
<div style="float: left">
<input id="keyWord" type="text" name="keyWord" placeholder="请输入关键词搜索" autocomplete="off" class="layui-input" style="width: 170px;float: left;border-radius: 20px;">
<i id="selHosp" class="layui-icon " style="font-size: 30px;height:38px;float: right;"></i>
</div>
<div style="float: right">
<select name="orderByTime" lay-filter="orderByName" style="width: 1150px;float: left;">
<option value="0">发起项目</option>
<option value="1" >审核项目</option>
<option value="2">设备签收</option>
<option value="3">设备分拨</option>
</select>
</div>
</form>
<div style="clear: both;">
</div>
<div id="mianban" class="layui-panel" style="height: 100px;margin-top: 15px">
<div style="float: left">
<div style="margin-left: 20px;margin-bottom: 10px;margin-top: 10px">
<span style="margin-right: 20px;">项目名称</span> <span>测试项目1</span> <br>
</div>
<div style="margin-left: 20px;margin-bottom: 10px">
<span style="margin-right: 20px;">项目编号</span> <span>111111</span> <br>
</div>
<div style="margin-left: 20px;margin-bottom: 10px">
<span style="margin-right: 20px">供应商</span> <span>供应商aaaaa</span>
</div>
</div>
<div class="content">
<div class="contract">
<ul class="linesegs">
<li class="lineseg" style="width:13vw;">
<div class="solid radius"></div>
<h3 class="startdate">发起项目</h3>
<br>
<h3 class="startdate">2018-10-7</h3>
</li>
<li class="lineseg" style="width:13vw;">
<div class="dashed b-radius" ></div>
<h3 class="startdate">审核项目资料</h3>
<br>
<h3 class="startdate">2019-10-7 </h3>
</li>
<li class="lineseg" style="width:13vw;">
<div class="dashed b-radius" ></div>
<h3 class="startdate">设备分拨</h3>
<br>
<h3 class="startdate">2019-10-7 </h3>
</li>
<li class="lineseg" style="width:13vw;">
<div class=" b-radius" ></div>
<h3 class="startdate">设备分拨</h3>
<br>
<h3 class="startdate">2019-10-7 </h3>
</li>
</ul>
</div>
</div>
</div>
<div id="" class="layui-panel" style="height: 100px;margin-top: 15px">
<div style="float: left">
<div style="margin-left: 20px;margin-bottom: 10px;margin-top: 10px">
<span style="margin-right: 20px;">项目名称</span> <span>测试项目1</span> <br>
</div>
<div style="margin-left: 20px;margin-bottom: 10px">
<span style="margin-right: 20px;">项目编号</span> <span>111111</span> <br>
</div>
<div style="margin-left: 20px;margin-bottom: 10px">
<span style="margin-right: 20px">供应商</span> <span>供应商aaaaa</span>
</div>
</div>
<div class="content">
<div class="contract">
<ul class="linesegs">
<li class="lineseg" style="width:13vw;">
<div class="solid radius"></div>
<h3 class="startdate">发起项目</h3>
<br>
<h3 class="startdate">2018-10-7</h3>
</li>
<li class="lineseg" style="width:13vw;">
<div class="dashed b-radius" ></div>
<h3 class="startdate">审核项目资料</h3>
<br>
<h3 class="startdate">2019-10-7 </h3>
</li>
<li class="lineseg" style="width:13vw;">
<div class="dashed b-radius" ></div>
<h3 class="startdate">设备分拨</h3>
<br>
<h3 class="startdate">2019-10-7 </h3>
</li>
<li class="lineseg" style="width:13vw;">
<div class=" b-radius" ></div>
<h3 class="startdate">设备分拨</h3>
<br>
<h3 class="startdate">2019-10-7 </h3>
</li>
</ul>
</div>
</div>
</div>
<div class="layui-panel" style="height: 100px;margin-top: 15px">
<div style="float: left">
<div style="margin-left: 20px;margin-bottom: 10px;margin-top: 10px">
<span style="margin-right: 20px;">项目名称</span> <span>测试项目1</span> <br>
</div>
<div style="margin-left: 20px;margin-bottom: 10px">
<span style="margin-right: 20px;">项目编号</span> <span>111111</span> <br>
</div>
<div style="margin-left: 20px;margin-bottom: 10px">
<span style="margin-right: 20px">供应商</span> <span>供应商aaaaa</span>
</div>
</div>
<div class="content">
<div class="contract">
<ul class="linesegs">
<li class="lineseg" style="width:13vw;">
<div class="solid radius"></div>
<h3 class="startdate">发起项目</h3>
<br>
<h3 class="startdate">2018-10-7</h3>
</li>
<li class="lineseg" style="width:13vw;">
<div class="dashed b-radius" ></div>
<h3 class="startdate">审核项目资料</h3>
<br>
<h3 class="startdate">2019-10-7 </h3>
</li>
<li class="lineseg" style="width:13vw;">
<div class="dashed b-radius" ></div>
<h3 class="startdate">设备分拨</h3>
<br>
<h3 class="startdate">2019-10-7 </h3>
</li>
<li class="lineseg" style="width:13vw;">
<div class=" b-radius" ></div>
<h3 class="startdate">设备分拨</h3>
<br>
<h3 class="startdate">2019-10-7 </h3>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<%--pageContext.request.contextPath得到/webapp--%>
<script src="${pageContext.request.contextPath}/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/js/lay-config.js?v=2.0.0" charset="utf-8"></script>
<script>
layui.use(['element','jquery','layer','form'], function(){
var table = layui.table;
var $=layui.jquery;
var layer=layui.layer
var form = layui.form;
var element = layui.element;
})
</script>
</body>
</html>
原文地址:https://blog.csdn.net/cqdddgs/article/details/128497305
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_27778.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
