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 { ...@@ -472,9 +472,6 @@ header {
transform: scale(0.9); transform: scale(0.9);
} }
@charset "utf-8";
/* CSS Document */
#brand-swiper { #brand-swiper {
position: relative; position: relative;
max-width: 1024px; max-width: 1024px;
...@@ -529,7 +526,7 @@ header { ...@@ -529,7 +526,7 @@ header {
text-align:center; text-align:center;
} }
.custom-swiper-title { #brand-swiper-pagination {
width: 800px; width: 800px;
margin: 40px auto 20px; margin: 40px auto 20px;
display: flex; display: flex;
...@@ -639,6 +636,10 @@ header { ...@@ -639,6 +636,10 @@ header {
border: none; border: none;
} }
.about-list a {
color: #fff;
}
.about-gs { .about-gs {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
......
src/views/officialweb/index.html
浏览文件 @ de92b5d9
...@@ -3,6 +3,8 @@ ...@@ -3,6 +3,8 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>官网-原生</title> <title>官网-原生</title>
<meta name="keywords" content="云仓，胜天半子"/>
<meta name="description" content="供应链产品"/>
<link rel="icon" href="./image/icon.ico"> <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="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">
...@@ -32,7 +34,7 @@ ...@@ -32,7 +34,7 @@
</ul> </ul>
<div class="register-login-btn"> <div class="register-login-btn">
<div id="register" class="register-btn custom-cursor">注 册</div> <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>
</div> </div>
</header> </header>
...@@ -267,11 +269,21 @@ ...@@ -267,11 +269,21 @@
<div class="about-con"> <div class="about-con">
<div class="about-list"> <div class="about-list">
<ul> <ul>
<li>企业简介</li> <li>
<li>发展历程</li> <a href="http://baidu.com" target="_blank">企业简介</a>
<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>
</ul> </ul>
<p class="about-gs"> <p class="about-gs">
Copyright © 2015 - 2021 北京胜天半子科技有限公司 All Rights Reserved.   Copyright © 2015 - 2021 北京胜天半子科技有限公司 All Rights Reserved.  
...@@ -295,6 +307,7 @@ ...@@ -295,6 +307,7 @@
<script> <script>
window.onload = function () { window.onload = function () {
let localUrl = window.location.host; let localUrl = window.location.host;
let ht = document.location.protocol; let ht = document.location.protocol;
...@@ -308,24 +321,23 @@ ...@@ -308,24 +321,23 @@
window.location.href = ht + '//' + 'sj.jxhh.com' + '/login.html?redirect=' + ht + '//' + localUrl + '/platformlogin'; window.location.href = ht + '//' + 'sj.jxhh.com' + '/login.html?redirect=' + ht + '//' + localUrl + '/platformlogin';
}) })
/** 交互效果 js */
/** 顶部nav 滚动背景 */ /** 顶部nav 滚动背景 */
let st = $(window).scrollTop(); headerScroll()
if (st > 100) {
$('header').addClass('scroll-active')
} else if (st < 100) {
$('header').removeClass('scroll-active')
}
$(window).scroll(function(){ $(window).scroll(function(){
headerScroll();
});
/** 交互效果 js */
/** nav 滚动效果 */
function headerScroll () {
let st = $(window).scrollTop(); let st = $(window).scrollTop();
if (st > 100) { if (st > 100) {
$('header').addClass('scroll-active') $('header').addClass('scroll-active')
} else if (st < 100) { } else if (st < 100) {
$('header').removeClass('scroll-active') $('header').removeClass('scroll-active')
} }
}); }
/** banner 轮播图 */ /** banner 轮播图 */
// 轮播图 基础配置 // 轮播图 基础配置
...@@ -367,7 +379,7 @@ ...@@ -367,7 +379,7 @@
}); });
/** 入驻品牌 */ /** 入驻品牌 */
let certifySwiper = new Swiper('#brand-swiper > .swiper-container', { let brandSwiperOptions = {
watchSlidesProgress: true, watchSlidesProgress: true,
slidesPerView: 'auto', slidesPerView: 'auto',
centeredSlides: true, centeredSlides: true,
...@@ -381,53 +393,84 @@ ...@@ -381,53 +393,84 @@
}, },
pagination: { pagination: {
el: '#brand-swiper-pagination', el: '#brand-swiper-pagination',
type: 'custom', // clickable: true,
renderCustom: function (swiper, current, total) { renderBullet: function (index, className) {
let paginationHtml = '<div class="custom-swiper-title">' + let text = '';
'<span class="pre-title-span pre1">服饰</span>' + className = 'pre-title-span pre'
'<span class="pre-title-span pre2">电器</span>' + switch(index) {
'<span class="pre-title-span pre3">食品</span>' + case 0: {
'<span class="pre-title-span pre4">母婴</span>' + text = '服饰';
'</div>'; 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) { case 1: {
return '<div class="custom-swiper-title">' + text = '电器';
'<span class="pre-title-span pre1">服饰</span>' + className = className + (index + 1)
'<span class="pre-title-span pre2 active-custom-title">电器</span>' + break;
'<span class="pre-title-span pre3">食品</span>' +
'<span class="pre-title-span pre4">母婴</span>' +
'</div>';
} }
if (current == 3) { case 2: {
return '<div class="custom-swiper-title">' + text = '食品';
'<span class="pre-title-span pre1">服饰</span>' + className = className + (index + 1)
'<span class="pre-title-span pre2">电器</span>' + break;
'<span class="pre-title-span pre3 active-custom-title">食品</span>' +
'<span class="pre-title-span pre4">母婴</span>' +
'</div>';
} }
if (current == 4) { case 3: {
return '<div class="custom-swiper-title">' + text = '母婴';
'<span class="pre-title-span pre1">服饰</span>' + className = className + (index + 1)
'<span class="pre-title-span pre2">电器</span>' + break;
'<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: { on: {
progress: function (progress) { progress: function (progress) {
for (let i = 0; i < this.slides.length; i++) { for (let i = 0; i < this.slides.length; i++) {
...@@ -448,24 +491,24 @@ ...@@ -448,24 +491,24 @@
} }
} }
}, },
// setTransition: function (transition) { setTransition: function (transition) {
// for (let i = 0; i < this.slides.length; i++) { for (let i = 0; i < this.slides.length; i++) {
// let slide = this.slides.eq(i) let slide = this.slides.eq(i)
// slide.transition(transition); 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(){ $('#brand-swiper-pagination').on('click','span',function(){
let index = $(this).index(); 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() // certifySwiper.update()
// if (index == 0) {
//
// }
}); });
} // window onload end } // window onload end
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论