page {
  background: linear-gradient(180deg, #2e5fce 0%, #65b8ff 20%, #2e5fce 100%);
  width: 750rpx;
  overflow: hidden; }

.sphere1 {
  width: 1000rpx;
  height: 1000rpx;
  border-radius: 50%;
  background: #4d7eeb;
  position: absolute;
  z-index: -2;
  top: -500rpx;
  right: 51rpx; }

.sphere2 {
  width: 1000rpx;
  height: 1000rpx;
  border-radius: 50%;
  background: #08d8d1;
  position: absolute;
  z-index: -3;
  top: -500rpx;
  left: 350rpx; }

.backgroundTexture {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: -1; }

.todayCourse {
  width: 44rpx;
  height: 44rpx; }

.todaytitle {
  font-size: 40rpx;
  font-weight: 600;
  line-height: 56rpx;
  color: #ffffff;
  margin-left: 6rpx; }

.todaytips {
  font-size: 28rpx;
  font-weight: 400;
  line-height: 40rpx;
  color: #ffffff;
  opacity: 0.8; }

.topBar {
  width: 720rpx;
  height: 30rpx;
  background-color: #5e99fb;
  border-radius: 12rpx;
  margin: 40rpx auto; }

.topBarShadow {
  position: relative;
  top: 0;
  width: 686rpx;
  height: 50rpx;
  margin: -55rpx auto 55rpx;
  z-index: 99;
  background: linear-gradient(rgba(12, 62, 165, 0.6) 0%, rgba(12, 62, 165, 0.01) 100%); }

.courseBox {
  width: 686rpx;
  overflow: auto;
  margin: -104rpx 32rpx 0;
  border-radius: 0 0 24rpx 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(12, 62, 165, 0.3); }
  .courseBox .courseInfoBox .scheduleinfo {
    margin: 10rpx 0 20rpx; }
    .courseBox .courseInfoBox .scheduleinfo .scheduleTime {
      font-size: 28rpx;
      font-weight: 500;
      line-height: 40rpx;
      color: #282b2f; }
    .courseBox .courseInfoBox .scheduleinfo .scheduleRemind {
      width: 108rpx;
      height: 40rpx;
      background: #eaf5ff;
      border-radius: 20rpx;
      font-size: 20rpx;
      font-weight: 400;
      line-height: 40rpx;
      color: #5e99fb;
      text-align: center;
      margin-left: 12rpx; }
  .courseBox .courseInfoBox .scheduleinfoBox {
    width: 300rpx;
    height: 130rpx;
    box-shadow: 0 4rpx 20rpx rgba(8, 216, 209, 0.4);
    opacity: 1;
    border-radius: 14rpx; }
    .courseBox .courseInfoBox .scheduleinfoBox .timelineIcon {
      position: relative;
      width: 90rpx;
      height: 90rpx;
      top: -90rpx;
      right: -210rpx; }

.BGicon {
  width: 60rpx;
  height: 60rpx; }

.BGiconText {
  font-size: 28rpx;
  font-weight: 400;
  line-height: 40rpx;
  color: #ffffff; }

.courseTitle {
  font-size: 32rpx;
  font-weight: 500;
  line-height: 45rpx;
  color: #ffffff; }

.noSelected {
  font-weight: 400;
  opacity: 0.6; }

.haveCoupleBox {
  width: 480rpx;
  overflow: auto;
  margin: -104rpx 20rpx 0 0;
  border-radius: 24rpx;
  background: #ffffff;
  box-shadow: 0 4rpx 20rpx rgba(12, 62, 165, 0.3);
  flex-shrink: 0; }
  .haveCoupleBox .courseInfoBox .scheduleinfo {
    margin: 10rpx 0 20rpx; }
    .haveCoupleBox .courseInfoBox .scheduleinfo .scheduleTime {
      font-size: 28rpx;
      font-weight: 500;
      line-height: 40rpx;
      color: #282b2f; }
    .haveCoupleBox .courseInfoBox .scheduleinfo .scheduleRemind {
      width: 108rpx;
      height: 40rpx;
      background: #eaf5ff;
      border-radius: 20rpx;
      font-size: 20rpx;
      font-weight: 400;
      line-height: 40rpx;
      color: #5e99fb;
      text-align: center;
      margin-left: 12rpx; }
  .haveCoupleBox .courseInfoBox .scheduleinfoBox {
    width: 300rpx;
    height: 130rpx;
    box-shadow: 0 4rpx 20rpx rgba(8, 216, 209, 0.4);
    opacity: 1;
    border-radius: 14rpx; }
    .haveCoupleBox .courseInfoBox .scheduleinfoBox .timelineIcon {
      position: relative;
      width: 90rpx;
      height: 90rpx;
      top: -90rpx;
      right: -210rpx; }

.messageBox {
  width: 686rpx;
  background: #ffffff;
  box-shadow: 0 4rpx 18rpx rgba(181, 186, 193, 0.2);
  border-radius: 24rpx;
  margin-top: 100rpx;
  position: relative; }
  .messageBox .messageData {
    margin: -100rpx 30rpx 30rpx; }
    .messageBox .messageData .data {
      font-size: 28rpx;
      font-weight: 500;
      line-height: 44rpx;
      color: #282b2f;
      word-break: break-all;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical; }
    .messageBox .messageData .messageText {
      font-size: 24rpx;
      font-weight: 400;
      line-height: 33rpx;
      color: #92979d; }
    .messageBox .messageData .messageButton {
      width: 68rpx;
      height: 68rpx;
      background: #5e99fb;
      box-shadow: 0 4rpx 20rpx rgba(94, 153, 251, 0.4);
      border-radius: 50%;
      overflow: hidden; }
  .messageBox .messageImg {
    position: relative;
    width: 220rpx;
    height: 150rpx;
    top: -100rpx;
    left: 30rpx; }

.heart {
  position: relative;
  width: 100rpx;
  height: 90rpx;
  opacity: 0.19; }
  .heart:before, .heart:after {
    position: absolute;
    content: "";
    left: 50rpx;
    top: 0;
    width: 50rpx;
    height: 80rpx;
    background: #ff8771;
    border-radius: 50rpx 50rpx 0 0;
    transform: rotate(-45deg);
    transform-origin: 0 100%; }
  .heart:after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%; }

.couplesInvite {
  width: 610rpx;
  height: 680rpx;
  background: #ffffff;
  opacity: 1;
  border-radius: 34rpx;
  overflow: initial;
  text-align: left; }
  .couplesInvite .messageImg {
    position: absolute;
    width: 220rpx;
    height: 150rpx;
    top: -80rpx;
    left: 30rpx; }
  .couplesInvite .loveImg {
    position: absolute;
    top: 30rpx;
    right: 30rpx;
    width: 266rpx;
    height: 225rpx; }
  .couplesInvite .couplesButton {
    width: 220rpx;
    height: 78rpx;
    border-radius: 39rpx;
    margin: 15rpx; }
  .couplesInvite .couplesText {
    font-size: 28rpx;
    font-weight: 500;
    line-height: 44rpx;
    color: #282b2f; }

.newMessage {
  text-align: left; }
  .newMessage .newMessageBox {
    width: 750rpx;
    height: 840rpx;
    background: #ffffff;
    border-radius: 40rpx 40rpx 0 0;
    overflow: hidden; }
  .newMessage .title {
    font-size: 32rpx;
    font-weight: 500;
    line-height: 45rpx;
    color: #282b2f; }
  .newMessage .MessageIcon {
    width: 70rpx;
    height: 70rpx;
    border-radius: 50%;
    overflow: hidden; }
  .newMessage .tips {
    font-size: 24rpx;
    font-weight: 400;
    line-height: 33rpx;
    color: #92979d; }
  .newMessage .messageContent {
    width: 686rpx;
    height: 280rpx;
    border: 1rpx solid #dfe4ea;
    border-radius: 24rpx;
    padding: 24rpx;
    margin: 40rpx auto; }
  .newMessage .sendTimeBox {
    width: 686rpx;
    height: 90rpx;
    background: #ffffff;
    border: 1rpx solid #dfe4ea;
    border-radius: 14rpx;
    margin: 24rpx 0; }
  .newMessage .cancel {
    width: 308rpx;
    height: 78rpx;
    background: #f6f6f9;
    border-radius: 39rpx;
    color: #282b2f; }
  .newMessage .confirm {
    width: 308rpx;
    height: 78rpx;
    background: #5e99fb;
    border-radius: 39rpx;
    color: #fff; }

.addMessage {
  width: 686rpx;
  height: 200rpx;
  border: 1rpx dashed #92979d;
  border-radius: 24rpx;
  margin: 40rpx auto; }

.ev-cuItem:last-child::after {
  height: 30rpx; }

.cu-timeline > .cu-item::before {
  background: none; }

.messageBox {
  margin: 40rpx auto; }
  .messageBox .title {
    width: 352rpx;
    font-size: 32rpx;
    font-weight: 500;
    line-height: 45rpx;
    color: #282b2f; }
  .messageBox .state {
    width: 72rpx;
    height: 33rpx;
    font-size: 24rpx;
    line-height: 33rpx; }
  .messageBox .editButton {
    width: 176rpx;
    height: 60rpx;
    background: #eaf5ff;
    border-radius: 24rpx;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 60rpx;
    color: #5e99fb;
    text-align: center; }

.animation-switch-in {
  animation-name: switch-in;
  animation-duration: 0.2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both; }

.animation-switch-out {
  animation-name: switch-out;
  animation-duration: 0.2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both; }

.loginButton {
  background-color: #fff; }
  .loginButton::after {
    border: 0; }

.loginnull {
  display: block;
  margin: 120rpx auto;
  width: 400rpx;
  height: 400rpx; }
  .loginnull text {
    display: block;
    margin: -50rpx auto 0;
    text-align: center;
    font-size: 28rpx;
    line-height: 40rpx;
    color: #92979d; }

.coursenull {
  display: block;
  margin: 60rpx auto;
  width: 360rpx;
  height: 360rpx; }
  .coursenull text {
    display: block;
    margin: -50rpx auto 0;
    text-align: center;
    font-size: 28rpx;
    line-height: 40rpx;
    color: #92979d; }

@keyframes switch-in {
  0% {
    opacity: 1;
    transform: translateX(0%) scale(1); }
  100% {
    opacity: 1;
    transform: translateX(-60%) scale(1); } }

@keyframes switch-out {
  0% {
    opacity: 1;
    transform: translateX(-60%) scale(1); }
  100% {
    opacity: 1;
    transform: translateX(0%) scale(1); } }
