Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
9717808c by 任超
Options

style:我的业务

1 parent 3cb1be7b
Inline Side-by-side
Showing 5 changed files with 408 additions and 6 deletions
.central_area {
min-height:calc(100vh - 190px);
margin-top: 20px;
color: #4A4A4A;
}
.navigation_crumbs {
height: 45px;
}
.perinfo {
height: 140px;
padding: 30px;
box-sizing: border-box;
background: #FFFFFF;
border-radius: 4px;
border: 1px solid #DEDEDE;
}
.perinfo_left{
float: left;
}
.perinfo_left ul li {
font-size: 16px;
color: #6D7278;
}
.perinfo_left ul li:first-child{
margin-top: 7px;
color: #4A4A4A;
}
.perinfo_left ul li:first-child span{
font-size: 18px;
}
.perinfo_left ul li:first-child p {
font-size: 18px;
}
.perinfo_left img {
width: 80px;
height: 80px;
float: left;
}
.perinfo_left ul {
float: left;
margin-left: 20px;
margin-top: 5px;
}
.perinfo_left ul li {
margin-bottom: 10px;
font-size: 16px;
}
.perinfo_left ul li p{
display: inline-block;
}
.perinfo button {
float: right;
margin-right: 70px;
margin-top: 10px;
width: 140px;
height: 42px;
position: relative;
}
.perinfo button a {
color: #FFFFFF;
display: block;
width: 140px;
height: 42px;
text-align: center;
line-height: 42px;
position: absolute;
left: 0;
top: 0;
}
.perinfo button a:hover {
color: #FFFFFF;
}
.my_appointment {
color: #5FB878;
border: 2px solid#5FB878;
font-size: 20px;
display: inline-block;
padding: 5px 10px;
border-radius: 5px;
margin-left: 20%;
margin-top: 10px;
}
.my_appointment:hover {
color: #f46143;
border-color: #f46143;
}
.time {
float: right;
margin-top: 20px;
}
/* ----------------预约列表-------------------- */
.appointment_list {
margin-top: 20px;
font-size: 0;
margin-left: -10px;
margin-right: -10px;
}
.appointment_list li {
width: 33.333%;
display: inline-block;
padding: 0 10px;
box-sizing: border-box;
float: left;
}
.appointment_list li .item_content {
border: 1px solid #CBCBCB;
border-radius: 4px;
border: 1px solid #CBCBCB;
font-size: 16px;
height: 368px;
}
.item_title {
height: 48px;
line-height: 48px;
color: #FFFFFF;
padding: 0 20px;
box-sizing: border-box;
}
.item_title h3 {
display: inline-block;
float: left;
}
.item_title p {
display: inline-block;
float: right;
}
.success {
background-color: #44D7B6;
}
.overdue {
background-color: #F26363;
}
.cancel {
background-color: #F26363;
opacity: 0.5;
}
.item_info {
padding: 30px;
height: 180px;
}
.item_info li{
width: 100%;
line-height: 38px;
box-sizing: border-box;
}
.item_info li span {
display: inline-block;
width: 108px;
text-align: right;
color: #9B9B9B;
white-space: nowrap;
}
.item_info li p{
display: inline-block;
color: #303030;
}
.item_info li a{
display: inline-block;
color: #0091FF;
margin-left: 20px;
}
.cancel_reservation {
display: block;
width: 100px;
height: 40px;
background: #FFFFFF;
border-radius: 3px;
border: 1px solid #E6E6E6;
font-size: 16px;
color: #9B9B9B;
line-height: 40px;
text-align: center;
margin: 0 auto;
}
.business_titleList {
width: 1200px;
margin: 15px auto;
font-size: 0;
}
.business_titleList li {
width: 25%;
font-size: 14px;
display: inline-block;
text-align: center;
}
.business_titleList li p:nth-child(1) {
font-size: 18px;
}
\ No newline at end of file
......@@ -4,12 +4,8 @@ $(function () {
form.on('select(type)', function (data) {
console.log(data);
})
//监听提交
form.on('submit(demo1)', function (data) {
layer.alert(JSON.stringify(data.field), {
title: '最终的提交信息'
})
register(data.field)
return false;
});
......@@ -26,7 +22,7 @@ function register(formData) {
data : JSON.stringify(formData),
//数据，这里使用的是Json格式进行传输
success: function (result) {//返回数据根据结果进行相应的处理
if (result.code == 200 && result.data != null) {
if (result.code == 200) {
layui.use('layer', function () {
layer.msg('注册成功！');
})
......
layui.use('element', function () {
let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
//监听导航点击
element.on('nav(demo)', function (elem) {
//console.log(elem)
layer.msg(elem.text());
});
});
$(function () {
_applyBusinessWiat()
})
//网上申请业务待提交
function _applyBusinessWiat() {
var li;
$.ajax({
type: "post", //提交方式
url: portal.api_url + "/portal/WorkBoxService/applyBusinessWiat",//路径
dataType: "json",
data: {
userId:'0026609ddc6d2afabaa3c9b0ea3b0ec3'
},
//数据，这里使用的是Json格式进行传输
success: function (result) {//返回数据根据结果进行相应的处理
if (result.code == 200 && result.data != null) {
console.log(result.data)
}
}
});
}
\ No newline at end of file
......@@ -52,7 +52,7 @@
<div class="contentBox">
<ul class="business_module">
<li>
<a href="" title="我的业务">
<a href="./wdyw.html" title="我的业务">
我的业务
</a>
</li>
......
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的业务</title>
<script type="text/javascript" src="../staticJs/head.js"></script>
<link rel="stylesheet" type="text/css" href="../staticCss/wdyw.css">
</head>
<body>
<div class="main">
<div class="navigation_crumbs">
<div class="contentBox">
<span class="layui-breadcrumb">
<a href="../index.html" title="首页">首页</a>
<a href="./grzx.html" title="个人中心">个人中心</a>
<a title="我的业务"><cite>我的业务</cite></a>
</span>
</div>
</div>
<!-- -----------------个人信息------------------------ -->
<div class="central_area">
<div class="perinfo contentBox">
<div class="perinfo_left">
<img src="../staticImages/person.png" alt="">
<ul>
<li>
<span>上午好：</span>
<p>任超</p>
</li>
<li>
<span>身份证号：</span>
<p>61012216464646</p>
</li>
</ul>
</div>
</div>
<ul class="business_titleList">
<li>
<p>
<span>5</span>
<b>件</b>
</p>
<p>办理合计</p>
</li>
<li>
<p>
<span>1</span>
<b>件</b>
</p>
<p>待提交</p>
</li>
<li>
<p>
<span>5</span>
<b>件</b>
</p>
<p>办理中</p>
</li>
<li>
<p>
<span>5</span>
<b>件</b>
</p>
<p>已办结</p>
</li>
</ul>
<!-- -------------预约列表--------------- -->
<div class="contentBox">
<ul class="appointment_list">
<li>
<div class="item_content">
<div class="item_title success">
<h3>正常</h3>
<p>
查看
<i class="layui-icon layui-icon-right"></i>
</p>
</div>
<ul class="item_info">
<li>
<span>预约人：</span>
<p>任超</p>
</li>
<li>
<span>办事大厅：</span>
<p>米香园办事大厅</p>
</li>
<li>
<span>办理业务类型：</span>
<p>二手房交易</p>
<a href="">办事指南</a>
</li>
<li>
<span>预约日期：</span>
<p>2020-12-56 上午 16：13</p>
</li>
<li>
<span>预约流水号：</span>
<p>897987987987</p>
</li>
</ul>
<a class="cancel_reservation">取消预约</a>
</div>
</li>
<li>
<div class="item_content">
<div class="item_title overdue">
<h3>正常</h3>
<p>
查看
<i class="layui-icon layui-icon-right"></i>
</p>
</div>
<ul class="item_info">
<li>
<span>预约人：</span>
<p>任超</p>
</li>
<li>
<span>办事大厅：</span>
<p>米香园办事大厅</p>
</li>
<li>
<span>办理业务类型：</span>
<p>二手房交易</p>
<a href="">办事指南</a>
</li>
<li>
<span>预约日期：</span>
<p>2020-12-56 上午 16：13</p>
</li>
<li>
<span>预约流水号：</span>
<p>897987987987</p>
</li>
</ul>
<a class="cancel_reservation">取消预约</a>
</div>
</li>
<li>
<div class="item_content">
<div class="item_title cancel">
<h3>正常</h3>
<p>
查看
<i class="layui-icon layui-icon-right"></i>
</p>
</div>
<ul class="item_info">
<li>
<span>预约人：</span>
<p>任超</p>
</li>
<li>
<span>办事大厅：</span>
<p>米香园办事大厅</p>
</li>
<li>
<span>办理业务类型：</span>
<p>二手房交易</p>
<a href="">办事指南</a>
</li>
<li>
<span>预约日期：</span>
<p>2020-12-56 上午 16：13</p>
</li>
<li>
<span>预约流水号：</span>
<p>897987987987</p>
</li>
</ul>
<a class="cancel_reservation">取消预约</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="../staticJs/common.js"></script>
<script type="text/javascript" src="../staticJs/down.js"></script>
<script type="text/javascript" src="../staticJs/wdyw.js"></script>
\ No newline at end of file