Skip to content

T
test
提交 cd1c0562 作者: 王南南
操作

合并分支 'dev-feat/update' 到 'master' 

Dev feat/update

查看合并请求 QJMIS-CPD/CPD_company_site/web_company_site!6
上级 993ed2c8 e5cc778b
正在显示 包含 1120 行增加 和 444 行删除
.gitlab-ci.yml 0 → 100644
cache:
paths:
- node_modules/
stages:
- build
- deploy
variables:
CONTAINER_NAME: web_common_company_site
DEV_REPO: registry.cn-beijing.aliyuncs.com/qianjia2018/qianjia_dev
PROD_REPO: registry.cn-beijing.aliyuncs.com/qianjia2018/qianjia_prod
build_push_image_dev:
stage: build
before_script:
- docker login --username=wangnannan@1520818330092673 --password="qj123123" registry.cn-beijing.aliyuncs.com
script:
- docker build -t $DEV_REPO:$CONTAINER_NAME .
- docker push $DEV_REPO:$CONTAINER_NAME
tags:
- docker-run
only:
- dev
build_push_image_prod:
stage: build
before_script:
- docker login --username=wangnannan@1520818330092673 --password="qj123123" registry.cn-beijing.aliyuncs.com
script:
- docker build -t $PROD_REPO:$CONTAINER_NAME .
- docker push $PROD_REPO:$CONTAINER_NAME
tags:
- docker-run
only:
- release
remote_run_image_dev:
stage: deploy
script:
- bash ~/.local/bin/fdeploy.sh $CONTAINER_NAME 8066 80 $DEV_REPO:$CONTAINER_NAME zp 39.106.144.161
tags:
- shell-prod
only:
- dev
remote_run_image_prod:
stage: deploy
script:
- bash ~/.local/bin/fdeploy.sh $CONTAINER_NAME 8066 80 $PROD_REPO:$CONTAINER_NAME wangnn 39.106.17.245
tags:
- shell-prod
only:
- release
\ No newline at end of file
Dockerfile 0 → 100644
FROM nginx:1.13.12-alpine as production-stage
COPY . /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
README.md
# company_web > #### 项目介绍
#### 项目介绍 > #### 软件架构
{**以下是码云平台说明，您可以替换为您的项目简介** ```
码云是开源中国推出的基于 Git 的代码托管平台（同时支持 SVN）。专为开发者提供稳定、高效、安全的云端软件开发协作平台 ├─.gitlab-ci.yml
无论是个人、团队、或是企业，都能够用码云实现代码托管、项目管理、协作开发。企业项目请看 [https://gitee.com/enterprises](https://gitee.com/enterprises)} ├─about.html 视频页面
├─contactus.html 加盟页
#### 软件架构 ├─Dockerfile
软件架构说明 ├─favicon.ico
├─index.html 主页面
├─package-lock.json
#### 安装教程 ├─README.md
│
1. xxxx ├─css css文件
2. xxxx │ ├─about.css 视频页css
3. xxxx │ ├─bootstrap.min.css bootstrap压缩页面
│ ├─contactus.css 加盟页
#### 使用说明 │ ├─index.css 主页面
│ ├─join_us.css 品牌页
1. xxxx │ ├─qj_show.css 固定锚点导航
2. xxxx │ └─reset.css 页面初始化
3. xxxx │
├─font 配置文件
#### 参与贡献 │ ├─calibril.ttf
│ ├─DIN-Black.otf
1. Fork 本项目 │ └─DIN-MEDIUMALTERNATE.OTF
2. 新建 Feat_xxx 分支 │
3. 提交代码 ├─iconfont 矢量图库
4. 新建 Pull Request │ ├─demo_fontclass.html
│ ├─demo_symbol.html
│ ├─demo_unicode.html
#### 码云特技 │ ├─demo.css
│ ├─iconfont.css
1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md │ ├─iconfont.eot
2. 码云官方博客 [blog.gitee.com](https://blog.gitee.com) │ ├─iconfont.js
3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解码云上的优秀开源项目 │ ├─iconfont.svg
4. [GVP](https://gitee.com/gvp) 全称是码云最有价值开源项目，是码云综合评定出的优秀开源项目 │ ├─iconfont.ttf
5. 码云官方提供的使用手册 [http://git.mydoc.io/](http://git.mydoc.io/) │ └─iconfont.woff
6. 码云封面人物是一档用来展示码云会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/) │
\ No newline at end of file ├─images 图片
│
├─js js文件
│ ├─about.js 视频js
│ ├─banner.js 侧边栏，返回顶部
│ ├─bootstrap.min.js bootstrap的js样式
│ ├─common.js 二维码动画，六大支持动画
│ ├─commons.js 圆环事件，和地图坐标
│ ├─index.js 主页样式
│ ├─join_us.js 点击预约面试显示二维码
│ ├─jquery-1.11.1.js
│ ├─jquery-3.3.1.slim.min.js
│ ├─jquery.stellar.min.js
│ ├─popper.min.js
│ ├─qj_show.js 视频
│ ├─scroll_top.js 动画显示
│ └─wow.min.js
│
└─web_common_front 文件
```
\ No newline at end of file
css/about.css 0 → 100644
@charset "utf-8";
/* 固定锚点导航 */
#show_sidebar{
position: fixed;
left:40px;
bottom:250px;
height:30%;
z-index:999;
}
#show_sidebar div{
position: relative;
width:11px;
height:11px;
margin-bottom:27px;
border-radius: 50%;
background:#808080;
}
#show_sidebar div::after{
position: absolute;
top:11px;
left:4.5px;
content:"";
width: 1px;
height:195px;
padding-bottom:11px;
background: #808080;
}
#show_sidebar a{
position: relative;
display: block;
text-decoration: none;
font-size: 12px;
color:#808080;
margin:0px 0px 27px 34px;
}
#show_sidebar a::before{
position: absolute;
left:-32px;
top:50%;
margin-top:-3.5px;
content:'';
display: inline-block;
width:7px;
height:7px;
border-radius: 50%;
background:#808080;
}
#show_sidebar .li_mouseover{
color:#b3b3b3;
}
#show_sidebar .li_mouseover::before{
background:#b3b3b3;
}
#show_sidebar .li_click{
color:#24b298;
}
#show_sidebar .li_click::before{
left:-33px;
width:9px;
height:9px;
background:#24b298;
}
/* 千家风采页样式 */
header {
height: 82px;
background-color: pink;
}
.first_video video {
object-fit: fill;
width: 100%;
}
/* 模块标题 */
#content2 {
margin-top:60px;
}
.model_top h1 {
font-size: 30px;
line-height: 28px;
padding-top: 60px;
text-align: center;
color: #192d3b;
}
.model_top span {
font-size: 12px;
color: #192d3b;
display: block;
line-height: 12px;
text-align: center;
letter-spacing: 1.5px;
}
.model_top h1:after {
content: "";
display: block;
width: 93px;
height: 2px;
margin: 28px auto;
border-bottom: 2px solid #24b298;
}
/* 视差背景1 */
#content2 {
height: 650px;
background: url(../images/team_bgc.jpg) no-repeat;
opacity: 0.65;
}
/* 视差内容1 */
#content3 .team {
background-color: #fff;
box-shadow: 0 0 20px rgba(0, 0, 0 , .15);
position: relative;
}
#content3 .team1{
margin-top: -300px;
}
/* 开头文字 */
#content3 .top_words{
position: absolute;
top:-15px;
font-family: "Microsoft";
letter-spacing: 2px;
}
#content3 .top_words span{
display: inline-block;
font-size: 30px;
line-height:30px;
color: #24b298;
word-spacing: 5px;
}
#content3 .top_words .left_words {
position: relative;
height:30px;
font-size: 30px;
line-height: 30px;
color: #464646;
padding-right:15px;
}
#content3 .top_words .one_word::after{
position: absolute;
top:0px;
left:0px;
content:'WE ARE THE';
display: block;
height:15px;
overflow: hidden;
font-size: 30px;
line-height: 30px;
word-spacing: 5px;
color:#fff;
}
/* 样式模板 丽景琴园团队 */
.team_msg {
margin-left: 30px;
}
/* 团队名称 */
.team_msg h1 {
font-size: 30px;
line-height: 30px;
color: #192d3b;
margin-top:142px;
}
/* 团队介绍 */
.team_msg .team_int{
position: relative;
margin: 40px 0px 0px 42px;
}
.team_msg p {
color: #545454;
font-weight: 600;
margin-top: 18px;
}
.team_int span {
position: relative;
display: block;
color: #545454;
margin-top: 18px;
}
.team_int span::before {
position: absolute;
top:0px;
left:-34px;
content: "";
width: 10px;
height: 10px;
display: inline-block;
background-color: #d4d4d4;
border-radius: 50%;
margin-top: 6px;
}
.team_msg .line {
position: absolute;
top:0px;
left:-30px;
width: 2px;
height: 100%;
padding-bottom:30px;
background-color: #d4d4d4;
}
.team1_video video {
object-fit: fill;
width: 888px;
height: 580px;
margin:14px;
}
/* 龙云楼团队 */
/* 团队名称 */
#content3 .team2 .top_words{
right:0px;
text-align: right;
}
#content3 .team2 .team_msg h1 {
margin-top:175px;
}
#content3 .team4 .team_msg,
#content3 .team2 .team_msg,
#content3 .team6 .team_msg {
margin: 0px 35px 0px 0px;
text-align: right;
}
/* 团队介绍 */
#content3 .team2 .team_msg .team_int,
#content3 .team4 .team_msg .team_int,
#content3 .team6 .team_msg .team_int{
margin: 40px 42px 0px 0px;
}
#content3 .team2 .team_int span::before,
#content3 .team4 .team_int span::before,
#content3 .team6 .team_int span::before{
display: none;
}
#content3 .team2 .team_int span::after,
#content3 .team4 .team_int span::after,
#content3 .team6 .team_int span::after{
position: absolute;
top:0px;
right:-30px;
content: "";
width: 10px;
height: 10px;
display: inline-block;
background-color: #d4d4d4;
border-radius: 50%;
margin-top: 6px;
}
#content3 .team2 .team_msg .line {
left: 223px;
}
#content3 .team4 .team_msg .line {
left: 195px;
}
#content3 .team6 .team_msg .line {
left: 206px;
}
#content3 .team{
margin-bottom:135px;
}
#content3 .team:last-of-type{
margin-bottom:0px;
}
/* 新一中团队 */
#content3 .team3 .top_words .left_words {
padding:0px 0px 0px 15px;
}
#content3 .team3 .team_msg h1 {
margin-top:190px;
}
/* 个人风采 */
#person_mien .mien_content{
margin-top:60px;
padding-bottom:30px;
}
#person_mien .person_box{
position: relative;
height:570px;
}
#person_mien .person_box ul li img{
width: 349px;
height: 509px;
}
#person_mien .person_photo{
position: absolute;
bottom:0px;
left:0px;
}
#person_mien .person_photo li{
float:left;
margin-right:30px;
transition: all .5s ease;
cursor: pointer;
}
#person_mien .person_photo li img{
display: block;
}
#person_mien .person_photo .li_hover{
box-shadow: 0px 0px 20px #e2e6ec;
margin-top:-60px;
transform: scale(1.05)
}
#person_mien .person_photo li:last-of-type{
margin-right:0px;
}
#person_mien .person_content{
margin-top:60px;
}
#person_mien .team1_video video {
object-fit: fill;
width: 605px;
height: 405px;
margin:0px 200px 0px 0px;
}
#person_mien .personage{
display: none;
}
#person_mien .zhaoyue .team_msg h1 {
margin-top:115px;
}
#person_mien .team_msg h1 {
margin-top:60px;
}
#person_mien .team_msg {
margin-left: 0px;
}
#person_mien .preson_store{
font-size: 16px;
line-height:16px;
}
.team_int span {
margin-top: 10px;
}
#content3 .team5 .top_words span:last-child{
margin-left: 8px;
}
#content3 .team4 .future {
position: absolute;
right: 0;
top: -15px;
}
/* 视差背景图2 */
#content4 {
height: 655px;
background-image:url(../images/school_bgc.jpg);
background-position-y: 500px;
opacity: 0.65;
margin-top:90px;
}
/* 视差内容2 */
#content5{
position: relative;
height:215px;
padding-bottom:30px;
}
#content5 .main_body{
position: absolute;
box-shadow: 0px 0px 20px #918b8b;
top:-475px;
left:50%;
margin-left:-600px;
}
#content5 .main_body video{
display: block;
object-fit: fill;
width: 1200px;
height: 690px;
margin:0px 200px 0px 0px;
}
/* 精彩短片 */
#video_banner .box_show{
position: relative;
width:100%;
height:306px;
margin-top:86px;
overflow: hidden;
}
#video_banner .box_show .video_box{
position: absolute;
top:0px;
left:0px;
width:154.34%;
}
#video_banner .box_show li{
width:438px;
height:100%;
margin-right:25px;
float:left;
position: relative;
}
#video_banner .box_show li .switch{
position: absolute;
top: 90px;
left: 200px;
width: 62px;
height: 62px;
border-radius: 50%;
background: url(../images/switch.jpg);
z-index: 100;
}
#video_banner .box_show li video{
object-fit: fill;
width:100%;
height:100%;
}
css/bootstrap.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
css/join_us.css
...@@ -221,14 +221,14 @@ ...@@ -221,14 +221,14 @@
width:760px; width:760px;
height:2px; height:2px;
border-bottom:1px dotted #cecdcd; border-bottom:1px dotted #cecdcd;
z-index: 999; z-index: 98;
} }
.partner_flow div{ .partner_flow div{
position: absolute; position: absolute;
left:50%; left:50%;
margin-left:-413px; margin-left:-413px;
z-index: 1000; z-index: 99;
} }
.partner_flow .flow_number{ .partner_flow .flow_number{
width:778px; width:778px;
...@@ -264,9 +264,10 @@ ...@@ -264,9 +264,10 @@
#qj_map .map { #qj_map .map {
margin-top: 60px; margin-top: 60px;
width: 100%; width: 100%;
overflow: hidden;
} }
#qj_map .map img { #qj_map .map img {
width: 100%; display: block;
} }
/* 底部 */ /* 底部 */
footer { footer {
...@@ -283,7 +284,6 @@ footer { ...@@ -283,7 +284,6 @@ footer {
} }
footer .support { footer .support {
font-size: 12px; font-size: 12px;
font-weight: 600;
color: #fff; color: #fff;
margin-left: 50%; margin-left: 50%;
transform: translate(-65px); transform: translate(-65px);
......
css/qj_show.css
@charset "utf-8"; @charset "utf-8";
/* 固定锚点导航 */
#show_sidebar{ #show_sidebar{
position: fixed; position: fixed;
left:87px; left:40px;
bottom:250px;
height:30%; height:30%;
z-index:999;
} }
#show_sidebar div{ #show_sidebar div{
position: relative; position: relative;
width:11px; width:11px;
height:11px; height:11px;
margin-bottom:38px; margin-bottom:27px;
border-radius: 50%; border-radius: 50%;
background:#808080; background:#808080;
} }
#show_sidebar div::after{ #show_sidebar div::after{
position: absolute; position: absolute;
top:0px; top:7px;
left:4.5px; left:4.5px;
content:""; content:"";
width: 2px; width: 1px;
height:195px; height:195px;
padding-bottom:11px;
background: #808080; background: #808080;
} }
#show_sidebar li{ #show_sidebar a{
position: relative;
display: block;
text-decoration: none;
font-size: 12px;
color:#808080; color:#808080;
margin:0px 0px 27px 34px;
} }
#show_sidebar li::before{ #show_sidebar a::before{
position: absolute;
left:-32px;
top:50%;
margin-top:-3.5px;
content:''; content:'';
display: block; display: inline-block;
width:7px; width:7px;
height:7px; height:7px;
border-radius: 50%; border-radius: 50%;
...@@ -39,9 +52,13 @@ ...@@ -39,9 +52,13 @@
background:#b3b3b3; background:#b3b3b3;
} }
#show_sidebar .li_click{ #show_sidebar .li_click{
color:#24b298;
}
#show_sidebar .li_click::before{
left:-33px;
width:9px; width:9px;
height:9px; height:9px;
color:#24b298; background:#24b298;
} }
#show_sidebar div{ #show_sidebar div{
width:11px; width:11px;
...@@ -92,7 +109,7 @@ header { ...@@ -92,7 +109,7 @@ header {
/* 视差内容1 */ /* 视差内容1 */
#content3 .team { #content3 .team {
background-color: #fff; background-color: #fff;
box-shadow: 0 0 20px rgb(228, 219, 219); box-shadow: 0 0 20px rgba(0, 0, 0 , .15);
position: relative; position: relative;
} }
#content3 .team1{ #content3 .team1{
...@@ -105,7 +122,6 @@ header { ...@@ -105,7 +122,6 @@ header {
left:0px; left:0px;
letter-spacing: 2px; letter-spacing: 2px;
} }
#content3 .top_words span{ #content3 .top_words span{
display: inline-block; display: inline-block;
font-size: 30px; font-size: 30px;
...@@ -136,7 +152,7 @@ header { ...@@ -136,7 +152,7 @@ header {
} }
/* 样式模板 丽景琴园团队 */ /* 样式模板 丽景琴园团队 */
.team_msg { .team_msg {
margin-left: 107px; margin-left: 35px;
} }
/* 团队名称 */ /* 团队名称 */
.team_msg h1 { .team_msg h1 {
...@@ -184,7 +200,7 @@ header { ...@@ -184,7 +200,7 @@ header {
} }
.team1_video video { .team1_video video {
object-fit: fill; object-fit: fill;
width: 700px; width: 800px;
height: 580px; height: 580px;
margin:14px; margin:14px;
} }
...@@ -197,18 +213,22 @@ header { ...@@ -197,18 +213,22 @@ header {
#content3 .team2 .team_msg h1 { #content3 .team2 .team_msg h1 {
margin-top:175px; margin-top:175px;
} }
#content3 .team4 .team_msg,
#content3 .team2 .team_msg { #content3 .team2 .team_msg {
margin-right: 107px; margin: 0px 45px 0px 0px;
text-align: right; text-align: right;
} }
/* 团队介绍 */ /* 团队介绍 */
#content3 .team2 .team_msg .team_int{ #content3 .team2 .team_msg .team_int,
#content3 .team4 .team_msg .team_int{
margin: 40px 42px 0px 0px; margin: 40px 42px 0px 0px;
} }
#content3 .team2 .team_int span::before{ #content3 .team2 .team_int span::before,
#content3 .team4 .team_int span::before{
display: none; display: none;
} }
#content3 .team2 .team_int span::after { #content3 .team2 .team_int span::after,
#content3 .team4 .team_int span::after{
position: absolute; position: absolute;
top:0px; top:0px;
right:-34px; right:-34px;
...@@ -223,9 +243,14 @@ header { ...@@ -223,9 +243,14 @@ header {
#content3 .team2 .team_msg .line { #content3 .team2 .team_msg .line {
left: 227px; left: 227px;
} }
#content3 .team2, #content3 .team4 .team_msg .line {
#content3 .team3{ left: 300px;
margin-top:135px; }
#content3 .team{
margin-bottom:135px;
}
#content3 .team:last-of-type{
margin-bottom:0px;
} }
/* 新一中团队 */ /* 新一中团队 */
#content3 .team3 .top_words .left_words { #content3 .team3 .top_words .left_words {
...@@ -277,7 +302,7 @@ header { ...@@ -277,7 +302,7 @@ header {
#person_mien .personage{ #person_mien .personage{
display: none; display: none;
} }
#person_mien .dongzuojin .team_msg h1 { #person_mien .zhaoyue .team_msg h1 {
margin-top:115px; margin-top:115px;
} }
#person_mien .team_msg h1 { #person_mien .team_msg h1 {
...@@ -346,3 +371,9 @@ header { ...@@ -346,3 +371,9 @@ header {
width:100%; width:100%;
height:100%; height:100%;
} }
#footer .show {
padding-top: 25px;
}
#footer #words {
margin-top: 30px;
}
\ No newline at end of file
css/reset.css
...@@ -57,26 +57,6 @@ textarea { ...@@ -57,26 +57,6 @@ textarea {
} }
/* 将斜体扶正 */
/* address,
cite,
dfn,
em,
var {
font-style: normal;
} */
/* 小于 12px 的中文很难阅读, 让 small 正常化 */
/*
small {
font-size: 12px;
} */
/** 重置列表元素 **/ /** 重置列表元素 **/
ul, ul,
...@@ -262,14 +242,14 @@ button { ...@@ -262,14 +242,14 @@ button {
font-family: 'calibril'; font-family: 'calibril';
src: url('../font/calibril.ttf') src: url('../font/calibril.ttf')
} }
/* @font-face{ @font-face{
font-family: 'DIN Black'; font-family: 'mediumal_ternate';
src: url('../font/DIN-Black.otf') src: url('../font/DIN-MEDIUMALTERNATE.OTF')
} */ }
/* 去掉video controls的下载按钮 */ /* video标签去掉右下方下载按钮 */
video::-internal-media-controls-download-button { video::-internal-media-controls-download-button {
display:none; display:none;
} }
video::-webkit-media-controls-enclosure { video::-webkit-media-controls-enclosure {
overflow:hidden; overflow:hidden;
......
iconfont/demo_fontclass.html
...@@ -31,6 +31,12 @@ ...@@ -31,6 +31,12 @@
</li> </li>
<li> <li>
<i class="icon iconfont icon-iconfonticon6"></i>
<div class="name">qq</div>
<div class="fontclass">.icon-iconfonticon6</div>
</li>
<li>
<i class="icon iconfont icon-37"></i> <i class="icon iconfont icon-37"></i>
<div class="name">电话</div> <div class="name">电话</div>
<div class="fontclass">.icon-37</div> <div class="fontclass">.icon-37</div>
...@@ -175,12 +181,24 @@ ...@@ -175,12 +181,24 @@
</li> </li>
<li> <li>
<i class="icon iconfont icon-fuwu2"></i>
<div class="name">服 务</div>
<div class="fontclass">.icon-fuwu2</div>
</li>
<li>
<i class="icon iconfont icon-fangzi-"></i> <i class="icon iconfont icon-fangzi-"></i>
<div class="name">房子01-02</div> <div class="name">房子01-02</div>
<div class="fontclass">.icon-fangzi-</div> <div class="fontclass">.icon-fangzi-</div>
</li> </li>
<li> <li>
<i class="icon iconfont icon-wangluo"></i>
<div class="name">网络</div>
<div class="fontclass">.icon-wangluo</div>
</li>
<li>
<i class="icon iconfont icon-rencaiku1"></i> <i class="icon iconfont icon-rencaiku1"></i>
<div class="name">人才库</div> <div class="name">人才库</div>
<div class="fontclass">.icon-rencaiku1</div> <div class="fontclass">.icon-rencaiku1</div>
...@@ -229,12 +247,30 @@ ...@@ -229,12 +247,30 @@
</li> </li>
<li> <li>
<i class="icon iconfont icon-fuwu"></i>
<div class="name">服务</div>
<div class="fontclass">.icon-fuwu</div>
</li>
<li>
<i class="icon iconfont icon-fuwu1"></i>
<div class="name">服务</div>
<div class="fontclass">.icon-fuwu1</div>
</li>
<li>
<i class="icon iconfont icon-ren"></i> <i class="icon iconfont icon-ren"></i>
<div class="name">人</div> <div class="name">人</div>
<div class="fontclass">.icon-ren</div> <div class="fontclass">.icon-ren</div>
</li> </li>
<li> <li>
<i class="icon iconfont icon-dizhi"></i>
<div class="name">地址</div>
<div class="fontclass">.icon-dizhi</div>
</li>
<li>
<i class="icon iconfont icon-jiangbei"></i> <i class="icon iconfont icon-jiangbei"></i>
<div class="name">奖杯</div> <div class="name">奖杯</div>
<div class="fontclass">.icon-jiangbei</div> <div class="fontclass">.icon-jiangbei</div>
...@@ -247,6 +283,12 @@ ...@@ -247,6 +283,12 @@
</li> </li>
<li> <li>
<i class="icon iconfont icon-dianhua"></i>
<div class="name">电话</div>
<div class="fontclass">.icon-dianhua</div>
</li>
<li>
<i class="icon iconfont icon-wangluo1"></i> <i class="icon iconfont icon-wangluo1"></i>
<div class="name">网络</div> <div class="name">网络</div>
<div class="fontclass">.icon-wangluo1</div> <div class="fontclass">.icon-wangluo1</div>
...@@ -271,9 +313,9 @@ ...@@ -271,9 +313,9 @@
</li> </li>
<li> <li>
<i class="icon iconfont icon-wangluo"></i> <i class="icon iconfont icon-network"></i>
<div class="name">网络</div> <div class="name">网络</div>
<div class="fontclass">.icon-wangluo</div> <div class="fontclass">.icon-network</div>
</li> </li>
</ul> </ul>
......
iconfont/demo_symbol.html
...@@ -53,6 +53,14 @@ ...@@ -53,6 +53,14 @@
<li> <li>
<svg class="icon" aria-hidden="true"> <svg class="icon" aria-hidden="true">
<use xlink:href="#icon-iconfonticon6"></use>
</svg>
<div class="name">qq</div>
<div class="fontclass">#icon-iconfonticon6</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-37"></use> <use xlink:href="#icon-37"></use>
</svg> </svg>
<div class="name">电话</div> <div class="name">电话</div>
...@@ -245,6 +253,14 @@ ...@@ -245,6 +253,14 @@
<li> <li>
<svg class="icon" aria-hidden="true"> <svg class="icon" aria-hidden="true">
<use xlink:href="#icon-fuwu2"></use>
</svg>
<div class="name">服 务</div>
<div class="fontclass">#icon-fuwu2</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-fangzi-"></use> <use xlink:href="#icon-fangzi-"></use>
</svg> </svg>
<div class="name">房子01-02</div> <div class="name">房子01-02</div>
...@@ -253,6 +269,14 @@ ...@@ -253,6 +269,14 @@
<li> <li>
<svg class="icon" aria-hidden="true"> <svg class="icon" aria-hidden="true">
<use xlink:href="#icon-wangluo"></use>
</svg>
<div class="name">网络</div>
<div class="fontclass">#icon-wangluo</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-rencaiku1"></use> <use xlink:href="#icon-rencaiku1"></use>
</svg> </svg>
<div class="name">人才库</div> <div class="name">人才库</div>
...@@ -317,6 +341,22 @@ ...@@ -317,6 +341,22 @@
<li> <li>
<svg class="icon" aria-hidden="true"> <svg class="icon" aria-hidden="true">
<use xlink:href="#icon-fuwu"></use>
</svg>
<div class="name">服务</div>
<div class="fontclass">#icon-fuwu</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-fuwu1"></use>
</svg>
<div class="name">服务</div>
<div class="fontclass">#icon-fuwu1</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-ren"></use> <use xlink:href="#icon-ren"></use>
</svg> </svg>
<div class="name">人</div> <div class="name">人</div>
...@@ -325,6 +365,14 @@ ...@@ -325,6 +365,14 @@
<li> <li>
<svg class="icon" aria-hidden="true"> <svg class="icon" aria-hidden="true">
<use xlink:href="#icon-dizhi"></use>
</svg>
<div class="name">地址</div>
<div class="fontclass">#icon-dizhi</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-jiangbei"></use> <use xlink:href="#icon-jiangbei"></use>
</svg> </svg>
<div class="name">奖杯</div> <div class="name">奖杯</div>
...@@ -341,6 +389,14 @@ ...@@ -341,6 +389,14 @@
<li> <li>
<svg class="icon" aria-hidden="true"> <svg class="icon" aria-hidden="true">
<use xlink:href="#icon-dianhua"></use>
</svg>
<div class="name">电话</div>
<div class="fontclass">#icon-dianhua</div>
</li>
<li>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-wangluo1"></use> <use xlink:href="#icon-wangluo1"></use>
</svg> </svg>
<div class="name">网络</div> <div class="name">网络</div>
...@@ -373,10 +429,10 @@ ...@@ -373,10 +429,10 @@
<li> <li>
<svg class="icon" aria-hidden="true"> <svg class="icon" aria-hidden="true">
<use xlink:href="#icon-wangluo"></use> <use xlink:href="#icon-network"></use>
</svg> </svg>
<div class="name">网络</div> <div class="name">网络</div>
<div class="fontclass">#icon-wangluo</div> <div class="fontclass">#icon-network</div>
</li> </li>
</ul> </ul>
......
iconfont/demo_unicode.html
...@@ -51,6 +51,12 @@ ...@@ -51,6 +51,12 @@
</li> </li>
<li> <li>
<i class="icon iconfont">&#xe62e;</i>
<div class="name">qq</div>
<div class="code">&amp;#xe62e;</div>
</li>
<li>
<i class="icon iconfont">&#xe671;</i> <i class="icon iconfont">&#xe671;</i>
<div class="name">电话</div> <div class="name">电话</div>
<div class="code">&amp;#xe671;</div> <div class="code">&amp;#xe671;</div>
...@@ -195,12 +201,24 @@ ...@@ -195,12 +201,24 @@
</li> </li>
<li> <li>
<i class="icon iconfont">&#xe603;</i>
<div class="name">服 务</div>
<div class="code">&amp;#xe603;</div>
</li>
<li>
<i class="icon iconfont">&#xe62f;</i> <i class="icon iconfont">&#xe62f;</i>
<div class="name">房子01-02</div> <div class="name">房子01-02</div>
<div class="code">&amp;#xe62f;</div> <div class="code">&amp;#xe62f;</div>
</li> </li>
<li> <li>
<i class="icon iconfont">&#xe60e;</i>
<div class="name">网络</div>
<div class="code">&amp;#xe60e;</div>
</li>
<li>
<i class="icon iconfont">&#xe63c;</i> <i class="icon iconfont">&#xe63c;</i>
<div class="name">人才库</div> <div class="name">人才库</div>
<div class="code">&amp;#xe63c;</div> <div class="code">&amp;#xe63c;</div>
...@@ -249,12 +267,30 @@ ...@@ -249,12 +267,30 @@
</li> </li>
<li> <li>
<i class="icon iconfont">&#xe6d4;</i>
<div class="name">服务</div>
<div class="code">&amp;#xe6d4;</div>
</li>
<li>
<i class="icon iconfont">&#xe6d9;</i>
<div class="name">服务</div>
<div class="code">&amp;#xe6d9;</div>
</li>
<li>
<i class="icon iconfont">&#xe6c5;</i> <i class="icon iconfont">&#xe6c5;</i>
<div class="name">人</div> <div class="name">人</div>
<div class="code">&amp;#xe6c5;</div> <div class="code">&amp;#xe6c5;</div>
</li> </li>
<li> <li>
<i class="icon iconfont">&#xe672;</i>
<div class="name">地址</div>
<div class="code">&amp;#xe672;</div>
</li>
<li>
<i class="icon iconfont">&#xea27;</i> <i class="icon iconfont">&#xea27;</i>
<div class="name">奖杯</div> <div class="name">奖杯</div>
<div class="code">&amp;#xea27;</div> <div class="code">&amp;#xea27;</div>
...@@ -267,6 +303,12 @@ ...@@ -267,6 +303,12 @@
</li> </li>
<li> <li>
<i class="icon iconfont">&#xe76d;</i>
<div class="name">电话</div>
<div class="code">&amp;#xe76d;</div>
</li>
<li>
<i class="icon iconfont">&#xe707;</i> <i class="icon iconfont">&#xe707;</i>
<div class="name">网络</div> <div class="name">网络</div>
<div class="code">&amp;#xe707;</div> <div class="code">&amp;#xe707;</div>
...@@ -291,9 +333,9 @@ ...@@ -291,9 +333,9 @@
</li> </li>
<li> <li>
<i class="icon iconfont">&#xe655;</i> <i class="icon iconfont">&#xe502;</i>
<div class="name">网络</div> <div class="name">网络</div>
<div class="code">&amp;#xe655;</div> <div class="code">&amp;#xe502;</div>
</li> </li>
</ul> </ul>
......
iconfont/iconfont.eot
No preview for this file type
iconfont/iconfont.js
This source diff could not be displayed because it is too large. You can view the blob instead.
iconfont/iconfont.ttf
No preview for this file type
join_us.html deleted 100644 → 0
<!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>
<meta name="keywords" content="唐山房产,唐山房产网，唐山千家房地产"/>
<meta name="description" content="唐山千家房产网由唐山千家房地产经纪有限公司投资创办，是唐山最大的房地产企业,提供优质的购房体验.200多家线下门店,3000多位经纪人,强大的技术后台支撑,只为给您找到一个温暖的家." />
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./iconfont/iconfont.css">
<link rel="stylesheet" href="./css/join_us.css">
</head>
<body>
<!-- 固定导航 -->
<div id="top_nav" class="header_scroll">
<div class="main_body clear">
<a class="logo left" href="./index.html#top">
<img src="./images/brand_first.png" alt="" class="left">
<p class="left">千家地产</p>
</a>
<div class="nav right">
<a class="nav_first" href="./index.html#top">首页</a>
<a href="#to_company">公司介绍</a>
<a href="#to_department">招贤纳士</a>
<a href="#to_cours">发展历程</a>
<a href="#to_product">产品服务</a>
<a href="./join_us.html" class="choosed">品牌加盟</a>
<a class="nav_last" href="qj_show.html">千家风采</a>
</div>
</div>
</div>
<!-- 海报 -->
<div id="poster">
<div class="poster_banner">
<div class="main clear">
<div class="banner_left left">
<div id="order">预约面试</div>
</div>
<div class="wechat">
<img id="code_img" src="./images/office_accounts.jpg" alt="">
</div>
</div>
</div>
</div>
<!-- 品牌介绍和加盟流程 -->
<div id="partner_body">
<ul class="partner_listone clear">
<li class="left">
<i class="iconfont icon-rcfz"></i>
<div class="introduce">
<p>现有门店<span>2000</span>位专业经纪</p>
<p>人，拥有国家经纪人资格证<br/></p>
<p><span>223</span>人，协理<span>300</span>人</p>
</div>
</li>
<li class="left">
<i class="iconfont icon-share"></i>
<div class="introduce">
<p>共享千家地产资源</p>
<p>现有房源<span>8</span>万</p>
<p>客源<span>7</span>万</p>
</div>
</li>
<li class="left">
<i class="iconfont icon-renminbi3"></i>
<div class="introduce">
<p><span>免</span>加盟费，仅收取平台</p>
<p>运营费<span>800</span>元/月</p>
</div>
</li>
</ul>
<ul class="partner_list clear">
<li class="list_img1"></li>
<li class="partner_list1">
<p>千家品牌名片支撑：</p>
<p>
①十四年名企。（2004年-2018年）<br/>
②河北省唯一一家商务部备案房地产企业。<br/>
③唐山百万家庭放心置业首选。客户认可度高，老百姓认可企业<br/>
④权威部门数据采集企业。<br/>
⑤电视台专访企业。<br/>
公司每年广告宣传支持费用<span>200余万</span>
</p>
</li>
<li class="partner_list2">
<p>千家系统支持：</p>
<p>
<span>免费</span>千家商学院，数百套名师授课精品视频。<br/>
一线名企顾问讲师定期培训。<br/>
行业公开课，分享行业内的最新资讯。<br/>
公司年会，提供学习分享观摩交流平台<br/>
季度启动会，优秀员工、团队表彰。<br/>
周店长培训会。<br/>
新员工入司培训。
</p>
</li>
<li class="list_img2"></li>
<li class="list_img3"></li>
<li class="partner_list3">
<p>权证支持：</p>
<p>
20余家银行信贷协议合作单位<br/>
一站式服务制定最佳信贷组合方案<br/>
优质的员工培养平台<br/>
合同文书、法律顾问<br/>
</p>
</li>
</ul>
<div class="partner_line">
<div class="login_content">
<div>加盟流程</div>
</div>
</div>
<div class="partner_flow">
<p></p>
<div>
<ul class="flow_number clear">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<ul class="flow_text clear">
<li>意向咨询</li>
<li>洽谈指导</li>
<li>店址考察</li>
<li>签署协议</li>
<li>运营准备</li>
<li>门店营业</li>
</ul>
</div>
</div>
</div>
<!-- 千家大地图 -->
<a id="to_map" name="to_map"></a>
<div id="qj_map">
<div class="model_top">
<div class="model_title">千家大地图</div>
<p class="model_eng">MAP</p>
</div>
<div class="map">
<img src="./images/map.jpg" alt="">
</div>
</div>
<!-- 底部 -->
<footer>
<div class="fotter_logo">
<img src="./images/white_logo.png" alt="">
</div>
<div class="support">千家网络科技提供技术</div>
</footer>
</body>
<script src="./js/join_us.js"></script>
</html>
\ No newline at end of file
js/about.js 0 → 100644
window.onload = function () {
// 左侧固定导航样式
var show_sidebar = document.getElementById("show_sidebar")
var sidebar_li = show_sidebar.getElementsByTagName("a")
for(var k = 0;k < sidebar_li.length ; k++){
sidebar_li[k].index = k;
sidebar_li[k].onmouseover = function(){
for(var b = 0; b < sidebar_li.length ; b++){
sidebar_li[b].classList.remove("li_mouseover")
}
sidebar_li[this.index].classList.add("li_mouseover")
}
sidebar_li[k].onmouseout = function(){
for(var b = 0; b < sidebar_li.length ; b++){
sidebar_li[b].classList.remove("li_mouseover")
}
}
sidebar_li[k].onclick = function(){
for(var b = 0; b < sidebar_li.length ; b++){
sidebar_li[b].classList.remove("li_click")
}
sidebar_li[this.index].classList.add("li_click")
}
}
// 公司宣传视频
var company_video = document.getElementById("company_video")
company_video.style.height = window.screen.height - 170 + "px";
// 视差滚动
$.stellar({
horizontalScrolling: false,
responsive: true
});
// 个人风采效果
var photo = document.getElementById("person_photo");
var photo_single = photo.getElementsByTagName("li")
var content_single = document.getElementsByClassName("personage")
for(var i = 0;i < photo_single.length ; i++){
photo_single[i].index = i;
photo_single[i].onmouseover = function(){
for(var a = 0; a < photo_single.length ; a++){
photo_single[a].classList.remove("li_hover")
content_single[a].style.display="none";
}
photo_single[this.index].classList.add("li_hover")
content_single[this.index].style.display = "block";
}
}
// 视频轮播
var video_banner = document.getElementById("video_banner");
var video_box = video_banner.getElementsByClassName("video_box")[0]
var video_single = video_banner.getElementsByTagName("li");
var timer=null;
var speed=-2;
video_box.innerHTML+=video_box.innerHTML;
video_box.style.width=(video_single[0].offsetWidth+25)*video_single.length+"px"
function autoPlay(){
timer=setInterval(function(){
video_box.style.left=video_box.offsetLeft+speed+"px";
if(video_box.offsetLeft<-video_box.offsetWidth/2){
video_box.style.left="0px";
}else if(video_box.offsetLeft>0){
video_box.style.left=-video_box.offsetWidth/2+"px";
}
},14);
}
autoPlay();
//点击停掉其他播放事件
$("#videoBox li video").controls=false;
var sss=$("#videoBox li video");
function aa(){
for(var i=0;i<sss.length;i++){
if(sss[i].paused===true){
}else{
clearInterval(timer);
return ;
}
}
}
$("#videoBox li").bind("click","video",function(){
$(this).children(".switch").css("background-image","url(images/switch1.jpg)")
let url = this.getElementsByTagName("video")[0]
if(url.paused == true){
url.play();
for(let i =0;i<$(this).siblings().find("video").length;i++){
$(this).siblings().find("video")[i].pause()
}
$(this).siblings().find("div").css("background-image","url(images/switch.jpg)")
}else{
$(this).find("div").css("background-image","url(images/switch.jpg)")
url.pause()
}
})
$("#videoBox li").mouseover(function(){
for(let i =0;i<$("#videoBox li").length;i++){
$(this).find(".switch").show();
}
});
video_box.onmouseover=function(){
clearInterval(timer);
};
video_box.onmouseout=function(){
autoPlay();
aa();
$("#videoBox li .switch").hide()
}
window.onscroll = function(){
show_scroll()
}
// 滚轮 左导航样式
function show_scroll(){
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
let scroll_one = document.getElementById("scroll_one").offsetTop - 90
let scroll_two = document.getElementById("scroll_two").offsetTop - 90
let scroll_three = document.getElementById("scroll_three").offsetTop - 90
let scroll_four = document.getElementById("scroll_four").offsetTop -240
let show_sidebar = document.getElementById("show_sidebar")
let sidebar_li = show_sidebar.getElementsByTagName("a")
let show_top = show_sidebar.getElementsByTagName("div")[0]
for(var k = 0;k < sidebar_li.length ; k++){
sidebar_li[k].classList.remove("li_click")
show_top.style.background="#808080";
switch(true){
case scrollTop<scroll_one:
show_top.style.background="#24b298";
break;
case scrollTop>=scroll_one && scrollTop<scroll_two:
sidebar_li[0].classList.add("li_click");
break;
case scrollTop>=scroll_two && scrollTop<scroll_three:
sidebar_li[1].classList.add("li_click");
break;
case scrollTop>=scroll_three && scrollTop<scroll_four:
sidebar_li[2].classList.add("li_click");
break;
case scrollTop>=scroll_four:
sidebar_li[3].classList.add("li_click");
break;
}
}
}
show_scroll()
// 滚动样式
}
\ No newline at end of file
js/banner.js
window.onload = function(){ window.onload = function(){
// 刷新回到顶部 // 刷新回到顶部
// setTimeout(() => window.scrollTo(0,0), 14) setTimeout(() => window.scrollTo(0,0), 14)
// 鼠标滑动显示对应hash
function mouse_scroll( now_dom , now_hash ,last_dom){
var _dom = document.getElementById(now_dom);
var __dom= document.getElementById(last_dom);
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
let clientHeight = document.documentElement.clientHeight || document.body.clientHeight
let height = _dom.offsetTop - scrollTop
if (scrollTop > _dom.offsetTop && scrollTop < __dom.offsetTop){
window.location.hash = now_hash
}
}
// 导航点击
var nav = document.getElementsByClassName("nav")[0];
var click_a = nav.getElementsByTagName("a");
for(let i = 0 ; i < click_a.length ; i++){
click_a[i].index = i;
click_a[i].onclick = function(){
for(let a = 0 ; a < click_a.length ; a++){
click_a[a].classList.remove("choosed")
}
click_a[this.index].classList.add("choosed")
}
}
// 固定导航的显示隐藏
var scroll = function(){
let nav_height = document.getElementById("top_nav")
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
if(scrollTop > 0){
nav_height.classList.add('header_scroll')
}else{
nav_height.classList.remove('header_scroll')
window.location.hash="#top"
}
}
scroll()
window.onscroll = function(){
scroll()
}
// window.onscroll = function(){
// // 滚动条滚动 导航样式
// let nav = document.getElementsByClassName("nav")[0];
// let click_a = nav.getElementsByTagName("a");
// for(let i = 0 ; i < click_a.length ; i++){
// click_a[i].classList.remove("choosed")
// switch(window.location.hash){
// case '#top':
// click_a[0].classList.add("choosed")
// break;
// case '#to_company':
// click_a[1].classList.add("choosed")
// break;
// case '#to_department':
// click_a[2].classList.add("choosed")
// break;
// case '#to_cours':
// click_a[3].classList.add("choosed")
// break;
// case '#to_product':
// click_a[4].classList.add("choosed")
// break;
// }
// }
// scroll()
// switch(window.location.hash){
// case '#top':
// mouse_scroll('introduce','#to_company','department')
// break;
// case '#to_company':
// mouse_scroll('department','#to_department','cours')
// break;
// case '#to_department':
// mouse_scroll('cours','#to_cours','product_service')
// break;
// case '#to_cours':
// mouse_scroll('product_service','#to_product','footer')
// break;
// }
// }
// 侧边二维码 // 侧边二维码
var qr_code = document.getElementsByClassName("qr_code")[0]; var qr_code = document.getElementsByClassName("qr_code")[0];
...@@ -117,24 +36,4 @@ window.onload = function(){ ...@@ -117,24 +36,4 @@ window.onload = function(){
clearInterval(timer) clearInterval(timer)
} }
} }
// 公司介绍品牌切换
// var first = document.getElementsByClassName("first_introduce")[0];
// var second = document.getElementsByClassName("second_introduce")[0];
// second.onclick = function () {
// this.style.right = "30px";
// this.style.animation = "smallBig .6s ease forwards";
// this.style.zIndex = "5";
// first.style.left = "-30px";
// first.style.zIndex = "4";
// first.style.animation = "bigSmall .6s ease forwards";
// }
// first.onclick = function () {
// this.style.left = 0;
// this.style.animation = "toInit2 .6s ease forwards";
// this.style.zIndex = "5";
// second.style.right = 0;
// second.style.zIndex = "4";
// second.style.animation = "toInit .6s ease forwards";
// }
} }
\ No newline at end of file
js/common.js 0 → 100644
var common = function () {
// setTimeout(() => window.scrollTo(0,0), 14)
// 侧边二维码动画
var qr_code = document.getElementsByClassName("qr_code")[0];
var code_img = this.document.getElementsByClassName("code_img")[0];
qr_code.onmouseover = function () {
code_img.style.opacity = 1;
code_img.style.animation = "rightLeft .8s ease-in-out forwards"
}
qr_code.onmouseout = function () {
code_img.style.opacity = 0;
code_img.style.animation = ""
}
// 返回顶部
var go_top = document.getElementsByClassName("go_top")[0];
var timer = null;
go_top.onclick = function () {
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn() {
var oTop = document.body.scrollTop || document.documentElement.scrollTop;
if (oTop > 0) {
document.body.scrollTop = document.documentElement.scrollTop = oTop - 300;
timer = requestAnimationFrame(fn);
} else {
cancelAnimationFrame(timer);
}
});
}
// 点击预约面试按钮显示二维码
if (document.getElementById("order")) {
var order = document.getElementById("order");
var img = document.getElementById("code_img");
order.onclick = function () {
img.style.animation = "fadeInBig .8s ease-in-out forwards"
}
}
// 六大支持
$(".on").click(function(){
$(this).css("width","536px").siblings().css("width","118px");
$(this).addClass('firsted').siblings().removeClass('firsted');
$(this).find(".sected").css('-webkit-animation','kai 0.6s linear forwards')
$(this).find(".sected").addClass('secteds')
$(this).siblings().find(".sected").css('-webkit-animation','shou 0.6s linear forwards');
$(this).find(".association").css('-webkit-animation','kais 0.6s linear forwards')
$(this).find(".association").addClass('associations')
$(this).siblings().find(".association").css('-webkit-animation','shous 0.6s linear forwards');
})
}
js/commons.js 0 → 100644
// 品牌圆环的事件
var aaa = true;
window.onscroll=function(){
var topScroll =document.documentElement.scrollTop;
if(topScroll >= 800){
if(!aaa){
}else{
$(".market").css("display","block");
// 圈内数字加载
var num = 0;
var t = setInterval(function(){
num++;
var arr=document.getElementsByClassName("numbers")[0];
arr.innerHTML = num;
if(num==85){
clearInterval(t);
}
if(num>40){
$(".leftcircle_left").show()
}
},25);
aaa = false;
}
}
// 地图的坐标
if(topScroll >= 3900){
setTimeout(function(){
var sha=document.getElementsByClassName("shadowd")[0];
var map=document.getElementsByClassName("maps")[0];
map.classList.add("add");
sha.classList.add("sha");
},1000);
}
}
\ No newline at end of file
js/qj_show.js
window.onload = function () { window.onload = function () {
// 左侧固定导航样式
var show_sidebar = document.getElementById("show_sidebar")
var sidebar_li = show_sidebar.getElementsByTagName("a")
for(var k = 0;k < sidebar_li.length ; k++){
sidebar_li[k].index = k;
sidebar_li[k].onmouseover = function(){
for(var b = 0; b < sidebar_li.length ; b++){
sidebar_li[b].classList.remove("li_mouseover")
}
sidebar_li[this.index].classList.add("li_mouseover")
}
sidebar_li[k].onmouseout = function(){
for(var b = 0; b < sidebar_li.length ; b++){
sidebar_li[b].classList.remove("li_mouseover")
}
}
sidebar_li[k].onclick = function(){
for(var b = 0; b < sidebar_li.length ; b++){
sidebar_li[b].classList.remove("li_click")
}
sidebar_li[this.index].classList.add("li_click")
}
}
// 公司宣传视频 // 公司宣传视频
var company_video = document.getElementById("company_video") var company_video = document.getElementById("company_video")
// company_video.style.width = window.screen.width + "px";
company_video.style.height = window.screen.height - 170 + "px"; company_video.style.height = window.screen.height - 170 + "px";
// 视差滚动 // 视差滚动
...@@ -10,10 +33,10 @@ window.onload = function () { ...@@ -10,10 +33,10 @@ window.onload = function () {
responsive: true responsive: true
}); });
// 个人风采效果
var photo = document.getElementById("person_photo"); var photo = document.getElementById("person_photo");
var photo_single = photo.getElementsByTagName("li") var photo_single = photo.getElementsByTagName("li")
var content_single = document.getElementsByClassName("personage") var content_single = document.getElementsByClassName("personage")
for(var i = 0;i < photo_single.length ; i++){ for(var i = 0;i < photo_single.length ; i++){
photo_single[i].index = i; photo_single[i].index = i;
photo_single[i].onmouseover = function(){ photo_single[i].onmouseover = function(){
...@@ -34,7 +57,6 @@ window.onload = function () { ...@@ -34,7 +57,6 @@ window.onload = function () {
var speed=-2; var speed=-2;
video_box.innerHTML+=video_box.innerHTML; video_box.innerHTML+=video_box.innerHTML;
video_box.style.width=(video_single[0].offsetWidth+25)*video_single.length+"px" video_box.style.width=(video_single[0].offsetWidth+25)*video_single.length+"px"
function autoPlay(){ function autoPlay(){
timer=setInterval(function(){ timer=setInterval(function(){
video_box.style.left=video_box.offsetLeft+speed+"px"; video_box.style.left=video_box.offsetLeft+speed+"px";
...@@ -46,10 +68,96 @@ window.onload = function () { ...@@ -46,10 +68,96 @@ window.onload = function () {
},14); },14);
} }
autoPlay(); autoPlay();
video_banner.onmouseover=function(){ video_box.onmouseover=function(){
clearInterval(timer); clearInterval(timer);
}; };
video_banner.onmouseout=function(){ video_box.onmouseout=function(){
autoPlay(); autoPlay();
} }
// // 侧边二维码
// var qr_code = document.getElementsByClassName("qr_code")[0];
// var code_img = this.document.getElementsByClassName("code_img")[0];
// qr_code.onmouseover = function () {
// code_img.style.opacity = 1;
// code_img.style.animation = "rightLeft .8s ease-in-out forwards"
// }
// qr_code.onmouseout = function () {
// code_img.style.opacity = 0;
// code_img.style.animation = ""
// }
// // 返回顶部
// var go_top = document.getElementsByClassName("go_top")[0];
// go_top.onclick = function backTop () {
// clearInterval(timer);
// var timer = setInterval(function() {
// let scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
// let now = scrollHeight;
// let speed = (2 - now) / 15;
// speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
// if (scrollHeight === 0) {
// clearInterval(timer);
// }
// document.documentElement.scrollTop = scrollHeight + speed;
// document.body.scrollTop = scrollHeight + speed;
// }, 14);
// window.onmousewheel = function(){
// clearInterval(timer);
// }
// go_top.onmouseout = function(){
// clearInterval(timer)
// }
// }
// // 固定导航的显示隐藏
// var scroll = function(){
// let nav_height = document.getElementById("top_nav")
// let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
// if(scrollTop > 0){
// nav_height.classList.add('header_scroll')
// }else{
// nav_height.classList.remove('header_scroll')
// }
// }
// scroll()
window.onscroll = function(){
// scroll()
show_scroll()
}
// 滚轮 左导航样式
function show_scroll(){
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
let scroll_one = document.getElementById("scroll_one").offsetTop - 90
let scroll_two = document.getElementById("scroll_two").offsetTop - 90
let scroll_three = document.getElementById("scroll_three").offsetTop - 90
let scroll_four = document.getElementById("scroll_four").offsetTop - 90
let show_sidebar = document.getElementById("show_sidebar")
let sidebar_li = show_sidebar.getElementsByTagName("a")
let show_top = show_sidebar.getElementsByTagName("div")[0]
for(var k = 0;k < sidebar_li.length ; k++){
sidebar_li[k].classList.remove("li_click")
show_top.style.background="#808080";
switch(true){
case scrollTop<scroll_one:
show_top.style.background="#24b298";
break;
case scrollTop>=scroll_one && scrollTop<scroll_two:
sidebar_li[0].classList.add("li_click");
break;
case scrollTop>=scroll_two && scrollTop<scroll_three:
sidebar_li[1].classList.add("li_click");
break;
case scrollTop>=scroll_three && scrollTop<scroll_four:
sidebar_li[2].classList.add("li_click");
break;
case scrollTop>=scroll_four:
sidebar_li[3].classList.add("li_click");
break;
}
}
}
show_scroll()
// 滚动样式
} }
\ No newline at end of file
js/swiper.min.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
package-lock.json 0 → 100644
{
"requires": true,
"lockfileVersion": 1,
"dependencies": {
"dom7": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.2.tgz",
"integrity": "sha512-cGwWtpu7KY3JnbREGqG4EGC/u+1hyLfWVMqrqRjmwiO8d5i4B+0imLZAQ/cJbiXnjbs0pdIUzcUyeI9BbnyKNg==",
"requires": {
"ssr-window": "^1.0.1"
}
},
"ssr-window": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-1.0.1.tgz",
"integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg=="
},
"swiper": {
"version": "4.4.6",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-4.4.6.tgz",
"integrity": "sha512-F9NDtijQt+etiOe6JAEH+Cb+QKzwwFpi08FlOIQv8ALdoQ8tvAX/38a/28E5XxalAkChsHCutwkBCzDxDXTGiA==",
"requires": {
"dom7": "^2.1.2",
"ssr-window": "^1.0.1"
}
}
}
}
test.html deleted 100644 → 0
<!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>Document</title>
<!-- <link href="https://vjs.zencdn.net/7.0.3/video-js.css" rel="stylesheet"> -->
<!-- <script src="http://vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js"></script> -->
<!-- <script src="https://vjs.zencdn.net/7.0.3/video.js"></script> -->
<link rel="stylesheet" href="./css//bootstrap.min.css">
<script src="./js/jquery-3.3.1.slim.min.js"></script>
<script src="./js/popper.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
</head>
<style>
* {
margin: 0;
padding: 0;
}
video {
object-fit: fill;
/* margin-left: 50%;
transform: translate(-600px);
margin-top: 20px; */
}
h1 {
margin-left: 50%;
transform: translate(-65px);
color: rgb(107, 89, 89);
}
</style>
<body>
<!-- <h1>千家风采</h1> -->
<video id="video" src="/home/liu/c_企业站/企业站视频素材/2018千家宣传片.mp4" autoplay preload="preload" controls="controls"></video>
<!-- <video id="my-video" class="video-js" controls preload="auto" width="1000px"
poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
<source src="./第一高峰.mp4">
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video> -->
<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="./images/banner1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="./images/banner2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="./images/banner3.jpg" alt="Third slide">
</div>
</div>
</div>
</body>
<script>
var video = document.getElementById("video")
video.style.width = document.body.clientWidth + "px";
video.style.height = document.body.clientHeight + "px"
console.log(document.body.clientWidth)
console.log(document.body.clientHeight)
$('.carousel').carousel({
interval: 3000,
pause: false
})
</script>
</html>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论