body{ background-color: #FFF; } .ellipsis{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hide{display: none;} .main{ width: 10rem; margin: 0 auto; position: relative; min-height: 100%; font-size: 0; background-color: #FFF; } .mList{ position: relative; width: 10rem; font-size: 0; margin: 0 auto; } .mDetail{ width: 10rem; height: 2.4rem; position: relative; font-size: 0; } .mImg{ position: absolute; left: 0; top: 0; width: 2.106rem; height: 2.4rem; overflow: hidden; } .mImg img{ width: 1.44rem; position: absolute; left: 50%; top: 50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); object-fit: cover; } .mInfo{ position: absolute; left: 2.106rem; top: 50%; transform: translate(0,-50%); -webkit-transform: translate(0,-50%); -moz-transform: translate(0,-50%); -ms-transform: translate(0,-50%); -o-transform: translate(0,-50%); font-size: 0; width: 5rem; } .mInfo p{ width: 100%; font-size: 0.32rem; color:#666; margin-top: 0.106rem; } .mInfo p:nth-child(1){ margin-top: 0; font-size: 0.4rem; color:#333; } .mNum{ position: absolute; right: 0.706rem; top: 0; height: 2.4rem; line-height: 2.4rem; font-size: 0.4rem; color:#333; width: 2rem; text-align: right; } .mBottom{ position: relative; padding: 0.133rem 0; width: 100%; text-align: center; font-size: 0.32rem; color: #4c4c4c; } .L_Ar.main{ direction: rtl; } .L_Ar .mImg{ left: auto; right: 0; } .L_Ar .mInfo{ left: auto; right: 2.106rem; } .L_Ar .mNum{ right: auto; left: .706rem; }