java110
2020-08-03 60048f76088d2f147e03330bf8d474b48c72e90f
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Keywords" Content="HC小区物业管理系统,免费的物业管理系统,开源小区管理系统">
<meta name="Description" Content="HC小区物业管理系统是为物业企业打造的智慧物业综合管理平台提供商家入驻、快递代收、房屋租赁等盈利功能,为物业企业提供全新的运营盈利模式。和java110开发者零距离沟通 qq群号 827669685 网站地址 (账号密码为 wuxw/admin)https://demo.java110.com">
<title>HC小区物业管理系统|免费开源的物业系统</title>
 
<!--======== All Stylesheet =========-->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/linearicons.css" rel="stylesheet">
<!--=== plugins ===-->
<link href="css/owl.carousel.css" rel="stylesheet">
<link href="css/owl.theme.css" rel="stylesheet">
<!--=== end plugins ===-->
<link rel="shortcut icon" href="favicon.ico">
<link href="css/style.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,900,700,600,300,200' rel='stylesheet' type='text/css'>
<!-- 百度统计代码 -->
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?39b9a4161b7a9895a03276ef555d9aad";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>
 
</head>    
 
<body data-spy="scroll" data-target=".nav-top">
<!--======== header =========-->
<header id="home" data-spy="scroll" data-target="#top-nav">
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <!-- menu 4 -->
            <div class="navbar navbar-default navbar-fixed-top default-menu menu-4" role="navigation">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu-4" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand default-logo scroll" href="#home"><img src="images/promo-logo2.png" alt="logo" /></a>
                    </div>
 
                    <div class="collapse navbar-collapse top-nav" id="menu-4">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a class="scroll" href="/document"  target="_blank">开发文档</a></li>
                            <li><a class="scroll" href="/operateDoc"  target="_blank">操作手册</a></li>
                            <li><a class="scroll" href="https://gitee.com/java110" target="_blank">源码下载</a></li>
                            <li><a class="scroll" href="https://space.bilibili.com/403702784" target="_blank">入门视频</a></li>
                            <li><a class="scroll" href="/2020年月轮闸机报价表.xls" target="_blank">推荐门禁道闸</a></li>
                            <li><a class="scroll" href="http://www.homecommunity.cn/document/#/license">技术支持</a></li>
                        </ul>
                        
                    </div>
                </div>
            </div><!-- end menu -->
        </div>
    </div>            
</header>
<!--======== end header =========-->
 
<!--======== intro =========-->
<section class="intro">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-sm-8 col-xs-12">
                <div class="intro-content">
                    <h1>HC小区物业管理系统</h1>
                    <p>HC小区物业管理系统是由java110团队于2017年4月份发起的前后端分离、分布式架构开源项目,目前我们的代码开源在github 和gitee上,开源项目由HC小区管理系统后端,HC小区管理系统前端,HC小区管理系统业主手机版和HC小区管理系统物业手机版,业务技术交流群:827669685(已满),799748606(群二)</p>
                    <a class="btn btn-default" href="https://hc.demo.winqi.cn" target="_blank" role="button">物业系统演示<i class="lnr lnr-arrow-right"></i></a></i></a>
                    <a class="btn btn-primary" href="#" data-toggle="modal" data-target="#ownerModal" target="_blank" role="button">小程序(业主版)演示 <i class="lnr lnr-arrow-right"></i></a></i></a>
                    <div><i class="fa fa-caret-down"></i></div>    
                </div>
            </div>
            <div class="col-md-6 col-sm-8 col-xs-12">
                <!--<div><img src="images/intro-image.png" class="img-responsive" alt="intro-image"></div>-->
                <div class="width:100%; height:100%">
                    <!--<img src="images/0003.png" class="img-responsive" alt="intro-image">-->
                    <iframe src="//player.bilibili.com/player.html?aid=78427253&cid=134191715&page=1"
                            scrolling="no" border="0" frameborder="no" framespacing="0"
                            width="100%"
                            height="100%"
                            allowfullscreen="true"> </iframe>
                </div>
            </div>
        </div>
    </div>
</section>
<!--======== end intro =========-->
 
