.sector{ opacity: 0; width: 100%; height: 100%; /*width: 1.448rem; height: 1.448rem;*/ float: left; } ._item.fe-focus { /*background-color: rgb(76, 172, 222); border-radius: 70px;*/ background-image: url(http://gtms03.alicdn.com/tps/i3/TB1eAWKJXXXXXXwXXXXszjdGpXX-140-140.png); background-size: 1.447rem 1.447rem; background-repeat: no-repeat; border-color: transparent; /* box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5); */ } .key-input-panel { height: 1.334rem; } .key-input-frame { width: 5.1rem; height: 0.77rem; line-height: 0.77rem; margin: 0 auto; border-radius: .5rem; background: white; } .key-input-panel .search-icon { width: .39rem; height: .4rem; margin: .2rem .2rem 0 0; float: right; } #j-search-panel-tip { font-size: .5rem; height: 100%; width: 4.5rem; float: left; text-align: center; overflow: hidden; } .key-panel { height: 7.812rem; position: relative; } .key-panel ul { /*border-top: .005rem solid rgba(255, 255, 255, 0.5);*/ padding-top: .332rem; margin: 0 auto; width: 5.1rem; overflow: hidden; /*最右侧的margin-right = 0*/ /*delete back*/ } .key-panel ul li { width: 1.458rem; height: 1.458rem; text-align: center; float: left; margin-top: .425rem; margin-right: .351rem; color: #fff; border: solid 1px #929bab; border-radius: 2rem; } .key-panel ul li .digit { font-size: .625rem; opacity: 0.5; } .key-panel ul li.fe-focus .digit { font-size: .625rem; opacity: 1; } .key-panel ul li .letter { margin-top: -0.2rem; font-size: .338rem; } .key-panel ul #key1, .key-panel ul #key2, .key-panel ul #key3 { margin-top: 0; } .key-panel ul #key7, .key-panel ul #key8, .key-panel ul #key9 { /*margin-top: .646rem; */ margin-top: .351rem; } .key-panel ul #key3, .key-panel ul #key6, .key-panel ul #key9, .key-panel ul #key12 { margin-right: 0; } .key-panel ul #key10, .key-panel ul #key12 { text-align: center; font-size: .333rem; } .key-panel ul #key10 img, .key-panel ul #key12 img { width: .5rem; height: .396rem; position: relative; top: .271rem; } .key-panel ul #key10 div, .key-panel ul #key12 div { position: relative; top: .312rem; opacity: 0.5; font-size: .333rem; } .search-popup { position: absolute; top: .677rem; left: .948rem; /*background-color: #615e5e;*/ width: 2.916rem; height: 2.916rem; border-radius: 1.458rem; -webkit-transform: rotate(45deg); transform: rotate(45deg); box-shadow: .0521rem .0521rem .0521rem rgba(0, 0, 0, 0.5); background-image: url(http://gtms01.alicdn.com/tps/i1/TB1V01sJXXXXXXGXVXX4_MlUFXX-280-280.png); background-size: 2.916rem 2.916rem; background-repeat: no-repeat; overflow: hidden; } .search-popup .fe-focus img{ opacity: 1; } .search-popup .center-letter { width: 1.4584rem; height: 1.4584rem; text-align: center; line-height: 1.4584rem; background-color: rgb(55, 55, 55); margin-top: -.7292rem; position: absolute; top: 50%; margin-left: .7188rem; border-radius: .7192rem; box-shadow: .026rem .026rem .026rem rgba(0, 0, 0, 0.5); background-image: url(http://gtms02.alicdn.com/tps/i2/TB1m0eDJXXXXXXYXpXXszjdGpXX-140-140.png); background-size: 1.4584rem 1.4584rem; background-repeat: no-repeat; z-index: 100; } .search-popup .center-letter span { font-size: .438rem; color: #fff; /*position: relative;*/ position: absolute; top: 0px; left: .562rem; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .search-popup .zone { position: relative; /*width: 1.448rem; height: 1.448rem;*/ width: 1.348rem; height: 1.348rem; float: left; } .search-popup .zone span { font-size: .438rem; color: #fff; /*position: relative;*/ position: absolute; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .search-popup .zone.top-left { margin: 0; /*border-right: .006rem rgba(255, 255, 255, 0.2) solid; border-bottom: .006rem rgba(255, 255, 255, 0.2) solid;*/ } .search-popup .zone.top-left span { position: absolute; top: .42rem; left: .572rem; } .search-popup .zone.top-right { /*border-left: .006rem rgba(255, 255, 255, 0.2) solid; border-bottom: .006rem rgba(255, 255, 255, 0.2) solid;*/ margin-left: 0.2rem; /*background-position: -140px 0;*/ } .search-popup .zone.top-right span { position: absolute; top: .42rem; left: .572rem; } .search-popup .zone.down-left { /*border-top: .006rem rgba(255, 255, 255, 0.2) solid; border-right: .006rem rgba(255, 255, 255, 0.2) solid;*/ margin-top: 0.2rem; /*background-position: 0 -140px;*/ } .search-popup .zone.down-left span { position: absolute; top: .35rem; left: .55rem; } .search-popup .zone.down-right { /*border-top: .006rem rgba(255, 255, 255, 0.2) solid; border-left: .006rem rgba(255, 255, 255, 0.2) solid;*/ margin-top: 0.2rem; margin-left: 0.2rem; /*background-position: -140px -140px;*/ } .search-popup .zone.down-right span { position: absolute; top: .42rem; left: .572rem; }