.tooth-all{ display: block; } .tooth-all span{ display: block; } .div_td { float: left; color: #615c5c; text-align: center; } .left_up { border-bottom:1px #000000 solid; text-align: left; padding-left: 2px; } .right_up { border-bottom:1px #000000 solid; border-right:1px #000000 solid; text-align: right; padding-right: 2px; } .left_down { text-align: left; padding-left: 2px; } .right_down { border-right:1px #000000 solid; text-align: right; padding-right: 2px; } #tooth_popup_div { box-shadow: 0 0 10px rgb(0 0 0 / 20%); transition: .25s; color: #333; background-color: #FFF; padding: 10px; border-radius: 5px; z-index: 99999; width: 840px; position: fixed; left: calc(50% - 420px); top: calc(50% - 280px); } #tooth_popup_div .title { text-align: center; border-bottom: 1px solid #807b7b; height: 45px; line-height: 45px; font-weight: bold; } #tooth_popup_div .close_label { display: inline-block; cursor: pointer; width: 25px; position: absolute; right: 13px; top: 5px; } #tooth_popup_div .close { position: relative; width: 2px; height: 15px; background: #807b7b; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; } #tooth_popup_div .close:after { content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 15px; background: #807b7b; -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } #tooth_popup_div .content { width: 805px; height: 370px; } #tooth_popup_div .div_td { width: 400px; height: 110px; line-height: 110px; float: left; text-align: center; } .tooth-image span { display: inline-block; background-repeat: no-repeat; background-size: 45px 110px; width:45px; height: 110px; } /* 右上 */ .tooth_rght_up1 { background-image: url("./image/11.png"); } .tooth_rght_up2 { background-image: url("./image/12.png"); } .tooth_rght_up3 { background-image: url("./image/13.png"); } .tooth_rght_up4 { background-image: url("./image/14.png"); } .tooth_rght_up5 { background-image: url("./image/15.png"); } .tooth_rght_up6 { background-image: url("./image/16.png"); } .tooth_rght_up7 { background-image: url("./image/17.png"); } .tooth_rght_up8 { background-image: url("./image/18.png"); } /* 左上 */ .tooth_left_up1 { background-image: url("./image/21.png"); } .tooth_left_up2 { background-image: url("./image/22.png"); } .tooth_left_up3 { background-image: url("./image/23.png"); } .tooth_left_up4 { background-image: url("./image/24.png"); } .tooth_left_up5 { background-image: url("./image/25.png"); } .tooth_left_up6 { background-image: url("./image/26.png"); } .tooth_left_up7 { background-image: url("./image/27.png"); } .tooth_left_up8 { background-image: url("./image/28.png"); } /* 右下 */ .tooth_rght_down1 { background-image: url("./image/41.png"); } .tooth_rght_down2 { background-image: url("./image/42.png"); } .tooth_rght_down3 { background-image: url("./image/43.png"); } .tooth_rght_down4 { background-image: url("./image/44.png"); } .tooth_rght_down5 { background-image: url("./image/45.png"); } .tooth_rght_down6 { background-image: url("./image/46.png"); } .tooth_rght_down7 { background-image: url("./image/47.png"); } .tooth_rght_down8 { background-image: url("./image/48.png"); } /* 左下 */ .tooth_left_down1 { background-image: url("./image/31.png"); } .tooth_left_down2 { background-image: url("./image/32.png"); } .tooth_left_down3 { background-image: url("./image/33.png"); } .tooth_left_down4 { background-image: url("./image/34.png"); } .tooth_left_down5 { background-image: url("./image/35.png"); } .tooth_left_down6 { background-image: url("./image/36.png"); } .tooth_left_down7 { background-image: url("./image/37.png"); } .tooth_left_down8 { background-image: url("./image/38.png"); } .num-select { width: 100%; height: 30px; line-height: 30px; text-align: center; } .num-select span { display: inline-block; width: 45px; /* height: 25px; */ /* line-height: 25px; */ } .wisdom-select { width: 100%; /* height: 100px; */ text-align: center; position: absolute; top: 233px; left: 805px; } .wisdom-select span { display: block; width: 45px; height: 27px } .wisdom-select span>label,.num-select span>label { display: inline-block; width: 25px !important; height: 25px !important; line-height: 25px !important; border-radius: 50%; cursor: pointer; color: #FFF; background-color: #d2d0d0; /* color: #807b7b; */ /* background-color: rgb(52, 168, 166); */ } .num-select-hover { color: #FFF !important; background-color: #9fe9e7 !important; border: none !important; } .num-select-confirm { color: #FFF !important; background-color: #34a8a6 !important; border: none !important; } .drop-shadow-confirm,.drop-shadow { -webkit-filter: drop-shadow(0px 0px 4px #34a8a6); filter: drop-shadow(0px 0px 4px #34a8a6); } .header{ padding-top: 5px; text-align: center; } .header button { background-color: #fff; border: 2px solid #34a8a6; color: #34a8a6; width: 70px; height: 35px; font-family: 微软雅黑; font-size: 16px; margin: 5px; cursor: pointer; } .header button:hover { background-color: #34a8a6; border: 1px solid #34a8a6; color: #fff; } .footer { text-align: right; } .footer button { width: 110px; height: 35px; margin: 5px; font-size: 16px; cursor: pointer; border: none; border-radius: 3px; } #btnSure { background-color: #34a8a6; color: #fff; } #btnSure:hover { background-color: #9fe9e7; color: #fff; } #btnCancel:hover { background-color: #f5f58e; }