fohow_xcx/pages/helpfarm/helpfarm.wxss

.bg {
 width: 100%;
 min-height: 100%;
 background-color: #fff;
}
.projects {
 padding-top: 26rpx;
}
.projectbg {
 background-color: #fff;
 padding-bottom: 1rpx;
}
.project {
 position: relative;
 margin: 0 auto;
 width: 710rpx;
 /* height: 580rpx; */
 background-color: #f7f7f7;
 margin-bottom: 30rpx;
 border-radius: 8rpx;
}
.project-image {
 display: block;
 /* width: 456rpx; */
 height: 242rpx;
 width: 100%;
}
.project-describe {
 width: 710rpx;
 /* height: 130rpx; */
 padding: 13rpx 13rpx 0 13rpx;
 box-sizing: border-box;
}
.project-title1 {
 font-size: 30rpx;
 color: #2b2b2b;
 -webkit-line-clamp: 1;
}
.project-count1 {
 float: right;
 padding-top: 20rpx;
 font-size: 24rpx;
 color: #bbbbbb;
}
.project-price1 {
 float: left;
 padding-top: 10rpx;
 font-size: 28rpx;
 color: #4c4c4c;
 padding-bottom: 20rpx;
}
.project-no {
 position: absolute;
 left: 13rpx;
 top: 13rpx;
 background: -webkit-linear-gradient(left, #2fbd2d, #56cd33, #7cde38);
 background: -o-linear-gradient(right, #2fbd2d, #56cd33, #7cde38);
 background: -moz-linear-gradient(right, #2fbd2d, #56cd33, #7cde38);
 background: linear-gradient(to right, #2fbd2d, #56cd33, #7cde38);
 z-index: 10;
 font-size: 25rpx;
 color: #fff;
 height: 35rpx;
 width: 96rpx;
 text-align: center;
 line-height: 35rpx;
}
.project-jizhu {
 position: absolute;
 left: 13rpx;
 top: 13rpx;
 background: -webkit-linear-gradient(left, #ff5d5d, #ff7e69, #ff9a73);
 background: -o-linear-gradient(right, #ff5d5d, #ff7e69, #ff9a73);
 background: -moz-linear-gradient(right, #ff5d5d, #ff7e69, #ff9a73);
 background: linear-gradient(to right, #ff5d5d, #ff7e69, #ff9a73);
 z-index: 10;
 font-size: 25rpx;
 color: #fff;
 height: 35rpx;
 width: 96rpx;
 text-align: center;
 line-height: 35rpx;
}
.project-jindu {
 height: 80rpx;
 width: 710rpx;
 background: #f9f9f9;
 position: relative;
 /* padding: 32rpx 140rpx 0 100rpx; */
 box-sizing: border-box;
 color: #fe7554;
 display:-webkit-box;
 display:flex;
 align-items:center;
}
.jindu {
 font-size: 30rpx;
 color: #ff9262;
 padding-left: 20rpx;
 padding-bottom:5rpx;
 /* position: absolute;
 top: 20rpx;
 left: 20rpx; */
 /* float: left; */
 flex:1;
}
.jindu-percent{
 font-size: 30rpx;
 color: #ff9262;
 flex:1;
 padding-left: 20rpx;
 padding-right: 20rpx;
 padding-bottom:5rpx;
 /* position: absolute;
 top: 20rpx;
 right: 10rpx; */
 /* float: right; */
}
.project-jieshu {
 position: absolute;
 left: 10rpx;
 top: 10rpx;
 background: red;
 z-index: 10;
 font-size: 25rpx;
 color: #fff;
 height: 35rpx;
 width: 96rpx;
 text-align: center;
 line-height: 35rpx;
}
.project-chenggong {
 position: absolute;
 left: 13rpx;
 top: 13rpx;
 background: -webkit-linear-gradient(left, #845f44, #a4835d, #c2a374);
 background: -o-linear-gradient(right, #845f44, #a4835d, #c2a374);
 background: -moz-linear-gradient(right, #845f44, #a4835d, #c2a374);
 background: linear-gradient(to right, #845f44, #a4835d, #c2a374);
 z-index: 10;
 font-size: 25rpx;
 color: #fff;
 height: 35rpx;
 width: 96rpx;
 text-align: center;
 line-height: 35rpx;
}
.project-tuikuan {
 position: absolute;
 left: 10rpx;
 top: 10rpx;
 background: #ccc;
 z-index: 10;
 font-size: 25rpx;
 color: #fff;
 height: 35rpx;
 width: 96rpx;
 text-align: center;
 line-height: 35rpx;
}
.bg-img {
 background: #f2f3f4 url(https://cfohow.hiwavo.com/xcx/xcx/helpfarm/coming_soon.png) no-repeat fixed center;
 width: 100%;
 min-height: 100%;
}
.top-left {
  width: 68%;
  height: 242rpx;
  float: left;
}
.project-top {
  margin-bottom: 20rpx;
  overflow: hidden;
}
.top-right {
 background: #fff;
 width: 32%;
 float: right;
 height:242rpx;
 position: relative;
}
.circle {
 width: 160rpx;
 height: 160rpx;
 position: absolute;
 right: 26rpx;
 top: 20rpx;
 border-radius: 50%;
 background: #ff7655;
 /* background: -webkit-linear-gradient(#ff7555, #ff865a, #ff9f62);
 background: -o-linear-gradient(#ff7555, #ff865a ,#ff9f62);
 background: -moz-linear-gradient(#ff7555, #ff865a, #ff9f62);
 background: linear-gradient(#ff7555, #ff865a, #ff9f62); */
 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;
}
.end{
 font-size: 25rpx;
 color: #bbbbbb;
 /* float: right; */
 /* margin-top: 27rpx; */
 /* margin-right: 65rpx; */
 position: absolute;
 right:65rpx;
 top:193rpx;
}