diff --git a/css/index.css b/css/index.css index ea2d59f..e6280c7 100644 --- a/css/index.css +++ b/css/index.css @@ -2,6 +2,7 @@ padding: 0; margin: 0; box-sizing: border-box; + scroll-behavior: smooth; } .admission-officer { min-height: 100vh; @@ -51,12 +52,13 @@ transform: translateX(-50%); width: 1920px; height: 91px; + z-index: 1; } .admission-officer .admission-head .admission-head-gray::after { content: ""; position: absolute; top: 0; - right: 0; + right: 1px; height: 91px; width: calc((100vw - 1920px) / 2); background-color: #f6f6f6; @@ -66,7 +68,7 @@ content: ""; position: absolute; top: 0; - left: 0; + left: 1px; height: 91px; width: calc((100vw - 1920px) / 2); background-color: #f6f6f6; @@ -97,7 +99,7 @@ .admission-officer .admission-body .interview-box { width: 100%; height: 435px; - margin: 0 auto; + margin: 0 auto 22px; position: relative; z-index: 1; } @@ -112,6 +114,7 @@ .admission-officer .admission-body .interview-box .left { padding-top: 14px; padding-left: 20px; + margin-right: 20px; } .admission-officer .admission-body .interview-box .left .head { margin-bottom: 11px; @@ -151,6 +154,7 @@ width: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.047) 0%, #000000 100%); padding: 17px 22px 13px; + transition: all 0.3s; } .admission-officer .admission-body .interview-box .left .content .bottom .title { font-weight: 650; @@ -165,3 +169,516 @@ color: #ffffff; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; } +.admission-officer .admission-body .interview-box .focus-box { + width: 552px; + height: 293px; + background-color: #fbfbfb; + border-radius: 10px; + margin-top: 115px; + position: relative; +} +.admission-officer .admission-body .interview-box .focus-box .ok { + width: 101px; + height: 127px; + position: absolute; + top: -122px; + right: 45px; + z-index: -1; +} +.admission-officer .admission-body .interview-box .focus-box .head { + width: 100%; + height: 36px; + background-color: #dceed5; + border-radius: 10px 10px 0 0; +} +.admission-officer .admission-body .interview-box .focus-box .head .arrows { + width: 24px; + height: 24px; +} +.admission-officer .admission-body .interview-box .focus-box .head .name { + width: 79px; + height: 27px; + margin: 0 31px; +} +.admission-officer .admission-body .interview-box .focus-box .content { + height: 257px; +} +.admission-officer .admission-body .interview-box .focus-box .content .info { + border-right: 1px solid #ebebeb; + width: 193px; + padding: 25px 24px; +} +.admission-officer .admission-body .interview-box .focus-box .content .info .label { + position: relative; + z-index: 1; + width: 72px; + height: 21px; + font-weight: 650; + font-style: normal; + font-size: 15px; + color: #ffffff; + margin-bottom: 20px; +} +.admission-officer .admission-body .interview-box .focus-box .content .info .label .icon { + position: absolute; + z-index: -1; + width: 72px; + height: 21px; +} +.admission-officer .admission-body .interview-box .focus-box .content .info .name { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 20px; + color: #000000; + margin-bottom: 11px; +} +.admission-officer .admission-body .interview-box .focus-box .content .info .name .professional { + font-size: 14px; + color: #555555; + display: flex; + align-items: flex-end; + font-weight: 400; + margin-left: 6px; +} +.admission-officer .admission-body .interview-box .focus-box .content .info .subheading { + font-size: 14px; + color: #555555; + margin-bottom: 11px; +} +.admission-officer .admission-body .interview-box .focus-box .content .introduce-box { + flex-direction: column; + justify-content: space-between; + padding-bottom: 20px; + padding-top: 13px; +} +.admission-officer .admission-body .interview-box .focus-box .content .introduce-box .introduce-list { + padding-left: 49px; +} +.admission-officer .admission-body .interview-box .focus-box .content .introduce-box .introduce-list .introduce-item { + width: 291px; + font-size: 14px; + line-height: 33px; + color: #333333; + padding: 10px 0; + position: relative; +} +.admission-officer .admission-body .interview-box .focus-box .content .introduce-box .introduce-list .introduce-item::after { + content: ""; + width: 6px; + height: 6px; + background-color: #000000; + border-radius: 50%; + position: absolute; + top: 24px; + left: -16px; +} +.admission-officer .admission-body .interview-box .focus-box .content .introduce-box .introduce-list .introduce-item:not(:last-child) { + border-bottom: 1px dotted #d7d7d7; +} +.admission-officer .admission-body .interview-box .focus-box .content .introduce-box .play-btn { + width: 126px; + height: 34px; + background-color: #d35110; + border-radius: 86px; + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 16px; + color: #ffffff; + margin-left: auto; +} +.admission-officer .admission-body .interview-box .focus-box .content .introduce-box .play-btn .icon { + width: 20px; + height: 20px; + margin-left: 6px; +} +.admission-officer .admission-body .interview-more { + margin-bottom: 102px; +} +.admission-officer .admission-body .interview-more .case { + width: 139px; + height: 200px; + background-color: #76c45e; + border-radius: 10px; + flex-direction: column; + margin-right: 10px; +} +.admission-officer .admission-body .interview-more .case .name { + font-weight: 650; + font-style: normal; + font-size: 20px; + color: #ffffff; + margin-bottom: 9px; +} +.admission-officer .admission-body .interview-more .case .english { + font-size: 14px; + color: #ffffff; + text-align: center; +} +.admission-officer .admission-body .interview-more .swiper-box { + position: relative; +} +.admission-officer .admission-body .interview-more .swiper-box .btn { + width: 40px; + height: 40px; + background-color: rgba(255, 255, 255, 0.8); + position: absolute; + top: 50%; + transform: translateY(-50%); + z-index: 1; + border-radius: 50%; + cursor: pointer; + user-select: none; +} +.admission-officer .admission-body .interview-more .swiper-box .btn.left { + left: 10px; +} +.admission-officer .admission-body .interview-more .swiper-box .btn.right { + right: 10px; + transform: translateY(-50%) rotate(180deg); +} +.admission-officer .admission-body .interview-more .swiper-box .btn .arrows { + width: 13px; + height: 20px; +} +.admission-officer .admission-body .interview-more .swiper-box .swiper { + width: 1052px; + overflow: hidden; +} +.admission-officer .admission-body .interview-more .swiper-box .swiper .swiper-item { + width: 356px; + height: 200px; + position: relative; + border-radius: 10px; +} +.admission-officer .admission-body .interview-more .swiper-box .swiper .swiper-item:not(:last-child) { + margin-right: 10px; +} +.admission-officer .admission-body .interview-more .swiper-box .swiper .swiper-item .img { + width: 356px; + height: 200px; +} +.admission-officer .admission-body .interview-more .swiper-box .swiper .swiper-item .bottom { + position: absolute; + left: 0; + bottom: 0; + width: 100%; + background: linear-gradient(to bottom, rgba(0, 0, 0, 0.047) 0%, #000000 100%); + padding: 17px 22px 13px; + border-radius: 0 0 10px 10px; +} +.admission-officer .admission-body .interview-more .swiper-box .swiper .swiper-item .bottom .title { + font-weight: 650; + font-style: normal; + font-size: 16px; + color: #ffffff; + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + margin-bottom: 5px; +} +.admission-officer .admission-body .interview-more .swiper-box .swiper .swiper-item .bottom .subtitle { + font-size: 13px; + color: #ffffff; + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; +} +.admission-officer .admission-body .school-list { + margin-bottom: 90px; +} +.admission-officer .admission-body .school-list .school-item:not(:last-child) { + margin-bottom: 102px; +} +.admission-officer .admission-body .school-list .school-item .left { + position: relative; + margin-right: 45px; + z-index: 2; +} +.admission-officer .admission-body .school-list .school-item .left .abbreviation { + width: 100px; + height: 32px; + line-height: 32px; + background-color: #7d2882; + border-radius: 86px; + font-family: "Arial-Black", "Arial Black", sans-serif; + font-weight: 900; + font-style: normal; + color: #ffffff; + font-size: 13px; + display: inline-flex; + position: absolute; + top: 0; + left: 0; + z-index: 2; + text-align: center; +} +.admission-officer .admission-body .school-list .school-item .left .icon { + width: 130px; + height: 62px; + position: absolute; + top: 0; + left: 0; + z-index: 1; +} +.admission-officer .admission-body .school-list .school-item .right { + width: 651px; +} +.admission-officer .admission-body .school-list .school-item .right .info { + padding-bottom: 24px; + border-bottom: 1px dotted #d7d7d7; +} +.admission-officer .admission-body .school-list .school-item .right .info .img { + width: 60px; + height: 47px; + margin-right: 10px; +} +.admission-officer .admission-body .school-list .school-item .right .info .name { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 20px; + color: #000000; + margin-bottom: 6px; +} +.admission-officer .admission-body .school-list .school-item .right .info .english { + color: #555555; + font-size: 13px; + font-family: "ArialMT", "Arial", sans-serif; +} +.admission-officer .admission-body .school-list .school-item .right .introduce { + font-size: 14px; + color: #555555; + padding-top: 19px; + padding-bottom: 24px; +} +.admission-officer .admission-body .school-list .school-item .right .content { + padding-top: 27px; + padding-right: 20px; + padding-bottom: 31px; + position: relative; + z-index: 1; +} +.admission-officer .admission-body .school-list .school-item .right .content::after { + content: ""; + width: 1051px; + height: 100%; + background: -webkit-linear-gradient(0deg, #d6e5e5 0%, #f6f2ea 100%); + background: -moz-linear-gradient(90deg, #d6e5e5 0%, #f6f2ea 100%); + background: linear-gradient(90deg, #d6e5e5 0%, #f6f2ea 100%); + border-radius: 20px; + display: block; + position: absolute; + top: 0; + right: 0; + z-index: -1; +} +.admission-officer .admission-body .school-list .school-item .right .content .year { + margin-bottom: 24px; +} +.admission-officer .admission-body .school-list .school-item .right .content .year .item { + width: 100px; + height: 28px; + line-height: 28px; + position: relative; + font-size: 14px; + color: #333333; + text-align: center; + z-index: 1; + cursor: pointer; +} +.admission-officer .admission-body .school-list .school-item .right .content .year .item .svg { + width: 100px; + height: 28px; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} +.admission-officer .admission-body .school-list .school-item .right .content .year .item.pitch { + color: #ffffff; + font-weight: 650; +} +.admission-officer .admission-body .school-list .school-item .right .content .year .item.pitch .svg { + fill: #7d2882; +} +.admission-officer .admission-body .school-list .school-item .right .content .year .item .arrows { + transform: translateY(-50%); + width: 9px; + height: 5px; + margin-left: 5px; + vertical-align: middle; +} +.admission-officer .admission-body .school-list .school-item .right .content .year .item:hover .more-box { + display: block; +} +.admission-officer .admission-body .school-list .school-item .right .content .year .item .more-box { + display: none; + border-radius: 7px; + background: #fff; + position: absolute; + width: 100%; + top: 32px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.118); +} +.admission-officer .admission-body .school-list .school-item .right .content .year .item .more-box::after { + content: ""; + width: 100%; + height: 10px; + display: block; + top: 0; + position: absolute; + transform: translateY(-100%); + z-index: -1; +} +.admission-officer .admission-body .school-list .school-item .right .content .year .item .more-box .more-item { + height: 32px; + line-height: 32px; +} +.admission-officer .admission-body .school-list .school-item .right .content .year .item .more-box .more-item:hover { + text-decoration: underline; +} +.admission-officer .admission-body .school-list .school-item .right .content .year .item .more-box .more-item:not(:last-child) { + border-bottom: 1px dotted #d7d7d7; +} +.admission-officer .admission-body .school-list .school-item .right .content .course-list .item { + padding: 12px 10px 10px 20px; + background-color: #ffffff; + border-radius: 10px; +} +.admission-officer .admission-body .school-list .school-item .right .content .course-list .item:not(:last-child) { + margin-bottom: 10px; +} +.admission-officer .admission-body .school-list .school-item .right .content .course-list .item .icon { + width: 28px; + height: 28px; + background-color: #f3f4f8; + border-radius: 50%; + margin-right: 10px; +} +.admission-officer .admission-body .school-list .school-item .right .content .course-list .item .icon .img { + width: 20px; + height: 20px; +} +.admission-officer .admission-body .school-list .school-item .right .content .course-list .item .name { + font-size: 16px; + color: #333333; + margin-bottom: 8px; +} +.admission-officer .admission-body .school-list .school-item .right .content .course-list .item .name .label { + width: 120px; + height: 26px; + line-height: 26px; + background-color: #3c7de9; + border-radius: 3px; + position: relative; + color: #ffffff; + font-size: 13px; + font-family: "ArialMT", "Arial", sans-serif; + padding: 0 6px; + margin-left: 12px; +} +.admission-officer .admission-body .school-list .school-item .right .content .course-list .item .name .label .arrows { + position: absolute; + width: 9px; + height: 16px; + top: 50%; + transform: translateY(-50%) rotate(180deg); + left: -4px; +} +.admission-officer .admission-body .school-list .school-item .right .content .course-list .item .bottom { + justify-content: space-between; +} +.admission-officer .admission-body .school-list .school-item .right .content .course-list .item .bottom .time { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 14px; + color: #000000; +} +.admission-officer .admission-body .school-list .school-item .right .content .course-list .item .bottom .btn { + width: 100px; + height: 32px; + line-height: 32px; + background-color: #7d2882; + border-radius: 86px; + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 14px; + color: #ffffff; + cursor: pointer; +} +.admission-officer .admission-body .school-list .school-item .right .content .course-list .item .bottom .btn .arrows { + width: 12px; + height: 12px; + margin-left: 7px; +} +.admission-officer .admission-body .retrospect { + padding-bottom: 108px; +} +.admission-officer .admission-body .retrospect .more-icon { + width: 112px; + height: 40px; + margin-bottom: 30px; +} +.admission-officer .admission-body .retrospect .list { + flex-wrap: wrap; +} +.admission-officer .admission-body .retrospect .list .item { + width: 392px; + height: 180px; + border-radius: 15px; + background: linear-gradient(90deg, #d6e5e5 0%, rgba(246, 242, 234, 0.988) 100%); + align-items: flex-start; + padding: 20px; + margin-bottom: 12px; + margin-right: 12px; +} +.admission-officer .admission-body .retrospect .list .item:nth-child(3n) { + margin-right: 0; +} +.admission-officer .admission-body .retrospect .list .item .img { + width: 47px; + margin-right: 10px; +} +.admission-officer .admission-body .retrospect .list .item .right .name { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 20px; + color: #000000; + margin-bottom: 2px; +} +.admission-officer .admission-body .retrospect .list .item .right .english { + color: #555555; + font-size: 13px; + margin-bottom: 22px; +} +.admission-officer .admission-body .retrospect .list .item .right .year { + flex-wrap: wrap; +} +.admission-officer .admission-body .retrospect .list .item .right .year .year-item { + width: 80px; + height: 24px; + line-height: 24px; + position: relative; + font-size: 14px; + color: #333333; + text-align: center; + z-index: 1; + cursor: pointer; + margin-bottom: 10px; +} +.admission-officer .admission-body .retrospect .list .item .right .year .year-item .svg { + width: 80px; + height: 24px; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} +.admission-officer .admission-body .retrospect .list .item .right .year .year-item .arrows { + transform: translateY(-50%); + width: 9px; + height: 5px; + margin-left: 5px; + vertical-align: middle; +} diff --git a/css/index.less b/css/index.less index 79a1974..a01bccb 100644 --- a/css/index.less +++ b/css/index.less @@ -2,6 +2,7 @@ padding: 0; margin: 0; box-sizing: border-box; + scroll-behavior: smooth; } .admission-officer { min-height: 100vh; @@ -56,12 +57,13 @@ transform: translateX(-50%); width: 1920px; height: 91px; + z-index: 1; &::after { content: ""; position: absolute; top: 0; - right: 0; + right: 1px; height: 91px; width: calc((100vw - 1920px) / 2); background-color: #f6f6f6; @@ -72,7 +74,7 @@ content: ""; position: absolute; top: 0; - left: 0; + left: 1px; height: 91px; width: calc((100vw - 1920px) / 2); background-color: #f6f6f6; @@ -107,9 +109,10 @@ .interview-box { width: 100%; height: 435px; - margin: 0 auto; + margin: 0 auto 22px; position: relative; z-index: 1; + .bj { width: 100%; height: 435px; @@ -122,6 +125,8 @@ .left { padding-top: 14px; padding-left: 20px; + margin-right: 20px; + .head { margin-bottom: 11px; .icon { @@ -160,6 +165,8 @@ width: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.047) 0%, rgba(0, 0, 0, 1) 100%); padding: 17px 22px 13px; + transition: all 0.3s; + .title { font-weight: 650; font-style: normal; @@ -177,6 +184,582 @@ } } } + + .focus-box { + width: 552px; + height: 293px; + background-color: rgba(251, 251, 251, 1); + border-radius: 10px; + margin-top: 115px; + position: relative; + .ok { + width: 101px; + height: 127px; + position: absolute; + top: -122px; + right: 45px; + z-index: -1; + } + + .head { + width: 100%; + height: 36px; + background-color: rgba(220, 238, 213, 1); + border-radius: 10px 10px 0 0; + + .arrows { + width: 24px; + height: 24px; + } + + .name { + width: 79px; + height: 27px; + margin: 0 31px; + } + } + + .content { + height: 257px; + .info { + border-right: 1px solid #ebebeb; + width: 193px; + padding: 25px 24px; + + .label { + position: relative; + z-index: 1; + width: 72px; + height: 21px; + font-weight: 650; + font-style: normal; + font-size: 15px; + color: #ffffff; + margin-bottom: 20px; + + .icon { + position: absolute; + z-index: -1; + width: 72px; + height: 21px; + } + } + + .name { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 20px; + color: #000000; + margin-bottom: 11px; + + .professional { + font-size: 14px; + color: #555555; + display: flex; + align-items: flex-end; + font-weight: 400; + margin-left: 6px; + } + } + + .subheading { + font-size: 14px; + color: #555555; + margin-bottom: 11px; + } + } + .introduce-box { + flex-direction: column; + justify-content: space-between; + padding-bottom: 20px; + padding-top: 13px; + + .introduce-list { + padding-left: 49px; + .introduce-item { + width: 291px; + font-size: 14px; + line-height: 33px; + color: #333333; + padding: 10px 0; + position: relative; + &::after { + content: ""; + width: 6px; + height: 6px; + background-color: #000000; + border-radius: 50%; + position: absolute; + top: 24px; + left: -16px; + } + &:not(:last-child) { + border-bottom: 1px dotted #d7d7d7; + } + } + } + + .play-btn { + width: 126px; + height: 34px; + background-color: rgba(211, 81, 16, 1); + border-radius: 86px; + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 16px; + color: #ffffff; + margin-left: auto; + .icon { + width: 20px; + height: 20px; + margin-left: 6px; + } + } + } + } + } + } + + .interview-more { + margin-bottom: 102px; + + .case { + width: 139px; + height: 200px; + background-color: rgba(118, 196, 94, 1); + border-radius: 10px; + flex-direction: column; + margin-right: 10px; + + .name { + font-weight: 650; + font-style: normal; + font-size: 20px; + color: #ffffff; + margin-bottom: 9px; + } + + .english { + font-size: 14px; + color: #ffffff; + text-align: center; + } + } + + .swiper-box { + position: relative; + .btn { + width: 40px; + height: 40px; + background-color: rgba(255, 255, 255, 0.8); + position: absolute; + top: 50%; + transform: translateY(-50%); + z-index: 1; + border-radius: 50%; + cursor: pointer; + user-select: none; + + &.left { + left: 10px; + } + + &.right { + right: 10px; + transform: translateY(-50%) rotate(180deg); + } + + .arrows { + width: 13px; + height: 20px; + } + } + + .swiper { + width: 1052px; + overflow: hidden; + + .swiper-item { + width: 356px; + height: 200px; + position: relative; + border-radius: 10px; + // overflow-x: auto; + &:not(:last-child) { + margin-right: 10px; + } + + .img { + width: 356px; + height: 200px; + } + + .bottom { + position: absolute; + left: 0; + bottom: 0; + width: 100%; + background: linear-gradient(to bottom, rgba(0, 0, 0, 0.047) 0%, rgba(0, 0, 0, 1) 100%); + padding: 17px 22px 13px; + border-radius: 0 0 10px 10px; + .title { + font-weight: 650; + font-style: normal; + font-size: 16px; + color: #ffffff; + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + margin-bottom: 5px; + } + + .subtitle { + font-size: 13px; + color: #ffffff; + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + } + } + } + } + } + } + + .school-list { + margin-bottom: 90px; + .school-item { + &:not(:last-child) { + margin-bottom: 102px; + } + .left { + position: relative; + margin-right: 45px; + z-index: 2; + .abbreviation { + width: 100px; + height: 32px; + line-height: 32px; + background-color: rgba(125, 40, 130, 1); + border-radius: 86px; + font-family: "Arial-Black", "Arial Black", sans-serif; + font-weight: 900; + font-style: normal; + color: #ffffff; + font-size: 13px; + display: inline-flex; + position: absolute; + top: 0; + left: 0; + z-index: 2; + text-align: center; + } + + .icon { + width: 130px; + height: 62px; + position: absolute; + top: 0; + left: 0; + z-index: 1; + } + } + .right { + width: 651px; + .info { + padding-bottom: 24px; + border-bottom: 1px dotted #d7d7d7; + .img { + width: 60px; + height: 47px; + margin-right: 10px; + } + + .name { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 20px; + color: #000000; + margin-bottom: 6px; + } + + .english { + color: #555555; + font-size: 13px; + font-family: "ArialMT", "Arial", sans-serif; + } + } + + .introduce { + font-size: 14px; + color: #555555; + padding-top: 19px; + padding-bottom: 24px; + } + + .content { + padding-top: 27px; + padding-right: 20px; + padding-bottom: 31px; + position: relative; + z-index: 1; + &::after { + content: ""; + width: 1051px; + height: 100%; + background: -webkit-linear-gradient(0deg, rgba(214, 229, 229, 1) 0%, rgba(246, 242, 234, 1) 100%); + background: -moz-linear-gradient(90deg, rgba(214, 229, 229, 1) 0%, rgba(246, 242, 234, 1) 100%); + background: linear-gradient(90deg, rgba(214, 229, 229, 1) 0%, rgba(246, 242, 234, 1) 100%); + border-radius: 20px; + display: block; + position: absolute; + top: 0; + right: 0; + z-index: -1; + } + + .year { + margin-bottom: 24px; + .item { + width: 100px; + height: 28px; + line-height: 28px; + position: relative; + font-size: 14px; + color: #333333; + text-align: center; + z-index: 1; + cursor: pointer; + .svg { + width: 100px; + height: 28px; + position: absolute; + top: 0; + left: 0; + z-index: -1; + } + + &.pitch { + color: #ffffff; + font-weight: 650; + .svg { + fill: #7d2882; + } + } + + .arrows { + transform: translateY(-50%); + width: 9px; + height: 5px; + margin-left: 5px; + vertical-align: middle; + } + + &:hover { + .more-box { + display: block; + } + } + + .more-box { + display: none; + border-radius: 7px; + background: #fff; + position: absolute; + width: 100%; + top: 32px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.118); + &::after { + content: ""; + width: 100%; + height: 10px; + display: block; + top: 0; + position: absolute; + transform: translateY(-100%); + z-index: -1; + } + .more-item { + height: 32px; + line-height: 32px; + + &:hover { + text-decoration: underline; + } + + &:not(:last-child) { + border-bottom: 1px dotted #d7d7d7; + } + } + } + } + } + + .course-list { + .item { + padding: 12px 10px 10px 20px; + background-color: #ffffff; + border-radius: 10px; + + &:not(:last-child) { + margin-bottom: 10px; + } + + .icon { + width: 28px; + height: 28px; + background-color: #f3f4f8; + border-radius: 50%; + margin-right: 10px; + .img { + width: 20px; + height: 20px; + } + } + + .name { + font-size: 16px; + color: #333333; + margin-bottom: 8px; + .label { + width: 120px; + height: 26px; + line-height: 26px; + background-color: rgba(60, 125, 233, 1); + border-radius: 3px; + position: relative; + color: #ffffff; + font-size: 13px; + font-family: "ArialMT", "Arial", sans-serif; + padding: 0 6px; + margin-left: 12px; + + .arrows { + position: absolute; + width: 9px; + height: 16px; + top: 50%; + transform: translateY(-50%) rotate(180deg); + left: -4px; + } + } + } + + .bottom { + justify-content: space-between; + .time { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 14px; + color: #000000; + } + .btn { + width: 100px; + height: 32px; + line-height: 32px; + background-color: rgba(125, 40, 130, 1); + border-radius: 86px; + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 14px; + color: #ffffff; + cursor: pointer; + + .arrows { + width: 12px; + height: 12px; + margin-left: 7px; + } + } + } + } + } + } + } + } + } + + .retrospect { + padding-bottom: 108px; + + .more-icon { + width: 112px; + height: 40px; + margin-bottom: 30px; + } + + .list { + flex-wrap: wrap; + .item { + width: 392px; + height: 180px; + border-radius: 15px; + background: linear-gradient(90deg, #d6e5e5 0%, rgba(246, 242, 234, 0.988) 100%); + align-items: flex-start; + padding: 20px; + margin-bottom: 12px; + + margin-right: 12px; + + &:nth-child(3n) { + margin-right: 0; + } + + .img { + width: 47px; + margin-right: 10px; + } + + .right { + .name { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 20px; + color: #000000; + margin-bottom: 2px; + } + + .english { + color: #555555; + font-size: 13px; + margin-bottom: 22px; + } + + .year { + flex-wrap: wrap; + .year-item { + width: 80px; + height: 24px; + line-height: 24px; + position: relative; + font-size: 14px; + color: #333333; + text-align: center; + z-index: 1; + cursor: pointer; + margin-bottom: 10px; + .svg { + width: 80px; + height: 24px; + position: absolute; + top: 0; + left: 0; + z-index: -1; + } + .arrows { + transform: translateY(-50%); + width: 9px; + height: 5px; + margin-left: 5px; + vertical-align: middle; + } + } + } + } + } + } } } } diff --git a/img/arrows-black.svg b/img/arrows-black.svg new file mode 100644 index 0000000..2c6e27c --- /dev/null +++ b/img/arrows-black.svg @@ -0,0 +1,6 @@ + + \ No newline at end of file diff --git a/img/arrows-circle-white.svg b/img/arrows-circle-white.svg new file mode 100644 index 0000000..1e41cdd --- /dev/null +++ b/img/arrows-circle-white.svg @@ -0,0 +1,6 @@ + + \ No newline at end of file diff --git a/img/arrows-three-black.png b/img/arrows-three-black.png new file mode 100644 index 0000000..c6338e6 Binary files /dev/null and b/img/arrows-three-black.png differ diff --git a/img/arrows-triangle-black.svg b/img/arrows-triangle-black.svg new file mode 100644 index 0000000..69bf8fd --- /dev/null +++ b/img/arrows-triangle-black.svg @@ -0,0 +1,6 @@ + + \ No newline at end of file diff --git a/img/arrows-triangle-blue.svg b/img/arrows-triangle-blue.svg new file mode 100644 index 0000000..5fb6504 --- /dev/null +++ b/img/arrows-triangle-blue.svg @@ -0,0 +1,6 @@ + + \ No newline at end of file diff --git a/img/course-icon.png b/img/course-icon.png new file mode 100644 index 0000000..d78104b Binary files /dev/null and b/img/course-icon.png differ diff --git a/img/focus-name.png b/img/focus-name.png new file mode 100644 index 0000000..8024347 Binary files /dev/null and b/img/focus-name.png differ diff --git a/img/malformation-icon.svg b/img/malformation-icon.svg new file mode 100644 index 0000000..f2c9c3c --- /dev/null +++ b/img/malformation-icon.svg @@ -0,0 +1,6 @@ + + \ No newline at end of file diff --git a/img/more-name.png b/img/more-name.png new file mode 100644 index 0000000..e080be3 Binary files /dev/null and b/img/more-name.png differ diff --git a/img/ok.png b/img/ok.png new file mode 100644 index 0000000..48c791f Binary files /dev/null and b/img/ok.png differ diff --git a/img/quadrangle-blue.svg b/img/quadrangle-blue.svg new file mode 100644 index 0000000..89e348a --- /dev/null +++ b/img/quadrangle-blue.svg @@ -0,0 +1,6 @@ + + \ No newline at end of file diff --git a/img/time-icon.png b/img/time-icon.png new file mode 100644 index 0000000..e2d891e Binary files /dev/null and b/img/time-icon.png differ diff --git a/index.html b/index.html index f7052fd..138fa44 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@
-