@charset "utf-8"; * {
    margin: 0;
    padding: 0;
    -webkit-overflow-scrolling: touch;
}

html, body, #app {
    min-height: 55vh;
    width: 100%;
    height: 100%;
}

input, button, select, textarea {
    outline: none;
}

i {
    font-style: normal;
}

em {
    font-style: normal;
}

b {
    font-style: normal;
}

a {
    text-decoration: none;
}

ul, li, p, dd, dl, input, em, u {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    text-decoration: none;
    color: #666;
}

input[type='button'], input[type='submit'], input[type='reset'] {
    -webkit-appearance: push-button;
    white-space: pre;
}

a {
    text-decoration: none;
}

ul, li {
    list-style: none;
}

img {
    display: block;
}

body::-webkit-scrollbar {
    width: 2px;
    background: #c3c3c3;
}

body::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgb(171 171 171 / 20%);
    background: #66b1ff;
}

body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: #bdbdbd;
}

.red-text {
    color: #f00;
}

.green-text {
    color: #1abe9c
}

.gray-text {
    color: #9c9c9c
}

.small-text {
    width: 100px;
    min-width: 100px !important;
}

.bg {
    display: block;
    position: fixed;
    width: 100%;
    left: 0;
    height: 100%;
    top: 0;
    background: rgb(0 0 0 / 0.5);
    z-index: 600;
}

.bg2 {
    display: block;
    position: fixed;
    width: 100%;
    left: 0;
    height: 100%;
    top: 0;
    background: rgb(0 0 0 / 0.5);
    z-index: 888;
}

/***/
.loading-box {
    position: fixed;
    left: 50%;
    z-index: 9999;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    box-sizing: border-box;
    width: 50px !important;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3F81E5;
    border-radius: 50%;
    /* 动画旋转效果 */
    animation: rotate-360 1s infinite linear;
}

@keyframes rotate-360 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.pop-div {
    position: fixed;
    left: 50%;
    z-index: 9999;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    box-sizing: border-box;
    width: 60% !important;
    /* 动画旋转效果 */
    animation: fade 1s linear;
    background: rgb(255 255 255);
    padding: 10px 20px;
    border-radius: 10px;
}

.pop-div img {
    width: 70%;
    margin: 0 15%;
}

.pop-div>span {
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px;
    color: #3F81E5;
    cursor: pointer;
    width: 20px;
    height: 20px;
    overflow: hidden;
    border-radius: 0 10px 0 10px;
}

.pop-div>span:hover {
    color: #fff;
    background: #3F81E5;
}

@keyframes fade {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 0.8;
    }

    100% {
        opacity: 1;
    }
}

.pop-text {
    color: #2196F3;
    letter-spacing: 4px;
    padding: 20px 0;
}

.pop-btn {
    margin-top: 20px;
    color: #fff;
    padding: 5px 0;
    font-size: 12px;
    border-radius: 7px;
    cursor: pointer;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-around;
}

.pop-btn span:first-child {
    background: #3F81E5;
    padding: 6px 20px;
    border-radius: 2px;
}

.pop-btn span:last-child {
    border: 1px #66b1ff solid;
    padding: 6px 20px;
    border-radius: 2px;
    color: #3a8ee6;
}

/*登录页*/
.login {
    background: #a8d9ff;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}

.bind-btn {
    background: #ffffff;
    width: 60%;
    padding: 10px 0;
    text-align: center;
    margin-top: 5vh;
    margin-left: 20%;
    border-radius: 10px;
    color: #2196F3;
    font-weight: bold;
    letter-spacing: 3px;
}

.bind-form {
    position: fixed;
    top: 30%;
    left: 50%;
    padding: 3vh 5%;
    border-radius: 10px;
    width: 70%;
    transform: translate(-50%,-50%);
    z-index: 999;
}

.bind-form-title {
    font-weight: bold;
    color: #2196F3;
    letter-spacing: 1px;
    padding-left: 10px;
    margin-bottom: 20px;
}

.bind-form-input {
    padding: 1vh 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 20px);
    flex-wrap: wrap;
}

