fohow_xcx/pages/helpfarm/helpfarm-detail/helpfarm-detail.wxss

@import "../../../utils/wxParse/wxParse.wxss";
.bg {
  width: 100%;
  min-height: 100%;
  background-color: #f3f3f3;
}
.swiper{
  width: 100%;
  height: 400rpx;
}
.swiper image{
	width: 100%;
	height: 100%;
}
.mokuai {
  width: 65rpx;
  height: 65rpx;
  background: #000;
  opacity: 0.5;
  text-align: center;
  color: #fff;
  font-size: 20rpx;
  line-height: 65rpx;
  border-radius: 50%;
  position: absolute;
  top: 320rpx;
  right: 20rpx;
}
.mokuai1 {
  width: 100%;
  height: 232rpx;
  background: #fff;
  border-bottom: 1rpx solid #dddddd;
  position: relative;
  overflow: hidden;
}
.start {
  float: left;
  height: 28rpx;
  width: 102rpx;
  background: #ffb468;
  color: #fff;
  text-align: center;
  line-height: 28rpx;
  font-size: 24rpx;
  border-radius : 50rpx;
  margin: 15rpx 20rpx 0 20rpx;
  overflow: hidden;
}
.clock {
  float: left;
  width: 30rpx;
  height: 30rpx;
  margin: 15rpx 15rpx 0 0;
}
.time {
  font-size: 24rpx;
  color: #b68585;
  float: left;
  margin-top: 12rpx;
}
.describe {
  width: 500rpx;
  height: 86rpx;
  background: #fff;
  font-size: 33rpx;
  margin-left: 20rpx;
  margin-top: 20rpx;
  padding-bottom: 2rpx;
  overflow: hidden;
}
.danjia {
  font-size: 25rpx;
  color: #bbbbbb;
  float: left;
  margin: 25rpx 30rpx 0 20rpx;
}
.money {
  font-size: 25rpx;
  color: #ff9262;
  float: left;
  margin: 19rpx 0 0 0;
}
.count {
  font-size: 25rpx;
  color: #bbbbbb;
  float: right;
  margin-top: 25rpx;
}
.end{
  font-size: 25rpx;
  color: #bbbbbb;
  /* float: right; */
  /* margin-top: 27rpx; */
  /* margin-right: 65rpx; */
  position: absolute;
  right:65rpx;
  top:177rpx;
}
.line {
  width: 1rpx;
  height: 200rpx;
  background: #dddddd;
  /* background: red; */
  /* border: 1rpx solid #eee; */
  position: absolute;
  right: 210rpx;
  top: 20rpx;
}
.progress_box {
  position: absolute;
  /* width: 200rpx; */
  height: 160rpx;
  width: 160rpx;
  /* right: 5px;*/
  right: 26rpx;
  top: 5px;
  /* background: pink; */
  /* border: 20rpx solid #ccc; */
  /* border-radius: 50%; */
}
.progress_bg {
  position: absolute;
  width: 200rpx;
  height: 160rpx; 
}
.progress_canvas {
  width: 200rpx;
  height: 160rpx; 
}
.progress_text { 
  position: absolute;
  width: 40%;
  top: 50rpx;
  right: 50rpx;
  text-align: center;
  /* top: 0; */
  /* right: 0; */
}
.progress_info {   
  font-size: 30rpx;
  /* padding-left: 16rpx; */
  letter-spacing: 2rpx;
  color: #eab86a;
}
.tab-h {
  height: 93rpx;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  line-height: 93rpx;
  background: #fff;
  font-size: 28rpx;
  white-space: nowrap;
  /* font-weight: 600; */
  border-bottom: 1rpx solid #dddddd;
  color: #4c4c4c;
}
.tab-item {
  display: inline-block;
  width:50%;
  text-align:center;
}
.tab-item.active {
  color: #ff9262;
  border-top: 2rpx solid #ff9262;
}
.show {
  font-size: 28rpx;
  color: #4c4c4c;
  line-height: 48rpx;
  padding: 0rpx 20rpx;
  display:block;
  /* text-align:center; */
}
.showImage {
  
}
.hidden {
  font-size: 28rpx;
  color: #4c4c4c;
  line-height: 48rpx;
  padding: 0rpx 20rpx;
  display:none;
  text-align:center;
  line-height:200px;
}
.projects-title {
  position: relative;
  font-size: 28rpx;
  margin-top: 80rpx; 
  padding-bottom: 30rpx;
  /* font-weight: bold; */
  text-align: center;
  color: #bababa;
}
.personList {
  width: 100%;
  /* height: 730rpx; */
  /* background: #fcfcfc; */
  padding: 0 30rpx;
  box-sizing: border-box;
  padding-bottom: 132rpx;
}
.personList-li {
  width: 100%;
  height: 130rpx;
}
.p-head {
  height: 102rpx;
  width: 102rpx;
  border-radius: 50%;
  float: left;
}
.p-name {
  width: 240rpx;
  font-size: 24rpx;
  color: #4c4c4c;
  float: left;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  padding-left: 20rpx;
  padding-top: 15rpx;
}
.p-time {
  width: 400rpx;
  float: left;
  font-size: 24rpx;
  color: #999999;
  padding-top: 5rpx;
  padding-left: 23rpx;
}
.p-money {
  color: #fe6666;
  float: right;
  font-size: 26rpx;
  padding-top: 20rpx;
}
.p-more {
  width: 170rpx;
  height: 48rpx;
  line-height: 48rpx;
  color: #eab86a;
  text-align: center;
  margin: 0 auto;
  border: 1px solid #eab86a;
  border-radius: 50rpx;
  font-size: 30rpx;
}
.p-footer {
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:1;
  background: #fff;
}
.p-footer-bar {
  width: 100%;
  height: 88rpx;
  background-color: #FFF;
  line-height: 44rpx;
  display: -webkit-box;
  display: flex;
  text-align: center;
}
.p-footer-item {
  display: block;
  flex: 1;
  height: 88rpx;
  color: #999;
  font-size: 28rpx;
  overflow: hidden;
}
.p-footer-icon {
  width: 40rpx;
  height: 40rpx;
  display: block;
  margin: 0 auto;
  padding-top: 12rpx;
}
.p-footer-text {
  font-size: 20rpx;
  color: #4c4c4c;
  position:relative;
  top:-8rpx;
}
.p-red {
  width: 282rpx;
  height: 88rpx;
  display: block;
  color: #fff;
  line-height: 88rpx;
  background: -webkit-linear-gradient(left, #ffc56c , #ff9f61 , #ff7a56);
  background: -o-linear-gradient(right, #ffc56c , #ff9f61 , #ff7a56);
  background: -moz-linear-gradient(right, #ffc56c , #ff9f61 , #ff7a56);
  background: linear-gradient(to right, #ffc56c , #ff9f61 , #ff7a56);
}
.p-red__button {
  width: 100%;
  height: 100%;
  line-height: 88rpx;
  color: #fff;
  font-size: 28rpx;
  text-align: center;
}
.p-dialog {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  z-index: 99;
}
.p-panel {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #fff;
  z-index: 100;
  /* height: 780rpx; */
}
.p-item {
  position: relative;
  padding-top: 20rpx;
}
.p-cancel {
  position: absolute;
  right: 12rpx;
  top: 12rpx;
  width: 50rpx;
  height: 50rpx;
}
.p-btn__bg {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 88rpx;
}
.p-btn {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  padding: 0;
  height: 88rpx;
  line-height: 88rpx;
  background: -webkit-linear-gradient(left, #ffc56c , #ff9f61 , #ff7a56);
  background: -o-linear-gradient(right, #ffc56c , #ff9f61 , #ff7a56);
  background: -moz-linear-gradient(right, #ffc56c , #ff9f61 , #ff7a56);
  background: linear-gradient(to right, #ffc56c , #ff9f61 , #ff7a56);
  color: #fff;
  font-size: 28rpx;
  text-align: center;
  border-radius: 0rpx;
}
.sellout-btn {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  padding: 0;
  height: 88rpx;
  line-height: 88rpx;
  background: -webkit-linear-gradient(left, #d1dcdc , #968b8b);
  background: -o-linear-gradient(right, #d1dcdc , #968b8b);
  background: -moz-linear-gradient(right, #d1dcdc , #968b8b);
  background: linear-gradient(to right, #d1dcdc , #968b8b);
  color: #8a7f7f;
  font-size: 28rpx;
  text-align: center;
  border-radius: 0rpx;
}
.p-btn__button {
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 28rpx;
  text-align: center;
  line-height: 88rpx;
}
.p-btn__count {
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  padding: 0;
  height: 88rpx;
  line-height: 88rpx;
  font-size: 28rpx;
  color: #4c4c4c;
  background: -webkit-linear-gradient(left, #fdfbfb , #f5f4f5 , #ebedee);
  background: linear-gradient(to right, #fdfbfb , #f5f4f5 , #ebedee);
}
.one-part{
  width: 100%;
  /* height: 256rpx; */
  border-bottom: 1px solid #eeeeee;
  box-sizing: border-box;
  padding: 0 20rpx 20rpx;
}
.p-title {
  font-size: 32rpx;
  color: #4c4c4c;
  padding-bottom: 15rpx;
}
.p-dec {
  font-size: 30rpx;
  color: #999999;
}
.two-part {
  width: 100%;
  /* height: 256rpx; */
  border-bottom: 1px solid #eeeeee;
  box-sizing: border-box;
  padding: 30rpx 20rpx 30rpx;
}
.p-choose {
  font-size: 30rpx;
  color: #4c4c4c;
  /* padding-bottom: 15rpx; */
}
.p-choose1 {
  display: inline-block;
  font-size: 30rpx;
  color: #4c4c4c;
  /* padding-bottom: 15rpx; */
  line-height: 156rpx;
}
.p-count {
  font-size: 30rpx;
  height: 66rpx;
  line-height: 33rpx;
  color: #4c4c4c;
  background: #eeeeee;
  text-align: center;
  box-sizing: border-box;
  padding: 20rpx;
  display: inline-block;
  border-radius: 10rpx;
  margin-right: 20rpx;
  margin-top: 20rpx;
  overflow: hidden;
}
.p-count.active {
  background: #fe9362;
  color: #fff;
}
.three-part {
  box-sizing: border-box;
  height: 156rpx;
  width: 100%;
  margin-bottom: 88rpx;
  padding: 0 20rpx;
  overflow:hidden;
}
.p-input {
    float: right;
    height: 66rpx;
    font-size: 0;
    margin-top: 47rpx;
  /* line-height: 156rpx; */
}
.p-input input {
  width: 154rpx;
  height: 66rpx;
  background-color: #f3f3f3;
  color: #4c4c4c;
  font-size: 28rpx;
  text-align: center;
  display: inline-block;
  border-radius: 0;
}
.p-input button {
  width: 60rpx;
  height: 66rpx;
  color: #999;
  font-size: 48rpx;
  text-align: center;
  padding: 0;
  display: inline-block;
  background: #fff;
  border-radius: 0;
  line-height: 50rpx;
  box-sizing: border-box;
}
.p-other {
  width: 282rpx;
  color: #fff;
  line-height: 88rpx;
  /* background: -webkit-linear-gradient(left, #ffc56c , #ff9f61 , #ff7a56);
  background: -o-linear-gradient(right, #ffc56c , #ff9f61 , #ff7a56);
  background: -moz-linear-gradient(right, #ffc56c , #ff9f61 , #ff7a56);
  background: linear-gradient(to right, #ffc56c , #ff9f61 , #ff7a56); */
  background: #999;
}
.circle {
  width: 160rpx;
  height: 160rpx;
  position: absolute;
  right: 26rpx;
  top: 10rpx;
  border-radius: 50%;
  background: #ff7655;
  overflow: hidden;
}
.clip_left,.clip_right{
  width:160rpx;
  height:160rpx;
  position: absolute;
  top: 0rpx;
  left: 0rpx;
}
.circle_left, .circle_right{
  width:160rpx;
  height:160rpx;
  position: absolute;
  border-radius: 50%;
  top: 0rpx;
  left: 0rpx;
}
.mask {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  left: 21rpx;
  top: 21rpx;
  background: #FFF;
  position: absolute;
  text-align: center;
  line-height: 120rpx;
  font-size: 28rpx;
}
.circle_right,.clip_right {
  clip:rect(0,auto,auto,80rpx);
}
.circle_left , .clip_left{
  clip:rect(0,80rpx,auto,0);
}
.circle_left{
  background: #eee;
}
.circle_right{
  background: #eee;
}
.projects-line {
  width: 270rpx;
  /* height: 1rpx; */
  border: 1rpx solid #d9dee3;
  position: absolute;
  left: 0;
  top: 20rpx;
  margin-left: 30rpx;
}
.projects-line1 {
  width: 270rpx;
  /* height: 1rpx; */
  border: 1rpx solid #d9dee3;
  position: absolute;
  right: 0;
  top: 20rpx;
  margin-right: 30rpx; 
}
.project-imgList {
  display: block;
  width: 100%;
}
.poster {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  z-index: 99;
}
.poster-main {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1008rpx;
  background-color: #fff;
}
.poster-img {
  display: block;
  width: 375rpx;
  height: 677rpx;
  margin: 0 auto;
  border-radius: 20rpx;
  box-shadow: 0 10rpx 30rpx rgba(0,0,0,0.3);
}
.poster-close {
  position: absolute;
  width: 24rpx;
  height: 24rpx;
  top: 45rpx;
  right: 44rpx;
  background-image: url('https://fohow.oss-cn-shenzhen.aliyuncs.com/xcx/poster/close.png');
  background-size: 24rpx 24rpx;
  background-origin: content-box;
  background-repeat: no-repeat;
  padding: 30rpx;
}
.poster-text {
  text-align: center;
  color: #444444;
  font-size: 30rpx;
  padding-top: 40rpx;
}
.poster-btn {
  width: 336rpx;
  height: 96rpx;
  margin: 30rpx auto 0;
  background: linear-gradient(to right, #ffc56c , #ff9f61 , #ff7a56);
  border-radius: 96rpx;
}
.poster-icon {
  float: left;
  width: 40rpx;
  height: 40rpx;
  margin-left: 106rpx;
  margin-top: 26rpx;
  background-image: url('http://fohow.oss-cn-shenzhen.aliyuncs.com/xcx/poster/download.png');
  background-size: 100% 100%;
}
.poster-save {
  float: left;
  line-height: 96rpx;
  font-size: 32rpx;
  color: #fff;
  padding-left: 15rpx;
}
.canvas {
}
.use_modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0 20rpx;
  background: rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  z-index: 200;
}
.use_modal .content {
  position: relative;
  width: 100%;
  height: 492rpx;
  background: #fff;
  margin: 320rpx auto 0;
  border-radius: 8rpx;
  box-sizing: border-box;
}
.use_modal .title {
  width: 100%;
  height: 100rpx;
  text-align: center;
  font-size: 32rpx;
  color: #7f93ae;
  line-height: 100rpx;
  border-bottom: 1rpx solid #e8ebf0;
  margin: 0 auto;
}
.use_modal .info {
  width: 100%;
  text-align: center;
  padding-top: 40rpx;
}
.use_modal .secTitle {
  font-size: 24rpx;
  color: #bec9d9;
  margin-bottom: 20rpx;
}
.use_modal .num {
  font-size: 36rpx;
  color: #eab86a;
  margin-bottom: 40rpx;
}
.use_modal .tip {
  font-size: 28rpx;
  color: #7f93ae;
}
.use_modal .btn {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100rpx;
  border-bottom-left-radius: 8rpx;
  border-bottom-right-radius: 8rpx;
}
.use_modal .btn text {
  display: inline-block;
  width: 50%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 28rpx;
}
.use_modal .btn .bblr {
  border-bottom-left-radius: 8rpx;
  background: linear-gradient(0deg, #e5e9ec 0%, #cfd9e0 100%);
  color: #7f93ae;
}
.use_modal .btn .bbrr {
  border-bottom-right-radius: 8rpx;
  background: linear-gradient(0deg, #eab86a 0%, #e23232 100%);
  color: #fff;
}

.popup-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 99;
}
.popup {
  position: absolute;
  left: 50%;
  top: 300rpx;
  margin-left: -280rpx;
  width: 560rpx;
  height: 440rpx;
  background-color: #fff;
  border-radius: 10rpx;
  overflow: hidden;
}
.popup-title {
  text-align: center;
  line-height: 32rpx;
  font-size: 32rpx;
  padding-top: 30rpx;
  padding-bottom: 32rpx;
  color: #4c4c4c;
  font-weight: bold;
}
.popup-logobg {
  width: 110rpx;
  height: 110rpx;
  border-radius: 100%;
  background-color: #f7f7f7;
  margin: 0 auto;
  border:1rpx solid #cfcfcf;
}
.popup-image {
  display: block;
  width: 67rpx;
  height: 90rpx;
  background-image: url('https://fohow.oss-cn-shenzhen.aliyuncs.com/xcx/startlogo.png');
  background-size: 100% 100%;
  margin: 8rpx auto 0;
}
.popup-hint {
  display: block;
  font-size: 28rpx;
  color: #999999;
  text-align: center;
  line-height: 50rpx;
  padding-top: 20rpx;
}
.popup-bottom {
  border:0;
  border-radius: 0rpx;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  left: 0;
  border-top: 1rpx solid #cccccc;
  text-align: center;
  font-size: 32rpx;
  color: #39a43c;
}
.canvas-position {
  position: absolute;
  left: 100%;
  top: 0;
  width: 0rpx;
  height: 0rpx;
  overflow: hidden;
}
.detail-text {
  position: relative;
  font-size: 28rpx;
  height: 112rpx;
  line-height: 112rpx;
  text-align: center;
  color: #bbbbbb;
}
.detail-line {
  width:265rpx;
  border:1rpx solid #d9dee3;
  position:absolute;
  left:0;
  top:56rpx;
  margin-left:30rpx;
}
.detail-line1 {
  width:265rpx;
  border:1rpx solid #d9dee3;
  position:absolute;
  right:0;
  top:56rpx;
  margin-right:30rpx;

}