<!--======== support =========-->
<section class="support">
    <div class="container">
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <div class="row">
                    <div class="col-md-4">
                        <div class="media">
                            <div class="media-left media-middle">
                                <i class="glyphicon glyphicon-play"></i>
                            </div>
                            <div class="media-body">
                                <h3>第一期(2019-03至2019-12)</h3>
                                <p>物业管理系统,建设完成,已经商业落地,目前在完善中</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="media">
                            <div class="media-left media-middle">
                                <i class="glyphicon glyphicon-play"></i>
                            </div>
                            <div class="media-body">
                                <h3>第二期(2020-01至2020-02)</h3>
                                <p>业主版小程序,演示版本已经上线</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="media">
                            <div class="media-left media-middle">
                                <i class="glyphicon glyphicon-play"></i>
                            </div>
                            <div class="media-body">
                                <h3>第三期(2020-03至2020-09)</h3>
                                <p>社区商城(未开始)</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>    
</section>
<!--======== end support =========-->
 
<section class="work">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2 text-center">
                <h2 class="section-title">功能列表</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <img src="images/hc_function.png" width="100%" height="500px" alt="HC小区管理系统功能列表" />
            </div>
        </div>
    </div>
</section>
 
<section class="work">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2 text-center">
                <h2 class="section-title">技术架构</h2>
            </div>
        </div>
        <div class="row" style="margin-top: 20px">
            <div class="col-md-12">
                <img src="images/system.png" width="100%" height="500px" alt="系统架构图" />
            </div>
        </div>
    </div>
</section>
 
