//引入全局配置
@import "c/conf";
@import "c/mx";
@import "c/f";
@import "a/c";

page {
  background-color: $bgc1;
  padding-top: 90rpx;
}

.g-pg {
  padding-top: 50rpx;
}

.u-bottom-placeholder {
  height: 120rpx;
}

.m-menus {
  position: fixed;
  z-index: 100;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 25rpx 0;
  justify-content: space-around;
  box-shadow: 0rpx 4rpx 9rpx 0rpx rgba(63, 63, 63, 0.06);
  background-color: rgba(#fff, 0.95);

  .link {
    position: relative;
    width: 120rpx;
    > image {
      display: block;
      width: 60rpx;
      height: 60rpx;
      margin: 0 auto;
    }
    .dot {
      position: absolute;
      top: 0;
      right: 25rpx;
      box-sizing: border-box;
      padding: 0 2rpx;
      min-width: 30rpx;
      height: 30rpx;
      line-height: 30rpx;
      background: #e3271c;
      border-radius: 50%;
      font-size: 24rpx;
      font-family: Source Han Serif SC;
      font-weight: bold;
      color: #ffffff;
      text-align: center;
    }
    .name {
      text-align: center;
      line-height: 30rpx;
      font-size: 24rpx;
      font-family: Source Han Serif SC;
      font-weight: 400;
      color: #333333;
    }
  }
}

.m-tophint {
  position: fixed;
  display: block;
  z-index: 10;
  top: 150rpx;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 353rpx;
  height: 50rpx;
  background: #ffffff;
  border: 1rpx solid rgba(#000, 0.07);
  border-radius: 25rpx;
  line-height: 50rpx;
  font-size: 26rpx;
  font-family: Source Han Serif SC;
  font-weight: 500;
  color: #e60000;
  text-align: center;
}

.m-hint {
  text-align: center;
  padding: 100rpx 50rpx;
  line-height: 50rpx;
  color: $fc3;
  text-align: center;
  font-size: 34rpx;
  font-family: Source Han Serif SC;
  font-weight: 500;
}

.m-info {
  @include cs;
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  height: 90rpx;
  padding: 20rpx;
  line-height: 50rpx;
  background-color: #ffffff;

  .title {
    float: left;
    font-size: 34rpx;
    font-family: Source Han Serif SC;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    text {
      font-size: 28rpx;
      color: $fc4;
    }
  }

  .link {
    float: right;
    position: relative;
    width: 100rpx;
    height: 70rpx;
    image {
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: 20rpx 0 0 30rpx;
      width: 42rpx;
      height: 10rpx;
      opacity: 1;
      pointer-events: none;
    }
  }

  .menus {
    position: relative;
    float: right;
    width: 120rpx;

    .menu-show {
      width: 120rpx;
      text-align: center;
      text {
        font-size: 26rpx;
        font-family: Source Han Serif SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
      }
      image {
        position: relative;
        margin-left: 10rpx;
        top: -5rpx;
        width: 22rpx;
        height: 12rpx;
      }
    }
    .menu-show2 {
      position: relative;
      height: 50rpx;

      image {
        position: absolute;
        display: block;
        top: 0;
        right: 10rpx;
        bottom: 0;
        margin: auto;
        width: 42rpx;
        height: 10rpx;
        opacity: 1;
        pointer-events: none;
      }
    }
    .menu-list {
      @include bs3;
      position: absolute;
      z-index: 15;
      top: 70rpx;
      left: 0;
      width: 130rpx;
      background-color: #ffffff;
      border-radius: 10rpx;
      > view {
        text-align: center;
        line-height: 70rpx;
        font-size: 26rpx;
        font-family: Source Han Serif SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
      }
    }
  }
}

.m-go {
  position: fixed;
  z-index: 100;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100rpx;
  box-sizing: border-box;
  padding: 0 14rpx;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: rgba(#ffffff, 0.9);
  backdrop-filter: blur(10rpx);

  .btn {
    margin: 15rpx 10rpx;
    width: 226rpx;
    height: 70rpx;
    line-height: 70rpx;
    border-radius: 70rpx;
    color: #ffffff;
    text-align: center;
    font-size: 32rpx;
    font-family: Source Han Serif SC;
    font-weight: 500;
    background: linear-gradient(90deg, #e3271c, #f95c2c);
    &.z-1 {
      background: linear-gradient(90deg, #faaa05, #febb21);
    }
    &.z-2 {
      background: linear-gradient(90deg, #2f93ee, #03c7ef);
    }
  }
}

.m-fx {
  @include bs1;
  position: fixed;
  z-index: 100;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100rpx;
  background-color: #ffffff;
  .btn {
    float: left;
    width: 50%;
    text-align: center;
    line-height: 100rpx;
    background-color: rgba(230, 0, 0, 1);
    color: #ffffff;
    text-align: center;
    font-size: 32rpx;
    font-family: Source Han Serif SC;
    font-weight: 500;
    &.btn-off {
      background-color: #ffffff;
      color: $fc2;
    }
  }
}

.m-list {
  margin-top: 20rpx;
  padding-bottom: 1rpx;

  .list {
    .item_bottom {
      overflow: hidden;
      height: 0;
      opacity: 0;
    }
    .item_hint {
      box-sizing: border-box;
      margin: 40rpx auto;
      padding: 15rpx 10rpx;
      width: 580rpx;
      line-height: 40rpx;
      border-radius: 10rpx;
      background-color: rgba(#000000, 0.03);
      color: $fc3;
      font-size: 12px;
      font-family: Source Han Serif SC;
      font-weight: 500;
      text-align: center;

      &.z-tall {
        margin-top: 100rpx;
      }

      navigator {
        color: $c2;
      }

      > text {
        display: inline-block;
        text-align: left;
      }

      .z-stress {
        color: rgba($c3, 0.6);
      }
    }

    .item {
      position: relative;
      margin-bottom: 40rpx;

      .item-select {
        position: absolute;
        top: 20rpx;
        height: 20rpx;
        width: 50rpx;
        height: 50rpx;
        &::after,
        image {
          position: absolute;
          display: block;
          box-sizing: border-box;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          width: 30rpx;
          height: 30rpx;
          display: block;
          border-radius: 100%;
        }
        &::after {
          content: "";
          z-index: 1;
          border: 1px solid #aaa;
        }
        image {
          z-index: 2;
          opacity: 0;
          transform: scale(0);
          transition: all $ad1 ease-in-out;
        }
        &.z-on {
          &::after {
            opacity: 0;
          }
          image {
            opacity: 1;
            transform: scale(1);
          }
        }
      }
      .item-bd {
        transition: transform $ad1 ease-in-out;
        &.z-ing {
          transform: translateX(50rpx);
        }
        .user {
          padding: 20rpx 0;
          overflow: hidden;

          .user-avatar {
            float: left;
            margin: 0 20rpx;
            display: block;
            width: 54rpx;
            height: 54rpx;
            border-radius: 100%;
            &[src=""],
            &:not([src]) {
              background-color: #e5e7e9;
            }
          }
          .user-info {
            float: left;
            width: 400rpx;
            height: 54rpx;
            .user-name {
              @include toe;
              margin-bottom: 10rpx;
              line-height: 26rpx;
              font-size: 26rpx;
              font-family: Source Han Serif SC;
              font-weight: 500;
              color: rgba(102, 102, 102, 1);

              image {
                display: inline-block;
                vertical-align: bottom;
                margin-left: 10rpx;
                width: 26rpx;
                height: 26rpx;

                &[src=""],
                &:not([src]) {
                  background-color: #e5e7e9;
                }
              }
            }
            .user-date {
              line-height: 20rpx;
              font-size: 20rpx;
              font-family: Source Han Serif SC;
              font-weight: 500;
              color: rgba(153, 153, 153, 1);
            }
          }
          &.z-me {
            .user-avatar,
            .user-info {
              float: right;
              text-align: right;
            }
          }
        }
        .cnt {
          position: relative;
          margin: 0 auto;
          width: 580rpx;
          background-color: #ffffff;
          border-radius: 10rpx;
          overflow: hidden;

          .operate {
            position: absolute;
            z-index: 10;
            width: 120rpx;
            right: 0;
            top: 0;
            line-height: 60rpx;
            font-size: 26rpx;
            font-family: Source Han Serif SC;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
            text-align: center;
            // background-color: rgba(#ffffff, 0.6);

            &.z-focused {
              @include bs3;
              background-color: #ffffff;
              transition: all $ad1 ease-in-out;
              .btn-list {
                display: block;
              }
            }

            .btn-more {
              position: relative;
              height: 60rpx;
              image {
                position: absolute;
                display: block;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                width: 42rpx;
                height: 10rpx;
                opacity: 0.7;
                pointer-events: none;
              }
            }
            .btn-list {
              display: none;
              .btn {
              }
            }
          }

          .pic {
            display: block;
            width: 100%;
            height: 310rpx;
          }

          .row {
            display: flex;
            align-items: center;
          }

          .tag2 {
            margin: 0 10rpx;
            font-size: 20rpx;
            font-family: Source Han Serif SC;
            font-weight: 500;
            color: #e60000;
            line-height: 48rpx;
          }

          .tag {
            margin: 20rpx;
            width: 76rpx;
            height: 34rpx;
            line-height: 34rpx;
            background: rgba(248, 209, 209, 1);
            border-radius: 4rpx;
            text-align: center;
            font-size: 20rpx;
            font-family: Source Han Serif SC;
            font-weight: 500;
            color: rgba(229, 63, 60, 1);

            &.z-2 {
              background: #f9f0d4;
              color: #ffc100;
            }
            &.z-1 {
              background: #e3ecf8;
              color: #0c4a9c;
            }
          }

          .title {
            position: relative;
            padding: 0 20rpx;
            max-height: 90rpx;

            > view {
              @include toeM(2);
              font-size: 34rpx;
              font-family: Source Han Serif SC;
              font-weight: 500;
              color: rgba(51, 51, 51, 1);
              line-height: 45rpx;
            }
            &.z-closed,
            &.z-cancel,
            &.z-overdue {
              &::after {
                content: "已关闭";
                position: absolute;
                z-index: 2;
                top: 0;
                bottom: 0;
                right: 110rpx;
                margin: auto;
                display: block;
                border: 1px solid #ddd;
                color: $fc3;
                transform: rotate(-45deg);
                width: 150rpx;
                height: 70rpx;
                border-radius: 70rpx;
                line-height: 70rpx;
                text-align: center;
                font-size: 30rpx;
                font-family: Source Han Serif SC;
                font-weight: 500;
                background-color: rgba(#ffffff, 0.6);
              }
            }
            &.z-overdue {
              &::after {
                content: "已过期";
              }
            }

            &.z-cancel {
              &::after {
                content: "已取消";
              }
            }
          }
          .else {
            margin-top: 20rpx;
            border-top: 1px solid rgba(231, 238, 238, 1);
            padding: 20rpx;
            line-height: 50rpx;
            overflow: hidden;

            .link {
              display: block;
              float: right;
              font-size: 26rpx;
              font-family: Source Han Serif SC;
              font-weight: 500;
              color: rgba(12, 74, 156, 1);
            }
          }
        }

        .read {
          position: relative;
          margin: 10rpx auto;
          width: 580rpx;
          font-size: 26rpx;
          color: #0c4a9c;
          line-height: 48rpx;

          .z-weak {
            color: #999999;
          }
          .z-me {
            text-align: right;
          }
        }
      }
    }
  }
}

.m-more {
  height: 90rpx;
  line-height: 90rpx;
  color: $fc3;
  font-size: 28rpx;
  text-align: center;

  &.z-tall {
    margin-bottom: 120rpx;
  }
}

.m-fm {
  @include shield;

  .fm {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 540rpx;
    height: 600rpx;
    box-sizing: border-box;
    padding: 20rpx;
    background-color: #ffffff;
    border-radius: 10rpx;
    .title {
      margin-top: 10rpx;
      text-align: center;
      font-size: 34rpx;
      font-family: Source Han Serif SC;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      line-height: 60rpx;
    }
    .radio-group {
      width: 100%;
      .radio-item {
        color: #000000;
        transform: scale(0.7);
        font-size: 32rpx;
        margin-left: 50rpx;
      }
    }
    .hint {
      padding: 10rpx 20rpx;
      font-size: 26rpx;
      font-family: Source Han Serif SC;
      font-weight: 500;
      color: $fc1;
      line-height: 42rpx;
      text {
        color: #ff1111;
      }
    }
    .input {
      display: block;
      box-sizing: border-box;
      padding: 10rpx;
      width: 480rpx;
      height: 260rpx;
      margin: 20rpx auto;
      background-color: #f4f4f4;
      border-radius: 10rpx;

      textarea {
        box-sizing: border-box;
        display: block;
        margin: 0 auto auto;
        padding: 5rpx 0;
        width: 100%;
        height: 240rpx;
        line-height: 45rpx;
        border-radius: 20rpx;
        font-size: 26rpx;
        font-family: Source Han Serif SC;
        font-weight: 500;
        color: rgba(153, 153, 153, 1);
        line-height: 42rpx;
        .z-placeholder {
          @include wwb;
        }
      }
    }
    .operate {
      margin-top: 30rpx;
      padding: 0 15rpx;
      overflow: hidden;
      .btn {
        float: right;
        box-sizing: border-box;
        border: 1px solid rgba(230, 0, 0, 1);
        color: #ffffff;
        background-color: rgba(230, 0, 0, 1);
        text-align: center;
        width: 210rpx;
        height: 75rpx;
        line-height: 75rpx;
        border-radius: 75rpx;
        font-size: 34rpx;
        font-family: Source Han Serif SC;
        font-weight: 500;
        &.btn-off {
          float: left;
          border-color: #ddd;
          background-color: #ffffff;
          color: $fc4;
        }
      }
    }
  }
}