@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: #F4F8FF; font-family: OPPOSans-R; } .container { position: relative; width: 100%; height: 100%; background: linear-gradient(180deg, #1763E7 0%, #DCE9FF 56%, #F4F8FF 100%); } .cards-list { position: absolute; top: 100px; left: 4%; width: 92%; height: 86%; } .card { position: relative; width: 100%; min-height: 200rpx; margin-bottom: 32rpx; padding: 0 40rpx 40rpx; box-sizing: border-box; background-color: #fff; border-radius: 40rpx; overflow: hidden; .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-name { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; min-height: 84rpx; padding: 10rpx 0; border-bottom: 2rpx solid #D8D8D8; } .card-name-title { display: flex; align-items: center; .card-name-description { min-width: 160rpx; font-size: 36rpx; font-weight: 400; color: #9E9E9E; } } .card-name-text { font-size: 36rpx; font-weight: 500; color: #343437; word-break: break-all; } .card-item{ display: flex; justify-content: space-between; align-items:flex-start; position: relative; margin-top: 25rpx; .card-item-name { min-width: 160rpx; font-size: 32rpx; font-weight: 400; color: #9E9E9E; } .card-item-content { font-size: 32rpx; font-weight: 400; color: #343437; word-break: break-all; } .card-item-description { display: flex; align-items: center; font-size: 32rpx; color: #343437; } .remind-text{ color:#D8D8D8; } .card-item-input { margin: auto 0; text-align: right; font-size: 32rpx; color: #343437; } .center-input{ text-align: center; } .card-item-textarea { width: 100%; height: 168rpx; padding: 20rpx; box-sizing: border-box; background: #EAF0FA; border-radius: 20rpx; } .card-item-unit{ min-width: 64rpx; margin:auto 0 auto 15rpx; font-size: 32rpx; line-height: 32rpx; color: #343437; } .can-click{ color: #1869F6; font-weight: 700 } .card-item-range{ display:flex; } .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; } .confirm-btn{ width: 100%; height: 84rpx; margin-top: 50rpx; line-height: 84rpx; font-size: 36rpx; color: #fff; text-align: center; background: #1869F6; border-radius: 16rpx; } .ban-submit{ background:#9acafc; } .upload-file-area{ width: 100%; min-height:160rpx; font-size: 32rpx; color:#343437; .upload-file-name{ margin-bottom: 20rpx; word-break:break-all } } .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; }