<!--======== Our Services =========-->
<section id="service" class="service">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2 text-center">  
                <h2 class="section-title">服务架构介绍</h2>
                <p class="section-para">微服务是一种架构风格,一个大型复杂软件应用由一个或多个微服务组成。系统中的各个微服务可被独立部署,各个微服务之间是松耦合的。每个微服务仅关注于完成一件任务并很好地完成该任务。
                    在所有情况下,每个任务代表着一个小的业务能力。</p>
            </div>
        </div>   
        <div class="row">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="media">
                            <div class="media-left">
                                <i class="lnr lnr-screen"></i>
                            </div>
                            <div class="media-body">
                                <h3 class="media-heading">Spring boot</h3>
                                <p>Spring Boot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程。
                                      该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置。
                                      通过这种方式,Spring Boot 致力于在蓬勃发展的快速应用开发领域(rapidapplication development)成为领导者。</p>
                            </div>
                        </div>
                        
                        <div class="media">
                            <div class="media-left">
                                <i class="lnr lnr-screen"></i>
                            </div>
                            <div class="media-body">
                                <h3 class="media-heading">Spring Cloud</h3>
                                <p>SpringCloud是一个基于SpringBoot实现的微服务架构开发工具。它为微服务架构中涉及的配置管理、服务治理、断路器、智能路由、微代理、控制总线、全局锁、决策竞选、分布式会话和集群状态管理等操作提供了一种简单的开发方式。</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="media">
                            <div class="media-left">
                                <i class="lnr lnr-laptop-phone"></i>
                            </div>
                            <div class="media-body">
                                <h3 class="media-heading">KAFKA</h3>
                                <p>Kafka是由Apache软件基金会开发的一个开源流处理平台,由Scala和Java编写。它是一个分布式、支持分区的的、多副本,基于zookeeper协调的分布式消息系统。它的最大特性是可以实时的处理大量数据以满足各种需求场景:
                                    比如基于Hadoop的批处理系统、低延时的实时系统、storm/Spark流式处理引擎,web/nginx日志,访问日志,消息服务等等。最初由Linkedin公司开发,于2010年贡献给Apache基金会并成为顶级开源项目。
                                </p>
                            </div>
                        </div>
                        <div class="media">
                            <div class="media-left">
                                <i class="lnr lnr-screen"></i>
                            </div>
                            <div class="media-body">
                                <h3 class="media-heading">zooKeeper</h3>
                                <p>ZooKeeper 是一个开源的分布式协调服务,是 Google Chubby 的开源实现。分布式应用程序可以基于 ZooKeeper 实现诸如数据发布/订阅、负载均衡、命名服务、分布式协调/通知、集群管理、Master 选举、分布式锁和分布式队列等功能。</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="media">
                            <div class="media-left">
                                <i class="lnr lnr-tablet"></i>
                            </div>
                            <div class="media-body">
                                <h3 class="media-heading">VUE</h3>
                                <p>Vue 是一套用于构建用户界面的渐进式javascript框架,与其它大型框架不同的是:Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合,另外一个方面,当Vue与现代化的工具链以及各种支持类库结合使用时,Vue也完全能够为复杂的单页应用提供驱动。
                                    </p>
                            </div>
                        </div>
                        <div class="media">
                            <div class="media-left">
                                <i class="lnr lnr-screen"></i>
                            </div>
                            <div class="media-body">
                                <h3 class="media-heading">DOCKER容器化技术</h3>
                                <p>Docker时Docker.Lnc公司开源的一个基于LXC技术之上搭建的Container容器引擎,源代码托管在Github上,基于Go语言并遵从Apache2.0协议开源。
                                    属于Linux容器的一种封装,提供简单易用的容器使用接口。
                                    将应用程序与该程序的依赖,打包在一个文件里面。运行这个文件,就会生成一个虚拟容器。程序在这个虚拟容器里运行,就好像在真实的物理机上运行一样。有了Docker,就不用担心环境问题。
                                    总体来说,Docker的接口相当简单,用户可以方便地创建和使用容器,把自己的应用放入容器。容器还可以进行版本管理、复制、分享、修改,就像管理普通的代码一样。</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="media">
                            <div class="media-left">
                                <i class="lnr lnr-laptop"></i>
                            </div>
                            <div class="media-body">
                                <h3 class="media-heading">MYSQL</h3>
                                <p>MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下产品。MySQL 是最流行的关系型数据库管理系统之一,在 WEB 应用方面,MySQL是最好的 RDBMS (Relational Database Management System,关系数据库管理系统) 应用软件。</p>
                            </div>
                        </div>
                        <div class="media">
                            <div class="media-left">
                                <i class="lnr lnr-screen"></i>
                            </div>
                            <div class="media-body">
                                <h3 class="media-heading">JAVA</h3>
                                <p>Java是由Sun Microsystems公司于1995年5月推出的Java面向对象程序设计语言和Java平台的总称。由James Gosling和同事们共同研发,并在1995年正式推出。
                                    Java分为三个体系:
                                    JavaSE(J2SE)(Java2 Platform Standard Edition,java平台标准版)
                                    JavaEE(J2EE)(Java 2 Platform,Enterprise Edition,java平台企业版)
                                    JavaME(J2ME)(Java 2 Platform Micro Edition,java平台微型版)。
                                    2005年6月,JavaOne大会召开,SUN公司公开Java SE 6。此时,Java的各种版本已经更名以取消其中的数字"2":J2EE更名为Java EE, J2SE更名为Java SE,J2ME更名为Java ME</p>
                            </div>
                        </div>
                    </div>
                </div>   
            </div>   
        </div>   
    </div>
</section>
<!--======== end Our Services =========-->
<!--======== about us =========-->
<!--======== end about us =========-->
 
