.index-wrap{ width: 100%; height: 100%; background:url("../../img/zxx/index_bj.jpg") no-repeat center; background-size: 100% 100%; position: relative; } .back { color: #fff; font-size: 0.09375rem; line-height: 0.09375rem; cursor: pointer; } .hearLogo{ width: 0.984375rem; height: 0.3698rem; } .titleName{ display: flex; flex-direction: column; align-items: center; margin-left: 0.0521rem; } .titleName h1{ color: #fff; font-size: 0.099rem; font-family: '微软雅黑'; } .titleName h2{ margin-top: 0.0521rem; color: #fff; font-size: 0.09375rem; font-family: '微软雅黑'; } .bjGif{ position: absolute; left: 20%; top:calc(50% - 1.03125rem); /*width: 3.7396rem; height: 2.0625rem;*/ } .bj_gif{ position: absolute; left: calc(50% - 1.8698rem); top:calc(50% - 1.03125rem); width: 3.7396rem; height: 2.0625rem; } .index-header{ background:url("../../img/zxx/header_bj.png") no-repeat center; background-size: 100% 100%; width: 9.7917rem; height: 0.5729rem; margin: 0 auto; display: flex; align-items: center; justify-content: center; position: relative; } .titlesBox{ display: flex; align-items: center; justify-content: center; } .titlesBox .title1{ color: #fff; font-size: 0.1615rem; letter-spacing: 1px; text-align: center; line-height: 0.2083rem; font-family: 'Adobe 黑体 Std'; } .titlesBox .title2{ color: #00b4ff; font-size: 0.0625rem; text-align: center; line-height: 0.125rem; } .nav-left{ position: absolute; left: 0.7292rem; top:50%; width: calc(30% - 0.7292rem); display: flex; } .nav-left a{ color: #fff; font-size: 0.09375rem; line-height: 0.09375rem; } .active{ border-bottom: 2px solid #00f0ff; color: #00f0ff!important; } .nav-right{ position: absolute; right: 0.5208rem; top:50%; width: calc(30% - 0.5208rem); display: flex; } .nav-block{ display: flex; align-items: center; } .nav-block img{ width: 0.1458rem; height: 0.1458rem; margin: 0 auto; cursor: pointer; } .areaUnlock-box{ width: 100%; padding: 0 0.3125rem; box-sizing: border-box; height: calc(100% - 0.93745rem); margin-bottom: 0.2083rem; display: flex; margin-top: 0.15625rem; } .areaUnlock-left{ width: 1.5625rem; height: 100%; display: flex; flex-direction: column; } .areaUnlock-inside{ height: calc(100% - 0.2083rem); overflow-y: scroll; margin-top: 0.2083rem; } .areaUnlock-inside::-webkit-scrollbar{ width: 0 !important } .areaUnlock-inside { -ms-overflow-style: none; } .areaUnlock-inside { scrollbar-width: none;} .areaUnlock-block{ background:url("../../img/zxx/unLockLeftBj.png") no-repeat center; width: 1.3333rem; height: 0.34375rem; background-size: 100% 100%; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 0.0729rem; margin-top: 0.05625rem; cursor: pointer; } .fifterBox{ background:url("../../img/zxx/unLockLeftBj2.png") no-repeat center; width: 1.3333rem; height: 0.34375rem; background-size: 100% 100%; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 0.0729rem; margin-top: 0.05625rem; cursor: pointer; } .unlockTop-block{ background:url("../../img/zxx/unLockRightBj.png") no-repeat center; width: calc(12% - 20px); height: 0.4875rem; background-size: 100% 100%; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 0.0729rem; cursor: pointer; margin:20px 10px; } .checkedTopNav{ background:url("../../img/zxx/unLockRightBj2.png") no-repeat center; width: calc(12% - 20px); height: 0.4875rem; background-size: 100% 100%; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 0.0729rem; cursor: pointer; margin:20px 10px; } .areaUnlock-right{ width: 100%; height: 100%; overflow:hidden; } .tabs-content-placeholder{ width: calc(100% - 1.5625rem); height: 100%; } .areaUnlock-top{ display: flex; flex-wrap: wrap; height: 0.78125rem; align-items: center; overflow-y: scroll } .areaUnlock-top::-webkit-scrollbar { display: none; } .unlockTop-block{ /*flex:1;*/ /*margin: 0 0.1042rem;*/ } .areaUnlock-bottom{ background:url("../../img/zxx/unlock-bj.png") no-repeat center; width: 100%; height: calc(100% - 0.78125rem); background-size: 100% 100%; padding:0.2083rem; box-sizing: border-box; } .areaUnlock-bottom-inside{ width: 100%; height: 100%; padding:20px 0; box-sizing: border-box; display: flex; flex-wrap: wrap; align-content:flex-start; overflow-y: scroll; } .areaUnlock-bottom-inside::-webkit-scrollbar{ width: 0 !important } .areaUnlock-bottom-inside { -ms-overflow-style: none; } .areaUnlock-bottom-inside { scrollbar-width: none;} .unlockBlockBox{ background:url("../../img/zxx/unlockBlockImg.png") no-repeat center; width: 17%; height: 0.9958rem; background-size: 100% 100%; display: flex; flex-direction: column; align-items: center; padding:0.1042rem 0.1042rem; box-sizing: border-box; margin:0.1042rem 0.15625rem; } .jinduTiao{ width: 0.40625rem; height: 0.0833rem; margin-top: 0.026rem; } /*.tiaoRed{ background-color: #ff0a4f; box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.19), inset 0px -4px 2px 0px rgba(0, 0, 0, 0.3); border-radius: 4px; }*/ .smallLogo{ width: 0.2708rem; height: 0.1146rem; margin-top: 0.026rem; } .unlockBlockBox h1{ color: #fff; font-size: 0.0521rem; margin-top: 0.026rem; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .zhiwenImg{ width: 0.15625rem; height: 0.15625rem; margin-top: 0.026rem; } .unlockBlockBox h2{ color: #00f0ff; font-size: 10px; align-self: flex-end; margin-top: 0.026rem; cursor: pointer; }