.bind-form-input span {
    white-space: nowrap;
    color: #616161;
    width: 100%;
    margin-bottom: 6px;
}

.bind-form-input input {
    border: none;
    width: 100%;
    padding: 8px 10px;
    border-radius: 5px;
    box-sizing: border-box;
}

.bind-form-btn {
    width: calc(100% - 20px);
    text-align: center;
    margin: 4vh 10px 2vh 10px;
    background: #2196F3;
    color: #fff;
    padding: 10px 0;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
}

.to-back {
    position: fixed;
    z-index: 777;
    top: 0;
    left: 2%;
}

.to-back img {
    width: 32px;
    height: 32px;
}

/**/
.home-logo {
}

.home-logo img {
    width: 100%;
}

.home-content {
    width: 90%;
    margin: 2vh 5%;
    font-size: 14px;
    line-height: 1.6;
    color: #eaeaea;
}

/**/
.main-page {
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    background: #e0f5ff;
}

.main-list-page {
    min-height: 100vh;
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    background: #e9f8ff;
}

/*footer-list*/
.footer-list {
    position: fixed;
    width: 100%;
    bottom: 0;
    z-index: 100;
    padding-bottom: 1vh;
    background: #f9f9f9;
}

.footer-list ul {
    display: flex;
    justify-content: space-around;
}

