panhui před 7 roky
rodič
revize
77f19370e9

+ 184 - 0
src/main/webapp/css/home.css

@@ -0,0 +1,184 @@
+ * {
+     padding: 0;
+     margin: 0;
+ }
+ 
+ html {
+     height: 100%;
+ }
+ 
+ body {
+     max-width: 100%;
+     min-width: 1100px;
+     height: 100%;
+     overflow: auto;
+ }
+ 
+ .container {
+     position: absolute;
+     top: 0;
+     left: 0;
+     overflow: auto;
+     width: 100%;
+     height: 100%;
+ }
+ 
+ .homeTop {
+     height: 700px;
+     width: 100%;
+     background-image: url(../images/text.png), url(../images/banner.jpg);
+     background-position: center center, center center;
+     background-size: 798px 49px, cover;
+     background-repeat: no-repeat;
+ }
+ 
+ .banner {
+     width: 100%;
+     height: 110px;
+     background: linear-gradient(180deg, rgba(0, 0, 0, 0.36) 0%, rgba(0, 0, 0, 0) 100%);
+     position: fixed;
+     top: 0;
+     left: 0;
+     line-height: 110px;
+ }
+ 
+ .bannerContent {
+     max-width: 1100px;
+     margin: auto;
+ }
+ 
+ .banner img {
+     display: inline-block;
+     vertical-align: middle;
+ }
+ 
+ .banner .right {
+     display: inline-block;
+     vertical-align: middle;
+     float: right;
+ }
+ 
+ .banner .right a {
+     margin-left: 80px;
+     text-decoration: none;
+     color: #fff;
+ }
+ 
+ .banner .right a:hover {
+     color: #71C6C9;
+     /* text-decoration: underline; */
+ }
+ 
+ .content {
+     max-width: 1100px;
+     margin: auto;
+ }
+ 
+ .title {
+     background-image: url(../images/icon_biaoti.png);
+     width: 353px;
+     height: 62px;
+     text-align: center;
+     line-height: 62px;
+     font-size: 19px;
+     font-weight: bold;
+     color: rgba(255, 255, 255, 1);
+     margin: auto;
+ }
+ 
+ .page {
+     margin-top: 120px;
+ }
+ 
+ .page .text {
+     font-size: 16px;
+     color: rgba(51, 51, 51, 1);
+     line-height: 32px;
+     letter-spacing: 1px;
+     margin-top: 60px;
+     text-align: center;
+ }
+ 
+ .block {
+     margin-top: 61px;
+     text-align: center;
+ }
+ 
+ .block img {
+     width: 129px;
+     height: 149px;
+     display: inline-block;
+ }
+ 
+ .block img:nth-child(n+2) {
+     margin-left: 82px;
+ }
+ 
+ .bg {
+     background-image: url(../images/banner_zhongjian.jpg);
+     background-attachment: fixed;
+     height: 600px;
+     background-repeat: no-repeat;
+     background-size: cover;
+     line-height: 600px;
+     text-align: center;
+     margin-top: 140px;
+ }
+ 
+ .bgText {
+     display: inline-block;
+     vertical-align: middle;
+     font-size: 18px;
+     color: rgba(255, 255, 255, 1);
+     line-height: 34px;
+     letter-spacing: 1px;
+     text-align: center;
+     max-width: 1100px;
+     margin: auto;
+ }
+ 
+ .colorList {
+     width: 756px;
+     padding: 30px 0 140px;
+     margin: auto;
+ }
+ 
+ .color-item {
+     margin: 30px auto 0;
+     text-align: center;
+     height: 60px;
+ }
+ 
+ .color-item span {
+     text-align: center;
+     padding: 0 36px;
+     height: 60px;
+     background: rgba(255, 255, 255, 1);
+     box-shadow: 0px 7px 7px 0px rgba(0, 0, 0, 0.09);
+     border-radius: 29px;
+     line-height: 60px;
+     font-size: 26px;
+     font-weight: bold;
+     color: rgba(75, 167, 98, 1);
+     letter-spacing: 1px;
+     display: inline-block;
+ }
+ 
+ .bottom {
+     height: 100px;
+     background: rgba(74, 75, 77, 1);
+     text-align: center;
+     font-size: 14px;
+     line-height: 100px;
+     color: rgba(255, 255, 255, 1);
+ }
+ 
+ .bottom a {
+     color: #fff;
+     text-decoration: none;
+ }
+ 
+ .bottom a:hover {
+     text-decoration: underline;
+     color: #ccc;
+ }

+ 120 - 0
src/main/webapp/home.html

