style:页面中心内容快显示最小高度
Showing
8 changed files
with
266 additions
and
244 deletions
... | @@ -2,10 +2,14 @@ | ... | @@ -2,10 +2,14 @@ |
2 | .main { | 2 | .main { |
3 | overflow-x: hidden; | 3 | overflow-x: hidden; |
4 | } | 4 | } |
5 | .central_area { | ||
6 | min-height:calc(100vh - 207px); | ||
7 | } | ||
5 | .navigation_crumbs { | 8 | .navigation_crumbs { |
6 | height: 45px; | 9 | height: 45px; |
7 | } | 10 | } |
8 | .personal_center { | 11 | .personal_center { |
12 | margin-top: 10px; | ||
9 | } | 13 | } |
10 | .personal_information { | 14 | .personal_information { |
11 | width: 100%; | 15 | width: 100%; |
... | @@ -35,7 +39,7 @@ | ... | @@ -35,7 +39,7 @@ |
35 | } | 39 | } |
36 | /* --------------------业务模块----------------------- */ | 40 | /* --------------------业务模块----------------------- */ |
37 | .business_module { | 41 | .business_module { |
38 | margin-top: 10px; | 42 | margin-top: 20px; |
39 | overflow: hidden; | 43 | overflow: hidden; |
40 | margin-left: -10px; | 44 | margin-left: -10px; |
41 | margin-right: -10px; | 45 | margin-right: -10px; | ... | ... |
... | @@ -70,67 +70,69 @@ | ... | @@ -70,67 +70,69 @@ |
70 | </div> | 70 | </div> |
71 | </div> | 71 | </div> |
72 | <!-- -----------------------------------个人中心模块---------------------------------------------- --> | 72 | <!-- -----------------------------------个人中心模块---------------------------------------------- --> |
73 | <div class="personal_center contentBox"> | 73 | <div class="central_area"> |
74 | <div class="personal_information layui-bg-gray"> | 74 | <div class="personal_center contentBox"> |
75 | <img src="../../staticImages/logo-realestate.png" alt="个人中心"> | 75 | <div class="personal_information layui-bg-gray"> |
76 | <ul> | 76 | <img src="../../staticImages/logo-realestate.png" alt="个人中心"> |
77 | <ul> | ||
78 | <li> | ||
79 | <span>姓名:</span> | ||
80 | <p>任超</p> | ||
81 | </li> | ||
82 | <li> | ||
83 | <span>登录时间:</span> | ||
84 | <p>2020-120-2</p> | ||
85 | </li> | ||
86 | <li> | ||
87 | <span>联系方式:</span> | ||
88 | <p>1852555224</p> | ||
89 | </li> | ||
90 | <li> | ||
91 | 第25次次登录此平台 | ||
92 | </li> | ||
93 | <li> | ||
94 | <span>身份证号码:</span> | ||
95 | <p>61012419930545464</p> | ||
96 | </li> | ||
97 | </ul> | ||
98 | </div> | ||
99 | </div> | ||
100 | <!-- ---------------------------业务模块------------------------------- --> | ||
101 | <div class="contentBox"> | ||
102 | <ul class="business_module"> | ||
77 | <li> | 103 | <li> |
78 | <span>姓名:</span> | 104 | <a href="" title="我的业务"> |
79 | <p>任超</p> | 105 | 我的业务 |
106 | </a> | ||
80 | </li> | 107 | </li> |
81 | <li> | 108 | <li> |
82 | <span>登录时间:</span> | 109 | <a href="../wdyy/index.html" title="我的预约"> |
83 | <p>2020-120-2</p> | 110 | 我的预约 |
111 | </a> | ||
84 | </li> | 112 | </li> |
85 | <li> | 113 | <li> |
86 | <span>联系方式:</span> | 114 | <a href="" title="我的不动产"> |
87 | <p>1852555224</p> | 115 | 我的不动产 |
116 | </a> | ||
88 | </li> | 117 | </li> |
89 | <li> | 118 | <li> |
90 | 第25次次登录此平台 | 119 | <a href="" title="业务查询"> |
120 | 业务查询 | ||
121 | </a> | ||
122 | </li> | ||
123 | <li> | ||
124 | <a href="" title="我的支付"> | ||
125 | 我的支付 | ||
126 | </a> | ||
91 | </li> | 127 | </li> |
92 | <li> | 128 | <li> |
93 | <span>身份证号码:</span> | 129 | <a href="" title="档案查询"> |
94 | <p>61012419930545464</p> | 130 | 档案查询 |
131 | </a> | ||
95 | </li> | 132 | </li> |
96 | </ul> | 133 | </ul> |
97 | </div> | 134 | </div> |
98 | </div> | 135 | </div> |
99 | <!-- ---------------------------业务模块------------------------------- --> | ||
100 | <div class="contentBox"> | ||
101 | <ul class="business_module"> | ||
102 | <li> | ||
103 | <a href="" title="我的业务"> | ||
104 | 我的业务 | ||
105 | </a> | ||
106 | </li> | ||
107 | <li> | ||
108 | <a href="../wdyy/index.html" title="我的预约"> | ||
109 | 我的预约 | ||
110 | </a> | ||
111 | </li> | ||
112 | <li> | ||
113 | <a href="" title="我的不动产"> | ||
114 | 我的不动产 | ||
115 | </a> | ||
116 | </li> | ||
117 | <li> | ||
118 | <a href="" title="业务查询"> | ||
119 | 业务查询 | ||
120 | </a> | ||
121 | </li> | ||
122 | <li> | ||
123 | <a href="" title="我的支付"> | ||
124 | 我的支付 | ||
125 | </a> | ||
126 | </li> | ||
127 | <li> | ||
128 | <a href="" title="档案查询"> | ||
129 | 档案查询 | ||
130 | </a> | ||
131 | </li> | ||
132 | </ul> | ||
133 | </div> | ||
134 | <div class="footer"> | 136 | <div class="footer"> |
135 | <div class="system_service"> | 137 | <div class="system_service"> |
136 | <ul class=""> | 138 | <ul class=""> | ... | ... |
1 | .central_area { | ||
2 | min-height:calc(100vh - 207px); | ||
3 | } | ||
1 | .navigation_crumbs { | 4 | .navigation_crumbs { |
2 | height: 45px; | 5 | height: 45px; |
3 | } | 6 | } |
... | @@ -5,6 +8,7 @@ | ... | @@ -5,6 +8,7 @@ |
5 | height: 100px; | 8 | height: 100px; |
6 | padding: 20px; | 9 | padding: 20px; |
7 | box-sizing: border-box; | 10 | box-sizing: border-box; |
11 | margin-top: 10px; | ||
8 | } | 12 | } |
9 | .perinfo_left{ | 13 | .perinfo_left{ |
10 | float: left; | 14 | float: left; |
... | @@ -46,5 +50,5 @@ | ... | @@ -46,5 +50,5 @@ |
46 | } | 50 | } |
47 | /* ----------------预约列表-------------------- */ | 51 | /* ----------------预约列表-------------------- */ |
48 | .appointment_list { | 52 | .appointment_list { |
49 | 53 | margin-top: 10px; | |
50 | } | 54 | } |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -70,29 +70,31 @@ | ... | @@ -70,29 +70,31 @@ |
70 | </div> | 70 | </div> |
71 | </div> | 71 | </div> |
72 | <!-- -----------------个人信息------------------------ --> | 72 | <!-- -----------------个人信息------------------------ --> |
73 | <div class="perinfo contentBox layui-bg-gray"> | 73 | <div class="central_area"> |
74 | <div class="perinfo_left"> | 74 | <div class="perinfo contentBox layui-bg-gray"> |
75 | <img src="../../staticImages/logo-realestate.png" alt=""> | 75 | <div class="perinfo_left"> |
76 | <ul> | 76 | <img src="../../staticImages/logo-realestate.png" alt=""> |
77 | <li> | 77 | <ul> |
78 | <span>上午好:</span> | 78 | <li> |
79 | <p>任超</p> | 79 | <span>上午好:</span> |
80 | </li> | 80 | <p>任超</p> |
81 | <li> | 81 | </li> |
82 | <span>身份证号:</span> | 82 | <li> |
83 | <p>61012216464646</p> | 83 | <span>身份证号:</span> |
84 | </li> | 84 | <p>61012216464646</p> |
85 | </ul> | 85 | </li> |
86 | </ul> | ||
87 | </div> | ||
88 | <a class="my_appointment" title="在线预约" href="../yyxz/index.html">在线预约</a> | ||
89 | <div class="time"> | ||
90 | 登录时间:2088-20-88 | ||
91 | </div> | ||
86 | </div> | 92 | </div> |
87 | <a class="my_appointment" title="在线预约" href="../yyxz/index.html">在线预约</a> | 93 | <!-- -------------预约列表--------------- --> |
88 | <div class="time"> | 94 | <div class="appointment_list contentBox"> |
89 | 登录时间:2088-20-88 | 95 | <table class="layui-hide" id="test" lay-filter="test"></table> |
90 | </div> | 96 | </div> |
91 | </div> | 97 | </div> |
92 | <!-- -------------预约列表--------------- --> | ||
93 | <div class="appointment_list contentBox"> | ||
94 | <table class="layui-hide" id="test" lay-filter="test"></table> | ||
95 | </div> | ||
96 | <div class="footer"> | 98 | <div class="footer"> |
97 | <div class="system_service"> | 99 | <div class="system_service"> |
98 | <ul class=""> | 100 | <ul class=""> | ... | ... |
1 | .central_area { | ||
2 | min-height:calc(100vh - 227px); | ||
3 | } | ||
1 | .navigation_crumbs { | 4 | .navigation_crumbs { |
2 | height: 45px; | 5 | height: 45px; |
3 | } | 6 | } |
... | @@ -64,7 +67,8 @@ | ... | @@ -64,7 +67,8 @@ |
64 | 67 | ||
65 | /* -------------分割线----------------------- */ | 68 | /* -------------分割线----------------------- */ |
66 | .site-title { | 69 | .site-title { |
67 | margin: 20px 0; | 70 | margin: 20px auto; |
71 | width: 1200px; | ||
68 | } | 72 | } |
69 | .site-title fieldset { | 73 | .site-title fieldset { |
70 | border-top: 1px solid #eee; | 74 | border-top: 1px solid #eee; | ... | ... |
... | @@ -73,88 +73,89 @@ | ... | @@ -73,88 +73,89 @@ |
73 | </div> | 73 | </div> |
74 | </div> | 74 | </div> |
75 | <!-- ----------------------------------内容模块的开始----------------------------------------------- --> | 75 | <!-- ----------------------------------内容模块的开始----------------------------------------------- --> |
76 | <div class="appointment_notice contentBox"> | 76 | <div class="central_area"> |
77 | <ul class="app_progress"> | 77 | <div class="appointment_notice contentBox"> |
78 | <li> | 78 | <ul class="app_progress"> |
79 | <span>1</span> | 79 | <li> |
80 | 预约须知 | 80 | <span>1</span> |
81 | </li> | 81 | 预约须知 |
82 | <div class="line"></div> | 82 | </li> |
83 | <li> | 83 | <div class="line"></div> |
84 | <span>2</span> | ||
85 | 选择区域 | ||
86 | </li> | ||
87 | <div class="line"></div> | ||
88 | <li> | ||
89 | <span>3</span> | ||
90 | 预约时间 | ||
91 | </li> | ||
92 | <div class="line"></div> | ||
93 | <li class="active"> | ||
94 | <span>4</span> | ||
95 | 预约结果 | ||
96 | </li> | ||
97 | </ul> | ||
98 | </div> | ||
99 | <div class="result_details contentBox"> | ||
100 | <blockquote class="layui-elem-quote"> | ||
101 | <ul> | ||
102 | <li> | 84 | <li> |
103 | <span>预约成功!您的预约号:</span> | 85 | <span>2</span> |
104 | <p>20201019001104</p> | 86 | 选择区域 |
87 | </li> | ||
88 | <div class="line"></div> | ||
89 | <li> | ||
90 | <span>3</span> | ||
91 | 预约时间 | ||
92 | </li> | ||
93 | <div class="line"></div> | ||
94 | <li class="active"> | ||
95 | <span>4</span> | ||
96 | 预约结果 | ||
105 | </li> | 97 | </li> |
106 | <li>请记录下您的预约号,以便后续的预约服务。</li> | ||
107 | </ul> | 98 | </ul> |
108 | </blockquote> | 99 | </div> |
109 | </div> | 100 | <div class="result_details contentBox"> |
110 | 101 | <blockquote class="layui-elem-quote"> | |
111 | <div class="site-title"> | 102 | <ul> |
112 | <fieldset> | 103 | <li> |
113 | <legend> | 104 | <span>预约成功!您的预约号:</span> |
114 | <a href="" name="fieldset"> | 105 | <p>20201019001104</p> |
115 | 预约信息 | 106 | </li> |
116 | </a> | 107 | <li>请记录下您的预约号,以便后续的预约服务。</li> |
117 | </legend> | 108 | </ul> |
118 | </fieldset> | 109 | </blockquote> |
119 | </div> | 110 | </div> |
120 | <!-- ------------------------------------预约列表信息---------------------------------------------- --> | 111 | |
121 | <div class="contentBox"> | 112 | <div class="site-title"> |
122 | <ul class="result_details_list"> | 113 | <fieldset> |
123 | <li> | 114 | <legend> |
124 | <span>姓名</span> | 115 | <a href="" name="fieldset"> |
125 | <p>任超</p> | 116 | 预约信息 |
126 | </li> | 117 | </a> |
127 | <li> | 118 | </legend> |
128 | <span>身份证号</span> | 119 | </fieldset> |
129 | <p>61012419930918119</p> | 120 | </div> |
130 | </li> | 121 | <!-- ------------------------------------预约列表信息---------------------------------------------- --> |
131 | <li> | 122 | <div class="contentBox"> |
132 | <span>联系电话</span> | 123 | <ul class="result_details_list"> |
133 | <p>1988405632</p> | 124 | <li> |
134 | </li> | 125 | <span>姓名</span> |
135 | <li> | 126 | <p>任超</p> |
136 | <span>办事大厅</span> | 127 | </li> |
137 | <p>米香园办事大厅</p> | 128 | <li> |
138 | </li> | 129 | <span>身份证号</span> |
139 | <li> | 130 | <p>61012419930918119</p> |
140 | <span>办理业务类型</span> | 131 | </li> |
141 | <p>二手房交易</p> | 132 | <li> |
142 | </li> | 133 | <span>联系电话</span> |
143 | <li> | 134 | <p>1988405632</p> |
144 | <span>预约时间</span> | 135 | </li> |
145 | <p>2020-02-03</p> | 136 | <li> |
146 | </li> | 137 | <span>办事大厅</span> |
147 | <li> | 138 | <p>米香园办事大厅</p> |
148 | <span>预约号</span> | 139 | </li> |
149 | <p>20202222</p> | 140 | <li> |
150 | </li> | 141 | <span>办理业务类型</span> |
151 | <li> | 142 | <p>二手房交易</p> |
152 | <span>状态</span> | 143 | </li> |
153 | <p class="success">成功</p> | 144 | <li> |
154 | </li> | 145 | <span>预约时间</span> |
155 | </ul> | 146 | <p>2020-02-03</p> |
147 | </li> | ||
148 | <li> | ||
149 | <span>预约号</span> | ||
150 | <p>20202222</p> | ||
151 | </li> | ||
152 | <li> | ||
153 | <span>状态</span> | ||
154 | <p class="success">成功</p> | ||
155 | </li> | ||
156 | </ul> | ||
157 | </div> | ||
156 | </div> | 158 | </div> |
157 | <!-- ---------------------------------------------------------------------------------------------- --> | ||
158 | <!-- ----------------------------------内容模块的end----------------------------------------------- --> | 159 | <!-- ----------------------------------内容模块的end----------------------------------------------- --> |
159 | <div class="footer"> | 160 | <div class="footer"> |
160 | <div class="system_service"> | 161 | <div class="system_service"> | ... | ... |
... | @@ -73,107 +73,109 @@ | ... | @@ -73,107 +73,109 @@ |
73 | </div> | 73 | </div> |
74 | </div> | 74 | </div> |
75 | <!-- ----------------------------------内容模块的开始----------------------------------------------- --> | 75 | <!-- ----------------------------------内容模块的开始----------------------------------------------- --> |
76 | <div class="appointment_notice contentBox"> | 76 | <div class="central_area"> |
77 | <ul class="app_progress"> | 77 | <div class="appointment_notice contentBox"> |
78 | <li> | 78 | <ul class="app_progress"> |
79 | <span>1</span> | 79 | <li> |
80 | 预约须知 | 80 | <span>1</span> |
81 | </li> | 81 | 预约须知 |
82 | <div class="line"></div> | 82 | </li> |
83 | <li> | 83 | <div class="line"></div> |
84 | <span>2</span> | 84 | <li> |
85 | 选择区域 | 85 | <span>2</span> |
86 | </li> | 86 | 选择区域 |
87 | <div class="line"></div> | 87 | </li> |
88 | <li class="active"> | 88 | <div class="line"></div> |
89 | <span>3</span> | 89 | <li class="active"> |
90 | 预约时间 | 90 | <span>3</span> |
91 | </li> | 91 | 预约时间 |
92 | <div class="line"></div> | 92 | </li> |
93 | <li> | 93 | <div class="line"></div> |
94 | <span>4</span> | 94 | <li> |
95 | 预约结果 | 95 | <span>4</span> |
96 | </li> | 96 | 预约结果 |
97 | </ul> | 97 | </li> |
98 | </div> | 98 | </ul> |
99 | <div class="appoint_time"> | ||
100 | <div class="swiper-container"> | ||
101 | <div class="swiper-wrapper" id="swiperDate"></div> | ||
102 | </div> | 99 | </div> |
103 | <!-- Add Arrows --> | 100 | <div class="appoint_time"> |
104 | <div class="swiper-button-next"></div> | 101 | <div class="swiper-container"> |
105 | <div class="swiper-button-prev"></div> | 102 | <div class="swiper-wrapper" id="swiperDate"></div> |
106 | </div> | 103 | </div> |
107 | <!-- ----------------------------------业务选择start----------------------------------------------- --> | 104 | <!-- Add Arrows --> |
108 | <div class="business_choice contentBox"> | 105 | <div class="swiper-button-next"></div> |
109 | <div class="title"> | 106 | <div class="swiper-button-prev"></div> |
110 | <h2>选择业务</h2> | ||
111 | <p>(请选择您要办理的业务)</p> | ||
112 | </div> | 107 | </div> |
113 | <div class="site-title"> | 108 | <!-- ----------------------------------业务选择start----------------------------------------------- --> |
114 | <fieldset> | 109 | <div class="business_choice contentBox"> |
115 | <legend> | 110 | <div class="title"> |
116 | <a href="" name="fieldset"> | 111 | <h2>选择业务</h2> |
117 | 国有房屋 | 112 | <p>(请选择您要办理的业务)</p> |
113 | </div> | ||
114 | <div class="site-title"> | ||
115 | <fieldset> | ||
116 | <legend> | ||
117 | <a href="" name="fieldset"> | ||
118 | 国有房屋 | ||
119 | </a> | ||
120 | </legend> | ||
121 | </fieldset> | ||
122 | </div> | ||
123 | <ul class="business_list"> | ||
124 | <li> | ||
125 | <a title="二手房转移登记"> | ||
126 | 二手房转移登记 | ||
127 | </a> | ||
128 | </li> | ||
129 | <li> | ||
130 | <a title="有证房抵押首次登记"> | ||
131 | 有证房抵押首次登记/注销登记 | ||
132 | </a> | ||
133 | </li> | ||
134 | <li> | ||
135 | <a title="解封登记"> | ||
136 | 查封/解封登记 | ||
137 | </a> | ||
138 | </li> | ||
139 | <li> | ||
140 | <a title="解封登记"> | ||
141 | 查封/解封登记 | ||
142 | </a> | ||
143 | </li> | ||
144 | <li> | ||
145 | <a title="证房抵押首次登记"> | ||
146 | 证房抵押首次登记/注销登记 | ||
147 | </a> | ||
148 | </li> | ||
149 | <li> | ||
150 | <a title="二手房转移登记"> | ||
151 | 二手房转移登记 | ||
118 | </a> | 152 | </a> |
119 | </legend> | 153 | </li> |
120 | </fieldset> | 154 | </ul> |
121 | </div> | 155 | </div> |
122 | <ul class="business_list"> | 156 | <div class="layui-anim layui_anim_list" data-anim="layui-anim-scale"> |
123 | <li> | 157 | <h2> |
124 | <a title="二手房转移登记"> | 158 | <i class="layui-icon layui-icon-close" onclick="modleClose()"></i> |
125 | 二手房转移登记 | 159 | </h2> |
126 | </a> | 160 | <ul class="content_box"> |
127 | </li> | 161 | <li id="view"></li> |
128 | <li> | 162 | <li id="view1"></li> |
129 | <a title="有证房抵押首次登记"> | 163 | </ul> |
130 | 有证房抵押首次登记/注销登记 | 164 | </div> |
131 | </a> | 165 | <div class="layui_anim_content"></div> |
132 | </li> | 166 | |
133 | <li> | 167 | <div class="next_button"> |
134 | <a title="解封登记"> | 168 | <button type="button" class="layui-btn layui-btn-normal"> |
135 | 查封/解封登记 | 169 | <a href="../xxqu/index.html" title="上一步"> |
136 | </a> | 170 | 上一步 |
137 | </li> | ||
138 | <li> | ||
139 | <a title="解封登记"> | ||
140 | 查封/解封登记 | ||
141 | </a> | ||
142 | </li> | ||
143 | <li> | ||
144 | <a title="证房抵押首次登记"> | ||
145 | 证房抵押首次登记/注销登记 | ||
146 | </a> | 171 | </a> |
147 | </li> | 172 | </button> |
148 | <li> | 173 | <button type="button" class="layui-btn layui-btn-normal nextButton"> |
149 | <a title="二手房转移登记"> | 174 | <a title="下一步"> |
150 | 二手房转移登记 | 175 | 下一步 |
151 | </a> | 176 | </a> |
152 | </li> | 177 | </button> |
153 | </ul> | 178 | </div> |
154 | </div> | ||
155 | <div class="layui-anim layui_anim_list" data-anim="layui-anim-scale"> | ||
156 | <h2> | ||
157 | <i class="layui-icon layui-icon-close" onclick="modleClose()"></i> | ||
158 | </h2> | ||
159 | <ul class="content_box"> | ||
160 | <li id="view"></li> | ||
161 | <li id="view1"></li> | ||
162 | </ul> | ||
163 | </div> | ||
164 | <div class="layui_anim_content"></div> | ||
165 | |||
166 | <div class="next_button"> | ||
167 | <button type="button" class="layui-btn layui-btn-normal"> | ||
168 | <a href="../xxqu/index.html" title="上一步"> | ||
169 | 上一步 | ||
170 | </a> | ||
171 | </button> | ||
172 | <button type="button" class="layui-btn layui-btn-normal nextButton"> | ||
173 | <a title="下一步"> | ||
174 | 下一步 | ||
175 | </a> | ||
176 | </button> | ||
177 | </div> | 179 | </div> |
178 | <!-- ----------------------------------内容模块的end----------------------------------------------- --> | 180 | <!-- ----------------------------------内容模块的end----------------------------------------------- --> |
179 | <div class="footer"> | 181 | <div class="footer"> | ... | ... |
-
Please register or sign in to post a comment