.footer-list ul li {
    padding: 10px 0;
    width: 20%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.footer-list li img {
    width: 28px;
}

.footer-list li span {
    width: 100%;
    text-align: center;
    font-size: 14px;
}

/**/
.swiper-container {
    width: 100%;
    height: 23vh;
}

.swiper-slide img {
    width: 100%;
    height: 100%;
}

/**/
.news-main {
    width: 90%;
    padding: 10px 3%;
    background: #f9f9f9c2;
    margin: 10px 2%;
    border-radius: 6px;
}

.news-main.hover {
    background: #fff;
    padding-top: 0;
}

.news-main-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.news-main-title span {
    font-weight: 600;
}

.news-main-title a {
    font-size: 14px;
    color: #03A9F4;
    padding: 0 3px;
}

.news-list {
    width: 100%;
}

.news-main.hover .news-info {
    padding: 16px 0;
}

.news-info {
    padding: 8px 0;
    font-size: 14px;
    color: #444;
    width: 100%;
    border-bottom: 1px #dedede dashed;
    overflow: hidden;
}

.news-time {
    display: flex;
    justify-content: flex-end;
    font-size: 12px;
}

/**/
.category-main {
    width: calc(100% - 4vw);
    display: flex;
    flex-wrap: wrap;
    margin: 1vh 2vw;
}

.category-info {
    width: 12vw;
    text-align: center;
    margin: 0 3vw 2vh 3vw;
}

.category-info img {
    width: 12vw;
    height: 12vw;
    padding: 6px;
    border-radius: 50%;
    box-sizing: border-box;
}

.category-info span {
    font-size: 14px;
}

/**/
.goods-main {
    width: 96%;
    margin: 1vh 2%;
    display: flex;
    flex-wrap: wrap;
}

.goods-info {
    width: 44vw;
    margin: 0 2vw;
    padding-bottom: 20px;
    background: #fff;
}

.goods-img {
    width: 100%;
}

.goods-img img {
    width: 100%;
    border-radius: 6px;
}

.goods-name {
    line-height: 1.6;
}

.goods-price {
    display: flex;
    justify-content: space-between;
    margin-top: 1vh;
}

.goods-price span {
    color: #f00;
}

.goods-price label {
    background: #009688;
    color: #fff;
    padding: 3px 10px;
    font-size: 14px;
    border-radius: 3px;
}

/**/
.detail-title {
    width: 90%;
    margin: 0 5%;
    text-align: center;
    font-weight: 600;
    padding: 10px 0;
}

.detail-time {
    font-size: 12px;
    text-align: center;
}

.detail-content {
    width: 90%;
    margin: 0 5%;
    line-height: 1.6;
}

/**/
.my-info {
    display: flex;
    justify-content: space-between;
    width: 94%;
    margin: 0 3%;
    align-items: center;
    padding: 16px 3%;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 5px;
    margin-top: 2vh;
}

.my-info.hover {
    /* background: #dcf4ff; */
}

.device-top.my-info {
    border-radius: 50px;
    background: #fff;
}

.my-info-left {
    display: flex;
    align-items: center;
}

.my-info-left img {
    width: 32px;
    height: 32px;
    overflow: hidden;
    border-radius: 50%;
}

.my-info-left span {
    font-size: 16px;
    margin-left: 10px;
    font-weight: 600;
}

.my-info-right {
    color: #795548;
    margin-right: 10px;
}

.my-info-list {
    width: 94%;
    margin: 0 3%;
    box-sizing: border-box;
    background: #0089ea;
    border-radius: 10px;
    margin-top: 2vh;
    padding: 10px 0 20px 0;
}

.info-title {
    text-align: center;
    color: #fff;
    font-size: 16px;
    line-height: 2;
}

.info-money {
    font-size: 36px;
    text-align: center;
    color: #fff;
    line-height: 1.6;
    font-family: fantasy;
}

.info-li-div {
    color: #fff;
    display: flex;
    justify-content: space-between;
}

.info-li-device {
    background: #fff;
    width: 94%;
    margin-left: 3%;
    margin-top: 10px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    padding: 16px 10px 10px 10px;
    box-sizing: border-box;
}

.info-device-li {
    width: 4rem;
    display: flex;
    flex-wrap: wrap;
    white-space: nowrap;
    text-align: center;
}

.info-device-li img {
    width: 32px;
    margin: 0 auto;
    margin-bottom: 10px;
}

.info-device-li label {
    display: block;
    width: 100%;
    font-size: 14px;
    color: #666;
}

.info-device-li span {
    display: block;
    text-align: center;
    width: 100%;
    color: #2196F3;
    line-height: 2;
    font-weight: bold;
    font-size: 18px;
}

.info-li {
    display: flex;
    justify-content: space-between;
    padding: 6px 3%;
    color: #fff;
    width: 30%;
    flex-wrap: wrap;
}

.info-li span {
    display: block;
    text-align: center;
    width: 100%;
}

.info-li label {
    font-size: 14px;
    display: block;
    width: 100%;
    text-align: center;
}

/**/
.chat-type {
    width: 96%;
    margin-left: 2%;
    box-sizing: border-box;
    padding: 10px 1%;
    display: flex;
    justify-content: space-between;
    margin-top: 2vh;
}

.chat-type-item {
    width: 30%;
    text-align: center;
    background: #f3f3f3;
    border-radius: 6px;
    padding: 6px 0;
    color: #757575;
}

.chat-type-item.hover {
    background: #2196F3;
    color: #fff;
}

/**/
.my-icon-list {
    width: 94%;
    margin: 0 3%;
    padding: 0 3% 0 3%;
    display: flex;
    margin-top: 2vh;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 10px;
    flex-wrap: wrap;
}

.my-icon-info {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px #f1f1f1 solid;
    padding: 16px 10px;
}

.my-icon-info:last-child {
    border-bottom: none;
}

.my-icon-info img {
    width: 24px;
    margin: 0;
    display: inline-block;
    box-sizing: border-box;
    margin-right: 10px;
}

.my-icon-info div {
    color: #656565;
    font-size: 14px;
    width: calc(100% - 64px);
}

.info-ttip {
    width: 90%;
    margin: 3vh 5%;
    font-size: 14px;
    color: #009688;
}

.info-tip {
    position: fixed;
    width: 100%;
    bottom: 12vh;
    font-size: 12px;
    text-align: center;
    color: #666;
}

/**/
.device-detail-info {
    width: 90%;
    margin: 2vh 5%;
}

.device-detail-pic {
    margin-top: 2vh;
}

.device-detail-pic img {
    width: 100%;
    height: auto;
    border-radius: 10px 10px 0 0;
}

.detail-bg {
    position: fixed;
    top: 0;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    opacity: .3;
}

.device-detail {
    background: #fff;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 10px 20px;
    border-radius: 0 0 10px 10px;
}

.device-detail span {
    color: #009688;
}

.device-pay {
    position: fixed;
    bottom: 0;
    width: 100vw;
    box-sizing: border-box;
    padding: 16px 3%;
    background: #2196F3;
    color: #fff;
    text-align: center;
    font-weight: bold;
}

.device-pay-left {
    display: flex;
    align-items: center;
}

.device-pay-num {
    display: flex;
    align-items: center;
}

.device-pay-num img {
    width: 32px;
}

.device-pay-total {
    margin-left: 20px;
    color: #fff;
    white-space: normal;
}

.device-pay-num label {
    color: #fff;
    font-size: 24px;
    display: flex;
    width: 60px;
    justify-content: center;
}

.device-pay-right {
    background: #FF5722;
    padding: 6px 20px;
    border-radius: 36px;
    color: #ffffff;
    white-space: nowrap;
}

/**/
.user-detail-info {
    display: flex;
    flex-wrap: wrap;
    background: #795548;
    margin-top: 2vh;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 10px 20px;
    color: #fff;
}

.user-detail-info div {
    width: 50%;
    box-sizing: border-box;
    padding: 10px 0;
    font-size: 14px;
}

.user-detail-info div > label {
}

.user-detail-info div > span {
    color: #FF9800;
}

/**/
.pay-btn {
    position: fixed;
    bottom: 5vh;
    padding: 12px 0;
    width: 90%;
    text-align: center;
    background: #2196F3;
    margin-left: 5%;
    color: #fff;
    border-radius: 10px;
}

/**/
.search-box-date {
    display: flex;
    width: 94%;
    margin: 2vh 3%;
    box-sizing: border-box;
    border-radius: 10px;
    justify-content: space-between;
    align-items: center;
}
.search-box-date > div {
    width: calc(100% - 5rem);
}
.search-box-date > div input {
    width:100%;
}
.search-box-date > div.search-box-right {
    width:auto;
}
.device-select-list {
    width: 96%;
    margin: 1vh 2%;
    box-sizing: border-box;
}

.search-box-date input {
    border: none;
    background: #ffffff;
    padding: 6px 6px;
    border-radius: 6px;
}

.device-select-list {
    width: 96%;
    margin: 1vh 2%;
    box-sizing: border-box;
}

.search-box-date input {
    border: none;
    background: #ffffff;
    padding: 6px 6px;
    border-radius: 6px;
}

.search-box-right {
}

.search-box-right span {
    font-size: 14px;
    background: #2196F3;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
}

.order-list {
    width: 96%;
    margin: 2vh 2% 12vh 2%;
    box-sizing: border-box;
    font-size: 14px;
}

.order-info {
    margin-bottom: 2vh;
    padding: 10px 10px;
    border-radius: 10px;
    background: #beebff;
    color: #737373;
}

.order-info-li {
    display: flex;
    justify-content: space-between;
    padding-bottom: 6px;
}

.order-info-li label {
}

.order-info-li span {
    color: #3e3e3e;
}

.order-info-li span.is-pay {
    color: #009688;
}

.order-info-li span.no-pay {
    color: #F44336;
}

.last-line {
    display: flex;
    justify-content: center;
    color: #8e8e8e;
}

.last-more {
    color: #009688;
    padding: 20px;
}

.last-more em {
    color: #f66;
}

/**/
.no-data {
    display: flex;
    justify-content: center;
    padding: 30px;
    flex-wrap: wrap;
}

.no-data img {
    width: 160px;
    height: 160px;
}

.no-data p {
    width: 100%;
    text-align: center;
    color: #666;
}

/**/
.search-money {
    display: flex;
    justify-content: space-between;
    background: #ffffff;
    width: 96%;
    margin-left: 2%;
    border-radius: 6px;
    padding: 10px 4%;
    font-size: 14px;
    box-sizing: border-box;
}

.search-money span:first-child em {
    color: #f66;
}

.search-money span:last-child em {
    color: #009688;
}

/**/
.detail-page {
    width: 90%;
    margin: 3vh 5%;
    background: #eff6fb;
    box-sizing: border-box;
    padding: 4vw;
    border-radius: 6px;
    padding-bottom: 10vh;
}

.my-detail {
    width: 100%;
}

.detail-info {
    display: flex;
    justify-content: space-between;
    padding: 10px 0 20px 0;
    flex-wrap: wrap;
    width: 100%;
}

.detail-info label {
    color: #676767;
    width: 100%;
    margin-bottom: 10px;
}

label.label-img {
    width: calc(100% - 14rem);
    margin-left: 9rem;
    margin-top: 20px;
}

label.label-img img {
    width: 100%;
    border-radius: 6px;
}

.feedback-desc label.label-img {
    width: 50%;
    display: block;
    margin-left: 0;
    margin-top: 0;
}

.detail-info span {
    color: #fb5d2b;
}

.detail-info input {
    color: #03A9F4;
    border: none;
    border-bottom: 1px #c4e5ff solid;
    background: none;
    line-height: 1.6;
    font-size: 16px;
    width: 100%;
    padding-left: 8px;
}

.detail-page .info-ttip {
    text-align: center;
}

.detail-btn {
    margin-top: 4vh;
    text-align: center;
    background: #03A9F4;
    color: #fff;
    padding: 10px 0;
    font-size: 16px;
    border-radius: 6px;
    margin-bottom: 20px;
}

/**/
.feedback-main {
    width: 90%;
    margin: 2vh 5%;
}

.feedback-title {
    font-size: 16px;
    padding: 6px 0;
    width: 80%;
    color: #5a5a5a;
    border-radius: 5px;
    margin-left: 4%;
    margin-top: 20px;
}

.feedback-type {
    display: flex;
    flex-wrap: wrap;
}

.feedback-type span {
    white-space: nowrap;
    margin: 10px;
    background: #c3c3c3;
    padding: 6px 10px;
    font-size: 14px;
    color: #fff;
    border-radius: 6px;
    width: calc(33.33% - 20px);
    text-align: center;
    box-sizing: border-box;
    text-align: center;
}

.feedback-type span.hover {
    background: #03A9F4;
}

.feedback-desc {
    width: 100%;
}

.feedback-desc textarea {
    width: 94%;
    border: 1px #e0e0e0 solid;
    border-radius: 3px;
    height: 16vh;
    margin-top: 3vh;
    margin-left: 3%;
    overflow-y: scroll;
    box-sizing: border-box;
    padding: 10px;
    line-height: 1.6;
}

.feedback-btn {
    margin-top: 6vh;
    width: 94%;
    text-align: center;
    background: #2196F3;
    padding: 10px 0;
    color: #fff;
    border-radius: 6px;
    margin-left: 3%;
    cursor: pointer;
}

/*充值*/
.pay-main {
    z-index: 800;
    box-sizing: border-box;
    padding: 16px 20px;
    border-radius: 6px;
    width: 100%;
}

.pay-title {
    text-align: center;
    font-size: 18px;
    line-height: 1.6;
    padding-bottom: 20px;
    color: #2196F3;
}

.pay-list {
    display: flex;
    flex-wrap: wrap;
}

.pay-list div {
    width: 47%;
    text-align: center;
    margin: 10px 1.5%;
    background: #aae5ff;
    box-sizing: border-box;
    padding: 6px 0;
    border-radius: 3px;
    color: #3e3e3e;
}

.pay-list div p {
    font-size: 12px;
    margin-top: 10px;
    font-weight: 500;
    color: #666;
}

.pay-list div span {
    font-size: 16px;
    font-weight: bold;
}

.pay-list div.hover {
    background: #2196F3;
    color: #fff !important;
}

.recharge-btn {
    margin-top: 3vh;
    width: 100%;
    text-align: center;
    padding: 8px 0;
    background: #2196F3;
    color: #fff;
    border-radius: 3px;
    margin-bottom: 1vh;
}

.pay-list div.hover p {
    color: #fff;
}

.pay-wrong {
    text-align: center;
    background: #fff;
    padding: 10px 20px;
    display: inline-block;
    margin: 0 auto;
    width: calc(100% - 50px);
    border-radius: 5px;
    box-sizing: border-box;
    margin-left: 25px;
    margin-top: 20px;
}

.pay-wrong span {
}

.pay-wrong a {
    color: #03A9F4;
    font-weight: bold;
    margin-left: 10px;
}

/**/
.my-info-bottom {
    width: 94%;
    margin: 2vh 3%;
    padding: 13px 3%;
    display: flex;
    background: #ffc46e;
    box-sizing: border-box;
    border-radius: 50px;
    justify-content: space-between;
    font-size: 16px;
}

.device-on,.device-off {
    color: #3c3c3c;
}

.device-on span {
    padding: 0 6px;
    color: #009688;
}

.device-off span {
    padding: 6px;
    color: #E91E63;
}

.device-search-main {
    display: flex;
    padding: 10px;
    background: #fff;
    width: 94%;
    box-sizing: border-box;
    border-radius: 5px;
    margin-top: 16px;
    margin-left: 3%;
    justify-content: space-between;
}

.device-search-main input {
    width: calc(100% - 5rem);
    border: 1px #ccc solid;
    border-radius: 4px;
    padding: 2px 0;
    text-indent: 10px;
    height: 28px;
    line-height: 28px;
    font-size: 16px;
    font-weight: bold;
}

.device-search-main span {
    background: #2196F3;
    color: #fff;
    border-radius: 5px;
    padding: 4px 16px;
    font-size: 14px;
    line-height: 26px;
    height: 26px;
}

.device-total {
    width: 94%;
    background: #fff;
    margin-left: 3%;
    box-sizing: border-box;
    margin-top: 16px;
    padding: 10px 3%;
    border-radius: 5px;
    align-items: center;
    font-size: 16px;
    display: flex;
}

.device-total label {
    font-size: 16px;
    font-weight: bold;
}

.device-total span {
    color: #2196F3;
    font-weight: bold;
    font-size: 18px;
}

.store-device-list {
    width: 100%;
    margin: 2vh 0;
    box-sizing: border-box;
    border-radius: 16px;
}

.store-device-item {
    margin: 2vh 3%;
    background: #2196F3;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 1vh 3%;
    position: relative;
    text-align: center;
    color: #fff;
}

.store-device-info {
    margin: 2vh 3%;
    background: #ffffff;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 1vh 3%;
    position: relative;
}

.store-device-top {
    display: flex;
    align-items: center;
    position: relative;
}

.store-device-name {
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0;
}

.store-device-name em {
    font-size: 14px;
    color: #009688;
    font-weight: 500;
}

.store-device-status {
    display: flex;
    position: absolute;
    right: 0;
    top: 8px;
}

.store-device-status img {
    width: 20px;
    margin-right: 10px;
}

.store-device-status span.status0 {
    color: #9e9e9e;
    font-size: 14px;
}

.device-status0 {
    position: absolute;
    font-size: 12px;
    right: 2%;
    bottom: 2vh;
    background: #795548;
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
}

.device-status1 {
    position: absolute;
    font-size: 12px;
    right: 2%;
    bottom: 2vh;
    background: #009688;
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
}

.store-device-status span.status1 {
    color: #009688;
    font-size: 14px;
}

.store-device-bottom {
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
    margin-top: 10px;
    font-size: 14px;
    color: #6d6d6d;
    margin-bottom: 10px;
}

.store-device-bottom span {
    width: auto;
    white-space: nowrap;
}

.store-device-bottom span:last-child {
    text-align: right;
}

.store-device-bottom span.status-0 {
    color: #9E9E9E;
}

.store-device-bottom span.status-1 {
    color: #009688;
}

.store-device-icon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1vh;
    padding-bottom: 1vh;
}

