|  |  | 
 |  |  |             margin-top: 1px; | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         .pointBox { | 
 |  |  |             background: #bababa; | 
 |  |  |             width: 40px; | 
 |  |  |             height: 40px; | 
 |  |  |             margin-right: 1px; | 
 |  |  |             display: flex; | 
 |  |  |             justify-content: center; | 
 |  |  |             align-items: center; | 
 |  |  |             font-size: 14px; | 
 |  |  |             user-select: none; | 
 |  |  |             color: #fff; | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         /*.pointBox {*/ | 
 |  |  |         /*    background: #bababa;*/ | 
 |  |  |         /*    width: 40px;*/ | 
 |  |  | 
 |  |  |         /*    font-size: 14px;*/ | 
 |  |  |         /*    user-select: none;*/ | 
 |  |  |         /*    color: #fff;*/ | 
 |  |  |         /*    transform: perspective(70px) rotateX(30deg) translateZ(-10px);*/ | 
 |  |  |         /*    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);*/ | 
 |  |  |         /*}*/ | 
 |  |  |  | 
 |  |  |         /*.pointBox {*/ | 
 |  |  |         /*    width: 100px;*/ | 
 |  |  |         /*    height: 100px;*/ | 
 |  |  |         /*    transform-style: preserve-3d;*/ | 
 |  |  |         /*    transform: rotateX(45deg) rotateY(45deg);*/ | 
 |  |  |         /*    box-shadow: -5px 5px 5px rgba(0,0,0,0.5);*/ | 
 |  |  |         /*    background: #e5e5e5;*/ | 
 |  |  |         /*    position: relative;*/ | 
 |  |  |         /*}*/ | 
 |  |  |  | 
 |  |  |         /*.pointBox:before, .cube:after {*/ | 
 |  |  |         /*    content: "";*/ | 
 |  |  |         /*    position: absolute;*/ | 
 |  |  |         /*    top: 0;*/ | 
 |  |  |         /*    left: 0;*/ | 
 |  |  |         /*    right: 0;*/ | 
 |  |  |         /*    bottom: 0;*/ | 
 |  |  |         /*    background: inherit;*/ | 
 |  |  |         /*    box-shadow: inherit;*/ | 
 |  |  |         /*}*/ | 
 |  |  |  | 
 |  |  |         /*!*.pointBox:before {*!*/ | 
 |  |  |         /*!*    transform: rotateY(90deg);*!*/ | 
 |  |  |         /*!*}*!*/ | 
 |  |  |  | 
 |  |  |         /*!*.pointBox:after {*!*/ | 
 |  |  |         /*!*    transform: rotateX(90deg);*!*/ | 
 |  |  |         /*!*}*!*/ | 
 |  |  |         .pointBox { | 
 |  |  |             background: #fffef9; | 
 |  |  |             width: 40px; | 
 |  |  |             height: 40px; | 
 |  |  |             margin-right: 1px; | 
 |  |  |             display: flex; | 
 |  |  |             justify-content: center; | 
 |  |  |             align-items: center; | 
 |  |  |             font-size: 14px; | 
 |  |  |             user-select: none; | 
 |  |  |             color: #fff; | 
 |  |  |             /*transform: perspective(130px) rotateX(30deg) translateZ(-20px);*/ | 
 |  |  |             box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         .pointBox:hover{ | 
 |  |  |             background: #00ff7f; | 
 |  |  |             /*background: #20a162;*/ | 
 |  |  |             /*background: #55bb8a;*/ | 
 |  |  |             background: #945833; | 
 |  |  |             /*background: #20894d;*/ | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         .pointBoxEmpty { | 
 |  |  |             background: #c2c934; | 
 |  |  |             /*background: #12a182;*/ | 
 |  |  |             background: #57c3c2; | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         .pointBoxOut { | 
 |  |  | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         .pointBoxInYy { | 
 |  |  |             background: #fa736f; | 
 |  |  |             background: #e2c027; | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         .pointBoxGreen { | 
 |  |  | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         .pointBoxBlue { | 
 |  |  |             background: #55aaff; | 
 |  |  |             background: #89BCEF; | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         .pointBoxRed { | 
 |  |  |             background: #ff0000; | 
 |  |  |             background: #ee4866; | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         .pointBoxStart { | 
 |  |  | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         .pointBoxDefault { | 
 |  |  |             background: #86779d; | 
 |  |  |             background: #f9f4dc; | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         .pointBoxSelected { | 
 |  |  |             background: #00ff7f !important; | 
 |  |  |             /*background: #945833 !important;*/ | 
 |  |  |             background: #20894d !important; | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         .pointBoxSearch { | 
 |  |  |             background: #9900ff; | 
 |  |  |             background: #8076a3; | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         .crnLine{ | 
 |  |  | 
 |  |  |                             <div style="font-size: 10px;">选择结果</div><div class="pointBox pointBoxSelected"></div> | 
 |  |  |                         </div> | 
 |  |  |                         <div style="flex: 1;margin-top: 10px;"> | 
 |  |  |                             <div style="font-size: 10px;">其他</div><div class="pointBox pointBoxDefault">其他</div> | 
 |  |  |                             <div style="font-size: 10px;text-align: center">其他</div><div class="pointBox pointBoxDefault"></div> | 
 |  |  |                         </div> | 
 |  |  |                     </div> | 
 |  |  |                 </div> |