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

修改首页

master
chen 2021-09-05 20:56:27 +08:00
parent 16e77ee58f
commit cb7f9dd257
12 changed files with 187 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
css/huaxia.css
View File

@ -4,7 +4,7 @@
.w25{width: 25%;} .w25{width: 25%;}
.w20{width: 19%;} .w20{width: 19%;}
.dis{display: flex;}
.djb{display: flex;justify-content: space-between;} .djb{display: flex;justify-content: space-between;}
.dend{display: flex;justify-content: flex-end;} .dend{display: flex;justify-content: flex-end;}
.djbac{display: flex;justify-content: space-between;align-items: center;} .djbac{display: flex;justify-content: space-between;align-items: center;}
@ -36,6 +36,7 @@
.m-z15{margin-left: 15px;} .m-z15{margin-left: 15px;}
.m-z37{margin-left: 37px;} .m-z37{margin-left: 37px;}
.m-y10{margin-right: 10px;}
.m-y15{margin-right: 15px;} .m-y15{margin-right: 15px;}
.m-y37{margin-right: 37px;} .m-y37{margin-right: 37px;}
@ -70,6 +71,7 @@
.p-zy180{padding-left: 180px;padding-right: 180px;} .p-zy180{padding-left: 180px;padding-right: 180px;}
.p-zy20{padding-left: 20px;padding-right: 20px;} .p-zy20{padding-left: 20px;padding-right: 20px;}
.p-zy15{padding-left: 15px;padding-right: 15px;} .p-zy15{padding-left: 15px;padding-right: 15px;}
.p-zy10{padding-left: 10px;padding-right: 10px;}
.p-sx10{padding-top: 10px;padding-bottom: 10px;} .p-sx10{padding-top: 10px;padding-bottom: 10px;}
.p-sx20{padding-top: 20px;padding-bottom: 20px;} .p-sx20{padding-top: 20px;padding-bottom: 20px;}
@ -99,6 +101,7 @@
.clips4{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} .clips4{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
/* 首页 */ /* 首页 */
.logo{width: 487px;}
.banner-img{width: 100%;height: auto;} .banner-img{width: 100%;height: auto;}
.sy-dian{width: 4px;height: 4px;border-radius: 100%;background-color: #181818;margin: 0 10px;} .sy-dian{width: 4px;height: 4px;border-radius: 100%;background-color: #181818;margin: 0 10px;}
.dao-boxw{box-shadow: 0px 3px 6px rgba(0,0,0,.2);display: flex;justify-content: space-between;align-items: center;} .dao-boxw{box-shadow: 0px 3px 6px rgba(0,0,0,.2);display: flex;justify-content: space-between;align-items: center;}
@ -111,31 +114,36 @@
.input-box{flex-shrink: 0;height: 40px;border-radius: 3px;border: 1px solid #ebebeb;padding: 0 10px;width: 220px;} .input-box{flex-shrink: 0;height: 40px;border-radius: 3px;border: 1px solid #ebebeb;padding: 0 10px;width: 220px;}
.input-box input{font-size: 14px;height: 40px;border: 0;} .input-box input{font-size: 14px;height: 40px;border: 0;}
.input-box img{right: 10px;top: 10px;width: 20px;height: 20px;} .input-box img{right: 10px;top: 10px;width: 20px;height: 20px;}
.cq-item-title-box{margin: 65px 0 30px 0;} .cq-item-title-box{padding: 65px 0 30px 0;}
.cq-item-title-box>div>div{background:-webkit-linear-gradient(left,red,rgba(255,255,255,0));height: 11px; bottom: 0;left: 0;width: 130px; opacity: .8;z-index: 0;} .cq-item-title-box>div>div{background:-webkit-linear-gradient(left,red,rgba(255,255,255,0));height: 11px; bottom: 0;left: 0;width: 130px; opacity: .8;z-index: 0;}
.cq-gengd{font-size: 18px;color: #191919;} .cq-gengd{font-size: 18px;color: #191919;}
.exhibition .item-box{width: 100%;overflow: hidden;height: 388px;} .exhibition .item-box{width: 100%;overflow: hidden;height: 388px;}
.exhibition .item-box>img{width: 100%;height: auto;cursor: pointer;} .exhibition .item-box>img{width: 100%;height: 100%;cursor: pointer;}
.msg .m-x32:nth-last-child(1){ .msg .m-x32:nth-last-child(1){
margin-bottom: 0; margin-bottom: 0;
} }
.msg .m-x32:nth-last-child(2){ .msg .m-x32:nth-last-child(2){
margin-bottom: 0; margin-bottom: 0;
} }
.ya-item-box .pr{padding-right: 20px;} .ysc .ya-item-box>div:first-child{transition: transform .5s;cursor: pointer;}
.ysc .ya-item-box>div:first-child:hover{transform: scale(.9);transition: transform .5s;}
.ya-item-box .pr{padding-right: 1.25em;}
.ys-price{font-size: 18px;color: #cb1919;background: rgba(0,0,0,.2);border-radius: 3px;left: 14px;bottom: 14px;padding: 6px 10px;} .ys-price{font-size: 18px;color: #cb1919;background: rgba(0,0,0,.2);border-radius: 3px;left: 14px;bottom: 14px;padding: 6px 10px;}
.ys-title{font-size: 20px;font-weight: bold;padding-right: 20px;} .ys-title{font-size: 20px;font-weight: bold;padding-right: 20px;}
.ys-cate{font-size: 14px;color: #a6a6a4;padding-right: 20px;} .ys-cate{font-size: 14px;color: #a6a6a4;padding-right: 20px;}
.ysj-name{line-height: 26px;} .ysj-name{line-height: 26px;}
.ysj .ya-item-box{margin-right: 1.36em;} .ysj .ya-item-box{margin-right: 1.36em;}
.ysj .ya-item-box img{transition: transform .5s;cursor: pointer;}
.ysj .ya-item-box:hover img{transform: scale(.9);transition: transform .5s;}
.ysj .ya-item-box:last-child{margin-right: 0px;} .ysj .ya-item-box:last-child{margin-right: 0px;}
.ysj .pr{padding-right: 0px;} .ysj .pr{padding-right: 0px;}
.wc-box>div>img{width: 96%;} .wc-box>div>img{width: 96%;transition: transform .5s;}
.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 .ya-item-box:hover a{color: #cb1919;text-decoration:underline;}
.wc-box>div>div>a:hover{color: #cb1919;text-decoration:underline;} .wc-box>div>div>a:hover{color: #cb1919;text-decoration:underline;}
.foot-box-nav>div{margin-right: 40px;cursor: pointer;}
.foot-box-img>img{margin-left: 20px;cursor: pointer;}

45
css/huaxiaMedia.css
View File

@ -0,0 +1,45 @@
@media screen and (max-width:300px) {
}
@media screen and (min-width:301px) and (max-width:350px) {
}
@media screen and (min-width:351px) and (max-width:420px) {
}
@media screen and (min-width:421px) and (max-width:490px) {
}
@media screen and (min-width:491px) and (max-width:620px) {
}
@media screen and (min-width:621px) and (max-width:720px) {
}
@media screen and (min-width:721px) and (max-width:820px) {
}
@media screen and (min-width:821px) and (max-width:920px) {
}
@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:1121px) and (max-width:1220px) {
}
@media screen and (min-width:1221px) and (max-width:1320px) {
}
@media screen and (min-width:1321px) and (max-width:1420px) {
}
@media screen and (min-width:1421px) and (max-width:1520px) {
}
@media screen and (min-width:1521px) and (max-width:1620px) {
}

BIN
img/public/foot-facebook.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 789 B

BIN
img/public/foot-skype.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
img/public/foot-whatsapp.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
img/public/foot-wx.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
img/public/foot-xl.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
img/public/huax-em.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 521 KiB

BIN
img/public/shuy-em.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 637 KiB

BIN
img/public/shuy-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 505 KiB

169
index.html
View File

@ -7,6 +7,7 @@
<link rel="stylesheet" type="text/css" href="css/layui.css" /> <link rel="stylesheet" type="text/css" href="css/layui.css" />
<link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.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/huaxia.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/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/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/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
@ -111,8 +112,8 @@
mousewheel: false,//禁止鼠标滚动，切换 mousewheel: false,//禁止鼠标滚动，切换
}); });
</script> </script>
<div class="p-zy180 p-sx10 dao-boxw" style="position: sticky;top: 0;z-index: 10;background: #FFFFFF;"> <div class="p-zy180 p-sx10 dao-boxw" style="position: sticky;top: -6px;z-index: 10;background: #FFFFFF;">
<img class="cq-cp logo" src="img/logo.png" width="487"> <img class="cq-cp logo" src="img/logo.png">
<div> <div>
<div class="guan-box"> <div class="guan-box">
<span class="cq-cp">关于我们</span> <span class="cq-cp">关于我们</span>
@ -166,17 +167,19 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="pr input-box"> <div class="pr input-box backf">
<input type="text" name="" id="" class="w100" placeholder="关键字搜索" value="" /> <input type="text" name="" id="" class="w100" placeholder="关键字搜索" value="" />
<img class="pa cq-cp" src="img/sy-search.png"> <img class="pa cq-cp" src="img/sy-search.png">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="p-zy180 djbac cq-item-title-box"> <div class="p-zy180">
<div class="djbac cq-item-title-box">
<div class="font-32 pr">展览<span class="font-22 m-z10">Exhibition</span><div class="pa"></div></div> <div class="font-32 pr">展览<span class="font-22 m-z10">Exhibition</span><div class="pa"></div></div>
<div class="cq-gengd cq-cp">View More +</div> <div class="cq-gengd cq-cp">View More +</div>
</div> </div>
</div>
<div class="m-x65 oh"> <div class="m-x65 oh">
<!-- Swiper --> <!-- Swiper -->
<div class="exhibition pr"> <div class="exhibition pr">
@ -290,40 +293,7 @@
<div class="font-32 pr">信息动态<span class="font-22 m-z10">Information News</span><div class="pa"></div></div> <div class="font-32 pr">信息动态<span class="font-22 m-z10">Information News</span><div class="pa"></div></div>
<div class="cq-gengd cq-cp">View More +</div> <div class="cq-gengd cq-cp">View More +</div>
</div> </div>
<div class="djbacfw msg"> <div class="djbacfw msg"></div>
<div class="dac backf p-sx20 w48 m-x32">
<img class="fs" src="img/public/xin-one.png" width="242" height="151">
<div class="m-zy15">
<div class="clips1 font-18 col19">助力熊猫艺术公益：中国邮政发布著名画家刘中《牛气冲...</div>
<div class="font-12 col9">2021.06.30</div>
<div class="clips2 font-12">爱彼秉承品牌在形式与功能方面的大无畏创新精神，在腕表发展史上扮演着先行者的角色爱彼秉承品牌在形式与功能方面的大无畏创新精神，在碗表发展史上扮演...</div>
</div>
</div>
<div class="dac backf p-sx20 w48 m-x32">
<img class="fs" src="img/public/xin-two.png" width="242" height="151">
<div class="m-zy15">
<div class="clips1 font-18 col19">助力熊猫艺术公益：中国邮政发布著名画家刘中《牛气冲...</div>
<div class="font-12 col9">2021.06.30</div>
<div class="clips2 font-12">爱彼秉承品牌在形式与功能方面的大无畏创新精神，在腕表发展史上扮演着先行者的角色爱彼秉承品牌在形式与功能方面的大无畏创新精神，在碗表发展史上扮演...</div>
</div>
</div>
<div class="dac backf p-sx20 w48 m-x32">
<img class="fs" src="img/public/xin-three.png" width="242" height="151">
<div class="m-zy15">
<div class="clips1 font-18 col19">助力熊猫艺术公益：中国邮政发布著名画家刘中《牛气冲...</div>
<div class="font-12 col9">2021.06.30</div>
<div class="clips2 font-12">爱彼秉承品牌在形式与功能方面的大无畏创新精神，在腕表发展史上扮演着先行者的角色爱彼秉承品牌在形式与功能方面的大无畏创新精神，在碗表发展史上扮演...</div>
</div>
</div>
<div class="dac backf p-sx20 w48 m-x32">
<img class="fs" src="img/public/xin-four.png" width="242" height="151">
<div class="m-zy15">
<div class="clips1 font-18 col19">助力熊猫艺术公益：中国邮政发布著名画家刘中《牛气冲...</div>
<div class="font-12 col9">2021.06.30</div>
<div class="clips2 font-12">爱彼秉承品牌在形式与功能方面的大无畏创新精神，在腕表发展史上扮演着先行者的角色爱彼秉承品牌在形式与功能方面的大无畏创新精神，在碗表发展史上扮演...</div>
</div>
</div>
</div>
<!-- 艺术商城 --> <!-- 艺术商城 -->
<div class="djbac cq-item-title-box"> <div class="djbac cq-item-title-box">
<div class="font-32 pr">艺术商城<span class="font-22 m-z10">Art Mall</span><div class="pa"></div></div> <div class="font-32 pr">艺术商城<span class="font-22 m-z10">Art Mall</span><div class="pa"></div></div>
@ -332,7 +302,7 @@
<div class="djb"> <div class="djb">
<div class="w50"> <div class="w50">
<div class="pr backf"> <div class="pr backf">
<img src="img/public/yi-one.png" width="100%" height="100%"> <img src="img/public/yi-one.png" width="100%">
<div class="pa ys-price">￥2256.0</div> <div class="pa ys-price">￥2256.0</div>
</div> </div>
<div class="clips1 m-sx16 ys-title">艺术清酒--得寓(酒标作品)Delight Sake</div> <div class="clips1 m-sx16 ys-title">艺术清酒--得寓(酒标作品)Delight Sake</div>
@ -357,13 +327,13 @@
</div> </div>
</div> </div>
</div> </div>
<div class="dac fw"> <div class="dac fw ysc" style="width: 102%;overflow: hidden;">
<div class="w25 ya-item-box m-s37"> <div class="w25 ya-item-box m-s37">
<div class="pr"> <div class="pr">
<img src="img/public/ys-one.png" width="100%" > <img src="img/public/ys-one.png" width="100%" >
<div class="pa ys-price">￥2256.0</div> <div class="pa ys-price">￥2256.0</div>
</div> </div>
<div class="clips1 m-sx16 ys-title">艺术清酒--得寓(酒标作品)Delight Sake</div> <div class="clips1 m-sx16 ys-title cq-cp">艺术清酒--得寓(酒标作品)Delight Sake</div>
<div class="ys-cate">分类：酒品包装</div> <div class="ys-cate">分类：酒品包装</div>
</div> </div>
<div class="w25 ya-item-box m-s37"> <div class="w25 ya-item-box m-s37">
@ -371,7 +341,7 @@
<img src="img/public/ys-two.png" width="100%"> <img src="img/public/ys-two.png" width="100%">
<div class="pa ys-price">￥2256.0</div> <div class="pa ys-price">￥2256.0</div>
</div> </div>
<div class="clips1 m-sx16 ys-title">艺术清酒--得寓(酒标作品)Delight Sake</div> <div class="clips1 m-sx16 ys-title cq-cp">艺术清酒--得寓(酒标作品)Delight Sake</div>
<div class="ys-cate">分类：酒品包装</div> <div class="ys-cate">分类：酒品包装</div>
</div> </div>
<div class="w25 ya-item-box m-s37"> <div class="w25 ya-item-box m-s37">
@ -379,7 +349,7 @@
<img src="img/public/ys-three.png" width="100%" > <img src="img/public/ys-three.png" width="100%" >
<div class="pa ys-price">￥2256.0</div> <div class="pa ys-price">￥2256.0</div>
</div> </div>
<div class="clips1 m-sx16 ys-title">艺术清酒--得寓(酒标作品)Delight Sake</div> <div class="clips1 m-sx16 ys-title cq-cp">艺术清酒--得寓(酒标作品)Delight Sake</div>
<div class="ys-cate">分类：酒品包装</div> <div class="ys-cate">分类：酒品包装</div>
</div> </div>
<div class="w25 ya-item-box m-s37"> <div class="w25 ya-item-box m-s37">
@ -387,7 +357,7 @@
<img src="img/public/ys-four.png" width="100%" > <img src="img/public/ys-four.png" width="100%" >
<div class="pa ys-price">￥2256.0</div> <div class="pa ys-price">￥2256.0</div>
</div> </div>
<div class="clips1 m-sx16 ys-title">艺术清酒--得寓(酒标作品)Delight Sake</div> <div class="clips1 m-sx16 ys-title cq-cp">艺术清酒--得寓(酒标作品)Delight Sake</div>
<div class="ys-cate">分类：酒品包装</div> <div class="ys-cate">分类：酒品包装</div>
</div> </div>
<div class="w25 ya-item-box m-s37"> <div class="w25 ya-item-box m-s37">
@ -395,7 +365,7 @@
<img src="img/public/ys-five.png" width="100%" > <img src="img/public/ys-five.png" width="100%" >
<div class="pa ys-price">￥2256.0</div> <div class="pa ys-price">￥2256.0</div>
</div> </div>
<div class="clips1 m-sx16 ys-title">艺术清酒--得寓(酒标作品)Delight Sake</div> <div class="clips1 m-sx16 ys-title cq-cp">艺术清酒--得寓(酒标作品)Delight Sake</div>
<div class="ys-cate">分类：酒品包装</div> <div class="ys-cate">分类：酒品包装</div>
</div> </div>
<div class="w25 ya-item-box m-s37"> <div class="w25 ya-item-box m-s37">
@ -403,7 +373,7 @@
<img src="img/public/ys-six.png" width="100%" > <img src="img/public/ys-six.png" width="100%" >
<div class="pa ys-price">￥2256.0</div> <div class="pa ys-price">￥2256.0</div>
</div> </div>
<div class="clips1 m-sx16 ys-title">艺术清酒--得寓(酒标作品)Delight Sake</div> <div class="clips1 m-sx16 ys-title cq-cp">艺术清酒--得寓(酒标作品)Delight Sake</div>
<div class="ys-cate">分类：酒品包装</div> <div class="ys-cate">分类：酒品包装</div>
</div> </div>
<div class="w25 ya-item-box m-s37"> <div class="w25 ya-item-box m-s37">
@ -411,7 +381,7 @@
<img src="img/public/ys-eleven.png" width="100%" > <img src="img/public/ys-eleven.png" width="100%" >
<div class="pa ys-price">￥2256.0</div> <div class="pa ys-price">￥2256.0</div>
</div> </div>
<div class="clips1 m-sx16 ys-title">艺术清酒--得寓(酒标作品)Delight Sake</div> <div class="clips1 m-sx16 ys-title cq-cp">艺术清酒--得寓(酒标作品)Delight Sake</div>
<div class="ys-cate">分类：酒品包装</div> <div class="ys-cate">分类：酒品包装</div>
</div> </div>
<div class="w25 ya-item-box m-s37"> <div class="w25 ya-item-box m-s37">
@ -419,23 +389,23 @@
<img src="img/public/ys-ba.png" width="100%" > <img src="img/public/ys-ba.png" width="100%" >
<div class="pa ys-price">￥2256.0</div> <div class="pa ys-price">￥2256.0</div>
</div> </div>
<div class="clips1 m-sx16 ys-title">艺术清酒--得寓(酒标作品)Delight Sake</div> <div class="clips1 m-sx16 ys-title cq-cp">艺术清酒--得寓(酒标作品)Delight Sake</div>
<div class="ys-cate">分类：酒品包装</div> <div class="ys-cate">分类：酒品包装</div>
</div> </div>
</div> </div>
</div> </div>
<!-- 艺术家 --> <!-- 艺术家 -->
<div class="p-zy180 p-s65" style="background: #100e0d;padding-bottom: 65px;"> <div class="p-zy180" style="background: #100e0d;padding-bottom: 65px;">
<div class="djbac cq-item-title-box" style="margin-top: 0px;color: #FFFFFF;"> <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="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> <div class="cq-gengd cq-cp" style="color: #FFFFFF;">View More +</div>
</div> </div>
<div class="w100 backf dac"> <div class="w100 backf dac">
<img class="cq-cp" src="img/public/ysj-one.png" width="100%" height="100%"> <img class="cq-cp" src="img/public/ysj-one.png" width="39.2%">
<div class="m-zy30 col19 font-14"> <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" style="font-size: 30px;font-weight: bold;color: #cb1919;">张龙森</div>
<div class="ysj-name">职业画家</div> <div class="ysj-name">职业画家</div>
<div class="ysj-name clips4">毕业于中央美术学院，硕士；曾留学在德国卡塞尔艺术学院，现工作生活于北京 文字后期后台替换无论你是追求精致生活的Ta，还是要文艺一把的男女青年，还是热爱潮流、追求个性的一族，又或者是一个不折不扣的吃货。来设计周吧！全方位的体验满足你的挑剔。文字后期后台替换无论你是追求精致生活的Ta，还是要文艺一把的男女青年，还是热爱潮流、追求个性的一族，又或者是一个不折不扣的吃货。来设计周吧！全方位的体验满足你的挑剔。</div> <div class="ysj-name clips4">毕业于中央美术学院，硕士；曾留学在德国卡塞尔艺术学院，现工作生活于北京 <br/>文字后期后台替换无论你是追求精致生活的Ta，还是要文艺一把的男女青年，还是热爱潮流、追求个性的一族，又或者是一个不折不扣的吃货。来设计周吧！全方位的体验满足你的挑剔。文字后期后台替换无论你是追求精致生活的Ta，还是要文艺一把的男女青年，还是热爱潮流、追求个性的一族，又或者是一个不折不扣的吃货。来设计周吧！全方位的体验满足你的挑剔。</div>
<div class="m-s30"> <div class="m-s30">
<span class="font-13 cq-cp" style="background: #cb1919;color: rgba(255,255,255,.8);padding: 6px 10px;">查看作品</span> <span class="font-13 cq-cp" style="background: #cb1919;color: rgba(255,255,255,.8);padding: 6px 10px;">查看作品</span>
</div> </div>
@ -505,7 +475,7 @@
<div class="font-32 pr">文创专区<span class="font-22 m-z10">Cultural and Creative Zone</span><div class="pa"></div></div> <div class="font-32 pr">文创专区<span class="font-22 m-z10">Cultural and Creative Zone</span><div class="pa"></div></div>
<div class="cq-gengd cq-cp">View More +</div> <div class="cq-gengd cq-cp">View More +</div>
</div> </div>
<div class="dac fw wc-box"> <div class="dac fw wc-box" style="width: 101%;">
<div class="w25 ya-item-box m-x37 cq-cp"> <div class="w25 ya-item-box m-x37 cq-cp">
<img src="img/public/wc-01.png"> <img src="img/public/wc-01.png">
<div class="clips1 m-sx16 ys-title"><a href="">艺术清酒--得寓(酒标作品)Delight Sake</a></div> <div class="clips1 m-sx16 ys-title"><a href="">艺术清酒--得寓(酒标作品)Delight Sake</a></div>
@ -557,8 +527,8 @@
</div> </div>
</div> </div>
<!-- 培训 --> <!-- 培训 -->
<div class="p-zy180 p-sx65" style="background: url(img/public/px-bac.png); background-size: 100% 100%;"> <div class="p-zy180 p-x65" style="background: url(img/public/px-bac.png); background-size: 100% 100%;">
<div class="djbac cq-item-title-box" style="margin-top: 0;"> <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="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> <div class="cq-gengd cq-cp">View More +</div>
</div> </div>
@ -580,29 +550,92 @@
</div> </div>
</div> </div>
<!-- 合作伙伴 --> <!-- 合作伙伴 -->
<div class="p-zy180 p-sx65"> <div class="p-zy180">
<div class="djbac cq-item-title-box" style="margin-top: 0;"> <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">合作伙伴<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="cq-gengd cq-cp">View More +</div> <div class="cq-gengd cq-cp fs">View More +</div>
</div> </div>
<div class="djbac"> <div class="djbac">
<img class="cq-cp" src="img/public/hz-01.png" > <div><img class="cq-cp" style="width: 90%;" src="img/public/hz-01.png" ></div>
<img class="cq-cp" src="img/public/hz-02.png" > <div><img class="cq-cp" style="width: 90%;" src="img/public/hz-02.png" ></div>
<img class="cq-cp" src="img/public/hz-03.png" > <div><img class="cq-cp" style="width: 90%;" src="img/public/hz-03.png" ></div>
<img class="cq-cp" src="img/public/hz-04.png" > <div><img class="cq-cp" style="width: 90%;" src="img/public/hz-04.png" ></div>
<img class="cq-cp" src="img/public/hz-02.png" > <div><img class="cq-cp" style="width: 90%;" src="img/public/hz-02.png" ></div>
<img class="cq-cp" src="img/public/hz-05.png" > <div><img class="cq-cp" style="width: 90%;" src="img/public/hz-05.png" ></div>
<img class="cq-cp" src="img/public/hz-07.png" > <div><img class="cq-cp" style="width: 90%;" src="img/public/hz-07.png" ></div>
<img class="cq-cp" src="img/public/hz-04.png" > <div><img class="cq-cp" style="width: 90%;" src="img/public/hz-04.png" ></div>
</div> </div>
<div style="background-color: #f5f5f5;padding: 10px;"> <div class="m-s30" style="background-color: #f5f5f5;padding: 5px;">
<div class="pr backf" style="overflow: hidden;"> <div class="pr backf" style="overflow: hidden;">
<img class="pa" src="img/public/sy-input-bc.png" > <img class="pa" src="img/public/sy-input-bc.png" height="100%" width="100%" style="z-index: 0;">
<div class="djbac cq-item-title-box" style="margin-top: 0px;margin-bottom: 20px;"> <div style="padding: 30px;z-index: 1;">
<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">合作留言<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> </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> </div>
</div> </div>
</div> </div>
</div>
</div>
<!-- 底部导航 -->
<div class="p-zy180 p-sx20 djbac m-s30" style="background: #cb1919;">
<div class="dac foot-box-nav" style="color: #FFFFFF;font-size: 15px;">
<div>首页</div>
<div>咨询</div>
<div>展览</div>
<div>艺术家</div>
<div>机构</div>
<div>培训</div>
<div>商城</div>
<div>拍卖</div>
</div>
<div class="foot-box-img">
<img src="img/public/foot-xl.png" width="23" height="19" style="-webkit-filter: invert(.5); filter: invert(1);" alt="图片缺失">
<img src="img/public/foot-wx.png" width="23" height="19" style="-webkit-filter: invert(1); filter: invert(1);" alt="图片缺失">
<img src="img/public/foot-whatsapp.png" width="19" height="19" style="-webkit-filter: invert(1); filter: invert(1);" alt="图片缺失">
<img src="img/public/foot-facebook.png" width="17" height="17" style="-webkit-filter: invert(1); filter: invert(1);" alt="图片缺失">
<img src="img/public/foot-skype.png" width="18" height="18" style="-webkit-filter: invert(1); filter: invert(1);" alt="图片缺失">
</div>
</div>
<div class="djb">
<div style="padding: 27px 20px 0 180px;border-right: 1px solid #ededed;">
<img src="img/logo.png" width="100%">
<div class="clips1" style="font-size: 14px;line-height: 26px;font-weight: bold;margin-top: 10px;">中国美术家协会副主席、中国版画家协会副主席李焕民先生为华夏艺术网提名</div>
<div class="clips2" style="font-size: 13px;color: #616161;line-height: 26px;">是国内最早最大的书画艺术门户网站之一，由四川省美术家协会、四川省书法家协会、四川省诗书画院、成都画院、四川省政协书画研究院等...</div>
</div>
<div class="p-s27" style="background: #faf9f8;width: 175%;">
<div class="djbac" style="padding: 0 180px 30px 30px;line-height: 26px;">
<div>
<img src="img/public/shuy-logo.png" width="100%">
<div class="" style="font-size: 14px;font-weight: bold;margin-top: 28px;">成都惠民职工书院</div>
<div style="font-size: 13px;color: #616161;">地址：成都市青羊区青羊大道129号文化宫2楼</div>
<div style="font-size: 13px;color: #616161;">电话：028-81712589</div>
</div>
<div class="m-zy15 fs">
<div style="font-size: 14px;font-weight: bold;">联系我们</div>
<div style="font-size: 13px;color: #616161;">四川省成都市武侯区天益街38号理想中心3栋601</div>
<div style="font-size: 13px;color: #616161;">手机：13880548658</div>
<div style="font-size: 13px;color: #616161;">电话：028-61529525</div>
<div style="font-size: 13px;color: #616161;">zarts@126.com</div>
</div>
<div class="djb">
<div class="" style="display: flex;flex-direction: column;align-items: center;cursor: pointer;">
<img src="img/public/huax-em.png" width="99" height="99" >
<div style="font-size: 12px;color: #616161;">华夏艺术网</div>
</div>
<div class="" style="display: flex;flex-direction: column;align-items: center;cursor: pointer;">
<img src="img/public/shuy-em.png" width="99" height="99" >
<div style="font-size: 12px;color: #616161;">成都惠民职工书院</div>
</div>
</div>
</div>
<div style="font-size: 13px;color: #616161;border-top: 1px solid #ededed;padding: 30px;">Copyright@2021 华夏艺术网.All rights reserved. 蜀ICP备11111111号 </div>
</div>
</div>
</body> </body>
</html> </html>

23
js/huaxia.js
View File

@ -13,4 +13,27 @@ $(function(){
$(this).next(".redD").removeClass('dn') $(this).next(".redD").removeClass('dn')
$(this).addClass('cq-dao-active') $(this).addClass('cq-dao-active')
}) })
var html = '';
var data = [
{imgSrc:'img/public/xin-one.png',title:'助力熊猫艺术公益：中国邮政发布著名画家刘中《牛气冲...',time:'2021.06.30',content:'爱彼秉承品牌在形式与功能方面的大无畏创新精神，在腕表发展史上扮演着先行者的角色爱彼秉承品牌在形式与功能方面的大无畏创新精神，在碗表发展史上扮演...'},
{imgSrc:'img/public/xin-two.png',title:'助力熊猫艺术公益：中国邮政发布著名画家刘中《牛气冲...',time:'2021.06.30',content:'爱彼秉承品牌在形式与功能方面的大无畏创新精神，在腕表发展史上扮演着先行者的角色爱彼秉承品牌在形式与功能方面的大无畏创新精神，在碗表发展史上扮演...'},
{imgSrc:'img/public/xin-three.png',title:'助力熊猫艺术公益：中国邮政发布著名画家刘中《牛气冲...',time:'2021.06.30',content:'爱彼秉承品牌在形式与功能方面的大无畏创新精神，在腕表发展史上扮演着先行者的角色爱彼秉承品牌在形式与功能方面的大无畏创新精神，在碗表发展史上扮演...'},
{imgSrc:'img/public/xin-four.png',title:'助力熊猫艺术公益：中国邮政发布著名画家刘中《牛气冲...',time:'2021.06.30',content:'爱彼秉承品牌在形式与功能方面的大无畏创新精神，在腕表发展史上扮演着先行者的角色爱彼秉承品牌在形式与功能方面的大无畏创新精神，在碗表发展史上扮演...'},
]
$.each(data, function(commentIndex, comment) {
html +=`<div class="dac backf p-sx20 w48 m-x32">
<img class="fs" src="${comment.imgSrc}" width="242" height="151">
<div class="m-zy15">
<div class="clips1 font-18 col19">${comment.title}</div>
<div class="font-12 col9">${comment.time}</div>
<div class="clips2 font-12">${comment.content}</div>
</div>
</div>`
});
　　$('.msg').prepend(html);
let childer = document.querySelectorAll('.ysj .ya-item-box').length
if(childer==5) {
$('.ysj').css({"justify-content":"space-between","marginRight":0})
$('.ysj .ya-item-box').css({"marginRight":0})
}
}) })