|
@@ -1,69 +1,229 @@
|
|
|
+@img: './images';
|
|
|
+
|
|
|
.wrap {
|
|
|
// margin-bottom: 20px;
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
border: 1px solid #2dc7aa;
|
|
|
- padding: 0 10px 0 20px;
|
|
|
- line-height: 54px;
|
|
|
- height: 54px;
|
|
|
+ padding: 0 6px 0 20px;
|
|
|
+ line-height: 60px;
|
|
|
+ height: 60px;
|
|
|
background: #fff;
|
|
|
border-radius: 30px;
|
|
|
overflow: hidden;
|
|
|
+ cursor: pointer;
|
|
|
+&:hover {
|
|
|
+ box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.1000);
|
|
|
+ .searchline,.searchBtn{
|
|
|
+ visibility: visible;
|
|
|
+ }
|
|
|
+}
|
|
|
+ .selectWrap {
|
|
|
+ :global {
|
|
|
+ .el-input__wrapper {
|
|
|
+ padding-right: 25px;
|
|
|
+ font-size: 16px;
|
|
|
+ box-shadow: none !important;
|
|
|
+ line-height: 60px;
|
|
|
+ height: 60px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .el-input__wrapper.is-focus {
|
|
|
+ // font-size: 16px;
|
|
|
+ box-shadow: none !important;
|
|
|
+ }
|
|
|
+ .el-input.is-focus .el-input__wrapper {
|
|
|
+ box-shadow: none !important;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ // select 那层
|
|
|
+ // .el-input__suffix {
|
|
|
+ // .el-input__suffix-inner {
|
|
|
+ // color: #2dc7aa;
|
|
|
+ // font-size: 20px;
|
|
|
+ // font-weight: bold;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // .el-select__caret {
|
|
|
+ // color: #2dc7aa !important;
|
|
|
+ // font-size: 20px !important;
|
|
|
+ // font-weight: bold;
|
|
|
+ // // 更换箭头
|
|
|
|
|
|
- // .inputSelect {
|
|
|
- :global {
|
|
|
- .el-input__wrapper {
|
|
|
- box-shadow: none !important;
|
|
|
- }
|
|
|
+ // }
|
|
|
+ .el-select__caret {
|
|
|
+ //箭头样式
|
|
|
+
|
|
|
+ // transform: rotateZ(0deg); //转动图片
|
|
|
+ appearance: none;
|
|
|
+ background: url('@{img}/selectArrow.png') no-repeat; //自定义图片
|
|
|
+ background-size: 16px 16px;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px !important;
|
|
|
+ position: absolute; //图片定位
|
|
|
+ top: -1px;
|
|
|
+ right: -1px;
|
|
|
+ }
|
|
|
+ .el-icon svg {
|
|
|
+ //隐藏原来箭头
|
|
|
|
|
|
- // select 那层
|
|
|
- .el-select .el-input.is-focus .el-input__wrapper .subSelect.el-select {
|
|
|
- font-size: 16px;
|
|
|
- .el-input {
|
|
|
- font-size: 18px;
|
|
|
- .el-input.is-focus {
|
|
|
- .el-input__wrapper {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .el-select .el-input.is-focus .el-input__wrapper {
|
|
|
+ font-size: 16px;
|
|
|
+ .el-input {
|
|
|
+ font-size: 18px;
|
|
|
+ .el-input.is-focus {
|
|
|
+ .el-input__wrapper {
|
|
|
+ box-shadow: none !important;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-input__wrapper.is-focus {
|
|
|
box-shadow: none !important;
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
}
|
|
|
- .el-input__wrapper.is-focus {
|
|
|
- box-shadow: none !important;
|
|
|
- background-color: #fff;
|
|
|
- }
|
|
|
- .el-select__caret {
|
|
|
- color: #2dc7aa;
|
|
|
- font-size: 20px;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
- // .el-input.is-focus {
|
|
|
- // .el-input__wrapper.is-focus {
|
|
|
- // box-shadow: none !important;
|
|
|
- // background-color: #fff;
|
|
|
- // }
|
|
|
- // }
|
|
|
+ // .el-input.is-focus {
|
|
|
+ // .el-input__wrapper.is-focus {
|
|
|
+ // box-shadow: none !important;
|
|
|
+ // background-color: #fff;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- // }
|
|
|
|
|
|
.selectWrap {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
position: relative;
|
|
|
+ align-items: center;
|
|
|
.line {
|
|
|
width: 1px;
|
|
|
- height: 26px;
|
|
|
- background: #d8d8d8 !important;
|
|
|
- position: absolute;
|
|
|
- right: -20px;
|
|
|
- top: 2px;
|
|
|
+ height: 36px;
|
|
|
+ background: #2dc7aa !important;
|
|
|
+ // position: absolute;
|
|
|
+ // right: -13px;
|
|
|
+ // top: 2px;
|
|
|
+ // z-index: 1000;
|
|
|
}
|
|
|
}
|
|
|
+ .inputSelect {
|
|
|
+ width: 600px;
|
|
|
+ :global {
|
|
|
|
|
|
+ .el-input__wrapper {
|
|
|
+ width: 600px;
|
|
|
+ padding-right: 0;
|
|
|
+ font-size: 16px;
|
|
|
+ box-shadow: none !important;
|
|
|
+ line-height: 60px;
|
|
|
+ height: 60px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .el-icon {
|
|
|
+ position: relative;
|
|
|
+ top: -5px;
|
|
|
+ left: -18px;
|
|
|
+ display: block;
|
|
|
+ font-size: 30px !important;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ opacity: 0;
|
|
|
+ // visibility: hidden;
|
|
|
+ // svg {
|
|
|
+ // //隐藏原来箭头
|
|
|
+
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ .el-input__suffix {
|
|
|
+ cursor: pointer;
|
|
|
+ background: url('@{img}/closeIcon.png') no-repeat; //自定义图片
|
|
|
+ background-size: 16px 16px;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ position: absolute; //图片定位
|
|
|
+ top: 20px;
|
|
|
+ right: 22px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input__wrapper.is-focus {
|
|
|
+ // font-size: 16px;
|
|
|
+ box-shadow: none !important;
|
|
|
+ }
|
|
|
+ .el-input.is-focus .el-input__wrapper {
|
|
|
+ box-shadow: none !important;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ .el-input__wrapper {
|
|
|
+ padding-left: 0;
|
|
|
+ .el-input__inner {
|
|
|
+ font-size: 18px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-select .el-input.is-focus .el-input__wrapper {
|
|
|
+ font-size: 16px;
|
|
|
+ .el-input {
|
|
|
+ font-size: 18px;
|
|
|
+ .el-input.is-focus {
|
|
|
+ .el-input__wrapper {
|
|
|
+ box-shadow: none !important;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-input__wrapper.is-focus {
|
|
|
+ box-shadow: none !important;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // .el-input.is-focus {
|
|
|
+ // .el-input__wrapper.is-focus {
|
|
|
+ // box-shadow: none !important;
|
|
|
+ // background-color: #fff;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
.searchIcon {
|
|
|
font-size: 20px !important;
|
|
|
}
|
|
|
+ .searchWrap {
|
|
|
+ cursor: pointer;
|
|
|
+ width: 97px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ img {
|
|
|
+ width: 24px;
|
|
|
+ height: 25px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .searchBtn {
|
|
|
+ width: 90px;
|
|
|
+ height: 50px;
|
|
|
+ background: #2dc7aa;
|
|
|
+ border-radius: 25px;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 50px;
|
|
|
+ cursor: pointer;
|
|
|
+ visibility: hidden;
|
|
|
+ &:active {
|
|
|
+ opacity: .9;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .searchline {
|
|
|
+ visibility: hidden;
|
|
|
+ width: 1px;
|
|
|
+ height: 36px;
|
|
|
+ background-color: #eee;
|
|
|
+ margin-right: 15px;
|
|
|
+ }
|
|
|
}
|