ssj_book/president/pages/random_books/random_books.wxss

/* president//pages/random_books/random_books.wxss */
.book{
  margin: 20rpx;
  padding: 0;
  color: #333333;
  font-size: 34rpx;
}
.book-all{
  margin: 20rpx 0 40rpx 0;
  text-align: left;
}
.book-num{
  padding: 0
}
.book-num-items{
  width:47%;
  display: inline-block;
  padding: auto 0;
  height:98rpx;
  background:rgba(255,255,255,1);
  border-radius:18rpx;
  line-height: 98rpx;
  text-align: center;
  color: #00B7FF;
  font-size: 30rpx;
  margin-bottom: 30rpx;
  border: 2rpx solid transparent;
}
.book-num-items-input{
  color: #00B7FF;
  font-size: 30rpx;
  text-align: center;
  margin:  auto;
  display: inline-block;
  width: 180rpx;
  height: 45rpx;
  position: relative;
  top: 10rpx;
}
.scope-input{
  /* width:100%; */
  height:88rpx;
  background:rgba(255,255,255,1);
  border-radius:18rpx;
  padding:0 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center
}
.scope-input-triangle{
    width:0;
    height:0;
    overflow:hidden;
    font-size: 0; 
    line-height: 0; 
    border-width:10rpx;
    border-style:solid dashed dashed dashed;
    border-color:#999999 transparent transparent transparent;
    display: inline-block;
}
.book-btn{
  width: 100%;
  height:88rpx;
  background:linear-gradient(90deg,rgba(81,206,255,1) 0%,rgba(0,183,255,1) 100%);
  opacity:0.9;
  line-height: 88rpx;
  color: #FFFFFF;
  font-size: 30rpx;
  text-align: center;
  position: fixed;
  bottom: 0;
}
.screen{
  width:57.3%;
  height:100vh;
  background:rgba(255,255,255,1);
  position: fixed;
  top: 0;
  right: 0;
  padding-bottom: 100rpx;
}
.screen-items{
  border-bottom: 2rpx solid #E6E6E6;
  padding: 30rpx;
}
.screen-items-head{
  color: #333333;
  font-size: 28rpx;
  text-align: left;
  margin-bottom: 30rpx;
}
.screen-items-all{
  width: 50%;
  text-align: center;
  display: inline-block;
  margin-bottom: 40rpx;
  position: relative;
}
.screen-items-all-img{
  width: 38rpx;
  height: 38rpx;
  position: absolute;
  bottom: 0;
  right: 0;
}
.screen-active{
  border:2rpx solid rgba(0,183,255,1) !important;
  background:rgba(235,246,250,1) !important;
  color: #00B7FF !important;
}
.screen-items-content{
  padding: 20rpx 28rpx;
  background:rgba(240,242,242,1);
  border-radius:10rpx;
  display: inline-block;
  background: #F0F2F2;
  color: #4D4D4D;
  font-size: 28rpx;
  overflow: hidden;
  position: relative;
  border:2rpx solid transparent;
}
.screen-btn{
  /* width: 336rpx;
  height:68rpx; */
  border-radius:100rpx;
  color: #fff;
  font-size: 28rpx;
  line-height: 68rpx;
  position: fixed;
  bottom: 30rpx;
  right: 47rpx;
  display: flex;
  margin: auto;
}
.screen-btn-rest{
  background: #51CEFF;
  padding: 14rpx 52rpx;
  border-radius:100rpx 0px 0px 100rpx;
}
.screen-btn-sure{
  background: #00B7FF;
  padding: 14rpx 52rpx;
  border-radius:0px 100rpx 100rpx 0px;
}
.sub{
  width:528rpx;
  height:314rpx;
  background:rgba(255,255,255,1);
  border-radius:30rpx;
  color: #666666;
  font-size: 34rpx;
  margin: auto;
  padding: 50rpx 30rpx;
  position: fixed;
  top: 300rpx;
}
.sub-btn{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 32rpx;
  margin-top: 140rpx;
}
.sub-btn-left{
  width:224rpx;
  height:68rpx;
  background:rgba(255,255,255,1);
  border-radius:44rpx;
  border:2rpx solid rgba(0,183,255,1);
  color: #00B7FF;
  line-height: 68rpx;
  text-align: center;
}
.sub-btn-right{
  width:224rpx;
  height:68rpx;
  background:linear-gradient(90deg,rgba(81,206,255,1) 0%,rgba(0,183,255,1) 100%);
  border-radius:44rpx;
  color: #fff;
  line-height: 68rpx;
  text-align: center;
}
.num-active{
  background:linear-gradient(90deg,rgba(81,206,255,1) 0%,rgba(0,183,255,1) 100%);
  color: #fff;
}
.input-active{
  border: 2rpx solid #00B7FF;
}
.scope-input-word{
  color: #333333;
  font-size: 30rpx;
  width: 80%
}
.scope-input-down{
  width: 15%;
  height: 80rpx;
  text-align: right;
  line-height: 80rpx;
}