hunanzeyuprogram/components/CarNumInput/index.wxss

/* components/CarNumInput/index.wxss */
page {
  background: #FFFFFF;
  width: 100%;
  height: 100%;
}
view{
  box-sizing: border-box;
}
.con-query {
  /* height: 4.8rem; */
  width:100%;
  border-radius: 8px;
  background-color: #FFF;
}

.pages_header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pages_header_top {
  width: 33.3%;
  height: 60rpx;
  border-left: 5px solid green;
  border-right: 5px solid green;
}

.pages_header_btm {
  width: 70%;
  background: green;
  height: 120rpx;
  line-height: 120rpx;
  text-align: center;
  color: white;
  border-radius: 10rpx;
  font-weight: normal;
  font-size: 16pt;
}

.tips {
  text-align: center;
  margin: 60rpx 0;
  font-size: 12pt;
  color: #888888;
  
}
.plate-input-text{
  text-align: center;
  line-height: 90rpx;
  color: #f39900;
}
.plate-input-flag {
  float: right;
  margin-right: 6%;
  font-size: 12px;
}
.plate-input-flag .new-energy{
  color: #14c414;
}
.plate-input-body {
  /*border: 1px solid red;*/
  height: 80rpx;
  width: 88%;
  /* margin: 0 6% 2px 6%; */
  margin: 0 auto;
}
.plate-input-content {
  width: 100%;
  display: flex;
  flex-direction: row;
  height: 70rpx;
}
.plate-input-content > view:first-child{
  margin-left: 8rpx;
}

.plate-nums-foc {
  flex: 1;
  border: 2rpx solid #FFB93F;
  margin: 0 5rpx 0 5rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  box-sizing: border-box;
  border-radius: 4rpx;
}

.plate-nums-first{
  flex: 1;
  border: 1rpx solid #CCCCCC;
  margin: 0 6rpx 0 6rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  box-sizing: border-box;
}

.plate-num-text {
 flex: 1;
 line-height: 70rpx;
 height: 100%;
 box-sizing: border-box;
 font-size: 40rpx;
 font-weight: 300;
}

.new-plate-input-content{
display: flex;
flex-direction: row;
height: 100rpx;
}

.kb_top {
 align-content: relative;
 width: 100%;
 height: 74rpx;
 background: #fff;
 border-top: solid #ebebeb 2rpx;
 border-bottom: 15rpx solid #F4F4F4;
}

.keyboard {
 z-index: 9999;
 position: fixed;
 bottom: 0;
 left: 0;
 width: 100%;
 height: auto;
 background: #F4F4F4;
 display: flex;
 flex-wrap: wrap;
 border-bottom: 15rpx solid #F4F4F4;
}

.td {
 font-family: "微软雅黑";
 flex-grow: 1;
 text-align: center;
 font-size: 34rpx;
 height: 86rpx;
 line-height: 80rpx;
 background: #fff;
 margin: 10rpx 5rpx;
 color: #333;
 border-radius: 2rpx;
 box-shadow: 0rpx 2rpx 0rpx #a9a9a9;
}

.td_nor {
 flex: 1 1 6%;
}

.td_num {
 flex: 1 1 8%;
}

.td_spec {
 flex: 1 1 12%;
}

.board_bg {
 box-shadow: 0 0 0 #e5e5e5;
 background: #e5e5e5;
}
.del-first {
 position: absolute;
 bottom: 10rpx;
 right: 10rpx;
 width: 100rpx;
 height: 86rpx;
 background-color: #fff;
 box-shadow: 0rpx 2rpx 0rpx #a9a9a9;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 10rpx;
}

.del-hover {
 position: absolute;
 bottom: 10rpx;
 right: 10rpx;
 width: 137rpx;
 height: 86rpx;
 background-color: #e5e5e5;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 10rpx;
 box-shadow: 0 0 0 #e5e5e5;
}
.del-img {
 display: block;
 width: 46rpx;
 height: 38rpx;
}
.color-white{
  color: #FFFFFF;
}

.color-red{
  color: #ff0000;
}
.bule{
  color: #0000ff;
}
/* 不是新能源时显示虚线框不可输入 */
.plate-nums-nullEng{
  font-size: 8px;
  border: 1px dashed #eee;
  color: #14c414;
}
.plate-nums-IsEng{
  position: relative;
  color: #14c414;
}
.delNewEng{
  position: absolute;
  top: 0;
  right: 10px;
  transform: translateY(-50%) translateX(100%);
  background-color: #FF5B5B;
  border-radius: 10px;
  color: #fff;
  display: inline-block;
  font-size: 12px;
  height: 18px;
  line-height: 18px;
  padding: 0 6px;
  text-align: center;
  white-space: nowrap;
  border: 1px solid #fff;
  z-index: 99;
}