chen
/
huaxia
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

修改

master
chen 2021-09-10 17:58:15 +08:00
parent 759bd582e7
commit e954b6ef3c
8 changed files with 204 additions and 653 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
css/huaxia.css
View File

@ -173,6 +173,7 @@ ul li {list-style: none;padding: 0px;margin: 0px;}
.tn{text-decoration: none;}
#gotoTop{width: 57px;height: 57px; cursor: pointer;position: fixed;right: 60px;bottom: 110px;z-index: 20;display: none;}
.dmedia{display: inline;}
/* 轮播图 */
.swiper-container {
@ -301,6 +302,16 @@ ul li {list-style: none;padding: 0px;margin: 0px;}
.wc-box .ya-item-box:hover img{transform: scale(.9);transition: transform .5s;}
.wc-box .ya-item-box:hover a{color: #cb1919;text-decoration:underline;}
.wc-box>div>div>a:hover{color: #cb1919;text-decoration:underline;}
.gongn{display: none;width: 50px;height: 50px;position: absolute;right: 50px;cursor: pointer;}
.xinxy-box{background: #f6f5f3;padding-bottom: 65px;}
.xinxy-box .dac{width: 102%;overflow: hidden;}
.syysj-box{background: #100e0d;padding-bottom: 65px;}
.syys-name{font-size: 30px;font-weight: bold;color: #cb1919;}
.sypx-box{background: url(../img/public/px-bac.png); background-size: 100% 100%;padding-bottom: 65px;}
.hz-jies{font-size: 14px;color: rgba(25,25,25,.5);margin-left: 10px;}
.hzly-box{padding: 30px;z-index: 1;}
.hz-input-box div{color: #FFFFFF;background: #cb1919;padding: 10px 50px;border-radius: 3px;}
/* 资讯 */
.zx-nav,.szx-nav,.px-nav{padding: 0;}
.zx-nav li,.szx-nav li,.px-nav li{margin-right: 50px;position: relative;padding: 20px 0 15px 0;}

108
css/huaxiaMedia.css
View File

@ -16,22 +16,101 @@
@media screen and (min-width:621px) and (max-width:720px) {
}
@media screen and (min-width:721px) and (max-width:820px) {
@media screen and (width:320px) {
.exhibition .item-box {height: 200px!important;}
.swiper-button-next, .swiper-button-prev {top: 40%!important;}
}
@media screen and (min-width:821px) and (max-width:920px) {
@media screen and (max-width:750px) {
.logo{width: 60%;}
.head-box {top: 0px;}
.gongn{display: inline;right: 20px;width: 40px;height: 40px;}
.dmedia{display: none;}
.head-box{padding: 10px 20px;}
.p-zy180{padding: 10px 20px 0 20px;}
.cq-item-title-box {padding: 10px 0;}
.font-32 {font-size: 16px;}
.font-22 {font-size: 12px;}
.cq-gengd {font-size: 12px;color: #191919;}
.cq-item-title-box>div>div{background: -webkit-linear-gradient(left,red,rgba(255,255,255,0));height: 6px;bottom: 0;left: 0; width: 70px;opacity: .8;z-index: 0;}
.exhibition .item-box {height: 270px;}
.font-20 {font-size: 16px;}
.font-13 {font-size: 12px;}
.m-x16 {margin-bottom: 16px;}
.swiper-pagination-bullet,.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet-active{width: 6px;height: 6px;}
.swiper-button-next, .swiper-button-prev {background: rgba(0,0,0,.6);width: 20px;height: 20px;top: 42%;}
.swiper-button-next::after, .swiper-button-prev::after {font-size: 12px;}
.m-sx16 {margin-top: 10px;margin-bottom: 10px;}
.m-x16 {margin-bottom: 2px;}
.m-x65 {margin-bottom: 20px;}
.p-sx20{padding-top: 0px;padding-bottom: 10px;}
.m-x37,.m-x32 {margin-bottom: 10px;}
.w25,.w48{width: 100%;}
.msg .dac{display: inline;}
.m-zy15 {margin-left: 10px; margin-right: 10px;margin-top: 10px;}
.font-18 {font-size: 16px;}
.xx-content {line-height: 20px;}
.msg .m-x32:nth-last-child(2) {margin-bottom: 10px;}
.djb{display: inline;}
.djb .w50{width: 100%;margin-bottom: 10px;}
.djb .w50 .m-zy30{margin-left: 0px;margin-right: 0px;margin-bottom: 10px;}
.ys-title {font-size: 16px;}
.ya-item-box .pr{padding-right: 0;}
.m-s37 {margin-top: 10px;}
.syysj-box,.xinxy-box{padding-bottom: 20px;}
.xinxy-box .dac{display: inline;}
.syysj-box .dac{display: inherit;}
.syysj-box .dac .m-zy30{margin-left: 10px;margin-right: 10px;height: 200px;}
.syysj-box .dac .m-zy30 .m-s30{margin-top: 20px;}
.syys-name{font-size: 18px;margin-top: 10px;margin-bottom: 10px;}
.ysj-name{line-height: 20px;}
.w20{width: 100%;padding-bottom: 10px;}
.wc-box > div > img {width: 100%;}
.sypx-box {padding-bottom: 20px;}
.sypx-box .djb .backf {padding-bottom: 10px;}
.sypx-box .djb .backf div{margin-top: 10px;}
.hz-jies{position: absolute;top: 25px;left: 0;margin-left: 0px;}
.hz-imgItem{margin-top: 20px;}
.hz-input-box{display: inherit;}
.hzly-box{padding: 20px;}
.hz-input-box .p-zy10{width: 94%;margin-top: 10px;}
.hz-input-box .p-zy10:first-child{margin-top: 30px;}
.hz-input-box div{margin-top: 10px;text-align: center;}
#gotoTop {width: 40px;height: 40px;right: 20px;bottom: 120px;}
}
@media screen and (min-width:921px) and (max-width:1020px) {
}
@media screen and (min-width:1021px) and (max-width:1120px) {
@media screen and (min-width:751px) and (max-width:850px) {
.logo{width: 26%;}
.gongn{display: inline;}
.dmedia{display: none;}
.p-zy180,.head-box{padding: 10px 60px;}
}
@media screen and (min-width:851px) and (max-width:1000px) {
.logo{width: 26%;}
.gongn{display: inline;}
.dmedia{display: none;}
.input-box{display: none;}
.head-box{padding: 10px 60px 5px 60px;}
.p-zy180 {padding: 10px 60px;}
.dao-box>li{padding: 5px 16px;flex-shrink: 0;text-align: center;font-size: 16px;}
.dao-box>li:last-child{padding-right: 0;}
.dao-box>li>div{padding: 6px 0;}
.head-nav-box > div:last-child {margin-top: 0px;}
.redD {right: 6px;}
}
@media screen and (min-width:1001px) and (max-width:1120px) {
.logo{width: 26%;}
.input-box{display: none;}
.p-zy180,.head-box{padding: 10px 100px;}
.dao-box>li{padding: 5px 16px;flex-shrink: 0;text-align: center;font-size: 16px;}
.dao-box>li:last-child{padding-right: 0;}
.dao-box>li>div{padding: 6px 0;}
.head-nav-box > div:last-child {margin-top: 0px;}
.redD {right: 6px;}
}
@media screen and (min-width:1121px) and (max-width:1260px) {
.input-box{display: none;}
.logo{width: 26%;}
.head-box{padding: 10px 100px;}
.input-box{display: none;}
.p-zy180,.head-box{padding: 10px 100px;}
.dao-box>li{padding: 5px 16px;flex-shrink: 0;text-align: center;font-size: 16px;}
.dao-box>li:last-child{padding-right: 0;}
.dao-box>li>div{padding: 6px 0;}
@ -40,7 +119,7 @@
}
@media screen and (min-width:1261px) and (max-width:1350px) {
.logo{width: 26%;}
.head-box{padding: 10px 100px;}
.p-zy180,.head-box{padding: 10px 100px;}
.dao-box>li{padding: 5px 16px;flex-shrink: 0;text-align: center;font-size: 16px;}
.dao-box>li>div{padding: 6px 0;}
.head-nav-box > div:last-child {margin-top: 10px;}
@ -48,12 +127,17 @@
}
@media screen and (min-width:1351px) and (max-width:1620px) {
.logo{width: 26%;}
.head-box{padding: 20px 100px;}
.p-zy180,.head-box{padding: 20px 100px;}
.dao-box>li{padding: 5px 20px;flex-shrink: 0;text-align: center;font-size: 16px;}
.dao-box>li>div{padding: 6px 0;}
.redD {right: 8px;}
}
@media screen and (min-width:1621px) and (max-width:1820px) {
.logo{width: 30%;}
.head-box{padding: 20px 100px;}
.p-zy180,.head-box{padding: 20px 100px;}
}
@media screen and (min-width:751px) and (max-width:1820px) {
.cq-item-title-box {padding: 20px 0 15px 0;}
.font-32 {font-size: 26px;}
}

1
css/layer.css Normal file
View File

File diff suppressed because one or more lines are too long

BIN
img/public/gn.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

88
index.html
View File

@ -4,14 +4,14 @@
<meta charset="utf-8" />
<title>华夏艺术网</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/layui.css" />
<link rel="stylesheet" type="text/css" href="css/layer.css" />
<link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css" />
<link rel="stylesheet" type="text/css" href="css/huaxia.css"/>
<link rel="stylesheet" type="text/css" href="css/foot.min.css"/>
<link rel="stylesheet" type="text/css" href="css/huaxiaMedia.css"/>
<!-- <script src="js/layui.js" type="text/javascript" charset="utf-8"></script> -->
<script src="js/swiper-bundle.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/layer.js" type="text/javascript" charset="utf-8"></script>
<script src="js/swiper-bundle.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/huaxia.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
@ -39,9 +39,9 @@
mousewheel: false,//禁止鼠标滚动，切换
});
</script>
<div class="p-zy180 dao-boxw head-box">
<div class="dao-boxw head-box pr">
<img class="cq-cp logo" src="img/logo.png">
<div class="head-nav-box fs">
<div class="head-nav-box fs dmedia">
<div class="guan-box">
<span class="cq-cp">关于我们</span>
<span class="sy-dian"></span>
@ -104,6 +104,8 @@
</div>
</div>
</div>
<!-- 功能按钮 -->
<img class="gongn" src="img/public/gn.png">
</div>
<div class="p-zy180">
<div class="djbac cq-item-title-box">
@ -193,13 +195,42 @@
</div>
</div>
<script>
var myswiper = new Swiper('.exhibition', {
$(window).resize(function(){//监听窗口大小的改变
// console.log($(window).width());
sixSwiper()
})
sixSwiper()
function sixSwiper(){
let showNum = 6
let beforeNum = 16
let centeredSlides = true//是否显示半截
let spaceBetween = 25//图片间距
let windowWidth = $(window).width()
if(windowWidth<=900){
showNum = 2
beforeNum = 0
centeredSlides = false
spaceBetween = 15
} else if(900 < windowWidth <=1100){
showNum = 3
beforeNum = 0
centeredSlides = false
} else if(1100< windowWidth <=1450){
showNum = 5
beforeNum = 0
centeredSlides = false
} else {
showNum = 6
beforeNum = 16
centeredSlides = true
}
let myswiper = new Swiper('.exhibition', {
cssMode: false,//禁止鼠标滑动，切换
loop:true,
slidesPerView: 6,//显示数量
centeredSlides: true,//显示半截
spaceBetween: 25,//图片间距
slidesOffsetBefore : 16,
slidesPerView: showNum,//显示数量
centeredSlides: centeredSlides,//显示半截
spaceBetween: spaceBetween,//图片间距
slidesOffsetBefore : beforeNum,
autoplay: {
delay: 4000,
stopOnLastSlide: true,
@ -210,6 +241,8 @@
prevEl: '.two-prev',
},
mousewheel: false,//禁止鼠标滚动，切换
observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true//修改swiper的父元素时，自动初始化swiper
});
myswiper.el.onmouseover = function(){
myswiper.autoplay.stop()
@ -217,8 +250,9 @@
myswiper.el.onmouseleave = function(){
myswiper.autoplay.start()
}
}
</script>
<div class="p-zy180" style="background: #f6f5f3;padding-bottom: 65px;">
<div class="p-zy180 xinxy-box">
<!-- 信息动态 -->
<div class="djbac cq-item-title-box p-s65">
<div class="font-32 pr">信息动态<span class="font-22 m-z10">Information News</span><div class="pa"></div></div>
@ -258,7 +292,7 @@
</div>
</div>
</div>
<div class="dac fw ysc" style="width: 102%;overflow: hidden;">
<div class="dac fw ysc">
<div class="w25 ya-item-box m-s37">
<div class="pr">
<img src="img/public/ys-one.png" width="100%" >
@ -326,7 +360,7 @@
</div>
</div>
<!-- 艺术家 -->
<div class="p-zy180" style="background: #100e0d;padding-bottom: 65px;">
<div class="p-zy180 syysj-box">
<div class="djbac cq-item-title-box" style="margin-top: 0px;color: #FFFFFF;">
<div class="font-32 pr">艺术家<span class="font-22 m-z10">Artist</span><div class="pa"></div></div>
<div class="cq-gengd cq-cp" style="color: #FFFFFF;">View More +</div>
@ -334,7 +368,7 @@
<div class="w100 backf dac">
<img class="cq-cp" src="img/public/ysj-one.png" width="100%">
<div class="m-zy30 col19 font-14">
<div class="m-x20" style="font-size: 30px;font-weight: bold;color: #cb1919;">张龙森</div>
<div class="m-x20 syys-name">张龙森</div>
<div class="ysj-name">职业画家</div>
<div class="ysj-name clips4">毕业于中央美术学院，硕士；曾留学在德国卡塞尔艺术学院，现工作生活于北京 <br/>文字后期后台替换无论你是追求精致生活的Ta，还是要文艺一把的男女青年，还是热爱潮流、追求个性的一族，又或者是一个不折不扣的吃货。来设计周吧！全方位的体验满足你的挑剔。文字后期后台替换无论你是追求精致生活的Ta，还是要文艺一把的男女青年，还是热爱潮流、追求个性的一族，又或者是一个不折不扣的吃货。来设计周吧！全方位的体验满足你的挑剔。</div>
<div class="m-s30">
@ -458,7 +492,7 @@
</div>
</div>
<!-- 培训 -->
<div class="p-zy180 p-x65" style="background: url(img/public/px-bac.png); background-size: 100% 100%;">
<div class="p-zy180 sypx-box">
<div class="djbac cq-item-title-box">
<div class="font-32 pr">培训<span class="font-22 m-z10">Cooperative Partner</span><div class="pa"></div></div>
<div class="cq-gengd cq-cp">View More +</div>
@ -466,16 +500,16 @@
<div class="djb">
<div class="w50 backf">
<img src="img/public/px-01.png" width="100%">
<div class="clips1 m-sx20 ys-title p-zy15">艺术清酒--得寓(酒标作品)Delight Sake</div>
<div class="clips1 ys-title p-zy15">艺术清酒--得寓(酒标作品)Delight Sake</div>
</div>
<div class="w50 djb">
<div class="m-zy30 backf">
<img src="img/public/px-02.png" width="100%">
<div class="clips1 m-sx20 ys-title p-zy15">艺术清酒--得寓(酒标作品)Delight Sake</div>
<div class="clips1 ys-title p-zy15">艺术清酒--得寓(酒标作品)Delight Sake</div>
</div>
<div class="backf">
<img class="" src="img/public/px-03.png" width="100%">
<div class="clips1 m-sx20 ys-title p-zy15">艺术清酒--得寓(酒标作品)Delight Sake</div>
<div class="clips1 ys-title p-zy15">艺术清酒--得寓(酒标作品)Delight Sake</div>
</div>
</div>
</div>
@ -483,10 +517,10 @@
<!-- 合作伙伴 -->
<div class="p-zy180">
<div class="djbac cq-item-title-box">
<div class="font-32 pr">合作伙伴<span class="font-22 m-z10">Cooperative Partner <span style="font-size: 14px;color: rgba(25,25,25,.5);margin-left: 10px;">700+媒体合作、200+机构支持、5000+名艺术家</span></span><div class="pa"></div></div>
<div class="font-32 pr w100">合作伙伴<span class="font-22 m-z10">Cooperative Partner <span class="hz-jies">700+媒体合作、200+机构支持、5000+名艺术家</span></span><div class="pa"></div></div>
<div class="cq-gengd cq-cp fs">View More +</div>
</div>
<div class="djbac">
<div class="djbac hz-imgItem">
<div><img class="cq-cp" style="width: 90%;" src="img/public/hz-01.png" ></div>
<div><img class="cq-cp" style="width: 90%;" src="img/public/hz-02.png" ></div>
<div><img class="cq-cp" style="width: 90%;" src="img/public/hz-03.png" ></div>
@ -499,15 +533,15 @@
<div class="m-s30" style="background-color: #f5f5f5;padding: 5px;">
<div class="pr backf" style="overflow: hidden;">
<img class="pa" src="img/public/sy-input-bc.png" height="100%" width="100%" style="z-index: 0;">
<div style="padding: 30px;z-index: 1;">
<div class="hzly-box">
<div class="djbac cq-item-title-box" style="padding: 0;">
<div class="font-32 pr">合作留言<span class="font-22 m-z10">Cooperation Message <span style="font-size: 14px;color: rgba(25,25,25,.5);margin-left: 10px;">如果您有意见建议请留言，我们将第一时间与您联系！</span></span><div class="pa"></div></div>
<div class="font-32 pr w100">合作留言<span class="font-22 m-z10">Cooperation Message <span class="hz-jies">如果您有意见建议请留言，我们将第一时间与您联系！</span></span><div class="pa"></div></div>
</div>
<div class="djbac m-s20 pr">
<input style="border-radius: 3px;border:1px solid #e9e9e9" class="w100 m-y10 p-sx10 p-zy10" type="text" name="username" placeholder="联系人" />
<input style="border-radius: 3px;border:1px solid #e9e9e9" class="w100 m-y10 p-sx10 p-zy10" type="number" name="userphone" placeholder="联系电话" />
<input style="border-radius: 3px;border:1px solid #e9e9e9" class="w100 m-y10 p-sx10 p-zy10" type="text" name="usercontent" placeholder="联系说明" />
<div class="fs cq-cp" style="color: #FFFFFF;background: #cb1919;padding: 10px 50px;border-radius: 3px;">提交</div>
<div class="djbac m-s20 pr hz-input-box">
<input style="border-radius: 3px;border:1px solid #e9e9e9" class="w100 p-sx10 p-zy10" type="text" name="username" placeholder="联系人" />
<input style="border-radius: 3px;border:1px solid #e9e9e9" class="w100 p-sx10 p-zy10" type="number" name="userphone" placeholder="联系电话" />
<input style="border-radius: 3px;border:1px solid #e9e9e9" class="w100 p-sx10 p-zy10" type="text" name="usercontent" placeholder="联系说明" />
<div id="submitLY" class="fs cq-cp">提交</div>
</div>
</div>
</div>

15
js/huaxia.js
View File

@ -1,4 +1,19 @@
$(function(){
let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
$('#submitLY').click(function(){
let name = $('input[name="username"]').val();
let phone = $('input[name="userphone"]').val();
let content = $('input[name="usercontent"]').val();
if(!name){
layer.msg('请输入联系人')
} else if(!reg_tel.test(phone)){
console.log('请输入正确的联系电话');
} else if(!content){
console.log('请输入联系说明');
} else {
console.log('提交成功');
}
})
let headH = $('#huaxia-head').height()
$(window).resize(function(){//监听窗口大小的改变
// console.log($(window).width());

2
js/layer.js Normal file
View File

@ -0,0 +1,2 @@
/*! layer mobile-v2.0.0 Web弹层组件 MIT License http://layer.layui.com/mobile By 贤心 */
;!function(e){"use strict";var t=document,n="querySelectorAll",i="getElementsByClassName",a=function(e){return t[n](e)},s={type:0,shade:!0,shadeClose:!0,fixed:!0,anim:"scale"},l={extend:function(e){var t=JSON.parse(JSON.stringify(s));for(var n in e)t[n]=e[n];return t},timer:{},end:{}};l.touch=function(e,t){e.addEventListener("click",function(e){t.call(this,e)},!1)};var r=0,o=["layui-m-layer"],c=function(e){var t=this;t.config=l.extend(e),t.view()};c.prototype.view=function(){var e=this,n=e.config,s=t.createElement("div");e.id=s.id=o[0]+r,s.setAttribute("class",o[0]+" "+o[0]+(n.type||0)),s.setAttribute("index",r);var l=function(){var e="object"==typeof n.title;return n.title?'<h3 style="'+(e?n.title[1]:"")+'">'+(e?n.title[0]:n.title)+"</h3>":""}(),c=function(){"string"==typeof n.btn&&(n.btn=[n.btn]);var e,t=(n.btn||[]).length;return 0!==t&&n.btn?(e='<span yes type="1">'+n.btn[0]+"</span>",2===t&&(e='<span no type="0">'+n.btn[1]+"</span>"+e),'<div class="layui-m-layerbtn">'+e+"</div>"):""}();if(n.fixed||(n.top=n.hasOwnProperty("top")?n.top:100,n.style=n.style||"",n.style+=" top:"+(t.body.scrollTop+n.top)+"px"),2===n.type&&(n.content='<i></i><i class="layui-m-layerload"></i><i></i><p>'+(n.content||"")+"</p>"),n.skin&&(n.anim="up"),"msg"===n.skin&&(n.shade=!1),s.innerHTML=(n.shade?"<div "+("string"==typeof n.shade?'style="'+n.shade+'"':"")+' class="layui-m-layershade"></div>':"")+'<div class="layui-m-layermain" '+(n.fixed?"":'style="position:static;"')+'><div class="layui-m-layersection"><div class="layui-m-layerchild '+(n.skin?"layui-m-layer-"+n.skin+" ":"")+(n.className?n.className:"")+" "+(n.anim?"layui-m-anim-"+n.anim:"")+'" '+(n.style?'style="'+n.style+'"':"")+">"+l+'<div class="layui-m-layercont">'+n.content+"</div>"+c+"</div></div></div>",!n.type||2===n.type){var d=t[i](o[0]+n.type),y=d.length;y>=1&&layer.close(d[0].getAttribute("index"))}document.body.appendChild(s);var u=e.elem=a("#"+e.id)[0];n.success&&n.success(u),e.index=r++,e.action(n,u)},c.prototype.action=function(e,t){var n=this;e.time&&(l.timer[n.index]=setTimeout(function(){layer.close(n.index)},1e3*e.time));var a=function(){var t=this.getAttribute("type");0==t?(e.no&&e.no(),layer.close(n.index)):e.yes?e.yes(n.index):layer.close(n.index)};if(e.btn)for(var s=t[i]("layui-m-layerbtn")[0].children,r=s.length,o=0;o<r;o++)l.touch(s[o],a);if(e.shade&&e.shadeClose){var c=t[i]("layui-m-layershade")[0];l.touch(c,function(){layer.close(n.index,e.end)})}e.end&&(l.end[n.index]=e.end)},e.layer={v:"2.0",index:r,open:function(e){var t=new c(e||{});return t.index},close:function(e){var n=a("#"+o[0]+e)[0];n&&(n.innerHTML="",t.body.removeChild(n),clearTimeout(l.timer[e]),delete l.timer[e],"function"==typeof l.end[e]&&l.end[e](),delete l.end[e])},closeAll:function(){for(var e=t[i](o[0]),n=0,a=e.length;n<a;n++)layer.close(0|e[0].getAttribute("index"))}},"function"==typeof define?define(function(){return layer}):function(){var e=document.scripts,n=e[e.length-1],i=n.src,a=i.substring(0,i.lastIndexOf("/")+1);n.getAttribute("merge")||document.head.appendChild(function(){var e=t.createElement("link");return e.href=a+"need/layer.css?2.0",e.type="text/css",e.rel="styleSheet",e.id="layermcss",e}())}()}(window);

596
js/layui.js
View File

@ -1,596 +0,0 @@
/**
* @file layui - 测试
* @author xuexb <fe.xiaowu@gmail.com>
*/
/* global layui */
/* eslint-disable max-nested-callbacks, fecs-indent */
var $ = layui.$;
/**
* 是否基于`phantomjs`测试, 因为有些特殊的case在ie中是不可用的, 比如: `window.event = {}`
*
* @type {boolean}
*/
var IS_PHANTOMJS = layui.device('phantomjs').phantomjs;
describe('layui', function() {
it('version', function() {
expect(layui.v).to.be.a('string');
expect(layui.v).to.not.be.empty;
});
it('layui.config', function() {
expect(layui.config()).to.deep.equal(layui);
expect(layui.config({
testName: 'layui'
})).to.deep.equal(layui);
expect(layui.cache.testName).to.equal('layui');
});
describe('layui.router', function() {
var defaultData = {
path: [],
search: {},
hash: ''
};
it('default params', function() {
expect(layui.router).to.be.a('function');
expect(layui.router()).to.be.a('object').and.deep.equal(defaultData);
});
it('error router', function() {
[
null,
'',
'#123',
'123',
'##'
].forEach(function(key) {
expect(layui.router(key)).to.deep.equal(defaultData);
});
});
it('router querystring', function() {
expect(layui.router('#/a=1/b=2/c=')).to.deep.equal($.extend({}, defaultData, {
href: '/a=1/b=2/c=',
search: {
a: '1',
b: '2',
c: ''
}
}));
expect(layui.router('#/a=测试/b=2').search).to.deep.equal({
a: '测试',
b: '2'
});
// todo
// urlencode
// urldecode
});
it('router hash', function() {
expect(layui.router('#/name#layui')).to.deep.equal($.extend({}, defaultData, {
hash: '#layui',
path: ['name'],
href: '/name#layui'
}));
expect(layui.router('#/name#layui').hash).to.equal('#layui');
expect(layui.router('#/name#layui=1').hash).to.equal('#layui=1');
expect(layui.router('#/name##layui').hash).to.equal('##layui');
expect(layui.router('#/name=1#layui').hash).to.equal('#layui');
expect(layui.router('#/name=1/b=2#layui').hash).to.equal('#layui');
});
it('router path', function() {
expect(layui.router('#/a/b/c=2#hash')).to.deep.equal({
path: ['a', 'b'],
search: {
c: '2'
},
hash: '#hash',
href: '/a/b/c=2#hash'
});
});
});
describe('layui.each', function() {
it('check params', function() {
expect(layui.each).to.be.a('function');
expect(layui.each()).to.deep.equal(layui);
expect(layui.each({})).to.deep.equal(layui);
expect(layui.each([])).to.deep.equal(layui);
expect(layui.each({}, function() {})).to.deep.equal(layui);
expect(layui.each([], function() {})).to.deep.equal(layui);
});
it('null params', function(done) {
var index = 0;
layui.each(null, function(index) {
index += 1;
});
setTimeout(function() {
expect(index).to.equal(0);
done();
});
});
it('object each', function(done) {
layui.each({
name: 'layui'
}, function(key, value) {
expect(this + '').to.deep.equal(value).and.equal('layui');
expect(key).to.equal('name');
done();
});
});
it('array each', function(done) {
layui.each([
'layui'
], function(index, value) {
expect(this + '').to.deep.equal(value).and.equal('layui');
expect(index).to.equal(0);
done();
});
});
it('break array each', function() {
var arr = new Array(100).join(',').split(',');
var flag = -1;
layui.each(arr, function(index) {
flag = index;
if (index > 5) {
return true;
}
});
expect(flag).to.equal(6);
flag = -1;
layui.each(arr, function(index) {
flag = index;
if (index > 5) {
return false;
}
});
expect(flag).to.equal(99);
});
it('break object each', function() {
var obj = {
name: 'layui',
version: '2.x'
};
var flag = null;
layui.each(obj, function(key) {
flag = key;
return true;
});
expect(flag).to.equal('name');
flag = null;
layui.each(obj, function(key) {
flag = key;
return false;
});
expect(flag).to.equal('version');
});
});
describe('layui.img', function() {
var base64 = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
it('success callback', function(done) {
layui.img(base64, function(img) {
expect(img).to.not.undefined;
expect(typeof(img)).to.equal('object', '是img对象');
expect(img.nodeType).to.equal(1, 'img标签节点');
// 在ie11中不通过, 原因目前不明
// expect(img.width).to.equal(1);
// expect(img.height).to.equal(1);
done();
});
});
it('error callback', function(done) {
layui.img('/api/mock?statusCode=404', function() {}, function(e) {
expect(e).to.not.undefined;
done();
});
});
// 先删除, 因为没有哪个图片是决定不变的
// it('http 200', function (done) {
// layui.img('https://www.baidu.com/img/bd_logo1.png', function (img) {
// expect(img).to.not.undefined;
// done();
// });
// });
// 由于没有超时配置, 在部分设备中, dns解析可能超时
// it('http 404', function (done) {
// layui.img('http://www.404.xx/logo.404.gif', function () {}, function (e) {
// expect(e).to.not.undefined;
// done();
// });
// });
it('load complete', function(done) {
layui.img(base64, function() {
layui.img(base64, function(img) {
expect(img).to.not.undefined;
done();
});
});
});
});
it('layui.hint', function() {
expect(layui.hint).to.be.a('function');
expect(layui.hint()).to.be.a('object');
expect(layui.hint().error).to.be.a('function');
});
describe('layui.stope', function() {
it('stopPropagation', function(done) {
layui.stope({
stopPropagation: function(e) {
expect(e).to.be.undefined;
done();
}
});
});
it('cancelBubble', function() {
var event = {};
layui.stope(event);
expect(event.cancelBubble).to.be.true;
});
// ie中不支持, 只针对phantomjs测试
if (IS_PHANTOMJS) {
it('window.event', function() {
var old = window.event;
var event = window.event = {};
layui.stope();
expect(event.cancelBubble).to.be.true;
window.event = old;
});
}
});
describe('layui.onevent', function() {
it('check params and return value', function() {
expect(layui.onevent).to.be.a('function');
expect(layui.onevent()).to.deep.equal(layui);
expect(layui.onevent([], [], [])).to.deep.equal(layui);
expect(layui.onevent({}, {}, {})).to.deep.equal(layui);
expect(layui.onevent('test-' + Date.now(), 'click', function() {})).to.not.deep
.equal(layui);
});
it('bind event', function(done) {
var id = 'test-bind-event';
var data = {
name: 'layui'
};
layui.onevent(id, 'click', function(param) {
expect(this).to.deep.equal(layui);
expect(param).to.deep.equal(data);
done();
});
layui.event(id, 'click', data);
});
it('coverage of the same name event', function() {
var id = 'test-same-event';
var index = 0;
layui.onevent(id, 'click', function() {
index = 1;
});
layui.onevent(id, 'click', function() {
index = 2;
});
layui.event(id, 'click');
expect(index).to.equal(2);
});
});
describe('layui.event', function() {
it('trigger event', function(done) {
layui.onevent('test-trigger', 'click(*)', function(data) {
expect(data).to.be.true;
done();
});
layui.event('test-trigger', 'click(*)', true);
});
it.skip('trigger multiple', function() {
var index = 0;
var id = 'test-trigger-multiple';
layui.onevent(id, 'nav', function() {
index += 1;
});
layui.event(id, 'nav');
layui.event(id, 'nav');
layui.event(id, 'nav');
expect(index).to.equal(3);
});
it('return value', function() {
expect(layui.event('id', 'event')).to.be.null;
// 只有在返回 false 时, 结果才是 false
layui.onevent('test-return-value-1', 'click', function(data) {
return data;
});
expect(layui.event('test-return-value-1', 'click', false)).to.be.false;
expect(layui.event('test-return-value-1', 'click', true)).to.be.null;
expect(layui.event('test-return-value-1', 'click')).to.be.null;
});
});
describe('layui.sort', function() {
var numberData = [{
name: 1
},
{
name: 3
},
{
name: 2
}
];
it('check params and return value', function() {
expect(layui.sort()).to.deep.equal([], '空参数时默认为空数组');
expect(layui.sort({})).to.deep.equal({}, '只传空对象默认返回');
expect(layui.sort({
name: 'layui'
})).to.deep.equal({
name: 'layui'
}, '只传一个对象参数时返回');
expect(layui.sort([{
name: 'layui'
}], 'name')).to.deep.equal([{
name: 'layui'
}]);
expect(layui.sort([{
name: 'layui'
}], 'name', true)).to.deep.equal([{
name: 'layui'
}]);
});
// 测试是否污染原数据
it('clone object', function() {
var clone = layui.sort(numberData, 'name');
// 往clone对象添加
clone.push('layui');
expect(clone).to.have.lengthOf(4);
expect(numberData).to.have.lengthOf(3);
});
it('format value number', function() {
var result = layui.sort([{
key: '1'
},
{
key: '-1'
},
{
key: 2
},
{
key: 3
}
], 'key');
expect(result).to.deep.equal([{
key: '-1'
},
{
key: '1'
},
{
key: 2
},
{
key: 3
}
]);
});
it('asc order', function() {
var result = layui.sort(numberData, 'name');
expect(result).to.deep.equal([{
name: 1
},
{
name: 2
},
{
name: 3
}
]);
});
it('desc order', function() {
var result = layui.sort(numberData, 'name', true);
expect(result).to.deep.equal([{
name: 3
},
{
name: 2
},
{
name: 1
}
]);
});
it('error data', function() {
var data = [
// null,
{
name: 5
},
{},
[],
'test',
{
name: '3'
}
];
expect(layui.sort(data, 'name')).to.deep.equal([{},
[],
'test',
{
name: '3'
},
{
name: 5
}
]);
});
});
it('layui.device', function() {
expect(layui.device).to.be.a('function');
expect(layui.device()).to.be.a('object');
expect(layui.device().ie).to.be.not.undefined;
expect(layui.device().ios).to.be.not.undefined;
expect(layui.device().android).to.be.not.undefined;
expect(layui.device().weixin).to.be.a('boolean');
expect(layui.device('weixin').weixin).to.be.false;
expect(layui.device('.*')['.*']).to.be.not.empty;
expect(layui.device('layui.com')['layui.com']).to.be.false;
});
describe('layui.getStyle', function() {
it('real test', function() {
var elem = $('<div />').css({
position: 'fixed',
zIndex: 10
}).appendTo('body').get(0);
expect(layui.getStyle(elem, 'position')).to.equal('fixed');
expect(layui.getStyle(elem, 'z-index')).to.equal('10');
});
it('mock currentStyle', function(done) {
var node = {
currentStyle: {
getPropertyValue: function(name) {
expect(name).to.equal('layui');
done();
}
}
};
layui.getStyle(node, 'layui');
});
});
it('layui.extend', function() {
expect(layui.extend).to.be.a('function');
expect(layui.extend()).to.deep.equal(layui);
expect(layui.extend({
v: 'v',
util: 'util'
})).to.deep.equal(layui);
var id = 'test-extend-' + Date.now();
var data = {};
data[id] = id;
expect(layui.modules[id]).to.be.undefined;
layui.extend(data);
expect(layui.modules[id]).to.be.not.undefined;
expect(layui.modules[id]).to.equal(id);
delete layui.modules[id];
});
describe('layui.data', function() {
if (IS_PHANTOMJS) {
it('not support JSON', function() {
var old = window.JSON;
window.JSON = null;
expect(layui.data()).to.be.undefined;
window.JSON = {};
expect(layui.data()).to.be.undefined;
window.JSON = old;
});
}
// 在支持情况下才测试
if (window.localStorage) {
it('delete table data', function() {
var id = 'test-delete-data';
localStorage[id] = true;
expect(localStorage[id]).to.equal('true');
expect(layui.data(id, null)).to.be.true;
expect(localStorage[id]).to.be.undefined;
});
it('get table data', function() {
var table = 'test-get-table-data';
expect(layui.data(table)).to.deep.equal({});
layui.data(table, {
key: 'name',
value: 'layui'
});
expect(layui.data(table)).to.deep.equal({
name: 'layui'
});
// 删除数据
layui.data(table, null);
});
it('get data', function() {
var id = 'test-get-data';
// 直接获取肯定为空
expect(layui.data(null, id)).to.be.undefined;
// 写入数据
expect(layui.data(null, {
key: id,
value: true
})).to.be.true;
expect(layui.data(null, id)).to.be.true;
// 清除数据
layui.data(null, {
key: id,
remove: true
});
});
it('remove data', function() {
var id = 'test-remove-data';
layui.data(null, {
key: id,
value: true
});
expect(layui.data(null, id)).to.be.true;
layui.data(null, {
key: id,
remove: true
});
expect(layui.data(null, id)).to.be.undefined;
});
}
});
});
/* eslint-enable max-nested-callbacks, fecs-indent */