wxsapp/SuperBrain/pages/task/task.wxss

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

scroll-view {
  height: 100%;
}

/* first-view */
.first-view, .second-view, .third-view {
  width: 100%;
  background-color: white;
  display: flex;
}

.first-view {
  height: 192rpx;
}

.first-view>image {
  width: 96rpx;
  height: 122rpx;
  margin: auto 24rpx auto 28rpx;
}

.first-view>view:nth-child(2) {
  height: 192rpx;
  display: flex;
  flex-direction: column;
}

.first-view>view:nth-child(2)>text:first-child {
  font-size: 34rpx;
  color: #333333;
  font-weight: bold;
  margin-top: auto;
  margin-bottom: 8rpx;
}

.first-view>view:nth-child(2)>text:last-child {
  font-size: 26rpx;
  color: #999999;
  margin-bottom: auto;
}

.first-view>view:nth-child(3) {
  width: 152rpx;
  height: 64rpx;
  margin: auto 30rpx auto auto;
  font-size: 28rpx;
  color: white;
  font-weight: bold;
  line-height: 64rpx;
  text-align: center;
  border-radius: 4rpx;
  background-image: linear-gradient(270deg, #625AF7 0%, #DD7FFF 100%);
}

.first-view+view, 
.first-view+view+view,
.second-view>view:nth-child(2),
.third-view>view:nth-child(2),
.task-item+view {
  width: 100%;
  height: 0.7px;
  background-color: #E5E5E5;
}

.first-view+view+view {
  margin-top: 26rpx;
}

/* second-view */
.second-view {
  flex-direction: column;
}

.second-view>view:first-child, .third-view>view:first-child {
  width: 100%;
  height: 100rpx;
  display: flex;
}

.second-view>view:first-child>view, .third-view>view:first-child>view {
  width: 6rpx;
  height: 24rpx;
  background-color: #8C5AEB;
  margin: auto 16rpx auto 30rpx;
}

.second-view>view:first-child>text, .third-view>view:first-child>text {
  font-size: 28rpx;
  color: #999999;
  line-height: 100rpx;
}


.second-view+view {
  width: 100%;
  height: 0.7px;
  background-color: #E5E5E5;
  margin-top: 26rpx;
}

/* third-view */
.third-view {
  flex-direction: column;
}

/* task-item */
.task-item {
  width: 100%;
  height: 208rpx;
  display: flex;
}

.task-item>view:nth-child(1) {
  display: flex;
  flex-direction: column;
  height: 208rpx;
}

.task-item>view:nth-child(1)>text:nth-child(1) {
  font-size: 34rpx;
  color: #333333;
  font-weight: bold;
  margin: 30rpx 0 2rpx 28rpx;
}

.task-item>view:nth-child(1)>text:nth-child(2) {
  font-size: 26rpx;
  color: #999999;
  margin-left: 28rpx;
}

.task-item>view:nth-child(1)>view {
  height: 36rpx;
  display: flex;
  margin: 26rpx 0 0 28rpx;
}

.task-item>view:nth-child(1)>view>image {
  width: 34rpx;
  height: 36rpx; 
}

.task-item>view:nth-child(1)>view>text {
  font-size: 26rpx;
  color: #FC874F;
  line-height: 36rpx;
}

.task-item>view:nth-child(1)>view>text:nth-child(2) {
  color: #999999;
  margin-left: 24rpx;
  margin-right: 10rpx;
}

/* task-item-right-1 */
.task-item-right-1 {
  height: 208rpx;
  margin-left: auto;
  display: flex;
  flex-direction: column;
}

.task-item-right-1>text {
  font-size: 26rpx;
  color: #666666;
  text-align: center;
  width: 144rpx;
  margin: auto 30rpx 12rpx 0;
}

.task-item-right-1>view {
  width: 144rpx;
  height: 20rpx;
  margin: 0 30rpx auto 0;
  background-color: #F3F3F3;
  border-radius: 10rpx;
  overflow: hidden;
}

.task-item-right-1>view>view {
  height: 20rpx;
  background-color: #BA95FF;
}

/* task-item-right-2 */
.task-item-right-2,
.task-item-right-4,
.task-item-right-5 {
  width: 152rpx;
  height: 64rpx;
  background-color: white;
  border: 0.7px solid #8C5AEB;
  border-radius: 4rpx;
  color: #8C5AEB;
  font-size: 28rpx;
  line-height: 64rpx;
  text-align: center;
  margin: auto 28rpx auto auto;
  /* position: static; */
}

button {
  width: 152rpx;
  height: 64rpx;
  margin-top: -64rpx;
}

.task-item-right-3 {
  width: 152rpx;
  height: 64rpx;
  border-radius: 4rpx;
  color: white;
  font-size: 28rpx;
  line-height: 64rpx;
  text-align: center;
  background-image: linear-gradient(270deg, #625AF7 0%, #DD7FFF 100%);
  margin: auto 28rpx auto auto;
}

.task-item-right-4 {
  color: #666666;
  border-color: #979797;
}


.get-cell-bg, 
.get-cell-bg+view,
.get-cell-bg+view+view {
  position: absolute;
  top: 0;   
  width: 100%;
  height: 100%; 
  display: flex;
  flex-direction: column;
}

.get-cell-bg>image {
  display: block;
  width: 710rpx;
  height: 662rpx; 
  margin: auto auto;
}

.get-cell-bg+view>image {
  display: block;
  width: 580rpx;
  height: 240rpx;
  margin: auto 0 auto 65rpx;
}

.get-cell-bg+view+view>view {
  display: flex;
  flex-direction: row;
  width: 100%;
  margin: auto auto;
  padding-top: 60rpx;
}

.get-cell-bg+view+view>view>view:first-child {
  margin-left: auto;
  font-size: 108rpx;
  font-weight: bold;
  background: linear-gradient(to right, #FFB259, #FC5F62);
  -webkit-background-clip: text;
  color: transparent;
}

.get-cell-bg+view+view>view>view:last-child {
  margin-top: 48rpx;
  margin-right: auto;
  font-size: 60rpx;
  color: #FC5F62;
}

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