@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>享居屋</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+    <script src="js/jquery.min.js"></script>
+    <link rel="stylesheet" href="css/home.css">
+</head>
+
+<body>
+    <div class="container" id="container" onscroll="scrollPage()">
+        <div class="banner" id="banner">
+            <div class="bannerContent">
+                <img src="images/logo.png" alt="">
+                <div class="right">
+                    <a href="javascript:void(0)" onclick="goPage('homeTop')">主页</a>
+                    <a href="javascript:void(0)" onclick="goPage('introduction')">简介</a>
+                    <a href="javascript:void(0)" onclick="goPage('culture')">文化</a>
+                    <a href="javascript:void(0)" onclick="goPage('spirit')">精神</a>
+                </div>
+            </div>
+        </div>
+
+        <div class="homeTop" id="homeTop">
+
+        </div>
+
+
+        <div class="page content" id='introduction'>
+
+            <div class="title">
+                公司简介
+            </div>
+
+            <p class="text">
+                南京享居屋商业管理有公司是一家集商业管理、物业管理、房产经纪、房屋维修、保洁服务、家政服务、装饰装修设计及施工为一体的现代化房屋综合管理公司。公司自2017年成立以来发展迅猛,在南京下设数个服务中心,2018年3月成立无锡分公司市场部,2018年8月成立武汉市场部。管理房源逾几万套,为数万的年轻人提供住房服务
+            </p>
+        </div>
+
+
+        <div class="page" id='culture' style="margin-top:160px;">
+
+            <div class="title">
+                企业文化
+            </div>
+
+            <div class="block">
+                <img src="images/icon_chengxin.png" alt="">
+                <img src="images/icon_zhaunye.png" alt="">
+                <img src="images/icon_tuanjie.png" alt="">
+                <img src="images/icon_gongying.png" alt="">
+            </div>
+
+            <div class="bg">
+                <div class="bgText">
+                    南京享居屋围绕城市青年群体的生活需求,依托白领公寓租赁服务来吸引广大人群,借助互联网、信息技术等手段,搭建一个满足城市青年白领日常居住、消费、社交、文化等方面需求的多功能服务平台,立志发展成为国内知名的经营 “白领公寓”等服务业项目的品牌企业,为城市青年营造属于他们自己的“家”,并提供全方位的咨询和配套服务。
+                </div>
+            </div>
+        </div>
+
+
+        <div class="page content" id='spirit'>
+            <div class="title">
+                企业精神
+            </div>
+
+            <div class="colorList">
+                <div class="color-item">
+                    <span style="margin-left:230px;">
+                                    自我提升,良性竞争
+                            </span>
+                </div>
+                <div class="color-item">
+                    <span style="float:left;color:#69A2DA">
+                                    开拓创新,立足市场求发展
+                            </span>
+                </div>
+                <div class="color-item">
+                    <span style="float:right;color:#CE713F">
+                                    相互欣赏,相互支持
+                            </span>
+                </div>
+                <div class="color-item">
+                    <span style="color:#E6C225">
+                                    达到公司与个人共同发展
+                            </span>
+                </div>
+            </div>
+        </div>
+
+        <div class="bottom">
+            Copyright © 2018.享居屋 <a href="http://www.miitbeian.gov.cn">苏ICP备 18653686号-</a>
+        </div>
+    </div>
+
+</body>
+
+<script>
+    function scrollPage() {
+        if (document.getElementById('container').scrollTop >= document.getElementById('introduction').offsetTop - 120) {
+            document.getElementById('banner').style.background = 'linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 100%)'
+        } else {
+            document.getElementById('banner').style.background = ' linear-gradient(180deg, rgba(0, 0, 0, 0.36) 0%, rgba(0, 0, 0, 0) 100%)'
+        }
+    }
+
+    function goPage(str) {
+        console.log(document.getElementById(str).offsetTop)
+        var anh = document.getElementById(str).offsetTop - 130;
+        $("#container").stop().animate({
+            scrollTop: anh
+        }, 800);
+    }
+</script>
+
+</html>

binární
src/main/webapp/images/banner.jpg


binární
src/main/webapp/images/banner_zhongjian.jpg


binární
src/main/webapp/images/icon_biaoti.png


binární
src/main/webapp/images/icon_chengxin.png


binární
src/main/webapp/images/icon_gongying.png


binární
src/main/webapp/images/icon_tese.png


binární
src/main/webapp/images/icon_tese1.png


binární
src/main/webapp/images/icon_tuanjie.png


binární
src/main/webapp/images/icon_zhaunye.png


binární
src/main/webapp/images/logo.png


binární
src/main/webapp/images/text.png