.union-construct { width: 100%; padding-bottom: 30rpx; } /**联建共建开展情况样式*/ .union-amount { color: #5B5B5B; font-size: 30rpx; line-height: 45rpx; box-sizing: border-box; padding: 30rpx 35rpx 25rpx; background: #fff; } .condition { width: 100%; height: 77rpx; background: #fff; padding-bottom: 15rpx; } .condition .content { width: 410rpx; height: 64rpx; background: #f6f8f8; border-radius: 10rpx; margin-left: 35rpx; box-sizing: border-box; padding: 0 25rpx; display: flex; align-items: center; justify-content: space-between; position: relative; } .condition .select { font-size: 32rpx; color: #333; font-weight: bold; } .condition .trigger { width: 0rpx; height: 0rpx; border: 13rpx solid transparent; border-top: 15rpx solid #c1c1c3; position: relative; top: 8rpx; } .condition .union-condition-list { position: absolute; left: 0; top: 62rpx; background: #f6f8f8; border-radius: 6rpx; box-sizing: border-box; padding: 0 25rpx; width: 410rpx; z-index: 1000; } .condition .union-condition-list .list-item { display: flex; align-items: center; justify-content: space-between; height: 62rpx; width: 100%; font-size: 22rpx; color: #666; } /**联建共建开展情况排名样式*/ .union-order { width: 100%; background: #fff; margin-top: 13rpx; } .union-order .union-order-header { width: 100%; height: 110rpx; box-sizing: border-box; padding: 0 30rpx; display: flex; align-items: center; justify-content: space-between; border-bottom: 1rpx solid #e5e5e7; } .union-order .union-order-header .left { color: #030303; font-size: 36rpx; font-weight: bold; } .union-order .union-order-header .right { display: flex; align-items: center; justify-content: flex-end; } .union-order .union-order-header .right .status { color: #DC1E20; font-size: 26rpx; } .union-order .union-order-header .right .status-bg { width: 20rpx; height: 14rpx; margin-left: 8rpx; } .union-order .union-order-condition { width: 100%; height: 110rpx; box-sizing: border-box; padding: 0 30rpx; display: flex; align-items: center; justify-content: space-between; } .union-order .union-order-condition .left { width: calc(100% - 110rpx); height:56rpx; background: #f8f8fa; box-sizing: border-box; padding: 0 15rpx 0 30rpx; display: flex; align-items: center; justify-content: space-between; border-radius: 8rpx; } .union-order .union-order-condition .left .select-condition { color: #7a7a7a; font-size: 28rpx; } .union-order .union-order-condition .left .trigger { width: 0; height: 0; border: 12rpx solid transparent; border-top: 12rpx solid #c4c3c6; position: relative; top: 6rpx; } .union-order .union-order-condition .order-search { display: flex; align-items: center; justify-content: flex-end; width: 100rpx; } .union-order .union-order-condition .order-search .name { color: #E43D24; font-size: 26rpx; } .union-order .union-order-condition .order-search .order-change { width:28rpx; height: 22rpx; margin-left: 10rpx; } /* 排序start */ .search-bar { width: 200rpx; height: 110rpx; background: #fff; box-sizing: border-box; border-top: 1rpx solid #fff; display: flex; align-items: center; flex-direction: row-reverse; } .search-bar .order { height: 100%; width: 100rpx; display: flex; align-items: center; margin-left: 20rpx; position: relative; perspective: 3000; } .search-bar .order .front { position: absolute; width: 100rpx; height: 100%; display: flex; align-items: center; justify-content: center; transform: rotateY(180deg); transform-origin: center; transition: transform 0.4s linear; visibility: hidden; left: 0; top: 0; } .search-bar .order .front.select { transform: rotateY(0deg); transition: transform 0.4s linear; visibility: visible; } .search-bar .order .back { position: absolute; width: 100rpx; height: 100%; display: flex; align-items: center; justify-content: center; transform: rotateY(-180deg); transition: transform 0.4s linear; visibility: hidden; left: 0; top: 0; } .search-bar .order .back.select { transform: rotateY(0deg); transition: transform 0.4s linear; visibility: visible; } .search-bar .order text { font-size: 26rpx; color: #e43d24; display: inline-block; } .search-bar .order .front image { width: 28rpx; height: 22rpx; margin-left: 8rpx; } .search-bar .order .back image { width: 28rpx; height: 22rpx; margin-right: 8rpx; } /* 排序end */ /**党员作用发挥情况排名样式*/ .union-order { width: 100%; background: #fff; margin-top: 13rpx; overflow: hidden; } .union-order .union-order-header { width: 100%; height: 110rpx; box-sizing: border-box; padding: 0 30rpx; display: flex; align-items: center; justify-content: space-between; border-bottom: 1rpx solid #e5e5e7; } .union-order .union-order-header .left { color: #030303; font-size: 36rpx; font-weight: bold; } .union-order .union-order-header .right { display: flex; align-items: center; justify-content: flex-end; } .union-order .union-order-header .right .status { color: #DC1E20; font-size: 26rpx; } .union-order .union-order-header .right .status-bg { width: 20rpx; height: 14rpx; margin-left: 8rpx; transform: rotate(0deg); transition: transform 0.4s linear; } .union-order .union-order-header .right .status-bg.reverse { transform: rotate(180deg); transition: transform 0.4s linear; } .union-order .union-order-condition { width: 100%; height: 110rpx; box-sizing: border-box; padding: 0 30rpx; display: flex; align-items: center; justify-content: space-between; } .union-order .union-order-condition .left { width: calc(100% - 110rpx); height:56rpx; background: #f8f8fa; box-sizing: border-box; padding: 0 15rpx 0 30rpx; display: flex; align-items: center; justify-content: space-between; border-radius: 8rpx; position: relative; } .union-order .union-order-condition .left .condition-list { position: absolute; box-sizing: border-box; padding: 0 30rpx; left: 0rpx; top: 56rpx; width: 100%; background: #f8f8fa; z-index: 100; max-height: 300rpx; overflow-y: auto; /** transition: height 0.3s linear; */ } .union-order .union-order-condition .left .condition-list .list-item { display: flex; align-items: center; justify-content: space-between; color: #7a7a7a; font-size: 28rpx; line-height: 56rpx; height: 56rpx; } .union-order .union-order-condition .left .select-condition { color: #7a7a7a; font-size: 28rpx; } .union-order .union-order-condition .left .trigger { width: 0; height: 0; border: 12rpx solid transparent; border-top: 12rpx solid #c4c3c6; position: relative; top: 6rpx; transform-origin: center 6rpx; transform: rotate(0deg); transition: transform 0.3s linear; } .union-order .union-order-condition .left .trigger.reverse { transform: rotate(180deg); transition: transform 0.3s linear; } .union-order .union-order-condition .order-search { display: flex; align-items: center; justify-content: flex-end; width: 100rpx; } .union-order .union-order-condition .order-search .name { color: #E43D24; font-size: 26rpx; } .union-order .union-order-condition .order-search .order-change { width:28rpx; height: 22rpx; margin-left: 10rpx; }