yylib-quick-mobile
Version:
yylib-quick-mobile
135 lines (131 loc) • 3 kB
text/less
.yy-grid {
&.not-square-grid .am-grid-icon {
width: 40px;
height: 60px;
}
&.am-grid.am-grid-carousel .am-grid-carousel-page{
border-top: none ;
border-right: none ;
}
&.am-grid.am-grid-carousel .am-grid-carousel-page::before{
background-color: transparent ;
}
/*首页项数量*/
.gridDiv-zk{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
.gridImg-zk{
width: 35%;
}
.gridDiv-zk .gridDec-zk{
color: #414655;
margin-top: 8px;
font-size: 14px;
}
.gridDiv-zk span{
position: absolute;
right: 20px;
top: 10px;
width: 20px;
height: 20px;
border-radius: 50%;
line-height: 20px;
color: #fff;
text-align: center;
font-size: 12px;
background-color: #FF4B50;
}
}
.yy-grid.am-grid-square .am-grid-item .am-grid-item-inner-content .yy-am-grid-icon{
width: 28%;
margin-top: 9px;
}
.grid-zk {
position: relative;
padding-top: 25px;
background-color: #fff;
p {
position: absolute;
left: 12px;
top: 0;
color: #7D8291;
font-size: 14px;
z-index: 3;
}
.am-grid-text{
font-size: 14px ;
color: #414655 ;
}
}
//数字卡片的样式
.yy-grid .am-grid-item-content{
list-style: none;
margin: 0;
padding: 0;
background-color: #fff;
display: flex;
flex-direction: row;
position: relative;
}
.yy-grid .am-grid-item-content::after{
content: '';
position: absolute;
background-color: #ddd;
display: block;
z-index: 1;
top: auto;
right: auto;
bottom: 0;
left: 0;
width: 100%;
height: 1PX;
-webkit-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: scaleY(0.5);
-ms-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.yy-grid .am-grid-item-content li {
width: 100%;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
.yy-grid .am-grid-item-content li span{
margin-bottom: 10px;
font-size: 16px;
color: #FF6161;
}
.yy-grid .am-grid-item-content li p{
color: #414655;
margin: 0;
padding-bottom: 0;
font-size: 12px;
}
.yy-grid .am-grid-item-content li::after{
content: "";
position: absolute;
background-color: #ddd;
display: block;
z-index: 1;
bottom: 0;
right: 0;
width: 1px;
height: 100%;
-webkit-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: scaleX(.5);
-ms-transform: scaleX(.5);
transform: scaleX(.5);
}