@import '../common/variable'; @theme_color_less_08: "@{theme_color_less}cc"; //定义变量作为样式属性值使用 .c-a003__imgbox{ -webkit-transition: opacity ease 0.3s; -moz-transition: opacity ease 0.3s; -ms-transition: opacity ease 0.3s; -o-transition: opacity ease 0.3s; transition: opacity ease 0.3s; opacity: 0; } .c-a003__imgbox--end{ opacity: 1; } .c-a003__mask { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background: rgba(0, 0, 0, 0.5); } .c-a003__title, .c-a003__time, .c-a003__address, .c-a003__icongroup, .c-a003__btngroup, .c-a003__bottom { position: absolute; left: 0; right: 0; z-index: 2; } html.pc { @bias_pc: 90px; .c-a003 { position: relative; margin-top: -@bias_pc; } .c-a003__container, .c-a003__imgbox { height: 840px; } .c-a003__title { top: 260px; color: white; font-size: 60px; } .c-a003__time { top: 352px; color: white; font-size: 30px; } .c-a003__address { top: 408px; color: white; font-size: 26px; } .c-a003__icongroup { top: 530px; z-index: 3; } .c-a003__btngroup { top: 580px; } .c-a003__bottom { bottom: 0; height: 70px; background: @theme_color_less; filter: alpha(opacity=80); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; opacity: .8; // background: @theme_color_less 80%; // background: rgba(45, 109, 204, 0.8); padding-top: 8px; } .c-a003__lefttobeging { color: white; font-size: 22px; } .c-a003__lefttobeging--strong { font-size: 38px; } .c-a003__prelogin-icon { width: 53px; } .c-a003__exhibt_pre-icon { width: 58px; } .c-a003__cal-icon { width: 40px; } .c-a003__cal { position: absolute; top: 10px; left: -56px; } .c-a003__btn { width: 300px; height: 80px; background: rgba(255, 255, 255, 1); border-radius: 12px; -webkit-border-radius: 12px; cursor: pointer; margin-left: 45px; &.c-a003__btn--blue { margin-right: 45px; margin-left: 0; } &:hover { background: @theme_color_less; .c-a003__btn-text, .c-a003__btn-smalltext { color: white; } } } .c-a003__btn-text { color: @theme_color_less; font-size: 22px; padding-top: 16px; } .c-a003__btn-smalltext { color: @theme_color_less; font-size: 16px; padding-top: 4px; } .c-a003__prelogin-icon { margin-right: 165px; } .c-a003__exhibt_pre-icon { margin-left: 165px; } } html.mobile { @bias_mobile: 1.2rem; .c-a003 { position: relative; margin-top: -@bias_mobile; } .c-a003__container, .c-a003__imgbox { height: 10rem; } .c-a003__title { top: 2.5rem; color: white; font-size: 0.54rem; } .c-a003__time { top: 4.5rem; color: white; font-size: 0.50rem; } .c-a003__address { top: 5.5rem; color: white; font-size: 0.4rem; } .c-a003__icongroup { top: 6.63rem; z-index: 3; } .c-a003__btngroup { top: 7.38rem; } .c-a003__bottom { bottom: 0; height: 0.8rem; background: @theme_color_less; filter: alpha(opacity=80); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; opacity: .8; // background: rgba(45, 109, 204, 0.8); // background: @theme_color_less; // padding-top: 0.12rem; } .c-a003__lefttobeging { color: white; font-size: 0.4rem; } .c-a003__lefttobeging--strong { font-size: 0.54rem; } .c-a003__prelogin-icon { width: 0.75rem; } .c-a003__exhibt_pre-icon { width: 0.84rem; } .c-a003__cal-icon { width: 0.51rem; } .c-a003__cal { position: absolute; top: 0.17rem; left: -0.56rem; } .c-a003__btn { width: 3rem; height: 0.9rem; background: rgba(255, 255, 255, 1); border-radius: 0.12rem; -webkit-border-radius: 0.12rem; cursor: pointer; margin-left: 0.25rem; &.c-a003__btn--blue { margin-right: 0.25rem; margin-left: 0; background: @theme_color_less; .c-a003__btn-text, .c-a003__btn-smalltext { color: white; } } } .c-a003__btn-text { color: @theme_color_less; font-size: 0.3rem; padding-top: 0.1rem; } .c-a003__btn-smalltext { color: @theme_color_less; font-size: 0.2rem; padding-top: 0.02rem; } .c-a003__prelogin-icon { margin-right: 1.35rem; } .c-a003__exhibt_pre-icon { margin-left: 1.35rem; } }