.settting{ width: 334px; .head{ height: 42px; position: relative; .headTit{ position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 137px; height: 32px; } .closeImg{ position: absolute; top: 0; right: -38px; width: 32px; height: 32px; cursor: pointer; } } .content{ margin-top: -26px; height: 318px; background: #FFFFFF; border-radius: 16px; padding: 36px 0 16px 16px; .conBox{ width: 100%; height: 100%; overflow-y: auto; &::-webkit-scrollbar { width: 0; display: none; } .cellBox{ padding: 14px 0; margin-right: 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #F2F2F2; &.isCamera{ border-bottom: none; } :global{ .van-switch{ width: 42px; height: 21px; background-color: transparent!important; background-image: url("../image/guan.png"); background-repeat: no-repeat; background-size: 100% 100%; border-radius: 0; &.van-switch--on{ background-image: url("../image//kai.png"); } .van-switch__node{ display: none; } } } .tit{ font-weight: 600; font-size: 15px; color: #000000; line-height: 21px; } .titbtn { width: 78px; height: 25px; background: linear-gradient( 135deg, #04C8BB 0%, #60E0C5 100%); border-radius: 13px; font-weight: 600; font-size: 14px; color: #fff; text-align: center; line-height: 25px; cursor: pointer; } .spendCon{ flex-grow: 1; display: flex; align-items: center; padding: 3px 0; .sliderCon{ padding-left: 28px; flex-grow: 1; :global{ .van-slider{ height: 5px; background: #EAEAEA; .van-slider__bar{ background: #01C1B5; // &::after{ // position: absolute; // content: ""; // left: 4px; // top: 2px; // width: 100%; // height: 1px; // background: #FFFFFF; // border-radius: 1px; // filter: blur(1px); // } // &::before{ // position: absolute; // content: ""; // left: 2px; // top: 1px; // width: 4px; // height: 4px; // background: url("../image/gg.png") no-repeat; // background-size: 100% 100%; // } .van-slider__button-wrapper{ bottom: -6px; top: initial; transform: translateX(50%); } } } } .customButton{ display: flex; flex-direction: column; align-items: center; .speedVal{ width: 32px; height: 31px; background: url("../image/qipao.png") no-repeat; background-size: 100% 100%; font-weight: 600; font-size: 14px; color: #131415; line-height: 20px; text-align: center; padding-top: 3px; margin-bottom: 3px; } .speedBtn{ width: 18px; height: 18px; background: #FFFFFF; border-radius: 50%; border: 4px solid #01C1B5; } } } } .radioBox{ display: flex; justify-content:flex-end; flex-wrap: wrap; > div{ width: 48px; height: 25px; font-weight: 600; font-size: 14px; color: #757C87; text-align: center; line-height: 25px; margin-right: 8px; margin-bottom: 8px; cursor: pointer; background: #F2F2F2; border-radius: 4px; &:nth-child(4),&:nth-child(8) { margin-right: 0; } &:nth-child(n+5) { margin-bottom: 0; } &.active{ color: #ffffff; background: linear-gradient( 135deg, #04C8BB 0%, #60E0C5 100%); } } } // .speBox { // >div { // width: 48px; // } // } .frequency{ display: flex; align-items: center; .frequencyNum{ margin: 0 10px; width: 63px; height: 29px; background: #F6F6F6; border-radius: 6px; text-align: center; line-height: 29px; font-weight: 600; font-size: 15px; color: #00B2A7; } .btn{ width: 24px; height: 24px; flex-shrink: 0; cursor: pointer; } } .reactionTimeBox{ display: flex; align-items: center; .reactionTime{ width: 63px; height: 29px; background: #F6F6F6; border-radius: 6px; padding: 0; line-height: 29px; :global{ .van-field__control{ font-weight: 600; font-size: 15px; color: #00B2A7; caret-color: #01C1B5; } } } .timeName{ margin-left: 8px; font-weight: 600; font-size: 15px; color: #000000; } } } .pointerCon{ margin-right: 16px; padding-bottom: 14px; border-bottom: 1px solid #F2F2F2; .pointerBox{ padding: 8px 24px; background: #FFF6E8; border-radius: 6px; >div{ position: relative; margin-top: 4px; font-weight: 400; font-size: 13px; color: #904C24; line-height: 18px; &:first-child{ margin-top: 0; } &::after{ content: ""; left: -11px; top: 50%; transform: translateY(-50%); position: absolute; border-radius: 50%; width: 5px; height: 5px; background: #FF983F; } } } } .cellBtnBox{ display: flex; justify-content: center; align-items: center; padding: 14px 0 0; margin-right: 16px; >img{ width: 118px; height: 39px; cursor: pointer; & + img{ margin-left: 20px; } } } } } }