Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
6868719e by 任超
Options

feat:办事指南

1 parent 25cf1444
Inline Side-by-side
Showing 3 changed files with 248 additions and 4 deletions
...@@ -94,7 +94,7 @@ div.navigation { ...@@ -94,7 +94,7 @@ div.navigation {
94 text-align: center; 94 text-align: center;
95 } 95 }
96 .navigation .layui-nav-item { 96 .navigation .layui-nav-item {
97 width: 100px; 97 width: 130px;
98 position: relative; 98 position: relative;
99 margin: 0 22px; 99 margin: 0 22px;
100 } 100 }
...@@ -108,7 +108,7 @@ div.navigation { ...@@ -108,7 +108,7 @@ div.navigation {
108 height: 22px; 108 height: 22px;
109 border-left: 1px solid #ccc; 109 border-left: 1px solid #ccc;
110 top: 21px; 110 top: 21px;
111 left: -20px; 111 left: -22px;
112 } 112 }
113 113
114 div.nav ul li { 114 div.nav ul li {
......
1 /* ----------------------公共样式-------------------------- */
2 .contentBox {
3 width: 1200px;
4 margin: 0 auto;
5 overflow: hidden;
6 }
7 /* -------------------------end------------------------------- */
8 /* -------------------------头部start----------------------------------- */
9 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
10 border: 0;
11 margin: 0;
12 outline: 0 none;
13 padding: 0;
14 vertical-align: baseline;
15 font-size: 100%;
16 background: transparent;
17 font-family: Arial;
18 }
19
20 div a {
21 color: #000000;
22 text-decoration: none;
23 }
24
25 div.subject h2 a:hover {
26 color: #f46143;
27 }
28
29 div.subject {
30 margin: 0 auto;
31 float: none;
32 clear: both;
33 position: relative;
34 min-width: 1200px;
35 }
36 div.top-logo {
37 width: 1200px;
38 height: 70px;
39 padding-top: 20px;
40 }
41
42 div.top-logo ::-webkit-input-placeholder { /* WebKit browsers */
43 font-size: 13px;
44 }
45
46 div.top-logo ::-moz-placeholder { /* Mozilla Firefox 19+ */
47 font-size: 13px;
48 }
49
50 div.top-logo :-ms-input-placeholder { /* Internet Explorer 10+ */
51 font-size: 13px;
52 }
53 .top_logo_content {
54 height: 40px;
55 width: 100%;
56 margin: 0 auto;
57 }
58 div.top-logo .top_logo_search {
59 float: left;
60 width: 350px;
61 position: relative;
62 margin-left: 400px;
63 }
64 div.top-logo .top_logo_search input {
65 border-radius: 50px;
66 }
67 div.top-logo .login {
68 float: right;
69 margin-top: 8px;
70 }
71 div.top-logo .top_logo_search i {
72 position: absolute;
73 right: 10px;
74 top: 11px;
75 cursor: pointer;
76 }
77 .top-logo h1 {
78 display: inline-block;
79 float: left;
80 }
81 .top-logo ul li {
82 display: inline-block;
83 padding: 0 8px;
84 }
85
86 .top-logo ul li:first-child {
87 border-right: 1px solid grey;
88 }
89
90 div.navigation {
91 text-align: center;
92 }
93 .navigation .layui-nav-item {
94 width: 130px;
95 position: relative;
96 margin: 0 22px;
97 }
98 .layui-bg-blue {
99 background-color: #006CFF!important;
100 }
101
102 .layui-nav-item:not(:first-child)::before {
103 content: '';
104 position: absolute;
105 height: 22px;
106 border-left: 1px solid #ccc;
107 top: 21px;
108 left: -22px;
109 }
110
111 /* ------------------------------end--------------------------------------- */
112
113 .navigation_crumbs {
114 width: 100%;
115 height: 25px;
116 padding: 10px 0;
117 line-height: 25px;
118 background: #FAFAFA;
119 border: 1px solid #E6E6E6;
120 }
121 .navigation_crumbs .layui-breadcrumb a:hover {
122 color: #f46143!important;
123 }
124 /* --------------------导航tab------------------------- */
125 .one_content {
126 border: 1px solid #DEDEDE;;
127 margin-top: 30px;
128 }
129 .one_content .layui-tab {
130 margin: 0;
131 }
132 .one_content .layui-tab-title li {
133 width: 100px;
134 font-weight: 600;
135 color: #6D7278;
136 }
137 .one_content .layui-tab-title .layui-this {
138 color: #4A4A4A;
139 }
140 .layui-tab-brief>.layui-tab-more li.layui-this:after, .layui-tab-brief>.layui-tab-title .layui-this:after {
141 border-color: #006CFF;
142 }
143 .layui-tab .layui-tab-brief .layui-this {
144 color: #006CFF;
145 }
146 .layui-tab .layui-tab-brief li {
147 width: 30px;
148 }
149 .online_business {
150 margin-top: 20px;
151 }
152 .online_business h2 {
153 width: 100%;
154 height: 43px;
155 line-height: 43px;
156 background: #FAFAFA;
157 border-radius: 4px;
158 border: 1px solid #DEDEDE;
159 padding-left: 15px;
160 box-sizing: border-box;
161 }
162 /* ---------------------------------------------------- */
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 <html lang="zh-cn"> 2 <html lang="zh-cn">
3 3
4 <head> 4 <head>
5 <title>网页模板商城</title> 5 <title>网上“一窗办事”登记系统</title>
6 <meta charset="UTF-8"> 6 <meta charset="UTF-8">
7 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
8 <meta name="format-detection" content="telephone=no"> 8 <meta name="format-detection" content="telephone=no">
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
10 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> 10 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
11 <meta http-equiv="Cache-Control" content="no-siteapp" /> 11 <meta http-equiv="Cache-Control" content="no-siteapp" />
12 <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" /> 12 <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
13 <link rel="alternate icon" type="image/png" href="images/logo-realestate.png"> 13 <link rel="alternate icon" type="image/png" href="../../images/logo-realestate.png">
14 <link rel='icon' href='favicon.ico' type='image/x-ico' /> 14 <link rel='icon' href='favicon.ico' type='image/x-ico' />
15 <meta name="description" content="" /> 15 <meta name="description" content="" />
16 <meta name="keywords" content="" /> 16 <meta name="keywords" content="" />
...@@ -20,7 +20,81 @@ ...@@ -20,7 +20,81 @@
20 20
21 <body> 21 <body>
22 <div class="business_guide"> 22 <div class="business_guide">
23 <div class="subject top-logo">
24 <div class="top_logo_content">
25 <h1><a href="index.html"><img src="../../images/logo.jpg" alt="西安市不动产登记平台" /></a></h1>
23 26
27 <div class="top_logo_search">
28 <input type="text" name="title" required lay-verify="required" placeholder="请输入关键字搜索"
29 autocomplete="off" class="layui-input">
30 <i class="layui-icon layui-icon-search" style="font-size: 14px;"></i>
31 </div>
32
33 <ul class="login">
34 <li>登录</li>
35 <li>注册</li>
36 </ul>
37 </div>
38 </div>
39 <div class="navigation">
40 <ul class="layui-nav layui-bg-blue" lay-filter="">
41 <li class="layui-nav-item"><a href="">首页</a></li>
42 <li class="layui-nav-item"><a href="">新闻动态</a></li>
43 <li class="layui-nav-item"><a href="">业务办理</a></li>
44 <li class="layui-nav-item layui-this"><a href="">办事指南</a></li>
45 <li class="layui-nav-item">
46 <a href="javascript:;">查验中心</a>
47 <dl class="layui-nav-child">
48 <!-- 二级菜单 -->
49 <dd><a href="">移动模块</a></dd>
50 <dd><a href="">后台模版</a></dd>
51 <dd><a href="">电商平台</a></dd>
52 </dl>
53 </li>
54 <li class="layui-nav-item"><a href="">在线缴费</a></li>
55 <li class="layui-nav-item" class="item_last_child"><a href="">好差评</a></li>
56 </ul>
57 </div>
58 <div class="navigation_crumbs">
59 <div class="contentBox">
60 <span class="layui-breadcrumb">
61 <a href="">首页</a>
62 <a href="">办事指南</a>
63 <a><cite>业务指南</cite></a>
64 </span>
65 </div>
66 </div>
67
68 <div class="one_content contentBox">
69 <div class="layui-tab">
70 <ul class="layui-tab-title">
71 <li class="layui-this">线上办理</li>
72 <li>线下办理</li>
73 </ul>
74 <div class="layui-tab-content">
75 <div class="layui-tab-item layui-show">
76
77 <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
78 <ul class="layui-tab-title">
79 <li class="layui-this">全部</li>
80 <li>土地</li>
81 <li>房屋等建筑</li>
82 <li>构筑物</li>
83 <li>森林，林木</li>
84 <li>其他</li>
85 </ul>
86 <div class="layui-tab-content" style="padding:0">
87 <div class="online_business">
88 <h2>土地</h2>
89 </div>
90 </div>
91 </div>
92
93 </div>
94 <div class="layui-tab-item">内容2</div>
95 </div>
96 </div>
97 </div>
24 </div> 98 </div>
25 </body> 99 </body>
26 100
...@@ -34,3 +108,11 @@ ...@@ -34,3 +108,11 @@
34 <script type="text/javascript" src="lib/raty/jquery.raty.js"></script> 108 <script type="text/javascript" src="lib/raty/jquery.raty.js"></script>
35 <script type="text/javascript" src="js/main.min.js?t=1"></script> 109 <script type="text/javascript" src="js/main.min.js?t=1"></script>
36 <script src="https://www.layuicdn.com/layui/layui.js"></script> 110 <script src="https://www.layuicdn.com/layui/layui.js"></script>
111 <script>
112 //注意：导航 依赖 element 模块，否则无法进行功能性操作
113 layui.use('element', function () {
114 var element = layui.element;
115
116 //…
117 });
118 </script>
...\ No newline at end of file ...\ No newline at end of file
......