<!--======== Our portfolio =========-->
<section id="portfolio" class="work">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2 text-center">  
                <h2 class="section-title">物业管理系统</h2>
                <p class="section-para">我们对现有的产品做了一个演示环境,包含了业主管理、车位管理、小区管理等基础功能,方便各位合作伙伴及开发者朋友们更直观的了解我们的产品以及快速的加入到我们的开发者大军中来</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <img src="images/prod_001.png" width="100%" height="300px" alt="登录页面" />
            </div>
            <div class="col-md-6">
                <img src="images/prod_002.png" width="100%" height="300px" alt="物业页面" />
            </div>
        </div>
        <div class="row" style="margin-top: 20px">
            <div class="col-md-6">
                <img src="images/prod_003.png" width="100%" height="300px" alt="开发者页面" />
            </div>
            <div class="col-md-6">
                <img src="images/prod_004.png" width="100%" height="300px" alt="物业页面" />
            </div>
        </div>
 
        <div class="row" style="margin-top: 80px">
            <div class="col-md-8 col-md-offset-2 text-center">
                <h2 class="section-title">业主版小程序</h2>
                <p class="section-para">hc智慧家园小程序 是 HC小区开源项目的一个分支项目,主要给业主使用,其中包括缴物业费,缴停车费,投诉建议,家庭成员维护,房屋保修 房屋出租,公告查看,开门等功能。</p>
            </div>
        </div>
        <div class="row" style="margin-top: 20px">
            <div class="col-md-3">
                <img src="images/prod_owner_001.jpg" width="100%" height="450px" alt="业主小程序首页" />
            </div>
            <div class="col-md-3">
                <img src="images/prod_owner_002.jpg" width="100%" height="450px" alt="开发者页面" />
            </div>
            <div class="col-md-3">
                <img src="images/prod_owner_003.jpg" width="100%" height="450px" alt="业主小程序首页" />
            </div>
            <div class="col-md-3">
                <img src="images/prod_owner_004.jpg" width="100%" height="450px" alt="开发者页面" />
            </div>
        </div>
 
        <div class="row" style="margin-top: 20px">
            <div class="col-md-3">
                <img src="images/prod_owner_005.jpg" width="100%" height="450px" alt="业主小程序首页" />
            </div>
            <div class="col-md-3">
                <img src="images/prod_owner_006.jpg" width="100%" height="450px" alt="开发者页面" />
            </div>
            <div class="col-md-3">
                <img src="images/prod_owner_007.jpg" width="100%" height="450px" alt="业主小程序首页" />
            </div>
            <div class="col-md-3">
                <img src="images/prod_owner_008.jpg" width="100%" height="450px" alt="业主小程序业主信息" />
            </div>
        </div>
    </div>
</section>
<!--======== end Our Work =========-->
 
<!--======== our Team =========-->
<section id="team" class="our-experts">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2 text-center">  
                <h1 class="section-title">认识一下这帮程序猿们吧!</h2>
                <p class="section-para">我们是一群年轻,充满活力的年轻人,将自己的爱好慢慢培养成了一个完美的作品,也希望更多的人来认识我们,加入我们,让HC平台越来越完美</p>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-3">
                <div class="expert-box">
                    <img src="images/wxw.png" alt="">
                    <div class="expert-overflow">
                        <ul class="list-inline text-center">
                            <li><a href="https://weibo.com/homecommunity"><i class="fa fa-Twitter"></i></a></li>
                        </ul>
                    </div>
                    <div class="name-plate text-center">
                        <h3 class="expert-name">吴学文</h3>
                        <strong class="expert-tag">我是作者,爱代码爱生活</strong>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="expert-box">
                    <img src="images/syj.jpg" alt="">
                    <div class="expert-overflow">
                        <ul class="list-inline text-center">
                            <li><a href="https://weibo.com/p/1005056610903835/home"><i class="fa fa-Twitter"></i></a></li>
                        </ul>
                    </div>
                    <div class="name-plate text-center">
                        <h3 class="expert-name">师延俊 </h3>
                        <strong class="expert-tag">我是2号,爱生活才开始爱代码</strong>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="expert-box">
                    <img src="images/wtl.png" alt="">
                    <div class="expert-overflow">
                        <ul class="list-inline text-center">
                            <li><a href="https://weibo.com/homecommunity"><i class="fa fa-Twitter"></i></a></li>
                        </ul>
                    </div>
                    <div class="name-plate text-center">
                        <h3 class="expert-name">王天良</h3>
                        <strong class="expert-tag">我是3号:雄心壮,责任大、运维男,人人夸</strong>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="expert-box">
                    <img src="images/lzy.png" alt="">
                    <div class="expert-overflow">
                        <ul class="list-inline text-center">
                            <li><a href="https://weibo.com/homecommunity"><i class="fa fa-Twitter"></i></a></li>
                        </ul>
                    </div>
                    <div class="name-plate text-center">
                        <h3 class="expert-name">刘宗洋</h3>
                        <strong class="expert-tag">我是4号,不知道我爱什么反正还单身</strong>
                    </div>
                </div>
            </div>
        </div>    
        </div>
    </div>    
</section>
<!--======== end our Genius =========-->
 
