0112

web/view/doorlockUsers/doorlockUsers.css

+@font-face {
+  font-family: 'defaultIconfont';
+  src: url('../../resources/font/defaultIconfont.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'iconfont';
+  src: url('../../resources/font/iconfont.ttf') format('truetype');
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  -webkit-user-select: none;
+  user-select: none;
+  color: #fff;
+  font-size: 0.373rem;
+  background: -webkit-linear-gradient(left, #242635, #fff, #242635);
+  background: linear-gradient(to right, #242635, #fff, #242635);
+  background-color: #242635;
+  -webkit-background-size: 100% 1px;
+  background-size: 100% 1px;
+  background-repeat: no-repeat;
+  background-position: bottom center;
+}
+
+ul {
+  padding-left: 0;
+  list-style: none;
+  margin-bottom: 0;
+}
+
+p {
+  margin-bottom: 0;
+}
+
+.u-loading {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1050;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+.u-loading .u-loading-box {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%);
+  right: 0;
+}
+
+.u-loading .u-loading-box .u-loading-icon {
+  width: 30px;
+  height: 30px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-image: url("../../resources/image/white_loading_icon.png");
+  -webkit-background-size: cover;
+  background-size: cover;
+  margin: 0 auto;
+  -webkit-animation: loading 1s steps(12, end) infinite;
+  animation: loading 1s steps(12, end) infinite;
+}
+
+.u-loading .u-loading-box .u-loading-text {
+  color: #fff;
+  margin-top: 0.32rem;
+  text-align: center;
+}
+
+@-webkit-keyframes loading {
+  0% {
+    -webkit-transform: rotate3d(0, 0, 1, 0deg);
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate3d(0, 0, 1, 360deg);
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+
+@keyframes loading {
+  0% {
+    -webkit-transform: rotate3d(0, 0, 1, 0deg);
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate3d(0, 0, 1, 360deg);
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+
+.custom-loading {
+  background-color: rgba(36, 38, 53, 0.9);
+}
+
+.custom-loading .u-loading-box {
+  color: #00ffff;
+}
+
+.custom-loading .u-loading-box .u-loading-icon {
+  font-size: 0.427rem;
+  margin: 0 auto;
+  width: 3.750em;
+  height: 3.750em;
+  position: relative;
+  background: none;
+  -webkit-animation: none;
+  animation: none;
+}
+
+.custom-loading .u-loading-box .u-loading-icon:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 0.5em;
+  height: 0.5em;
+  margin: auto;
+  border-radius: 50%;
+  -webkit-transform: translateZ(0) scale(0.55);
+  transform: translateZ(0) scale(0.55);
+  -webkit-animation: loading 1.3s infinite linear;
+  animation: loading 1.3s infinite linear;
+}
+
+.custom-loading .u-loading-box .u-loading-text {
+  color: inherit;
+  font-size: 0.427rem;
+  margin-top: 0.533rem;
+}
+
+@-webkit-keyframes loading {
+  0%, 100% {
+    -webkit-box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
+    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
+  }
+
+  12.5% {
+    -webkit-box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+  }
+
+  25% {
+    -webkit-box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+  }
+
+  37.5% {
+    -webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+  }
+
+  50% {
+    -webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+  }
+
+  62.5% {
+    -webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+  }
+
+  75% {
+    -webkit-box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+  }
+
+  87.5% {
+    -webkit-box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+  }
+}
+
+@keyframes loading {
+  0%, 100% {
+    -webkit-box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
+    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
+  }
+
+  12.5% {
+    -webkit-box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+  }
+
+  25% {
+    -webkit-box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+  }
+
+  37.5% {
+    -webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+  }
+
+  50% {
+    -webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+  }
+
+  62.5% {
+    -webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+  }
+
+  75% {
+    -webkit-box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+  }
+
+  87.5% {
+    -webkit-box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+  }
+}
+
+.u-dialog {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1051;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+.u-dialog .u-dialog-box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  width: 6.667rem;
+  background-color: #fff;
+  border-radius: 0.32rem;
+}
+
+.u-dialog .u-dialog-box .u-dialog-content {
+  padding: 0.4rem;
+  text-align: center;
+  position: relative;
+}
+
+.u-dialog .u-dialog-box .u-dialog-content:after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: #bbb;
+}
+
+.u-dialog .u-dialog-box .u-dialog-button {
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: separate;
+}
+
+.u-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
+.u-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
+  display: table-cell;
+  color: #007aff;
+  text-align: center;
+  padding: 0.4rem 0;
+  line-height: 1;
+  position: relative;
+}
+
+.u-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 1px;
+  -webkit-transform: scaleX(0.5);
+  transform: scaleX(0.5);
+  background-color: #bbb;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  -webkit-transition: opacity 0.5s linear;
+  transition: opacity 0.5s linear;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+.custom-dialog {
+  background-color: rgba(36, 38, 53, 0.9);
+}
+
+.custom-dialog .u-dialog-box {
+  width: 9.467rem;
+  border-radius: 0.133rem;
+  background-color: transparent;
+  border: 1px solid;
+  color: #00ffff;
+  padding-bottom: 0.933rem;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-content {
+  width: 100%;
+  height: 3.733rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  font-size: 0.48rem;
+  line-height: 0.587rem;
+  padding: 0 0.4rem;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-content span {
+  margin-right: 0.32rem;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-content:after {
+  display: none;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-button {
+  display: block;
+  text-align: center;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
+  width: 3.6rem;
+  border-radius: 0.133rem;
+  background-color: transparent;
+  border: 1px solid;
+  color: #00ffff;
+  font-size: 0.427rem;
+  padding: 0.267rem 0;
+  display: inline-block;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active,
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm:active {
+  background-color: #153D4C;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel.disabled,
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm.disabled {
+  background-color: transparent;
+  color: #999;
+}
+
+.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:after {
+  display: none;
+}
+
+.header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 1.173rem;
+  z-index: 1030;
+  background-color: #010d19;
+}
+
+.header p {
+  position: absolute;
+  top: 0;
+  left: 1.467rem;
+  right: 1.467rem;
+  line-height: 1.173rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #fff;
+  font-size: 0.507rem;
+  text-align: center;
+}
+
+.header span {
+  color: #fff;
+  width: 1.467rem;
+  line-height: 1.173rem;
+  display: block;
+}
+
+.header span:active {
+  opacity: 0.5;
+}
+
+.header .header-left {
+  float: left;
+  padding-left: 0.133rem;
+}
+
+.header .header-right {
+  float: right;
+  padding-right: 0.133rem;
+  text-align: right;
+}
+
+.header .icon {
+  font-family: iconfont;
+  font-size: 0.667rem;
+  -webkit-font-smoothing: antialiased;
+  line-height: 1.173rem;
+}
+
+.header ~ .content {
+  padding-top: 1.173rem;
+}
+
+.u-text {
+  width: 100%;
+  display: table;
+  position: relative;
+}
+
+.u-text input {
+  display: table-cell;
+  width: 100%;
+  border: 0;
+  outline: 0;
+  -webkit-appearance: none;
+  padding: 0.533rem 1.867rem 0.533rem 0.533rem;
+  background-color: transparent;
+}
+
+.u-text input[type=text] ~ .u-text-see {
+  color: #007aff;
+}
+
+.u-text .u-text-icon {
+  font-family: iconfont;
+  font-size: 0.533rem;
+  -webkit-font-smoothing: antialiased;
+  line-height: 1;
+  width: 1.12rem;
+  padding-left: 0.453rem;
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.u-text .u-text-icon ~ input {
+  padding-left: 0;
+}
+
+.u-text .u-text-title {
+  width: 1.92rem;
+  padding-left: 0.533rem;
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.u-text .u-text-title ~ input {
+  padding-left: 0;
+}
+
+.u-text .u-text-clear,
+.u-text .u-text-see {
+  position: absolute;
+  top: 0;
+  width: 0.8rem;
+  height: 100%;
+}
+
+.u-text .u-text-clear:before,
+.u-text .u-text-see:before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  font-family: defaultIconfont;
+  font-size: 0.667rem;
+  -webkit-font-smoothing: antialiased;
+  line-height: 1;
+}
+
+.u-text .u-text-clear {
+  right: 0.8rem;
+}
+
+.u-text .u-text-clear:before {
+  content: '\e724';
+}
+
+.u-text .u-text-see {
+  right: 0;
+}
+
+.u-text .u-text-see:before {
+  content: '\e73c';
+}
+
+.u-text:after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: #bbb;
+}
+
+@media (max-height: 400px /*no*/) {
+  #app {
+    height: 17.253rem;
+    position: relative;
+  }
+}
+
+.u-button {
+  width: 6.4rem;
+  color: #fff;
+  font-size: inherit;
+  background-color: #007aff;
+  border-radius: 0.533rem;
+  text-align: center;
+  line-height: 1;
+  margin: 0 auto;
+  padding: 0.267rem 0;
+  -webkit-transition: all 0.2s linear;
+  transition: all 0.2s linear;
+  background-clip: padding-box;
+}
+
+.u-button:active {
+  background-color: #0065ff;
+}
+
+.u-button.disabled {
+  background-color: #bbb;
+}
+
+.unbindState-dialog {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1051;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+.guide-dialog {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1051;
+  background-color: rgba(0, 0, 0, 0.8);
+}
\ No newline at end of file