Files
fe_service_ebtp_frontend/src/pages/HighQualityOperation/Home/index.less
2023-06-06 16:05:47 +08:00

881 lines
31 KiB
Plaintext

@import '~antd/es/style/themes/default.less';
.h-topic-global {
width: 100%;
display: flex;
justify-content: center;
background-color: #fff;
.topic-background {
width: 1460px;
// background-color: #e9e9e9;
.top-picture {
width: 100%;
padding-bottom: 10px;
}
.top-global {
display: flex;
justify-content: space-between;
.left-global {
width: 1204px;
padding: 0;
margin: 0;
.left-carousel {
.carousel-content {
height: 608px;
width: 1204px;
background-repeat: no-repeat;
background-size: 100%;
display: flex;
align-items: flex-end;
cursor: pointer;
.carousel-textbg {
display: flex;
justify-content: flex-start;
width: 100%;
padding: 38px 0 40px;
background: #0000008c;
.carousel-text {
color: #fff;
width: 940px;
text-align: center;
&>span {
font-weight: bold;
font-size: 32px;
line-height: 40px;
}
}
}
}
.carousel-content:hover {
-webkit-filter: brightness(105%);
filter: brightness(105%);
}
.slick-dots-bottom {
bottom: 48px;
}
.slick-dots {
justify-content: flex-start;
margin-left: 960px;
margin-right: 0;
}
.slick-dots li {
width: 24px;
}
.slick-dots li button {
height: 14px;
width: 14px;
border-radius: 50%;
opacity: 1;
}
.slick-dots li.slick-active button {
opacity: 1;
background: #e32f2f;
}
.slick-dots li button:hover,
.slick-dots li button:focus {
background: #e32f2f;
opacity: 0.75;
}
}
.left-activity {
height: 0;
width: 1204px;
}
.left-card {
.left-card-top {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 22px;
.left-card-title {
height: 60px;
background: linear-gradient(to right, #e32f2f, #fe8d8d) no-repeat center;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
text-align: center;
width: 252px;
&>span {
font-weight: bold;
font-family: '黑体';
font-size: 24px;
line-height: 60px;
color: #FFFFFF;
letter-spacing: 1px;
}
}
.left-card-content {
flex: 1;
border-bottom: 3px solid #fe8d8d;
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
.left-card-flag {
margin-left: 9px;
margin-top: 4px;
}
.left-card-other {
font-family: '黑体';
font-size: 18px;
color: #7a7a7a;
cursor: pointer;
}
.left-card-other:hover {
color: #e32f2f;
text-decoration: underline;
}
.left-card-icon {
color: #7a7a7a;
}
}
}
.left-project {
margin-top: 30px;
background: #fff;
.left-project-content {
display: flex;
justify-content: left;
.left-project-content-list {
margin-left: 40px;
width: 100%;
.left-project-content-item {
font-size: 14px;
font-family: '黑体';
line-height: 31px;
font-weight: 600;
display: flex;
justify-content: space-between;
width: 100%;
.left-project-content-item-title {
color: #4f4f4f
}
&>span {
color: #4f4f4f
}
.left-project-content-item-title:hover {
color: #e32f2f;
text-decoration: underline;
transition: all .2s cubic-bezier(.645, .045, .355, 1);
}
}
}
}
.left-project-content .ant-list-sm .ant-list-item {
padding: 0 0 0 16px;
border-bottom: 2px solid #e0e0e0;
}
.left-graceful-bg {
height: 204px;
width: 387px;
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: flex-end;
cursor: pointer;
.left-graceful-textbg {
height: 40px;
width: 387px;
background: linear-gradient(to right, #e32f2ff2, #e32f2f66) no-repeat center;
background-size: 100%;
display: flex;
justify-content: center;
align-items: center;
.left-graceful-text {
color: #fff;
font-size: 16.64px;
font-weight: bold;
}
}
}
.left-graceful-bg:hover {
-webkit-filter: brightness(108%);
filter: brightness(108%);
}
.left-classroom-bg {
height: 218px;
// height: 290px;
width: 387px;
cursor: pointer;
}
.left-classroom-bg:hover {
-webkit-filter: brightness(108%);
filter: brightness(108%);
}
.left-classroom-textbg {
height: 40px;
width: 387px;
margin-top: 14px;
text-align: center;
&>span {
color: #fd4e4f;
font-size: 16.64px;
font-weight: bold;
line-height: 16.64px;
cursor: pointer;
}
&>span:hover {
text-decoration: underline;
}
}
.bottom-select {
margin-bottom: 22px;
background: #fff0f0;
padding: 20px 0px 22px 24px;
.bottom-select-label {
font-size: 16px;
font-weight: 700;
font-family: "黑体";
display: block;
padding-left: 9px;
padding-bottom: 6px;
}
.ant-tag-checkable-checked {
background-color: #e32f2f;
}
.ant-tag-checkable:not(.ant-tag-checkable-checked):hover {
color: #e32f2f;
}
.ant-tag-checkable:active {
background-color: #e32f2f;
color: #FFFFFF !important;
}
}
.bottom-select .bottom-select-tag {
font-size: 14px;
padding: 0 9px;
line-height: 27px;
margin-right: 6px;
}
.bottom-content {
margin-bottom: 22px;
.bottom-card {
background-image: url("~@/assets/highQuality/card_picture.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
.bottom-card-title {
height: 40px;
padding-left: 20px;
background: linear-gradient(to right, #e32f2f, #fd9596) no-repeat center;
display: flex;
justify-content: space-between;
align-items: center;
&>span {
font-size: 20px;
font-weight: bold;
line-height: 40px;
color: #ffffff;
}
&>div>img {
margin-right: 13px;
cursor: pointer;
&:hover {
-webkit-filter: brightness(108%);
filter: brightness(108%);
}
}
}
.bottom-card-remark {
height: 36px;
padding-left: 20px;
}
.bottom-card-remark .bottom-card-remark-text {
color: #494949;
font-size: 16px;
font-weight: 700;
font-family: "黑体";
line-height: 36px;
}
.bottom-card-content {
padding-left: 20px;
padding-bottom: 6px;
padding-top: 10px;
&>p {
color: #494949;
margin-bottom: 2px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
}
.bottom-title {
font-size: 22px;
font-family: '黑体';
color: #838383;
margin-bottom: 12px;
}
.bottom-other {
display: flex;
justify-content: center;
.bottom-other-text {
font-family: '黑体';
font-size: 18px;
color: #7a7a7a;
cursor: pointer;
}
.bottom-other-text:hover {
color: #e32f2f;
text-decoration: underline;
}
.bottom-other-icon {
color: #7a7a7a;
}
}
}
}
}
.right-global {
background: #fff;
width: 100%;
margin-left: 28px;
display: flex;
flex-direction: column;
align-items: center;
.right-material {
cursor: pointer;
}
.right-material:hover {
-webkit-filter: brightness(108%);
filter: brightness(108%);
}
.right-display {
width: 100%;
padding: 14px 0 40px;
.right-display-title {
font-size: 14px;
color: #3f3f3f;
text-align: center;
font-weight: bold;
}
.right-display-content {
display: flex;
justify-content: flex-start;
margin-top: 20px;
margin-left: 26px;
.right-display-content-img {
height: 60px;
width: 60px;
}
.right-display-content-right {
margin-left: 16px;
.right-display-content-title {
color: #3f3f3f;
font-size: 14px;
font-weight: bold;
}
.right-display-content-content {
font-weight: bold;
margin-top: 4px;
.right-display-content-number {
font-size: 34px;
font-family: 'Consolas';
line-height: 34px;
}
.number-blue {
color: #26c3da;
}
.right-display-content-unit {
font-size: 28px;
line-height: 28px;
margin-left: 2px;
}
}
}
}
.right-display-content-pointer {
cursor: pointer;
}
}
.right-learn {
background-image: url("~@/assets/highQuality/learn.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
width: 100%;
height: 721px;
display: flex;
flex-direction: column;
align-items: center;
.right-learn-test {
height: 45px;
width: 200px;
border-radius: 9px;
background: linear-gradient(to top, #5867ff, #9189ff) no-repeat center;
text-align: center;
cursor: pointer;
&>span {
font-size: 20px;
line-height: 44px;
color: #FFFFFF;
font-weight: bold;
letter-spacing: 1px;
}
&:hover {
-webkit-filter: brightness(105%);
filter: brightness(105%);
}
}
.right-learn-exam {
.right-learn-test;
background: linear-gradient(to top, #9657ce, #df98f8) no-repeat center;
margin-top: 38px;
}
.right-learn-title {
.right-learn-test;
background: linear-gradient(to top, #fc9464, #fab696) no-repeat center;
margin: 14px 0;
}
.right-learn-rank {
.right-learn-rank-title {
width: 100%;
text-align: center;
padding: 10px 0;
&>span {
color: #fc4f50;
font-size: 16px;
font-weight: bold;
font-family: "黑体";
line-height: 16px;
letter-spacing: 1px;
}
}
.right-learn-rank-content {
height: 210px;
width: 196px;
background: #FFFFFF;
border-radius: 14px;
position: relative;
.rank-title {
height: 33px;
width: 100%;
background-color: #fd4e4f;
text-align: center;
border-top-left-radius: 14px;
border-top-right-radius: 14px;
&>span {
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
font-family: "黑体";
line-height: 32px;
letter-spacing: 1px;
}
}
.rank-title-people {
.rank-title;
background-color: #ff8534;
}
.rank-list {
padding: 4px 12px;
position: relative;
height: 156px;
overflow-y: auto;
// &::-webkit-scrollbar {
// display: none;
// }
/*设置宽度,轨道颜色*/
&::-webkit-scrollbar {
width: 6px;
height: 6px;
// padding-right: 3px;
}
/*滚动条*/
&::-webkit-scrollbar-thumb {
background: #cacfe6;
border-radius: 10px;
}
/*增加悬停样式*/
&::-webkit-scrollbar-thumb:hover {
background: #dcdfeb;
}
/*滚动轨道样式*/
&::-webkit-scrollbar-track-piece {
background: #eeeeee;
border-radius: 3px;
}
&>p {
margin-bottom: 0;
line-height: 29px;
border-bottom: 1px solid #ebebeb;
color: #9f9f9f;
font-family: "黑体";
font-size: 14px;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
&>span {
display: block;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.list-star {
position: absolute;
left: 6px;
}
.list-block {
width: 40px;
}
.list-person-block {
width: 30px;
}
.list-province {
width: 44px;
}
.list-score {
width: 50px;
}
.list-person-score {
width: 32px;
}
.list-name {
width: 60px;
}
.list-province-largh {
width: 70px;
}
.star1 {
background-image: url("~@/assets/highQuality/star1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
height: 21px;
width: 20px;
position: absolute;
left: 0;
top: 3px;
text-align: center;
line-height: 24px;
color: #FFFFFF;
font-weight: bold;
}
.star2 {
.star1;
background-image: url("~@/assets/highQuality/star2.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.star3 {
.star1;
background-image: url("~@/assets/highQuality/star3.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
}
&>p:last-child {
border-bottom: 0;
}
}
}
.right-learn-rank-content:last-child {
margin-top: 16px;
}
}
}
.right-card {
width: 100%;
.right-card-title {
text-align: center;
margin: 36px 0 5px;
&>span {
font-weight: bold;
font-family: '黑体';
font-size: 23px;
line-height: 24px;
color: #fd4e4f;
letter-spacing: 1px;
}
}
.right-card-title-line {
width: 100%;
height: 6px;
background: linear-gradient(to right, #fe837e, #fcc767) no-repeat center;
}
.right-card-title-click {
cursor: pointer;
}
.right-card-title-click:hover {
&>span {
background-image: linear-gradient(to right, #fe837e, #fcc767);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
transition: all .3s
}
}
.right-card-content {
height: 80px;
width: 100%;
border: 1px solid #e8e8e8;
border-radius: 8px;
display: flex;
justify-content: flex-start;
margin-top: 15px;
box-shadow: 0 0 8px -2px #d1d1d1;
.right-card-content-img {
padding: 17px 18px;
&>img {
height: 46px;
width: 46px;
}
}
.right-card-content-right {
padding: 17px 0;
.right-card-content-title {
display: block;
color: #848484;
font-size: 14px;
line-height: 14px;
letter-spacing: 0.5px;
}
.right-card-content-content {
font-weight: bold;
margin-top: 6px;
.right-card-content-number {
font-size: 28px;
font-family: 'Consolas';
line-height: 28px;
}
.number-green {
color: #26beb9;
}
.number-blue {
color: #76a3ff;
}
.right-card-content-unit {
font-size: 18px;
margin-left: 2px;
vertical-align: bottom;
color: #848484;
}
}
}
}
.right-card-content-pointer {
cursor: pointer;
}
}
}
}
.bottom-global {
margin: 0 0 84px 0;
}
}
}
.h-topic-home-modal .ant-modal-content {
border-radius: 8px;
}
.h-topic-home-modal .ant-modal-content .ant-modal-header {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
background: #e32f2f;
padding: 0;
height: 45px;
.bottom-modal-header {
display: flex;
justify-content: left;
align-items: center;
padding: 0 20px;
.bottom-modal-headertext {
font-size: 21px;
font-family: '黑体';
color: #fff;
width: 100%;
margin-left: 8px;
}
}
}
.h-topic-home-modal .ant-modal-content .ant-modal-body {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
background: #eeeeee;
padding: 16px;
}
.h-topic-home-modal .ant-modal-content .ant-modal-body .bottom-modal-body {
.ant-form-item {
margin-bottom: 16px;
}
.ant-form-item textarea {
resize: none;
}
.ant-form-item-label>label {
font-size: 17px;
font-family: '黑体';
color: #939393;
}
.radio-content {
font-size: 17px;
font-family: '黑体';
color: #939393;
}
.radio-content:last-child {
margin-right: 0;
}
.radio-right59 {
margin-right: 59px;
}
.radio-right41 {
margin-right: 41.5px;
}
.ant-input {
color: #333333;
}
.bottom-modal-submit {
text-align: center;
.submit-button {
background: #e32f2f;
border-color: #e32f2f;
}
}
}