page{
    padding-top: 160rpx;
    padding-bottom: 160rpx;
}
video{
    width: 100%;
    height: 422rpx;
}
.box-end{
    position: fixed;
    bottom:40rpx;
    left: 50%;
    margin-left: -126rpx;
    text-align: center;
    width: 252rpx;
    height: 80rpx;
    line-height: 80rpx; 
    border-radius: 32rpx;
    font-size: 28rpx;
    font-weight: 600;
    background:rgba(255,200,61,1);
  }

.image,.essay,.recording{
    width: 100%;
    padding: 16rpx;
}
.essay{
    font-size: 28rpx;
    margin-bottom: 64rpx;
}
swiper{
    height: 400rpx;
}
.image image{
    width: 100%;
    height: 400rpx;
}
.recording{
    margin-bottom: 30rpx;
}

.art{
    background: #f8f8f8;
    border-radius: 36rpx;
    width: 686rpx;
    height:272rpx;
   padding: 80rpx 140rpx;
   text-align: center;
   margin: 0 auto;
   margin-top:120rpx;
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
}
.art>view{
    width: 80rpx;
    height: 80rpx;
}
.art image{
    width: 80rpx;
    height: 80rpx;
    box-shadow: 5rpx 5rpx 5rpx rgba(0, 0, 0, .2);
    border-radius:40rpx;
} 
.art image:nth-child(2){
    width:112rpx;
    height: 112rpx;
    border-radius: 56rpx;
    margin: 0 48rpx;
}
.porogress{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80rpx;
    height: 80rpx;
    border: 5rpx solid #3a3942;
    border-radius: 50%;
    position: fixed;
    top: 30rpx;
    right: 20rpx;
}
.porogress>text{
    font-size: 24rpx;
    color: #c5c5c5;
    font-weight: 600;
}
.porogress>text:first-child{
    color: #3a3942;
}

/*上传图片 */
.ui_uploader_cell {
    width: 100%;
    padding: 36rpx;
    box-sizing: border-box;
    overflow: hidden;
  }
  
  .ui_uploader_item {
    float: left;
    position: relative;
    margin-right: 30rpx;
    margin-bottom: 30rpx;
    width: 165rpx;
    height: 165rpx;
  
  }
  
  .ui_uploader_item_icon {
    position: absolute;
    right: -20rpx;
    top: -20rpx;
    background: #fff;
    border-radius: 50%;
  }
  
  .ui_uploader_item image {
    width: 100%;
    height: 100%;
  }
  
  .ui_uploader {
    float: left;
    position: relative;
    margin-right: 25rpx;
    margin-bottom: 25rpx;
    box-sizing: border-box;
  }
  
  .ui_uploader image {
    width: 165rpx;
    height: 165rpx;
  }

  
.audio_play{
    width: 100%;
}
.audio_img{
    width: 112rpx;
    height: 112rpx;
    margin: 0 auto;
    display: block;
    box-shadow: 0rpx 8rpx 18rpx rgb(201, 201, 201);
    border-radius: 50%;
    margin-top: 54rpx;
}
.essay image{
    width: 100%;
}

/*  */
.alter{
    background: rgba(0, 0, 0, .6);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.denglu {
    position: fixed;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 622rpx;
    border-radius: 48rpx;
    background: #fff;
}
.mask image{
    position: absolute;
    top: 0;
    z-index: 9999;
    width: 100%;
    height: 750rpx;
}
.denglu{
    padding: 100rpx  50rpx 50rpx 50rpx;
}
.denglu>view:nth-child(1) {
    font-size: 52rpx;
    font-weight: 500;
}
.denglu>view:nth-child(2){
    margin-top: 50rpx;
}
.denglu>view:nth-child(2)>text {
    font-size: 50rpx;
    margin-top: 44rpx;
    color: #FD9327;
}
.button {
    width: 422rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    font-size: 32rpx;
    font-weight: 600;
    margin: 64rpx auto;
    border-radius: 96rpx;
    background: rgba(255, 200, 61, 1);
}
.text_bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 88rpx;
}
.text_bar>view{
    margin-top: 0;
}
.text_bar>view>view>text:first-child{
    font-size: 40rpx;
    color: #000;
}
.text_bar>view>view>text:last-child{
    font-size: 24rpx;
    color: #000;
}
.text_bar>view>text{
    font-size: 24rpx;
    color: #C4C4C4;
}