Skip to content
项目
群组
代码片段
帮助
正在加载...
帮助
为 GitLab 提交贡献
登录
切换导航
S
shop-new
项目
项目
详情
活动
周期分析
仓库
仓库
文件
提交
分支
标签
贡献者
分枝图
比较
统计图
议题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
计划
统计图
Wiki
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
分枝图
统计图
创建新议题
作业
提交
议题看板
打开侧边栏
王天霸
shop-new
Commits
09438fbb
提交
09438fbb
authored
2月 15, 2022
作者:
huaxinzhu
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
web9-10
上级
a1dcefa3
显示空白字符变更
内嵌
并排
正在显示
6 个修改的文件
包含
958 行增加
和
68 行删除
+958
-68
certify.css
src/views/officialweb/css/certify.css
+120
-0
public.css
src/views/officialweb/css/public.css
+492
-2
carousel01.png
src/views/officialweb/image/carousel01.png
+0
-0
carousel02.png
src/views/officialweb/image/carousel02.png
+0
-0
carousel03.png
src/views/officialweb/image/carousel03.png
+0
-0
index.html
src/views/officialweb/index.html
+346
-66
没有找到文件。
src/views/officialweb/css/certify.css
0 → 100644
浏览文件 @
09438fbb
@charset
"utf-8"
;
/* CSS Document */
#brand-swiper
{
position
:
relative
;
max-width
:
1024px
;
margin
:
0
auto
}
#brand-swiper
{
height
:
460px
;
padding-bottom
:
10px
;
}
#brand-swiper
.swiper-slide
{
width
:
800px
;
height
:
426px
;
background
:
#fff
;
box-shadow
:
0
8px
30px
#ddd
;
overflow
:
hidden
;
}
#brand-swiper
.swiper-slide
img
{
display
:
block
;
}
#brand-swiper
.swiper-slide
p
{
line-height
:
98px
;
padding-top
:
0
;
text-align
:
center
;
color
:
#636363
;
font-size
:
1.1em
;
margin
:
0
;
}
#brand-swiper
.swiper-pagination
{
width
:
100%
;
/*bottom: 20px;*/
}
#brand-swiper
.swiper-pagination-bullets
.swiper-pagination-bullet
{
margin
:
0
5px
;
border
:
3px
solid
#fff
;
background-color
:
#d5d5d5
;
width
:
10px
;
height
:
10px
;
opacity
:
1
;
}
#brand-swiper
.swiper-pagination-bullets
.swiper-pagination-bullet-active
{
border
:
3px
solid
#00aadc
;
background-color
:
#fff
;
}
#brand-swiper
.swiper-button-prev
{
left
:
-30px
;
width
:
45px
;
height
:
45px
;
background
:
url(../images/wm_button_icon.png)
no-repeat
;
background-position
:
0
0
;
background-size
:
100%
;
}
#brand-swiper
.swiper-button-prev
:hover
{
background-position
:
0
-46px
;
background-size
:
100%
}
#brand-swiper
.swiper-button-next
{
right
:
-30px
;
width
:
45px
;
height
:
45px
;
background
:
url(../images/wm_button_icon.png)
no-repeat
;
background-position
:
0
-93px
;
background-size
:
100%
;
}
#brand-swiper
.swiper-button-next
:hover
{
background-position
:
0
-139px
;
background-size
:
100%
}
#brand-swiper-pagination
{
text-align
:
center
;
}
.custom-swiper-title
{
width
:
800px
;
margin
:
0
auto
10px
;
display
:
flex
;
flex-direction
:
row
;
justify-content
:
space-between
;
align-items
:
center
;
}
.pre-title-span
{
height
:
30px
;
line-height
:
30px
;
cursor
:
pointer
;
font-size
:
20px
;
font-weight
:
400
;
color
:
#000
;
text-indent
:
40px
;
}
.pre1
{
background
:
url("../../../assets/image/website/clothes.png")
no-repeat
0
center
;
}
.pre2
{
background
:
url("../../../assets/image/website/electrical.png")
no-repeat
0
center
;
}
.pre3
{
background
:
url("../../../assets/image/website/food.png")
no-repeat
0
center
;
}
.pre4
{
background
:
url("../../../assets/image/website/maternal.png")
no-repeat
0
center
;
}
.active-custom-title
{
color
:
red
;
}
src/views/officialweb/css/public.css
浏览文件 @
09438fbb
...
...
@@ -51,6 +51,16 @@ header {
display
:
none
!important
;
}
html
,
body
{
width
:
100%
;
height
:
100%
;
}
.pc-content
{
/*width: 100%;*/
/*height: 100%;*/
}
header
{
width
:
100%
;
position
:
fixed
;
...
...
@@ -59,6 +69,17 @@ header {
z-index
:
999
;
}
.header-con
{
width
:
80%
;
margin
:
0
auto
;
height
:
100px
;
color
:
#fff
;
display
:
flex
;
flex-direction
:
row
;
justify-content
:
space-between
;
align-items
:
center
;
}
.scroll-active
{
background-color
:
#070D41
;
}
...
...
@@ -76,18 +97,487 @@ header {
.nav
>
li
{
padding
:
10px
25px
;
cursor
:
pointer
;
font-size
:
18px
;
}
.swiper
{
.nav
>
li
:first-child
{
padding-left
:
0
;
}
.nav
>
li
>
a
{
color
:
#fff
;
}
.top-logo
{
width
:
114px
;
height
:
35px
;
border
:
none
;
}
.register-login-btn
{
display
:
flex
;
flex-direction
:
row
;
justify-content
:
start
;
align-items
:
center
;
font-size
:
16px
;
}
.register-btn
,
.login-btn
{
padding
:
5px
20px
;
border-radius
:
4px
;
cursor
:
pointer
;
}
.register-btn
{
border
:
1px
solid
#fff
;
}
.login-btn
{
border
:
1px
solid
#1D8EFE
;
background
:
#1D8EFE
;
margin-left
:
20px
;
}
#banner-swiper
{
width
:
100%
;
height
:
562px
;
}
/*.hxz-bullet {*/
/* color: #ff6600;*/
/*}*/
.hxz-bullet-active
{
width
:
30px
;
padding-top
:
1px
;
border-radius
:
10px
;
background-color
:
#fff
;
opacity
:
1
;
}
.active
{
background-color
:
#1e1e1e
!important
;
}
/* banner */
.banner
{
width
:
100%
;
height
:
562px
;
margin-right
:
auto
;
margin-left
:
auto
;
overflow
:
hidden
;
}
/* 核心优势 */
.advantage-main-con
{
margin-bottom
:
100px
;
}
.advantage
{
margin-bottom
:
0
;
transition
:
all
0.5s
;
}
.advantage-title
,
.process-title
,
.brands-title
{
text-align
:
center
;
font-size
:
38px
;
font-weight
:
400
;
color
:
#333333
;
padding
:
90px
0
;
}
.advantage-con
{
width
:
80%
;
margin
:
0
auto
;
display
:
flex
;
flex-direction
:
row
;
justify-content
:
center
;
align-items
:
center
;
position
:
relative
;
transition
:
0.5s
;
}
.pre-advantage
{
width
:
268px
;
height
:
190px
;
border
:
1px
solid
#DCDCDC
;
margin
:
0
20px
;
position
:
relative
;
background
:
#FFFFFF
;
z-index
:
0
;
border-radius
:
2px
;
}
.dl-con
{
width
:
100%
;
height
:
100%
;
text-align
:
center
;
background
:
#FFFFFF
;
z-index
:
0
;
/* 这个值要保证和 当前容器dom 一致 */
border
:
none
;
overflow
:
hidden
;
}
.dl-con
>
dt
{
width
:
85px
;
height
:
88px
;
margin
:
25px
auto
;
}
.dl-con
>
dd
{
font-size
:
18px
;
color
:
#232323
;
margin
:
0
auto
;
}
.dl-con
>
.dl-con-ad1
{
background
:
url("../../../assets/image/website/ad1.png")
no-repeat
center
center
;
background-size
:
cover
;
}
.dl-con
>
.dl-con-ad2
{
background
:
url("../../../assets/image/website/ad2.png")
no-repeat
center
center
;
background-size
:
cover
;
}
.dl-con
>
.dl-con-ad3
{
background
:
url("../../../assets/image/website/ad3.png")
no-repeat
center
center
;
background-size
:
cover
;
}
.dl-con
>
.dl-con-ad4
{
background
:
url("../../../assets/image/website/ad4.png")
no-repeat
center
center
;
background-size
:
cover
;
}
.pre-advantage-details
{
width
:
270px
;
height
:
410px
;
position
:
absolute
;
top
:
-110px
;
left
:
-1px
;
z-index
:
199
;
background
:
#fff
url("../../../assets/image/website/adfooter.png")
no-repeat
bottom
center
;
box-shadow
:
0
6px
18px
1px
rgba
(
57
,
124
,
255
,
0.26
);
overflow
:
hidden
;
display
:
none
;
}
.ad-details-title
{
width
:
100%
;
height
:
76px
;
line-height
:
76px
;
text-align
:
center
;
color
:
#fff
;
font-weight
:
400
;
font-size
:
20px
;
background
:
linear-gradient
(
118deg
,
#0157FF
0%
,
#538DFF
100%
);
overflow
:
hidden
;
}
.ad-details
{
width
:
calc
(
100%
-
60px
);
padding
:
30px
;
color
:
#333333
;
font-size
:
16px
;
font-weight
:
400
;
line-height
:
28px
;
word-wrap
:
break-word
;
text-align
:
justify
;
text-align-last
:
center
;
-ms-text-align-last
:
center
;
-moz-text-align-last
:
center
;
}
.mgT20
{
margin-top
:
80px
;
}
.up-ad-details
{
display
:
block
;
z-index
:
199
;
}
.mgB100
{
margin-bottom
:
150px
;
}
/*入驻流程*/
.progress-main-con
{
padding-bottom
:
90px
;
background-color
:
#f9f9fa
;
}
.process-steps
,
.process-mater
{
display
:
flex
;
flex-direction
:
row
;
justify-content
:
center
;
align-items
:
center
;
}
.pro-step
{
width
:
275px
;
height
:
315px
;
background
:
#fff
;
margin
:
0
20px
;
}
.pro-ma
{
width
:
590px
;
height
:
190px
;
background
:
#fff
;
margin
:
35px
20px
0
;
background
:
#fff
url("../../../assets/image/website/mate-bg.png")
no-repeat
100%
;
}
.pro-ma
:hover
,
.pro-step
:hover
{
box-shadow
:
0
2px
10px
0
rgba
(
0
,
0
,
0
,
0.05
);
}
.step-one
,
.step-two
,
.step-three
,
.step-four
{
width
:
58px
;
height
:
58px
;
text-align
:
center
;
margin
:
30px
auto
;
}
.step-one
{
background
:
url("../../../assets/image/website/step1.png")
no-repeat
center
center
;
}
.step-two
{
background
:
url("../../../assets/image/website/step2.png")
no-repeat
center
center
;
}
.step-three
{
background
:
url("../../../assets/image/website/step3.png")
no-repeat
center
center
;
}
.step-four
{
background
:
url("../../../assets/image/website/step4.png")
no-repeat
center
center
;
}
.pro-step
>
dl
>
dd
{
height
:
20px
;
font-size
:
20px
;
font-weight
:
400
;
margin
:
0
auto
;
text-align
:
center
;
}
.pro-step
>
span
{
display
:
block
;
width
:
100px
;
height
:
25px
;
font-size
:
14px
;
color
:
#666
;
background
:
#F0F0F5
;
border-radius
:
13px
;
line-height
:
25px
;
margin
:
18px
auto
;
text-align
:
center
;
}
.pro-step
>
p
{
font-size
:
14px
;
font-weight
:
400
;
color
:
#666666
;
line-height
:
28px
;
text-align
:
center
;
padding
:
0
20px
;
}
.set-in-ma
{
height
:
20px
;
font-size
:
20px
;
font-weight
:
400
;
color
:
#000000
;
line-height
:
20px
;
text-indent
:
30px
;
margin
:
35px
0
15px
68px
;
}
.m-bg
{
background
:
url("../../../assets/image/website/setIn1.png")
no-repeat
0
center
;
}
.n-m-bg
{
background
:
url("../../../assets/image/website/setIn2.png")
no-repeat
0
center
;
}
.optional
{
display
:
flex
;
justify-content
:
start
;
flex-direction
:
row
;
}
.optional
>
ul
:nth-child
(
1
)
{
margin
:
0
50px
0
72px
;
}
.optional
>
ul
>
li
{
font-size
:
16px
;
margin
:
15px
0
;
text-indent
:
20px
;
background
:
url("../../../assets/image/website/arrow.png")
no-repeat
0
center
;
}
/*入驻品牌*/
.brand-main-con
{
padding
:
0
0
90px
;
background
:
linear-gradient
(
0deg
,
#DEE8F9
46%
,
#FEFEFF
100%
);
}
.brands-title
{
text-align
:
center
;
font-size
:
38px
;
font-weight
:
400
;
color
:
#333
;
padding
:
90px
0
0
;
}
.brands-tip
{
text-align
:
center
;
font-size
:
24px
;
font-weight
:
400
;
color
:
#333
;
opacity
:
0.82
;
padding
:
35px
0
20px
;
}
/*关于我们-底部*/
.contact
{
height
:
243px
;
background
:
url("../../../assets/image/website/footer-bg.png")
no-repeat
center
0
;
background-size
:
100%
100%
;
display
:
flex
;
flex-direction
:
column
;
justify-content
:
center
;
align-items
:
center
;
}
.contact
>
p
{
letter-spacing
:
2px
;
text-align
:
center
;
font-size
:
26px
;
font-weight
:
400
;
color
:
#FFFFFF
;
line-height
:
46px
;
}
.contact
>
p
>
span
{
color
:
#1966FF
;
}
.about-con
{
height
:
200px
;
color
:
#fff
;
background
:
#242A37
;
display
:
flex
;
flex-direction
:
row
;
justify-content
:
center
;
align-items
:
center
;
font-size
:
14px
;
}
.about-list
,
.about-us
{}
.about-list
{
height
:
110px
;
display
:
flex
;
flex-direction
:
column
;
justify-content
:
center
;
align-items
:
center
;
border-right
:
1px
solid
#50555f
;
padding-right
:
80px
;
}
.about-list
>
ul
{
height
:
66px
;
font-size
:
18px
;
font-weight
:
400
;
color
:
#FFFFFF
;
display
:
flex
;
flex-direction
:
row
;
justify-content
:
space-around
;
}
.about-list
>
ul
>
li
{
height
:
30px
;
padding
:
0
40px
;
line-height
:
30px
;
border-right
:
1px
solid
#50555f
;
cursor
:
pointer
;
}
.about-list
>
ul
>
li
:last-child
{
border
:
none
;
}
.about-gs
{
font-size
:
14px
;
font-weight
:
400
;
color
:
#959BA8
;
}
.about-us
{
margin-left
:
80px
;
}
.about-us
>
p
{
letter-spacing
:
1px
;
font-weight
:
400
;
color
:
#959BA8
;
line-height
:
26px
;
}
.about-us
.us-title
{
font-size
:
18px
;
font-weight
:
400
;
color
:
#FFFFFF
;
line-height
:
40px
;
}
/* 公共样式 */
/*增加 手指标*/
.custom-cursor
{
cursor
:
pointer
;
}
/* 取消a标签默认样式 */
a
{
text-decoration
:
none
;
}
/*正常的未被访问过的链接*/
a
:link
{
text-decoration
:
none
;
}
/*已经访问过的链接*/
a
:visited
{
text-decoration
:
none
;
}
/*鼠标划过(停留)的链接*/
a
:hover
{
text-decoration
:
none
;
}
/* 正在点击的链接*/
a
:active
{
text-decoration
:
none
;
}
/* 可以自定义 滚动条样式 */
/* 滚动条宽度 */
/*::-webkit-scrollbar {*/
/* width: 12px;*/
/* height: 12px;*/
/*}*/
/* 滚动条的滑块 */
/*::-webkit-scrollbar-thumb {*/
/* background-color: #c0ccda;*/
/* border-radius: 6px;*/
/*}*/
}
/* pc end */
...
...
src/views/officialweb/image/carousel01.png
0 → 100755
浏览文件 @
09438fbb
296.6 KB
src/views/officialweb/image/carousel02.png
0 → 100755
浏览文件 @
09438fbb
331.9 KB
src/views/officialweb/image/carousel03.png
0 → 100755
浏览文件 @
09438fbb
415.2 KB
src/views/officialweb/index.html
浏览文件 @
09438fbb
...
...
@@ -5,42 +5,235 @@
<title>
官网-原生
</title>
<link
rel=
"stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.min.css"
>
<link
rel=
"stylesheet"
href=
"./css/public.css"
>
<link
rel=
"stylesheet"
href=
"./css/certify.css"
>
</head>
<body>
<!--PC-->
<div
style=
"width: 100%;height: 100%;"
>
<div
class=
"pc-content"
>
<div
style=
"height:100%;width:100%;"
>
<header>
<ul
class=
"nav"
>
<li>
首页
</li>
<li>
开放平台
</li>
<li>
云仓
</li>
<li>
关于我们
</li>
<div
class=
"header-con"
>
<ul
class=
"nav"
id=
"nav"
>
<li>
<img
src=
""
class=
"top-logo"
alt=
""
>
</li>
<li
class=
"custom-cursor"
>
<a
href=
""
target=
"_blank"
>
首页
</a>
</li>
<li
class=
"custom-cursor"
>
<a
href=
""
target=
"_blank"
>
开放平台
</a>
</li>
<li
class=
"custom-cursor"
>
<a
href=
""
target=
"_blank"
>
云仓
</a>
</li>
<li
class=
"custom-cursor"
>
<a
href=
""
target=
"_blank"
>
关于我们
</a>
</li>
</ul>
<div
class=
"register-login-btn"
>
<div
class=
"register-btn custom-cursor"
onclick=
"toRegister()"
>
注 册
</div>
<div
class=
"login-btn custom-cursor"
onclick=
"toLogin()"
>
登 录
</div>
</div>
</div>
</header>
<!-- banner 轮播图 -->
<div
class=
"
swiper"
>
<div
class=
"swiper-container"
id=
"banner-
swiper"
>
<div
class=
"swiper-wrapper"
>
<div
class=
"swiper-slide coral"
>
Slide 1
</div>
<div
class=
"swiper-slide pink"
>
Slide 2
</div>
<div
class=
"swiper-slide green"
>
Slide 3
</div>
</div>
<!-- 如果需要分页器 -->
<div
class=
"swiper-pagination"
></div>
<!-- 如果需要导航按钮 -->
<!-- <div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>-->
<!-- 如果需要滚动条 -->
<div
class=
"swiper-scrollbar"
></div>
<div
class=
"swiper-pagination"
id=
"banner-swiper-pagination"
></div>
</div>
<div
style=
"width: 100%; height: 1000px;"
>
<!-- 核心优势 -->
<section
class=
"advantage-main-con"
>
<div
class=
"advantage"
>
<p
class=
"advantage-title"
>
核心优势
</p>
<div
class=
"advantage-con"
>
<!-- 单元 start -->
<div
class=
"pre-advantage"
>
<dl
class=
"dl-con"
>
<dt
class=
"dl-con-ad1"
></dt>
<dd>
技术优势
</dd>
<div
class=
"pre-advantage-details"
>
<p
class=
"ad-details-title"
>
核心优势
</p>
<p
class=
"ad-details"
>
<!-- 技术优势的描述技术优势的描述技术优势的描述技术优势的描述-->
kdsjakfdjfasfkjadlskfj
</p>
</div>
</dl>
</div>
<!-- 单元 end -->
<!-- 单元 start -->
<div
class=
"pre-advantage"
>
<dl
class=
"dl-con"
>
<dt
class=
"dl-con-ad2"
></dt>
<dd>
技术优势
</dd>
<div
class=
"pre-advantage-details"
>
<p
class=
"ad-details-title"
>
成本优势
</p>
<p
class=
"ad-details"
>
成本成本优势的描述
</p>
</div>
</dl>
</div>
<!-- 单元 end -->
<!-- 单元 start -->
<div
class=
"pre-advantage"
>
<dl
class=
"dl-con"
>
<dt
class=
"dl-con-ad3"
></dt>
<dd>
响应式
</dd>
<div
class=
"pre-advantage-details"
>
<p
class=
"ad-details-title"
>
响应式优势
</p>
<p
class=
"ad-details"
>
响应式响应式优势的描述1
</p>
</div>
</dl>
</div>
<!-- 单元 end -->
<!-- 单元 start -->
<div
class=
"pre-advantage"
>
<dl
class=
"dl-con"
>
<dt
class=
"dl-con-ad4"
></dt>
<dd>
解决方案
</dd>
<div
class=
"pre-advantage-details"
>
<p
class=
"ad-details-title"
>
解决方案优势
</p>
<p
class=
"ad-details"
>
解决方案解决方案优势的描述
</p>
</div>
</dl>
</div>
</div>
<!-- 单元 end -->
</div>
</section>
<!-- 入驻流程 -->
<section
class=
"progress-main-con"
>
<p
class=
"process-title"
>
入驻流程和材料
</p>
<div
class=
"process-con"
>
<div
class=
"process-steps"
>
<div
class=
"pro-step"
>
<dl>
<dt
class=
"step-one"
></dt>
<dd>
第一步:注册账号
</dd>
</dl>
<span>
无需等待
</span>
<p>
进入云仓官网,注册账号
</p>
<p>
注册完成后,填写相关信息
</p>
</div>
<div
class=
"pro-step"
>
<dl>
<dt
class=
"step-two"
></dt>
<dd>
第二步:填写信息
</dd>
</dl>
<span>
约20分钟
</span>
<p>
确认在线协议填写公司主体信息
</p>
<p>
填写店铺信息提交相关资质
</p>
</div>
<div
class=
"pro-step"
>
<dl>
<dt
class=
"step-three"
></dt>
<dd>
第三步:等待审核
</dd>
</dl>
<span>
约1-3个工作日
</span>
<p>
云仓工作人员会在1-3个工作日内
</p>
<p>
反馈审核结果,商家可通过登录查询审核进度
</p>
</div>
<div
class=
"pro-step"
>
<dl>
<dt
class=
"step-four"
></dt>
<dd>
第四步:发布商品
</dd>
</dl>
<span>
无需等待
</span>
<p>
审核通过,商家登录后台
</p>
<p>
商家发布商品并上架
</p>
</div>
</div>
<div
class=
"process-mater"
>
<div
class=
"pro-ma"
>
<p
class=
"set-in-ma m-bg"
>
入驻必备材料
</p>
<div
class=
"optional"
>
<ul>
<li>
营业执照电子版
</li>
<li>
法人证件电子版
</li>
</ul>
</div>
</div>
<div
class=
"pro-ma"
>
<p
class=
"set-in-ma n-m-bg"
>
入驻选填材料
</p>
<div
class=
"optional"
>
<ul>
<li>
品牌LOGO
</li>
<li>
其它行业资质
</li>
</ul>
<ul>
<li>
品牌授权(代理品需提供)
</li>
<li>
店铺LOGO
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- 入驻品牌 -->
<section
class=
"brand-main-con"
>
<p
class=
"brands-title"
>
这些品牌都已入驻
</p>
<p
class=
"brands-tip"
>
我们已与各行业领域的优秀品牌达成合作
</p>
<div
id=
"brand-swiper"
>
<div
id=
"brand-swiper-pagination"
></div>
<div
class=
"swiper-container"
>
<div
class=
"swiper-wrapper"
>
<div
class=
"swiper-slide"
>
<img
src=
"./image/carousel01.png"
/>
<p>
深圳市优秀互联网企业认定证书
</p>
</div>
<div
class=
"swiper-slide"
>
<img
src=
"./image/carousel02.png"
/>
<p>
质量管理体系认证荣誉证书
</p>
</div>
<div
class=
"swiper-slide"
>
<img
src=
"./image/carousel03.png"
/>
<p>
计算机软件著作权登记证书
</p>
</div>
<div
class=
"swiper-slide"
>
<img
src=
"./image/carousel02.png"
/>
<p>
质量管理体系认证荣誉证书
</p>
</div>
</div>
</div>
<div
id=
"brand-swiper-button-prev"
></div>
<div
id=
"brand-swiper-button-next"
></div>
</div>
</section>
<!-- 关于我们 -->
<footer
class=
"pc-content"
>
<div
class=
"contact"
>
<p>
如果你想要更多的
<span>
了解
</span>
,请联系我们
</p>
<p>
400-188-199
</p>
</div>
<div
class=
"about-con"
>
<div
class=
"about-list"
>
<ul>
<li>
企业简介
</li>
<li>
发展历程
</li>
<li>
荣誉资质
</li>
<li>
团队介绍
</li>
<li>
新闻动态
</li>
</ul>
<p
class=
"about-gs"
>
Copyright © 2015 - 2021 北京胜天半子科技有限公司 All Rights Reserved.
<img
class=
"icon-image"
style=
"margin-right:4px;"
src=
"../../assets/image/national.png"
/>
京ICP备19033223号-1
</p>
</div>
<div
class=
"about-us"
>
<p
class=
"us-title"
>
联系我们
</p>
<p>
联系电话:400-188-199
</p>
<p>
公司地址:北京市丰台区诺德中心一期四号楼21层
</p>
</div>
</div>
</footer>
</div>
</div>
</body>
...
...
@@ -49,12 +242,15 @@
<script>
window
.
onload
=
function
()
{
// 获取 channel_id
let
websiteUrl
=
'www.stbz.net'
if
(
window
.
location
.
hostname
!=
'localhost'
)
{
websiteUrl
=
window
.
location
.
host
/** 顶部nav 滚动背景 */
$
(
window
).
scroll
(
function
(){
let
st
=
$
(
window
).
scrollTop
();
if
(
st
>
100
)
{
$
(
'header'
).
addClass
(
'scroll-active'
)
}
else
if
(
st
<
100
)
{
$
(
'header'
).
removeClass
(
'scroll-active'
)
}
let
ssoUrl
=
''
});
/** banner 轮播图 */
// 轮播图 基础配置
...
...
@@ -71,45 +267,129 @@
// 一个屏幕展示的数量
slidesPerView
:
1
,
observer
:
true
,
observeParents
:
true
observeParents
:
true
,
pagination
:
{
el
:
'#banner-swiper-pagination'
,
// bulletClass: 'hxz-bullet',
bulletActiveClass
:
'hxz-bullet-active'
,
clickable
:
true
,
},
}
let
mySwiper
=
new
Swiper
(
'
.swiper'
,
swperOptions
)
let
mySwiper
=
new
Swiper
(
'
#banner-swiper'
,
swperOptions
);
/** */
$
(
window
).
scroll
(
function
(){
let
st
=
$
(
window
).
scrollTop
();
if
(
st
>
100
){
$
(
'header'
).
addClass
(
'scroll-active'
)
}
else
if
(
st
<
100
){
$
(
'header'
).
removeClass
(
'scroll-active'
)
}
/** 核心优势滑过动画 */
$
(
".pre-advantage"
).
mouseenter
(
function
()
{
$
(
".advantage"
).
addClass
(
'mgB100'
);
$
(
".advantage-con"
).
addClass
(
'mgT20'
);
$
(
this
).
children
(
'.dl-con'
).
children
(
"dt,dd"
).
hide
();
$
(
this
).
find
(
".pre-advantage-details"
).
addClass
(
'up-ad-details'
);
});
$
(
".pre-advantage"
).
mouseleave
(
function
()
{
$
(
".advantage"
).
removeClass
(
'mgB100'
);
$
(
".advantage-con"
).
removeClass
(
'mgT20'
);
$
(
this
).
find
(
".pre-advantage-details"
).
removeClass
(
'up-ad-details'
);
$
(
this
).
children
(
'.dl-con'
).
children
(
"dt,dd"
).
show
();
});
/** */
/** */
/** */
/** */
/** */
/** */
/** 入驻品牌 */
let
certifySwiper
=
new
Swiper
(
'#brand-swiper > .swiper-container'
,
{
watchSlidesProgress
:
true
,
slidesPerView
:
'auto'
,
centeredSlides
:
true
,
observer
:
true
,
loop
:
true
,
initialSlide
:
0
,
// loopedSlides: 5,
autoplay
:
false
,
navigation
:
{
nextEl
:
'#brand-swiper-button-next'
,
prevEl
:
'#brand-swiper-button-prev'
,
},
pagination
:
{
el
:
'#brand-swiper-pagination'
,
type
:
'custom'
,
renderCustom
:
function
(
swiper
,
current
,
total
)
{
let
paginationHtml
=
'<div class="custom-swiper-title">'
+
'<span class="pre-title-span pre1">服饰</span>'
+
'<span class="pre-title-span pre2">电器</span>'
+
'<span class="pre-title-span pre3">食品</span>'
+
'<span class="pre-title-span pre4">母婴</span>'
+
'</div>'
;
$
(
".pre-title-span"
).
remove
(
"active-custom-title"
)
// console.log(318,current);
if
(
current
==
1
)
{
return
'<div class="custom-swiper-title">'
+
'<span class="pre-title-span pre1 active-custom-title">服饰</span>'
+
'<span class="pre-title-span pre2">电器</span>'
+
'<span class="pre-title-span pre3">食品</span>'
+
'<span class="pre-title-span pre4">母婴</span>'
+
'</div>'
;
}
if
(
current
==
2
)
{
return
'<div class="custom-swiper-title">'
+
'<span class="pre-title-span pre1">服饰</span>'
+
'<span class="pre-title-span pre2 active-custom-title">电器</span>'
+
'<span class="pre-title-span pre3">食品</span>'
+
'<span class="pre-title-span pre4">母婴</span>'
+
'</div>'
;
}
if
(
current
==
3
)
{
return
'<div class="custom-swiper-title">'
+
'<span class="pre-title-span pre1">服饰</span>'
+
'<span class="pre-title-span pre2">电器</span>'
+
'<span class="pre-title-span pre3 active-custom-title">食品</span>'
+
'<span class="pre-title-span pre4">母婴</span>'
+
'</div>'
;
}
if
(
current
==
4
)
{
return
'<div class="custom-swiper-title">'
+
'<span class="pre-title-span pre1">服饰</span>'
+
'<span class="pre-title-span pre2">电器</span>'
+
'<span class="pre-title-span pre3">食品</span>'
+
'<span class="pre-title-span pre4 active-custom-title">母婴</span>'
+
'</div>'
;
}
return
paginationHtml
;
},
},
on
:
{
progress
:
function
(
progress
)
{
for
(
let
i
=
0
;
i
<
this
.
slides
.
length
;
i
++
)
{
let
slide
=
this
.
slides
.
eq
(
i
);
let
slideProgress
=
this
.
slides
[
i
].
progress
;
let
modify
=
1
;
if
(
Math
.
abs
(
slideProgress
)
>
1
)
{
modify
=
(
Math
.
abs
(
slideProgress
)
-
1
)
*
0.3
+
1
;
}
let
translate
=
slideProgress
*
modify
*
400
+
'px'
;
let
scale
=
1
-
Math
.
abs
(
slideProgress
)
/
5
;
let
zIndex
=
999
-
Math
.
abs
(
Math
.
round
(
10
*
slideProgress
));
slide
.
transform
(
'translateX('
+
translate
+
') scale('
+
scale
+
')'
);
slide
.
css
(
'zIndex'
,
zIndex
);
slide
.
css
(
'opacity'
,
1
);
if
(
Math
.
abs
(
slideProgress
)
>
3
)
{
slide
.
css
(
'opacity'
,
0
);
}
}
},
setTransition
:
function
(
transition
)
{
for
(
let
i
=
0
;
i
<
this
.
slides
.
length
;
i
++
)
{
let
slide
=
this
.
slides
.
eq
(
i
)
slide
.
transition
(
transition
);
}
}
}
// $.ajax({
// type: "get",
// async: true,
// url: '//sysapi.jxhh.com/api/v1/oem/webSite/domainChannel?domain=' + websiteUrl,
// contentType: "application/json; charset=utf-8",
// dataType: "json",
// success: function (res) {
// if (res.code == 1) {
//
// console.log(44,res);
// }
// },
// error: function () {}
// })
})
/** 入驻品牌 分页器 点击效果 */
$
(
'#brand-swiper-pagination'
).
on
(
'click'
,
'span'
,
function
(){
let
index
=
$
(
this
).
index
();
certifySwiper
.
slideTo
(
index
,
1000
,
false
)
//切换到对应的slide,速度为1秒
});
console
.
log
(
11
,
$
(
'h3'
).
text
())
}
// window onload end
...
...
编写
预览
Markdown
格式
0%
重试
或
添加新文件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论