diff --git a/src/assets/scss/modules/visual/personCategory.scss b/src/assets/scss/modules/visual/personCategory.scss new file mode 100644 index 00000000..7d9aee4a --- /dev/null +++ b/src/assets/scss/modules/visual/personCategory.scss @@ -0,0 +1,164 @@ +.warning-box { + box-sizing: border-box; + // width: 1881px; + width: 100%; + // height: 100%; + min-height: 100%; + margin: auto; + color: #fff; + // background: url("../../../img/modules/visual/warning-box.png") no-repeat center; + background-size: 100% 100%; + padding: 45px 21px 35px 24px; + + &-top { + display: flex; + // justify-content: space-around; + justify-content: flex-start; + flex-wrap: wrap; + min-height: 190px; + + .top-item-active { + background: linear-gradient(0deg, #1a5afd86, #26c5ff75); + } + + .top-item { + box-sizing: border-box; + width: 280px; + height: 190px; + padding: 10px 22px 14px 21px; + // background: rgba(255, 255, 255, 0); + border: 1px solid #1043c0; + box-shadow: 0px 83px 150px 0px #002790; + border-radius: 8px; + margin-right: 15px; + margin-bottom: 15px; + cursor: pointer; + + &-img { + display: flex; + align-items: center; + + img { + width: 78px; + height: 78px; + margin-right: 16px; + margin-bottom: 10px; + } + + .top-item-left { + display: flex; + flex-direction: column; + + span { + display: inline-block; + } + + span:nth-child(1) { + font-size: 18px; + font-weight: 400; + color: #ffffff; + } + + span:nth-child(2) { + font-size: 28px; + font-weight: bold; + color: #00fffc; + margin-top: 10px; + } + } + } + + &-num { + width: 100%; + display: flex; + position: relative; + flex-direction: column; + align-items: space-between; + // border: 1px solid red; + + .num-item { + position: relative; + width: 100%; + height: 35px; + display: flex; + border-radius: 4px; + align-items: center; + justify-content: space-between; + padding: 0 10px 0 9px; + + // &::after { + // display: block; + // content: ""; + // width: 8px; + // height: 8px; + // background: #f0f3f7; + // border-radius: 50%; + // position: absolute; + // left: 12px; + // top: 50%; + // transform: translate(0, -50%); + // } + + div:nth-child(1) { + font-size: 16px; + font-family: PingFang SC; + font-weight: 400; + color: #ffffff; + } + + div:nth-child(2) { + // width: 70%; + display: flex; + font-size: 20px; + font-family: PingFang SC; + font-weight: 500; + color: #ffffff; + + .right-icon { + width: 10px; + height: 14px; + } + } + } + + .num-item:nth-child(2) { + margin-top: 10px; + } + } + } + } + + &-bottom { + box-sizing: border-box; + width: 100%; + height: calc(100% - 300px); + min-height: 300px; + margin-top: 60px; + + .pagination { + box-sizing: border-box; + margin-top: 20px; + width: 100%; + height: 40px; + display: flex; + justify-content: flex-end; + + /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active { + background: #0266d1; + color: #000d3f; + } + + /deep/ .el-pagination .el-pager li { + background: #002e74; + } + + /deep/ .el-pagination .btn-prev { + background: #002e74; + } + + /deep/ .el-pagination .btn-next { + background: #002e74; + } + } + } +} diff --git a/src/views/modules/visual/basicinfo/personCategory/index.vue b/src/views/modules/visual/basicinfo/personCategory/index.vue index 58fa0750..e1e9276f 100644 --- a/src/views/modules/visual/basicinfo/personCategory/index.vue +++ b/src/views/modules/visual/basicinfo/personCategory/index.vue @@ -1,8 +1,40 @@