.store-device-icon span {
    background: #a9e4ff;
    border-radius: 4px;
    padding: 4px 10px;
    color: #1999ff;
    font-size: 14px;
}

.device-view-info {
    position: fixed;
    z-index: 800;
    background: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 80%;
    box-sizing: border-box;
    padding: 20px;
    border-radius: 10px;
}

.device-view-info-title {
    line-height: 1.6;
    margin-bottom: 3vh;
    font-weight: bold;
    text-align: center;
}

.device-view-info-title input {
    border: none;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    border-bottom: 1px #ccc solid;
    padding-bottom: 6px;
}

.device-view-info-select {
    width: 100%;
    border: 1px #ececec solid;
    border-radius: 3px;
    padding: 8px;
    box-sizing: border-box;
    margin-bottom: 1vh;
    margin-top: 1vh;
    font-size: 14px;
    color: #101010;
    background: #ffffff;
}

.device-view-info-btn {
    text-align: center;
    background: #2196F3;
    padding: 8px 0;
    font-size: 14px;
    color: #fff;
    border-radius: 3px;
    margin-top: 2vh;
}

.device-view-close-btn {
    margin-top: 2vh;
    text-align: center;
    background: #FF5722;
    padding: 8px 0;
    font-size: 14px;
    color: #fff;
    border-radius: 3px;
}

