/* pages/fragmentsList/fragmentsList.wxss */
@import "../../modal/dialogBrainLack.wxss";
@import "../../modal/dialogNoRank.wxss";

Page {
  height: 100%;
  width: 100%;
  background-color: #f9f9fb;
}

.head {
  margin-left: 30rpx;
  margin-top: 20rpx;
  width: 690rpx;
  height: 280rpx;
  border-radius: 16rpx;
}

.head-button {
  width: 200rpx;
  height: 100rpx;
  margin-top: -300rpx;
  margin-left: 490rpx;
}

.scroll-view-bg {
  position: absolute;
  top: 320rpx;
  bottom: 190rpx;
  left: 0px;
  width: 100%;
  display: flex;
  flex-direction: row;
}

scroll-view {
  width: 690rpx;
  height: 100%;
  margin-left: 30rpx;
}

::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  color: transparent;
} 

/* .scroll-view-head {
  width: 100%;
  height: 4rpx;
} */

.fragment-interval {
  width: 100%;
  height: 20rpx;
}

.fragment-bg {
  width: 100%;
  height: 168rpx;
  background: linear-gradient(to right, #5977f5, #715bea);
  border-radius: 16rpx;
  display: flex;
  flex-direction: row;
}

.fragment-shade {
  margin-top: -168rpx; 
  width: 100%;
  height: 168rpx;
  border-radius: 16rpx;
  background-color: white;
  opacity: 0.3;
}

.fragment-icon {
  width: 104rpx;
  height: 104rpx; 
  border-radius: 60rpx;
  border-width: 8rpx;
  border-color: white;
  border-style: solid;
  font-size: 40rpx;
  font-weight: bold;
  color: white;
  line-height: 104rpx; 
  text-align: center;
  margin: auto 0px auto 24rpx;
}

.fragment-content {
  position: absolute;
  height: 168rpx;
  left: 168rpx;
  right: 0px;
  display: flex;
  flex-direction: column;
}

.fragment-content-top {
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-top: auto;
}

.fragment-content-name {
  font-size: 36rpx;
  color: white;
}

.fragment-content-icon {
  width: 32rpx;
  height: 32rpx;
  margin: auto 10rpx auto auto;
}

.fragment-content-consume {
  font-size: 32rpx;
  color: white;
  margin: auto 34rpx auto 0px;
}

.fragment-content-bottom {
  width: 100%;
  height: 40rpx;
  display: flex;
  flex-direction: row;
  margin-top: 10rpx;
  margin-bottom: auto;
}

.fragment-content-star-bg, .fragment-content-star {
  width: 40rpx;
  height: 40rpx;
  margin-right: 12rpx;
  display: block;
}

.fragment-content-fragment-top {
  height: 40rpx;
  font-size: 36rpx;
  line-height: 40rpx; 
  color: white;
}

.ranking-view {
  background-color: white;
  width: 100%;
  height: 86rpx;
  position: absolute;
  bottom: 104rpx;
  line-height: 86rpx;
  font-size: 26rpx;
  color: #808080;
  text-align: center;
}

.bottom-button {
  width: 100%;
  height: 104rpx;
  background-color: #8c5aeb;
  position: absolute;
  bottom: 0px;
  display: flex;
  flex-direction: row;
}

.bottom-button-title {
  margin: auto 0px auto auto;
  font-size: 32rpx;
  color: white;
}

.bottom-button-icon {
  width: 32rpx;
  height: 32rpx;
  margin: auto auto auto 10rpx;
}