|
|
@@ -1,15 +1,15 @@
|
|
|
@charset "UTF-8";
|
|
|
$yahei: "Microsoft YaHei";
|
|
|
-$pingfan:PingFangSC-Regular;
|
|
|
-$commonColor : #97c1cd;
|
|
|
-$uncommonColor : #2cd070;
|
|
|
-$rareColor : #43c2ff;
|
|
|
-$epicColor : #b457e9;
|
|
|
-$legendaryColor : #ff9139;
|
|
|
+$pingfan: PingFangSC-Regular;
|
|
|
+$commonColor: #97c1cd;
|
|
|
+$uncommonColor: #2cd070;
|
|
|
+$rareColor: #43c2ff;
|
|
|
+$epicColor: #b457e9;
|
|
|
+$legendaryColor: #ff9139;
|
|
|
|
|
|
/*通用变量*/
|
|
|
|
|
|
-$bfz:14px;
|
|
|
+$bfz: 14px;
|
|
|
/*基础样式*/
|
|
|
|
|
|
@import "base/mBase";
|
|
|
@@ -17,2306 +17,3198 @@ $bfz:14px;
|
|
|
@import "base/ui-dialog";
|
|
|
|
|
|
@font-face {
|
|
|
- /* font-properties */
|
|
|
- font-family: titleFont;
|
|
|
- src:url('/src/font/HYLILIANGHEIJ.TTF');
|
|
|
+ /* font-properties */
|
|
|
+ font-family: titleFont;
|
|
|
+ src: url('/src/font/HYLILIANGHEIJ.TTF');
|
|
|
}
|
|
|
|
|
|
[v-cloak] {
|
|
|
- display: none;
|
|
|
+ display: none;
|
|
|
}
|
|
|
|
|
|
-html{
|
|
|
- font-size: 60px;
|
|
|
+html {
|
|
|
+ font-size: 60px;
|
|
|
}
|
|
|
|
|
|
body {
|
|
|
- font-size: $bfz;
|
|
|
- font-family: $pingfan, $yahei, Helvetica, Arial, sans-serif;
|
|
|
- color: #333333;
|
|
|
- -webkit-overflow-scrolling: touch;
|
|
|
+ font-size: $bfz;
|
|
|
+ font-family: $pingfan, $yahei, Helvetica, Arial, sans-serif;
|
|
|
+ color: #333333;
|
|
|
+ -webkit-overflow-scrolling: touch;
|
|
|
}
|
|
|
|
|
|
a {
|
|
|
- text-decoration: none;
|
|
|
- &.g-link {
|
|
|
- position: relative;
|
|
|
- display: block;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
+ text-decoration: none;
|
|
|
+ &.g-link {
|
|
|
+ position: relative;
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-img{
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- display: block;
|
|
|
- overflow: hidden;
|
|
|
+img {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ display: block;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
|
|
|
-.fl{
|
|
|
- float: left;
|
|
|
+.fl {
|
|
|
+ float: left;
|
|
|
}
|
|
|
|
|
|
-.fr{
|
|
|
- float: right;
|
|
|
+.fr {
|
|
|
+ float: right;
|
|
|
}
|
|
|
|
|
|
-.u-hide{
|
|
|
- display: none;
|
|
|
+.u-hide {
|
|
|
+ display: none;
|
|
|
}
|
|
|
|
|
|
-.skew-1{
|
|
|
- transform: skew(-1deg)
|
|
|
+.skew-1 {
|
|
|
+ transform: skew(-1deg)
|
|
|
}
|
|
|
|
|
|
-.skew-6{
|
|
|
- transform: skew(-6deg)
|
|
|
+.skew-6 {
|
|
|
+ transform: skew(-6deg)
|
|
|
}
|
|
|
|
|
|
-.zt-inner{
|
|
|
- width: px2rem(1260);
|
|
|
- margin: 0 auto;
|
|
|
+.zt-inner {
|
|
|
+ width: px2rem(1260);
|
|
|
+ margin: 0 auto;
|
|
|
}
|
|
|
|
|
|
-.zt-crumbs{
|
|
|
- color: #3f402a;
|
|
|
- line-height: px2rem(60);
|
|
|
- font-size: 14px;
|
|
|
- a{
|
|
|
- color: inherit;
|
|
|
- &:first-child{
|
|
|
- font-size: 18px;
|
|
|
- font-weight: 700;
|
|
|
- }
|
|
|
- &:hover{
|
|
|
- text-decoration: underline;
|
|
|
- }
|
|
|
- }
|
|
|
+.zt-crumbs {
|
|
|
+ color: #3f402a;
|
|
|
+ line-height: px2rem(60);
|
|
|
+ font-size: 14px;
|
|
|
+ a {
|
|
|
+ color: inherit;
|
|
|
+ &:first-child {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ text-decoration: underline;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-.clearfix{
|
|
|
- @include clearfix();
|
|
|
+.clearfix {
|
|
|
+ @include clearfix();
|
|
|
}
|
|
|
|
|
|
#app {
|
|
|
- position: relative;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
|
|
|
-.zt-mod-header{
|
|
|
- &:hover{
|
|
|
- .row-expand{
|
|
|
- transform: translateY(0);
|
|
|
- }
|
|
|
- }
|
|
|
- .zt-inner{
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .hItem-logo{
|
|
|
- width: px2rem(156);
|
|
|
- height: 100%;
|
|
|
- img{
|
|
|
- margin-top: px2rem(12);
|
|
|
- }
|
|
|
- }
|
|
|
- .hItem-menu{
|
|
|
- text-align: center;
|
|
|
- margin-right: px2rem(-60);
|
|
|
- li{
|
|
|
- position: relative;
|
|
|
- float: left;
|
|
|
- margin-right: px2rem(38);
|
|
|
- a{
|
|
|
- display: block;
|
|
|
- color: #999999;
|
|
|
- font-size: px2rem(12);
|
|
|
- border-bottom: px2rem(4) solid transparent;
|
|
|
- padding: 0 px2rem(6);
|
|
|
- height: px2rem(90);
|
|
|
- overflow: hidden;
|
|
|
- &.active,&:hover{
|
|
|
- color: #989000;
|
|
|
- span{
|
|
|
- color: #fff100;
|
|
|
- }
|
|
|
- }
|
|
|
- &.active{
|
|
|
- border-color: #fff100;
|
|
|
- }
|
|
|
- }
|
|
|
- span{
|
|
|
- display: block;
|
|
|
- color: #FFFFFF;
|
|
|
- font-family: titleFont;
|
|
|
- font-size: px2rem(24);
|
|
|
- margin: px2rem(20) 0 px2rem(12);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .row-nomal{
|
|
|
- position: relative;
|
|
|
- z-index: 2;
|
|
|
- background: #000000;
|
|
|
- height: px2rem(90);
|
|
|
- }
|
|
|
- .row-expand{
|
|
|
- position: absolute;
|
|
|
- width: 100%;
|
|
|
- z-index: 1;
|
|
|
- line-height: px2rem(30);
|
|
|
- font-size: px2rem(14);
|
|
|
- background: rgba(0,0,0,0.7);
|
|
|
- padding: px2rem(20) 0;
|
|
|
- transform: translateY(-100%);
|
|
|
- transition: all .2s;
|
|
|
- .hItem-expand_col{
|
|
|
- &:nth-child(1){
|
|
|
- margin: 0 px2rem(39) 0 px2rem(351);
|
|
|
- }
|
|
|
- &:nth-child(4){
|
|
|
- margin-right: px2rem(81);
|
|
|
- }
|
|
|
- &:nth-child(5){
|
|
|
- margin-right: px2rem(81);
|
|
|
- }
|
|
|
- }
|
|
|
- &.task-col-1{
|
|
|
- .hItem-expand_col{
|
|
|
- &:nth-child(2){
|
|
|
- margin-right: px2rem(39);
|
|
|
- }
|
|
|
- &:nth-child(3){
|
|
|
- margin-right: px2rem(60);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- &.task-col-2{
|
|
|
- .hItem-expand_col{
|
|
|
- &:nth-child(2){
|
|
|
- margin-right: px2rem(-12);
|
|
|
- }
|
|
|
- &:nth-child(3){
|
|
|
- margin-right: px2rem(12);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- a{
|
|
|
- position: relative;
|
|
|
- color: #cccccc;
|
|
|
- &:hover{
|
|
|
- text-decoration: underline;
|
|
|
- }
|
|
|
- &:before{
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- top: px2rem(-2);
|
|
|
- right: px2rem(-20);
|
|
|
- width: px2rem(16);
|
|
|
- height: px2rem(13);
|
|
|
- }
|
|
|
- &.icon-new{
|
|
|
- &:before{
|
|
|
- background: url(/src/img/icon-new.png) 0 / 100% no-repeat;
|
|
|
- }
|
|
|
- }
|
|
|
- &.icon-hot{
|
|
|
- &:before{
|
|
|
- background: url(/src/img/icon-hot.png) 0 / 100% no-repeat;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .hItem-expand_col{
|
|
|
- float: left;
|
|
|
- text-align: center;
|
|
|
- ul{
|
|
|
- float: left;
|
|
|
- width: px2rem(100);
|
|
|
- }
|
|
|
- li{
|
|
|
- @include ellipsis();
|
|
|
- }
|
|
|
- }
|
|
|
+.web-hide-hook{
|
|
|
+ display: none;
|
|
|
}
|
|
|
|
|
|
-.zt-mod-primary{
|
|
|
-
|
|
|
+.zt-mod-header {
|
|
|
+ &:hover {
|
|
|
+ .row-expand {
|
|
|
+ transform: translateY(0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .zt-inner {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .hItem-logo {
|
|
|
+ width: px2rem(156);
|
|
|
+ height: 100%;
|
|
|
+ img {
|
|
|
+ margin-top: px2rem(12);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .hItem-menu {
|
|
|
+ text-align: center;
|
|
|
+ margin-right: px2rem(-60);
|
|
|
+ li {
|
|
|
+ position: relative;
|
|
|
+ float: left;
|
|
|
+ margin-right: px2rem(38);
|
|
|
+ a {
|
|
|
+ display: block;
|
|
|
+ color: #999999;
|
|
|
+ font-size: px2rem(12);
|
|
|
+ border-bottom: px2rem(4) solid transparent;
|
|
|
+ padding: 0 px2rem(6);
|
|
|
+ height: px2rem(90);
|
|
|
+ overflow: hidden;
|
|
|
+ &.active, &:hover {
|
|
|
+ color: #989000;
|
|
|
+ span {
|
|
|
+ color: #fff100;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ border-color: #fff100;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ display: block;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-family: titleFont;
|
|
|
+ font-size: px2rem(24);
|
|
|
+ margin: px2rem(20) 0 px2rem(12);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .row-nomal {
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ background: #000000;
|
|
|
+ height: px2rem(90);
|
|
|
+ }
|
|
|
+ .row-expand {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 1;
|
|
|
+ line-height: px2rem(30);
|
|
|
+ font-size: px2rem(14);
|
|
|
+ background: rgba(0, 0, 0, 0.7);
|
|
|
+ padding: px2rem(20) 0;
|
|
|
+ transform: translateY(-100%);
|
|
|
+ transition: all .2s;
|
|
|
+ .hItem-expand_col {
|
|
|
+ &:nth-child(1) {
|
|
|
+ margin: 0 px2rem(39) 0 px2rem(351);
|
|
|
+ }
|
|
|
+ &:nth-child(4) {
|
|
|
+ margin-right: px2rem(81);
|
|
|
+ }
|
|
|
+ &:nth-child(5) {
|
|
|
+ margin-right: px2rem(81);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.task-col-1 {
|
|
|
+ .hItem-expand_col {
|
|
|
+ &:nth-child(2) {
|
|
|
+ margin-right: px2rem(39);
|
|
|
+ }
|
|
|
+ &:nth-child(3) {
|
|
|
+ margin-right: px2rem(60);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.task-col-2 {
|
|
|
+ .hItem-expand_col {
|
|
|
+ &:nth-child(2) {
|
|
|
+ margin-right: px2rem(-12);
|
|
|
+ }
|
|
|
+ &:nth-child(3) {
|
|
|
+ margin-right: px2rem(12);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ position: relative;
|
|
|
+ color: #cccccc;
|
|
|
+ &:hover {
|
|
|
+ text-decoration: underline;
|
|
|
+ }
|
|
|
+ &:before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: px2rem(-2);
|
|
|
+ right: px2rem(-20);
|
|
|
+ width: px2rem(16);
|
|
|
+ height: px2rem(13);
|
|
|
+ }
|
|
|
+ &.icon-new {
|
|
|
+ &:before {
|
|
|
+ background: url(/src/img/icon-new.png) 0 / 100% no-repeat;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.icon-hot {
|
|
|
+ &:before {
|
|
|
+ background: url(/src/img/icon-hot.png) 0 / 100% no-repeat;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .hItem-expand_col {
|
|
|
+ float: left;
|
|
|
+ text-align: center;
|
|
|
+ ul {
|
|
|
+ float: left;
|
|
|
+ width: px2rem(100);
|
|
|
+ }
|
|
|
+ li {
|
|
|
+ @include ellipsis();
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-.zt-mod-nav{
|
|
|
- background: #222222;
|
|
|
- padding: px2rem(20) 0 px2rem(26);
|
|
|
- ul{
|
|
|
- margin-right: px2rem(-30);
|
|
|
- }
|
|
|
- li{
|
|
|
- float: left;
|
|
|
- margin-right: px2rem(28);
|
|
|
- }
|
|
|
- a{
|
|
|
- position: relative;
|
|
|
- display: block;
|
|
|
- color: #FFFFFF;
|
|
|
- width: px2rem(230);
|
|
|
- height: px2rem(132);
|
|
|
- outline: none;
|
|
|
- &:hover,&.active{
|
|
|
- .bg-nav{
|
|
|
- filter: grayscale(0);
|
|
|
- filter: 0;
|
|
|
- &:before{
|
|
|
- right: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- &.active{
|
|
|
- &:before{
|
|
|
- display: block;
|
|
|
- }
|
|
|
- }
|
|
|
- &:before{
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- display: none;
|
|
|
- bottom: px2rem(-32);
|
|
|
- left: px2rem(20);
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- h2{
|
|
|
- position: relative;
|
|
|
- font-size: px2rem(26);
|
|
|
- font-weight: 700;
|
|
|
- padding: px2rem(40) 0 px2rem(16) px2rem(12);
|
|
|
- }
|
|
|
- p{
|
|
|
- position: relative;
|
|
|
- font-size: px2rem(14);
|
|
|
- padding: 0 0 0 px2rem(12);
|
|
|
- }
|
|
|
- .bg-nav{
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- overflow: hidden;
|
|
|
- filter: grayscale(100%);
|
|
|
- filter: gray;
|
|
|
- transition: all .2s;
|
|
|
- &:before{
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- width: px2rem(134);
|
|
|
- height: 100%;
|
|
|
- right: px2rem(-50);
|
|
|
- transition: all .4s ease-in;
|
|
|
- }
|
|
|
- }
|
|
|
- @for $i from 1 through 5{
|
|
|
- .nav#{$i}{
|
|
|
- .bg-nav{
|
|
|
- &:before{
|
|
|
- background: url(/src/img/nav#{$i}-icon.png) right 0 / auto 100% no-repeat;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .nav1{
|
|
|
- &:before{
|
|
|
- border: px2rem(16) solid #f5a848;
|
|
|
- border-color: #f5a848 transparent transparent transparent;
|
|
|
- }
|
|
|
- .bg-nav{
|
|
|
- background: url(/src/img/nav1-bg.png) 0 0 / 100% 100% no-repeat;
|
|
|
- }
|
|
|
- }
|
|
|
- .nav2{
|
|
|
- &:before{
|
|
|
- border: px2rem(16) solid #1367fa;
|
|
|
- border-color: #1367fa transparent transparent transparent;
|
|
|
- }
|
|
|
- .bg-nav{
|
|
|
- background: url(/src/img/nav2-bg.png) 0 0;
|
|
|
- }
|
|
|
- }
|
|
|
- .nav3{
|
|
|
- &:before{
|
|
|
- border: px2rem(16) solid #16bf82;
|
|
|
- border-color: #16bf82 transparent transparent transparent;
|
|
|
- }
|
|
|
- .bg-nav{
|
|
|
- background: url(/src/img/nav3-bg.png) 0 0 / 100% no-repeat;
|
|
|
- }
|
|
|
- }
|
|
|
- .nav4{
|
|
|
- &:before{
|
|
|
- border: px2rem(16) solid #00bbd4;
|
|
|
- border-color: #00bbd4 transparent transparent transparent;
|
|
|
- }
|
|
|
- .bg-nav{
|
|
|
- background: url(/src/img/nav4-bg.png) 0 0 repeat;
|
|
|
- }
|
|
|
- }
|
|
|
- .nav5{
|
|
|
- &:before{
|
|
|
- border: px2rem(16) solid #6817f0;
|
|
|
- border-color: #6817f0 transparent transparent transparent;
|
|
|
- }
|
|
|
- .bg-nav{
|
|
|
- background: #6817f0;
|
|
|
- }
|
|
|
- }
|
|
|
+.zt-mod-primary {
|
|
|
+
|
|
|
}
|
|
|
|
|
|
-.zt-sidebar-zt{
|
|
|
- position: fixed;
|
|
|
- left: 50%;
|
|
|
- width: px2rem(186);
|
|
|
- margin: px2rem(180) 0 0 px2rem(-900);
|
|
|
- z-index: 10;
|
|
|
- &.is-scroll{
|
|
|
- margin-top: 0;
|
|
|
- top: px2rem(240);
|
|
|
- }
|
|
|
- .sidebar-zt_hd{
|
|
|
- font-size: px2rem(30);
|
|
|
- font-family: titlefont;
|
|
|
- color: #FFFFFF;
|
|
|
- height: px2rem(111);
|
|
|
- line-height: px2rem(159);
|
|
|
- margin: 0 px2rem(-54) px2rem(-6) 0;
|
|
|
- background: url(/src/img/icon-sidebar_zt.png) right 0 / auto 100% no-repeat;
|
|
|
- }
|
|
|
- .sidebar-zt_bd{
|
|
|
- font-weight: 700;
|
|
|
- }
|
|
|
- .section-item{
|
|
|
- &.is-expend{
|
|
|
- .section-item_hd{
|
|
|
- @for $i from 1 through 3{
|
|
|
- &.hd-bg#{$i}{
|
|
|
- background-image: url(/src/img/bg-sidebar_zt#{$i}_hover.png);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .section-item_hd{
|
|
|
- position: relative;
|
|
|
- z-index: 2;
|
|
|
- display: block;
|
|
|
- height: px2rem(54);
|
|
|
- line-height: px2rem(54);
|
|
|
- color: #FFFFFF;
|
|
|
- text-align: right;
|
|
|
- font-size: px2rem(18);
|
|
|
- padding-right: px2rem(54);
|
|
|
- @for $i from 1 through 3{
|
|
|
- &.hd-bg#{$i}{
|
|
|
- background: url(/src/img/bg-sidebar_zt#{$i}.png) 0 0 / 100% 100% no-repeat;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .section-item_bd{
|
|
|
- background: #a71616;
|
|
|
- margin: px2rem(-9) px2rem(9) 0;
|
|
|
- padding: px2rem(18) 0;
|
|
|
- line-height: px2rem(30);
|
|
|
- font-size: 12px;
|
|
|
- display: none;
|
|
|
- a{
|
|
|
- position: relative;
|
|
|
- display: block;
|
|
|
- color: #ff9090;
|
|
|
- padding: 0 px2rem(9) 0 px2rem(27);
|
|
|
- &:before{
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: px2rem(12);
|
|
|
- margin-top: px2rem(-2);
|
|
|
- width: px2rem(4);
|
|
|
- height: px2rem(4);
|
|
|
- background: #FFFFFF;
|
|
|
- display: none;
|
|
|
- }
|
|
|
- &.active{
|
|
|
- color: #FFFFFF;
|
|
|
- &:before{
|
|
|
- display: block;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+.zt-mod-nav {
|
|
|
+ background: #222222;
|
|
|
+ padding: px2rem(20) 0 px2rem(26);
|
|
|
+ ul {
|
|
|
+ margin-right: px2rem(-30);
|
|
|
+ }
|
|
|
+ li {
|
|
|
+ float: left;
|
|
|
+ margin-right: px2rem(28);
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ position: relative;
|
|
|
+ display: block;
|
|
|
+ color: #FFFFFF;
|
|
|
+ width: px2rem(230);
|
|
|
+ height: px2rem(132);
|
|
|
+ outline: none;
|
|
|
+ &:hover, &.active {
|
|
|
+ .bg-nav {
|
|
|
+ filter: grayscale(0);
|
|
|
+ filter: 0;
|
|
|
+ &:before {
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ &:before {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ display: none;
|
|
|
+ bottom: px2rem(-32);
|
|
|
+ left: px2rem(20);
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ h2 {
|
|
|
+ position: relative;
|
|
|
+ font-size: px2rem(26);
|
|
|
+ font-weight: 700;
|
|
|
+ padding: px2rem(40) 0 px2rem(16) px2rem(12);
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ position: relative;
|
|
|
+ font-size: px2rem(14);
|
|
|
+ padding: 0 0 0 px2rem(12);
|
|
|
+ }
|
|
|
+ .bg-nav {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ filter: grayscale(100%);
|
|
|
+ filter: gray;
|
|
|
+ transition: all .2s;
|
|
|
+ &:before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ width: px2rem(134);
|
|
|
+ height: 100%;
|
|
|
+ right: px2rem(-50);
|
|
|
+ transition: all .4s ease-in;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @for $i from 1 through 5 {
|
|
|
+ .nav#{$i} {
|
|
|
+ .bg-nav {
|
|
|
+ &:before {
|
|
|
+ background: url(/src/img/nav#{$i}-icon.png) right 0 / auto 100% no-repeat;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .nav1 {
|
|
|
+ &:before {
|
|
|
+ border: px2rem(16) solid #f5a848;
|
|
|
+ border-color: #f5a848 transparent transparent transparent;
|
|
|
+ }
|
|
|
+ .bg-nav {
|
|
|
+ background: url(/src/img/nav1-bg.png) 0 0 / 100% 100% no-repeat;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .nav2 {
|
|
|
+ &:before {
|
|
|
+ border: px2rem(16) solid #1367fa;
|
|
|
+ border-color: #1367fa transparent transparent transparent;
|
|
|
+ }
|
|
|
+ .bg-nav {
|
|
|
+ background: url(/src/img/nav2-bg.png) 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .nav3 {
|
|
|
+ &:before {
|
|
|
+ border: px2rem(16) solid #16bf82;
|
|
|
+ border-color: #16bf82 transparent transparent transparent;
|
|
|
+ }
|
|
|
+ .bg-nav {
|
|
|
+ background: url(/src/img/nav3-bg.png) 0 0 / 100% no-repeat;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .nav4 {
|
|
|
+ &:before {
|
|
|
+ border: px2rem(16) solid #00bbd4;
|
|
|
+ border-color: #00bbd4 transparent transparent transparent;
|
|
|
+ }
|
|
|
+ .bg-nav {
|
|
|
+ background: url(/src/img/nav4-bg.png) 0 0 repeat;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .nav5 {
|
|
|
+ &:before {
|
|
|
+ border: px2rem(16) solid #6817f0;
|
|
|
+ border-color: #6817f0 transparent transparent transparent;
|
|
|
+ }
|
|
|
+ .bg-nav {
|
|
|
+ background: #6817f0;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-.zt-sidebar-tool{
|
|
|
- position: fixed;
|
|
|
- left: 50%;
|
|
|
- margin: px2rem(90) 0 0 px2rem(690);
|
|
|
- z-index: 10;
|
|
|
- width: px2rem(234);
|
|
|
- height: px2rem(708);
|
|
|
- background: url(../src/img/bg-sidebar_tool.png) 0 0 / 100% 100% no-repeat;
|
|
|
- animation: sidebaFloat 2s ease-in infinite alternate;
|
|
|
- &.is-scroll{
|
|
|
- margin-top: 0;
|
|
|
- top: px2rem(12);
|
|
|
- }
|
|
|
- ul{
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- width: 100%;
|
|
|
- text-align: center;
|
|
|
- line-height: px2rem(42);
|
|
|
- font-size: px2rem(15);
|
|
|
- font-weight: 700;
|
|
|
- a{
|
|
|
- display: block;
|
|
|
- color: #FFFFFF;
|
|
|
- &:hover{
|
|
|
- text-decoration: underline;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+.zt-sidebar-zt {
|
|
|
+ position: fixed;
|
|
|
+ left: 50%;
|
|
|
+ width: px2rem(186);
|
|
|
+ margin: px2rem(180) 0 0 px2rem(-900);
|
|
|
+ z-index: 10;
|
|
|
+ &.is-scroll {
|
|
|
+ margin-top: 0;
|
|
|
+ top: px2rem(240);
|
|
|
+ }
|
|
|
+ .sidebar-zt_hd {
|
|
|
+ font-size: px2rem(30);
|
|
|
+ font-family: titlefont;
|
|
|
+ color: #FFFFFF;
|
|
|
+ height: px2rem(111);
|
|
|
+ line-height: px2rem(159);
|
|
|
+ margin: 0 px2rem(-54) px2rem(-6) 0;
|
|
|
+ background: url(/src/img/icon-sidebar_zt.png) right 0 / auto 100% no-repeat;
|
|
|
+ }
|
|
|
+ .sidebar-zt_bd {
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ .section-item {
|
|
|
+ &.is-expend {
|
|
|
+ .section-item_hd {
|
|
|
+ @for $i from 1 through 3 {
|
|
|
+ &.hd-bg#{$i} {
|
|
|
+ background-image: url(/src/img/bg-sidebar_zt#{$i}_hover.png);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .section-item_hd {
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ display: block;
|
|
|
+ height: px2rem(54);
|
|
|
+ line-height: px2rem(54);
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-align: right;
|
|
|
+ font-size: px2rem(18);
|
|
|
+ padding-right: px2rem(54);
|
|
|
+ @for $i from 1 through 3 {
|
|
|
+ &.hd-bg#{$i} {
|
|
|
+ background: url(/src/img/bg-sidebar_zt#{$i}.png) 0 0 / 100% 100% no-repeat;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .section-item_bd {
|
|
|
+ background: #a71616;
|
|
|
+ margin: px2rem(-9) px2rem(9) 0;
|
|
|
+ padding: px2rem(18) 0;
|
|
|
+ line-height: px2rem(30);
|
|
|
+ font-size: 12px;
|
|
|
+ display: none;
|
|
|
+ a {
|
|
|
+ position: relative;
|
|
|
+ display: block;
|
|
|
+ color: #ff9090;
|
|
|
+ padding: 0 px2rem(9) 0 px2rem(27);
|
|
|
+ &:before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: px2rem(12);
|
|
|
+ margin-top: px2rem(-2);
|
|
|
+ width: px2rem(4);
|
|
|
+ height: px2rem(4);
|
|
|
+ background: #FFFFFF;
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ color: #FFFFFF;
|
|
|
+ &:before {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-.zt-pop-video{
|
|
|
- position: relative;
|
|
|
- width: px2rem(1200);
|
|
|
- height: px2rem(675);
|
|
|
- video{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
+.zt-sidebar-tool {
|
|
|
+ position: fixed;
|
|
|
+ left: 50%;
|
|
|
+ margin: px2rem(90) 0 0 px2rem(690);
|
|
|
+ z-index: 10;
|
|
|
+ width: px2rem(234);
|
|
|
+ height: px2rem(708);
|
|
|
+ background: url(../src/img/bg-sidebar_tool.png) 0 0 / 100% 100% no-repeat;
|
|
|
+ animation: sidebaFloat 2s ease-in infinite alternate;
|
|
|
+ &.is-scroll {
|
|
|
+ margin-top: 0;
|
|
|
+ top: px2rem(12);
|
|
|
+ }
|
|
|
+ ul {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ line-height: px2rem(42);
|
|
|
+ font-size: px2rem(15);
|
|
|
+ font-weight: 700;
|
|
|
+ a {
|
|
|
+ display: block;
|
|
|
+ color: #FFFFFF;
|
|
|
+ &:hover {
|
|
|
+ text-decoration: underline;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-.zt-pop-video_close{
|
|
|
- position: absolute;
|
|
|
- top: -1px;
|
|
|
- right: px2rem(-40);
|
|
|
- width: px2rem(40);
|
|
|
- height: px2rem(40);
|
|
|
- background: url(/src/img/icon-close.png) center/76% no-repeat;
|
|
|
- background-color: rgba(31, 31, 31, 0.6);
|
|
|
+.zt-pop-video {
|
|
|
+ position: relative;
|
|
|
+ width: px2rem(1200);
|
|
|
+ height: px2rem(675);
|
|
|
+ video {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-.zt-box{
|
|
|
- position: relative;
|
|
|
- margin-top: px2rem(88);
|
|
|
- &.ext-box{
|
|
|
- margin-top: 0;
|
|
|
- }
|
|
|
- .box-hd{
|
|
|
- position: absolute;
|
|
|
- top: px2rem(-40);
|
|
|
- left: px2rem(-16);
|
|
|
- z-index: 3;
|
|
|
- background: #ff6600;
|
|
|
- line-height: px2rem(66);
|
|
|
- height: px2rem(66);
|
|
|
- font-size: px2rem(30);
|
|
|
- font-weight: 700;
|
|
|
- color: #ffffff;
|
|
|
- padding: 0 px2rem(20);
|
|
|
- span{
|
|
|
- position: relative;
|
|
|
- z-index: 2;
|
|
|
- }
|
|
|
- &:before,&:after{
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- z-index: 1;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: #ff6600;
|
|
|
- }
|
|
|
- &:before{
|
|
|
- left: px2rem(-10);
|
|
|
- transform: skew(-7deg);
|
|
|
- }
|
|
|
- &:after{
|
|
|
- right: px2rem(-10);
|
|
|
- background: #ff6600;
|
|
|
- }
|
|
|
- }
|
|
|
- .box-bd{
|
|
|
- position: relative;
|
|
|
- }
|
|
|
- .box-bd_bgr{
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: px2rem(-10);
|
|
|
- z-index: 1;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- padding: px2rem(12) px2rem(12) px2rem(12) px2rem(8);
|
|
|
- border: px2rem(12) solid #FFFFFF;
|
|
|
- border-left: px2rem(8) solid #FFFFFF;
|
|
|
- }
|
|
|
- .box-bd_cont{
|
|
|
- position: relative;
|
|
|
- z-index: 2;
|
|
|
- padding: px2rem(40) px2rem(30);
|
|
|
- border: px2rem(12) solid #FFFFFF;
|
|
|
- border-right: 0;
|
|
|
- &:before{
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 60%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- p{
|
|
|
- position: relative;
|
|
|
- }
|
|
|
- }
|
|
|
+.zt-pop-video_close {
|
|
|
+ position: absolute;
|
|
|
+ top: -1px;
|
|
|
+ right: px2rem(-40);
|
|
|
+ width: px2rem(40);
|
|
|
+ height: px2rem(40);
|
|
|
+ background: url(/src/img/icon-close.png) center/76% no-repeat;
|
|
|
+ background-color: rgba(31, 31, 31, 0.6);
|
|
|
}
|
|
|
|
|
|
-.zt-list-goods{
|
|
|
- position: relative;
|
|
|
- z-index: 2;
|
|
|
- padding: px2rem(30) 0 px2rem(12) px2rem(42);
|
|
|
- margin: 0 px2rem(-100) 0 0;
|
|
|
- &.ext-store{
|
|
|
- padding: px2rem(57) 0 px2rem(12) px2rem(48);
|
|
|
- margin: 0 px2rem(-100) px2rem(-12) 0;
|
|
|
- li{
|
|
|
- width: px2rem(330);
|
|
|
- height: px2rem(210);
|
|
|
- margin: 0 px2rem(75) px2rem(57) 0;
|
|
|
- }
|
|
|
- .mask{
|
|
|
- background: rgba(0,8,37,0.7);
|
|
|
- }
|
|
|
- p{
|
|
|
- background: none;
|
|
|
- }
|
|
|
- }
|
|
|
- li{
|
|
|
- float: left;
|
|
|
- margin: 0 px2rem(18) px2rem(24) 0;
|
|
|
- position: relative;
|
|
|
- width: px2rem(207);
|
|
|
- border: px2rem(4) solid $commonColor;
|
|
|
- overflow: hidden;
|
|
|
- line-height: px2rem(36);
|
|
|
- color: #ffffff;
|
|
|
- font-size: px2rem(14);
|
|
|
- line-height: px2rem(30);
|
|
|
- cursor: pointer;
|
|
|
- &.item-uncommon{
|
|
|
- border-color: $uncommonColor;
|
|
|
- .icon-rarity{
|
|
|
- background: $uncommonColor;
|
|
|
- &:before{
|
|
|
- content: "罕见"
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- &.item-epic{
|
|
|
- border-color: $epicColor;
|
|
|
- .icon-rarity{
|
|
|
- background: $epicColor;
|
|
|
- &:before{
|
|
|
- content: "史诗"
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- &.item-legendary{
|
|
|
- border-color: $legendaryColor;
|
|
|
- .icon-rarity{
|
|
|
- background: $legendaryColor;
|
|
|
- &:before{
|
|
|
- content: "传奇"
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- &.item-rare{
|
|
|
- border-color: $rareColor;
|
|
|
- .icon-rarity{
|
|
|
- background: $rareColor;
|
|
|
- &:before{
|
|
|
- content: "稀有"
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- &:hover{
|
|
|
- .icon-play{
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .mask{
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- text-align: center;
|
|
|
- background: rgba(0,0,0,0.7)
|
|
|
- }
|
|
|
- p{
|
|
|
- background: #000825;
|
|
|
- }
|
|
|
- span{
|
|
|
- display: inline-block;
|
|
|
- padding-left: px2rem(27);
|
|
|
- background: url(/src/img/advanced/icon-gold.png) 0 center / px2rem(18) no-repeat;
|
|
|
- }
|
|
|
- .icon-rarity{
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: px2rem(-45);
|
|
|
- z-index: 2;
|
|
|
- width: px2rem(120);
|
|
|
- font-size: 12px;
|
|
|
- height: px2rem(36);
|
|
|
- line-height: px2rem(36);
|
|
|
- transform: rotate(-45deg);
|
|
|
- color: #FFFFFF;
|
|
|
- text-align: center;
|
|
|
- background: $commonColor;
|
|
|
- &:before{
|
|
|
- position: relative;
|
|
|
- z-index: 1;
|
|
|
- content: "普通"
|
|
|
- }
|
|
|
- }
|
|
|
- .icon-play{
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- margin: px2rem(-16) 0 0 px2rem(-33);
|
|
|
- width: px2rem(66);
|
|
|
- height: px2rem(33);
|
|
|
- transition: all .2s;
|
|
|
- background: url(/src/img/icon-play2.png) 0 / 100% no-repeat;
|
|
|
- }
|
|
|
+.zt-box {
|
|
|
+ position: relative;
|
|
|
+ margin-top: px2rem(88);
|
|
|
+ &.ext-box {
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+ .box-hd {
|
|
|
+ position: absolute;
|
|
|
+ top: px2rem(-40);
|
|
|
+ left: px2rem(-16);
|
|
|
+ z-index: 3;
|
|
|
+ background: #ff6600;
|
|
|
+ line-height: px2rem(66);
|
|
|
+ height: px2rem(66);
|
|
|
+ font-size: px2rem(30);
|
|
|
+ font-weight: 700;
|
|
|
+ color: #ffffff;
|
|
|
+ padding: 0 px2rem(20);
|
|
|
+ span {
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+ &:before, &:after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ z-index: 1;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: #ff6600;
|
|
|
+ }
|
|
|
+ &:before {
|
|
|
+ left: px2rem(-10);
|
|
|
+ transform: skew(-7deg);
|
|
|
+ }
|
|
|
+ &:after {
|
|
|
+ right: px2rem(-10);
|
|
|
+ background: #ff6600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-bd {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .box-bd_bgr {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: px2rem(-10);
|
|
|
+ z-index: 1;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: px2rem(12) px2rem(12) px2rem(12) px2rem(8);
|
|
|
+ border: px2rem(12) solid #FFFFFF;
|
|
|
+ border-left: px2rem(8) solid #FFFFFF;
|
|
|
+ }
|
|
|
+ .box-bd_cont {
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ padding: px2rem(40) px2rem(30);
|
|
|
+ border: px2rem(12) solid #FFFFFF;
|
|
|
+ border-right: 0;
|
|
|
+ &:before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 60%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-.box-tab{
|
|
|
- position: relative;
|
|
|
- text-align: center;
|
|
|
- &.ext-bullet{
|
|
|
- .box-tab_nav{
|
|
|
- td{
|
|
|
- color: #5b6177;
|
|
|
- text-align: left;
|
|
|
- padding: 0 px2rem(20);
|
|
|
- @include gradient-horizontal(#b1badd,#b7bfe1);
|
|
|
- &:after{
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- width: px2rem(60);
|
|
|
- height: px2rem(58);
|
|
|
- background: url(/src/img/require/icon-tab-nav.png) 0 / auto 100% no-repeat;
|
|
|
- }
|
|
|
- &.active{
|
|
|
- background: #5161a6;
|
|
|
- color: #FFFFFF;
|
|
|
- &:before{
|
|
|
- @include triangle-down(px2rem(10),#5161a6);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- &.ext-prop{
|
|
|
- .box-tab_nav{
|
|
|
- td{
|
|
|
- color: #4a4b35;
|
|
|
- padding: 0 px2rem(20);
|
|
|
- background: #eceeac;
|
|
|
- &.active{
|
|
|
- background: #5b5d2f;
|
|
|
- color: #FFFFFF;
|
|
|
- &:before{
|
|
|
- @include triangle-down(px2rem(10),#5b5d2f);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .box-tab_desc{
|
|
|
- color: #fdffdd;
|
|
|
- }
|
|
|
- }
|
|
|
- &.ext-arsenal{
|
|
|
- .box-tab_nav{
|
|
|
- td{
|
|
|
- background: #dbdda6;
|
|
|
- color: #797a55;
|
|
|
- &:after{
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: px2rem(12);
|
|
|
- width: px2rem(21);
|
|
|
- height: px2rem(6);
|
|
|
- background: url(/src/img/tool/icon-deco-gt.png) 0 0 / 100% 100% no-repeat;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .box-tab_nav{
|
|
|
- margin: px2rem(30) 0;
|
|
|
- width: 100%;
|
|
|
- table-layout: fixed;
|
|
|
- td{
|
|
|
- position: relative;
|
|
|
- flex: 1;
|
|
|
- background: #bdc5e6;
|
|
|
- color: #5b6177;
|
|
|
- font-size: px2rem(22);
|
|
|
- font-weight: 700;
|
|
|
- line-height: px2rem(58);
|
|
|
- border-right: 6px solid transparent;
|
|
|
- cursor: pointer;
|
|
|
- &.active{
|
|
|
- background: #fff100;
|
|
|
- color: #716c14;
|
|
|
- &:before{
|
|
|
- @include triangle-down(px2rem(10),#fff100);
|
|
|
- }
|
|
|
- }
|
|
|
- &:before{
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- bottom: px2rem(-20);
|
|
|
- left: px2rem(16);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .box-tab_desc{
|
|
|
- margin: 0 auto;
|
|
|
- width: px2rem(826);
|
|
|
- line-height: px2rem(36);
|
|
|
- font-size: px2rem(20);
|
|
|
- font-weight: 700;
|
|
|
- color: #373d56;
|
|
|
- }
|
|
|
+.zt-list-goods {
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ padding: px2rem(30) 0 px2rem(12) px2rem(42);
|
|
|
+ margin: 0 px2rem(-100) 0 0;
|
|
|
+ &.ext-store {
|
|
|
+ padding: px2rem(57) 0 px2rem(12) px2rem(48);
|
|
|
+ margin: 0 px2rem(-100) px2rem(-12) 0;
|
|
|
+ li {
|
|
|
+ width: px2rem(330);
|
|
|
+ height: px2rem(210);
|
|
|
+ margin: 0 px2rem(75) px2rem(57) 0;
|
|
|
+ }
|
|
|
+ .mask {
|
|
|
+ background: rgba(0, 8, 37, 0.7);
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ background: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ li {
|
|
|
+ float: left;
|
|
|
+ margin: 0 px2rem(18) px2rem(24) 0;
|
|
|
+ position: relative;
|
|
|
+ width: px2rem(207);
|
|
|
+ border: px2rem(4) solid $commonColor;
|
|
|
+ overflow: hidden;
|
|
|
+ line-height: px2rem(36);
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: px2rem(14);
|
|
|
+ line-height: px2rem(30);
|
|
|
+ cursor: pointer;
|
|
|
+ &.item-uncommon {
|
|
|
+ border-color: $uncommonColor;
|
|
|
+ .icon-rarity {
|
|
|
+ background: $uncommonColor;
|
|
|
+ &:before {
|
|
|
+ content: "罕见"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.item-epic {
|
|
|
+ border-color: $epicColor;
|
|
|
+ .icon-rarity {
|
|
|
+ background: $epicColor;
|
|
|
+ &:before {
|
|
|
+ content: "史诗"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.item-legendary {
|
|
|
+ border-color: $legendaryColor;
|
|
|
+ .icon-rarity {
|
|
|
+ background: $legendaryColor;
|
|
|
+ &:before {
|
|
|
+ content: "传奇"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.item-rare {
|
|
|
+ border-color: $rareColor;
|
|
|
+ .icon-rarity {
|
|
|
+ background: $rareColor;
|
|
|
+ &:before {
|
|
|
+ content: "稀有"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ .icon-play {
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .mask {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ text-align: center;
|
|
|
+ background: rgba(0, 0, 0, 0.7)
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ background: #000825;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ padding-left: px2rem(27);
|
|
|
+ background: url(/src/img/advanced/icon-gold.png) 0 center / px2rem(18) no-repeat;
|
|
|
+ }
|
|
|
+ .icon-rarity {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: px2rem(-45);
|
|
|
+ z-index: 2;
|
|
|
+ width: px2rem(120);
|
|
|
+ font-size: 12px;
|
|
|
+ height: px2rem(36);
|
|
|
+ line-height: px2rem(36);
|
|
|
+ transform: rotate(-45deg);
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-align: center;
|
|
|
+ background: $commonColor;
|
|
|
+ &:before {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ content: "普通"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .icon-play {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ margin: px2rem(-16) 0 0 px2rem(-33);
|
|
|
+ width: px2rem(66);
|
|
|
+ height: px2rem(33);
|
|
|
+ transition: all .2s;
|
|
|
+ background: url(/src/img/icon-play2.png) 0 / 100% no-repeat;
|
|
|
+ }
|
|
|
}
|
|
|
-.box-tab-lr{
|
|
|
- position: relative;
|
|
|
- padding: px2rem(42) 0 px2rem(63);
|
|
|
- margin: 0 px2rem(57);
|
|
|
- &.ext-advanced{
|
|
|
- .box-tab_nav{
|
|
|
- li{
|
|
|
- background: #6d869a;
|
|
|
- &.active{
|
|
|
- background: #7894aa;
|
|
|
- a{
|
|
|
- color: #ffffff;
|
|
|
- &:before{
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- left: px2rem(33);
|
|
|
- bottom: 0;
|
|
|
- width: px2rem(21);
|
|
|
- height: px2rem(12);
|
|
|
- background: url(/src/img/advanced/icon-deco_wb.jpg) 0 0 / 100% no-repeat;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- &:before{
|
|
|
- background: #6d869a;
|
|
|
- }
|
|
|
- }
|
|
|
- a{
|
|
|
- color: #a4c4de;
|
|
|
- }
|
|
|
- }
|
|
|
- .cont-skew_top,.cont-skew_bottom{
|
|
|
- background: #7894aa;
|
|
|
- }
|
|
|
- }
|
|
|
- .box-tab_nav{
|
|
|
- position: absolute;
|
|
|
- z-index: 3;
|
|
|
- line-height: px2rem(56);
|
|
|
- li{
|
|
|
- position: relative;
|
|
|
- width: px2rem(220);
|
|
|
- background: #eba135;
|
|
|
- margin-bottom: px2rem(18);
|
|
|
- box-sizing: content-box;
|
|
|
- &:before{
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- top: px2rem(3);
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: #eba135;
|
|
|
- transform: skew(0, -1deg);
|
|
|
- }
|
|
|
- &.active{
|
|
|
- background: #ffa016;
|
|
|
- border: px2rem(9) solid #ffffff;
|
|
|
- border-right: 0;
|
|
|
- padding-right: px2rem(15);
|
|
|
- &:before{
|
|
|
- display: none;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- a{
|
|
|
- position: relative;
|
|
|
- display: block;
|
|
|
- color: #ffe7c4;
|
|
|
- font-size: px2rem(20);
|
|
|
- font-weight: 700;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
- .box-tab_cont{
|
|
|
- position: relative;
|
|
|
- z-index: 2;
|
|
|
- width: px2rem(840);
|
|
|
- }
|
|
|
- .box-tab_panel{
|
|
|
- position: relative;
|
|
|
- }
|
|
|
- .panel-cont{
|
|
|
- position: relative;
|
|
|
- z-index: 2;
|
|
|
- @include clearfix();
|
|
|
- padding: px2rem(40) px2rem(24) 0;
|
|
|
- }
|
|
|
- .cont-skew_top,.cont-skew_bottom{
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 60%;
|
|
|
- padding: px2rem(9);
|
|
|
- background: #ffa016;
|
|
|
- border: px2rem(9) solid #FFFFFF;
|
|
|
- &:before{
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- }
|
|
|
- }
|
|
|
- .cont-skew_top{
|
|
|
- top: px2rem(-7);
|
|
|
- border-bottom: 0;
|
|
|
- transform: skew(0,-1deg);
|
|
|
- &:before{
|
|
|
- top: -1px;
|
|
|
- left: 50%;
|
|
|
- width: px2rem(19);
|
|
|
- height: px2rem(12);
|
|
|
- background: url(/src/img/require/icon-deco_wt.png) 0 0 / 100% no-repeat;
|
|
|
- }
|
|
|
- }
|
|
|
- .cont-skew_bottom{
|
|
|
- bottom: px2rem(-20);
|
|
|
- border-top: 0;
|
|
|
- transform: skew(0,1deg);
|
|
|
- &:before{
|
|
|
- bottom: 0;
|
|
|
- right: px2rem(80);
|
|
|
- width: px2rem(29);
|
|
|
- height: px2rem(6);
|
|
|
- background: url(/src/img/require/icon-deco_wb.png) 0 0 / 100% no-repeat;
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
+.box-tab {
|
|
|
+ position: relative;
|
|
|
+ text-align: center;
|
|
|
+ &.ext-bullet {
|
|
|
+ .box-tab_nav {
|
|
|
+ td {
|
|
|
+ color: #5b6177;
|
|
|
+ text-align: left;
|
|
|
+ padding: 0 px2rem(20);
|
|
|
+ @include gradient-horizontal(#b1badd, #b7bfe1);
|
|
|
+ &:after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ width: px2rem(60);
|
|
|
+ height: px2rem(58);
|
|
|
+ background: url(/src/img/require/icon-tab-nav.png) 0 / auto 100% no-repeat;
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ background: #5161a6;
|
|
|
+ color: #FFFFFF;
|
|
|
+ &:before {
|
|
|
+ @include triangle-down(px2rem(10), #5161a6);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.ext-prop {
|
|
|
+ .box-tab_nav {
|
|
|
+ td {
|
|
|
+ color: #4a4b35;
|
|
|
+ padding: 0 px2rem(20);
|
|
|
+ background: #eceeac;
|
|
|
+ &.active {
|
|
|
+ background: #5b5d2f;
|
|
|
+ color: #FFFFFF;
|
|
|
+ &:before {
|
|
|
+ @include triangle-down(px2rem(10), #5b5d2f);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-tab_desc {
|
|
|
+ color: #fdffdd;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.ext-arsenal {
|
|
|
+ .box-tab_nav {
|
|
|
+ td {
|
|
|
+ background: #dbdda6;
|
|
|
+ color: #797a55;
|
|
|
+ &:after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: px2rem(12);
|
|
|
+ width: px2rem(21);
|
|
|
+ height: px2rem(6);
|
|
|
+ background: url(/src/img/tool/icon-deco-gt.png) 0 0 / 100% 100% no-repeat;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-tab_nav {
|
|
|
+ margin: px2rem(30) 0;
|
|
|
+ width: 100%;
|
|
|
+ table-layout: fixed;
|
|
|
+ td {
|
|
|
+ position: relative;
|
|
|
+ flex: 1;
|
|
|
+ background: #bdc5e6;
|
|
|
+ color: #5b6177;
|
|
|
+ font-size: px2rem(22);
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: px2rem(58);
|
|
|
+ border-right: 6px solid transparent;
|
|
|
+ cursor: pointer;
|
|
|
+ &.active {
|
|
|
+ background: #fff100;
|
|
|
+ color: #716c14;
|
|
|
+ &:before {
|
|
|
+ @include triangle-down(px2rem(10), #fff100);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ bottom: px2rem(-20);
|
|
|
+ left: px2rem(16);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-tab_desc {
|
|
|
+ margin: 0 auto;
|
|
|
+ width: px2rem(826);
|
|
|
+ line-height: px2rem(36);
|
|
|
+ font-size: px2rem(20);
|
|
|
+ font-weight: 700;
|
|
|
+ color: #373d56;
|
|
|
+ }
|
|
|
}
|
|
|
-.box-tab-award{
|
|
|
- position: relative;
|
|
|
- margin: 0 px2rem(30);
|
|
|
- .box-tab_nav{
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- table-layout: fixed;
|
|
|
- margin-top: px2rem(30);
|
|
|
- td{
|
|
|
- position: relative;
|
|
|
- z-index: 2;
|
|
|
- font-size: px2rem(21);
|
|
|
- font-weight: 700;
|
|
|
- line-height: px2rem(48);
|
|
|
- text-align: center;
|
|
|
- cursor: pointer;
|
|
|
- transform: skew(0,-1deg);
|
|
|
- background: #8597da;
|
|
|
- border-left: 6px solid transparent;
|
|
|
- &.active{
|
|
|
- z-index: 3;
|
|
|
- transform: skew(0,1deg);
|
|
|
- background: #92a3e1;
|
|
|
- border: px2rem(9) solid #FFFFFF;
|
|
|
- &:before{
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- height: 150%;
|
|
|
- background: #92a3e1;
|
|
|
- }
|
|
|
- a{
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- a{
|
|
|
- position: relative;
|
|
|
- display: block;
|
|
|
- color: #4e5985;
|
|
|
- }
|
|
|
- }
|
|
|
- .box-tab_cont{
|
|
|
- position: relative;
|
|
|
- z-index: 2;
|
|
|
- background: #92a3e1;
|
|
|
- border: px2rem(9) solid #FFFFFF;
|
|
|
- padding: px2rem(30);
|
|
|
- margin-top: px2rem(-9);
|
|
|
- }
|
|
|
- .award-wrap{
|
|
|
- line-height: px2rem(57);
|
|
|
- margin-top: px2rem(-20);
|
|
|
- font-size: px2rem(16);
|
|
|
- }
|
|
|
- .award-cover{
|
|
|
- width: px2rem(444);
|
|
|
- }
|
|
|
- .award-table{
|
|
|
- width: px2rem(522);
|
|
|
- h3{
|
|
|
- font-size: px2rem(18);
|
|
|
- font-weight: 700;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- table{
|
|
|
- width: 100%;
|
|
|
- line-height: px2rem(30);
|
|
|
- font-size: px2rem(14);
|
|
|
- table-layout: fixed;
|
|
|
- td{
|
|
|
- padding: 0 px2rem(21);
|
|
|
- &:nth-child(2){
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- &:nth-child(3){
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- thead{
|
|
|
- tr{
|
|
|
- font-weight: 700;
|
|
|
- background: #7384c2;
|
|
|
- }
|
|
|
- }
|
|
|
- tbody{
|
|
|
- tr{
|
|
|
- border-top: 1px solid #92a3e1;
|
|
|
- background: #7c8dce;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
+.box-tab-lr {
|
|
|
+ position: relative;
|
|
|
+ padding: px2rem(42) 0 px2rem(63);
|
|
|
+ margin: 0 px2rem(57);
|
|
|
+ &.ext-advanced {
|
|
|
+ .box-tab_nav {
|
|
|
+ li {
|
|
|
+ background: #6d869a;
|
|
|
+ &.active {
|
|
|
+ background: #7894aa;
|
|
|
+ a {
|
|
|
+ color: #ffffff;
|
|
|
+ &:before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ left: px2rem(33);
|
|
|
+ bottom: 0;
|
|
|
+ width: px2rem(21);
|
|
|
+ height: px2rem(12);
|
|
|
+ background: url(/src/img/advanced/icon-deco_wb.jpg) 0 0 / 100% no-repeat;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:before {
|
|
|
+ background: #6d869a;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ color: #a4c4de;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cont-skew_top, .cont-skew_bottom {
|
|
|
+ background: #7894aa;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-tab_nav {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 3;
|
|
|
+ line-height: px2rem(56);
|
|
|
+ li {
|
|
|
+ position: relative;
|
|
|
+ width: px2rem(220);
|
|
|
+ background: #eba135;
|
|
|
+ margin-bottom: px2rem(18);
|
|
|
+ box-sizing: content-box;
|
|
|
+ &:before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: px2rem(3);
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: #eba135;
|
|
|
+ transform: skew(0, -1deg);
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ background: #ffa016;
|
|
|
+ border: px2rem(9) solid #ffffff;
|
|
|
+ border-right: 0;
|
|
|
+ padding-right: px2rem(15);
|
|
|
+ &:before {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ position: relative;
|
|
|
+ display: block;
|
|
|
+ color: #ffe7c4;
|
|
|
+ font-size: px2rem(20);
|
|
|
+ font-weight: 700;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-tab_cont {
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ width: px2rem(840);
|
|
|
+ }
|
|
|
+ .box-tab_panel {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .panel-cont {
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ @include clearfix();
|
|
|
+ padding: px2rem(40) px2rem(24) 0;
|
|
|
+ }
|
|
|
+ .cont-skew_top, .cont-skew_bottom {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 60%;
|
|
|
+ padding: px2rem(9);
|
|
|
+ background: #ffa016;
|
|
|
+ border: px2rem(9) solid #FFFFFF;
|
|
|
+ &:before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cont-skew_top {
|
|
|
+ top: px2rem(-7);
|
|
|
+ border-bottom: 0;
|
|
|
+ transform: skew(0, -1deg);
|
|
|
+ &:before {
|
|
|
+ top: -1px;
|
|
|
+ left: 50%;
|
|
|
+ width: px2rem(19);
|
|
|
+ height: px2rem(12);
|
|
|
+ background: url(/src/img/require/icon-deco_wt.png) 0 0 / 100% no-repeat;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cont-skew_bottom {
|
|
|
+ bottom: px2rem(-20);
|
|
|
+ border-top: 0;
|
|
|
+ transform: skew(0, 1deg);
|
|
|
+ &:before {
|
|
|
+ bottom: 0;
|
|
|
+ right: px2rem(80);
|
|
|
+ width: px2rem(29);
|
|
|
+ height: px2rem(6);
|
|
|
+ background: url(/src/img/require/icon-deco_wb.png) 0 0 / 100% no-repeat;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-.zt-link-more{
|
|
|
- position: relative;
|
|
|
- display: block;
|
|
|
- width: px2rem(309);
|
|
|
- height: px2rem(99);
|
|
|
- line-height: px2rem(108);
|
|
|
- color: #716c14;
|
|
|
- font-size: px2rem(24);
|
|
|
- font-family: titlefont;
|
|
|
- text-align: center;
|
|
|
- margin: px2rem(42) auto 0;
|
|
|
- background: url(/src/img/bg-more.png) 0 0 / 100% no-repeat;
|
|
|
- &:hover{
|
|
|
- background: url(/src/img/bg-more_hover.png) 0 0 / 100% no-repeat;
|
|
|
- }
|
|
|
- &.ext-about{
|
|
|
- width: px2rem(432);
|
|
|
- height: px2rem(138);
|
|
|
- line-height: px2rem(150);
|
|
|
- color: #865813;
|
|
|
- font-size: px2rem(48);
|
|
|
- background: url(/src/img/bg-more_about.png) 0 0 / 100% no-repeat;
|
|
|
- &:hover{
|
|
|
- opacity: 0.8;
|
|
|
- }
|
|
|
- }
|
|
|
+.box-tab-award {
|
|
|
+ position: relative;
|
|
|
+ margin: 0 px2rem(30);
|
|
|
+ .box-tab_nav {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ table-layout: fixed;
|
|
|
+ margin-top: px2rem(30);
|
|
|
+ td {
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ font-size: px2rem(21);
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: px2rem(48);
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ transform: skew(0, -1deg);
|
|
|
+ background: #8597da;
|
|
|
+ border-left: 6px solid transparent;
|
|
|
+ &.active {
|
|
|
+ z-index: 3;
|
|
|
+ transform: skew(0, 1deg);
|
|
|
+ background: #92a3e1;
|
|
|
+ border: px2rem(9) solid #FFFFFF;
|
|
|
+ &:before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 150%;
|
|
|
+ background: #92a3e1;
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ position: relative;
|
|
|
+ display: block;
|
|
|
+ color: #4e5985;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-tab_cont {
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ background: #92a3e1;
|
|
|
+ border: px2rem(9) solid #FFFFFF;
|
|
|
+ padding: px2rem(30);
|
|
|
+ margin-top: px2rem(-9);
|
|
|
+ }
|
|
|
+ .award-wrap {
|
|
|
+ line-height: px2rem(57);
|
|
|
+ margin-top: px2rem(-20);
|
|
|
+ font-size: px2rem(16);
|
|
|
+ }
|
|
|
+ .award-cover {
|
|
|
+ width: px2rem(444);
|
|
|
+ }
|
|
|
+ .award-table {
|
|
|
+ width: px2rem(522);
|
|
|
+ h3 {
|
|
|
+ font-size: px2rem(18);
|
|
|
+ font-weight: 700;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ table {
|
|
|
+ width: 100%;
|
|
|
+ line-height: px2rem(30);
|
|
|
+ font-size: px2rem(14);
|
|
|
+ table-layout: fixed;
|
|
|
+ td {
|
|
|
+ padding: 0 px2rem(21);
|
|
|
+ &:nth-child(2) {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ &:nth-child(3) {
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ thead {
|
|
|
+ tr {
|
|
|
+ font-weight: 700;
|
|
|
+ background: #7384c2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ tbody {
|
|
|
+ tr {
|
|
|
+ border-top: 1px solid #92a3e1;
|
|
|
+ background: #7c8dce;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-#pageNum {
|
|
|
- text-align: center;
|
|
|
- font-size: 14px;
|
|
|
- padding-bottom: 15px;
|
|
|
- padding-top: 20px;
|
|
|
- span{
|
|
|
- position: relative;
|
|
|
- display: inline-block;
|
|
|
- padding: 4px 9px;
|
|
|
- margin: 0 3px;
|
|
|
- cursor: pointer;
|
|
|
- &.current{
|
|
|
- cursor: not-allowed;
|
|
|
- &:before,&:after{
|
|
|
- background-color: #80a6c4;
|
|
|
- }
|
|
|
- }
|
|
|
- &:before,&:after{
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- top: -2px;
|
|
|
- width: 70%;
|
|
|
- height: 100%;
|
|
|
- background-color: #567186;
|
|
|
- border: 2px solid #FFFFFF;
|
|
|
- }
|
|
|
- &:before{
|
|
|
- left: 0;
|
|
|
- border-right: 0;
|
|
|
- transform: skewX(3deg);
|
|
|
- }
|
|
|
- &:after{
|
|
|
- right: 0;
|
|
|
- border-left: 0;
|
|
|
- transform: skewX(-4deg);
|
|
|
- }
|
|
|
- &:hover {
|
|
|
- &:before,&:after{
|
|
|
- background-color: #80a6c4;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- a {
|
|
|
- position: relative;
|
|
|
- z-index: 2;
|
|
|
- text-decoration: none;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
+.zt-link-more {
|
|
|
+ position: relative;
|
|
|
+ display: block;
|
|
|
+ width: px2rem(309);
|
|
|
+ height: px2rem(99);
|
|
|
+ line-height: px2rem(108);
|
|
|
+ color: #716c14;
|
|
|
+ font-size: px2rem(24);
|
|
|
+ font-family: titlefont;
|
|
|
+ text-align: center;
|
|
|
+ margin: px2rem(42) auto 0;
|
|
|
+ background: url(/src/img/bg-more.png) 0 0 / 100% no-repeat;
|
|
|
+ &:hover {
|
|
|
+ background: url(/src/img/bg-more_hover.png) 0 0 / 100% no-repeat;
|
|
|
+ }
|
|
|
+ &.ext-about {
|
|
|
+ width: px2rem(432);
|
|
|
+ height: px2rem(138);
|
|
|
+ line-height: px2rem(150);
|
|
|
+ color: #865813;
|
|
|
+ font-size: px2rem(48);
|
|
|
+ background: url(/src/img/bg-more_about.png) 0 0 / 100% no-repeat;
|
|
|
+ &:hover {
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
+#pageNum {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ padding-bottom: 15px;
|
|
|
+ padding-top: 20px;
|
|
|
+ span {
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ padding: 4px 9px;
|
|
|
+ margin: 0 3px;
|
|
|
+ cursor: pointer;
|
|
|
+ &.current {
|
|
|
+ cursor: not-allowed;
|
|
|
+ &:before, &:after {
|
|
|
+ background-color: #80a6c4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:before, &:after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: -2px;
|
|
|
+ width: 70%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #567186;
|
|
|
+ border: 2px solid #FFFFFF;
|
|
|
+ }
|
|
|
+ &:before {
|
|
|
+ left: 0;
|
|
|
+ border-right: 0;
|
|
|
+ transform: skewX(3deg);
|
|
|
+ }
|
|
|
+ &:after {
|
|
|
+ right: 0;
|
|
|
+ border-left: 0;
|
|
|
+ transform: skewX(-4deg);
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ &:before, &:after {
|
|
|
+ background-color: #80a6c4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ text-decoration: none;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
//了解游戏
|
|
|
-.page-about{
|
|
|
- .ab-section{
|
|
|
- .zt-inner{
|
|
|
- @include clearfix();
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- .section-image{
|
|
|
- float: left;
|
|
|
- position: relative;
|
|
|
- width: px2rem(600);
|
|
|
- cursor: pointer;
|
|
|
- &:hover{
|
|
|
- .icon-play{
|
|
|
- transform: rotate(180deg);
|
|
|
- opacity: 0.8;
|
|
|
- }
|
|
|
- }
|
|
|
- &.ext-video{
|
|
|
- width: px2rem(394);
|
|
|
- }
|
|
|
- img{
|
|
|
- display: block;
|
|
|
- width: auto;
|
|
|
- max-width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- .icon-play{
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- margin: px2rem(-50) 0 0 px2rem(-58);
|
|
|
- width: px2rem(116);
|
|
|
- height: px2rem(100);
|
|
|
- transition: all .2s;
|
|
|
- background: url(/src/img/icon-play.png) center / 100% no-repeat;
|
|
|
- }
|
|
|
- }
|
|
|
- .section-cont{
|
|
|
- float: left;
|
|
|
- width: px2rem(545);
|
|
|
- margin: 0 px2rem(12);
|
|
|
- h2{
|
|
|
- font-size: px2rem(50);
|
|
|
- font-family: titleFont;
|
|
|
- }
|
|
|
- p{
|
|
|
- font-size: px2rem(20);
|
|
|
- line-height: px2rem(40);
|
|
|
- margin-top: px2rem(26);
|
|
|
- }
|
|
|
- .cont-opr{
|
|
|
- width: px2rem(474);
|
|
|
- height: px2rem(265);
|
|
|
- overflow: hidden;
|
|
|
- margin-top: px2rem(30);
|
|
|
- h3{
|
|
|
- font-size: px2rem(30);
|
|
|
- height: px2rem(47);
|
|
|
- color: #9c562c;
|
|
|
- line-height: px2rem(56);
|
|
|
- font-weight: 700;
|
|
|
- padding-left: px2rem(58);
|
|
|
- margin: px2rem(26) 0 0 px2rem(20);
|
|
|
- background: url(/src/img/about/icon-light.png) 0 0 /auto 100% no-repeat;
|
|
|
- }
|
|
|
- ul{
|
|
|
- font-size: px2rem(16);
|
|
|
- line-height: px2rem(30);
|
|
|
- color: #a6804c;
|
|
|
- padding: 0 px2rem(20) 0 px2rem(74);
|
|
|
- }
|
|
|
- li{
|
|
|
- margin-top: px2rem(10);
|
|
|
- }
|
|
|
- label{
|
|
|
- font-weight: 700;
|
|
|
- color: #7f633e;
|
|
|
- }
|
|
|
- i{
|
|
|
- display: inline-block;
|
|
|
- font-size: px2rem(12);
|
|
|
- font-weight: normal;
|
|
|
- color: #ffcb84;
|
|
|
- background: #FFFFFF;
|
|
|
- vertical-align: middle;
|
|
|
- height: px2rem(20);
|
|
|
- line-height: px2rem(20);
|
|
|
- min-width: px2rem(20);
|
|
|
- text-align: center;
|
|
|
- margin-right: px2rem(12);
|
|
|
- border-radius: 2px;
|
|
|
- &.icon-mouse{
|
|
|
- height: px2rem(28);
|
|
|
- background: url(/src/img/about/icon-mouse.png) 0 0 / auto 100% no-repeat;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .cont-opr_yellow{
|
|
|
- background: url(/src/img/about/opr-yellow.png) no-repeat;
|
|
|
- }
|
|
|
- .cont-opr_yellowsm{
|
|
|
- height: px2rem(165);
|
|
|
- background: url(/src/img/about/opr-yellow-sm.png) no-repeat;
|
|
|
- }
|
|
|
- .cont-opr_graysm{
|
|
|
- height: px2rem(165);
|
|
|
- background: url(/src/img/about/opr-gray-sm.png) no-repeat;
|
|
|
- h3{
|
|
|
- color: #ffffff;
|
|
|
- background: url(/src/img/about/icon-light2.png) 0 0 /auto 100% no-repeat;
|
|
|
- }
|
|
|
- ul{
|
|
|
- color: #ffffff;
|
|
|
- label{
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- i{
|
|
|
- color: #595f70;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+.page-about {
|
|
|
+ .ab-section {
|
|
|
+ .zt-inner {
|
|
|
+ @include clearfix();
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .section-image {
|
|
|
+ float: left;
|
|
|
+ position: relative;
|
|
|
+ width: px2rem(600);
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover {
|
|
|
+ .icon-play {
|
|
|
+ transform: rotate(180deg);
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.ext-video {
|
|
|
+ width: px2rem(394);
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ width: auto;
|
|
|
+ max-width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .icon-play {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ margin: px2rem(-50) 0 0 px2rem(-58);
|
|
|
+ width: px2rem(116);
|
|
|
+ height: px2rem(100);
|
|
|
+ transition: all .2s;
|
|
|
+ background: url(/src/img/icon-play.png) center / 100% no-repeat;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .section-cont {
|
|
|
+ float: left;
|
|
|
+ width: px2rem(545);
|
|
|
+ margin: 0 px2rem(12);
|
|
|
+ h2 {
|
|
|
+ font-size: px2rem(50);
|
|
|
+ font-family: titleFont;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ font-size: px2rem(20);
|
|
|
+ line-height: px2rem(40);
|
|
|
+ margin-top: px2rem(26);
|
|
|
+ }
|
|
|
+ .cont-opr {
|
|
|
+ width: px2rem(474);
|
|
|
+ height: px2rem(265);
|
|
|
+ overflow: hidden;
|
|
|
+ margin-top: px2rem(30);
|
|
|
+ h3 {
|
|
|
+ font-size: px2rem(30);
|
|
|
+ height: px2rem(47);
|
|
|
+ color: #9c562c;
|
|
|
+ line-height: px2rem(56);
|
|
|
+ font-weight: 700;
|
|
|
+ padding-left: px2rem(58);
|
|
|
+ margin: px2rem(26) 0 0 px2rem(20);
|
|
|
+ background: url(/src/img/about/icon-light.png) 0 0 /auto 100% no-repeat;
|
|
|
+ }
|
|
|
+ ul {
|
|
|
+ font-size: px2rem(16);
|
|
|
+ line-height: px2rem(30);
|
|
|
+ color: #a6804c;
|
|
|
+ padding: 0 px2rem(20) 0 px2rem(74);
|
|
|
+ }
|
|
|
+ li {
|
|
|
+ margin-top: px2rem(10);
|
|
|
+ }
|
|
|
+ label {
|
|
|
+ font-weight: 700;
|
|
|
+ color: #7f633e;
|
|
|
+ }
|
|
|
+ i {
|
|
|
+ display: inline-block;
|
|
|
+ font-size: px2rem(12);
|
|
|
+ font-weight: normal;
|
|
|
+ color: #ffcb84;
|
|
|
+ background: #FFFFFF;
|
|
|
+ vertical-align: middle;
|
|
|
+ height: px2rem(20);
|
|
|
+ line-height: px2rem(20);
|
|
|
+ min-width: px2rem(20);
|
|
|
+ text-align: center;
|
|
|
+ margin-right: px2rem(12);
|
|
|
+ border-radius: 2px;
|
|
|
+ &.icon-mouse {
|
|
|
+ height: px2rem(28);
|
|
|
+ background: url(/src/img/about/icon-mouse.png) 0 0 / auto 100% no-repeat;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cont-opr_yellow {
|
|
|
+ background: url(/src/img/about/opr-yellow.png) no-repeat;
|
|
|
+ }
|
|
|
+ .cont-opr_yellowsm {
|
|
|
+ height: px2rem(165);
|
|
|
+ background: url(/src/img/about/opr-yellow-sm.png) no-repeat;
|
|
|
+ }
|
|
|
+ .cont-opr_graysm {
|
|
|
+ height: px2rem(165);
|
|
|
+ background: url(/src/img/about/opr-gray-sm.png) no-repeat;
|
|
|
+ h3 {
|
|
|
+ color: #ffffff;
|
|
|
+ background: url(/src/img/about/icon-light2.png) 0 0 /auto 100% no-repeat;
|
|
|
+ }
|
|
|
+ ul {
|
|
|
+ color: #ffffff;
|
|
|
+ label {
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ i {
|
|
|
+ color: #595f70;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .ab-section1{
|
|
|
- color: #3a3e4d;
|
|
|
- height: px2rem(850);
|
|
|
- background: url(/src/img/about/bg1.jpg) center 0 / 100% auto no-repeat #a3afe3;
|
|
|
- .section-cont{
|
|
|
- margin: px2rem(184) 0 0 px2rem(720);
|
|
|
- }
|
|
|
- }
|
|
|
+ .ab-section1 {
|
|
|
+ color: #3a3e4d;
|
|
|
+ height: px2rem(850);
|
|
|
+ background: url(/src/img/about/bg1.jpg) center 0 / 100% auto no-repeat #a3afe3;
|
|
|
+ .section-cont {
|
|
|
+ margin: px2rem(184) 0 0 px2rem(720);
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .ab-section2{
|
|
|
- color: #6e330f;
|
|
|
- height: px2rem(850);
|
|
|
- background: url(/src/img/about/bg2.jpg) center 0/ 100% auto no-repeat #f1aa4c;
|
|
|
- .section-cont{
|
|
|
- margin-top: px2rem(150);
|
|
|
- width: px2rem(480);
|
|
|
- .cont-opr{
|
|
|
- margin-top: px2rem(60);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .ab-section2 {
|
|
|
+ color: #6e330f;
|
|
|
+ height: px2rem(850);
|
|
|
+ background: url(/src/img/about/bg2.jpg) center 0/ 100% auto no-repeat #f1aa4c;
|
|
|
+ .section-cont {
|
|
|
+ margin-top: px2rem(150);
|
|
|
+ width: px2rem(480);
|
|
|
+ .cont-opr {
|
|
|
+ margin-top: px2rem(60);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .ab-section3{
|
|
|
- color: #3a3e4d;
|
|
|
- height: px2rem(850);
|
|
|
- background: url(/src/img/about/bg3.jpg) center 0/ 100% auto no-repeat #f1eff9;
|
|
|
- .section-image{
|
|
|
- margin: px2rem(340) px2rem(70) 0 px2rem(196);
|
|
|
- }
|
|
|
- .section-cont{
|
|
|
- margin-top: px2rem(300);
|
|
|
- }
|
|
|
- }
|
|
|
+ .ab-section3 {
|
|
|
+ color: #3a3e4d;
|
|
|
+ height: px2rem(850);
|
|
|
+ background: url(/src/img/about/bg3.jpg) center 0/ 100% auto no-repeat #f1eff9;
|
|
|
+ .section-image {
|
|
|
+ margin: px2rem(340) px2rem(70) 0 px2rem(196);
|
|
|
+ }
|
|
|
+ .section-cont {
|
|
|
+ margin-top: px2rem(300);
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .ab-section4{
|
|
|
- color: #3a3e4d;
|
|
|
- height: px2rem(850);
|
|
|
- background: url(/src/img/about/bg4.jpg) center 0/ 100% auto no-repeat #a3afe3;
|
|
|
- .section-image{
|
|
|
- margin: px2rem(334) 0 0 px2rem(20);
|
|
|
- }
|
|
|
- .section-cont{
|
|
|
- margin-top: px2rem(288);
|
|
|
- }
|
|
|
- }
|
|
|
+ .ab-section4 {
|
|
|
+ color: #3a3e4d;
|
|
|
+ height: px2rem(850);
|
|
|
+ background: url(/src/img/about/bg4.jpg) center 0/ 100% auto no-repeat #a3afe3;
|
|
|
+ .section-image {
|
|
|
+ margin: px2rem(334) 0 0 px2rem(20);
|
|
|
+ }
|
|
|
+ .section-cont {
|
|
|
+ margin-top: px2rem(288);
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .ab-section5{
|
|
|
- color: #cbdcff;
|
|
|
- height: px2rem(850);
|
|
|
- background: url(/src/img/about/bg5.jpg) center 0/ 100% auto no-repeat #394053;
|
|
|
- .section-image{
|
|
|
- margin: px2rem(190) px2rem(50) 0 0;
|
|
|
- }
|
|
|
- .section-cont{
|
|
|
- margin-top: px2rem(212);
|
|
|
- }
|
|
|
- }
|
|
|
+ .ab-section5 {
|
|
|
+ color: #cbdcff;
|
|
|
+ height: px2rem(850);
|
|
|
+ background: url(/src/img/about/bg5.jpg) center 0/ 100% auto no-repeat #394053;
|
|
|
+ .section-image {
|
|
|
+ margin: px2rem(190) px2rem(50) 0 0;
|
|
|
+ }
|
|
|
+ .section-cont {
|
|
|
+ margin-top: px2rem(212);
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .ab-section6{
|
|
|
- color: #6e330f;
|
|
|
- height: px2rem(850);
|
|
|
- background: url(/src/img/about/bg6.jpg) center 0/ 100% auto no-repeat #eeb14d;
|
|
|
- .section-image{
|
|
|
- margin: px2rem(350) 0 0 px2rem(20);
|
|
|
- }
|
|
|
- .section-cont{
|
|
|
- margin-top: px2rem(212);
|
|
|
- }
|
|
|
- }
|
|
|
+ .ab-section6 {
|
|
|
+ color: #6e330f;
|
|
|
+ height: px2rem(850);
|
|
|
+ background: url(/src/img/about/bg6.jpg) center 0/ 100% auto no-repeat #eeb14d;
|
|
|
+ .section-image {
|
|
|
+ margin: px2rem(350) 0 0 px2rem(20);
|
|
|
+ }
|
|
|
+ .section-cont {
|
|
|
+ margin-top: px2rem(212);
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .ab-section7{
|
|
|
- color: #3a3e4d;
|
|
|
- padding-bottom: px2rem(200);
|
|
|
- background: url(/src/img/about/bg7.jpg) center 0/ 100% auto no-repeat #ffffff;
|
|
|
- .section-image{
|
|
|
- margin: px2rem(230) px2rem(40) 0 0;
|
|
|
- }
|
|
|
- .section-cont{
|
|
|
- margin-top: px2rem(266);
|
|
|
- }
|
|
|
- .zt-link-more{
|
|
|
- margin-top: px2rem(120);
|
|
|
- }
|
|
|
- }
|
|
|
+ .ab-section7 {
|
|
|
+ color: #3a3e4d;
|
|
|
+ padding-bottom: px2rem(200);
|
|
|
+ background: url(/src/img/about/bg7.jpg) center 0/ 100% auto no-repeat #ffffff;
|
|
|
+ .section-image {
|
|
|
+ margin: px2rem(230) px2rem(40) 0 0;
|
|
|
+ }
|
|
|
+ .section-cont {
|
|
|
+ margin-top: px2rem(266);
|
|
|
+ }
|
|
|
+ .zt-link-more {
|
|
|
+ margin-top: px2rem(120);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-.page-require .re-section,.page-advanced .ad-section,.page-fad .fd-section{
|
|
|
- overflow: hidden;
|
|
|
- font-size: px2rem(18);
|
|
|
- line-height: px2rem(40);
|
|
|
- .section-hd{
|
|
|
- height: px2rem(142);
|
|
|
- }
|
|
|
- .section-hd_sm{
|
|
|
- height: px2rem(56);
|
|
|
- }
|
|
|
+.page-require .re-section, .page-advanced .ad-section, .page-fad .fd-section {
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: px2rem(18);
|
|
|
+ line-height: px2rem(40);
|
|
|
+ .section-hd {
|
|
|
+ height: px2rem(142);
|
|
|
+ }
|
|
|
+ .section-hd_sm {
|
|
|
+ height: px2rem(56);
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
//萌新入门
|
|
|
-.page-require{
|
|
|
- @for $i from 1 through 6{
|
|
|
- .re-section#{$i}{
|
|
|
- .section-hd{
|
|
|
- background: url(/src/img/require/title#{$i}.png) center 0 /auto 100% no-repeat;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .re-section1{
|
|
|
- color: #cbe8ff;
|
|
|
- padding-bottom: px2rem(80);
|
|
|
- background: url(/src/img/require/bg1.jpg) center 0 / 100% auto no-repeat #68869e;
|
|
|
- .box-bd_bgr{
|
|
|
- background: #567186;
|
|
|
- }
|
|
|
- .box-bd_cont{
|
|
|
- &:before{
|
|
|
- background: #567186;
|
|
|
- }
|
|
|
- }
|
|
|
- .swiper-wrapper{
|
|
|
- position: relative;
|
|
|
- margin: px2rem(12) px2rem(60) 0;
|
|
|
- }
|
|
|
- }
|
|
|
- .re-section2{
|
|
|
- padding: 0 0 px2rem(10);
|
|
|
- background: url(/src/img/require/bg2.jpg) center 0 / 100% auto no-repeat #e27541;
|
|
|
- .box-bd_bgr{
|
|
|
- background: #ffc600;
|
|
|
- }
|
|
|
- .box-bd_cont{
|
|
|
- &:before{
|
|
|
- background: #ffc600;
|
|
|
- }
|
|
|
- }
|
|
|
- .list-pic{
|
|
|
- position: relative;
|
|
|
- margin: px2rem(20) px2rem(-40) 0 px2rem(80);
|
|
|
- &.ext-sm{
|
|
|
- margin: px2rem(20) px2rem(-40) 0 px2rem(20);
|
|
|
- li{
|
|
|
- width: px2rem(350);
|
|
|
- margin: 0 px2rem(40) px2rem(40) 0;
|
|
|
- &:before{
|
|
|
- transform: skew(2deg,0);
|
|
|
- }
|
|
|
- &:after{
|
|
|
- transform: skew(-2deg,0);
|
|
|
- }
|
|
|
- }
|
|
|
- img{
|
|
|
- height: px2rem(204);
|
|
|
- }
|
|
|
- a{
|
|
|
- &:before{
|
|
|
- right: px2rem(81);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- li{
|
|
|
- position: relative;
|
|
|
- float: left;
|
|
|
- width: px2rem(487);
|
|
|
- margin: 0 px2rem(40) px2rem(60) 0;
|
|
|
- &:before,&:after{
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- width: 60%;
|
|
|
- height: 100%;
|
|
|
- background: #FFFFFF;
|
|
|
- }
|
|
|
- &:before{
|
|
|
- left: 0;
|
|
|
- transform: skew(-2deg,0);
|
|
|
- }
|
|
|
- &:after{
|
|
|
- right: 0;
|
|
|
- transform: skew(2deg,0);
|
|
|
- }
|
|
|
- }
|
|
|
- a{
|
|
|
- position: relative;
|
|
|
- z-index: 1;
|
|
|
- display: block;
|
|
|
- color: #33414c;
|
|
|
- padding: px2rem(12) px2rem(12) px2rem(24);
|
|
|
- &:before{
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- right: px2rem(42);
|
|
|
- bottom: -1px;
|
|
|
- width: px2rem(12);
|
|
|
- height: px2rem(18);
|
|
|
- background: url(/src/img/require/icon-deco_yb.png) 0 / 100% no-repeat;
|
|
|
- }
|
|
|
- }
|
|
|
- .pic-item_cover{
|
|
|
-
|
|
|
- }
|
|
|
- img{
|
|
|
- width: 100%;
|
|
|
- height: px2rem(234);
|
|
|
- display: block;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- .pic-item_title{
|
|
|
- font-size: px2rem(24);
|
|
|
- font-weight: bold;
|
|
|
- line-height: px2rem(60);
|
|
|
- }
|
|
|
- .pic-item_desc{
|
|
|
- font-size: px2rem(16);
|
|
|
- line-height: px2rem(24);
|
|
|
- height: px2rem(48);
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- }
|
|
|
- .list-txt{
|
|
|
- position: relative;
|
|
|
- padding: px2rem(20) 0 0 px2rem(30);
|
|
|
- margin-right: px2rem(-30);
|
|
|
- li{
|
|
|
- float: left;
|
|
|
- margin: 0 px2rem(30) px2rem(24) 0;
|
|
|
- }
|
|
|
- a{
|
|
|
- color: #a0893a;
|
|
|
- font-size: px2rem(20);
|
|
|
- font-weight: 700;
|
|
|
- display: block;
|
|
|
- width: px2rem(260);
|
|
|
- height: px2rem(78);
|
|
|
- line-height: px2rem(78);
|
|
|
- background: url(/src/img/require/set2-bg-txt.png) 0 0 / 100% no-repeat;
|
|
|
- &:hover{
|
|
|
- background: url(/src/img/require/set2-bg-txt2.png) 0 0 / 100% no-repeat;
|
|
|
- }
|
|
|
- span{
|
|
|
- position: relative;
|
|
|
- display: inline-block;
|
|
|
- padding: 0 px2rem(20);
|
|
|
- &:before{
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- right: 0;
|
|
|
- margin-top: px2rem(-6);
|
|
|
- width: px2rem(10);
|
|
|
- height: px2rem(10);
|
|
|
- border: px2rem(4) solid #a0893a;
|
|
|
- border-left: 0;
|
|
|
- border-bottom: 0;
|
|
|
- transform: rotate(45deg);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .box-image{
|
|
|
- position: relative;
|
|
|
- width: px2rem(840);
|
|
|
- margin: px2rem(20) auto 0 auto;
|
|
|
- cursor: pointer;
|
|
|
- border: px2rem(8) solid #FFFFFF;
|
|
|
- &:hover{
|
|
|
- .icon-play{
|
|
|
- transform: rotate(180deg);
|
|
|
- opacity: 0.8;
|
|
|
- }
|
|
|
- }
|
|
|
- img{
|
|
|
- display: block;
|
|
|
- width: auto;
|
|
|
- max-width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- .icon-play{
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- margin: px2rem(-50) 0 0 px2rem(-58);
|
|
|
- width: px2rem(116);
|
|
|
- height: px2rem(100);
|
|
|
- transition: all .2s;
|
|
|
- background: url(/src/img/icon-play.png) center / 100% no-repeat;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .re-section3{
|
|
|
- color: #d6dfff;
|
|
|
- padding: px2rem(60) 0 px2rem(120);
|
|
|
- background: url(/src/img/require/bg3.jpg) center 0 / 100% auto no-repeat #686e9e;
|
|
|
- .box-bd_bgr{
|
|
|
- background: #7887bd;
|
|
|
- }
|
|
|
- .box-bd_cont{
|
|
|
- &:before{
|
|
|
- background: #7887bd;
|
|
|
- }
|
|
|
- }
|
|
|
- .list-rarity{
|
|
|
- position: relative;
|
|
|
- margin: px2rem(30) px2rem(-30) 0 0;
|
|
|
- li{
|
|
|
- float: left;
|
|
|
- margin-right: px2rem(30);
|
|
|
- }
|
|
|
- a{
|
|
|
- position: relative;
|
|
|
- display: block;
|
|
|
- width: px2rem(210);
|
|
|
- padding: px2rem(8);
|
|
|
- background: #FFFFFF;
|
|
|
- transition: all .2s;
|
|
|
- overflow: hidden;
|
|
|
- line-height: px2rem(36);
|
|
|
- &:before{
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: px2rem(-45);
|
|
|
- z-index: 2;
|
|
|
- width: px2rem(120);
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 700;
|
|
|
- height: px2rem(36);
|
|
|
- transform: rotate(-45deg);
|
|
|
- color: #FFFFFF;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- &:hover{
|
|
|
- opacity: 0.8;
|
|
|
- }
|
|
|
- &.icon-rarity1{
|
|
|
- &:before{
|
|
|
- content: "普通";
|
|
|
- background: #909caf;
|
|
|
- }
|
|
|
- }
|
|
|
- &.icon-rarity2{
|
|
|
- &:before{
|
|
|
- content: "罕见";
|
|
|
- background: #25b460;
|
|
|
- }
|
|
|
- }
|
|
|
- &.icon-rarity3{
|
|
|
- &:before{
|
|
|
- content: "稀有";
|
|
|
- background: #0faadf;
|
|
|
- }
|
|
|
- }
|
|
|
- &.icon-rarity4{
|
|
|
- &:before{
|
|
|
- content: "史诗";
|
|
|
- background: #763c97;
|
|
|
- }
|
|
|
- }
|
|
|
- &.icon-rarity5{
|
|
|
- &:before{
|
|
|
- content: "传说";
|
|
|
- background: #e7893e;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- img{
|
|
|
- display: block;
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- }
|
|
|
- .list-recommend{
|
|
|
+.page-require {
|
|
|
+ @for $i from 1 through 6 {
|
|
|
+ .re-section#{$i} {
|
|
|
+ .section-hd {
|
|
|
+ background: url(/src/img/require/title#{$i}.png) center 0 /auto 100% no-repeat;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .re-section1 {
|
|
|
+ color: #cbe8ff;
|
|
|
+ padding-bottom: px2rem(80);
|
|
|
+ background: url(/src/img/require/bg1.jpg) center 0 / 100% auto no-repeat #68869e;
|
|
|
+ .box-bd_bgr {
|
|
|
+ background: #567186;
|
|
|
+ }
|
|
|
+ .box-bd_cont {
|
|
|
+ &:before {
|
|
|
+ background: #567186;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .swiper-wrapper {
|
|
|
+ position: relative;
|
|
|
+ margin: px2rem(12) px2rem(60) 0;
|
|
|
+ }
|
|
|
+ .ui-carousel__prev{
|
|
|
+ top: 50%;
|
|
|
+ left: -0.2rem;
|
|
|
+ }
|
|
|
+ .ui-carousel__next{
|
|
|
+ top: 50%;
|
|
|
+ right: -0.2rem;;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .re-section2 {
|
|
|
+ padding: 0 0 px2rem(10);
|
|
|
+ background: url(/src/img/require/bg2.jpg) center 0 / 100% auto no-repeat #e27541;
|
|
|
+ .box-bd_bgr {
|
|
|
+ background: #ffc600;
|
|
|
+ }
|
|
|
+ .box-bd_cont {
|
|
|
+ &:before {
|
|
|
+ background: #ffc600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ui-carousel__prev{
|
|
|
+ top: 50%;
|
|
|
+ left: -0.2rem;
|
|
|
+ }
|
|
|
+ .ui-carousel__next{
|
|
|
+ top: 50%;
|
|
|
+ right: -0.2rem;;
|
|
|
+ }
|
|
|
+ .list-pic {
|
|
|
+ position: relative;
|
|
|
+ margin: px2rem(20) px2rem(-40) 0 px2rem(80);
|
|
|
+ &.ext-sm {
|
|
|
+ margin: px2rem(20) px2rem(-40) 0 px2rem(20);
|
|
|
+ li {
|
|
|
+ width: px2rem(350);
|
|
|
+ margin: 0 px2rem(40) px2rem(40) 0;
|
|
|
+ &:before {
|
|
|
+ transform: skew(2deg, 0);
|
|
|
+ }
|
|
|
+ &:after {
|
|
|
+ transform: skew(-2deg, 0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ height: px2rem(204);
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ &:before {
|
|
|
+ right: px2rem(81);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ li {
|
|
|
+ position: relative;
|
|
|
+ float: left;
|
|
|
+ width: px2rem(487);
|
|
|
+ margin: 0 px2rem(40) px2rem(60) 0;
|
|
|
+ &:before, &:after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ width: 60%;
|
|
|
+ height: 100%;
|
|
|
+ background: #FFFFFF;
|
|
|
+ }
|
|
|
+ &:before {
|
|
|
+ left: 0;
|
|
|
+ transform: skew(-2deg, 0);
|
|
|
+ }
|
|
|
+ &:after {
|
|
|
+ right: 0;
|
|
|
+ transform: skew(2deg, 0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ display: block;
|
|
|
+ color: #33414c;
|
|
|
+ padding: px2rem(12) px2rem(12) px2rem(24);
|
|
|
+ &:before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ right: px2rem(42);
|
|
|
+ bottom: -1px;
|
|
|
+ width: px2rem(12);
|
|
|
+ height: px2rem(18);
|
|
|
+ background: url(/src/img/require/icon-deco_yb.png) 0 / 100% no-repeat;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pic-item_cover {
|
|
|
+
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: px2rem(234);
|
|
|
+ display: block;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .pic-item_title {
|
|
|
+ font-size: px2rem(24);
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: px2rem(60);
|
|
|
+ }
|
|
|
+ .pic-item_desc {
|
|
|
+ font-size: px2rem(16);
|
|
|
+ line-height: px2rem(24);
|
|
|
+ height: px2rem(48);
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-txt {
|
|
|
+ position: relative;
|
|
|
+ padding: px2rem(20) 0 0 px2rem(30);
|
|
|
+ margin-right: px2rem(-30);
|
|
|
+ li {
|
|
|
+ float: left;
|
|
|
+ margin: 0 px2rem(30) px2rem(24) 0;
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ color: #a0893a;
|
|
|
+ font-size: px2rem(20);
|
|
|
+ font-weight: 700;
|
|
|
+ display: block;
|
|
|
+ width: px2rem(260);
|
|
|
+ height: px2rem(78);
|
|
|
+ line-height: px2rem(78);
|
|
|
+ background: url(/src/img/require/set2-bg-txt.png) 0 0 / 100% no-repeat;
|
|
|
+ &:hover {
|
|
|
+ background: url(/src/img/require/set2-bg-txt2.png) 0 0 / 100% no-repeat;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0 px2rem(20);
|
|
|
+ &:before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ right: 0;
|
|
|
+ margin-top: px2rem(-6);
|
|
|
+ width: px2rem(10);
|
|
|
+ height: px2rem(10);
|
|
|
+ border: px2rem(4) solid #a0893a;
|
|
|
+ border-left: 0;
|
|
|
+ border-bottom: 0;
|
|
|
+ transform: rotate(45deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-image {
|
|
|
+ position: relative;
|
|
|
+ width: px2rem(840);
|
|
|
+ height: px2rem(600);
|
|
|
+ margin: px2rem(20) auto 0 auto;
|
|
|
+ cursor: pointer;
|
|
|
+ border: px2rem(8) solid #FFFFFF;
|
|
|
+ &:hover {
|
|
|
+ .icon-play {
|
|
|
+ transform: rotate(180deg);
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ width: auto;
|
|
|
+ max-width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .icon-play {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ margin: px2rem(-50) 0 0 px2rem(-58);
|
|
|
+ width: px2rem(116);
|
|
|
+ height: px2rem(100);
|
|
|
+ transition: all .2s;
|
|
|
+ background: url(/src/img/icon-play.png) center / 100% no-repeat;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .re-section3 {
|
|
|
+ color: #d6dfff;
|
|
|
+ padding: px2rem(60) 0 px2rem(120);
|
|
|
+ background: url(/src/img/require/bg3.jpg) center 0 / 100% auto no-repeat #686e9e;
|
|
|
+ .box-bd_bgr {
|
|
|
+ background: #7887bd;
|
|
|
+ }
|
|
|
+ .box-bd_cont {
|
|
|
+ &:before {
|
|
|
+ background: #7887bd;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-rarity {
|
|
|
+ position: relative;
|
|
|
+ margin: px2rem(30) px2rem(-30) 0 0;
|
|
|
+ li {
|
|
|
+ float: left;
|
|
|
+ margin-right: px2rem(30);
|
|
|
+ height: px2rem(210);
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ position: relative;
|
|
|
+ height: px2rem(210);
|
|
|
+ display: block;
|
|
|
+ width: px2rem(210);
|
|
|
+ padding: px2rem(8);
|
|
|
+ background: #FFFFFF;
|
|
|
+ transition: all .2s;
|
|
|
+ overflow: hidden;
|
|
|
+ line-height: px2rem(36);
|
|
|
+ &:before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: px2rem(10);
|
|
|
+ left: px2rem(-30);
|
|
|
+ z-index: 2;
|
|
|
+ width: px2rem(120);
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 700;
|
|
|
+ height: px2rem(36);
|
|
|
+ transform: rotate(-45deg);
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+ &.icon-rarity1 {
|
|
|
+ &:before {
|
|
|
+ content: "普通";
|
|
|
+ background: #909caf;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.icon-rarity2 {
|
|
|
+ &:before {
|
|
|
+ content: "罕见";
|
|
|
+ background: #25b460;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.icon-rarity3 {
|
|
|
+ &:before {
|
|
|
+ content: "稀有";
|
|
|
+ background: #0faadf;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.icon-rarity4 {
|
|
|
+ &:before {
|
|
|
+ content: "史诗";
|
|
|
+ background: #763c97;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.icon-rarity5 {
|
|
|
+ &:before {
|
|
|
+ content: "传说";
|
|
|
+ background: #e7893e;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-recommend {
|
|
|
|
|
|
- }
|
|
|
- .recommend-item{
|
|
|
- position: relative;
|
|
|
- margin: px2rem(12) auto 0 auto;
|
|
|
- width: px2rem(970);
|
|
|
- height: px2rem(180);
|
|
|
- font-weight: 700;
|
|
|
- font-size: px2rem(16);
|
|
|
- line-height: px2rem(26);
|
|
|
- color: #ffffff;
|
|
|
- background: url(/src/img/require/set3-bg-recommend.png) 0 0 / 100% 100% no-repeat;
|
|
|
- .fl{
|
|
|
- width: px2rem(220);
|
|
|
- margin: px2rem(30) px2rem(50) 0 px2rem(24);
|
|
|
- }
|
|
|
- h3{
|
|
|
- font-size: px2rem(20);
|
|
|
- margin-bottom: px2rem(10);
|
|
|
- }
|
|
|
- .list-arms{
|
|
|
- @include clearfix();
|
|
|
- padding-top: px2rem(30);
|
|
|
- margin-right: px2rem(-20);
|
|
|
- li{
|
|
|
- float: left;
|
|
|
- text-align: center;
|
|
|
- margin-right: px2rem(20);
|
|
|
- }
|
|
|
- .arms-cover{
|
|
|
- width: px2rem(90);
|
|
|
- height: px2rem(90);
|
|
|
- background: #4f546d;
|
|
|
- }
|
|
|
- em{
|
|
|
- display: inline-block;
|
|
|
- font-weight: 700;
|
|
|
- font-size: px2rem(18);
|
|
|
- color: #ffffff;
|
|
|
- line-height: px2rem(26);
|
|
|
- padding: 0 px2rem(6);
|
|
|
- border: 1px solid #FFFFFF;
|
|
|
- margin-top: px2rem(8);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .re-section4{
|
|
|
- color: #fdffdd;
|
|
|
- padding-bottom: px2rem(150);
|
|
|
- background: url(/src/img/require/bg4.jpg) center 0 / 100% auto no-repeat #b1a476;
|
|
|
- .box-bd_bgr{
|
|
|
- background: #96986c;
|
|
|
- }
|
|
|
- .box-bd_cont{
|
|
|
- &:before{
|
|
|
- background: #96986c;
|
|
|
- }
|
|
|
- }
|
|
|
- .list-recommend{
|
|
|
- position: relative;
|
|
|
- margin-right: px2rem(-40);
|
|
|
- line-height: px2rem(24);
|
|
|
- font-size: px2rem(16);
|
|
|
- li{
|
|
|
- float: left;
|
|
|
- width: px2rem(356);
|
|
|
- @include clearfix();
|
|
|
- margin: px2rem(30) px2rem(40) 0 0;
|
|
|
- }
|
|
|
- .item-cover{
|
|
|
- width: px2rem(128);
|
|
|
- margin-right: px2rem(14);
|
|
|
- background: #FFFFFF;
|
|
|
- padding: px2rem(9);
|
|
|
- }
|
|
|
- h3{
|
|
|
- font-size: px2rem(24);
|
|
|
- font-weight: 700;
|
|
|
- line-height: px2rem(30);
|
|
|
- margin-bottom: px2rem(10);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .re-section5{
|
|
|
- color: #ffefd7;
|
|
|
- padding-bottom: px2rem(120);
|
|
|
- background: url(/src/img/require/bg5.jpg) center 0/ 100% auto no-repeat #e17340;
|
|
|
- .box-bd_bgr{
|
|
|
- background: #da8100;
|
|
|
- }
|
|
|
- .box-bd_cont{
|
|
|
- &:before{
|
|
|
- background: #da8100;
|
|
|
- }
|
|
|
- }
|
|
|
- .source-cont{
|
|
|
- .source-cover{
|
|
|
- width: px2rem(445);
|
|
|
- height: px2rem(312);
|
|
|
- background: #a86300;
|
|
|
- }
|
|
|
- .source-score{
|
|
|
- float: left;
|
|
|
- margin: px2rem(3) 0 0 px2rem(24);
|
|
|
- li{
|
|
|
- @include clearfix();
|
|
|
- line-height: px2rem(27);
|
|
|
- margin-bottom: px2rem(24);
|
|
|
- }
|
|
|
- label{
|
|
|
- float: left;
|
|
|
- font-size: px2rem(18);
|
|
|
- font-weight: 700;
|
|
|
- }
|
|
|
- .star{
|
|
|
- position: relative;
|
|
|
- float: left;
|
|
|
- width: px2rem(171);
|
|
|
- height: px2rem(27);
|
|
|
- background: url(/src/img/require/star-init.png) 0 0 / auto 100% no-repeat;
|
|
|
- &:before{
|
|
|
- content: "";
|
|
|
- display: block;
|
|
|
- width: 0;
|
|
|
- height: 100%;
|
|
|
- background: url(/src/img/require/star.png) 0 0 / auto 100% no-repeat;
|
|
|
- }
|
|
|
- }
|
|
|
- .star1:before{
|
|
|
- width: 20%;
|
|
|
- }
|
|
|
- .star2:before{
|
|
|
- width: 40%;
|
|
|
- }
|
|
|
- .star3:before{
|
|
|
- width: 60%;
|
|
|
- }
|
|
|
- .star4:before{
|
|
|
- width: 80%;
|
|
|
- }
|
|
|
- .star5:before{
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- p{
|
|
|
- font-size: px2rem(16);
|
|
|
- margin-top: px2rem(12);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .re-section6{
|
|
|
- color: #d6dfff;
|
|
|
- padding: px2rem(70) 0 px2rem(190);
|
|
|
- background: url(/src/img/require/bg6.jpg) center 0/ 100% auto no-repeat #696f9f;
|
|
|
- .box-bd_bgr{
|
|
|
- background: #7887bd;
|
|
|
- }
|
|
|
- .box-bd_cont{
|
|
|
- &:before{
|
|
|
- background: #7887bd;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .re-list-show{
|
|
|
- position: relative;
|
|
|
- margin: 0 px2rem(-30) 0 px2rem(36);
|
|
|
- &.ext-list{
|
|
|
- .show-cover{
|
|
|
- background: url(/src/img/require/bg-show2.png) center / 100% auto no-repeat;
|
|
|
- }
|
|
|
- }
|
|
|
- li{
|
|
|
- float: left;
|
|
|
- width: px2rem(200);
|
|
|
- margin: px2rem(36) px2rem(30) px2rem(36) 0;
|
|
|
- }
|
|
|
- a{
|
|
|
- display: block;
|
|
|
- &:hover{
|
|
|
- .icon-play{
|
|
|
- transform: rotate(180deg);
|
|
|
- opacity: 0.8;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .show-cover{
|
|
|
- position: relative;
|
|
|
- height: px2rem(248);
|
|
|
- line-height: px2rem(248);
|
|
|
- background: url(/src/img/require/bg-show.png) center / 100% auto no-repeat;
|
|
|
- }
|
|
|
- h4{
|
|
|
- position: absolute;
|
|
|
- top: px2rem(20);
|
|
|
- left: px2rem(-20);
|
|
|
- background: #fae15c;
|
|
|
- line-height: px2rem(42);
|
|
|
- height: px2rem(36);
|
|
|
- padding: 0 px2rem(20);
|
|
|
- color: #333333;
|
|
|
- font-weight: 700;
|
|
|
- &:before{
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- bottom: px2rem(-3);
|
|
|
- width: 100%;
|
|
|
- height: 40%;
|
|
|
- background: #fae15c;
|
|
|
- transform: skew(0,-2deg);
|
|
|
- }
|
|
|
- }
|
|
|
- span{
|
|
|
- position: relative;
|
|
|
- }
|
|
|
- img{
|
|
|
- position: relative;
|
|
|
- margin-left: -10%;
|
|
|
- width: 120%;
|
|
|
- display: inline-block;
|
|
|
- vertical-align: middle;
|
|
|
- }
|
|
|
- .icon-play{
|
|
|
- position: absolute;
|
|
|
- right: px2rem(20);
|
|
|
- bottom: px2rem(30);
|
|
|
- width: px2rem(48);
|
|
|
- height: px2rem(40);
|
|
|
- transition: all .2s;
|
|
|
- background: url(/src/img/icon-play.png) 0 / 100% no-repeat;
|
|
|
- }
|
|
|
- .show-desc{
|
|
|
- font-size: px2rem(14);
|
|
|
- line-height: px2rem(20);
|
|
|
- margin: px2rem(10) px2rem(8) 0;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- }
|
|
|
- .re-view-wrap{
|
|
|
- position: relative;
|
|
|
- z-index: 1;
|
|
|
- width: px2rem(1101);
|
|
|
- margin: px2rem(12) px2rem(42) 0;
|
|
|
- .view-wrap-cont{
|
|
|
- position: relative;
|
|
|
- }
|
|
|
- &:before,&:after{
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- width: 60%;
|
|
|
- height: 100%;
|
|
|
- background: #FFFFFF;
|
|
|
- }
|
|
|
- &:before{
|
|
|
- left: px2rem(-12);
|
|
|
- transform: skew(-1deg,0);
|
|
|
- }
|
|
|
- &:after{
|
|
|
- right: px2rem(-12);
|
|
|
- transform: skew(1deg,0);
|
|
|
- }
|
|
|
- a{
|
|
|
- position: relative;
|
|
|
- z-index: 2;
|
|
|
- display: block;
|
|
|
- color: #33414c;
|
|
|
- padding: px2rem(9) px2rem(0) px2rem(24);
|
|
|
- &:before{
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- right: px2rem(54);
|
|
|
- bottom: 0;
|
|
|
- width: px2rem(24);
|
|
|
- height: px2rem(21);
|
|
|
- background: url(/src/img/require/icon-deco_bb.png) 0 / 100% no-repeat;
|
|
|
- }
|
|
|
- }
|
|
|
- .pic-item_cover{
|
|
|
- @include clearfix();
|
|
|
- &.cover-num2{
|
|
|
- padding-top: px2rem(18);
|
|
|
- img{
|
|
|
- float: left;
|
|
|
- width: 46%;
|
|
|
- margin: 0 2%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .pic-item_title{
|
|
|
- font-size: px2rem(24);
|
|
|
- font-weight: bold;
|
|
|
- line-height: px2rem(60);
|
|
|
- }
|
|
|
- .pic-item_desc{
|
|
|
- font-size: px2rem(18);
|
|
|
- line-height: px2rem(36);
|
|
|
- height: px2rem(108);
|
|
|
- }
|
|
|
- }
|
|
|
+ }
|
|
|
+ .recommend-item {
|
|
|
+ position: relative;
|
|
|
+ margin: px2rem(12) auto 0 auto;
|
|
|
+ width: px2rem(970);
|
|
|
+ height: px2rem(180);
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: px2rem(16);
|
|
|
+ line-height: px2rem(26);
|
|
|
+ color: #ffffff;
|
|
|
+ background: url(/src/img/require/set3-bg-recommend.png) 0 0 / 100% 100% no-repeat;
|
|
|
+ .fl {
|
|
|
+ width: px2rem(220);
|
|
|
+ margin: px2rem(30) px2rem(50) 0 px2rem(24);
|
|
|
+ }
|
|
|
+ h3 {
|
|
|
+ font-size: px2rem(20);
|
|
|
+ margin-bottom: px2rem(10);
|
|
|
+ }
|
|
|
+ .list-arms {
|
|
|
+ @include clearfix();
|
|
|
+ padding-top: px2rem(30);
|
|
|
+ margin-right: px2rem(-20);
|
|
|
+ li {
|
|
|
+ float: left;
|
|
|
+ text-align: center;
|
|
|
+ margin-right: px2rem(20);
|
|
|
+ }
|
|
|
+ .arms-cover {
|
|
|
+ width: px2rem(90);
|
|
|
+ height: px2rem(90);
|
|
|
+ background: #4f546d;
|
|
|
+ }
|
|
|
+ em {
|
|
|
+ display: inline-block;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: px2rem(18);
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: px2rem(26);
|
|
|
+ padding: 0 px2rem(6);
|
|
|
+ border: 1px solid #FFFFFF;
|
|
|
+ margin-top: px2rem(8);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .re-section4 {
|
|
|
+ color: #fdffdd;
|
|
|
+ padding-bottom: px2rem(150);
|
|
|
+ background: url(/src/img/require/bg4.jpg) center 0 / 100% auto no-repeat #b1a476;
|
|
|
+ .box-bd_bgr {
|
|
|
+ background: #96986c;
|
|
|
+ }
|
|
|
+ .box-bd_cont {
|
|
|
+ &:before {
|
|
|
+ background: #96986c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-recommend {
|
|
|
+ position: relative;
|
|
|
+ margin-right: px2rem(-40);
|
|
|
+ line-height: px2rem(24);
|
|
|
+ font-size: px2rem(16);
|
|
|
+ li {
|
|
|
+ float: left;
|
|
|
+ width: px2rem(356);
|
|
|
+ @include clearfix();
|
|
|
+ margin: px2rem(30) px2rem(40) 0 0;
|
|
|
+ }
|
|
|
+ .item-cover {
|
|
|
+ height: px2rem(128);
|
|
|
+ width: px2rem(128);
|
|
|
+ margin-right: px2rem(14);
|
|
|
+ background: #FFFFFF;
|
|
|
+ padding: px2rem(9);
|
|
|
+ border: 3px solid #fff;
|
|
|
+ }
|
|
|
+ h3 {
|
|
|
+ font-size: px2rem(24);
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: px2rem(30);
|
|
|
+ margin-bottom: px2rem(10);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .re-section5 {
|
|
|
+ color: #ffefd7;
|
|
|
+ padding-bottom: px2rem(120);
|
|
|
+ background: url(/src/img/require/bg5.jpg) center 0/ 100% auto no-repeat #e17340;
|
|
|
+ .box-bd_bgr {
|
|
|
+ background: #da8100;
|
|
|
+ }
|
|
|
+ .box-bd_cont {
|
|
|
+ &:before {
|
|
|
+ background: #da8100;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ui-carousel__prev{
|
|
|
+ top: 50%;
|
|
|
+ left: -0.2rem;
|
|
|
+ }
|
|
|
+ .ui-carousel__next{
|
|
|
+ top: 50%;
|
|
|
+ right: -0.2rem;
|
|
|
+ }
|
|
|
+ .source-cont {
|
|
|
+ .source-cover {
|
|
|
+ width: px2rem(445);
|
|
|
+ height: px2rem(312);
|
|
|
+ background: #a86300;
|
|
|
+ }
|
|
|
+ .source-score {
|
|
|
+ float: left;
|
|
|
+ margin: px2rem(3) 0 0 px2rem(24);
|
|
|
+ li {
|
|
|
+ @include clearfix();
|
|
|
+ line-height: px2rem(27);
|
|
|
+ margin-bottom: px2rem(24);
|
|
|
+ }
|
|
|
+ label {
|
|
|
+ float: left;
|
|
|
+ font-size: px2rem(18);
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ .star {
|
|
|
+ position: relative;
|
|
|
+ float: left;
|
|
|
+ width: px2rem(171);
|
|
|
+ height: px2rem(27);
|
|
|
+ background: url(/src/img/require/star-init.png) 0 0 / auto 100% no-repeat;
|
|
|
+ &:before {
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ width: 0;
|
|
|
+ height: 100%;
|
|
|
+ background: url(/src/img/require/star.png) 0 0 / auto 100% no-repeat;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .star1:before {
|
|
|
+ width: 20%;
|
|
|
+ }
|
|
|
+ .star2:before {
|
|
|
+ width: 40%;
|
|
|
+ }
|
|
|
+ .star3:before {
|
|
|
+ width: 60%;
|
|
|
+ }
|
|
|
+ .star4:before {
|
|
|
+ width: 80%;
|
|
|
+ }
|
|
|
+ .star5:before {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ font-size: px2rem(16);
|
|
|
+ margin-top: px2rem(12);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .re-section6 {
|
|
|
+ color: #d6dfff;
|
|
|
+ padding: px2rem(70) 0 px2rem(190);
|
|
|
+ background: url(/src/img/require/bg6.jpg) center 0/ 100% auto no-repeat #696f9f;
|
|
|
+ .box-bd_bgr {
|
|
|
+ background: #7887bd;
|
|
|
+ }
|
|
|
+ .box-bd_cont {
|
|
|
+ &:before {
|
|
|
+ background: #7887bd;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .re-list-show {
|
|
|
+ position: relative;
|
|
|
+ margin: 0 px2rem(-30) 0 px2rem(36);
|
|
|
+ &.ext-list {
|
|
|
+ .show-cover {
|
|
|
+ background: url(/src/img/require/bg-show2.png) center / 100% auto no-repeat;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ li {
|
|
|
+ float: left;
|
|
|
+ width: px2rem(200);
|
|
|
+ margin: px2rem(36) px2rem(30) px2rem(36) 0;
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ display: block;
|
|
|
+ &:hover {
|
|
|
+ .icon-play {
|
|
|
+ transform: rotate(180deg);
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .show-cover {
|
|
|
+ position: relative;
|
|
|
+ height: px2rem(248);
|
|
|
+ line-height: px2rem(248);
|
|
|
+ background: url(/src/img/require/bg-show.png) center / 100% auto no-repeat;
|
|
|
+ }
|
|
|
+ h4 {
|
|
|
+ position: absolute;
|
|
|
+ top: px2rem(20);
|
|
|
+ left: px2rem(-20);
|
|
|
+ background: #fae15c;
|
|
|
+ line-height: px2rem(42);
|
|
|
+ height: px2rem(36);
|
|
|
+ padding: 0 px2rem(20);
|
|
|
+ color: #333333;
|
|
|
+ font-weight: 700;
|
|
|
+ &:before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: px2rem(-3);
|
|
|
+ width: 100%;
|
|
|
+ height: 40%;
|
|
|
+ background: #fae15c;
|
|
|
+ transform: skew(0, -2deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ position: relative;
|
|
|
+ margin-left: -10%;
|
|
|
+ width: 120%;
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ .icon-play {
|
|
|
+ position: absolute;
|
|
|
+ right: px2rem(20);
|
|
|
+ bottom: px2rem(30);
|
|
|
+ width: px2rem(48);
|
|
|
+ height: px2rem(40);
|
|
|
+ transition: all .2s;
|
|
|
+ background: url(/src/img/icon-play.png) 0 / 100% no-repeat;
|
|
|
+ }
|
|
|
+ .show-desc {
|
|
|
+ font-size: px2rem(14);
|
|
|
+ line-height: px2rem(20);
|
|
|
+ margin: px2rem(10) px2rem(8) 0;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .re-view-wrap {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ width: px2rem(1101);
|
|
|
+ margin: px2rem(12) px2rem(42) 0;
|
|
|
+ .view-wrap-cont {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ &:before, &:after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ width: 60%;
|
|
|
+ height: 100%;
|
|
|
+ background: #FFFFFF;
|
|
|
+ }
|
|
|
+ &:before {
|
|
|
+ left: px2rem(-12);
|
|
|
+ transform: skew(-1deg, 0);
|
|
|
+ }
|
|
|
+ &:after {
|
|
|
+ right: px2rem(-12);
|
|
|
+ transform: skew(1deg, 0);
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ display: block;
|
|
|
+ color: #33414c;
|
|
|
+ padding: px2rem(9) px2rem(0) px2rem(24);
|
|
|
+ &:before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ right: px2rem(54);
|
|
|
+ bottom: 0;
|
|
|
+ width: px2rem(24);
|
|
|
+ height: px2rem(21);
|
|
|
+ background: url(/src/img/require/icon-deco_bb.png) 0 / 100% no-repeat;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pic-item_cover {
|
|
|
+ @include clearfix();
|
|
|
+ &.cover-num2 {
|
|
|
+ padding-top: px2rem(18);
|
|
|
+ img {
|
|
|
+ float: left;
|
|
|
+ width: 46%;
|
|
|
+ margin: 0 2%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pic-item_title {
|
|
|
+ font-size: px2rem(24);
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: px2rem(60);
|
|
|
+ }
|
|
|
+ .pic-item_desc {
|
|
|
+ font-size: px2rem(18);
|
|
|
+ line-height: px2rem(36);
|
|
|
+ height: px2rem(108);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
//进阶内容
|
|
|
-.page-advanced{
|
|
|
- @for $i from 1 through 3{
|
|
|
- .ad-section#{$i}{
|
|
|
- .section-hd{
|
|
|
- background: url(/src/img/advanced/title#{$i}.png) center 0 /auto 100% no-repeat;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .ad-section1{
|
|
|
- color: #cbe8ff;
|
|
|
- padding: px2rem(75) 0 px2rem(93);
|
|
|
- background: url(/src/img/advanced/bg1.jpg) center 0 / 100% auto no-repeat #68869e;
|
|
|
- .box-bd_bgr{
|
|
|
- background: #567186;
|
|
|
- }
|
|
|
- .box-bd_cont{
|
|
|
- &:before{
|
|
|
- background: #567186;
|
|
|
- }
|
|
|
- }
|
|
|
- .deco-cont{
|
|
|
- color: #ffffff;
|
|
|
- padding: px2rem(40) px2rem(32) px2rem(24) px2rem(36);
|
|
|
- text-align: justify;
|
|
|
- }
|
|
|
- .deco-cover{
|
|
|
- width: px2rem(360);
|
|
|
- margin-right: px2rem(21);
|
|
|
- }
|
|
|
- .shop-wrap{
|
|
|
- position: relative;
|
|
|
- margin: px2rem(30) px2rem(-60) 0 px2rem(51);
|
|
|
- }
|
|
|
- .shop-box{
|
|
|
- float: left;
|
|
|
- width: px2rem(507);
|
|
|
- margin-right: px2rem(60);
|
|
|
- &.ext-shop{
|
|
|
- li{
|
|
|
- width: px2rem(135);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .shop-hd{
|
|
|
- position: relative;
|
|
|
- z-index: 2;
|
|
|
- width: px2rem(210);
|
|
|
- text-align: center;
|
|
|
- border: px2rem(6) solid #FFFFFF;
|
|
|
- background: #334350;
|
|
|
- transform: skew(0,-1deg);
|
|
|
- font-size: px2rem(21);
|
|
|
- font-weight: 700;
|
|
|
- line-height: px2rem(54);
|
|
|
- color: #FFFFFF;
|
|
|
- span{
|
|
|
- position: relative;
|
|
|
- display: block;
|
|
|
- }
|
|
|
- &:before{
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 150%;
|
|
|
- background: #334350;
|
|
|
- }
|
|
|
- }
|
|
|
- .shop-bd{
|
|
|
- position: relative;
|
|
|
- &:before,&:after{
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- z-index: 1;
|
|
|
- width: 100%;
|
|
|
- height: 60%;
|
|
|
- border: px2rem(6) solid #FFFFFF;
|
|
|
- background: #334350;
|
|
|
- }
|
|
|
- &:before{
|
|
|
- top: px2rem(-6);
|
|
|
- border-bottom: 0;
|
|
|
- transform: skew(0,-1deg);
|
|
|
- }
|
|
|
- &:after{
|
|
|
- border-top: 0;
|
|
|
- bottom: px2rem(-6);
|
|
|
- transform: skew(0,1deg);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .ad-section2{
|
|
|
- color: #d6dfff;
|
|
|
- padding: px2rem(72) 0 px2rem(141);
|
|
|
- background: url(/src/img/advanced/bg2.jpg) center 0 / 100% auto no-repeat #777ead;
|
|
|
- .box-bd_bgr{
|
|
|
- background: #7887bd;
|
|
|
- }
|
|
|
- .box-bd_cont{
|
|
|
- &:before{
|
|
|
- background: #7887bd;
|
|
|
- }
|
|
|
- }
|
|
|
- .pic-map{
|
|
|
- position: relative;
|
|
|
- width: px2rem(675);
|
|
|
- margin: px2rem(24) auto 0;
|
|
|
- }
|
|
|
- }
|
|
|
- .ad-section3{
|
|
|
- color: #fdffdd;
|
|
|
- padding: px2rem(72) 0 px2rem(51);
|
|
|
- background: url(/src/img/advanced/bg3.jpg) center 0 / 100% auto no-repeat #b0a376;
|
|
|
- .box-bd_bgr{
|
|
|
- background: #96986c;
|
|
|
- }
|
|
|
- .box-bd_cont{
|
|
|
- &:before{
|
|
|
- background: #96986c;
|
|
|
- }
|
|
|
- }
|
|
|
- .pic{
|
|
|
- width: px2rem(927);
|
|
|
- margin: px2rem(48) auto 0;
|
|
|
- background: #707151;
|
|
|
- &.pic_sm{
|
|
|
- width: px2rem(906);
|
|
|
- }
|
|
|
- }
|
|
|
- .list-task{
|
|
|
- position: relative;
|
|
|
- margin: px2rem(60) px2rem(102) 0 px2rem(102);
|
|
|
- li{
|
|
|
- position: relative;
|
|
|
- margin-bottom: px2rem(84);
|
|
|
- padding: px2rem(24) px2rem(105) px2rem(69) px2rem(96);
|
|
|
- &:before{
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- top: px2rem(114);
|
|
|
- right: 0;
|
|
|
- z-index: 2;
|
|
|
- width: px2rem(27);
|
|
|
- height: px2rem(36);
|
|
|
- background: url(/src/img/advanced/icon-deco_gr.jpg) 0 / 100% no-repeat;
|
|
|
- }
|
|
|
- }
|
|
|
- .task-cont{
|
|
|
- position: relative;
|
|
|
- font-size: px2rem(16);
|
|
|
- line-height: px2rem(24);
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- h3{
|
|
|
- font-size: px2rem(24);
|
|
|
- font-weight: 700;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- p{
|
|
|
- margin: px2rem(20) 0;
|
|
|
- }
|
|
|
- .cont-skew_top,.cont-skew_bottom,.cont-skew_left{
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: #b9bc82;
|
|
|
- }
|
|
|
- .cont-skew_top{
|
|
|
- top: px2rem(9);
|
|
|
- transform: skew(0,1deg);
|
|
|
- &:before{
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: px2rem(45);
|
|
|
- z-index: 2;
|
|
|
- width: px2rem(39);
|
|
|
- height: px2rem(24);
|
|
|
- background: url(/src/img/advanced/icon-deco_gb.jpg) 0 / 100% no-repeat;
|
|
|
- }
|
|
|
- }
|
|
|
- .cont-skew_bottom{
|
|
|
- height: 50%;
|
|
|
- top: px2rem(-9);
|
|
|
- transform: skew(0,-1deg);
|
|
|
- }
|
|
|
- .cont-skew_left{
|
|
|
- left: px2rem(-9);
|
|
|
- transform: skew(-1deg, 0);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+.page-advanced {
|
|
|
+ @for $i from 1 through 3 {
|
|
|
+ .ad-section#{$i} {
|
|
|
+ .section-hd {
|
|
|
+ background: url(/src/img/advanced/title#{$i}.png) center 0 /auto 100% no-repeat;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ad-section1 {
|
|
|
+ color: #cbe8ff;
|
|
|
+ padding: px2rem(75) 0 px2rem(93);
|
|
|
+ background: url(/src/img/advanced/bg1.jpg) center 0 / 100% auto no-repeat #68869e;
|
|
|
+ .box-bd_bgr {
|
|
|
+ background: #567186;
|
|
|
+ }
|
|
|
+ .box-bd_cont {
|
|
|
+ &:before {
|
|
|
+ background: #567186;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .deco-cont {
|
|
|
+ color: #ffffff;
|
|
|
+ padding: px2rem(40) px2rem(32) px2rem(24) px2rem(36);
|
|
|
+ text-align: justify;
|
|
|
+ }
|
|
|
+ .deco-cover {
|
|
|
+ width: px2rem(360);
|
|
|
+ margin-right: px2rem(21);
|
|
|
+ }
|
|
|
+ .shop-wrap {
|
|
|
+ position: relative;
|
|
|
+ margin: px2rem(30) px2rem(-60) 0 px2rem(51);
|
|
|
+ }
|
|
|
+ .shop-box {
|
|
|
+ float: left;
|
|
|
+ width: px2rem(507);
|
|
|
+ margin-right: px2rem(60);
|
|
|
+ &.ext-shop {
|
|
|
+ li {
|
|
|
+ width: px2rem(135);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .shop-hd {
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ width: px2rem(210);
|
|
|
+ text-align: center;
|
|
|
+ border: px2rem(6) solid #FFFFFF;
|
|
|
+ background: #334350;
|
|
|
+ transform: skew(0, -1deg);
|
|
|
+ font-size: px2rem(21);
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: px2rem(54);
|
|
|
+ color: #FFFFFF;
|
|
|
+ span {
|
|
|
+ position: relative;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ &:before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 150%;
|
|
|
+ background: #334350;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .shop-bd {
|
|
|
+ position: relative;
|
|
|
+ &:before, &:after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1;
|
|
|
+ width: 100%;
|
|
|
+ height: 60%;
|
|
|
+ border: px2rem(6) solid #FFFFFF;
|
|
|
+ background: #334350;
|
|
|
+ }
|
|
|
+ &:before {
|
|
|
+ top: px2rem(-6);
|
|
|
+ border-bottom: 0;
|
|
|
+ transform: skew(0, -1deg);
|
|
|
+ }
|
|
|
+ &:after {
|
|
|
+ border-top: 0;
|
|
|
+ bottom: px2rem(-6);
|
|
|
+ transform: skew(0, 1deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ad-section2 {
|
|
|
+ color: #d6dfff;
|
|
|
+ padding: px2rem(72) 0 px2rem(141);
|
|
|
+ background: url(/src/img/advanced/bg2.jpg) center 0 / 100% auto no-repeat #777ead;
|
|
|
+ .box-bd_bgr {
|
|
|
+ background: #7887bd;
|
|
|
+ }
|
|
|
+ .box-bd_cont {
|
|
|
+ &:before {
|
|
|
+ background: #7887bd;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pic-map {
|
|
|
+ position: relative;
|
|
|
+ width: px2rem(675);
|
|
|
+ margin: px2rem(24) auto 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ad-section3 {
|
|
|
+ color: #fdffdd;
|
|
|
+ padding: px2rem(72) 0 px2rem(51);
|
|
|
+ background: url(/src/img/advanced/bg3.jpg) center 0 / 100% auto no-repeat #b0a376;
|
|
|
+ .box-bd_bgr {
|
|
|
+ background: #96986c;
|
|
|
+ }
|
|
|
+ .box-bd_cont {
|
|
|
+ &:before {
|
|
|
+ background: #96986c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pic {
|
|
|
+ width: px2rem(927);
|
|
|
+ margin: px2rem(48) auto 0;
|
|
|
+ background: #707151;
|
|
|
+ &.pic_sm {
|
|
|
+ width: px2rem(906);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-task {
|
|
|
+ position: relative;
|
|
|
+ margin: px2rem(60) px2rem(102) 0 px2rem(102);
|
|
|
+ li {
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: px2rem(84);
|
|
|
+ padding: px2rem(24) px2rem(105) px2rem(69) px2rem(96);
|
|
|
+ &:before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: px2rem(114);
|
|
|
+ right: 0;
|
|
|
+ z-index: 2;
|
|
|
+ width: px2rem(27);
|
|
|
+ height: px2rem(36);
|
|
|
+ background: url(/src/img/advanced/icon-deco_gr.jpg) 0 / 100% no-repeat;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .task-cont {
|
|
|
+ position: relative;
|
|
|
+ font-size: px2rem(16);
|
|
|
+ line-height: px2rem(24);
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ h3 {
|
|
|
+ font-size: px2rem(24);
|
|
|
+ font-weight: 700;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ margin: px2rem(20) 0;
|
|
|
+ }
|
|
|
+ .cont-skew_top, .cont-skew_bottom, .cont-skew_left {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: #b9bc82;
|
|
|
+ }
|
|
|
+ .cont-skew_top {
|
|
|
+ top: px2rem(9);
|
|
|
+ transform: skew(0, 1deg);
|
|
|
+ &:before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: px2rem(45);
|
|
|
+ z-index: 2;
|
|
|
+ width: px2rem(39);
|
|
|
+ height: px2rem(24);
|
|
|
+ background: url(/src/img/advanced/icon-deco_gb.jpg) 0 / 100% no-repeat;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cont-skew_bottom {
|
|
|
+ height: 50%;
|
|
|
+ top: px2rem(-9);
|
|
|
+ transform: skew(0, -1deg);
|
|
|
+ }
|
|
|
+ .cont-skew_left {
|
|
|
+ left: px2rem(-9);
|
|
|
+ transform: skew(-1deg, 0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
//常见问题
|
|
|
-.page-fad{
|
|
|
- .fd-section1{
|
|
|
- color: #cbe8ff;
|
|
|
- padding: px2rem(75) 0 px2rem(93);
|
|
|
- background: url(/src/img/advanced/bg1.jpg) center 0 / 100% auto no-repeat #68869e;
|
|
|
- .box-bd_bgr{
|
|
|
- background: #567186;
|
|
|
- }
|
|
|
- .box-bd_cont{
|
|
|
- &:before{
|
|
|
- background: #567186;
|
|
|
- }
|
|
|
- }
|
|
|
- .list-problem{
|
|
|
- position: relative;
|
|
|
- margin-bottom: px2rem(-21);
|
|
|
- li{
|
|
|
- margin-bottom: px2rem(21);
|
|
|
- }
|
|
|
- h4{
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- p{
|
|
|
- padding-left: px2rem(36);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+.page-fad {
|
|
|
+ .fd-section1 {
|
|
|
+ color: #cbe8ff;
|
|
|
+ padding: px2rem(75) 0 px2rem(93);
|
|
|
+ background: url(/src/img/advanced/bg1.jpg) center 0 / 100% auto no-repeat #68869e;
|
|
|
+ .box-bd_bgr {
|
|
|
+ background: #567186;
|
|
|
+ }
|
|
|
+ .box-bd_cont {
|
|
|
+ &:before {
|
|
|
+ background: #567186;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-problem {
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: px2rem(-21);
|
|
|
+ li {
|
|
|
+ margin-bottom: px2rem(21);
|
|
|
+ }
|
|
|
+ h4 {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ padding-left: px2rem(36);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
//轮播图
|
|
|
-.ui-carousel{
|
|
|
- position: relative;
|
|
|
+.ui-carousel {
|
|
|
+ position: relative;
|
|
|
}
|
|
|
-.ui-carousel__scroller{
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
+
|
|
|
+.ui-carousel__scroller {
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
-.ui-carousel__item{
|
|
|
- float: left;
|
|
|
+
|
|
|
+.ui-carousel__item {
|
|
|
+ float: left;
|
|
|
}
|
|
|
-.ui-carousel__content{
|
|
|
- @include clearfix();
|
|
|
- width: 300000px;
|
|
|
+
|
|
|
+.ui-carousel__content {
|
|
|
+ @include clearfix();
|
|
|
+ width: 300000px;
|
|
|
}
|
|
|
-.ui-carousel__prev,.ui-carousel__next{
|
|
|
- position: absolute;
|
|
|
- top: px2rem(240);
|
|
|
- z-index: 3;
|
|
|
- width: px2rem(39);
|
|
|
- height: px2rem(57);
|
|
|
- cursor: pointer;
|
|
|
+
|
|
|
+.ui-carousel__prev, .ui-carousel__next {
|
|
|
+ position: absolute;
|
|
|
+ top: px2rem(240);
|
|
|
+ z-index: 3;
|
|
|
+ width: px2rem(39);
|
|
|
+ height: px2rem(57);
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
-.ui-carousel__prev{
|
|
|
- left: px2rem(-9);
|
|
|
- background: url(/src/img/icon-prev.png) 0 0 / 100% 100% no-repeat;
|
|
|
- &:hover{
|
|
|
- background: url(/src/img/icon-prev_hover.png) 0 0 / 100% 100% no-repeat;
|
|
|
- }
|
|
|
+
|
|
|
+.ui-carousel__prev {
|
|
|
+ left: px2rem(-9);
|
|
|
+ background: url(/src/img/icon-prev.png) 0 0 / 100% 100% no-repeat;
|
|
|
+ &:hover {
|
|
|
+ background: url(/src/img/icon-prev_hover.png) 0 0 / 100% 100% no-repeat;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-.ui-carousel__next{
|
|
|
- right: px2rem(-9);
|
|
|
- background: url(/src/img/icon-next.png) 0 0 / 100% 100% no-repeat;
|
|
|
- &:hover{
|
|
|
- background: url(/src/img/icon-next_hover.png) 0 0 / 100% 100% no-repeat;
|
|
|
- }
|
|
|
+.ui-carousel__next {
|
|
|
+ right: px2rem(-9);
|
|
|
+ background: url(/src/img/icon-next.png) 0 0 / 100% 100% no-repeat;
|
|
|
+ &:hover {
|
|
|
+ background: url(/src/img/icon-next_hover.png) 0 0 / 100% 100% no-repeat;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
//-------animate---------
|
|
|
-@keyframes sidebaFloat{
|
|
|
- 0%{
|
|
|
- transform: translate3d(0,px2rem(-40),0)
|
|
|
- }
|
|
|
- 100%{
|
|
|
- transform: translate3d(0,px2rem(20),0)
|
|
|
- }
|
|
|
+@keyframes sidebaFloat {
|
|
|
+ 0% {
|
|
|
+ transform: translate3d(0, px2rem(-40), 0)
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: translate3d(0, px2rem(20), 0)
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
//H5适配
|
|
|
@media screen and (max-width: 800px) {
|
|
|
- .zt-mod-header,.zt-sidebar-zt,.zt-sidebar-tool{
|
|
|
- display: none;
|
|
|
- }
|
|
|
- .zt-inner{
|
|
|
- width: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- .zt-mod-nav{
|
|
|
- li{
|
|
|
- &:last-child{
|
|
|
- display: none;
|
|
|
- }
|
|
|
- }
|
|
|
- a{
|
|
|
- width: wpx2rem(312);
|
|
|
- height: wpx2rem(180);
|
|
|
- }
|
|
|
- }
|
|
|
- .zt-link-more{
|
|
|
- &.ext-about{
|
|
|
- font-size: wpx2rem(48);
|
|
|
- width: wpx2rem(432);
|
|
|
- height: wpx2rem(135);
|
|
|
- line-height: wpx2rem(150);
|
|
|
- }
|
|
|
- }
|
|
|
- .page-about{
|
|
|
- .ab-section{
|
|
|
- .section-cont{
|
|
|
- float: initial;
|
|
|
- width: auto;
|
|
|
- margin: 0 px2rem(36) 0 px2rem(24);
|
|
|
- h2{
|
|
|
- font-size: wpx2rem(51);
|
|
|
- }
|
|
|
- p{
|
|
|
- margin-top: wpx2rem(30);
|
|
|
- font-size: wpx2rem(27);
|
|
|
- line-height: wpx2rem(48);
|
|
|
- }
|
|
|
- .cont-opr{
|
|
|
- margin: wpx2rem(30) wpx2rem(27) 0;
|
|
|
- width: auto;
|
|
|
- height: wpx2rem(345);
|
|
|
- ul{
|
|
|
- font-size: wpx2rem(24);
|
|
|
- line-height: wpx2rem(48);
|
|
|
- padding: 0 wpx2rem(60) 0 wpx2rem(69);
|
|
|
- }
|
|
|
- h3{
|
|
|
- font-size: wpx2rem(39);
|
|
|
- height: wpx2rem(60);
|
|
|
- line-height: wpx2rem(72);
|
|
|
- padding-left: wpx2rem(78);
|
|
|
- margin: wpx2rem(36) 0 0 wpx2rem(30);
|
|
|
- }
|
|
|
- i{
|
|
|
- font-size: wpx2rem(15);
|
|
|
- height: wpx2rem(27);
|
|
|
- line-height: wpx2rem(27);
|
|
|
- min-width: wpx2rem(27);
|
|
|
- margin-right: wpx2rem(15);
|
|
|
- &.icon-mouse{
|
|
|
- height: wpx2rem(39);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .section-image{
|
|
|
- float: initial;
|
|
|
- width: wpx2rem(598);
|
|
|
- margin: 0 0 wpx2rem(72) wpx2rem(30);
|
|
|
- &.ext-video{
|
|
|
- width: wpx2rem(390);
|
|
|
- }
|
|
|
- .icon-play{
|
|
|
- width: wpx2rem(114);
|
|
|
- height: wpx2rem(99);
|
|
|
- margin: wpx2rem(-49) 0 0 wpx2rem(-57);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .ab-section1{
|
|
|
- padding: wpx2rem(570) 0 px2rem(48) 0;
|
|
|
- height: auto;
|
|
|
- background-image: url(/src/img/wap/about/bg1.jpg);
|
|
|
- }
|
|
|
- .ab-section2{
|
|
|
- padding: wpx2rem(570) 0 px2rem(48) 0;
|
|
|
- height: auto;
|
|
|
- background-image: url(/src/img/wap/about/bg2.jpg);
|
|
|
- }
|
|
|
- .ab-section3{
|
|
|
- padding: wpx2rem(69) 0 px2rem(48) 0;
|
|
|
- height: auto;
|
|
|
- background-image: url(/src/img/wap/about/bg3.jpg);
|
|
|
- }
|
|
|
- .ab-section4{
|
|
|
- position: relative;
|
|
|
- padding: wpx2rem(450) 0 px2rem(84) 0;
|
|
|
- height: auto;
|
|
|
- background-image: url(/src/img/wap/about/bg4.jpg);
|
|
|
- .section-image{
|
|
|
- position: absolute;
|
|
|
- top: wpx2rem(132);
|
|
|
- right: wpx2rem(15);
|
|
|
- }
|
|
|
- }
|
|
|
- .ab-section5{
|
|
|
- padding: wpx2rem(54) 0 px2rem(48) 0;
|
|
|
- height: auto;
|
|
|
- background-image: none;
|
|
|
- background-color: #4b566a;
|
|
|
- .section-cont{
|
|
|
- h2{
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .ab-section6{
|
|
|
- position: relative;
|
|
|
- padding: wpx2rem(450) 0 px2rem(48) 0;
|
|
|
- height: auto;
|
|
|
- background-image: url(/src/img/wap/about/bg6.jpg);
|
|
|
- .section-cont{
|
|
|
- h2{
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
- }
|
|
|
- .section-image{
|
|
|
- position: absolute;
|
|
|
- top: wpx2rem(48);
|
|
|
- right: wpx2rem(48);
|
|
|
- }
|
|
|
- }
|
|
|
- .ab-section7{
|
|
|
- padding: wpx2rem(64) 0 px2rem(180) 0;
|
|
|
- height: auto;
|
|
|
- background-image: url(/src/img/wap/about/bg7.jpg);
|
|
|
- }
|
|
|
- }
|
|
|
+ .zt-mod-header, .zt-sidebar-zt, .zt-sidebar-tool {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .zt-inner {
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .zt-mod-nav {
|
|
|
+ li {
|
|
|
+ &:last-child {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ width: wpx2rem(312);
|
|
|
+ height: wpx2rem(180);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .zt-link-more {
|
|
|
+ &.ext-about {
|
|
|
+ font-size: wpx2rem(48);
|
|
|
+ width: wpx2rem(432);
|
|
|
+ height: wpx2rem(135);
|
|
|
+ line-height: wpx2rem(150);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .page-about {
|
|
|
+ .ab-section {
|
|
|
+ .section-cont {
|
|
|
+ float: initial;
|
|
|
+ width: auto;
|
|
|
+ margin: 0 px2rem(36) 0 px2rem(24);
|
|
|
+ h2 {
|
|
|
+ font-size: wpx2rem(51);
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ margin-top: wpx2rem(30);
|
|
|
+ font-size: wpx2rem(27);
|
|
|
+ line-height: wpx2rem(48);
|
|
|
+ }
|
|
|
+ .cont-opr {
|
|
|
+ margin: wpx2rem(30) wpx2rem(27) 0;
|
|
|
+ width: auto;
|
|
|
+ height: wpx2rem(345);
|
|
|
+ ul {
|
|
|
+ font-size: wpx2rem(24);
|
|
|
+ line-height: wpx2rem(48);
|
|
|
+ padding: 0 wpx2rem(60) 0 wpx2rem(69);
|
|
|
+ }
|
|
|
+ h3 {
|
|
|
+ font-size: wpx2rem(39);
|
|
|
+ height: wpx2rem(60);
|
|
|
+ line-height: wpx2rem(72);
|
|
|
+ padding-left: wpx2rem(78);
|
|
|
+ margin: wpx2rem(36) 0 0 wpx2rem(30);
|
|
|
+ }
|
|
|
+ i {
|
|
|
+ font-size: wpx2rem(15);
|
|
|
+ height: wpx2rem(27);
|
|
|
+ line-height: wpx2rem(27);
|
|
|
+ min-width: wpx2rem(27);
|
|
|
+ margin-right: wpx2rem(15);
|
|
|
+ &.icon-mouse {
|
|
|
+ height: wpx2rem(39);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .section-image {
|
|
|
+ float: initial;
|
|
|
+ width: wpx2rem(598);
|
|
|
+ margin: 0 0 wpx2rem(72) wpx2rem(30);
|
|
|
+ &.ext-video {
|
|
|
+ width: wpx2rem(390);
|
|
|
+ }
|
|
|
+ .icon-play {
|
|
|
+ width: wpx2rem(114);
|
|
|
+ height: wpx2rem(99);
|
|
|
+ margin: wpx2rem(-49) 0 0 wpx2rem(-57);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ab-section1 {
|
|
|
+ padding: wpx2rem(570) 0 px2rem(48) 0;
|
|
|
+ height: auto;
|
|
|
+ background-image: url(/src/img/wap/about/bg1.jpg);
|
|
|
+ }
|
|
|
+ .ab-section2 {
|
|
|
+ padding: wpx2rem(570) 0 px2rem(48) 0;
|
|
|
+ height: auto;
|
|
|
+ background-image: url(/src/img/wap/about/bg2.jpg);
|
|
|
+ }
|
|
|
+ .ab-section3 {
|
|
|
+ padding: wpx2rem(69) 0 px2rem(48) 0;
|
|
|
+ height: auto;
|
|
|
+ background-image: url(/src/img/wap/about/bg3.jpg);
|
|
|
+ }
|
|
|
+ .ab-section4 {
|
|
|
+ position: relative;
|
|
|
+ padding: wpx2rem(450) 0 px2rem(84) 0;
|
|
|
+ height: auto;
|
|
|
+ background-image: url(/src/img/wap/about/bg4.jpg);
|
|
|
+ .section-image {
|
|
|
+ position: absolute;
|
|
|
+ top: wpx2rem(132);
|
|
|
+ right: wpx2rem(15);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ab-section5 {
|
|
|
+ padding: wpx2rem(54) 0 px2rem(48) 0;
|
|
|
+ height: auto;
|
|
|
+ background-image: none;
|
|
|
+ background-color: #4b566a;
|
|
|
+ .section-cont {
|
|
|
+ h2 {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ab-section6 {
|
|
|
+ position: relative;
|
|
|
+ padding: wpx2rem(450) 0 px2rem(48) 0;
|
|
|
+ height: auto;
|
|
|
+ background-image: url(/src/img/wap/about/bg6.jpg);
|
|
|
+ .section-cont {
|
|
|
+ h2 {
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .section-image {
|
|
|
+ position: absolute;
|
|
|
+ top: wpx2rem(48);
|
|
|
+ right: wpx2rem(48);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ab-section7 {
|
|
|
+ padding: wpx2rem(64) 0 px2rem(180) 0;
|
|
|
+ height: auto;
|
|
|
+ background-image: url(/src/img/wap/about/bg7.jpg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 头部图片及头部导航
|
|
|
+ .zt-mod-primary{
|
|
|
+ img{
|
|
|
+ width: 100%;
|
|
|
+ height: px2rem(750);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .zt-mod-nav{
|
|
|
+ li{
|
|
|
+ margin: 0.12rem;
|
|
|
+ h2{
|
|
|
+ font-size: 0.9rem;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 1.1;
|
|
|
+ transform: translate3d(px2rem(90), px2rem(70), 0);
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ font-size: 0.6rem;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 1.1;
|
|
|
+ transform: translate3d(px2rem(90), px2rem(90), 0);
|
|
|
+ }
|
|
|
+ .bg-nav{
|
|
|
+ &::before{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 适配公共类
|
|
|
+ .icon-arrow{
|
|
|
+ background-image: url("src/img/require/text-icon-arrow.png");
|
|
|
+ width: px2rem(70);
|
|
|
+ height: px2rem(100);
|
|
|
+ background-size: contain;
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ right: px2rem(50);
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-40%);
|
|
|
+ }
|
|
|
+ .page-require .re-section .section-hd {
|
|
|
+ height: 3rem;
|
|
|
+ }
|
|
|
+ .zt-box {
|
|
|
+ margin: 0 3px;
|
|
|
+ .box-hd {
|
|
|
+ margin-left: px2rem(60);
|
|
|
+ padding: 0 10px;
|
|
|
+ &::after, &::before {
|
|
|
+ height: 230%;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ font-size: 0.6rem;
|
|
|
+ line-height: 2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-bd {
|
|
|
+ .box-bd_cont {
|
|
|
+ border: 0.15rem solid #FFFFFF;
|
|
|
+ padding: 0.7666rem 1rem;
|
|
|
+ p {
|
|
|
+ font-size: 0.6rem;
|
|
|
+ line-height: 1.5;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+ margin-bottom: px2rem(100);
|
|
|
+ }
|
|
|
+ .ui-carousel {
|
|
|
+ margin-top: px2rem(50);
|
|
|
+ height: px2rem(1400);
|
|
|
+ min-height: px2rem(1400);
|
|
|
+ .banner-wrap {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .ui-carousel__content {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .ui-carousel__item {
|
|
|
+ height: 100%;
|
|
|
+ width: 13.5rem;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 5px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .re-view-wrap {
|
|
|
+ margin: 0;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .pic-item_pic {
|
|
|
+ width: 100%;
|
|
|
+ height: px2rem(800);
|
|
|
+ position: relative;
|
|
|
+ z-index: 9;
|
|
|
+ background-size: cover;
|
|
|
+ &.pic_1{
|
|
|
+ background-image: url(/src/img/wap/about/swiper-item-image.png);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pic-item_title {
|
|
|
+ font-size: 0.7rem;
|
|
|
+ margin: px2rem(32) 0;
|
|
|
+ text-indent: 4px;
|
|
|
+ line-height: 1.3;
|
|
|
+ }
|
|
|
+ .pic-item_desc {
|
|
|
+ font-size: 0.555rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ui-carousel__prev {
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%) scale3d(2.5, 2.5, 2.5);
|
|
|
+ left: -0.7rem;
|
|
|
+ }
|
|
|
+ .ui-carousel__next {
|
|
|
+ right: -0.7rem;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%) scale3d(2.5, 2.5, 2.5);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ };
|
|
|
+ .h5-hide-hook{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .web-hide-hook{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ // page2
|
|
|
+ #section21{
|
|
|
+ .list-pic{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ #section22{
|
|
|
+ .list-pic{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .ext-video{
|
|
|
+ margin-top: px2rem(40);
|
|
|
+ width: 100%;
|
|
|
+ height: px2rem(700);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ #section23{
|
|
|
+ .list-pic{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ #section24{
|
|
|
+ .box-bd_cont{
|
|
|
+ padding-left: 0.1rem;
|
|
|
+ }
|
|
|
+ .list-txt{
|
|
|
+ li {
|
|
|
+ width: calc(50% - 14px);
|
|
|
+ height: px2rem(200);
|
|
|
+ text-align: center;
|
|
|
+ margin: px2rem(28) 7px;
|
|
|
+ span{
|
|
|
+ &::before{
|
|
|
+ transform: scale3d(3,3,3) rotateZ(45deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ a{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ line-height: px2rem(200);
|
|
|
+ font-size: 0.5555rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ #section3{
|
|
|
+ .section-hd{
|
|
|
+ height: 1rem;
|
|
|
+ }
|
|
|
+ .box-bd_cont{
|
|
|
+ padding: 0.7666rem 0.4rem;
|
|
|
+ }
|
|
|
+ .section-bd{
|
|
|
+ margin-top: px2rem(100);
|
|
|
+ .box-tab_nav{
|
|
|
+ border-collapse:separate;
|
|
|
+ border-spacing:5px 10px;
|
|
|
+ .box-tab_nav_pc{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ td{
|
|
|
+ text-align: center;
|
|
|
+ height: px2rem(160);
|
|
|
+ line-height: px2rem(160);
|
|
|
+ font-size: 0.6rem;
|
|
|
+ width: px2rem(1000);
|
|
|
+ }
|
|
|
+ li{
|
|
|
+ text-align: center;
|
|
|
+ height: px2rem(160);
|
|
|
+ line-height: px2rem(160);
|
|
|
+ font-size: 0.6rem;
|
|
|
+ width: px2rem(1000);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-tab_desc{
|
|
|
+ width: 100%;
|
|
|
+ text-align: left;
|
|
|
+ margin-bottom: px2rem(40);
|
|
|
+ }
|
|
|
+ .ui-carousel__item{
|
|
|
+ width: 13.666666rem;
|
|
|
+ margin-left: 0.5rem;
|
|
|
+ margin-right: 0.5rem;
|
|
|
+ background-color: inherit;
|
|
|
+ .item-weapon{
|
|
|
+ width: 45%;
|
|
|
+ height: 100%;
|
|
|
+ float: left;
|
|
|
+ &:first-child{
|
|
|
+ margin-right: px2rem(120);
|
|
|
+ }
|
|
|
+ .weapon-img{
|
|
|
+ width: 100%;
|
|
|
+ height: 75%;
|
|
|
+ background-image: url(src/img/require/bg-show.png);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ position: relative;
|
|
|
+ img{
|
|
|
+ position: absolute;
|
|
|
+ top: 25%;
|
|
|
+ width: 120%;
|
|
|
+ left: px2rem(-40);
|
|
|
+ }
|
|
|
+ .weapon-tag{
|
|
|
+ width: px2rem(300);
|
|
|
+ height: px2rem(150);
|
|
|
+ position: absolute;
|
|
|
+ left: px2rem(-30);
|
|
|
+ top: px2rem(60);
|
|
|
+ background-image: url('src/img/require/arms-tag-bg.png');
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ line-height: px2rem(130);
|
|
|
+ font-size: 0.6rem;
|
|
|
+ color: #333;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .weapon-desc{
|
|
|
+ margin-top: px2rem(-60);
|
|
|
+ font-size: .6rem;
|
|
|
+ line-height: 1.4;
|
|
|
+ color: #fff;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ui-carousel__next{
|
|
|
+ right: 0.1rem;
|
|
|
+ }
|
|
|
+ .ui-carousel__prev{
|
|
|
+ left: 0rem;
|
|
|
+ }
|
|
|
+ .to-weapon-sql{
|
|
|
+ display: block;
|
|
|
+ width: px2rem(1000);
|
|
|
+ height: px2rem(300);
|
|
|
+ margin: 0 auto;
|
|
|
+ background-image: url("src/img/require/to-weapon-sql.png");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ line-height: px2rem(300);
|
|
|
+ color: #716c14;
|
|
|
+ font-size: 0.8rem;
|
|
|
+ font-weight: bold;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ #section32{
|
|
|
+ .list-rarity{
|
|
|
+ width: 100%;
|
|
|
+ li{
|
|
|
+ width: 45%;
|
|
|
+ height: px2rem(750);
|
|
|
+ float: left;
|
|
|
+ margin: 0 auto;
|
|
|
+ position: relative;
|
|
|
+ margin: px2rem(40) px2rem(40);
|
|
|
+ border: 3px solid #fff;
|
|
|
+ img{
|
|
|
+ position: absolute;
|
|
|
+ left: -3px;
|
|
|
+ top: -3px;
|
|
|
+ width: px2rem(320);
|
|
|
+ height: px2rem(320);
|
|
|
+ }
|
|
|
+ &:last-child{
|
|
|
+ transform: translateX(55%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ #section33{
|
|
|
+ .box-tab_nav{
|
|
|
+ td{
|
|
|
+ width: px2rem(700);
|
|
|
+ &::after{
|
|
|
+ width: 1.2rem;
|
|
|
+ height: 1.48333rem;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ #section34{
|
|
|
+ .list-recommend{
|
|
|
+ width: 100%;
|
|
|
+ .recommend-item{
|
|
|
+ width: 100%;
|
|
|
+ height: px2rem(1000);
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: px2rem(60);
|
|
|
+ .fl{
|
|
|
+ width: 100%;
|
|
|
+ float: none;
|
|
|
+ h3{
|
|
|
+ font-size: 0.8rem;
|
|
|
+ line-height: 1.4;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ font-weight: normal;
|
|
|
+ margin-bottom: px2rem(100);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-arms{
|
|
|
+ li{
|
|
|
+ margin: 0 5px;
|
|
|
+ width: calc(2.3rem - 10px);
|
|
|
+ height: calc(2.3rem - 10px);
|
|
|
+ .arms-cover{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ em{
|
|
|
+ font-size: 0.6rem;
|
|
|
+ margin-top: px2rem(40);
|
|
|
+ padding: 5px 3px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ #section42{
|
|
|
+ .box-bd_cont{
|
|
|
+ padding: 0.76666rem 0.5rem;
|
|
|
+ .box-tab_nav{
|
|
|
+ border-collapse:separate;
|
|
|
+ border-spacing:10px 10px;
|
|
|
+ td{
|
|
|
+ height: px2rem(180);
|
|
|
+ line-height: px2rem(180);
|
|
|
+ font-size: 0.6rem;
|
|
|
+ width: px2rem(700);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-tab_desc{
|
|
|
+ width: 100%;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .ui-carousel__content{
|
|
|
+ .ui-carousel__item{
|
|
|
+ width: calc(14.453333rem - 1rem);
|
|
|
+ margin-left: 0.5rem;
|
|
|
+ margin-right: 0.5rem;
|
|
|
+ background-color: inherit;
|
|
|
+ .item-weapon{
|
|
|
+ width: 45%;
|
|
|
+ height: 100%;
|
|
|
+ float: left;
|
|
|
+ &:first-child{
|
|
|
+ margin-right: px2rem(120);
|
|
|
+ }
|
|
|
+ .weapon-img{
|
|
|
+ width: 100%;
|
|
|
+ height: 75%;
|
|
|
+ background-image: url(src/img/require/bg-show2.png);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ position: relative;
|
|
|
+ img{
|
|
|
+ position: absolute;
|
|
|
+ top: 25%;
|
|
|
+ width: 120%;
|
|
|
+ left: px2rem(-40);
|
|
|
+ }
|
|
|
+ .play-icon{
|
|
|
+ position: absolute;
|
|
|
+ left: 75%;
|
|
|
+ transform: translateY(px2rem(450));
|
|
|
+ width: px2rem(100);
|
|
|
+ height: px2rem(100);
|
|
|
+ }
|
|
|
+ .weapon-tag{
|
|
|
+ width: px2rem(300);
|
|
|
+ height: px2rem(150);
|
|
|
+ position: absolute;
|
|
|
+ left: px2rem(-30);
|
|
|
+ top: px2rem(60);
|
|
|
+ background-image: url('src/img/require/arms-tag-bg.png');
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ line-height: px2rem(130);
|
|
|
+ font-size: 0.6rem;
|
|
|
+ color: #333;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .weapon-desc{
|
|
|
+ margin-top: px2rem(-60);
|
|
|
+ font-size: .5555rem;
|
|
|
+ line-height: 1.4;
|
|
|
+ color: #fff;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ui-carousel__next{
|
|
|
+ right: 0.1rem;
|
|
|
+ }
|
|
|
+ .ui-carousel__prev{
|
|
|
+ left: -0.1rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ #section43{
|
|
|
+ .list-recommend{
|
|
|
+ margin-top: px2rem(60);
|
|
|
+ li{
|
|
|
+ float: none;
|
|
|
+ width: 100%;
|
|
|
+ .item-cover{
|
|
|
+ width: px2rem(360);
|
|
|
+ height: px2rem(440);
|
|
|
+ margin-right: 10px;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ h3{
|
|
|
+ font-size: 0.6rem;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 1.5;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ padding-left: 10px;
|
|
|
+ font-size: 0.5555rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ #section52{
|
|
|
+ .box-bd_cont{
|
|
|
+ padding: 0.7666rem 0.5rem;
|
|
|
+ }
|
|
|
+ .box-tab-lr{
|
|
|
+ margin: 0;
|
|
|
+ .box-tab_nav{
|
|
|
+ position: static;
|
|
|
+ li{
|
|
|
+ float: left;
|
|
|
+ width: 31%;
|
|
|
+ height: px2rem(160);
|
|
|
+ line-height: px2rem(160);
|
|
|
+ margin: 3px 3px;
|
|
|
+ a{
|
|
|
+ font-size: 0.6rem;
|
|
|
+ color: #a86300;
|
|
|
+ }
|
|
|
+ &.active{
|
|
|
+ border: none;
|
|
|
+ padding-right: 0;
|
|
|
+ a{
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-tab_cont{
|
|
|
+ float: none;
|
|
|
+ width: 100%;
|
|
|
+ .cont-skew_top{
|
|
|
+ transform: none;
|
|
|
+ border: none;
|
|
|
+ background-color: inherit;
|
|
|
+ }
|
|
|
+ .cont-skew_bottom{
|
|
|
+ transform: none;
|
|
|
+ border: none;
|
|
|
+ background-color: inherit;
|
|
|
+ }
|
|
|
+ .panel-cont{
|
|
|
+ div.fl{
|
|
|
+ float: none;
|
|
|
+ width: 100%;
|
|
|
+ .source-cover{
|
|
|
+ width: 100%;
|
|
|
+ height: px2rem(1000);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .source-score{
|
|
|
+ float: none;
|
|
|
+ li{
|
|
|
+ width: 50%;
|
|
|
+ float: left;
|
|
|
+ line-height: 1.5;
|
|
|
+ position: relative;
|
|
|
+ label{
|
|
|
+ font-size: 0.5555rem;
|
|
|
+ }
|
|
|
+ .star{
|
|
|
+ transform: scale3d(2,2,2);
|
|
|
+ position: absolute;
|
|
|
+ left: 60%;
|
|
|
+ top: px2rem(40);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ color:rgba(255,255,255,.5);
|
|
|
+ font-size: 0.555555rem;
|
|
|
+ line-height: 1.2;
|
|
|
+ margin-top: 5px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ #section6{
|
|
|
+ padding: 1.08333rem 0 0 0;
|
|
|
+ .box-bd_cont{
|
|
|
+ padding: 0.7666rem 0.3rem;
|
|
|
+ }
|
|
|
+ .section-hd{
|
|
|
+ height: 1.3rem;
|
|
|
+ }
|
|
|
+ #section61{
|
|
|
+ margin-top: px2rem(120);
|
|
|
+ }
|
|
|
+ .reward-refresh{
|
|
|
+ background-image: url("src/img/require/to-weapon-sql.png");
|
|
|
+ margin: px2rem(60) auto ;
|
|
|
+ position: relative;
|
|
|
+ color: #716c14;
|
|
|
+ }
|
|
|
+ .box-tab_nav{
|
|
|
+ border-collapse:separate;
|
|
|
+ border-spacing: 10px 5px;
|
|
|
+ td{
|
|
|
+ width: px2rem(1300);
|
|
|
+ height: px2rem(160);
|
|
|
+ border: none;
|
|
|
+ transform: initial;
|
|
|
+ a{
|
|
|
+ line-height: px2rem(160);
|
|
|
+ font-size: 0.6rem;
|
|
|
+ }
|
|
|
+ &.active{
|
|
|
+ transform: none;
|
|
|
+ }
|
|
|
+ &::before{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-tab_cont{
|
|
|
+ border: none;
|
|
|
+ background-color: initial;
|
|
|
+ .award-cover{
|
|
|
+ float: none;
|
|
|
+ width: 100%;
|
|
|
+ height: px2rem(300);
|
|
|
+ }
|
|
|
+ .award-table{
|
|
|
+ float: none;
|
|
|
+ width: 100%;
|
|
|
+ h3{
|
|
|
+ color: #fff;
|
|
|
+ font-size: 0.7rem;
|
|
|
+ line-height: 1.2;
|
|
|
+ }
|
|
|
+ tr{
|
|
|
+ height: px2rem(180);
|
|
|
+ font-size: 0.6rem;
|
|
|
+ line-height: px2rem(180);
|
|
|
+ td{
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .next-page{
|
|
|
+ background-image: url("src/img/bg-more_about.png");
|
|
|
+ margin: px2rem(300) auto !important;
|
|
|
+ position: relative;
|
|
|
+ color: #716c14;
|
|
|
+ }
|
|
|
+ .text-bg{
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ line-height: px2rem(300);
|
|
|
+ color: #666;
|
|
|
+ font-size: 0.8rem;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+ display: block;
|
|
|
+ width: px2rem(1000);
|
|
|
+ height: px2rem(300);
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ // page3
|
|
|
+ #page3{
|
|
|
+ .section-hd{
|
|
|
+ height: 1.5rem;
|
|
|
+ margin-top: 0.4rem;
|
|
|
+ margin-bottom: 1rem;
|
|
|
+ }
|
|
|
+ .zt-link-more{
|
|
|
+ width: 7.575rem;
|
|
|
+ height: 1.875rem;
|
|
|
+ line-height: 2.175rem;
|
|
|
+ font-size: 0.7rem;
|
|
|
+ margin: 0.75rem auto 0;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ #section12{
|
|
|
+ .box-bd_cont{
|
|
|
+ padding: 0.7666rem 0.3rem;
|
|
|
+ }
|
|
|
+ .box-tab_nav{
|
|
|
+ position: static;
|
|
|
+ width: 100%;
|
|
|
+ li{
|
|
|
+ width: calc(25% - 10px);
|
|
|
+ float: left;
|
|
|
+ height: px2rem(200);
|
|
|
+ margin: 5px;
|
|
|
+ &::before{
|
|
|
+ transform: none;
|
|
|
+ }
|
|
|
+ a{
|
|
|
+ width: 100%;
|
|
|
+ line-height: px2rem(200);
|
|
|
+ font-size: 0.6rem;
|
|
|
+ &::before{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.active{
|
|
|
+ border: none;
|
|
|
+ padding-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-tab_cont{
|
|
|
+ float: none;
|
|
|
+ position: static;
|
|
|
+ width: 100%;
|
|
|
+ margin-top: px2rem(50);
|
|
|
+ .panel-cont{
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ .cont-skew_top,.cont-skew_bottom{
|
|
|
+ transform: none;
|
|
|
+ border: none;
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ img{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ #section13{
|
|
|
+ .box-bd_cont{
|
|
|
+ padding: 0.7666rem 0.3rem;
|
|
|
+ }
|
|
|
+ .shop-box{
|
|
|
+ float: none;
|
|
|
+ width: 95%;
|
|
|
+ .shop-hd{
|
|
|
+ width: 4.75rem;
|
|
|
+ font-size: 0.7rem;
|
|
|
+ line-height: 1.45rem;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ &:first-child{
|
|
|
+ margin-top: px2rem(100);
|
|
|
+ }
|
|
|
+ &:not(:first-child){
|
|
|
+ margin-top: px2rem(150);
|
|
|
+ }
|
|
|
+ .zt-list-goods{
|
|
|
+ padding: 0.65rem 0.35rem 0.65rem 0.35rem;
|
|
|
+ }
|
|
|
+ .shop-bd{
|
|
|
+ &::before{
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ &::after{
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ .zt-list-goods{
|
|
|
+ .week-free{
|
|
|
+ width: 45%;
|
|
|
+ border-width: 3px;
|
|
|
+ margin-right: px2rem(40);
|
|
|
+ &:last-child{
|
|
|
+ border-color: #2cd070;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .day-free{
|
|
|
+ width: 30%;
|
|
|
+ border-width: 3px;
|
|
|
+ margin-right: px2rem(40);
|
|
|
+ margin-bottom: px2rem(40);
|
|
|
+ }
|
|
|
+ .mask{
|
|
|
+ h4{
|
|
|
+ font-size: 0.5rem;
|
|
|
+ line-height: 1.3;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ padding-left: 0.625rem;
|
|
|
+ background: url(../..//img/advanced/icon-gold.png) 0 center/0.5rem no-repeat
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ #section22{
|
|
|
+ .pic-map{
|
|
|
+ width: 13.625rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ #section32{
|
|
|
+ .list-task{
|
|
|
+ margin: 0.5rem 0;
|
|
|
+ li{
|
|
|
+ margin-bottom: 1rem;
|
|
|
+ padding: 0.3rem;
|
|
|
+ h3{
|
|
|
+ font-size: 0.6rem;
|
|
|
+ line-height: 1.2;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ font-size: 0.5rem;
|
|
|
+ }
|
|
|
+ img{
|
|
|
+ width: 90%;
|
|
|
+ margin: px2rem(50) auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .page-bottom{
|
|
|
+ width: 100%;
|
|
|
+ height: px2rem(1000);
|
|
|
+ background: linear-gradient(#B0A376, #eee, #eee, #fff);
|
|
|
+ position: relative;
|
|
|
+ .bottom-btn{
|
|
|
+ display: block;
|
|
|
+ float: left;
|
|
|
+ position: relative;
|
|
|
+ width: calc(50% - 2rem);
|
|
|
+ height: px2rem(350);
|
|
|
+ text-align: center;
|
|
|
+ line-height: px2rem(300);
|
|
|
+ font-size: 0.7rem;
|
|
|
+ font-weight: 900;
|
|
|
+ margin: 0 1rem;
|
|
|
+ background-image: url('src/img/bg-more_about.png');
|
|
|
+ background-size: cover;
|
|
|
+ color:#865813;
|
|
|
+ top: 30%;
|
|
|
+ &:first-child{
|
|
|
+ &::before{
|
|
|
+ position: absolute;
|
|
|
+ content: '开始锄宗生涯';
|
|
|
+ font-size: 0.5rem;
|
|
|
+ color: #865813;
|
|
|
+ top: 27%;
|
|
|
+ left: 27%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:last-child{
|
|
|
+ &::before{
|
|
|
+ position: absolute;
|
|
|
+ content: '查看疑难解答';
|
|
|
+ font-size: 0.5rem;
|
|
|
+ color: #865813;
|
|
|
+ top: 27%;
|
|
|
+ left: 27%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // page4
|
|
|
+ #page4{
|
|
|
+ .list-problem{
|
|
|
+ h4{
|
|
|
+ font-size: 0.6rem;
|
|
|
+ margin-top: px2rem(60);
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ text-indent: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .page-bottom{
|
|
|
+ width: 100%;
|
|
|
+ height: px2rem(1000);
|
|
|
+ background: linear-gradient(#68869E, #eee, #eee, #fff);
|
|
|
+ position: relative;
|
|
|
+ .remember{
|
|
|
+ position: relative;
|
|
|
+ top: 40%;
|
|
|
+ background-image: url("src/img/bg-more_about.png");
|
|
|
+ color: #865813 !important;
|
|
|
+ &::before{
|
|
|
+ content: '开始我的锄宗生涯';
|
|
|
+ color: #865813;
|
|
|
+ font-size: 0.2rem;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate3d(-50%, -20%, 0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
