Skip to content

S
shop-new
提交 fc33f95e authored 作者: yuanyufei's avatar yuanyufei
浏览文件
操作

登陆页面移动端适配

上级 49b6f123
隐藏空白字符变更
内嵌 并排
正在显示 包含 903 行增加 和 63 行删除
src/views/officialweb/css/public.css
浏览文件 @ fc33f95e
......@@ -8,7 +8,9 @@ header, section, footer, ul, li, p, dl, dt, dd {
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
ul, li {
list-style: none;
}
......@@ -16,6 +18,11 @@ ul, li {
/* pc和移动都需要都 */
html,body {
/*font-family: "Microsoft YaHei";*/
width: 100%;
height: 100%;
overflow: auto;
touch-action:none;
touch-action:pan-y;
font-family: 'Microsoft YaHei', Arial, sans-serif;
}
header {
......@@ -51,7 +58,7 @@ header {
display: block !important;
}
.mobile {
.mb-contene {
display: none !important;
}
......@@ -71,6 +78,7 @@ header {
top: 0;
left: 0;
z-index: 999;
background-color: #070D41;
}
.header-con {
......@@ -82,6 +90,7 @@ header {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.scroll-active {
......@@ -711,14 +720,488 @@ header {
/* 移动端 专用样式 */
@media screen and (max-width: 961px) {
.pc {
.pc-content {
display: none !important;
}
.mobile {
.mb-content {
width: 100%;
height: 100000px;
/* height: 100px; */
display: block !important;
}
/* .bod{
position: relative;
} */
.yinchang{
width: 100%;
height: 100%;
display: none;
background: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
left: 0;
}
.active{
display: block;
/* display: none; */
z-index: 99;
}
.non{
display: none;
}
.mb-menu-list-con > li {
margin-top: 0.8rem;
font-size: 0.32rem;
}
.mb-menu-list-con{
width: 30%;
height: 100%;
overflow: hidden;
background-color: white;
}
.mb-menu-icon-con {
width: 0.32rem;
height: 0.27rem;
position: fixed;
top: 0;
left: 0;
margin: 0.26rem;
font-size: 0.16rem;
/* background-color: red; */
z-index: 999;
}
.mb-menu-icon-con > img {
width: 100%;
height: 100%;
}
#mb-banner-swiper{
width: 100%;
height: 3.25rem;
}
.hxz-bullet {
display: inline-block;
width: 0.5rem;
height: 0.5rem;
border-radius: 100%;
background-color: #fff;
opacity:1;
margin: 0 0.25rem;
padding-top: 1px;
}
.hxz-bullet-active {
width: 1.87rem;
padding-top: 1px;
border-radius: 0.625rem;
background-color: #fff;
opacity: 1;
}
.mb-ad-swiper{
width: 100%;
}
.mb-ad-container{
width: 100%;
}
.ad-content{
width: 100%;
}
.swiper-wrapper{
width: 100%;
}
.ad-text{
height: 0.4rem;
line-height: 0.4rem;
font-size: 0.4rem;
font-family: Microsoft YaHei;
font-weight: bold;
color: #000000;
text-align: center;
margin: 0.62rem 0 0.43rem;
}
.mb-ad-advantage-details {
width: calc(100% - 1rem);
height: 6.31rem;
overflow: hidden;
margin: 0.16rem 0.5rem;
padding: 0.4rem 0 0;
background: #fff url("../image/adfooter.png") no-repeat bottom center;
background-size: contain;
border-radius: 8px;
box-shadow: 0 6px 18px 1px rgba(57, 124, 255, 0.26);
}
.mb-ad-details-pic-con {
width: 1.27rem;
height: 1.32rem;
margin: 0 auto;
}
.mb-ad-details-title {
margin: 0.15rem auto;
line-height: 0.6rem;
font-size: 0.3rem;
font-family: Microsoft YaHei;
font-weight: bold;
color: #1D8EFE;
text-align: center;
}
.mb-ad-details {
width: 5rem;
margin: 0.3rem auto;
color: #333;
font-size: 0.28rem;
line-height: 0.48rem;
font-weight: 400;
word-wrap: break-word;
text-align: justify;
text-align-last: center;
-ms-text-align-last: center;
-moz-text-align-last: center;
}
.mb-ad-pic1 {
background: url('../image/ad1.png') no-repeat center center;
background-size: cover;
}
.mb-ad-pic2 {
background: url("../image/ad2.png") no-repeat center center;
background-size: cover;
}
.mb-ad-pic3 {
background: url("../image/ad3.png") no-repeat center center;
background-size: cover;
}
.mb-ad-pic4 {
background: url("../image/ad4.png") no-repeat center center;
background-size: cover;
}
/*入驻流程*/
/* .pre-title-span {
height: 0.8rem;
line-height: 0.8rem;
cursor: pointer;
font-size: 0.5333rem;
font-weight: 400;
color: #000;
text-indent: 0.88rem;
} */
.pre-title-span{
padding-left: 0.4rem;
}
.swiper-pagination-bullets{
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
margin: 0 auto 0.3rem;
height: 0.4rem;
line-height: 0.4rem;
font-size: 0.3rem;
font-family: Microsoft YaHei;
font-weight: 400;
color: #000000;
}
.pre1 {
background: url("../image/clothes.png") no-repeat 0 center;
background-size: 40%;
}
.pre2 {
background: url("../image/electrical.png") no-repeat 0 center;
background-size: 40%;
}
.pre3 {
background: url("../image/food.png") no-repeat 0 center;
background-size: 40%;
}
.pre4 {
background: url("../image/maternal.png") no-repeat 0 center;
background-size: 40%;
}
.active-custom-title {
color: #1966FF;
}
.mb-process-con {
background-color: #f9f9fa;
padding: 0.1rem 0;
}
.mb-process-con-title {
height: 1.4rem;
line-height: 1.4rem;
font-size: 0.4rem;
font-family: Microsoft YaHei;
font-weight: bold;
color: #000000;
text-align: center;
}
.mb-process {
display: flex;
justify-content: space-around;
flex-direction: row;
}
.mb-pre-process-con {
padding: 0 0 0.3rem;
margin: 0.1rem 0.2rem;
background-color: #fff;
flex: 1;
}
.step-pic {
width: 0.9rem;
height: 0.64rem;
margin: 0.3rem auto 0.3rem;
}
.step-pic > img {
display : block;
width: 100%;
height: 100%;
border: none;
}
.step-title {
text-align: center;
height: 0.3rem;
line-height: 0.3rem;
font-size: 0.3rem;
font-family: Microsoft YaHei;
font-weight: 400;
color: #000000;
}
.step-cont-text {
width: 80%;
font-size: 0.26rem;
margin: 0.3rem auto 0;
text-align: center;
line-height: 0.4rem;
}
.doc-bg-con {
height: 2.15rem;
margin: 0.24rem 0.2rem;
padding: 0.32rem;
background: #fff url("../image/mate-bg.png") no-repeat 100%;
background-size: cover;
}
.doc-title {
font-size: 0.3rem;
height: 0.3rem;
line-height: 0.3rem;
text-indent: 0.3rem;
}
.doc-title-mst {
background: url("../image/setIn1.png") no-repeat 0 center;
background-size: 0.3rem 0.3rem;
}
.doc-title-no-mst {
background: url("../image/setIn2.png") no-repeat 0 center;
background-size: 0.3rem 0.3rem;
}
.doc-ul-list {
font-size: 0.26rem;
color: #666;
padding: 0.2rem 0.1rem;
}
.doc-ul-list > li {
background: url("../image/arrow.png") no-repeat 0 center;
background-size: 0.19rem 0.17rem;
text-indent: 0.24rem;
line-height: 0.44rem;
}
.doc-ul-list-spe {
display: flex;
justify-content: start;
flex-direction: row;
}
/* #mb-brand-swiper {
height: 12.2667rem;
padding-bottom: 0.2667rem;
}
*/
/* #mb-brand-swiper .swiper-slide {
width: 20.2667rem;
height: 10.8267rem;
background: #fff;
box-shadow: 0 0.2133rem 0.8rem #ddd;
overflow: hidden;
padding: 0.8rem 0.5333rem;
} */
/* #mb-brand-swiper .swiper-slide img{
display:block;
} */
/* #mb-brand-swiper .swiper-slide p {
line-height: 2.6133rem;
padding-top: 0;
text-align: center;
color: #636363;
font-size: 1.1em;
margin: 0;
} */
/* #mb-brand-swiper .swiper-pagination {
width: 100%;
/*bottom: 20px;*/
/* } */
/* #mb-brand-swiper .swiper-pagination-bullets{
margin: 0 0.1333rem;
border: 0.08rem solid #fff;
background-color: #d5d5d5;
width: 0.2667rem;
height: 0.2667rem;
opacity: 1;
} */
/* #mb-brand-swiper .swiper-pagination-bullets .swiper-pagination-bullet-active {
border: 0.08rem solid #00aadc;
background-color: #fff;
}
#mb-brand-swiper-pagination {
text-align:center;
} */
/* #mb-brand-swiper-pagination {
width: 21.333rem;
margin: 1.0667rem auto 0.5333rem;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
} */
/* 品牌入驻 */
.mb-brand-con-bg {
background: linear-gradient(0deg, #DEE8F9 46%, #FEFEFF 100%);
}
.mb-brand-title {
height: 1.4rem;
line-height: 1.4rem;
font-size: 0.4rem;
font-family: Microsoft YaHei;
font-weight: bold;
color: #000000;
text-align: center;
}
.mb-brand-type {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
margin: 0 auto 0.3rem;
height: 0.28rem;
line-height: 0.28rem;
font-size: 0.3rem;
font-family: Microsoft YaHei;
font-weight: 400;
color: #000000;
}
.mb-clothes, .mb-electrical, .mb-food, .mb-maternal {
font-size: 0.3rem;
font-family: Microsoft YaHei;
font-weight: 400;
color: #000000;
text-indent: 0.34rem;
}
.mb-clothes {
background: url("../image/clothes.png") no-repeat 0 center;
background-size : 0.32rem 0.32rem;
}
.mb-electrical {
background: url("../image/electrical.png") no-repeat 0 center;
background-size : 0.32rem 0.32rem;
}
.mb-food {
background: url("../image/food.png") no-repeat 0 center;
background-size : 0.32rem 0.32rem;
}
.mb-maternal {
background: url("../image/maternal.png") no-repeat 0 center;
background-size : 0.32rem 0.32rem;
}
.mb-brand-con-swiper {
width: 100%;
}
.mb-img-con {
padding: 0.2rem 0.3rem;
margin: 0.2rem 0.2rem;
background: #fff;
}
.mb-img-con > img {
width: 1.88rem;
height: 0.86rem;
margin: 0.1rem 0.14rem;
}
/* // 移动端底部 */
.mb-footer {
background: #242A37;
padding: 0.16rem 0;
}
.mb-about-list {
font-size: 0.24rem;
font-weight: 400;
color: #FFFFFF;
line-height: 0.24rem;
}
.mb-about-list > ul {
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
}
.mb-about-list > ul > li {
flex: 33%;
text-align: center;
padding: 0.24rem 0;
}
.mb-about-us {
padding: 0.1rem 0 0.24rem;
border-bottom: 1px solid #5F5F5F;
}
.mb-about-us > p {
text-align: center;
font-size: 0.22rem;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
line-height: 0.4rem;
}
.mb-about-gs {
text-align: center;
font-size: 0.14rem;
font-family: Microsoft YaHei;
font-weight: 400;
color: #959BA8;
line-height: 0.28rem;
padding: 0.3rem 0;
}
}
/* mobile end */
src/views/officialweb/index.html
浏览文件 @ fc33f95e
......@@ -5,6 +5,7 @@
<title>官网-原生</title>
<meta name="keywords" content="云仓，胜天半子"/>
<meta name="description" content="供应链产品"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="./image/icon.ico">
<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">
......@@ -300,17 +301,270 @@
</footer>
</div>
</div>
<!-- 移动端 -->
<div class="mb-contene">
<div>
<!-- banner 轮播图 -->
<div class="mb-swiper-container" id="mb-banner-swiper">
<div class="swiper-wrapper" >
<div class="swiper-slide">
<!-- <a href="https://www.baidu.com" :target="returnBlank(item.redirect_url)">-->
<a href="https://www.baidu.com" target="_blank">
<img style="width: 100%;height: 100%;" src="./image/banner1.png" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="https://www.baidu.com" target="_blank">
<img style="width: 100%;height: 100%;" src="./image/banner1.png" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="https://www.baidu.com" target="_blank">
<img style="width: 100%;height: 100%;" src="./image/banner1.png" alt="">
</a>
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination" id="banner-swiper-pagination"></div>
</div>
<div class="mb-menu-icon-con" >
<img src="./image/mobile-menu.png" alt="">
</div>
<div class="yinchang">
<ul class="mb-menu-list-con">
<li><a href="">首页</a> </li>
<li><a href="">开放平台</a></li>
<li><a href="">云仓</a></li>
<li><a href="">关于我们</a></li>
<li><a href="">登陆</a></li>
<li><a href="">注册</a></li>
</ul>
<div class="back"></div>
</div>
<!-- 核心优势 -->
<div class="ad-content">
<p class="ad-text">核心优势</p>
<div class="mb-ad-container" id="mb-ad-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="mb-ad-advantage-details">
<div class="mb-ad-details-pic-con mb-ad-pic1"></div>
<p class="mb-ad-details-title">技术优势</p>
<p class="mb-ad-details">数字化、智能化云仓系统支持商品一键导入，快速编辑上架；订单批量发货、流程简洁，实时同步物流状态； 结算流水实时同步，资金链及时回笼</p>
</div>
</div>
<div class="swiper-slide">
<div class="mb-ad-advantage-details">
<div class="mb-ad-details-pic-con mb-ad-pic1"></div>
<p class="mb-ad-details-title">技术优势</p>
<p class="mb-ad-details">数字化、智能化云仓系统支持商品一键导入，快速编辑上架；订单批量发货、流程简洁，实时同步物流状态； 结算流水实时同步，资金链及时回笼</p>
</div>
</div>
<div class="swiper-slide">
<div class="mb-ad-advantage-details">
<div class="mb-ad-details-pic-con mb-ad-pic1"></div>
<p class="mb-ad-details-title">技术优势</p>
<p class="mb-ad-details">数字化、智能化云仓系统支持商品一键导入，快速编辑上架；订单批量发货、流程简洁，实时同步物流状态； 结算流水实时同步，资金链及时回笼</p>
</div>
</div>
<div class="swiper-slide">
<div class="mb-ad-advantage-details">
<div class="mb-ad-details-pic-con mb-ad-pic1"></div>
<p class="mb-ad-details-title">技术优势</p>
<p class="mb-ad-details">数字化、智能化云仓系统支持商品一键导入，快速编辑上架；订单批量发货、流程简洁，实时同步物流状态； 结算流水实时同步，资金链及时回笼</p>
</div>
</div>
</div>
</div>
</div>
<!-- 入驻流程 -->
<div class="mb-process-con mobile-content">
<p class="mb-process-con-title">入驻流程和材料</p>
<div class="mb-process">
<div class="mb-pre-process-con">
<div class="step-pic">
<img src="./image/step1.png" alt="">
</div>
<p class="step-title">第一步：注册账号</p>
<p class="step-cont-text">进入云仓官网，注册账号,注册完成后，填写相关信息</p>
</div>
<div class="mb-pre-process-con">
<div class="step-pic">
<img src="./image/step2.png" alt="">
</div>
<p class="step-title">第二步：填写信息</p>
<p class="step-cont-text">确认在线协议填写公司主体信息填写店铺信息提交相关资质</p>
</div>
</div>
<div class="mb-process">
<div class="mb-pre-process-con">
<div class="step-pic">
<img src="./image/step3.png" alt="">
</div>
<p class="step-title">第三步：等待审核</p>
<p class="step-cont-text">云仓工作人员会在1-3个工作日内反馈审核结果，商家可通过登录查询审核进度</p>
</div>
<div class="mb-pre-process-con">
<div class="step-pic">
<img src="./image/step4.png" alt="">
</div>
<p class="step-title">第四步：发布商品</p>
<p class="step-cont-text">审核通过，商家登录后台,商家发布商品并上架</p>
</div>
</div>
<div class="doc-bg-con">
<p class="doc-title doc-title-mst">入驻必备材料</p>
<ul class="doc-ul-list">
<li>营业执照电子版</li>
<li>法人证件电子版</li>
</ul>
</div>
<div class="doc-bg-con">
<p class="doc-title doc-title-no-mst">入驻选填材料</p>
<div class="doc-ul-list-spe">
<ul class="doc-ul-list">
<li>品牌LOGO</li>
<li>其他行业资质</li>
</ul>
<!-- <ul style="width:0.8rem;height: 100%;"></ul>-->
<ul class="doc-ul-list">
<li>品牌授权（代理品需提供）</li>
<li>店铺LOGO</li>
</ul>
</div>
</div>
</div>
<!-- 这些品牌都已入住 -->
<div class="mb-brand-con">
<p class="mb-brand-title">这些品牌都已入驻</p>
<div class="mb-brand-con-bg" id="mb-brand-swiper">
<!-- <p class="mb-brand-type brand-swiper-pagination">
<span class="mb-clothes">服装服饰</span>
<span class="mb-electrical">家电</span>
<span class="mb-food">食品饮料</span>
<span class="mb-maternal">亲子母婴</span>
</p> -->
<div id="mb-brand-swiper-pagination"></div>
<div class="swiper-container">
<div class="swiper-wrapper mb-brand-con-swiper">
<div class="swiper-slide">
<div class="mb-img-con">
<img class="pre-image" src="./image/1.jpg"/>
<img class="pre-image" src="./image/2.jpg"/>
<img class="pre-image" src="./image/2.jpg"/>
<img class="pre-image" src="./image/1.jpg"/>
<img class="pre-image" src="./image/1.jpg"/>
<img class="pre-image" src="./image/2.jpg"/>
<img class="pre-image" src="./image/2.jpg"/>
<img class="pre-image" src="./image/1.jpg"/>
<img class="pre-image" src="./image/1.jpg"/>
<img class="pre-image" src="./image/2.jpg"/>
<img class="pre-image" src="./image/2.jpg"/>
<img class="pre-image" src="./image/1.jpg"/>
</div>
</div>
<div class="swiper-slide">
<div class="mb-img-con">
<img class="pre-image" src="./image/1.jpg"/>
<img class="pre-image" src="./image/2.jpg"/>
<img class="pre-image" src="./image/2.jpg"/>
<img class="pre-image" src="./image/1.jpg"/>
<img class="pre-image" src="./image/1.jpg"/>
<img class="pre-image" src="./image/2.jpg"/>
<img class="pre-image" src="./image/2.jpg"/>
<img class="pre-image" src="./image/1.jpg"/>
<img class="pre-image" src="./image/1.jpg"/>
<img class="pre-image" src="./image/2.jpg"/>
<img class="pre-image" src="./image/2.jpg"/>
<img class="pre-image" src="./image/1.jpg"/>
</div>
</div>
<div class="swiper-slide">
<div class="mb-img-con">
<img class="pre-image" src="./image/1.jpg"/>
<img class="pre-image" src="./image/2.jpg"/>
<img class="pre-image" src="./image/2.jpg"/>
<img class="pre-image" src="./image/1.jpg"/>
<img class="pre-image" src="./image/1.jpg"/>
<img class="pre-image" src="./image/2.jpg"/>
<img class="pre-image" src="./image/2.jpg"/>
<img class="pre-image" src="./image/1.jpg"/>
<img class="pre-image" src="./image/1.jpg"/>
<img class="pre-image" src="./image/2.jpg"/>
<img class="pre-image" src="./image/2.jpg"/>
<img class="pre-image" src="./image/1.jpg"/>
</div>
</div>
<div class="swiper-slide">
<div class="mb-img-con">
<img class="pre-image" src="./image/1.jpg"/>
<img class="pre-image" src="./image/2.jpg"/>
<img class="pre-image" src="./image/2.jpg"/>
<img class="pre-image" src="./image/1.jpg"/>
<img class="pre-image" src="./image/1.jpg"/>
<img class="pre-image" src="./image/2.jpg"/>
<img class="pre-image" src="./image/2.jpg"/>
<img class="pre-image" src="./image/1.jpg"/>
<img class="pre-image" src="./image/1.jpg"/>
<img class="pre-image" src="./image/2.jpg"/>
<img class="pre-image" src="./image/2.jpg"/>
<img class="pre-image" src="./image/1.jpg"/>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 底部 -->
<div class="mb-footer mobile-content">
<div class="mb-about-list">
<ul>
<li>
企业简介
</li>
<li>
发展历程
</li>
<li>
荣誉资质
</li>
<li>
团队介绍
</li>
<li>
新闻动态
</li>
</ul>
<div class="mb-about-us">
<p>联系电话：400-188-199</p>
<p>公司地址:北京市丰台区诺德中心一期4号楼21层</p>
</div>
<p class="mb-about-gs">
Copyright © 2015 - 2021 北京胜天半子科技有限公司 All Rights Reserved
 <img class="icon-image" style="margin-right:4px;"src="../image/national.png">
京ICP备19033223号-1
</p>
</div>
</div>
</div>
</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>
<script>
// 获取屏幕区域的宽度
let w = document.documentElement.clientWidth
if (w < 961) {
// 获取html根元素
let htmlNode = document.querySelector('html')
htmlNode.style.fontSize = w / 750 * 50 * 2 + 'px'
}
window.onload = function () {
let localUrl = window.location.host;
let ht = document.location.protocol;
/** 注册 */
$("#register").on('click',function () {
// 先调用 退出登陆接口，再执行下述操作
......@@ -393,7 +647,6 @@
},
pagination: {
el: '#brand-swiper-pagination',
// clickable: true,
renderBullet: function (index, className) {
let text = '';
className = 'pre-title-span pre'
......@@ -423,54 +676,6 @@
return '<span class="' + className + '">' + text + '</span>';
}
},
// 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++) {
......@@ -491,12 +696,6 @@
}
}
},
// setTransition: function (transition) {
// for (let i = 0; i < this.slides.length; i++) {
// let slide = this.slides.eq(i)
// slide.transition(transition);
// }
// }
}
}
let certifySwiper = new Swiper('#brand-swiper > .swiper-container', brandSwiperOptions)
......@@ -508,11 +707,169 @@
$('#brand-swiper-pagination > span').removeClass('active-custom-title')
$(this).addClass('active-custom-title')
certifySwiper.slideTo(index+4, 1000, false)//切换到对应的slide，速度为1秒
// certifySwiper.update()
});
} // window onload end
//移动端
/** banner 轮播图 */
// 轮播图 基础配置
let swperOptions = {
loop: true, // 循环模式选项
autoplay: {
delay: 4000,
disableOnInteraction: false
},
// 设定初始化时slide的索引
initialSlide: 0,
// Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)
direction: 'horizontal',
// 一个屏幕展示的数量
slidesPerView: 1,
observer: true,
observeParents: true,
pagination: {
el: '#banner-swiper-pagination',
bulletClass: 'hxz-bullet',
bulletActiveClass: 'hxz-bullet-active',
clickable :true,
},
}
let mySwiper = new Swiper('#mb-banner-swiper', swperOptions);
//核心优势
let swperAd = {
loop: true, // 循环模式选项
autoplay: {
delay: 4000,
disableOnInteraction: false
},
// 设定初始化时slide的索引
initialSlide: 0,
// Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)
direction: 'horizontal',
// 一个屏幕展示的数量
slidesPerView: 1,
observer: true,
observeParents: true,
//分页器
// pagination: {
// el: '#banner-swiper-pagination',
// bulletClass: 'hxz-bullet',
// bulletActiveClass: 'hxz-bullet-active',
// clickable :true,
// },
}
let myAd = new Swiper('#mb-ad-swiper', swperAd);
// 轮播图 基础配置
// let footerswiper = {
// loop: true, // 循环模式选项
// autoplay: {
// delay: 4000,
// disableOnInteraction: false
// },
// // 设定初始化时slide的索引
// initialSlide: 0,
// // Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)
// direction: 'horizontal',
// // 一个屏幕展示的数量
// slidesPerView: 1,
// observer: true,
// observeParents: true,
// pagination: {
// el: '#banner-swiper-pagination',
// bulletClass: 'hxz-bullet',
// bulletActiveClass: 'hxz-bullet-active',
// clickable :true,
// },
// }
// let footSwiper = new Swiper('.mb-brand-con-bg', footerswiper);
/** 入驻品牌 */
let mbbrandSwiperOptions = {
watchSlidesProgress: true,
slidesPerView: 'auto',
centeredSlides: true,
observer:true,
loop: true,
initialSlide: 0,
autoplay: false,
navigation: {
nextEl: '#brand-swiper-button-next',
prevEl: '#brand-swiper-button-prev',
},
pagination: {
el: '#mb-brand-swiper-pagination',
renderBullet: function (index, className) {
let text = '';
className = 'pre-title-span pre'
switch(index) {
case 0: {
text = '服饰';
className = className + (index + 1)
break;
}
case 1: {
text = '电器';
className = className + (index + 1)
break;
}
case 2: {
text = '食品';
className = className + (index + 1)
break;
}
case 3: {
text = '母婴';
className = className + (index + 1)
break;
}
}
return '<span class="' + className + '">' + text + '</span>';
}
},
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 * 200 + '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) > 5) {
slide.css('opacity', 0);
}
}
},
}
}
let certifySwiper = new Swiper('#mb-brand-swiper > .swiper-container', mbbrandSwiperOptions)
/** 入驻品牌 分页器 点击效果 */
$('#mb-brand-swiper-pagination > span').eq(0).addClass('active-custom-title')
$('#mb-brand-swiper-pagination').on('click','span',function(){
let index = $(this).index();
$('#mb-brand-swiper-pagination > span').removeClass('active-custom-title')
$(this).addClass('active-custom-title')
certifySwiper.slideTo(index+4, 1000, false)//切换到对应的slide，速度为1秒
});
//顶部导航
$('.mb-menu-icon-con').on('click',function(){
$('.yinchang').addClass('active')
$('.yinchang').removeClass('non')
$('.mb-menu-icon-con').addClass('non')
// $('.yinchang').fadeIn(9000)//淡入淡出没效果
})
$('.yinchang').on('click',function(){
$('.yinchang').addClass('non')
$('.yinchang').removeClass('active')
$('.mb-menu-icon-con').removeClass('non')
})
</script>
</html>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论