/* ' ' ' ' ' ' ' ' ' ' } */ /********** 1:Swiper用于页面的swiper,因此页面就不需要再加 swiper-bundle.css **********/ .swiper-container {position:relative; overflow:hidden; padding:0; z-index:1; width:100%; height:100%; margin:auto;} .swiper-wrapper {position:relative; width:100%; height:100%; z-index:1; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-transition-property:-webkit-transform; transition-property:transform;transition-property:transform,-webkit-transform;-webkit-box-sizing:content-box; box-sizing:content-box} .swiper-slide {flex-shrink:0; width:100%; height:100%; position:relative; } .swiper-slide {text-align:center; font-size:18px; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; justify-content:center; align-items:center; /*background:#FFF;*/} .swiper-slide {background-position:center top; background-repeat:no-repeat; background-size:100% auto!important; /*background-size:弹性布局*/} .pagination {position:absolute; text-align:center; transition:.3s opacity; transform:translate3d(0,0,0); z-index:10} .swiper-pagination {position:absolute; text-align:center; transition:.3s opacity; z-index:10} .swiper-pagination-bullet {width:0.9rem; height:0.9rem; display:inline-block; margin:0 0.3rem; border-radius:100%; background:#000; opacity:.2; cursor:pointer;} .swiper-pagination {position:relative; top:-30px;} .swiper-pagination-bullet {opacity:0.4; color:#000;} .swiper-pagination-bullet-active {opacity:1;} .swiperWidth {width:87vw; /*为兼容2K屏幕*/} .swiper-button-next, .swiper-button-prev {position:absolute; top:50%; width:27px; height:44px; margin-top:-22px; z-index:10; cursor:pointer; background-size:27px 44px; background-position:center; background-repeat:no-repeat} .swiper-button-next {right:0px;} .swiper-button-Next, .swiper-button-Pre {width:42px; height:42px; opacity:0.5; background:url(../Images/Common/ArrowNext.png) no-repeat center center; /*top:24%;*/} .swiper-button-Next:after, .swiper-button-Pre:after {content: ''; /*取消原来的上页下页箭头*/} .swiper-button-Pre {background:url(../Images/Common/ArrowPre.png) no-repeat center center;} .swiper-button-NextA, .swiper-button-PrevA {width:1.5rem; height:1.5rem; background-size:100%; border-width:0; outline:none;} /****************************** swiper的Css结束 ******************************/ /* LoadingDiv特定: 1)如果视窗宽度小于底图,底图按视窗按比例所需 2)Loading动画总计6秒 3)由于封面图png尺寸过大,使用new Image()预载入 4)原来图片框 850 */ .LoadingDiv {display:table; width:100vw; opacity:1; position:fixed; z-index:101; background-color:#FFFFFF;} .LoadingDiv dd {display:table-cell; height:100vh; vertical-align:middle; text-align:center; overflow:hidden;} .LoadingDiv dd center {position:relative; width:100%; max-width:66vw; margin:auto;} .LoadingDiv dd center blockquote {width:100%; padding-bottom:53%; background:url() no-repeat center center; background-size:100%; opacity:0; transform:scale(0.8);} .LoadingDiv dd center hr {width:0%; border-width:0; height:2px; margin:8px auto; position:relative; background-color:#CCCCCC;} @keyframes LoadingBackImg {0%{opacity:0;transform:scale(0.8);} 20%{opacity:1;transform:scale(1);} 40%{opacity:1;transform:scale(1);} 60%{opacity:1;transform:scale(1);} 80%{opacity:1;transform:scale(1);} 100%{opacity:0;transform:scale(1.1);}} @keyframes LoadingLine {0%{opacity:1;width:0%;} 20%{opacity:1;width:0%;} 60%{opacity:1;width:100%;} 70%{opacity:1;width:100%;} 90%{opacity:0;} 100%{width:100%;} 100%{opacity:0;} 100%{width:100%;}} /************************************* 关于Swiper构建 ************************************* 0: 每次都要给SlideD设置width,目前设为1000,配合TopBarA导航的min-width:1000 1: 关山觉中,使用vw设置外围div的高度,以便弹性布局 2: dl,dt用于table结构多行单列, blockquote用于img背景图定位 3: dt手动设置height(vw),为便于定位,使用vertica-align:top; 4: 用span,tt控制文字大小和颜色,font-size,line-height都使用vw 5: 如果dt内图片,设置图片width(vw),同时不设置dt高度 6: h5控制一行两图片的位置处理(两图片水平排列导致总宽度过大,见万盟数控首页的Banner3图) 7: dd用于单行多列. 8: SlideDFontBig,SlideDFontSub:为适应2K屏幕,font-size仍使用vw,利用页面的media screen对2k进行专门控制 9: li用于图片Css动画,图片尺寸都是一致的png图,便于设置动画(样本: 北京永旺) 10: SlideDAni_00:这里的末尾数字与页面的id="Slide0"是对应的 ******************************************************************************************/ .SlideD {display:table!important; width:100%; max-width:83vw; margin:auto;} .SlideD dl {display:table-row;} .SlideD dl dt {display:table-cell; vertical-align:top; text-align:center;} .SlideD dl dt span {font-size:3vw; color:#FFFFFF; font-weight:bolder; letter-spacing:1px;} .SlideD dl dt tt {font-size:1.2vw; color:#CCCCCC; line-height:1.5vw;} .SlideD dl dt h6 {display:inline-block; height:100%; overflow:hidden; white-space:nowrap;} /*仅用于开镜动画*/ .SlideD dl dt h5 {margin:auto; width:0; height:0; background-color:#EEEEEE;} .SlideD dl dt blockquote {left:0px; top:0px; z-index:0; background-repeat:no-repeat; background-position:center top; margin:auto;} /*用于把图片放入背景*/ .SlideD dl dt blockquote, .SlideD dl dt blockquote img, .SlideD dl dt img, .SlideD dl dt h5, .SlideD dl dt h6, .SlideD dl dt span, .SlideD dl dt tt {position:relative;} .SlideD dl dt blockquote, .SlideD dl dt blockquote img, .SlideD dl dt img, .SlideD dl dt h3, .SlideD dl dt h4, .SlideD dl dt span, .SlideD dl dt tt {opacity:0;} .SlideD dl dt h6 span {opacity:1;} .SlideD dd {display:table-cell; vertical-align:top; text-align:left; height:600px; overflow:hidden;} .SlideD dd blockquote {position:relative; left:0px; top:0px; z-index:0; background-repeat:no-repeat; background-position:left top;} .SlideD dd blockquote img {position:relative; opacity:0;} .SlideD dd img {position:relative; margin-top:0px; opacity:0;} .SlideD dd center {width:100%; margin:auto; vertical-align:top; text-align:left; height:0px; position:relative;} .SlideD li {display:table-cell; width:100%; height:36.45vw; vertical-align:top; text-align:center; overflow:hidden; position:relative; background-repeat:no-repeat; background-position:center center} .SlideD li h3 {position:absolute; height:100%; width:100%;} .SlideD li h3 img {position:relative; width:auto; height:100%; opacity:0;} .SlideDFontBig {font-size:2.6vw!important; font-weight:normal!important;} .SlideDFontSub {font-size:1.4vw!important; line-height:3vw!important;} @keyframes SlideDAni_a {from{transform:scale(1.4);opacity:0; top:-3vw;} to{transform:scale(1); opacity:1; top:0vw;}} @keyframes SlideDAni_b {from{transform:scale(1.4);opacity:0; top:3vw;} to{transform:scale(1); opacity:1; top:0vw;}} @keyframes SlideDAni30 {from,20%,40%,60%,80%,to{animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);} 0% {opacity:0;transform:scale3d(.3, .3, .3);} 20%{transform:scale3d(1.1, 1.1, 1.1);} 40%{transform:scale3d(.9, .9, .9);} 60%{opacity:1;transform:scale3d(1.03, 1.03, 1.03);} 80%{transform:scale3d(.97, .97, .97);} to {opacity:1;transform:scale3d(1, 1, 1);} } @keyframes SlideDAni31 {from{top:1vw;opacity:0;} to{top:0vw; opacity:1;}} .SlideDAni_30 {animation:SlideDAni30 1.5s forwards;} .SlideDAni_31 {animation:SlideDAni31 1s forwards; animation-delay:1s;} /** wow bounceIn 从原位置出现，由小变大超出设定值，再变小小于设定值，再回归设定值、透明度从100%变化至设定值 wow slideInUp 从下往上、上来后固定到设定位置、透明度为设定值不变（up是从下往上）（如果元素在最下面，会撑开盒子高度） wow bounceInUp 从下往上、窜上来以后会向上超出一部分然后弹回去、透明度为设定值不变 wow slideInDown 从上往下、上来后固定到设定位置、透明度为设定值不变 wow bounceInDown 从上往下、掉下来以后会向下超出一部分然后弹跳一下、透明度为设定值不变 wow slideInLeft 从左往右、上来后固定到设定位置、透明度为设定值不变（left却是从左往右） wow bounceInLeft 从左往右、移过来以后会向右超出一部分然后往左弹一下、透明度为设定值不变 wow slideInRight 从右往左、上来后固定到设定位置、透明度为设定值不变 wow bounceInRight 从右往左、移过来以后会向左超出一部分然后往右弹一下、透明度为设定值不变 wow rollIn 从左到右、顺时针滚动、透明度从100%变化至设定值 wow lightSpeedIn 从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度从100%变化至设定值 wow bounce 上下抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖） wow pulse 原位置放大一点点在缩小至原本大小、透明度为设定值不变（配合动画执行次数属性效果更佳） wow shake 左右抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖） wow flipInX 原位置后仰前栽、透明度从100%变化至设定值 wow swing 从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度为设定值不变 wow flipInY 原位置左右旋动、透明度从100%变化至设定值 wow bounceInU 原位置不变、直接从不显示到显示（无过过渡效果） wow wobble 原位置不变、类似于一个人站在那左右晃头、透明度 关于网站弹性结构 1) 尽量使用%,不要使用px,如果板式外围构架为100%,可以使用vw 2) 板式构架尽量使用FlexBoxDiv控制最外围宽度,构架内部尽量使用% 3) 框架内部控制高度,可利用padding-bottom为宽度的百分比,再在内部建立块元素,利用height:100%,top控制定位,图片使用背景来完成 4) 文字大小可使用em,如果文字容器高度使用em,可避免文字过小 5) 1vw略比1em大一点 **/ .CanledarDiv {display:block; font-size:0; margin:auto; background-color:#FFF3FB; margin-top:-2rem; padding:1.0rem 0; position:relative; z-index:5;} .CanledarDiv dd {display:inline-block; text-align:center; vertical-align:top; box-sizing:border-box; font-size:0.9rem; color:#000000;} .CanledarDiv dd h4 {width:100%; text-align:left; padding:0 5%; box-sizing:border-box;} .CanledarDiv dd h4 span {font-size:1.4rem; line-height:1.6rem; letter-spacing:0.1rem; font-weight:bolder;} .CanledarDiv dd h4 li {font-size:2.0rem; font-weight:bold; margin-top: 0.3rem; text-align: center;} .CanledarDiv dd h4 img {width:100%; height:auto; margin-top:0.6rem;} .CanledarDiv dd:nth-child(3) h4 p {font-size:13px; line-height:22px; color:#535353; text-indent:2em;} .calendar_pc .select_month {position:relative; text-align:center; color:#1b1b1b; font-weight:bold; font-size:0.9rem;} .calendar_pc .select_month .prev {position:absolute; left:13px; top:0;} .calendar_pc .select_month .next {position:absolute; right:13px; top:0;} .calendar_pc .calendar_table table {width:100%;} .calendar_pc .calendar_table table th {border:1px solid #535353; border-bottom:none; color:#FFFFFF; background:#535353; padding:2px 0px 4px 0; font-size:12px;} .calendar_pc .calendar_table table td {border:1px solid #eeeeee; border-top:none; font-size:1rem;} .calendar_pc .calendar_table table th,.calendar_pc .calendar_table table td {width:27px; font-weight:bold; text-align:center; box-sizing:border-box;} .calendar_pc .calendar_table table td.current {background:#8bc1f9;} .calendar_pc .calendar_table table td.we {background:#fff572;} .calendar_pc .calendar_table table td a {width:27px; height:25px; line-height:25px; display:block; color:#000000; margin:auto;} .calendar_pc .calendar_table table td a.special {/* background:url(/assets/front/top/bg-special.png) no-repeat;*/} .calendar_pc .calendar_table table td span.date {display:block; text-align:center;background:url(../images/bg-date.png) no-repeat center center;} .calendar_pc .calendar_table table td span.kaixin {display:block; background:url(img-triangle.png) no-repeat center center;} .calendar_pc .calendar_table table td span.yongwang {display:block; background:url(../images/img-square.png) no-repeat center center;} .calendar_pc .calendar_table table td a:hover {text-decoration:none;} .calendar_pc p.all {padding-top:5px;} .calendar_pc p.all a {background:url(/assets/front/top/btn-event.gif) no-repeat; display:block; width:218px; height:25px; text-align:center; line-height:25px; color:#FFFFFF; text-decoration:none; font-weight:bold;} .calendar_sp {display:none;} .calendar_pc .calendar_table tbody {background-color:#ffffff;} .FellowMeBar {width:100%; height:494px; padding:140px 0 17px 0; text-align:right; box-sizing:border-box;} .FellowMeBar dd {display:inline-block; width:455px; text-align:left; vertical-align:top;} .FellowMeBar dd span {display:inline-block; font-size:1.7rem; line-height:2.4rem; letter-spacing:0.1rem; vertical-align:top;} .FellowMeBar dt {display:inline-block; text-align:center; width:455px;} .FellowMeBar_Y {display:table-cell; vertical-align:bottom; text-align:center; width:90vw; height:84.2vw; position:relative; left:5vw; display:none;} .FellowMeBar_Y dd {width:100%; margin:auto;} .FellowMeBar_Y dd img {width:100%; height:auto; margin:1rem 0;} .FellowMeBar_Y dt {width:57vw; height:45vw; font-size:1.2rem; color:#000000; text-align:center;} .FellowMeBar_Y dt img {width:16vw; height:auto; } .FellowMeBar_Y dt p {font-size:1.6rem; line-height:2.3rem; padding:1rem 0 1rem 0; text-align:center;} .FellowMeBar_Y center {display:inline-block; width:34vw; height:4.4rem; line-height:4.4rem; font-size:1.5rem; letter-spacing:0.1rem; color:#FFFFFF; background-color:#AE007A;} .Slide_Spec {padding:0;} .Slide_Spec img {height:80px; width:auto;}