@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1596771684904'); /* IE9 */
  src: url('iconfont.eot?t=1596771684904#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOoAAsAAAAACFwAAANZAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqEEIM2ATYCJAMQCwoABCAFhG0HTxsvBxHVm43IfiTYMR3rGwdO8nPSmeB5ytnez0zaiSCmniJmJ7wsonJTL4vZOQGwOdfcAwkboUZy5zf/5AspjNJLs4c/7p3+lfh8bQsspbGmjrEo6qLSaAIFtDdGgQVYQIEl5A1jV17EbQjgkpPiSP2Gzdtj0BiLBJDhQwb1waQs6Jp8wSBESnZqZCU2xlpk3QNW+J+Xr5QVAxa2wljZemCD/tROeMk1VRAGdHcRpOO5ALYPFFAc0CCDSz19UWGkOApX+Y6mImAwWJDwEqWSa4YhlO1FY8y/PLAQFEgEI9cHoDyKKkh4Ng8WJErxIJBcU8tN4nq+ATxgB9xEpPQjNTaW+H6qvH5q8yXSpBmU8uHHDo8/dXqU6PjgQ5f1sfiSDB3Wbd1zLOOgDbt37ty0MX3/tcf2bc80aJInsX2uv3gPVrDXS7EkLuIuXh/b4Hl+LKNs2NA/HVyyLljbyVK5klWEt9ClXMDaG8ZtiWUduH7x/iDLgP4bg6Ql2ab55mKDNHRXUThLP82d+6mj1LRJP41/Nyl6Lu/CvHc7dDzPwrvP2gxu1C/FhAqDNw87Z53Ik7RpKM+K1K6SOcx8w76mSsPIJH9SpGGV2k48+jgaz9xuTEaC50QHm7gzwImbx77nVK2xNcRYtmjcDDRnNWfhCCp2/1X814wFYTGS9KZT70593qSEgju1Sk3RX0rKnW+Kv3FUqSq9lMaYq7JbWyG8ptaoer93FlnS1+vRK1X1/8a7vo7nbX/096vCQKMC+EfS1tKfKW1Zp1W5YdVaVtgSLVvTFRveUD4uLvALE5CWV2PoMrQOgWBSUgYWUXKAwpAf1aTiYONRHiIYaoFLMRrt90jHWBSiHaAo8wAIqTkIFim5CIrU3Ec16SXYZOQ7REgtClw6SroTPQqKPuRYj1EJWtB/iIZWZ9nlGOTf0W+z4qTcJ7+Rc/RDU9bZ+IAr8hhr8se3Ig4c0wI9uA/nmSAxjWikDCKpqypX9qTS0FIcqceoBC3oP0RDq3PbyzH3/jv6bVZcU1PhfyPnODw0Zd0CHTRrq5preSR/fCviwDEt0AMXzmaEIJVPG9FIGXqEUlehRq6tppxftzzhAcDFOEGLJUq02Dj9Aq7ekx26Dd6U9Z05KMeX4rpLm4sCAAAA') format('woff2'),
  url('iconfont.woff?t=1596771684904') format('woff'),
  url('iconfont.ttf?t=1596771684904') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1596771684904#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.iconchenggong:before {
  content: "\e62f";
}

.iconhuadongshangpin:before {
  content: "\e60b";
}

.iconhuadong:before {
  content: "\e83e";
}

#box{
  position: relative;
  width: 300px;
  height: 31px;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: #e8e8e8;
  box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
}

.btn {
  position: absolute;
  width: 40px;
  height: 31px;
  background: #fff
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAKgAAsAAAAABngAAAJTAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqBAIEFATYCJAMICwYABCAFhG0HMRusBRHVi1uyj8TYbbQjIoaFoXKniiYab+Lh+XVP5868/3cWQqKRtoPomxQiEZKjnGdrU1yXrDBRlSzZNf1U0J3ADpcPnedrwOX0J1Ag84Bym2PwmICBpQHuhVFkRRJ5w9gFL/AxgVra6S7GT5w+XyGxVwVi+5ZNaxSFiCSxfCFUGw4mcUZFkR3NXuF09P34qm8UZCo5u2n2xgnrjf400inK95R7LA8IUQI6XkGO7kjE/MbMTLlgnFytTNKJY9UHn8ZlGdjEUc2C/XV2bR3QBkqeSerJHrU2AymZ7IQekx4la9jQXN/bii4du7mnJa6/sufW8da/yNwtqiVvNA8MfnX/tfNfdgubPi5avWjNx+6/UneDvAElfyk1Oz92/+ir6rf+jtGgfJSfz8cJBLWGHHyzqv7wf9FJ4M32ebcoVD5KhvkodusNfo904EAy5LY1S5q00ZfpNGllhlpqoYQDjbyfamh6L4VQaHpHvhraZsgVupCJ7Y6K2vqjqjAKtXQz6Xhtje2Qi1QTXR0ECA3cQaaeu8g18JpM7DtUNPMdVQ0iRy3iMboXdvQiaS8Er4oPuH0guXNJrl3bcf0Wozq/Sl4ecY8oJomDZ7vl/AZLlCW2mGfkqxKQcAFr8BzmOUMlnOJd7Vi16jsONb3JvnNhtS0IdKXQA7j5AIk7VqJgvGpXPr+FIrXclXS01EWPkDCS6YHH5g4gN5pyUMujvGI8RXxKEUAEK4A1mIdyOQaq5nkpdKds8YRUpc9xRtFQjb29rviBYtaBbczCmZlrbK6vDy4jywIA')  center no-repeat;
  background-size: 13px;//不设置这个属性，背景图片会不成比例的显示
border: 1px solid #ccc;
  cursor: move;
}
.bgColor{
  position: absolute;
  left:0;
  top:0;
  width:40px;
  height: 31px;
  background-color: lightblue;
}
.txt{
  position: absolute;
  width: 100%;
  height: 31px;
  line-height: 30px;
  font-size: 14px;
  color: #000;
  text-align: center;
}
.slider{
  position: absolute;
  left:0;
  top:0;
  width: 50px;
  height: 30px;
  border: 1px solid #ccc;
  background: #fff;
  text-align: center;
  cursor: move;
}
.slider>i{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}
.slider.active>i{
  color:green;
}