bingxue-wechat/pages/contest/answer/answer.wxss

/* pages/contest/answer/answer.wxss */
page {
  background: #fff;
}
.home {
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  top: 70rpx;
  left: 50rpx;
  z-index: 99;
}
.page-title {
  position: relative;
  z-index: 1;
  width: 100%;
  font-size: 32rpx;
  font-weight: 400;
  color: #FFFFFF;
  padding-top: 68rpx;
  text-align: center;
}
.bg {
  width: 100%;
  position: absolute;
  z-index: 0;
  background: transparent;
}
.top{
  position: relative;
  z-index: 9;
  padding-top: 44rpx;
  width: 100%;
}
.top-title {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 400;
  color: #FFFFFF;
  font-size: 32rpx;
}
.top-title .time {
  height: 66rpx;
  background: rgba(60, 70, 209,.5);
  padding: 0 10rpx;
  border-radius: 10rpx;
  margin: 10rpx;
  font-weight: 500;
  color: #FFFFFF;
  font-size: 48rpx;
}
.top-nav {
  margin-top: 15rpx;
  display: flex;
  font-weight: 400;
  justify-content: center;
  color: rgba(255, 255, 255,.7);
  align-items: center;
  font-size: 24rpx;
}
.top-nav > view {
  margin: 0 10rpx;
}
.top-nav .active {
  font-size: 24rpx;
  font-weight: 500;
  color: #59598D;
  background-color: #fff;
  border-radius: 100rpx;
  height: 52rpx;
  width: 138rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content {
  position: relative;
  z-index: 9;
  width: 100%;
}
.content-title {
  margin-top: 70rpx;
  width: 100%;
  font-size: 40rpx;
  font-weight: 500;
  color: #59598D;
  text-align: center;
}
.problem {
  display: flex;
  align-items: center;
  margin-top: 42rpx;
}
.problem-num {
  position: relative;
  width: 40rpx;
  margin: 0 24rpx 0 48rpx;
}
.problem-icon {
  width: 40rpx;
  position: absolute;
  z-index: 1;
}
.problem-index {
  width: 40rpx;
  font-size: 28rpx;
  font-weight: 600;
  color: #FFFFFF;
  position: relative;
  z-index: 9;
  line-height: 42rpx;
  text-align: center;
}
.problem-text {
  width: 590rpx;
  font-size: 28rpx;
  font-weight: 500;
  color: #59598D;
}
.problem-key-list {
  margin-top: 24rpx;
}
.problem-key-list > view{
  width: 516rpx;
  min-height: 68rpx; 
  background: #FFFFFF;
  border-radius: 34rpx;
  margin: 0 146rpx 20rpx 88rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #353333;
  line-height: 34rpx;
  padding: 17rpx 38rpx;
}
.active-R {
  color: #FD8011!important;
}
.problem-key-list .border {
  border: 2rpx solid #EFEFFF;
}
.problem-key-list .active {
  background: #5679F0;
  color: rgb(241, 241, 241);
  opacity: 1;
}
.bd-b {
  width: 640rpx;
  height: 2rpx;
  background: #59598D;
  opacity: 0.12;
  margin: 6rpx 52rpx 0 58rpx;
}
.arrow-group {
  display: flex;
  justify-content: center;
  padding-bottom: 34rpx;
  margin-top: 30rpx;
}
.arrow-group > image {
  width: 160rpx;
  margin: 0 18rpx;
}
.next-one {
  width: 600rpx;
  height: 100rpx;
  margin: 30rpx auto;
  background-image: linear-gradient(to right, #57A8EF, #6247FF);
  border-radius: 100rpx;
  text-align: center;
  line-height: 100rpx;
  font-size: 28rpx;
  font-weight: 600;
  color: #FFFFFF;
}
.button-group-R {
  display: flex;
  justify-content: center;
  padding: 48rpx 0 28rpx 0;
  align-items: center;
}
.back{
  width: 284rpx;
  height: 96rpx;
  border-radius: 50rpx;
  border: 2rpx solid #C7CCF9;
  text-align: center;
  line-height: 96rpx;
  font-size: 28rpx;
  font-weight: 500;
  color: #59598D;
  margin: 0 10rpx;
}
.next {
  width: 284rpx;
  height: 96rpx;
  background-image: linear-gradient(to right, #57A8EF, #6247FF);
  border-radius: 96rpx;
  text-align: center;
  line-height: 96rpx;
  font-size: 28rpx;
  font-weight: 600;
  color: #FFFFFF;
}
.confirm {
  position: fixed;
  width: 100%;
  z-index: 998;
  display: flex;
  justify-content: center;
  top: 35%;
  background: transparent;
  transform: translateY(-30%);
}
.mask {
  position: fixed;
  top: 0;
  height: 100vh;
  width: 750rpx;
  background: rgba(31, 33, 56,.8);
  z-index: 998;
}
.confirm-bg {
  width: 620rpx;
  position: absolute;
  z-index: 999;
}
.confirm-content {
  width: 620rpx;
  height: 650rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1000;
}
.warning-icon {
  width: 100rpx;
  padding-top: 108rpx;
  position: relative;
  z-index: 999;
}
.confim-title {
  margin-top: 46rpx;
  font-weight: 500;
  color: #161616;
  line-height: 50rpx;
  font-size: 36rpx;
}
.button-group {
  display: flex;
  justify-content: center;
}
.button-group > view {
  margin: 0 10rpx;
  width: 240rpx;
  height: 96rpx;
  border-radius: 50rpx;
  border: 2rpx solid #C7CCF9;
  font-weight: 600;
  color: #59598D;
  line-height: 96rpx;
  font-size: 32rpx;
  margin-top: 60rpx;
  text-align: center;
}
.button-group .confim-button {
  width: 380rpx!important;
}
.close-icon {
  top: 258rpx;
  width: 100rpx;
  position: relative;
  z-index: 1000;
}


.pattern {
  background: #E0E0EF;
  opacity: 0.21;
}