Skip to content

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

web-1-10

上级 d4270343
显示空白字符变更
内嵌 并排
正在显示 包含 223 行增加 和 0 行删除
src/views/officialweb/css/public.css 0 → 100644
浏览文件 @ a1dcefa3
* {
margin: 0;
padding: 0;
}
/* 公用 */
header, section, footer, ul, li, p, dl, dt, dd {
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
}
/* pc和移动都需要都 */
header {
width: 100%;
/*position: fixed;
top: 0;
left: 0;
z-index: 999;*/
}
/*测试 class*/
.coral {
background-color: lightcoral;
}
.blue {
background-color: lightblue;
}
.green {
background-color: lightgreen;
}
.pink {
background-color: lightpink;
}
.gray {
background-color: lightgray;
}
/* PC 专用样式 */
@media screen and (min-width: 960px) {
.pc {
display: block !important;
}
.mobile {
display: none !important;
}
header {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
.scroll-active {
background-color: #070D41;
}
.nav {
width: 80%;
margin: 0 auto;
height: 100px;
color: #fff;
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
}
.nav > li {
padding: 10px 25px;
cursor: pointer;
font-size: 18px;
}
.swiper{
width: 100%;
height: 562px;
}
.active {
background-color: #1e1e1e!important;
}
}
/* pc end */
/* 移动端 专用样式 */
@media screen and (max-width: 961px) {
.pc {
display: none !important;
}
.mobile {
display: block !important;
}
}
/* mobile end */
src/views/officialweb/index.html 0 → 100644
浏览文件 @ a1dcefa3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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">
</head>
<body>
<!--PC-->
<div style="width: 100%;height: 100%;">
<header>
<ul class="nav">
<li>首页</li>
<li>开放平台</li>
<li>云仓</li>
<li>关于我们</li>
</ul>
</header>
<!-- banner 轮播图 -->
<div class="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>
<div style="width: 100%; height: 1000px;">
</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>
window.onload = function () {
// 获取 channel_id
let websiteUrl = 'www.stbz.net'
if (window.location.hostname != 'localhost') {
websiteUrl = window.location.host
}
let ssoUrl = ''
/** banner 轮播图 */
// 轮播图 基础配置
let swperOptions = {
loop: true, // 循环模式选项
autoplay: {
delay: 4000,
disableOnInteraction: false
},
// 设定初始化时slide的索引
initialSlide: 0,
// Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)
direction: 'horizontal',
// 一个屏幕展示的数量
slidesPerView: 1,
observer: true,
observeParents: true
}
let mySwiper = new Swiper('.swiper', swperOptions)
/** */
$(window).scroll(function(){
let st = $(window).scrollTop();
if(st>100){
$('header').addClass('scroll-active')
}else if(st<100){
$('header').removeClass('scroll-active')
}
});
/** */
/** */
/** */
/** */
/** */
/** */
// $.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 () {}
// })
console.log(11, $('h3').text())
} // window onload end
</script>
</html>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论