vue-city-pinyin/dist/index.css

City selection package

:root{--city-color-border: #D9D9D9;--city-color-bg: #F5F5F5;--city-active-red: #d0000e}.ts-city-select *{margin:0;padding:0;box-sizing:border-box}.ts-city-select li{list-style:none}.ts-city-select .np-tooltip--popper{padding:10px;width:100%}.ts-city-inner{margin:0;padding:0;width:100%;color:#666;position:relative}.ts-city-input{padding:4px;width:100%;height:28px;font-size:14px;border:1px solid var(--city-color-border);outline:none}.ts-city-panel{padding:10px}.ts-city-panel h5{margin:0;padding:0;line-height:1.2;color:#999;font-size:14px;font-weight:400}.ts-city-tags{margin:10px 0;overflow:hidden}.ts-city-tags li{float:left;width:60px;line-height:24px;text-align:center;font-size:14px;border-left:1px solid white;cursor:pointer}.ts-city-tags li:first-child{border-left:none}.ts-city-tags li:hover{color:var(--city-active-red)}.ts-city-tags li.z-on{color:#fff;background-color:var(--city-active-red)}.ts-city-items{overflow:hidden}.ts-city-items h6{float:left;width:30px;color:var(--city-active-red);font-size:14px;font-weight:400}.ts-city-items ul{overflow:hidden}.ts-city-items ul li{float:left;width:100px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;cursor:pointer}.ts-city-items ul li:hover{color:#d0000e}.ts-city-items>div{padding:10px 0;line-height:24px;border-bottom:1px dashed var(--city-color-border);overflow:hidden}.ts-city-items>div:last-child{border-bottom:none}.ts-city-items>div.z-hot{padding-left:0}.ts-city-items>div.z-hot li{padding-left:0}@keyframes easePanel{0%{opacity:0;transform:translateY(-50%) scale(0)}to{opacity:1;transform:translate(0) scale(1)}}