.device-close {
    position: absolute;
    right: -6px;
    top: -6px;
    z-index: 800;
    width: 24px;
    height: 24px;
    background: #dcdcdc;
    text-align: center;
    border-radius: 50%;
    color: #757575;
}

.device-view-li {
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    flex-wrap: wrap;
}

.device-view-user {
    width: calc(100% - 8rem);
}

.device-view-user > div {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 10px;
    border-bottom: 1px #ccc dashed;
    padding-bottom: 6px;
}

.device-view-user > div em {
    position: relative;
}

.device-view-user > div u {
    font-size: 14px;
    padding: 3px 8px;
    background: #03A9F4;
    color: #fff;
    border-radius: 3px;
}

.device-view-user label {
    margin-left: 1rem;
}

.device-view-li span {
    width: 5rem;
    color: #777777;
    white-space: nowrap;
    font-size: 14px;
    position: relative;
}

.device-view-li label {
    font-size: 14px;
    color: #a2a2a2;
    display: flex;
    align-items: center;
}

.device-view-li label.hover {
    color: #009688;
}

.device-view-li span em {
    font-size: 14px;
    color: #009688;
    left: 4rem;
}

.device-view-li label.csq {
    position: relative;
}

.device-view-li label.csq img {
    width: 30px;
    position: relative;
    z-index: 5;
}

