@font-face { font-family: OPPOSans-R ; src: url('@/font/OPPOSans-R-2.ttf'); } @font-face { font-family: OPPOSans-M ; src: url('@/font/OPPOSans-M-2.ttf'); } page { height: 100%; background-color: #F2F7FF; font-family: OPPOSans-R; } .container { position: relative; width: 100%; padding-top:calc(var(--status-bar-height) + 65px); //margin-top:150px; } .no-list{ margin-top: 100rpx; width: 100%; display: flex; flex-direction: column; align-items: center; image{ width: 208rpx; height: 208rpx; } text{ font-weight: 500; font-size: 24rpx; color: #B5B5B5; } } .cards-list { margin: auto; width: 95%; } .card-status-icon-change{ transform: rotate(180deg) !important; } .card-item-range{ width: 300rpx; display:flex; justify-content: center; align-items: center; gap: 20rpx; } .stats-layer-next { margin:16px auto auto auto; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; justify-content: center; width: 95%; background-color: #FFF; border-radius: 10rpx; padding: 40rpx 0 0 0; transition: all .3s; min-height: 100rpx; .condition-btn { position: absolute; top: 0; left: 50%; transform: translate(-50%); display: flex; justify-content: center; align-items: center; gap: 20rpx; width: 328rpx; height: 60rpx; background: #D4E7FF; border-radius: 0rpx 0rpx 30rpx 30rpx; transition: all .3s; image { width: 32rpx; height: 32rpx; } } .card-line { width: 100%; height: 30rpx; background-color: #F2F7FF; } .condition-from { display: flex; flex-direction: column; align-items: flex-start; align-items: center; gap: 20rpx; width: 90%; height: 0; overflow: hidden; transition: all .3s; .item { width: 100%; display: flex; justify-content: space-between; align-items: center; .item-label { font-size: 28rpx; font-weight: 500; color: #444444; } .item-text { display: flex; justify-content: flex-end; align-items: center; .text { font-size: 28rpx; font-weight: 500; color: #DDDDDD; } } } .form-confrom { display: flex; justify-content: center; align-items: center; width: 328rpx; height: 72rpx; background: #002F69; border-radius: 38rpx; font-size: 36rpx; color: #FFFFFF; font-weight: 500; } } } .identity-input { text-align: right; direction: rtl; } .card-only{ padding: 24rpx 20rpx; } .card { position: relative; margin-top: 32rpx; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 100%; background-color: #fff; border-radius: 12rpx; box-shadow: 0rpx 0rpx 8rpx 0rpx #D8EEFF; .card-textcontent{ width: 100%; .card-textcontent-title{ width: 100%; font-size: 32rpx; font-weight: 500; color: #002F69; } .card-textcontent-body{ margin-top: 18rpx; padding-top: 18rpx; width: 100%; font-size: 24rpx; font-weight: 500; color: #444444; border-top: 1rpx dashed #DDDDDD; min-height: 200rpx; } .card-textcontent-oncontent{ margin-top: 18rpx; padding-top: 32rpx 0 30rpx 0; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; image{ width: 128rpx; height: 128rpx; } text{ font-weight: 500; font-size: 24rpx; color: #B5B5B5; } } } .card-btn-list{ position: absolute; bottom: 0; left: 50%; transform: translate(-50%); display: flex; justify-content: center; align-items: center; width: 100%; height: 60rpx; border-radius: 28rpx 28rpx 0rpx 0rpx; box-shadow: inset 0rpx -1rpx 8rpx 0rpx #C2E1FB; background: #E9F2FF; .button{ display: flex; justify-content: center; align-items: center; width: 20%; height: 100%; font-weight: 500; font-size: 24rpx; color: #6C90C1; } } .project-layer{ display: flex; justify-content: space-between; align-items: center; gap: 16rpx; // padding-bottom: 22rpx; // border-bottom: 2rpx dashed #DDDDDD; width: 100%; padding: 20rpx 0; .name{ flex-grow: 1; font-weight: 500; font-size: 28rpx; color: #222222; } .month-name{ display: flex; justify-content: flex-start; align-items: center; width: calc(100% - 135rpx); min-height: 65rpx; text{ } } } .card-project-name-icon{ position: absolute; top: 0; left: 30rpx; display: flex; justify-content: center; align-items: center; width: 112rpx; height: 114rpx; background: #F2F7FF; border-radius: 0rpx 0rpx 16rpx 16rpx; font-size: 28rpx; font-weight: 500; line-height: 38rpx; color: #002F69; } .card-status{ position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 24rpx 0 36rpx; padding-top: 32rpx; color: #6C90C1; font-size: 24rpx; font-weight: 500; border-radius: 40rpx 0 0 40rpx; background: #F2F7FF; .status-name{ white-space: nowrap; } .status-switch{ width: 32rpx; height: 32rpx; } .status-light { position: absolute !important; left: 50% !important; top: -20rpx !important; transform: translate(-50%,0); width: 56rpx !important; height: 56rpx !important; } } .card-content-box{ position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 12rpx; width: calc(100% - 64rpx); height: 0; overflow: hidden; transition: all .3s; .line { width: 100%; height: 0px; border-top: 2rpx dashed #DDDDDD; } } .special-item { width: 100%; min-height: 136rpx; padding: 0 34rpx; background: linear-gradient(112deg, #113EF0 0%, #8C49FF 100%, #E7F0FF 100%); box-shadow: 0rpx -36rpx 44rpx -34rpx rgba(0, 25, 121, 0.3); border-radius: 24rpx; .card-name-text { color: #fff !important; } .card-name-description { color: #fff !important; } } .card-warn{ position: absolute; top: 0; right: 30rpx; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 90rpx; height: 90rpx; background: radial-gradient( 0% 63% at 50% 36%, #FF4747 0%, #FF0000 100%); border-radius: 2rpx 2rpx 10rpx 10rpx; .warn-num{ white-space: nowrap; font-size: 36rpx; font-weight: 500; color: #FFFF00; } .warn-label{ white-space: nowrap; font-weight: 300; font-size: 16rpx; color: #FFFFFF; zoom: 0.8; } } .card-name { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; min-height: 84rpx; padding: 10rpx 0; } .card-item-textarea { width: 100%; height: 168rpx; padding: 20rpx; box-sizing: border-box; background: red; border-radius: 20rpx; border: 1px solid #ccc; } .card-item-textarea-label{ position: absolute; bottom: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 10rpx; background: #F5F5F5; border-radius: 188rpx 0rpx 12rpx 0rpx; padding: 10rpx 30rpx 10rpx 50rpx; } .card-name-title { display: flex; align-items: center; .card-name-description { min-width: 160rpx; font-size: 28rpx; font-weight: 400; color: #9E9E9E; } } .card-name-text { // display: -webkit-box; // -webkit-line-clamp: 2; // -webkit-box-orient: vertical; // overflow: hidden; width: 550rpx; font-size: 28rpx; color: #002F69; font-weight: 500; } .card-item-upload{ width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; .card-item-name { // padding-bottom: 20rpx; display: flex; align-items: center; gap: 10rpx; // width: 154rpx; font-size: 14rpx !important; font-weight: 500; color: #9E9E9E; } .card-item-title{ padding-bottom: 20rpx; display: flex; align-items: center; gap: 10rpx; width: 154rpx; font-size: 28rpx; font-weight: 500; color: #002F69; } } .card-item{ width: 100%; display: flex; justify-content: flex-start; align-items:center; gap: 24rpx; .item-button{ margin: auto; display: flex; justify-content: center; align-items: center; width: 600rpx; height: 80rpx; border-radius: 10rpx; background-color: #002F69; color: #fff; } .card-item-name { display: flex; align-items: center; gap: 10rpx; // width: 154rpx; font-size: 24rpx; font-weight: 500; color: #B5B5B5; } .card-item-content { flex-grow: 1; font-weight: 500; font-size: 24rpx; color: #444444; word-break: break-all; } .card-item-description { display: flex; align-items: center; font-size: 32rpx; color: #343437; } .remind-text{ color:#D8D8D8; } .card-item-right { flex-grow: 1; display: flex; justify-content: flex-end; align-items: center; } .card-item-input{ display: flex; justify-content: flex-start; align-items: center; font-size: 28rpx; } .center-input{ text-align: center; } .card-item-unit{ display: flex; align-items: center; justify-content: flex-end; padding-left: 10rpx; font-size: 28rpx; color: #343437; white-space: nowrap; } .can-click{ color: #1869F6; font-weight: 700 } .card-item-announcement{ color:#343437; font-size: 36rpx; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .card-item-announcement-detail{ color:#343437; font-size: 36rpx; } .card-item-announcement-content{ color:#9E9E9E; font-size: 32rpx; } } .first-card-item { margin: 0; } .card-btn { display: flex; flex-direction: column; justify-content: center; width: 45%; height: 66rpx; text-align: center; color: #fff; font-size: 32rpx; background: #1869F6; border-radius: 16rpx; } .thin-btn{ width: 32.5%; } .fat-btn{ width: 100%; } .empty-btn { color: #1869F6; border: 2rpx solid #1869F6; background: #fff; } .text-btn { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; width: 22.5%; color: #1869F6; border: 2rpx solid #fff; background: #fff; image { margin-right: 26rpx; width: 36rpx; height: 40rpx; } } .report-btn{ color:#1869F6; background-color:#E2ECFF; font-size: 24rpx; } .card-icon{ position:absolute; top: 15rpx; right: 30rpx; width:182rpx; height:182rpx; background: url("@/static/inputed.png"); background-size: 100% 100%; transform: rotate(30deg); opacity:0.3; } .no-input{ background: url("@/static/notInput.png"); background-size: 100% 100%; } .question-closed{ background: url("@/static/question-closed.png"); background-size: 100% 100%; } .question-not-close{ background: url("@/static/question-notClose.png"); background-size: 100% 100%; } } .only-card{ padding: 40rpx; // padding-bottom: 30rpx !important; } .one-only-card{ gap: 16rpx; } .confirm-btn{ width: 100%; height: 84rpx; margin-top: 50rpx; margin-bottom: 100rpx; line-height: 84rpx; font-size: 36rpx; color: #fff; text-align: center; background: #002F69; } .ban-submit{ background:#9acafc; } .upload-file-area{ display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 20rpx; width: 100%; min-height:160rpx; font-size: 28rpx; color:#343437; .file-item{ width: 100% !important; display: flex; justify-content: space-between; align-items: center; .upload-file-name{ font-size: 25rpx; color: #666666; font-weight: 300; } .down-btn{ font-size: 28rpx; color: #002F69; font-weight: 300; } } } .gap-bottom{ width: 100%; height: 60rpx; } .card-fold-option { position: absolute; display: flex; justify-content: space-between; align-items: center; left: 0; bottom: 0; width: 100%; height: 38rpx; padding: 0 40rpx; box-sizing: border-box; background: linear-gradient(270deg, #CADDFF 4%, rgba(219, 232, 255, 0) 100%); z-index: 999; .card-fold-count { flex: 1; font-size: 28rpx; color: #1869F6; } .card-fold-center { flex: 1; .card-fold-btn { width: 32rpx; height: 20rpx; margin: 0 auto; background-image: url("@/static/icon-fold.png"); background-size: 100% 100%; } .card-unfold-btn { transform: rotate(180deg); } } .card-fold-chaos { flex: 1; } } .order-by { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 106rpx; margin-bottom: 34rpx; padding: 0 40rpx; border-radius: 40rpx; background: #FFF; .order-by-item { flex: 1; display: flex; justify-content: center; align-items: center; font-size: 32rpx; color: #343437; .order-by-icon { width: 22rpx; height: 46rpx; margin-left: 24rpx; background-image: url("@/static/orderBy-none.png"); background-size: 100% 100%; } .desc { background-image: url("@/static/orderBy-desc.png"); } .asc { background-image: url("@/static/orderBy-asc.png"); } } } // 以下为单项设置 .flex{ display: flex; } .flex-align-start{ align-items: flex-start; } .un-fold{ gap: 16rpx !important; .search-item-text { display: flex !important; align-items: center; justify-content: flex-start; margin: 0 !important; width: 65% !important; height: auto; line-height: 40rpx; min-height: 2.03125rem; color: #002F69; } } .uni-input-input{ font-size: 28rpx; } .guanbi{ position: absolute; right: 15px; top: 0; } .card-name-num, .card-layer .card-num{ min-width: 64rpx; border:2rpx solid #DDDDDD !important; } .card-top{ padding:0 20rpx 20rpx 20rpx; border-radius: 10rpx; .card-top-left { background: #D3F4FF !important; } } .detail-fold { display: flex; flex-direction: row; align-items: center; justify-content: center; width: 64rpx; height: 64rpx; background: #F2F7FF; box-shadow: inset 4rpx -6rpx 8rpx 0px #E9F2FF; border-radius: 8rpx; white-space: nowrap; image { width: 32rpx; height: 32rpx; // margin-left: 16rpx; } } .card-name-num { margin-left: 8rpx; width: 64rpx; height: 64rpx; border-radius: 4rpx; border: 2rpx solid #F4F4F4; font-size: 24rpx; color: #B5B5B5; display: flex; align-items: center; justify-content: center; } .card-top .card-top-left, .card .item-bg{ min-width: 112rpx; } .cards-list .card .card-title{ justify-content: start; gap: 16rpx; .status-day{ position: absolute; right: 0; } } .policy-item .search-item-text{ text-align: start !important; } .uni-textarea-textarea { line-height: 44rpx !important; } .item-card .item-info .item-info-description{ white-space: nowrap; } .open-btn{ transform: rotate(180deg); } .confirm{ width: 100%; display: flex; justify-content: center; .confirm-btn{ width: 328rpx; height: 72rpx; line-height: 72rpx; background: #002F69; border-radius: 38rpx; } } .search .search-item{ width: 90% !important; margin: 0 auto !important; }