Skip to content

S
shop-new
提交 09438fbb authored 作者: huaxinzhu's avatar huaxinzhu
浏览文件
操作

web9-10

上级 a1dcefa3
显示空白字符变更
内嵌 并排
正在显示 包含 958 行增加 和 68 行删除
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 { ...@@ -51,6 +51,16 @@ header {
display: none !important; display: none !important;
} }
html, body {
width: 100%;
height: 100%;
}
.pc-content {
/*width: 100%;*/
/*height: 100%;*/
}
header { header {
width: 100%; width: 100%;
position: fixed; position: fixed;
...@@ -59,6 +69,17 @@ header { ...@@ -59,6 +69,17 @@ header {
z-index: 999; 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 { .scroll-active {
background-color: #070D41; background-color: #070D41;
} }
...@@ -76,18 +97,487 @@ header { ...@@ -76,18 +97,487 @@ header {
.nav > li { .nav > li {
padding: 10px 25px; padding: 10px 25px;
cursor: pointer;
font-size: 18px; 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%; width: 100%;
height: 562px; height: 562px;
} }
/*.hxz-bullet {*/
/* color: #ff6600;*/
/*}*/
.hxz-bullet-active {
width: 30px;
padding-top: 1px;
border-radius: 10px;
background-color: #fff;
opacity: 1;
}
.active { .active {
background-color: #1e1e1e!important; 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 */ /* pc end */
......
src/views/officialweb/index.html
浏览文件 @ 09438fbb
...@@ -5,42 +5,235 @@ ...@@ -5,42 +5,235 @@
<title>官网-原生</title> <title>官网-原生</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.min.css"> <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/public.css">
<link rel="stylesheet" href="./css/certify.css">
</head> </head>
<body> <body>
<!--PC--> <!--PC-->
<div style="width: 100%;height: 100%;"> <div class="pc-content">
<div style="height:100%;width:100%;">
<header> <header>
<ul class="nav"> <div class="header-con">
<li>首页</li> <ul class="nav" id="nav">
<li>开放平台</li> <li>
<li>云仓</li> <img src="" class="top-logo" alt="">
<li>关于我们</li> </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> </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> </header>
<!-- banner 轮播图 --> <!-- banner 轮播图 -->
<div class="swiper"> <div class="swiper-container" id="banner-swiper">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide coral">Slide 1</div> <div class="swiper-slide coral">Slide 1</div>
<div class="swiper-slide pink">Slide 2</div> <div class="swiper-slide pink">Slide 2</div>
<div class="swiper-slide green">Slide 3</div> <div class="swiper-slide green">Slide 3</div>
</div> </div>
<!-- 如果需要分页器 --> <!-- 如果需要分页器 -->
<div class="swiper-pagination"></div> <div class="swiper-pagination" id="banner-swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<!-- <div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>-->
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</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>
<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> </div>
</body> </body>
...@@ -49,12 +242,15 @@ ...@@ -49,12 +242,15 @@
<script> <script>
window.onload = function () { window.onload = function () {
// 获取 channel_id /** 顶部nav 滚动背景 */
let websiteUrl = 'www.stbz.net' $(window).scroll(function(){
if (window.location.hostname != 'localhost') { let st = $(window).scrollTop();
websiteUrl = window.location.host if (st > 100) {
$('header').addClass('scroll-active')
} else if (st < 100) {
$('header').removeClass('scroll-active')
} }
let ssoUrl = '' });
/** banner 轮播图 */ /** banner 轮播图 */
// 轮播图 基础配置 // 轮播图 基础配置
...@@ -71,45 +267,129 @@ ...@@ -71,45 +267,129 @@
// 一个屏幕展示的数量 // 一个屏幕展示的数量
slidesPerView: 1, slidesPerView: 1,
observer: true, 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(){ $(".pre-advantage").mouseenter(function() {
let st = $(window).scrollTop(); $(".advantage").addClass('mgB100');
if(st>100){ $(".advantage-con").addClass('mgT20');
$('header').addClass('scroll-active') $(this).children('.dl-con').children("dt,dd").hide();
}else if(st<100){ $(this).find(".pre-advantage-details").addClass('up-ad-details');
$('header').removeClass('scroll-active') });
} $(".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 } // window onload end
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论