.device-view-li label.csq u {
    content: "";
    width: 16px;
    position: absolute;
    height: 22px;
    background: #009688;
    z-index: 0;
    max-width: 30px;
}

.device-view-li em {
    font-size: 14px;
    color: #7d7d7d;
    white-space: nowrap;
    position: absolute;
    right: 0;
}

.device-view-li select {
    width: calc(100% - 6rem);
}

.device-view-li input {
    width: calc(100% - 6rem);
    border: none;
    border-bottom: 1px #b7b7b7 solid;
    font-size: 16px;
    text-indent: 7px;
    padding: 3px 0;
    color: #0e0e0e;
}

.device-view-li textarea {
    width: 100%;
    margin-top: 2vh;
    border: 1px #ccc solid;
    border-radius: 3px;
    height: 10vh;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 10px;
    font-size: 14px;
    color: #0e0e0e;
}

.device-view-tip {
    line-height: 1.6;
    margin-bottom: 10px;
    font-size: 14px;
    color: #F44336;
}

/**/
.add-btn-img {
    position: fixed;
    width: 32px;
    height: 32px;
    padding: 10px;
    z-index: 100;
    right: 1%;
    top: 18%;
}

/**/
.user-info-list {
    width: 94%;
    margin: 1vh 3%;
    box-sizing: border-box;
    padding: 20px 10px;
    background: #ffffff;
    border-radius: 10px;
}

