ttk-app-core
Version:
enterprise develop framework
140 lines (139 loc) • 4.16 kB
text/less
.ttk-edf-app-list-search{
width: 100%;
height: auto;
overflow: hidden;
flex: 1;
padding-right: 10px;
&-container{
width: 100%;
height: 100%;
overflow: auto;
background: #fff;
display: flex;
flex: auto;
flex-direction: column;
&-header{
width: 100%;
height: 100px;
padding: 10px 0px;
flex: none;
h3{
line-height: 30px;
padding: 0 20px;
border-bottom: 1px solid #eee;
}
&-search{
width: 40%;
}
&-shopping{
font-size: 36px;
color:@primary-color;
vertical-align: sub;
margin-left:10px;
span{
font-size: 26px;
}
}
&>div{
width: 100%;
padding-top: 15px;
text-align: center;
}
}
&-filter{
width: 100%;
height: auto;
padding: 0 20px;
overflow: hidden;
flex: none;
&-1{
height: auto;
padding: 15px 0;
overflow: hidden;
display: flex;
border-bottom: 1px dashed #eee;
&-label{
width: 100px;
line-height: 30px;
}
&-container{
flex: 1;
height: auto;
overflow: hidden;
line-height: 30px;
}
}
}
&-content{
flex: 1;
overflow: auto;
display: flex;
&>div{
width: 100%;
flex: 1;
overflow: auto;
}
&-item{
width: 23%;
height: 300px;
margin: 1%;
float: left;
border: 1px solid #eee;
&:hover{
box-shadow: 0 0 6px rgba(0,0,0, .3)
}
&>div{
float: left;
}
&-img{
width: 100%;
height: 155px;
line-height: 155px;
text-align: center;
background: #0aa;
span{
color: #fff;
}
}
&-detail {
width: 100%;
padding: 24px;
height: 140px;
box-sizing: border-box;
font-size: 12px;
line-height: 25px;
&>*{
width: 100%;
float: left;
}
h3{
height: 24px;
font-size: 16px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: rgba(0,0,0,.85);
font-weight: 500;
}
p{
width: 100%;
height: 43px;
color: rgba(0,0,0,.45);
line-height: 22px;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
display: -webkit-box;
}
&-footer{
width: 100%;
height: 20px;
display: flex;
justify-content: space-between;
overflow: hidden;
}
}
}
}
}
}