/* 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; }