/* 针对金宇商城设置的css */ /*********************/ ::-webkit-scrollbar-track-piece {//滚动条凹槽的颜色,还可以设置边框属性 background-color: #f8f8f8; } ::-webkit-scrollbar {//滚动条的宽度 width: 0px !important; height: 0px; } ::-webkit-scrollbar-thumb {//滚动条的设置 background-color: #dddddd; background-clip: padding-box; min-height: 28px; } ::-webkit-scrollbar-thumb:hover { background-color: #bbb; } /*********************/ [v-cloak] { display: none; } body { background-color: #e0ebf4 !important; } em { font-style: normal; } /* 直线 */ .zmq-img-nodata { width: 70vw; height: 70vw; margin-left: 15vw; margin-top:5rem; } .zmq-line-versial { width: 1px !important; height: 2rem; margin-top: 0.5rem } .zmq-line-level { height: 1px !important; } /*********** 美化选择框 *************/ /* 美化input type=checkbox */ /* 第二种解决方案:图片代替checkbox */ .check .input_check+ label { background-image: url('../image/drawable-xhdpi/check.png') !important; background-size: 100% 100%; } .aui-radio, .aui-checkbox { width: 1.2rem; height: 1.2rem; background-color: #ffffff; border: solid 0px #dddddd !important; -webkit-border-radius: 0.6rem; border-radius: 0.6rem; font-size: 0.8rem; margin: 0; padding: 0; position: relative; display: inline-block; vertical-align: top; cursor: default; -webkit-appearance: none; -webkit-user-select: none; user-select: none; -webkit-transition: background-color ease 0.1s; transition: background-color ease 0.1s; } .aui-checkbox span { position: relative; } .aui-checkbox .input_check { position: absolute; width: 30px; height: 30px; visibility: hidden; position: absolute; margin-top: 0.7rem; } .aui-checkbox .input_check+ label { display: inline-block; width: 25px; height: 25px; background-position: -0px -0px; background-image: url('../image/drawable-xhdpi/nocheck.png'); background-size: 100% 100%; border-radius: 50%; } .aui-checkbox .input_check:checked+ label { background-position: 0; } /*********** 美化结束 **************/ /*--- 优化input ----*/ .zmq-input-noborder { border: 0px solid #fff !important; } /*------ 图标配置 -------*/ .zmq-icon-inline-user { width: 1.3rem !important; display: inline; margin-right: 0.4rem; } .zmq-icon-inline-middle { width: 0.7rem !important; display: inline; margin-right: 0.4rem; } .zmq-icon-inline { width: 0.5rem !important; display: inline; margin-right: 0.2rem; } .zmq-icon-inline-big { width: 1.5rem !important; height: 1.5rem !important; display: inline; margin-right: 0.2rem; } .zmq-icon-right { width: 0.5rem; height: 0.9rem; margin-top: 2px; margin-left: 5px; } /*----- 直线 -----*/ .zmq-line-3 { background-color: #e0ebf4 !important; height: 3px; } /**----------- 一行显示 -----------**/ /* 文字竖着排 */ .zmq-text-vertical { width: 1rem; padding-left: 0.15rem; box-sizing: border-box; font-size: 0.6rem !important; margin-left: 0.6rem; line-height: 1rem; text-align: center; } .zmq-line-1 { overflow: hidden;/*超出部分隐藏*/ white-space: nowrap;/*不换行*/ text-overflow: ellipsis;/*超出部分省略号显示*/ } .zmq-flex-nowarp { display: flex; display: -webkit-flex; } .zmq-flex { display: flex; display: -webkit-flex; flex-wrap: wrap; } .zmq-inline { display: inline !important; } .zmq-flex-start { justify-content: flex-start !important; } .zmq-flex-end { justify-content: flex-end !important; } .zmq-flex-between { justify-content: space-between !important; } .zmq-warp { flex-wrap: wrap; } .zmq-flex-1 { flex: 1; } /* --浮动-- */ .zmq-float-left { float: left; } .zmq-float-right { float: right; } .zmq-position-absolute { position: absolute !important; right: 10px; } /* ---- 宽度整理 ---- */ .zmq-width-100 { width: 100% !important; } .zmq-width-80 { width: 80% !important; } .zmq-width-70 { width: 70% !important; } .zmq-width-60 { width: 60% !important; } .zmq-width-50 { width: 50% !important; } .zmq-width-40 { width: 40% !important; } .zmq-width-30 { width: 30% !important; } .zmq-width-20 { width: 20% !important; } .zmq-width-10 { width: 10% !important; } /* 背景格式 */ .zmq-bg-success { background-color: #009944; } .zmq-bg-shallow { background-color: #dcfeff !important; } .zmq-bg-danger { background-color: #f00 !important; } .zmq-bg-white { background-color: #fff !important; } .zmq-bg-transparent { background-color: transparent !important; } .zmq-bg-noraml { background-color: #067974 !important; } .zmq-input-number { border : 1px solid#ddd !important; width: 15% !important; margin: 0 0.1rem !important; display: inline-block !important; padding : 5px 10px; text-align: center; margin : 0 5px; } .zmq-close { width : 17px; height: 17px; margin-top: -1rem; margin: auto 0; display: inline-block; vertical-align: bottom; margin-left: 0.3rem; } /* 字行高 */ .zmq-lineHeight-13 { line-height: 1.3rem } .zmq-lineHeight-08 { line-height: 0.8rem; } /* 字体格式 */ .zmq-font-weight { font-weight: bold !important; } .zmq-text-value { color: #2cacb5 !important; } .zmq-text-white { color: #fff !important; } .zmq-text-font-12 { font-size: 1.2rem !important; } .zmq-text-font-10 { font-size: 1rem !important; } .zmq-text-font-09 { font-size: 0.9rem !important; } .zmq-text-font-08 { font-size: 0.8rem !important; } .zmq-text-font-07 { font-size: 0.7rem !important; } .zmq-text-font-06 { font-size: 0.6rem !important; } .zmq-text-font-05 { font-size: 0.55rem !important; } .zmq-car-text { font-size: 0.6rem; color: #8ec31f; text-align: center; line-height: 0.7rem; margin-top: 2px; } .zmq-text-black { color: #000 !important; } .zmq-text-normal { color: #757575 !important; font-size: 0.6rem !important; } .zmq-text-repose { color: #d7d7d7 !important; } .zmq-text-msg { color: #067974 !important; } .zmq-bg-input { background-color: #f2f8f9 !important; } .zmq-text-done { color: #999 !important; } .zmq-text-right { text-align: right; padding: 10px 0 5px 10px; } .zmq-text-explain { color: #999 !important; font-size: 0.6rem !important; } .zmq-text-success { color: #009944 !important; } .zmq-text-danger { color: #FF0000 !important; } .zmq-textAlign-center { text-align: center !important; } /* 剧中 */ .zmq-margin-auto { margin: auto 0; } /* 圆角 */ .zmq-radius-5 { border-radius: 5px; } .zmq-radius-top-10 { border-radius: 10px 10px 0 0; } .zmq-radius-top-5 { border-radius: 5px 5px 0 0; } .zmq-radius-bottom-5 { border-radius: 0 0 5px 5px; } .zmq-radius-bottom-10 { border-radius: 0 0 10px 10px; } .zmq-radius-10 { border-radius: 10px; } .zmq-border-none { border: 0px !important; } .zmq-border-top-1 { border-top: 1px solid #ddd; } .zmq-img-border { border: 1px solid #067974; border-radius: 5px; } /* 边距 */ .zmq-padding-doneBtn { padding: 5px 15px; } .zmq-padding-left-10 { padding-left: 10px; } .zmq-padding-btn { padding: 10px 10px !important; } .zmq-padding-status { padding: 2px 5px !important; } .zmq-margin-bottom-5 { margin-bottom: 5px; } .zmq-margin-right-10 { margin-right: 10px !important; } .zmq-margin-level-2 { margin-left: 2px; margin-right: 2px; } .zmq-margin-level-10 { margin-left: 10px; margin-right: 10px; } .zmq-margin-level-5 { margin-left: 5px; margin-right: 5px; } .zmq-margin-vertical-2 { margin-top: 2px; margin-bottom: 2px; } .zmq-margin-vertical-5 { margin-top: 5px; margin-bottom: 5px; } .zmq-margin-top-5 { margin-top: 5px !important; } .zmq-margin-top-10 { margin-top: 10px !important; } .zmq-margin-bottom-10 { margin-bottom: 10px !important; } .zmq-margin-top-15 { margin-top: 15px !important; } .zmq-width-90 { width: 96% !important; margin-left: 2% !important; box-sizing: border-box; } .zmq-padding-vertical-5 { padding-top: 5px; padding-bottom: 5px; } .zmq-padding-vertical-10 { padding-top: 10px; padding-bottom: 10px; } /* 内边距 */ .zmq-padding-top-10 { padding-top: 10px; } /*------- 底部按钮 -------*/ .zmq-footer-fixed { position: fixed; bottom: 0px; left: 0; width: 100%; padding-bottom: 5px; background-color: #fff; padding-top: 5px; } .zmq-header-fiexd { position: fixed; top: 0px; left: 0; width: 100%; } /* 按钮格式 */ .zmq-btn { width: 100%; display: block; padding: 4% 0; border: 0; font-size: 1em; font-family: "Microsoft YaHei"; color: #fff; text-align: center; } .zmq-btn-bottom { position: absolute; z-index: 22; width: 120px; right: 1rem; background-color: #32b6bb; padding: 5px 10px; display: inline; text-align: center; margin-top: 1rem; color: #fff; font-size: 0.95rem; font-weight: bold; border-radius: 5px; box-shadow: #999 1px 1px 5px; } .zmq-btn-getCode { background-color: #00787B; color: #fff; border-radius: 0 5px 5px 0; box-sizing: border-box; padding : 4.5% 5% 4.5% 5%; box-sizing: border-box; width: 35%; box-shadow: 1px 1px 4px #ddd; text-align: center; } .zmq-btn-img { background-image: url(../image/drawable-xhdpi/btnbg.png); background-size: 100% 100%; } .zmq-input-border { background-color: #fff !important; border: 1px solid #067974 !important; border-radius: 5px !important; } .zmq-input-border-read { background-color: #067974 !important; border: 1px solid #fff !important; border-radius: 5px !important; } .zmq-btn-border { background-color: #fff !important; border: 1px solid #067974 !important; border-radius: 15px !important; } .zmq-btn-border-danger { background-color: #fff !important; border: 1px solid #f00 !important; border-radius: 15px !important; } .zmq-btn-border-success { background-color: #fff !important; border: 1px solid #009944 !important; border-radius: 15px !important; } .zmq-btn-border-done { background-color: #fff !important; border: 1px solid #fff !important; border-radius: 15px !important; } /**-------------- 边框 ---------------**/ .zmq-border-bottom-1 { border-bottom: 1px solid #ddd; } /* 登录页 */ .zmq-form { background-color: #fff; width: 80%; padding: 10px 15px; box-shadow: 1px 1px 5px #ddd; border-radius: 10px; } /*----------------------- 输入框背景 -------------------*/ .zmq-input-img { width: 1.1rem; height: 1.2rem; position: absolute; margin-left: 0.3rem; } .zmq-input-parent { background-color: #f0f0f0 !important; margin-top: 10px; border-radius: 5px !important; padding: 4.5% 0 4.5% 3% !important; } .zmq-input-parent-margin { background-color: #f0f0f0 !important; margin-top: 10px; border-radius: 5px !important; padding : 0 0 0 3% !important; } .zmq-input { font-size: 0.9rem !important; line-height: 1rem !important; margin-left: 1.8rem !important; color: #000 !important; } /*----------------- 卡片配置 -------------------*/ .zmq-card { background-color: #fff; } .zmq-card-nomal { width: 96%; margin-left: 2%; border-radius: 5px; margin-top: 0.6rem; } /*----------- 顶部配置 -------------*/ .zmq-header { width: 100%; height: 50px; box-sizing: border-box; padding: 8px 15px; background-image: url(../image/drawable-xhdpi/topbg.png) !important; } .zmq-header .zmq-header-logo { color: #fff; font-weight: bold; line-height: 35px; } .zmq-logo-img { width: 70px; height: 16px; margin-top: 10px; } .zmq-search-img { width: 1.5rem; box-sizing: border-box; padding: 5px; position: absolute; margin-left: -1.5rem; margin-top: 0.25rem; } .zmq-header-search { width: 73%; height: 35px; margin-left: 3%; background-image: url(../image/drawable-xhdpi/searchbg.png) !important; background-size: 100% 100%; line-height: 35px; text-align: center; font-size: 0.8rem; color: #f0f0f0; } .zmq-btn-title .zmq-btn-img { width: 1rem; height: 1rem; margin-right: 0.3rem; position: absolute; margin-left: -1.3rem; margin-top: 0.2rem; } .zmq-btn-title { background-color: #32b6bb; display: inline; padding: 5px 10px; border-radius: 5px; padding-left: 2rem; box-shadow: #999 1px 1px 5px; } .zmq-btn-msg em { margin-top: 85%; text-align: center; font-size: 0.8rem !important; } /* 边框虚化 **/ .zmq-box-normal { box-shadow: 1px 1px 5px #067974; } /* ----------- 我的 -----------*/ .zmq-my-header { width: 100%; height: 38%; } .zmq-my-headerbg { width: 100%; height: 80%; background-image: url(../image/drawable-xhdpi/bg01.png); background-size: 100% 100%; } .zmq-my-body { width: 100%; padding-bottom: 10%; padding-top: 0%; position: absolute; top: 5%; } .zmq-my-body .zmq-my-info { background-image: url(../image/drawable-xhdpi/myBody.png); background-size : 100% 100%; height: 80%; margin-top: 2%; width: 94%; margin-left: 3%; border-radius: 10px; } .zmq-my-userinfo { width: 100%; height: 40%; padding: 15px 20px; } .zmq-my-userinfo img { width: 60px; height: 60px; } .zmq-my-userinfo-name { margin-left: 0.8rem; padding-top: 5px; } .zmq-my-userinfo-name p:first-of-type { font-size: 0.9rem !important; } .zmq-my-userinfo-name p { margin-top: 5px; font-size: 0.7rem; color: #fffff4; } .zmq-jifen-bg { position: absolute; right: 7%; margin-top: .5rem; color: #fffff4; background-image: url(../image/drawable-xhdpi/jifenbg.png); background-size: 100% 100%; padding: 5px; font-size: 0.6rem; padding-left: 1.45rem; } .zmq-jifen-bg img { width: 0.7rem; height: 0.7rem; margin: 2px 5px 0 0; position: absolute; margin-left: -1.1rem; } /****--------- 订单管理 -------***/ .zmq-orderCode-img { display: inline !important; width: 0.7rem; height: 0.8rem; margin-right: 5px; } .zmq-img-bgcolor { background-color: #e0ebf4 !important; border-radius: 0px !important; } /*-------------- 积分页面 --------------*/ .zmq-jifen-hedaer { background-image: url(../image/drawable-xhdpi/jifenheader.png); background-size: 100% 100%; } .zmq-hot-bg { background-image: url(../image/drawable-xhdpi/hotbg.png); background-size: 100% 100%; width: 100%; height: 20px; } .zmq-hot-img { padding: 5px; background-color: #e0ebf4 !important; } .zmq-conpamy-photo { width: 60px; height: 60px; } .zmq-qypp { background-image: url(../image/drawable-xhdpi/qypp.png); background-size: 100% 100%; height: 4rem; width: 20%; max-width: 30px !important; } .zmq-inline-img { width: 0.8rem; height: 0.9rem; margin-right: 10px; margin-top: 3px; } .zmq-btn-right { margin-right: 20px; margin-top: 5px; } .zmq-fujin-img { width: 5rem; height: 5rem; margin-top: 5px; } /*-------- 客户消费记录 ------*/ .zmq-bg-info { background-image: url(../image/drawable-xhdpi/kehuinfo.png); background-size: 100% 100%; } .zmq-carInfo-right { background-image: url(../image/drawable-xhdpi/rightCode.png); background-size: 100% 100%; position: absolute; right: -3px; width: 5rem; height: 1.6rem; text-align: center; line-height: 1.6rem } .zmq-info-header { width: 100%; height: 120px } .zmq-user-infoBlock { margin-top: -1rem; background-color: #fff; padding-top: 2rem; padding-bottom: 0.5rem; } .zmq-img-user { width: 3rem; height: 3rem; margin: 0 auto; border: 1px solid #ddd; border-radius: 50%; padding: 5px; margin-top: -4rem; } .zmq-user-name { margin-top: -4.5rem; left: 0 } .zmq-model-bg { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: #000; z-index: 100; opacity: 0.3; overflow: hidden } .zmq-btnIcon-right { float: right; position: absolute; right: 20px; width: 1.5rem; height: 1.5rem; margin-top: 0.4rem } /***----------- 弹出层 ----------***/ .zmq-alert { position: fixed; z-index: 9999; top : 25%; width: 80%; left: 10%; padding : 5px 10px; box-sizing: border-box; box-shadow: 1px 1px 2px #999; } .zmq-alert-title { padding: 5px 0 8px 0; text-align: center; } .zmq-alert-msg { padding-bottom : 5px; } .zmq-alert-input { background-color: #ddd; border-radius: 5px; padding : 5px 10px; margin: 5px 0; } .zmq-alert-input input { // color: #2cacb5; font-size: 0.6rem; height: 1.5rem; } .zmq-alert-btn .zmq-alert-btn-item { padding : 8px 0; margin : 15px 0 0px 0; border-top: 1px solid#ddd; font-size: 0.65rem; } .zmq-alert-btn .zmq-alert-btn-item:last-of-type { border-left: 1px solid#ddd; color: #2cacb5; }