.user-info-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.user-info-left {
    width: 96px;
    margin-right: 2%;
    text-align: center;
}

.user-info-left img {
    width: 72px;
    margin: 0 16%;
    border-radius: 6px;
    overflow: hidden;
    height: 72px;
}

.user-info-left span {
    text-align: center;
    margin-top: 1vh;
    display: block;
    letter-spacing: 2px;
}

.user-info-right {
    font-size: 14px;
    width: calc(100% - 110px);
}

.user-info-li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 6px;
    flex-wrap: wrap;
}

.user-info-li label {
    color: #797979;
}

.user-info-li span {
    color: #009688;
    white-space: nowrap;
}

.user-info-li span.hover {
    color: #FF5722;
}

.user-info-bottom {
    font-size: 14px;
    margin-top: 2vh;
    border-top: 1px #e8e8e8 dashed;
    padding: 10px 0 0 0;
    display: flex;
    justify-content: space-around;
}

.user-info-bottom span {
    color: #fff;
    border-radius: 6px;
    padding: 3px 10px;
    width: 80px;
    text-align: center;
}

.user-info-bottom span:first-child {
    background: #03A9F4;
}

.user-info-bottom span:last-child {
    background: #795548;
}

/**/
.device-detail-info-btn {
    margin-top: 2vh;
    text-align: center;
    background: #2196F3;
    padding: 8px 0;
    font-size: 14px;
    color: #fff;
    border-radius: 3px;
    margin-bottom: 6vh;
}

