Skip to content

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

原生官网-优化

上级 23796ce8
隐藏空白字符变更
内嵌 并排
正在显示 包含 121 行增加 和 77 行删除
src/views/officialweb/css/public.css
浏览文件 @ de92b5d9
......@@ -472,9 +472,6 @@ header {
transform: scale(0.9);
}
@charset "utf-8";
/* CSS Document */
#brand-swiper {
position: relative;
max-width: 1024px;
......@@ -529,7 +526,7 @@ header {
text-align:center;
}
.custom-swiper-title {
#brand-swiper-pagination {
width: 800px;
margin: 40px auto 20px;
display: flex;
......@@ -639,6 +636,10 @@ header {
border: none;
}
.about-list a {
color: #fff;
}
.about-gs {
font-size: 14px;
font-weight: 400;
......
src/views/officialweb/index.html
浏览文件 @ de92b5d9
......@@ -3,7 +3,9 @@
<head>
<meta charset="UTF-8">
<title>官网-原生</title>
<link rel="icon" href="./image/icon.ico">
<meta name="keywords" content="云仓，胜天半子"/>
<meta name="description" content="供应链产品"/>
<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">
</head>
......@@ -32,7 +34,7 @@
</ul>
<div class="register-login-btn">
<div id="register" class="register-btn custom-cursor">注 册</div>
<div id="login" class="login-btn custom-cursor" onclick="toLogin()">登 录</div>
<div id="login" class="login-btn custom-cursor">登 录</div>
</div>
</div>
</header>
......@@ -267,11 +269,21 @@
<div class="about-con">
<div class="about-list">
<ul>
<li>企业简介</li>
<li>发展历程</li>
<li>荣誉资质</li>
<li>团队介绍</li>
<li>新闻动态</li>
<li>
<a href="http://baidu.com" target="_blank">企业简介</a>
</li>
<li>
<a href="http://baidu.com" target="_blank">发展历程</a>
</li>
<li>
<a href="http://baidu.com" target="_blank">荣誉资质</a>
</li>
<li>
<a href="http://baidu.com" target="_blank">团队介绍</a>
</li>
<li>
<a href="http://baidu.com" target="_blank">新闻动态</a>
</li>
</ul>
<p class="about-gs">
Copyright © 2015 - 2021 北京胜天半子科技有限公司 All Rights Reserved.  
......@@ -295,6 +307,7 @@
<script>
window.onload = function () {
let localUrl = window.location.host;
let ht = document.location.protocol;
......@@ -308,24 +321,23 @@
window.location.href = ht + '//' + 'sj.jxhh.com' + '/login.html?redirect=' + ht + '//' + localUrl + '/platformlogin';
})
/** 交互效果 js */
/** 顶部nav 滚动背景 */
let st = $(window).scrollTop();
if (st > 100) {
$('header').addClass('scroll-active')
} else if (st < 100) {
$('header').removeClass('scroll-active')
}
headerScroll()
$(window).scroll(function(){
headerScroll();
});
/** 交互效果 js */
/** nav 滚动效果 */
function headerScroll () {
let st = $(window).scrollTop();
if (st > 100) {
$('header').addClass('scroll-active')
} else if (st < 100) {
$('header').removeClass('scroll-active')
}
});
}
/** banner 轮播图 */
// 轮播图 基础配置
......@@ -367,7 +379,7 @@
});
/** 入驻品牌 */
let certifySwiper = new Swiper('#brand-swiper > .swiper-container', {
let brandSwiperOptions = {
watchSlidesProgress: true,
slidesPerView: 'auto',
centeredSlides: true,
......@@ -381,53 +393,84 @@
},
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>';
// clickable: true,
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;
}
$(".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;
},
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++) {
......@@ -448,24 +491,24 @@
}
}
},
// setTransition: function (transition) {
// for (let i = 0; i < this.slides.length; i++) {
// let slide = this.slides.eq(i)
// slide.transition(transition);
// }
// }
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)
/** 入驻品牌 分页器 点击效果 */
$('#brand-swiper-pagination > span').eq(0).addClass('active-custom-title')
$('#brand-swiper-pagination').on('click','span',function(){
let index = $(this).index();
certifySwiper.slideTo(index, 1000, false)//切换到对应的slide，速度为1秒
$('#brand-swiper-pagination > span').removeClass('active-custom-title')
$(this).addClass('active-custom-title')
certifySwiper.slideTo(index+4, 1000, false)//切换到对应的slide，速度为1秒
// certifySwiper.update()
// if (index == 0) {
//
// }
});
} // window onload end
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论