TSYWXT-WX-APP/pages/movies/movies.wxss

@import "movie-list/movie-list-template.wxss";
@import "movie-grid/movie-grid-template.wxss";

.masonry {
  background-color: #f2f2f2;
  display: flex;
  flex-direction: column;
}



.column {
  display: flex;
  flex-flow: column wrap;
  width: 50%;
  background-color: beige;
}

.item {
  height: 200rpx;
  width:100%;
  border-bottom:1px solid #F2F2F2;
  margin-bottom: 10rpx;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.item .ImageBox{
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.ImageBox image{
  width: 60rpx;
  height:60rpx;
  margin: 4rpx;
}

.item .content{
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    width: 100%;
    height: 220rpx;
    font-size: 40rpx;
    color: #0D0630;

}

.item content::before{
      position: absolute;
      top: 0;
      left: 0;
      font-size: 13rpx;
      width: 2em;
      height: 2em;
      line-height: 2em;
      text-align: center;
      font-weight: bold;
      background-color:#18314F;
      content: counter(item-counter);
}

.item content::after{
      content: 'ಠ‿ಠ';
}

.item content small{
   height: 100rpx;
}

.item content small::before{
  background: #d1d1d1;
}

.item content small::after{
    content: '♥◡♥';
}

.item content medium{
  height: 175rpx;
}

.item content medium::before{
  background: #d1d1d1;
}

.item content medium::after{
 content: '◔ᴗ◔';
}

.item content large{
      height: 280rpx;
}

.item content large::before{
  background: #0D0630;
}

.item content large::after{
      content: 'ಠ_๏';
}

.search {
  background-color: #f2f2f2;
  height: 80rpx;
  width: 100%;
  display: flex;
  flex-direction: row;
}

.search-img {
  margin: auto 0 auto 20rpx;
}

.search input {
  height: 100%;
  width: 600rpx;
  margin-left: 20px;
  font-size: 28rpx;
}

.placeholder {
  font-size: 14px;
  color: #d1d1d1;
  margin-left: 20rpx;
}

.movies-template {
  margin-bottom: 30rpx;
}

.search-panel{
    position:absolute;
    top:80rpx;
}

.xx-img{
    height: 30rpx;
    width: 30rpx;
    margin:auto 0 auto 10rpx;
}