<!--======== our sponsors =========-->
<section id="clients" class="our-sponsors">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2 text-center">  
                <h1 class="section-title">来听听程序猿们有什么想说的吧!</h2>
                <p class="section-para">平时不喜欢沟通、不怎么活泼的程序员们也有自己的理想,也会有自己的小情绪,来听听他们有什么想改变世界的想法吧!不要为此惊讶到哦。。爱想象加上勇敢的去尝试,才会有不同的生活体验。对吧!</p>
            </div>
        </div>
        <!--<div class="row">
            <div class="col-md-12">
                <ul class="list-inline sponsor-logo text-center">
                    <li><img class="img-responsive" src="images/microsoft.png" alt="client log" /></li>
                    <li><img class="img-responsive" src="images/instagram.png" alt="client log" /></li>
                    <li><img class="img-responsive" src="images/google.png" alt="client log" /></li>
                    <li><img class="img-responsive" src="images/converse.png" alt="client log" /></li>
                </ul>
            </div>
        </div>-->
        <div class="row">
            <div class="col-md-4">
                <div class="people">
                    <p>优秀的代码是它自己最好的文档。当你考虑要添加一个注释时,问问自己,“如何能改进这段代码,以让它不需要注释?</p>
                    <div class="media">
                        <div class="media-body">
                            <h3 class="media-heading">学文</h3>
                            <strong>爱代码爱生活!就是这么任性</strong>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="people">
                    <p>我想用代码改变人生的但最后我发现是人生改变了我写的代码,现在就想睡到醒、不加班写写代码</p>
                    <div class="media">
 
                        <div class="media-body">
                            <h3 class="media-heading">俊哥</h3>
                            <strong>爱生活才爱代码!我比较随性</strong>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="people">
                    <p>1. 充满热情 2. 醒悟3. 痛苦 4. 找出罪魁祸首 5. 惩罚无辜 6. 褒奖闲人</p>
                    <div class="media">
 
                        <div class="media-body">
                            <h3 class="media-heading">王天良</h3>
                            <strong>雄心壮,责任大、运维男,人人夸</strong>
                        </div>
                    </div>
                </div>
            </div>
 
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="people">
                    <p>无论在排练中演示是如何的顺利(高效),当面对真正的现场观众时,出现错误的可能性跟在场观看的人数成正比</p>
                    <div class="media">
 
                        <div class="media-body">
                            <h3 class="media-heading">宗洋</h3>
                            <strong>不知道我爱什么反正还单身</strong>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="people">
                    <p>当你想在你的代码中找到一个错误时,这很难;当你认为你的代码是不会有错误时,这就更难了。</p>
                    <div class="media">
 
                        <div class="media-body">
                            <h3 class="media-heading">刘XX</h3>
                            <strong>总回来深夜时文思泉涌</strong>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="people">
                    <p>我们这个世界的一个问题是,蠢人信誓旦旦,智人满腹狐疑。</p>
                    <div class="media">
 
                        <div class="media-body">
                            <h3 class="media-heading">王XX</h3>
                            <strong>不知道我爱什么反正还单身</strong>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--======== end recent evnt =========-->
 
<!--======== contact =========-->
<section id="contact" class="contact">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2 text-center">  
                <h2 class="section-title">联系我们</h2>
                <p class="section-para">有兴趣更深入的了解我们的产品,或者想加入我们一起来完善我们的作品请看看下面的联系方式,联系我们!加入我们!  期待与你的相遇</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 col-md-offset-2">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="sr-only" for="exampleInputEmail3">QQ群号</label>
                            <p>HC交流群:827669685(已满),799748606(群二)</p>
 
                        </div>
                    </div>
                </div>    
            </div>
 
        </div>
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <ul class="list-inline social-links text-center">
                    <li><a href="https://weibo.com/homecommunity"><i class="fa fa-Twitter"></i></a></li>
                </ul>
            </div>
        </div>
    </div>    
</section>
<!--======== end contact =========-->
 
<!--======== footer =========-->
<footer class="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-sm-12 col-md-12 text-center">
                <p>Copyright &copy; 2020.java110 All rights reserved.</p>
            </div>
        </div>
    </div>    
</footer>
<!--======== end footer =========-->
 
<!--======== All Javascript =========-->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/custom.js"></script>
</body>
 
 
<div div class="modal fade" id="ownerModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">小程序二维码</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <img src="images/hcOwner.png" alt="业主小程序"/>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
</html>