master
YDD 2021-09-10 18:09:37 +08:00
commit bac1557f44
22 changed files with 1087 additions and 685 deletions

View File

@ -12,6 +12,7 @@ body{margin: 0;padding: 0;}
.op9{opacity: .9;}
.op8{opacity: .8;}
.op7{opacity: .7;}
.op6{opacity: .6;}
.dis{display: flex;}
.djb{display: flex;justify-content: space-between;}
@ -83,6 +84,8 @@ body{margin: 0;padding: 0;}
.pd30{padding: 30px;}
.pd20{padding: 20px;}
.pd10{padding: 10px;}
.p-s65{padding-top: 65px;}
.p-s30{padding-top:30px;}
@ -170,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 {
@ -298,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;}
@ -310,14 +324,15 @@ ul li {list-style: none;padding: 0px;margin: 0px;}
.zx-gg{padding: 6px 20px;border: 1px solid #222222;border-radius: 3px;font-size: 16px;}
/* 机构 */
#jg-list img,#jgm-list img,#jgz-list img,#jgy-list img,#jgs-list img,#pmd-list img,#pxsp-list img{transition: transform .5s;}
#jg-list img:hover,#jgm-list img:hover,#jgz-list img:hover,#jgy-list img:hover,#jgs-list img:hover,#pmd-list img:hover{transform: scale(.94);transition: transform .5s;cursor: pointer;}
#jg-list img,#jgm-list img,#jgz-list img,#jgy-list img,#jgs-list img,#pmd-list img,#pxsp-list img,#ys-list img,#zl-list img {transition: transform .5s;}
#jg-list img:hover,#jgm-list img:hover,#jgz-list img:hover,#jgy-list img:hover,#jgs-list img:hover,#pmd-list img:hover,#ys-list img:hover,#zl-list img:hover{transform: scale(.94);transition: transform .5s;cursor: pointer;}
#zl-list div:hover .m-s20{font-weight: bold;}
.jg-guanz{width: 110px;height: 42px;line-height: 42px;text-align: center;}
.jg-xian{border: 0.5px solid #dbdbdb;position: absolute;right: -26px;height: 28%;top: 12%;}
/* 拍卖 */
#pm-list>div:hover{box-shadow: 0 0 20px rgba(0,0,0,.2);cursor: pointer;}
#pm-list>div:hover div:last-child>div:first-child{color: #CB1919;}
#pm-list>div:hover div:last-child>div:first-child .quan{border: 2px solid #CB1919;}
#pm-list>div:hover,#pxzb-list>div:hover{box-shadow: 0 0 20px rgba(0,0,0,.2);cursor: pointer;}
#pm-list>div:hover div:last-child>div:first-child,#pxzb-list>div:hover div:last-child>div:first-child{color: #CB1919;}
#pm-list>div:hover div:last-child>div:first-child .quan,#pxzb-list>div:hover div:last-child>div:first-child .quan{border: 2px solid #CB1919;}
.quan{width: 6px;height: 6px;border-radius: 100%;border: 2px solid #818181;margin-right: 6px;}
/* 培训 */
.px-item-img{margin-bottom: -4px;}
@ -326,11 +341,22 @@ ul li {list-style: none;padding: 0px;margin: 0px;}
#px-list>div:hover div>div:first-child .quan{border: 2px solid #CB1919;}
#pxsp-list div>div:first-child:hover {transform: scale(.94);transition: transform .5s;cursor: pointer;}
#pxsp-list div:hover>div {color: #CB1919;font-weight: bold;}
/* 艺术家 */
#ys-cate{padding: 0;}
#ys-cate li a{text-decoration: none;color: #181818;font-size: 18px;}
#ys-cate li {margin-right: 29px;position: relative;padding: 20px 0 15px 0;}
#ys-cate li div {border-bottom: 2px solid #FFFFFF;width: 100%;position: absolute;}
#ys-cate li .zx-nav-active{border-bottom: 2px solid #CB1919;position: absolute;bottom: -1px;}
#ys-cate li .zx-nav-title{color: #CB1919;}
#ys-list div:hover .djbac{color: #CB1919;}
#ys-list div:hover .djbac>div:last-child{color: #FFFFFF;background-color: #CB1919;cursor: pointer;}
#ysj-ft>div>div:hover{box-shadow: 0px 0px 20px rgba(0,0,0,.2);cursor: pointer;color: #CB1919;opacity: 1;}
#ysj-ft>div>div:hover div{color: #CB1919;}
#ysj-ft>div>div .dac span{opacity: 0;}
#ysj-ft>div>div:hover .op6{opacity: 1;}
#ysj-ft>div>div:hover .dac span{opacity: 1;}
#ysj-skd-box{width: 26%;}
#ysj-skd-box .m-s20:hover{cursor: pointer;color: #CB1919;}

View File

@ -16,28 +16,128 @@
@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: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:1021px) and (max-width:1120px) {
@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:1121px) and (max-width:1220px) {
@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:1221px) and (max-width:1320px) {
@media screen and (min-width:1121px) and (max-width:1260px) {
.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: 10px;}
.redD {right: 6px;}
}
@media screen and (min-width:1024px) and (max-width:1620px) {
@media screen and (min-width:1261px) and (max-width:1350px) {
.logo{width: 26%;}
.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;}
.redD {right: 6px;}
}
@media screen and (min-width:1024px) and (max-width:1820px) {
@media screen and (min-width:1351px) and (max-width:1620px) {
.logo{width: 26%;}
.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

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,149 @@
<!DOCTYPE html>
<html>
<head>
<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/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/ispinner.css"/>
<script src="../../js/jquery-1.9.1.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>
<!-- Swiper -->
<div class="ont-swiper swiper-container" id="top">
<div class="swiper-wrapper">
<div class="swiper-slide"><img class="banner-img" src="../../img/public/banner.png" ></div>
<div class="swiper-slide"><img class="banner-img" src="../../img/public/banner.png" ></div>
</div>
<!-- 右箭头 -->
<!-- <div class="swiper-button-next"></div> -->
<!-- 左箭头 -->
<!-- <div class="swiper-button-prev"></div> -->
<!-- 指示点 -->
<div class="swiper-pagination"></div>
</div>
<script>
let swiper = new Swiper('.ont-swiper', {
cssMode: false,//禁止鼠标滑动,切换
loop:true,
autoplay: {
delay: 3000,
stopOnLastSlide: true,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable :true,
},
mousewheel: false,//禁止鼠标滚动,切换
});
</script>
<div class="p-zy180 p-sx10 dao-boxw" style="position: sticky;top: -6px;z-index: 10;background: #FFFFFF;">
<img class="logo" src="../../img/logo.png">
<div>
<div class="guan-box">
<span class="cq-cp">关于我们</span>
<span class="sy-dian"></span>
<div class="cq-cp dac">
<img src="../../img/sy-scart.png" width="14" height="15" style="margin-right: 4px;">
<span class="cq-cp">我的购物车</span>
</div>
<span class="sy-dian"></span>
<span class="cq-cp">积分商城</span>
<span class="sy-dian"></span>
<span class="cq-cp">联系我们</span>
<span class="sy-dian"></span>
<span class="cq-cp">登录/注册</span>
<div class="dn">
<span>个人中心</span>
<span>【退出】</span>
</div>
</div>
<div class="dend w100 ac m-s20">
<div class="w100">
<ul class="dao-box dac">
<li class="pr">
<div class="pr djcacfw"><a href="../../index.html">首页</a><div class="xiahx pa dn"></div></div>
<!---->
<span class="redD pa dn"></span>
</li>
<li class="pr">
<div class="pr djcacfw"><a href="realTimeInfo.html">资讯</a><div class="xiahx pa dn"></div></div>
<span class="redD pa dn"></span>
</li>
<li class="pr">
<div class="pr djcacfw">展览<div class="xiahx pa dn"></div></div>
<span class="redD pa dn"></span>
</li>
<li class="pr">
<div class="pr cq-dao-active djcacfw">艺术家<div class="xiahx pa "></div></div>
<span class="redD pa "></span>
</li>
<li class="pr">
<div class="pr djcacfw"><a href="mechanism.html">机构</a><div class="xiahx pa dn"></div></div>
<span class="redD pa dn"></span>
</li>
<li class="pr">
<div class="pr djcacfw"><a href="train.html">培训</a><div class="xiahx pa dn"></div></div>
<span class="redD pa dn"></span>
</li>
<li class="pr">
<div class="pr djcacfw">商城<div class="xiahx pa dn"></div></div>
<span class="redD pa dn"></span>
</li>
<li class="pr">
<div class="pr djcacfw"><a href="auction.html">拍卖</a><div class="xiahx pa dn"></div></div>
<span class="redD pa dn"></span>
</li>
</ul>
</div>
<div class="pr input-box backf">
<input type="text" name="" id="" class="w100" placeholder="关键字搜索" value="" />
<img class="pa cq-cp" src="../../img/sy-search.png">
</div>
</div>
</div>
</div>
<div class="p-zy320" style="background: #e6e6e6;">
<div class="djbac">
<div class="font-40" style="padding: 45px 0 30px 0;">艺术家</div>
<div class="dac m-s20">
<div class="cq-cp zx-gg">在线签约</div>
</div>
</div>
</div>
<div class="p-zy320">
<!-- 二级导航 -->
<ul class="bbt dac" id="ys-cate"></ul>
<!-- 列表数据 -->
<div id="ys-list" class="dac fw" style="width: 102.6%;"></div>
<div class="p-sx65 zx-more" style="display: none;justify-content: center;align-items: center;">
<div class="container gray">
<div class="ispinner gray animating">
<div class="ispinner-blade"></div>
<div class="ispinner-blade"></div>
<div class="ispinner-blade"></div>
<div class="ispinner-blade"></div>
<div class="ispinner-blade"></div>
<div class="ispinner-blade"></div>
<div class="ispinner-blade"></div>
<div class="ispinner-blade"></div>
<div class="ispinner-blade"></div>
<div class="ispinner-blade"></div>
<div class="ispinner-blade"></div>
<div class="ispinner-blade"></div>
</div>
</div>
<div class="m-z10 col7d">下拉加载更多信息</div>
</div>
</div>
<!-- 底部导航 -->
<iframe src="../../public/foot-tab.html" class="foot-iframe" frameborder="0"scrolling="no" ></iframe>
<!-- 回到顶部 -->
<img id="gotoTop" onclick="pageScroll()" src="../../img/public/backTop.png" alt="图片丢失" title="回到顶部">
</body>
</html>

View File

@ -0,0 +1,194 @@
<!DOCTYPE html>
<html>
<head>
<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/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/ispinner.css"/>
<script src="../../js/jquery-1.9.1.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>
<!-- Swiper -->
<div class="ont-swiper swiper-container" id="top">
<div class="swiper-wrapper">
<div class="swiper-slide"><img class="banner-img" src="../../img/public/banner.png" ></div>
<div class="swiper-slide"><img class="banner-img" src="../../img/public/banner.png" ></div>
</div>
<!-- 右箭头 -->
<!-- <div class="swiper-button-next"></div> -->
<!-- 左箭头 -->
<!-- <div class="swiper-button-prev"></div> -->
<!-- 指示点 -->
<div class="swiper-pagination"></div>
</div>
<script>
let swiper = new Swiper('.ont-swiper', {
cssMode: false,//禁止鼠标滑动,切换
loop:true,
autoplay: {
delay: 3000,
stopOnLastSlide: true,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable :true,
},
mousewheel: false,//禁止鼠标滚动,切换
});
</script>
<div class="p-zy180 p-sx10 dao-boxw" style="position: sticky;top: -6px;z-index: 10;background: #FFFFFF;">
<img class="logo" src="../../img/logo.png">
<div>
<div class="guan-box">
<span class="cq-cp">关于我们</span>
<span class="sy-dian"></span>
<div class="cq-cp dac">
<img src="../../img/sy-scart.png" width="14" height="15" style="margin-right: 4px;">
<span class="cq-cp">我的购物车</span>
</div>
<span class="sy-dian"></span>
<span class="cq-cp">积分商城</span>
<span class="sy-dian"></span>
<span class="cq-cp">联系我们</span>
<span class="sy-dian"></span>
<span class="cq-cp">登录/注册</span>
<div class="dn">
<span>个人中心</span>
<span>【退出】</span>
</div>
</div>
<div class="dend w100 ac m-s20">
<div class="w100">
<ul class="dao-box dac">
<li class="pr">
<div class="pr djcacfw"><a href="../../index.html">首页</a><div class="xiahx pa dn"></div></div>
<!---->
<span class="redD pa dn"></span>
</li>
<li class="pr">
<div class="pr djcacfw"><a href="realTimeInfo.html">资讯</a><div class="xiahx pa dn"></div></div>
<span class="redD pa dn"></span>
</li>
<li class="pr">
<div class="pr djcacfw">展览<div class="xiahx pa dn"></div></div>
<span class="redD pa dn"></span>
</li>
<li class="pr">
<div class="pr cq-dao-active djcacfw">艺术家<div class="xiahx pa "></div></div>
<span class="redD pa "></span>
</li>
<li class="pr">
<div class="pr djcacfw"><a href="mechanism.html">机构</a><div class="xiahx pa dn"></div></div>
<span class="redD pa dn"></span>
</li>
<li class="pr">
<div class="pr djcacfw"><a href="train.html">培训</a><div class="xiahx pa dn"></div></div>
<span class="redD pa dn"></span>
</li>
<li class="pr">
<div class="pr djcacfw">商城<div class="xiahx pa dn"></div></div>
<span class="redD pa dn"></span>
</li>
<li class="pr">
<div class="pr djcacfw"><a href="auction.html">拍卖</a><div class="xiahx pa dn"></div></div>
<span class="redD pa dn"></span>
</li>
</ul>
</div>
<div class="pr input-box backf">
<input type="text" name="" id="" class="w100" placeholder="关键字搜索" value="" />
<img class="pa cq-cp" src="../../img/sy-search.png">
</div>
</div>
</div>
</div>
<div class="p-zy320" style="background: #e6e6e6;">
<div class="djbac">
<div class="font-40" style="padding: 45px 0 30px 0;">周安明</div>
<div class="dac m-s20">
<div class="cq-cp zx-xx">关注他</div>
</div>
</div>
</div>
<div class="p-zy320">
<div class="backf5 m-s50" style="padding: 6px;">
<div class="p-sx20 backf">
<div class="djb bbt m-zy20">
<!-- 二级导航 -->
<ul class="zx-nav dac" id="ys-nav" style="padding: 0;margin: 0;">
<li class="pr"><a href="javascript:;" class="zx-nav-title">个人简介</a><div class="zx-nav-active"></div><p class="jg-xian"></p></li>
<li class="pr"><a href="javascript:;">推荐作品</a><div></div><p class="jg-xian"></p></li>
<li class="pr"><a href="javascript:;">艺术访谈</a><div></div><p class="jg-xian"></p></li>
<li class="pr"><a href="javascript:;">书刊杂志</a><div></div></li>
</ul>
</div>
<!-- 简介 -->
<div id="ysj-jj">
<div class="bbt m-zy20 m-s20 p-x20">
<img style="width: 34%;" src="../../img/public/ys-d01.png" alt="图片丢失" title="">
<div class="font-26 m-sx20">周安明</div>
<div class="col19 linh30">出版有《周明安作品集》、《周明安画虎精品选》、《中国跨世纪美术家画集、周明安中国画动物、山水卷》、《中国当代线描资料丛书、动物出版有《周明安作品集》、《周明安画虎精品选》、《中国跨世纪美术家画集、周明安中国画动物、山水卷》、《中国当代线描资料丛书、动物</div>
</div>
<div class="m-zy20 m-s20 linh30">
<div class="tin2 col19">周明安1949年生于广州祖籍山西河曲现为四川省诗书画院专业画家、国家一级美术师中国美术家协会会员、四川省书法周明安1949年生于广州祖籍山西河曲现为四川省诗书画院专业画家、国家一级美术师中国美术家协会会员、四川省书法</div>
<img class="m-sx20 w100" src="../../img/public/ys-d02.png" alt="图片丢失" title="" >
</div>
</div>
<!-- 推荐作品 -->
<div id="ysj-zp">
<div id="" class="p-zy20">
<!-- 三级导航 -->
<ul class="szx-nav dac" style="padding: 0;margin: 0;">
<li class="pr"><a href="javascript:;" class="zx-nav-title">国画</a><div class="zx-nav-active"></div></li>
<li class="pr"><a href="javascript:;">油画</a><div></div></li>
<li class="pr"><a href="javascript:;">书法</a><div></div></li>
<li class="pr"><a href="javascript:;">素描</a><div></div></li>
<li class="pr"><a href="javascript:;">雕塑</a><div></div></li>
<li class="pr"><a href="javascript:;">工笔画</a><div></div></li>
<li class="pr"><a href="javascript:;">瓷器</a><div></div></li>
</ul>
<div id="jgy-list" class="dac fw" style="width: 102.6%;"></div>
</div>
</div>
<!-- 艺术访谈 -->
<div id="ysj-ft" class="p-zy20">
<div id="ysj-ft-list" class="dac m-s20 fw"></div>
</div>
<!-- 书刊杂志 -->
<div id="ysj-sk" class="p-zy20">
<div id="ysjzz-list" class="dac fw" style="width: 102.6%;"></div>
</div>
<div class="p-sx65 zx-more" style="display: none;justify-content: center;align-items: center;">
<div class="container gray">
<div class="ispinner gray animating">
<div class="ispinner-blade"></div>
<div class="ispinner-blade"></div>
<div class="ispinner-blade"></div>
<div class="ispinner-blade"></div>
<div class="ispinner-blade"></div>
<div class="ispinner-blade"></div>
<div class="ispinner-blade"></div>
<div class="ispinner-blade"></div>
<div class="ispinner-blade"></div>
<div class="ispinner-blade"></div>
<div class="ispinner-blade"></div>
<div class="ispinner-blade"></div>
</div>
</div>
<div class="m-z10 col7d">下拉加载更多信息</div>
</div>
</div>
</div>
</div>
<!-- 底部导航 -->
<iframe src="../../public/foot-tab.html" class="foot-iframe" frameborder="0"scrolling="no" ></iframe>
<!-- 回到顶部 -->
<img id="gotoTop" onclick="pageScroll()" src="../../img/public/backTop.png" alt="图片丢失" title="回到顶部">
</body>
</html>

View File

@ -0,0 +1,162 @@
<!DOCTYPE html>
<html>
<head>
<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/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/ispinner.css"/>
<script src="../../js/jquery-1.9.1.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>
<!-- Swiper -->
<div class="ont-swiper swiper-container" id="top">
<div class="swiper-wrapper">
<div class="swiper-slide"><img class="banner-img" src="../../img/public/banner.png" ></div>
<div class="swiper-slide"><img class="banner-img" src="../../img/public/banner.png" ></div>
</div>
<!-- 右箭头 -->
<!-- <div class="swiper-button-next"></div> -->
<!-- 左箭头 -->
<!-- <div class="swiper-button-prev"></div> -->
<!-- 指示点 -->
<div class="swiper-pagination"></div>
</div>
<script>
let swiper = new Swiper('.ont-swiper', {
cssMode: false,//禁止鼠标滑动,切换
loop:true,
autoplay: {
delay: 3000,
stopOnLastSlide: true,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable :true,
},
mousewheel: false,//禁止鼠标滚动,切换
});
</script>
<div class="p-zy180 p-sx10 dao-boxw" style="position: sticky;top: -6px;z-index: 10;background: #FFFFFF;">
<img class="logo" src="../../img/logo.png">
<div>
<div class="guan-box">
<span class="cq-cp">关于我们</span>
<span class="sy-dian"></span>
<div class="cq-cp dac">
<img src="../../img/sy-scart.png" width="14" height="15" style="margin-right: 4px;">
<span class="cq-cp">我的购物车</span>
</div>
<span class="sy-dian"></span>
<span class="cq-cp">积分商城</span>
<span class="sy-dian"></span>
<span class="cq-cp">联系我们</span>
<span class="sy-dian"></span>
<span class="cq-cp">登录/注册</span>
<div class="dn">
<span>个人中心</span>
<span>【退出】</span>
</div>
</div>
<div class="dend w100 ac m-s20">
<div class="w100">
<ul class="dao-box dac">
<li class="pr">
<div class="pr djcacfw"><a href="../../index.html">首页</a><div class="xiahx pa dn"></div></div>
<!---->
<span class="redD pa dn"></span>
</li>
<li class="pr">
<div class="pr djcacfw"><a href="realTimeInfo.html">资讯</a><div class="xiahx pa dn"></div></div>
<span class="redD pa dn"></span>
</li>
<li class="pr">
<div class="pr djcacfw">展览<div class="xiahx pa dn"></div></div>
<span class="redD pa dn"></span>
</li>
<li class="pr">
<div class="pr cq-dao-active djcacfw">艺术家<div class="xiahx pa "></div></div>
<span class="redD pa "></span>
</li>
<li class="pr">
<div class="pr djcacfw"><a href="mechanism.html">机构</a><div class="xiahx pa dn"></div></div>
<span class="redD pa dn"></span>
</li>
<li class="pr">
<div class="pr djcacfw"><a href="train.html">培训</a><div class="xiahx pa dn"></div></div>
<span class="redD pa dn"></span>
</li>
<li class="pr">
<div class="pr djcacfw">商城<div class="xiahx pa dn"></div></div>
<span class="redD pa dn"></span>
</li>
<li class="pr">
<div class="pr djcacfw"><a href="auction.html">拍卖</a><div class="xiahx pa dn"></div></div>
<span class="redD pa dn"></span>
</li>
</ul>
</div>
<div class="pr input-box backf">
<input type="text" name="" id="" class="w100" placeholder="关键字搜索" value="" />
<img class="pa cq-cp" src="../../img/sy-search.png">
</div>
</div>
</div>
</div>
<div class="p-zy320" style="background: #e6e6e6;">
<div class="djbac">
<div class="font-40" style="padding: 45px 0 30px 0;">周安明</div>
<div class="dac m-s20">
<div class="cq-cp zx-xx">关注他</div>
</div>
</div>
</div>
<div class="p-zy320 djb p-sx30">
<div class="backf5" style="padding: 6px;">
<div class="backf p-zy30">
<div class="bbt p-sx20">
<div class="" style="font-size: 26px;">中国国家画院举办“时代画卷——油画、版画、雕塑名家作品展”</div>
<div class="col7d m-s20">
<span>2021年06月04日</span>
<span class="m-z15">来源:华夏艺术网</span>
</div>
</div>
<div class="p-sx20 tin2 font-15 linh30 col22">1921—2021中华民族迎来了从站起来、富起来到强起来的伟大飞跃。“文变染乎世情兴废系乎时序。”为了庆祝1921—2021中华民族迎来了从站起来、富起来到强起来的伟大飞跃。“文变染乎世情兴废系乎时序。”为了庆祝</div>
<div>
<img class="w100" src="../../img/public/zx-detail01.png" >
<img class="w100" src="../../img/public/zx-detail02.png" >
</div>
<div class="p-sx20 tin2 font-15 linh30 col22">1921—2021中华民族迎来了从站起来、富起来到强起来的伟大飞跃。“文变染乎世情兴废系乎时序。”为了庆祝1921—2021中华民族迎来了从站起来、富起来到强起来的伟大飞跃。“文变染乎世情兴废系乎时序。”为了庆祝</div>
</div>
</div>
<div class="fs m-z30 p-s20" id="ysj-skd-box">
<div class="font-26 bbt p-x10">推荐阅读</div>
<div class="m-s20">
<div class="clips2 font-15 linh24">中国国家画院举办“时代画卷—油画、版画、雕塑 名家作品展”</div>
<div class="col19 op6 font-12 bbt p-s10 p-x20">2021年06月21日</div>
</div>
<div class="m-s20">
<div class="clips2 font-15 linh24">中国国家画院举办“时代画卷—油画、版画、雕塑 名家作品展”</div>
<div class="col19 op6 font-12 bbt p-s10 p-x20">2021年06月21日</div>
</div>
<div class="m-s20">
<div class="clips2 font-15 linh24">中国国家画院举办“时代画卷—油画、版画、雕塑 名家作品展”</div>
<div class="col19 op6 font-12 bbt p-s10 p-x20">2021年06月21日</div>
</div>
<div class="m-s20">
<div class="clips2 font-15 linh24">中国国家画院举办“时代画卷—油画、版画、雕塑 名家作品展”</div>
<div class="col19 op6 font-12 bbt p-s10 p-x20">2021年06月21日</div>
</div>
</div>
</div>
<!-- 底部导航 -->
<iframe src="../../public/foot-tab.html" class="foot-iframe" frameborder="0"scrolling="no" ></iframe>
<!-- 回到顶部 -->
<img id="gotoTop" onclick="pageScroll()" src="../../img/public/backTop.png" alt="图片丢失" title="回到顶部">
</body>
</html>

View File

@ -0,0 +1,123 @@
<!DOCTYPE html>
<html>
<head>
<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/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/ispinner.css"/>
<script src="../../js/jquery-1.9.1.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>
<div class="ont-swiper swiper-container" id="top">
<div class="swiper-wrapper">
<div class="swiper-slide"><img class="banner-img" src="../../img/public/banner.png" ></div>
<div class="swiper-slide"><img class="banner-img" src="../../img/public/banner.png" ></div>
</div>
<div class="swiper-pagination"></div>
</div>
<script>
let swiper = new Swiper('.ont-swiper', {
cssMode: false,//禁止鼠标滑动,切换
loop:true,
autoplay: {
delay: 3000,
stopOnLastSlide: true,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable :true,
},
mousewheel: false,//禁止鼠标滚动,切换
});
</script>
<div class="p-zy180 p-sx10 dao-boxw" style="position: sticky;top: -6px;z-index: 10;background: #FFFFFF;">
<img class="logo" src="../../img/logo.png">
<div>
<div class="guan-box">
<span class="cq-cp">关于我们</span>
<span class="sy-dian"></span>
<div class="cq-cp dac">
<img src="../../img/sy-scart.png" width="14" height="15" style="margin-right: 4px;">
<span class="cq-cp">我的购物车</span>
</div>
<span class="sy-dian"></span>
<span class="cq-cp">积分商城</span>
<span class="sy-dian"></span>
<span class="cq-cp">联系我们</span>
<span class="sy-dian"></span>
<span class="cq-cp">登录/注册</span>
<div class="dn">
<span>个人中心</span>
<span>【退出】</span>
</div>
</div>
<div class="dend w100 ac">
<div class="w100">
<ul class="dao-box dac">
<li class="pr">
<div class="pr djcacfw"><a href="../../index.html">首页</a><div class="xiahx pa dn"></div></div>
<!---->
<span class="redD pa dn"></span>
</li>
<li class="pr">
<div class="pr djcacfw"><a href="javascript:;">资讯</a><div class="xiahx pa dn"></div></div>
<span class="redD pa dn"></span>
</li>
<li class="pr">
<div class="pr cq-dao-active djcacfw">展览<div class="xiahx pa "></div></div>
<span class="redD pa"></span>
</li>
<li class="pr">
<div class="pr djcacfw">艺术家<div class="xiahx pa dn"></div></div>
<span class="redD pa dn"></span>
</li>
<li class="pr">
<div class="pr djcacfw"><a href="mechanism.html">机构</a><div class="xiahx pa dn"></div></div>
<span class="redD pa dn"></span>
</li>
<li class="pr">
<div class="pr djcacfw"><a href="javascript:;">培训</a><div class="xiahx pa dn"></div></div>
<span class="redD pa dn"></span>
</li>
<li class="pr">
<div class="pr djcacfw">商城<div class="xiahx pa dn"></div></div>
<span class="redD pa dn"></span>
</li>
<li class="pr">
<div class="pr djcacfw"><a href="auction.html">拍卖</a><div class="xiahx pa dn"></div></div>
<span class="redD pa dn"></span>
</li>
</ul>
</div>
<div class="pr input-box backf">
<input type="text" name="" id="" class="w100" placeholder="关键字搜索" value="" />
<img class="pa cq-cp" src="../../img/sy-search.png">
</div>
</div>
</div>
</div>
<div class="p-zy320" style="background: #e6e6e6;">
<div class="djbac">
<div class="font-40" style="padding: 45px 0 30px 0;">展览</div>
<div class="dac m-s20" id="px-item">
<div class="cq-cp zx-xx">正在展会</div>
<div class="cq-cp zx-gg" style="margin: 0 10px;">即将展览</div>
<div class="cq-cp zx-gg">展览回顾</div>
</div>
</div>
</div>
<div class="p-zy320">
<div id="zl-list" class="dac fw" style="width: 102.6%;"></div>
</div>
<!-- 底部导航 -->
<iframe src="../../public/foot-tab.html" class="foot-iframe" frameborder="0"scrolling="no" ></iframe>
<!-- 回到顶部 -->
<img id="gotoTop" onclick="pageScroll()" src="../../img/public/backTop.png" alt="图片丢失" title="回到顶部">
</body>
</html>

View File

@ -63,7 +63,7 @@
<span>【退出】</span>
</div>
</div>
<div class="dend w100 ac m-s20">
<div class="dend w100 ac">
<div class="w100">
<ul class="dao-box dac">
<li class="pr">
@ -130,6 +130,45 @@
<div id="px-list" class="p-s10"></div>
<!-- 全部的课堂视频列表 -->
<div id="pxsp-list" class="p-s10 djbac fw" style="width: 102%;display: none;"></div>
<!-- 直播 -->
<div id="pxzb-list" class="p-s10" style="display: none;">
<div class="dac m-x30 bd">
<div class="pr w100" style="max-height: 400px;">
<img width="100%" style="max-height: 400px;object-fit: cover;" src="../../img/public/px-zb01.png" alt="图片丢失" title="">
<img class="pa px-item-bo" src="../../img/public/pxb.png" alt="图片丢失" title="">
</div>
<div class="p-zy30 w56">
<div class="font-20 linh28 fb dac p-x20 bbt"><span class="quan"></span><div class="clips1">张老详细解说走进花鸟画的秘密花园【三】</div></div>
<div class="font-15 col19 m-s20 m-x10">直播时间2021年07月20日</div>
<div class="font-15 col19 m-s20 m-x10">直播预告</div>
<div class="font-15 col19 linh26 clips4 op8">本场精选了一些器型优美,做工精细,栩栩如生,同时出水投茶颇佳的原矿紫砂壶。将造型艺术与观念艺术相糅和,旨在一扫某种靡丽之风,推本场精选了一些器型优美,做工精细,栩栩如生,同时出水投茶颇佳的原矿紫砂壶。将造型艺术与观念艺术相糅和,旨在一扫某种靡丽之风,推</div>
</div>
</div>
<div class="dac m-x30 bd">
<div class="pr w100" style="max-height: 400px;">
<img width="100%" style="max-height: 400px;object-fit: cover;" src="../../img/public/px-zb02.png" alt="图片丢失" title="">
<img class="pa px-item-bo" src="../../img/public/pxb.png" alt="图片丢失" title="">
</div>
<div class="p-zy30 w56">
<div class="font-20 linh28 fb dac p-x20 bbt"><span class="quan"></span><div class="clips1">张老详细解说走进花鸟画的秘密花园【三】</div></div>
<div class="font-15 col19 m-s20 m-x10">直播时间2021年07月20日</div>
<div class="font-15 col19 m-s20 m-x10">直播预告</div>
<div class="font-15 col19 linh26 clips4 op8">本场精选了一些器型优美,做工精细,栩栩如生,同时出水投茶颇佳的原矿紫砂壶。将造型艺术与观念艺术相糅和,旨在一扫某种靡丽之风,推本场精选了一些器型优美,做工精细,栩栩如生,同时出水投茶颇佳的原矿紫砂壶。将造型艺术与观念艺术相糅和,旨在一扫某种靡丽之风,推</div>
</div>
</div>
<div class="dac m-x30 bd">
<div class="pr w100" style="max-height: 400px;">
<img width="100%" style="max-height: 400px;object-fit: cover;" src="../../img/public/px-zb03.png" alt="图片丢失" title="">
<img class="pa px-item-bo" src="../../img/public/pxb.png" alt="图片丢失" title="">
</div>
<div class="p-zy30 w56">
<div class="font-20 linh28 fb dac p-x20 bbt"><span class="quan"></span><div class="clips1">张老详细解说走进花鸟画的秘密花园【三】</div></div>
<div class="font-15 col19 m-s20 m-x10">直播时间2021年07月20日</div>
<div class="font-15 col19 m-s20 m-x10">直播预告</div>
<div class="font-15 col19 linh26 clips4 op8">本场精选了一些器型优美,做工精细,栩栩如生,同时出水投茶颇佳的原矿紫砂壶。将造型艺术与观念艺术相糅和,旨在一扫某种靡丽之风,推本场精选了一些器型优美,做工精细,栩栩如生,同时出水投茶颇佳的原矿紫砂壶。将造型艺术与观念艺术相糅和,旨在一扫某种靡丽之风,推</div>
</div>
</div>
</div>
<div class="p-sx65 zx-more" style="display: none;justify-content: center;align-items: center;">
<div class="container gray">
<div class="ispinner gray animating">

BIN
img/public/gn.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
img/public/px-zb01.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 540 KiB

BIN
img/public/px-zb02.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 599 KiB

BIN
img/public/px-zb03.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 697 KiB

BIN
img/public/ys-d01.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 292 KiB

BIN
img/public/ys-d02.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
img/public/ysj-ft01.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 186 KiB

BIN
img/public/ysj-ft02.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 98 KiB

BIN
img/public/ysj-ft03.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 79 KiB

View File

@ -4,28 +4,23 @@
<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 style="background: #FFFFFF;">
<body>
<!-- Swiper -->
<div class="ont-swiper swiper-container" id="top">
<div class="swiper-wrapper">
<div class="swiper-slide"><img class="banner-img" src="img/public/banner.png" ></div>
<div class="swiper-slide"><img class="banner-img" src="img/public/banner.png" ></div>
</div>
<!-- 右箭头 -->
<!-- <div class="swiper-button-next"></div> -->
<!-- 左箭头 -->
<!-- <div class="swiper-button-prev"></div> -->
<!-- 指示点 -->
<div class="swiper-pagination"></div>
</div>
<script>
@ -44,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>
@ -82,7 +77,7 @@
<span class="redD pa dn"></span>
</li>
<li class="pr">
<div class="pr djcacfw">艺术家<div class="xiahx pa dn"></div></div>
<div class="pr djcacfw"><a href="htmls/artNetwork/artist.html">艺术家</a><div class="xiahx pa dn"></div></div>
<span class="redD pa dn"></span>
</li>
<li class="pr">
@ -109,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">
@ -198,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,
@ -215,6 +241,8 @@
prevEl: '.two-prev',
},
mousewheel: false,//禁止鼠标滚动,切换
observer:true,//修改swiper自己或子元素时自动初始化swiper
observeParents:true//修改swiper的父元素时自动初始化swiper
});
myswiper.el.onmouseover = function(){
myswiper.autoplay.stop()
@ -222,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>
@ -263,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%" >
@ -331,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>
@ -339,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">
@ -463,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>
@ -471,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>
@ -488,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>
@ -504,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>

View File

@ -1,4 +1,23 @@
$(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());
})
$('.logo').on('click',function(){//logo图标点击事件
location.href = 'index.html'
})
@ -78,7 +97,9 @@ $(function(){
$('#pxsp-list').css('display','')
break;
case 2:
$('#pxzb-list').css('display','')
$('#px-list').css('display','none')
$('#pxsp-list').css('display','none')
break;
}
})
@ -99,6 +120,10 @@ $(function(){
checkPMShop()//拍卖所有商品事件
checkPXList()//培训列表事件
checkPXSPList()//培训视频事件
checkartist()//查询艺术家列表事件
checkFT()//查询艺术访谈列表
checkYSZZList()//查询艺术家杂志列表
checkZLList()//查询展览列表
$(window).scroll(function() {
if (($(window).height() + $(window).scrollTop() + 0) >= $(document).height()) {
zxList()
@ -111,9 +136,51 @@ $(function(){
pmList()
checkPMShop()
checkPXSPList()
checkartist()
checkFT()
checkYSZZList()
checkZLList()
}
});
ysEJ()//艺术家二级分类
// 艺术家二级分类切换事件
$('#ys-cate li').click(function(){
$('#ys-cate li a').removeClass('zx-nav-title')
$('#ys-cate li div').removeClass('zx-nav-active')
$(this).find('a').addClass('zx-nav-title')
$(this).find('div').addClass('zx-nav-active')
})
// 艺术家二级切换
$('#ys-nav li').click(function(){
let ysIndex = $(this).index()
switch (ysIndex){
case 0:
$('#ysj-jj').css('display','')
$('#ysj-zp').css('display','none')
$('#ysj-ft').css('display','none')
$('#ysj-sk').css('display','none')
break;
case 1:
$('#ysj-zp').css('display','')
$('#ysj-jj').css('display','none')
$('#ysj-ft').css('display','none')
$('#ysj-sk').css('display','none')
break;
case 2:
$('#ysj-ft').css('display','')
$('#ysj-zp').css('display','none')
$('#ysj-jj').css('display','none')
$('#ysj-sk').css('display','none')
break;
case 3:
$('#ysj-sk').css('display','')
$('#ysj-zp').css('display','none')
$('#ysj-ft').css('display','none')
$('#ysj-jj').css('display','none')
break;
}
})
// 监听页面滚动条变化
$(window).scroll(function(){
@ -491,7 +558,122 @@ function checkPXSPList(){//培训视频事件
});
  $('#pxsp-list').prepend(pxspHtml);
}
function ysEJ(){//艺术家页面二级分类
let yspHtml = '';
let yspData = ['全部','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']
$.each(yspData, function(commentIndex, comment) {
if(commentIndex==0){
yspHtml +=`<li><a href="javascript:;" class="zx-nav-title">${comment}</a><div class="zx-nav-active"></div></li>`
} else yspHtml +=`<li><a href="javascript:;">${comment}</a><div></div></li>`
});
$('#ys-cate').prepend(yspHtml);
}
function checkartist(){//查询艺术家们列表
let ysHtml = '';
let ysData = [
{imgSrc:'../../img/public/jg-dp-01.png',title:'张龙森',content:'毕业于中央美术学院,硕士;曾留学在德国卡 塞尔艺术学院现工作生活于北京...'},
{imgSrc:'../../img/public/jg-dp-02.png',title:'张龙森',content:'毕业于中央美术学院,硕士;曾留学在德国卡 塞尔艺术学院现工作生活于北京...'},
{imgSrc:'../../img/public/jg-dp-03.png',title:'张龙森',content:'毕业于中央美术学院,硕士;曾留学在德国卡 塞尔艺术学院现工作生活于北京...'},
{imgSrc:'../../img/public/jg-dp-04.png',title:'张龙森',content:'毕业于中央美术学院,硕士;曾留学在德国卡 塞尔艺术学院现工作生活于北京...'},
{imgSrc:'../../img/public/jg-dp-05.png',title:'张龙森',content:'毕业于中央美术学院,硕士;曾留学在德国卡 塞尔艺术学院现工作生活于北京...'},
{imgSrc:'../../img/public/jg-dp-06.png',title:'张龙森',content:'毕业于中央美术学院,硕士;曾留学在德国卡 塞尔艺术学院现工作生活于北京...'},
]
$.each(ysData, function(commentIndex, comment) {
ysHtml +=`<div class="dfc w25">
<img class="w90" onclick="goYSDetail(${commentIndex})" src="${comment.imgSrc}" alt="图标丢失" title="${comment.title}" >
<div class="m-s20 w90 djbac">
<div class="font-26 clips1">${comment.title}</div>
<div style="padding:8px 15px;" onclick="goYSDetail(${commentIndex})" class="font-13 col19 op8 bd">查看作品</div>
</div>
<div class="font-14 op9 m-s20 m-x30 w90 clips2">${comment.content}</div>
</div>`
});
  $('#ys-list').prepend(ysHtml);
}
function goYSDetail(e){//查看培训详情
location.href = `artistDetail.html?id=${e}`
}
function checkFT(){//查询艺术访谈列表
let ysFTHtml = '';
let ysFTData = [
{imgSrc:'../../img/public/ysj-ft01.png',title:'助力熊猫艺术公益:中国邮政发布著名刘中...',time:'2021年06月21日'},
{imgSrc:'../../img/public/ysj-ft02.png',title:'助力熊猫艺术公益:中国邮政发布著名刘中...',time:'2021年06月21日'},
{imgSrc:'../../img/public/ysj-ft03.png',title:'助力熊猫艺术公益:中国邮政发布著名刘中...',time:'2021年06月21日'},
]
$.each(ysFTData, function(commentIndex, comment) {
ysFTHtml +=`<div class="w33" onclick="goYSFTDetail(${commentIndex})">
<div class="pd20">
<img width="100%" src="${comment.imgSrc}" alt="图片丢失" title="">
<div class="clips1 font-16 col19 m-s10">${comment.title}</div>
<div class="djbac">
<div class="font-12 op6">${comment.time}</div>
<div class="dac"><span style="margin-top: 5px;margin-right: -2px;">····</span><span style="font-size: 30px;"></span></div>
</div>
</div>
</div>`
});
  $('#ysj-ft-list').prepend(ysFTHtml);
}
function goYSFTDetail(e){//查看艺术访谈详情
location.href = `artistDetail.html?id=${e}`
}
function checkYSZZList(){//查询艺术家杂志列表
let ysjzzHtml = '';
let ysjzzData = [
{imgSrc:'../../img/public/jg-sk-01.png',title:'新中国美术家系列—曹辉作品集',time:'2021.07.09 - 2021.07.19'},
{imgSrc:'../../img/public/jg-sk-02.png',title:'新中国美术家系列—曹辉作品集',time:'2021.07.09 - 2021.07.19'},
{imgSrc:'../../img/public/jg-sk-03.png',title:'新中国美术家系列—曹辉作品集',time:'2021.07.09 - 2021.07.19'},
{imgSrc:'../../img/public/jg-sk-04.png',title:'新中国美术家系列—曹辉作品集',time:'2021.07.09 - 2021.07.19'},
]
$.each(ysjzzData, function(commentIndex, comment) {
ysjzzHtml +=`<div class="dfc w25 m-s30" onclick="goysjSKDetail(${commentIndex})">
<img class="w90" src="${comment.imgSrc}" alt="图标丢失" title="${comment.title}" >
<div class="font-18 fb m-s20 w90 clips1">${comment.title}</div>
<div class="font-13 m-s10 w90 clips1">出版时间${comment.time}</div>
</div>`
});
  $('#ysjzz-list').prepend(ysjzzHtml);
$('#ysjzz-list img').mouseover(function(){//内容悬浮事件
$(this).css({"cursor":"pointer"})
$(this).nextAll('div').css('color','#CB1919')
})
$('#ysjzz-list img').mouseout(function(){//内容悬浮事件
$(this).nextAll('div').css('color','#000000')
})
}
function goysjSKDetail(e){//查看书刊详情
location.href = `artistSKDetail.html?id=${e}`
}
function checkZLList(){//查询展览列表
let zlHtml = '';
let zlData = [
{imgSrc:'../../img/public/jg-dz-01.png',title:'陌上谁人依旧 · 曹辉人物画展',time:'2021.07.09 - 2021.07.19',sponsor:'主办方:华夏艺术网',address:'虹桥艺术中心'},
{imgSrc:'../../img/public/jg-dz-02.png',title:'陌上谁人依旧 · 曹辉人物画展',time:'2021.07.09 - 2021.07.19',sponsor:'主办方:华夏艺术网',address:'虹桥艺术中心'},
{imgSrc:'../../img/public/jg-dz-03.png',title:'陌上谁人依旧 · 曹辉人物画展',time:'2021.07.09 - 2021.07.19',sponsor:'主办方:华夏艺术网',address:'虹桥艺术中心'},
{imgSrc:'../../img/public/jg-dz-04.png',title:'陌上谁人依旧 · 曹辉人物画展',time:'2021.07.09 - 2021.07.19',sponsor:'主办方:华夏艺术网',address:'虹桥艺术中心'},
{imgSrc:'../../img/public/jg-dz-05.png',title:'陌上谁人依旧 · 曹辉人物画展',time:'2021.07.09 - 2021.07.19',sponsor:'主办方:华夏艺术网',address:'虹桥艺术中心'},
{imgSrc:'../../img/public/jg-dz-06.png',title:'陌上谁人依旧 · 曹辉人物画展',time:'2021.07.09 - 2021.07.19',sponsor:'主办方:华夏艺术网',address:'虹桥艺术中心'},
{imgSrc:'../../img/public/jg-dz-07.png',title:'陌上谁人依旧 · 曹辉人物画展',time:'2021.07.09 - 2021.07.19',sponsor:'主办方:华夏艺术网',address:'虹桥艺术中心'},
{imgSrc:'../../img/public/jg-dz-08.png',title:'陌上谁人依旧 · 曹辉人物画展',time:'2021.07.09 - 2021.07.19',sponsor:'主办方:华夏艺术网',address:'虹桥艺术中心'},
]
$.each(zlData, function(commentIndex, comment) {
zlHtml +=`<div class="dfc w25 m-s30">
<img class="w90" src="${comment.imgSrc}" alt="图标丢失" title="${comment.title}" >
<div class="font-18 m-s20 w90 clips1 op9 col19">${comment.title}</div>
<div class="font-13 m-s10 w90 clips1 op9 col19">${comment.sponsor}</div>
<div class="font-13 m-s10 w90 clips1 op9 col19">展览时间${comment.time}</div>
<div class="font-13 m-s10 w90 clips2 op9 col19 linh26">展览地址${comment.address}</div>
</div>`
});
  $('#zl-list').prepend(zlHtml);
$('#zl-list img').mouseover(function(){//内容悬浮事件
$(this).css({"cursor":"pointer"})
$(this).nextAll('div').css('color','#CB1919')
})
$('#zl-list img').mouseout(function(){//内容悬浮事件
$(this).nextAll('div').css('color','#000000')
})
}
// 回到顶部
function pageScroll(){
window.scrollBy(0,-100);

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);

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 */

View File

@ -1,9 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>