.device-detail-tocoin {
    background: #E91E63;
}

/**/
.qrcode-view {
    position: fixed;
    top: 50%;
    z-index: 900;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 80%;
    background: #fff;
    box-sizing: border-box;
    padding: 20px;
    border-radius: 3px;
}

.qrcode-view-title {
    justify-content: center;
    display: flex;
    align-items: center;
}

.qrcode-view-img {
    width: 100%;
}

.qrcode-view-img img {
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
}

.qrcode-view-img p {
    text-align: center;
}

.qrcode-view-close {
    position: absolute;
    right: -6px;
    top: -6px;
    background: #E91E63;
    width: 24px;
    height: 24px;
    align-items: center;
    text-align: center;
    border-radius: 50%;
    line-height: 24px;
    color: #fff;
}

.main-tip {
    position: fixed;
    z-index: 100;
    left: 50%;
    top: 40%;
    width: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}

.main-tip img {
    width: 100%;
}

.main-tip p {
    color: #666;
    margin-top: 20px;
    font-weight: bold;
}

/**/
.pay-info-list {
    width: 90%;
    margin: 16px 5%;
    background: #fff;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 20px;
}

.pay-info-li {
    display: flex;
    padding: 12px 0;
}

.pay-info-li span {
    color: #2196F3;
}

.pay-info-li label {
    color: #676767;
    width: 6rem;
}

/**/
.info-store-list {
    background: #ade5ff;
    width: 94%;
    margin: 0 3% 10px 3%;
    box-sizing: border-box;
    border-radius: 5px;
    padding: 16px 16px 0 16px;
}

.info-store-li {
    padding-bottom: 16px;
}

.info-store-li label {
    color: #5a5a5a;
    width: 6rem;
    display: inline-block;
    margin-right: 1rem;
}

.info-store-li span {
}

/**/
.member-main {
    margin-top:20px;
    width:96%;
    margin-left:2%;
}
.feedback-list {
    width: 100%;
}

.feedback-info {
    box-sizing: border-box;
    padding: 20px;
    background: #fff;
    margin-bottom: 16px;
    border-radius: 4px;
}

.feedback-name {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 10px;
    border-bottom: 1px #eaeaea dashed;
    padding-bottom: 10px;
}

.feedback-name label {
    color: #666;
}

.feedback-name span {
}

.feedback-desc {
}

.feedback-desc label {
    font-size: 14px;
    color: #808080;
}

.feedback-desc p {
    color: #666;
    padding: 10px;
    border: 1px #ccc solid;
    border-radius: 3px;
    margin-top: 10px;
    font-size: 14px;
    background: #f5f5f5;
}

.feedback-pic {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.feedback-pic label {
    display: block;
    width: 100%;
    color: #666;
}

.feedback-pic img {
    width: auto;
    box-sizing: border-box;
    padding: 16px;
    max-width: 100%;
}
.feedback-btn-list {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    font-size: 14px;
}
.feedback-btn-list label {
    padding: 4px 10px;
    background: #383838;
    color: #fff;
    border-radius: 3px;
}
.feedback-btn-list span {
    padding: 4px 10px;
    background: #E91E63;
    color: #fff;
    border-radius: 3px;
}