hulimall/app.wxss

/**app.wxss**/

page { 
   background: #fff;
   height:100%;
   width:100%;
   font-family: 'Microsoft YaHei';
}
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  font-family: 'Microsoft YaHei';
  /* font-family: serif; */
}
.df{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  /* border-top: 1px solid #eee; */
}
.df_1{
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-tap-highlight-color: transparent;
  margin-left:5px;
}
.df_2{
  -webkit-box-flex: 2;
  -webkit-flex: 2;
  -ms-flex: 2;
  flex: 2;
  -webkit-tap-highlight-color: transparent;
}
.bg{ background: #fff;}
.bg_white{ background: #fff;}
.bg_hui{ background: #eee;}
.bg_red{ background: #dd2727;}
.bg_green{ background: #02bf02;}
.bg_cheng{ background: #f85;}

.clear{  clear: both;}
.ovh1{
  width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  }
.red{ color: #dd2727;}
.green{ color: #98FB98;}
.gray{ color: #BEBEBE;}
.c3{  color: #333;}
.c6{  color: #666;}
.c9{  color: #999;}
.white{  color: #fff;}
.font_16{  font-size: 16px;}
.font_14{  font-size: 13px;}
.font_12{  font-size: 12px;}
.font_10{  font-size: 10px;}
.l_h20{
  line-height: 20px;
}

/*定位*/
.pr{position: relative;}
.pa{position: absolute;}

/*文字超出省略*/
.ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block;
}

/*对齐*/
.tl{text-align: left;}
.tc{text-align: center;}
.tr{text-align: right;}

/*间距*/
.mt1{margin-top: 1px;}
.mt5{margin-top: 5px;}
.mt8{margin-top: 8px;}
/*.mt10{margin-top: 10px;}*/
.mt15{margin-top: 15px;}
.mt20{margin-top: 20px;}
.mt25{margin-top: 25px;}
.mt30{margin-top: 30px;}
.mt35{margin-top: 35px;}
.mt40{margin-top: 40px;}
.mt60{margin-top: 60px;}
.p_all{ padding: 3%;}

/*边框*/
.bte{border-top:solid 1px #eee;}
.bbe{border-bottom: solid 1px #eee;}
.bre{ border-right: 1px solid #eee}

/*浮动*/
.fl_l{ float: left;}
.fl_r{ float: right;}

.w10{ width: 10%;}
.w20{ width: 20%;}
.w30{ width: 30%;}
.w40{ width: 40%;}
.w50{ width: 50%;}
.w60{ width: 60%;}
.w70{ width: 70%;}
.w80{ width: 80%;}
.w90{ width: 90%;}
.w100{ width: 100%;}
/*边框*/
.bte{ border-top: 1px solid #eee;}
.bbe{ border-bottom: solid 1px #eee;}
.bre{ border-right: 1px solid #eee;}
.ble{ border-left: 1px solid #eee;}

.footfixed { display: block; position: fixed; bottom: 0; left: 0;
  background: #fff; z-index: 100; width:100%; font-size: 14px; line-height: 50px;
}
.cl_h{
  clear: both;
  height: 1px;
  margin-top: 60px;
}
.shop{ position: relative;}
.video{
  width: 45px;
  height: 45px;
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}
.video image{
  width: 45px;
  height: 45px;
  background-size:45px; 
}
.search_no{
    width:100%;
    display:block;
    color:#666;
    text-align:center;
    font-size:14px;
    padding-top:130px;
}
.scimg{
    width:84px;
    height:106px;
    display:inline-block;
    background-size:100px;
    padding-bottom:10px;
}
.x_right{
    width: 16px;
    height: 18px;
    margin-left: 10px;  
}
button[type="warn"] {
  color:#FFFFFF;
  background-color:#d9002f;
}

/* /加载页面/ */
.body{
  background-color: #f2f2f2;
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
}
.spinner {
  margin: 40px auto;
  width: 30px;
  height: 30px;
  position: relative;
}
 
.container1  view, .container2 view, .container3 view{
  width: 8px;
  height: 8px;
  background-color: red;
  border-radius: 100%;
  position: absolute;
  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
  animation: bouncedelay 1.2s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.zong{
  display: flex;
  align-items: center;
  justify-content: center;
  height:100px;
  width:100px;
  background:#fefefe;
  border-radius:15px;
}
.spinner .spinner-container {
  position: absolute;
  width: 100%;
  height: 100%;
}
 
.container2 {
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}
 
.container3 {
  -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}
 
.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }
 
.container2 .circle1 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
 
.container3 .circle1 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
 
.container1 .circle2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
 
.container2 .circle2 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
 
.container3 .circle2 {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
 
.container1 .circle3 {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
 
.container2 .circle3 {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
 
.container3 .circle3 {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
 
.container1 .circle4 {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}
 
.container2 .circle4 {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}
 
.container3 .circle4 {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}
@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0)  }
  40% { -webkit-transform: scale(1.0) }
}
 
@keyframes bouncedelay {
  0%, 80%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}
/*------------------------------------------------------------*/
.spinner1 {
  margin: 100px auto 0;
  width: 150px;
  text-align: center;
}
 
.spinner1 view {
 width: 8px;
  height: 8px;
  background-color: #fff;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;