hulimall/pages/category/category.wxss

/* pages/category/category.wxss */
@import "/wxSearch/wxSearch.wxss";
page{
  background: #fff;
  display:flex;flex-direction:column;justify-content: flex-start;
  height: 100%;
}

 
/*总体主盒子*/  
.t_container {  
  position: relative;  
  width: 100%;  
  height: 100%;  
  background-color: #fff;  
  color: #939393;
  padding-top:47px;
}
 /*左侧栏主盒子*/  
.nav_left{  
  /*设置行内块级元素（没使用定位）*/  
  display: inline-block;  
  width: 25%;
  position: fixed;
  top: 47px;
  bottom: 0;
  left: 0;
  /*主盒子设置背景色为灰色*/  
  background: #f5f5f5;  
  text-align: center;  
}  
/*左侧栏list的item*/  
.nav_left .nav_left_items{  
  /*每个高30px*/  
  height: 40px;  
  /*垂直居中*/  
  line-height: 40px;  
  /*再设上下padding增加高度，总高42px*/  
  padding: 6px 0;  
  /*只设下边线*/  
  border-bottom: 1px solid #dedede;  
  /*文字14px*/  
  font-size: 14px; 
  overflow:hidden;
}  
/*左侧栏list的item被选中时*/  
.nav_left .nav_left_items.active{  
  /*背景色变成白色*/  
  background: #fff;  
  color: #7a896c; 
}  
/*右侧栏主盒子*/  
.nav_right{  
  /*右侧盒子使用了绝对定位*/  
  position: absolute;  
  top: 55px;  
  right: 0;  
  flex: 1;  
  /*宽度75%，高度占满，并使用百分比布局*/  
  width: 75%;    
  padding: 10px;  
  box-sizing: border-box;  
  background: #fff;  
}  
/*右侧栏list的item*/  
.nav_right .nav_right_items{  
  /*浮动向左*/  
  float: left;  
  /*每个item设置宽度是33.33%*/  
  width: 33.33%;  
  height: 120px;  
  text-align: center;  
}  
.nav_right .nav_right_items image{  
  /*被图片设置宽高*/  
  width: 60px;  
  height: 60px;  
  margin-top: 15px;  
}  
.nav_right .nav_right_items text{  
  /*给text设成块级元素*/  
  display: block;  
  margin-top: 15px;  
  font-size: 14px;  
  color: black;
  /*设置文字溢出部分为...*/  
  overflow: hidden;  
  white-space: nowrap;  
  text-overflow: ellipsis;  
} 
.nodata_text
{
  color: black;
  font-size: 14px;  
  text-align: center;  
} 
.mink::after{
  display:block;content:'';clear:both;
}
.jiul,.jiul image{
  width: 100%;
  height: 170rpx;
}
.minl{
  font-size: 30rpx;
  color: #333;
  text-align: left;
  line-height: 60rpx;
  float: left;
  background: #fff; 
  width: 70%;
  font-weight: 700;
  /* height: 50rpx;  */
} 
.mink{
  width: 100%;
  background: #fff;
  height: 100%;
}

.nav_right_items{  

   float: left;   
 
  width: 33%;  

  text-align: center; 
  color: #4a4a4a; 
  background: #fff;
}  
.nav_right_items image{  

  width: 30px;  
  height: 30px; 
  margin-top: 15rpx; 
}  
.nav_right_items text{  

  display: block;  
  margin-top: 5rpx;  
  margin-bottom: 10rpx;
  font-size: 26rpx;  

  overflow: hidden;  
  white-space: nowrap;  
  text-overflow: ellipsis;  
}

.other-navigator-hover{
  background:#fff;
}

.scroll_left{
  width:25%;
  height:100%;
  background:#f0f0f0;
  text-align:center; 
  position: fixed;
  left: 0;top: 97rpx
}
.mintext{
font-size:14px;
width:30%;
float:left;
margin-top:6px;
color:#333;
}


/* /加载页面/ */
.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%;
}
.wxSearchHistoryItemText{
flex: 8;
font-size: 14px;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.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;
  animation: bouncedelay 1.4s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
 
.spinner1 .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
 
.spinner1 .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
 
@-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);
  }
}
/*--------------------------------------------------*/
.spinner2 {
  margin: 100px auto;
  width: 20px;
  height: 20px;
  position: relative;
  text-align: center;
  -webkit-animation: rotate 2.0s infinite linear;
  animation: rotate 2.0s infinite linear;
}
 
.dot1, .dot2 {
  width: 60%;
  height: 60%;
  display: inline-block;
  position: absolute;
  top: 0;
  background-color: #fff;
  border-radius: 100%;
   
  -webkit-animation: bounce 2.0s infinite ease-in-out;
  animation: bounce 2.0s infinite ease-in-out;
}
 
.dot2 {
  top: auto;
  bottom: 0px;
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
 
@-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }}
@keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}
 
@-webkit-keyframes bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}
 
@keyframes bounce {
  0%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}
/*------------------------------------*/
.spinner3 {
  margin: 100px auto;
  width: 50px;
  height: 60px;
  text-align: center;
  font-size: 10px;

}
 
.spinner3 view {
  background-color: #fff;
  height: 100%;
  width: 6px;
  display: inline-block;
   margin-left: 2px;
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}
 
.spinner3 .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
 
.spinner3 .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
 
.spinner3 .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
 
.spinner3 .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
 
@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 
  20% { -webkit-transform: scaleY(1.0) }
}
 
@keyframes stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

.cimages{
  width:100%;
  height:145px;
}