You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
452 lines
8.5 KiB
452 lines
8.5 KiB
/* 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;
|
|
}
|