diff --git a/01-index/index.less b/01-index/index.less deleted file mode 100644 index e0bfe71..0000000 --- a/01-index/index.less +++ /dev/null @@ -1,760 +0,0 @@ -* { - padding: 0; - margin: 0; - box-sizing: border-box; -} - -.flexflex { - display: flex; -} - -.flexcenter { - display: flex; - justify-content: center; - align-items: center; -} - -.flexjcenter { - display: flex; - justify-content: center; -} - -.flexacenter { - display: flex; - align-items: center; -} - -.flex1 { - flex: 1; -} - -.flexcolumn { - display: flex; - flex-direction: column; -} - -body { - background-color: rgba(238, 242, 245, 1); - font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; -} - -.main { - width: 1200px; - margin: 0 auto; - .index-icon { - width: 184px; - height: 42px; - margin-top: 37px; - margin-bottom: 40px; - } - - .header-box { - width: 100%; - height: 130px; - padding: 0 50px; - border-radius: 12px; - justify-content: space-between; - position: relative; - margin-bottom: 20px; - - &:before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border-radius: 12px; - background-image: linear-gradient(to right, rgba(60, 26, 94, 0.717647), rgba(53, 60, 90, 0.886275)); - z-index: -1; - } - - .bj { - position: absolute; - top: 0; - left: 0; - z-index: -2; - } - - .search { - width: 610px; - height: 48px; - background-color: rgba(255, 255, 255, 0.4); - border-radius: 183px; - padding: 0 20px; - cursor: pointer; - .input { - height: 48px; - line-height: 48px; - background-color: transparent; - color: #ffffff; - } - - .search-icon { - width: 22px; - height: 22px; - } - } - - .btn { - .item { - width: 160px; - height: 40px; - background: -webkit-linear-gradient(194.036243467926deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); - background: -moz-linear-gradient(255.963756532074deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); - background: linear-gradient(255.963756532074deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); - border-radius: 70px; - margin-left: 20px; - font-size: 16px; - color: #000000; - cursor: pointer; - - .icon { - height: 22px; - margin-right: 8px; - } - } - } - } - .screen { - margin-bottom: 20px; - - .block { - // height: 250px; - background-color: rgba(255, 255, 255, 1); - border-radius: 12px; - padding: 24px 34px 32px; - - .title { - font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; - font-weight: 650; - font-size: 18px; - color: #000000; - margin-bottom: 26px; - - .icon { - width: 40px; - height: 40px; - border-radius: 50%; - margin-right: 10px; - .img { - width: 24px; - } - } - } - - .list { - .item { - width: fit-content; - height: 36px; - line-height: 36px; - background-color: rgba(251, 251, 251, 1); - border: 1px solid rgba(235, 235, 235, 1); - border-radius: 12px; - font-size: 14px; - color: #333; - cursor: pointer; - } - } - - &.school { - width: 500px; - margin-right: 20px; - .title { - .icon { - background-color: rgb(213, 241, 247); - } - } - - .list { - display: grid; - grid-template-columns: repeat(5, 1fr); - gap: 10px; - .item { - width: 78px; - } - } - } - - &.subject { - padding-bottom: 22px; - .title { - .icon { - background-color: rgb(253, 239, 188); - } - } - - .list { - flex-wrap: wrap; - .item { - padding: 0 17px; - margin-right: 10px; - margin-bottom: 10px; - } - } - } - } - } - - .fate { - width: 100%; - background-color: rgba(255, 255, 255, 1); - border-radius: 12px; - margin-bottom: 20px; - padding: 31px 37px 10px; - - .title { - justify-content: space-between; - font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; - font-weight: 650; - font-size: 18px; - color: #000000; - margin-bottom: 6px; - - .btn { - font-weight: 400; - color: #555555; - font-size: 14px; - cursor: pointer; - - .icon { - width: 16px; - height: 16px; - margin-right: 8px; - } - } - } - - .list { - justify-content: space-between; - flex-wrap: wrap; - .item { - width: 530px; - margin-left: 20px; - padding-top: 22px; - padding-bottom: 22px; - justify-content: space-between; - &:not(:nth-last-child(-n + 2)) { - border-bottom: 1px dotted rgb(235, 235, 235); - } - .left { - .name { - font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; - font-weight: 400; - font-size: 16px; - color: #000000; - margin-bottom: 6px; - - position: relative; - - &::after { - content: ""; - position: absolute; - top: 50%; - left: -20px; - transform: translateY(-50%); - width: 8px; - height: 8px; - background-color: rgba(242, 242, 242, 1); - border: 1px solid rgba(215, 215, 215, 1); - border-radius: 39px; - } - } - .message { - color: #7f7f7f; - font-size: 14px; - .virgule { - color: #d7d7d7; - } - } - } - .btn { - width: 110px; - height: 32px; - background: -webkit-linear-gradient(196.220193695603deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); - background: -moz-linear-gradient(253.779806304397deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); - background: linear-gradient(253.779806304397deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); - border-radius: 61px; - font-size: 14px; - color: #000000; - cursor: pointer; - .add { - width: 24px; - height: 24px; - background-color: rgba(255, 255, 255, 1); - border: 1px solid rgba(219, 227, 253, 1); - border-radius: 20px; - margin: 0 3px; - .icon { - width: 10px; - height: 10px; - } - } - } - } - } - } - - .recruit { - width: 100%; - height: 502px; - background: linear-gradient(-36.4940455615096deg, rgba(207, 224, 249, 1) -23%, rgba(241, 242, 223, 1) 39%, rgba(238, 247, 245, 1) 114%); - border: 1px solid rgba(235, 235, 235, 1); - border-radius: 16px; - padding: 24px 30px 24px; - margin-bottom: 20px; - - .title { - justify-content: space-between; - margin-bottom: 20px; - .img { - width: 100px; - height: 26px; - } - .btn { - font-size: 14px; - color: #333333; - cursor: pointer; - .icon { - width: 16px; - height: 16px; - margin-left: 7px; - transform: rotate(270deg); - } - } - } - .list { - overflow: hidden; - margin-bottom: 20px; - .list-item { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 10px; - } - .item { - width: 565px; - height: 180px; - background-color: rgba(255, 255, 255, 1); - border: 1px solid rgba(235, 235, 235, 1); - border-radius: 12px; - // padding-top: 25px; - padding: 25px 24px; - align-items: flex-start; - position: relative; - .avatar { - width: 32px; - object-fit: contain; - margin-right: 10px; - } - .info { - .school { - font-size: 14px; - color: #333333; - margin-bottom: 10px; - } - .name { - font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; - font-weight: 650; - font-size: 16px; - color: #000000; - margin-bottom: 10px; - } - .name-en { - font-size: 14px; - color: #7f7f7f; - margin-bottom: 15px; - } - - .aq { - width: 477px; - height: 36px; - line-height: 36px; - background-color: rgba(249, 248, 248, 1); - border-radius: 3px; - padding: 0 10px; - .text { - font-size: 14px; - color: #e4c762; - margin-right: 10px; - } - .value { - font-size: 15px; - color: #333333; - } - .icon { - width: 20px; - height: 20px; - } - } - } - - .operate { - // height: 80px; - position: relative; - position: absolute; - top: 24px; - right: 24px; - .circle { - position: relative; - z-index: 1; - cursor: pointer; - width: 28px; - height: 28px; - background-color: rgba(219, 227, 253, 1); - border: 1px solid rgba(175, 181, 202, 1); - border-radius: 20px; - .img-add { - width: 12px; - height: 12px; - } - .img-dot { - width: 18px; - height: 8px; - } - } - .select { - position: absolute; - right: -24px; - top: -24px; - background-color: rgba(251, 251, 251, 1); - border-radius: 8px; - -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.180392156862745); - -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.180392156862745); - box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.180392156862745); - flex-direction: column; - transition: all 0.3s; - overflow: hidden; - opacity: 0; - height: 0; - width: 300px; - &.show { - height: 180px; - opacity: 1; - } - flex-direction: column; - align-items: center; - - // .top { - // flex-direction: column; - .title { - .dot { - width: 8px; - height: 8px; - border-radius: 50%; - border: 1px solid rgb(202, 177, 87); - background-color: rgb(253, 223, 109); - margin-right: 5px; - } - - font-size: 14px; - color: #7f7f7f; - margin-top: 75px; - margin-bottom: 19px; - } - - .btn { - cursor: pointer; - width: 144px; - height: 36px; - background: -webkit-linear-gradient(194.036243467926deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); - background: -moz-linear-gradient(255.963756532074deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); - background: linear-gradient(255.963756532074deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); - border-radius: 158px; - - font-size: 14px; - color: #333333; - - .img { - width: 16px; - height: 16px; - margin-right: 8px; - } - } - // } - } - .already { - font-size: 14px; - color: #7f7f7f; - .tick-box { - width: 20px; - height: 20px; - background-color: rgba(246, 246, 246, 1); - border: 1px solid rgba(215, 215, 215, 1); - border-radius: 20px; - margin-right: 5px; - - .img-tick { - width: 10px; - height: 8px; - } - } - } - } - } - } - - .indicate { - line-height: 12px; - - .icon { - width: 7px; - height: 12px; - cursor: pointer; - } - .text { - color: #555555; - font-size: 13px; - margin: 0 12px; - } - } - } - - .data { - .fall { - width: 285px; - display: block; - } - - .item { - width: 285px; - background-color: rgba(255, 255, 255, 1); - border: 1px solid rgba(235, 235, 235, 1); - border-radius: 12px; - padding: 21px 15px 0; - - .school { - .img { - height: 20px; - margin-right: 8px; - } - font-size: 14px; - color: #333333; - margin-bottom: 12px; - } - - .name { - font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; - font-weight: 650; - font-style: normal; - font-size: 16px; - color: #000000; - margin-bottom: 12px; - } - - .name-en { - font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; - font-weight: 400; - font-style: normal; - font-size: 14px; - color: #555555; - margin-bottom: 12px; - } - .introduce { - color: #555555; - font-size: 14px; - margin-bottom: 12px; - .quantity { - font-family: "Arial-Black", "Arial Black", sans-serif; - font-weight: 900; - color: #000000; - margin-left: 8px; - } - .line { - color: #d7d7d7; - margin: 0 10px; - } - } - .word { - background-color: rgba(249, 248, 248, 1); - border-radius: 3px; - padding: 10px 15px; - font-size: 14px; - color: #7f7f7f; - margin-bottom: 12px; - } - .tag { - .tag-item { - width: fit-content; - height: 24px; - line-height: 24px; - background-color: rgba(249, 248, 248, 1); - border: 1px solid rgba(170, 170, 170, 1); - border-radius: 6px; - padding: 0 9px; - font-size: 14px; - color: #7f7f7f; - margin-right: 10px; - - &.gray { - background-color: rgba(51, 51, 51, 1); - color: #ffffff; - } - - &.semester { - color: #ffffff; - background-color: rgba(249, 93, 93, 1); - } - } - } - .operate { - height: 80px; - position: relative; - .circle { - position: relative; - z-index: 1; - cursor: pointer; - width: 28px; - height: 28px; - background-color: rgba(219, 227, 253, 1); - border: 1px solid rgba(175, 181, 202, 1); - border-radius: 20px; - .img-add { - width: 12px; - height: 12px; - } - .img-dot { - width: 18px; - height: 8px; - } - } - .select { - position: absolute; - bottom: 0; - width: 285px; - background-color: rgba(251, 251, 251, 1); - border-radius: 8px; - -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.180392156862745); - -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.180392156862745); - box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.180392156862745); - flex-direction: column; - transition: all 0.3s; - overflow: hidden; - opacity: 0; - height: 0; - &.show { - height: 211px; - opacity: 1; - } - .top { - flex-direction: column; - .title { - .dot { - width: 8px; - height: 8px; - border-radius: 50%; - border: 1px solid rgb(202, 177, 87); - background-color: rgb(253, 223, 109); - margin-right: 5px; - } - - font-size: 14px; - color: #7f7f7f; - margin-bottom: 19px; - } - - .btn { - cursor: pointer; - width: 144px; - height: 36px; - background: -webkit-linear-gradient(194.036243467926deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); - background: -moz-linear-gradient(255.963756532074deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); - background: linear-gradient(255.963756532074deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); - border-radius: 158px; - - font-size: 14px; - color: #333333; - - .img { - width: 16px; - height: 16px; - margin-right: 8px; - } - } - } - .bottom { - border-top: 1px dotted #ebebeb; - height: 80px; - } - } - .already { - font-size: 14px; - color: #7f7f7f; - .tick-box { - width: 20px; - height: 20px; - background-color: rgba(246, 246, 246, 1); - border: 1px solid rgba(215, 215, 215, 1); - border-radius: 20px; - margin-right: 5px; - - .img-tick { - width: 10px; - height: 8px; - } - } - } - } - } - } - - .base { - width: 640px; - height: 60px; - background-color: rgba(123, 140, 211, 1); - border-radius: 153px; - position: fixed; - bottom: 15px; - left: 50%; - transform: translateX(-50%); - .left { - width: 450px; - height: 50px; - background-color: #fff; - border-radius: 153px 15px 15px 153px; - margin-right: 5px; - padding: 0 20px; - .text { - font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; - font-weight: 400; - font-style: normal; - font-size: 16px; - color: rgba(170, 170, 170, 0.901960784313726); - } - - .img { - width: 20px; - height: 20px; - } - } - - .rigth { - width: 175px; - height: 50px; - background-color: #fff; - border-radius: 15px 153px 153px 15px; - padding-left: 19px; - - .img { - width: 25px; - height: 22px; - margin-right: 5px; - } - - .text { - font-size: 16px; - color: #333333; - margin-right: 9px; - } - - .number { - height: 20px; - line-height: 20px; - background-color: rgba(242, 242, 242, 1); - border-radius: 150px; - font-size: 13px; - color: #f95d5d; - padding: 0 8px; - } - } - } -} diff --git a/02-school/school.less b/02-school/school.less deleted file mode 100644 index 2f20205..0000000 --- a/02-school/school.less +++ /dev/null @@ -1,786 +0,0 @@ -* { - padding: 0; - margin: 0; - box-sizing: border-box; -} - -.flexflex { - display: flex; -} - -.flexcenter { - display: flex; - justify-content: center; - align-items: center; -} - -.flexjcenter { - display: flex; - justify-content: center; -} - -.flexacenter { - display: flex; - align-items: center; -} - -.flex1 { - flex: 1; -} - -.flexcolumn { - display: flex; - flex-direction: column; -} - -body { - background-color: rgba(238, 242, 245, 1); - font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; -} - -.main { - width: 1200px; - margin: 0 auto; - - .index-icon { - width: 184px; - height: 42px; - margin-top: 37px; - margin-bottom: 40px; - } - - .box { - width: 1200px; - height: 396px; - background-color: rgba(251, 251, 251, 1); - border-radius: 12px; - position: relative; - margin-bottom: 20px; - - &::after { - content: ""; - position: absolute; - top: -5px; - left: 0; - width: 100%; - height: 66px; - background: -webkit-linear-gradient(0deg, rgba(123, 140, 211, 1) 0%, rgba(218, 227, 253, 1) 99%); - background: -moz-linear-gradient(90deg, rgba(123, 140, 211, 1) 0%, rgba(218, 227, 253, 1) 99%); - background: linear-gradient(90deg, rgba(123, 140, 211, 1) 0%, rgba(218, 227, 253, 1) 99%); - border-radius: 18px; - z-index: -1; - } - .tab { - height: 60px; - font-size: 14px; - color: #7f7f7f; - border-bottom: 1px dotted rgb(235, 235, 235); - padding-left: 24px; - .img { - width: 6px; - height: 10px; - margin: 0 15px; - } - - .current { - font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; - font-weight: 650; - font-style: normal; - font-size: 14px; - color: #000000; - } - } - .details { - padding: 31px 60px; - .logo { - width: 120px; - height: 120px; - position: relative; - z-index: 1; - padding-right: 10px; - padding-bottom: 7px; - margin-right: 39px; - display: inline-flex; - .bj { - width: 120px; - height: 120px; - position: absolute; - top: 0; - left: 0; - z-index: -1; - } - .img { - width: 65px; - } - } - - .right { - .name { - font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; - font-weight: 650; - font-style: normal; - font-size: 32px; - color: #000000; - margin-bottom: 6px; - } - - .name-en { - font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; - font-weight: 400; - font-style: normal; - font-size: 16px; - color: #555555; - margin-bottom: 22px; - } - - .world { - width: 423px; - padding-bottom: 15px; - margin-bottom: 27px; - border-bottom: 1px solid rgb(235, 235, 235); - .head { - width: 100%; - position: relative; - margin-bottom: 9px; - - &::after { - content: ""; - position: absolute; - top: 50%; - width: 100%; - height: 1px; - background-color: rgb(235, 235, 235); - } - .icon { - width: 90px; - background-color: #fbfbfb; - position: relative; - z-index: 1; - .img { - width: 64px; - height: 22px; - } - } - } - - .list { - .item { - text-align: center; - flex-direction: column; - - .quantity { - font-family: "Arial-Black", "Arial Black", sans-serif; - font-weight: 900; - font-style: normal; - font-size: 18px; - color: #000000; - margin-bottom: 9px; - } - - .ranking-name { - font-family: "HelveticaNeue", "Helvetica Neue", sans-serif; - font-weight: 400; - font-style: normal; - font-size: 16px; - color: #555555; - - position: relative; - .ranking-icon { - position: absolute; - right: -10px; - bottom: 0; - width: 8px; - height: 8px; - transform: rotate(270deg); - } - } - } - } - } - - .brief { - // width: 946px; - height: 40px; - background-color: rgba(246, 246, 246, 1); - border-radius: 6px; - font-size: 14px; - color: #7f7f7f; - line-height: 28px; - - display: flex; - align-items: center; - justify-content: space-between; - padding: 6px; - - .text { - margin-right: 15px; - } - - .img { - width: 16px; - height: 16px; - cursor: pointer; - } - } - } - } - } - - .hot { - background-color: rgba(255, 255, 255, 1); - border-radius: 12px; - padding: 24px; - margin-bottom: 20px; - .header { - .icon { - border-radius: 50%; - width: 40px; - height: 40px; - background-color: rgb(251, 227, 234); - margin-right: 13px; - .img { - width: 24px; - height: 24px; - } - } - - font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; - font-weight: 650; - font-style: normal; - font-size: 18px; - color: #000000; - margin-bottom: 15px; - } - - .list { - width: 1152px; - margin-bottom: 10px; - .list-item { - display: grid; - grid-template-columns: repeat(2, 1fr); - .item { - padding: 22px 0; - width: 510px; - margin-left: 20px; - &:not(:nth-last-child(-n + 2)) { - border-bottom: 1px dotted #ebebeb; - } - - .left { - .name { - font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; - font-weight: 400; - font-style: normal; - font-size: 16px; - color: #000000; - margin-bottom: 6px; - position: relative; - &::after { - content: ""; - width: 8px; - height: 8px; - background-color: rgba(242, 242, 242, 1); - border: 1px solid rgba(215, 215, 215, 1); - border-radius: 39px; - position: absolute; - top: 50%; - left: -20px; - transform: translateY(-50%); - box-sizing: border-box; - } - } - - .text { - font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; - font-weight: 400; - color: #7f7f7f; - font-size: 14px; - .ranking { - color: #555555; - } - - .vertical { - color: #d7d7d7; - margin: 0 8px; - } - - .number { - font-family: "Arial-Black", "Arial Black", sans-serif; - font-weight: 900; - color: #000000; - margin-left: 8px; - } - } - } - - .operate { - // height: 80px; - position: relative; - // position: absolute; - // top: 24px; - // right: 24px; - .circle { - position: relative; - z-index: 1; - cursor: pointer; - width: 28px; - height: 28px; - background-color: rgba(219, 227, 253, 1); - border: 1px solid rgba(175, 181, 202, 1); - border-radius: 20px; - .img-add { - width: 12px; - height: 12px; - } - .img-dot { - width: 18px; - height: 8px; - } - } - .select { - position: absolute; - right: 40px; - top: 50%; - transform: translateY(-50%); - background-color: rgba(251, 251, 251, 1); - border-radius: 8px; - -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.180392156862745); - -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.180392156862745); - box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.180392156862745); - flex-direction: column; - transition: all 0.3s; - overflow: hidden; - opacity: 0; - height: 0; - width: 324px; - padding-top: 10px; - &.show { - height: 90px; - opacity: 1; - } - flex-direction: column; - align-items: center; - - .title { - .dot { - width: 8px; - height: 8px; - border-radius: 50%; - border: 1px solid rgb(202, 177, 87); - background-color: rgb(253, 223, 109); - margin-right: 5px; - } - - font-size: 14px; - color: #7f7f7f; - margin-bottom: 14px; - } - - .btn { - cursor: pointer; - width: 144px; - height: 36px; - background: -webkit-linear-gradient(194.036243467926deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); - background: -moz-linear-gradient(255.963756532074deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); - background: linear-gradient(255.963756532074deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); - border-radius: 158px; - - font-size: 14px; - color: #333333; - - .img { - width: 16px; - height: 16px; - margin-right: 8px; - } - } - } - .already { - font-size: 14px; - color: #7f7f7f; - .tick-box { - width: 20px; - height: 20px; - background-color: rgba(246, 246, 246, 1); - border: 1px solid rgba(215, 215, 215, 1); - border-radius: 20px; - margin-right: 5px; - - .img-tick { - width: 10px; - height: 8px; - } - } - } - } - } - } - } - - .indicate { - line-height: 12px; - - .icon { - width: 7px; - height: 12px; - cursor: pointer; - } - .text { - color: #555555; - font-size: 13px; - margin: 0 12px; - } - } - } - - .content { - height: 1214px; - background-color: rgba(255, 255, 255, 1); - border: 1px solid rgba(242, 242, 242, 1); - border-radius: 12px; - .header { - height: 88px; - font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; - font-weight: 650; - font-style: normal; - font-size: 24px; - color: #000000; - text-align: center; - } - .body { - // align-items: flex-start; - .left { - width: 200px; - font-size: 16px; - color: #333333; - border-right: 1px solid rgba(235, 235, 235, 1); - .item { - height: 56px; - padding-left: 34px; - .img { - width: 18px; - height: 18px; - margin-right: 12px; - } - - &.pitch { - background-color: rgba(251, 251, 251, 1); - border-top: 1px solid rgba(235, 235, 235, 1); - border-bottom: 1px solid rgba(235, 235, 235, 1); - width: 201px; - position: relative; - color: #000000; - font-weight: 650; - &::after { - content: ""; - width: 5px; - height: 56px; - background-color: rgba(111, 193, 109, 1); - position: absolute; - top: 0; - left: 0; - } - } - } - } - - .right { - background-color: rgba(251, 251, 251, 1); - border-top: 1px solid rgba(235, 235, 235, 1); - padding: 0 32px; - - .screen { - .title { - font-size: 15px; - color: #555555; - padding-top: 27px; - margin-bottom: 20px; - } - - .list { - flex-wrap: wrap; - .item { - width: fit-content; - height: 36px; - line-height: 36px; - padding: 0 17px; - background-color: rgba(251, 251, 251, 0); - border: 1px solid rgba(235, 235, 235, 1); - border-radius: 12px; - font-size: 14px; - color: #333333; - margin-bottom: 10px; - margin-right: 10px; - - &.pitch { - background-color: rgba(123, 140, 211, 1); - color: #ffffff; - border: none; - } - } - } - } - - .h { - justify-content: space-between; - padding-top: 27px; - margin-bottom: 24px; - - .total { - font-size: 14px; - color: #7f7f7f; - } - - .sort { - font-size: 14px; - color: #000000; - cursor: pointer; - - .img { - width: 20px; - height: 20px; - margin-left: 8px; - } - } - } - - .list { - flex-wrap: wrap; - justify-content: space-between; - .item { - width: 460px; - background-color: rgba(255, 255, 255, 1); - border: 1px solid rgba(242, 242, 242, 1); - border-radius: 12px; - padding: 21px 15px; - margin-bottom: 20px; - position: relative; - .name { - font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; - font-weight: 650; - font-style: normal; - font-size: 16px; - color: #000000; - margin-bottom: 12px; - } - - .english { - font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; - font-weight: 400; - font-style: normal; - font-size: 14px; - color: #555555; - margin-bottom: 12px; - } - .introduce { - color: #555555; - font-size: 14px; - margin-bottom: 12px; - .quantity { - font-family: "Arial-Black", "Arial Black", sans-serif; - font-weight: 900; - color: #000000; - margin-left: 8px; - } - .line { - color: #d7d7d7; - margin: 0 10px; - } - } - .word { - background-color: rgba(249, 248, 248, 1); - border-radius: 3px; - padding: 10px 15px; - font-size: 14px; - color: #7f7f7f; - margin-bottom: 12px; - } - .tag { - .tag-item { - width: fit-content; - height: 24px; - line-height: 24px; - background-color: rgba(249, 248, 248, 1); - border: 1px solid rgba(170, 170, 170, 1); - border-radius: 6px; - padding: 0 9px; - font-size: 14px; - color: #7f7f7f; - margin-right: 10px; - - &.gray { - background-color: rgba(51, 51, 51, 1); - color: #ffffff; - } - - &.semester { - color: #ffffff; - background-color: rgba(249, 93, 93, 1); - } - } - } - .operate { - position: absolute; - top: 18px; - right: 24px; - .circle { - position: relative; - z-index: 1; - cursor: pointer; - width: 28px; - height: 28px; - background-color: rgba(219, 227, 253, 1); - border: 1px solid rgba(175, 181, 202, 1); - border-radius: 20px; - .img-add { - width: 12px; - height: 12px; - } - .img-dot { - width: 18px; - height: 8px; - } - } - .select { - position: absolute; - top: -18px; - right: -24px; - width: 285px; - background-color: rgba(251, 251, 251, 1); - border-radius: 8px; - -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.180392156862745); - -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.180392156862745); - box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.180392156862745); - flex-direction: column; - transition: all 0.3s; - overflow: hidden; - opacity: 0; - height: 0; - align-items: center; - padding-top: 68px; - &.show { - height: 171px; - opacity: 1; - } - // .top { - // flex-direction: column; - .title { - .dot { - width: 8px; - height: 8px; - border-radius: 50%; - border: 1px solid rgb(202, 177, 87); - background-color: rgb(253, 223, 109); - margin-right: 5px; - } - - font-size: 14px; - color: #7f7f7f; - margin-bottom: 19px; - } - - .btn { - cursor: pointer; - width: 144px; - height: 36px; - background: -webkit-linear-gradient(194.036243467926deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); - background: -moz-linear-gradient(255.963756532074deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); - background: linear-gradient(255.963756532074deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); - border-radius: 158px; - - font-size: 14px; - color: #333333; - - .img { - width: 16px; - height: 16px; - margin-right: 8px; - } - } - // } - } - .already { - font-size: 14px; - color: #7f7f7f; - .tick-box { - width: 20px; - height: 20px; - background-color: rgba(246, 246, 246, 1); - border: 1px solid rgba(215, 215, 215, 1); - border-radius: 20px; - margin-right: 5px; - - .img-tick { - width: 10px; - height: 8px; - } - } - } - } - } - } - } - } - } - - .base { - width: 640px; - height: 60px; - background-color: rgba(123, 140, 211, 1); - border-radius: 153px; - position: fixed; - bottom: 15px; - left: 50%; - transform: translateX(-50%); - .left { - width: 450px; - height: 50px; - background-color: #fff; - border-radius: 153px 15px 15px 153px; - margin-right: 5px; - padding: 0 20px; - .text { - font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; - font-weight: 400; - font-style: normal; - font-size: 16px; - color: rgba(170, 170, 170, 0.901960784313726); - } - - .img { - width: 20px; - height: 20px; - } - } - - .rigth { - width: 175px; - height: 50px; - background-color: #fff; - border-radius: 15px 153px 153px 15px; - padding-left: 19px; - - .img { - width: 25px; - height: 22px; - margin-right: 5px; - } - - .text { - font-size: 16px; - color: #333333; - margin-right: 9px; - } - - .number { - height: 20px; - line-height: 20px; - background-color: rgba(242, 242, 242, 1); - border-radius: 150px; - font-size: 13px; - color: #f95d5d; - padding: 0 8px; - } - } - } -} diff --git a/03-subject/subject.less b/03-subject/subject.less deleted file mode 100644 index 10e6388..0000000 --- a/03-subject/subject.less +++ /dev/null @@ -1,447 +0,0 @@ -* { - padding: 0; - margin: 0; - box-sizing: border-box; -} - -.flexflex { - display: flex; -} - -.flexcenter { - display: flex; - justify-content: center; - align-items: center; -} - -.flexjcenter { - display: flex; - justify-content: center; -} - -.flexacenter { - display: flex; - align-items: center; -} - -.flex1 { - flex: 1; -} - -.flexcolumn { - display: flex; - flex-direction: column; -} - -body { - background-color: rgba(238, 242, 245, 1); - font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; -} - -.main { - width: 1200px; - margin: 0 auto; - - .index-icon { - width: 184px; - height: 42px; - margin-top: 37px; - margin-bottom: 40px; - } - - .box { - width: 1200px; - height: 396px; - background-color: rgba(255, 255, 255, 1); - border-radius: 12px; - position: relative; - margin-bottom: 20px; - - &::after { - content: ""; - position: absolute; - top: -5px; - left: 0; - width: 100%; - height: 66px; - background: -webkit-linear-gradient(0deg, rgba(123, 140, 211, 1) 0%, rgba(218, 227, 253, 1) 99%); - background: -moz-linear-gradient(90deg, rgba(123, 140, 211, 1) 0%, rgba(218, 227, 253, 1) 99%); - background: linear-gradient(90deg, rgba(123, 140, 211, 1) 0%, rgba(218, 227, 253, 1) 99%); - border-radius: 18px; - z-index: -1; - } - .tab { - height: 60px; - font-size: 14px; - color: #7f7f7f; - border-bottom: 1px dotted rgb(235, 235, 235); - padding-left: 24px; - .img { - width: 6px; - height: 10px; - margin: 0 15px; - } - - .current { - font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; - font-weight: 650; - font-style: normal; - font-size: 14px; - color: #000000; - } - } - - .info { - padding: 41px 60px 0; - margin-bottom: 40px; - .img { - width: 120px; - height: 120px; - margin-right: 40px; - } - - .title { - font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; - font-weight: 650; - font-style: normal; - font-size: 24px; - color: #000000; - margin-bottom: 20px; - } - - .list { - flex-wrap: wrap; - .item { - width: fit-content; - height: 36px; - line-height: 36px; - padding: 0 17px; - background-color: rgba(251, 251, 251, 0); - border: 1px solid rgba(235, 235, 235, 1); - border-radius: 12px; - font-size: 14px; - color: #333333; - margin-bottom: 10px; - margin-right: 10px; - - &.pitch { - background-color: rgba(123, 140, 211, 1); - color: #ffffff; - border: none; - } - } - } - } - } - - .body { - background-color: rgba(255, 255, 255, 1); - border-radius: 12px; - // align-items: flex-start; - .left { - width: 200px; - font-size: 16px; - color: #333333; - border-right: 1px solid rgba(235, 235, 235, 1); - .item { - height: 56px; - padding-left: 34px; - .img { - width: 18px; - margin-right: 12px; - } - - &.pitch { - background-color: rgba(251, 251, 251, 1); - border-top: 1px solid rgba(235, 235, 235, 1); - border-bottom: 1px solid rgba(235, 235, 235, 1); - width: 201px; - position: relative; - color: #000000; - font-weight: 650; - &::after { - content: ""; - width: 5px; - height: 56px; - background-color: rgba(111, 193, 109, 1); - position: absolute; - top: 0; - left: 0; - } - } - } - } - - .right { - background-color: rgba(251, 251, 251, 1); - border-top: 1px solid rgba(235, 235, 235, 1); - padding: 0 32px; - - .h { - justify-content: space-between; - padding-top: 27px; - margin-bottom: 24px; - - .total { - font-size: 14px; - color: #7f7f7f; - } - - .item { - font-size: 14px; - color: #000000; - cursor: pointer; - - .img-sort { - width: 20px; - height: 20px; - margin-left: 8px; - } - - .img-school { - width: 16px; - height: 16px; - margin-left: 8px; - } - } - } - - .list { - flex-wrap: wrap; - justify-content: space-between; - .item { - width: 460px; - background-color: rgba(255, 255, 255, 1); - border: 1px solid rgba(242, 242, 242, 1); - border-radius: 12px; - padding: 21px 15px; - margin-bottom: 20px; - position: relative; - .name { - font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; - font-weight: 650; - font-style: normal; - font-size: 16px; - color: #000000; - margin-bottom: 12px; - } - - .english { - font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; - font-weight: 400; - font-style: normal; - font-size: 14px; - color: #555555; - margin-bottom: 12px; - } - .introduce { - color: #555555; - font-size: 14px; - margin-bottom: 12px; - .quantity { - font-family: "Arial-Black", "Arial Black", sans-serif; - font-weight: 900; - color: #000000; - margin-left: 8px; - } - .line { - color: #d7d7d7; - margin: 0 10px; - } - } - .word { - background-color: rgba(249, 248, 248, 1); - border-radius: 3px; - padding: 10px 15px; - font-size: 14px; - color: #7f7f7f; - margin-bottom: 12px; - } - .tag { - .tag-item { - width: fit-content; - height: 24px; - line-height: 24px; - background-color: rgba(249, 248, 248, 1); - border: 1px solid rgba(170, 170, 170, 1); - border-radius: 6px; - padding: 0 9px; - font-size: 14px; - color: #7f7f7f; - margin-right: 10px; - - &.gray { - background-color: rgba(51, 51, 51, 1); - color: #ffffff; - } - - &.semester { - color: #ffffff; - background-color: rgba(249, 93, 93, 1); - } - } - } - .operate { - position: absolute; - top: 18px; - right: 24px; - .circle { - position: relative; - z-index: 1; - cursor: pointer; - width: 28px; - height: 28px; - background-color: rgba(219, 227, 253, 1); - border: 1px solid rgba(175, 181, 202, 1); - border-radius: 20px; - .img-add { - width: 12px; - height: 12px; - } - .img-dot { - width: 18px; - height: 8px; - } - } - .select { - position: absolute; - top: -18px; - right: -24px; - width: 285px; - background-color: rgba(251, 251, 251, 1); - border-radius: 8px; - -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.180392156862745); - -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.180392156862745); - box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.180392156862745); - flex-direction: column; - transition: all 0.3s; - overflow: hidden; - opacity: 0; - height: 0; - align-items: center; - padding-top: 68px; - &.show { - height: 171px; - opacity: 1; - } - // .top { - // flex-direction: column; - .title { - .dot { - width: 8px; - height: 8px; - border-radius: 50%; - border: 1px solid rgb(202, 177, 87); - background-color: rgb(253, 223, 109); - margin-right: 5px; - } - - font-size: 14px; - color: #7f7f7f; - margin-bottom: 19px; - } - - .btn { - cursor: pointer; - width: 144px; - height: 36px; - background: -webkit-linear-gradient(194.036243467926deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); - background: -moz-linear-gradient(255.963756532074deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); - background: linear-gradient(255.963756532074deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); - border-radius: 158px; - - font-size: 14px; - color: #333333; - - .img { - width: 16px; - height: 16px; - margin-right: 8px; - } - } - // } - } - .already { - font-size: 14px; - color: #7f7f7f; - .tick-box { - width: 20px; - height: 20px; - background-color: rgba(246, 246, 246, 1); - border: 1px solid rgba(215, 215, 215, 1); - border-radius: 20px; - margin-right: 5px; - - .img-tick { - width: 10px; - height: 8px; - } - } - } - } - } - } - } - } - - .base { - width: 640px; - height: 60px; - background-color: rgba(123, 140, 211, 1); - border-radius: 153px; - position: fixed; - bottom: 15px; - left: 50%; - transform: translateX(-50%); - .left { - width: 450px; - height: 50px; - background-color: #fff; - border-radius: 153px 15px 15px 153px; - margin-right: 5px; - padding: 0 20px; - .text { - font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; - font-weight: 400; - font-style: normal; - font-size: 16px; - color: rgba(170, 170, 170, 0.901960784313726); - } - - .img { - width: 20px; - height: 20px; - } - } - - .rigth { - width: 175px; - height: 50px; - background-color: #fff; - border-radius: 15px 153px 153px 15px; - padding-left: 19px; - - .img { - width: 25px; - height: 22px; - margin-right: 5px; - } - - .text { - font-size: 16px; - color: #333333; - margin-right: 9px; - } - - .number { - height: 20px; - line-height: 20px; - background-color: rgba(242, 242, 242, 1); - border-radius: 150px; - font-size: 13px; - color: #f95d5d; - padding: 0 8px; - } - } - } -} diff --git a/04-details/details.less b/04-details/details.less deleted file mode 100644 index e8fcd29..0000000 --- a/04-details/details.less +++ /dev/null @@ -1,1078 +0,0 @@ -* { - padding: 0; - margin: 0; - box-sizing: border-box; -} - -.flexflex { - display: flex; -} - -.flexcenter { - display: flex; - justify-content: center; - align-items: center; -} - -.flexjcenter { - display: flex; - justify-content: center; -} - -.flexacenter { - display: flex; - align-items: center; -} - -.flex1 { - flex: 1; -} - -.flexcolumn { - display: flex; - flex-direction: column; -} - -body { - background-color: rgba(238, 242, 245, 1); - font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; -} - -.main { - width: 1200px; - margin: 0 auto; - - .index-icon { - width: 184px; - height: 42px; - margin-top: 37px; - margin-bottom: 40px; - } - - .box { - width: 1200px; - background-color: rgba(251, 251, 251, 1); - border-radius: 12px; - position: relative; - margin-bottom: 20px; - - &::after { - content: ""; - position: absolute; - top: -5px; - left: 0; - width: 100%; - height: 66px; - background: -webkit-linear-gradient(0deg, rgba(123, 140, 211, 1) 0%, rgba(218, 227, 253, 1) 99%); - background: -moz-linear-gradient(90deg, rgba(123, 140, 211, 1) 0%, rgba(218, 227, 253, 1) 99%); - background: linear-gradient(90deg, rgba(123, 140, 211, 1) 0%, rgba(218, 227, 253, 1) 99%); - border-radius: 18px; - z-index: -1; - } - .tab { - height: 60px; - font-size: 14px; - color: #7f7f7f; - border-bottom: 1px dotted rgb(235, 235, 235); - padding-left: 24px; - .img { - width: 6px; - height: 10px; - margin: 0 15px; - } - - .current { - font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; - font-weight: 650; - font-style: normal; - font-size: 14px; - color: #000000; - } - } - .details { - padding: 31px 60px; - .logo { - width: 120px; - height: 120px; - position: relative; - z-index: 1; - padding-right: 10px; - padding-bottom: 7px; - margin-right: 39px; - display: inline-flex; - } - - .right { - .name { - font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; - font-weight: 650; - font-style: normal; - font-size: 32px; - color: #000000; - margin-bottom: 6px; - } - - .name-en { - font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; - font-weight: 400; - font-style: normal; - font-size: 14px; - color: #7f7f7f; - margin-bottom: 15px; - } - - .school { - .icon { - height: 20px; - margin-right: 9px; - } - - font-size: 16px; - color: #333333; - margin-bottom: 15px; - - .line { - margin: 0 13px; - color: rgb(215, 215, 215); - } - } - - .word { - margin-bottom: 15px; - - .img { - width: 20px; - height: 14px; - margin-right: 6px; - margin-bottom: 8px; - } - font-size: 14px; - color: #7f7f7f; - } - - .tag { - .tag-item { - width: fit-content; - height: 24px; - line-height: 24px; - background-color: rgba(249, 248, 248, 1); - border: 1px solid rgba(170, 170, 170, 1); - border-radius: 6px; - padding: 0 9px; - font-size: 14px; - color: #7f7f7f; - margin-right: 10px; - - &.gray { - background-color: rgba(51, 51, 51, 1); - color: #ffffff; - } - - &.semester { - color: #ffffff; - background-color: rgba(249, 93, 93, 1); - } - } - } - } - } - } - - .body { - } - - .content { - height: 1214px; - background-color: rgba(255, 255, 255, 1); - border: 1px solid rgba(242, 242, 242, 1); - border-radius: 12px; - margin-right: 10px; - - .side { - border-radius: 12px 0 0 0; - width: 141px; - height: 500px; - overflow: hidden; - flex-direction: column; - .item { - width: 100%; - height: 56px; - font-size: 15px; - color: #555555; - cursor: pointer; - border-right: 1px solid rgba(235, 235, 235, 1); - - &.pitch { - &:first-of-type { - border-top: none; - } - background-color: rgba(251, 251, 251, 1); - border-top: 1px solid rgba(235, 235, 235, 1); - border-bottom: 1px solid rgba(235, 235, 235, 1); - border-right: none; - - font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; - font-weight: 650; - font-style: normal; - font-size: 15px; - color: #000000; - position: relative; - &::after { - content: ""; - width: 5px; - height: 100%; - display: block; - background-color: rgba(111, 193, 109, 1); - position: absolute; - left: 0; - top: 0; - } - } - } - } - - .details-box { - padding-top: 40px; - padding-left: 50px; - padding-right: 30px; - background-color: #fbfbfb; - border-radius: 0 12px 0 0; - - .block { - background-color: rgba(255, 255, 255, 1); - border: 1px solid rgba(235, 235, 235, 1); - border-radius: 12px; - } - - .item-header { - font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; - font-weight: 650; - font-style: normal; - font-size: 16px; - color: #000000; - justify-content: space-between; - margin-bottom: 22px; - position: relative; - &::after { - content: ""; - width: 6px; - height: 16px; - background-color: rgba(253, 223, 109, 1); - border: 1px solid rgba(202, 177, 87, 1); - border-radius: 5px; - margin-right: 14px; - position: absolute; - top: 4px; - left: -20px; - display: block; - box-sizing: border-box; - } - - .list-btn { - font-weight: 400; - font-size: 14px; - color: #000000; - .icon { - width: 16px; - height: 16px; - margin-left: 8px; - } - } - } - - .ranking { - margin-bottom: 40px; - .item { - height: 76px; - border: 1px solid rgba(235, 235, 235, 1); - border-radius: 6px; - overflow: hidden; - - &:not(:last-of-type) { - margin-bottom: 10px; - } - .rank { - background-color: rgba(255, 255, 255, 1); - padding: 0 22px; - justify-content: space-between; - .logo { - height: 24px; - } - .number { - width: 90px; - height: 30px; - line-height: 30px; - background-color: rgba(247, 166, 2, 1); - border-radius: 4px; - font-family: "Arial-Black", "Arial Black", sans-serif; - font-weight: 900; - font-size: 18px; - color: #ffffff; - .triangle { - } - } - } - - .rank-box { - background-color: rgba(246, 246, 246, 1); - flex-direction: column; - justify-content: center; - - .itemm { - font-size: 14px; - padding-left: 20px; - .key { - color: #7f7f7f; - } - .value { - color: #333333; - } - - &:first-of-type { - margin-bottom: 9px; - } - } - } - } - } - - .application-schedule { - margin-bottom: 40px; - .list { - .time { - padding-top: 19px; - padding-bottom: 22px; - text-align: center; - - .item { - &:first-of-type { - border-right: 1px dotted rgb(235, 235, 235); - } - .name { - font-size: 16px; - color: #000000; - font-family: "Arial-Black", "Arial Black", sans-serif; - font-weight: 900; - margin-bottom: 14px; - } - - .value { - font-size: 14px; - color: #555555; - } - } - } - } - .application-else { - background-color: rgba(246, 246, 246, 1); - border-radius: 6px; - padding: 14px 10px; - margin: 0 20px 20px; - - .item { - &:not(:last-of-type) { - margin-bottom: 10px; - } - - .name { - font-size: 14px; - color: #7f7f7f; - margin-right: 11px; - } - - .value { - font-size: 14px; - color: #333333; - } - } - } - } - - .demand { - margin-bottom: 40px; - padding: 17px 20px; - - .text { - font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; - font-weight: 400; - font-style: normal; - font-size: 15px; - color: #000000; - line-height: 32px; - word-break: break-word; - white-space: pre-line; - margin-bottom: 32px; - } - - .title { - font-weight: 650; - font-style: normal; - font-size: 18px; - color: #000000; - margin-bottom: 10px; - } - - .hint { - font-size: 15px; - color: #333333; - margin-bottom: 21px; - } - - .list { - .item { - background-color: rgba(246, 246, 246, 1); - border-radius: 6px; - padding: 14px 0 14px 28px; - position: relative; - flex-direction: column; - justify-content: center; - - .triangle { - position: absolute; - transform: rotate(270deg); - top: 27px; - left: 7px; - } - - &:not(:last-of-type) { - margin-bottom: 10px; - } - - .name { - font-size: 15px; - color: #7f7f7f; - margin-bottom: 8px; - } - - .value { - font-size: 16px; - color: #000000; - } - } - } - } - - .tuition { - width: 451px; - height: 140px; - padding-right: 10px; - .tuition-left { - height: 100%; - position: relative; - .unit { - position: absolute; - top: 10px; - left: 10px; - width: 42px; - height: 20px; - background-color: rgba(249, 93, 93, 1); - border-radius: 15px; - font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; - font-weight: 400; - font-size: 14px; - color: #ffffff; - text-align: center; - } - flex-direction: column; - - .number { - font-family: "Arial-Black", "Arial Black", sans-serif; - font-weight: 900; - font-style: normal; - font-size: 20px; - color: #000000; - margin-bottom: 9px; - text-align: center; - } - - .text { - font-size: 15px; - color: #555555; - text-align: center; - } - } - - .tuition-right { - width: 240px; - height: 120px; - background-color: rgba(246, 246, 246, 1); - border-radius: 6px; - - padding: 16px 11px; - .item { - justify-content: space-between; - &:not(:last-of-type) { - margin-bottom: 12px; - } - .key { - font-size: 15px; - color: #555555; - } - .value { - font-family: "Arial-Black", "Arial Black", sans-serif; - font-weight: 900; - font-style: normal; - font-size: 16px; - color: #000000; - } - } - } - } - - .tuition-scholarships { - margin-bottom: 40px; - - .left { - margin-right: 39px; - } - - .right { - .scholarships { - width: 180px; - height: 140px; - font-size: 15px; - color: #000000; - line-height: 34px; - text-align: center; - } - } - } - - .pattern { - padding: 20px 16px 33px; - .tab { - width: 180px; - height: 40px; - background-color: rgba(242, 242, 242, 1); - border: 1px solid rgba(235, 235, 235, 1); - border-radius: 114px; - margin: 0 auto 33px; - - .item { - height: 100%; - font-size: 16px; - color: #555555; - cursor: pointer; - &.pitch { - background-color: rgba(111, 193, 109, 1); - border-radius: 22px; - color: #ffffff; - } - } - } - - .introduce { - .item { - text-align: center; - - &:not(:last-of-type) { - border-right: 1px dotted rgb(235, 235, 235); - } - - .value { - font-size: 16px; - color: #000000; - font-family: "Arial-Black", "Arial Black", "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; - font-weight: 900; - margin-bottom: 14.5px; - } - - .name { - font-size: 14px; - color: #555555; - } - } - } - } - - .course { - position: relative; - padding-top: 19px; - margin-bottom: 20px; - - .icon { - position: absolute; - top: 0; - left: 50%; - transform: translateX(-50%); - width: 16px; - height: 9px; - } - - .title { - font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; - font-weight: 650; - font-style: normal; - font-size: 18px; - color: #000000; - text-align: center; - margin-bottom: 9px; - } - - .hint { - color: #555555; - line-height: 22px; - text-align: center; - margin-bottom: 21px; - } - font-size: 14px; - .table-head { - background-color: rgb(246, 246, 246); - border-top: 1px solid rgb(235, 235, 235); - border-bottom: 1px solid rgb(235, 235, 235); - .item { - height: 40px; - line-height: 40px; - } - } - - .table-body { - .list { - &:not(:last-of-type) { - border-bottom: 1px solid #ebebeb; - } - } - .item { - // height: 100%; - color: #333333; - padding: 12px 4px; - - &.name { - color: #000000; - .english { - font-family: "Arial Normal", "Arial", sans-serif; - color: #aaaaaa; - } - text-align: left; - } - - &.credit { - font-family: "Arial-Black", "Arial Black", sans-serif; - font-weight: 900; - font-style: normal; - font-size: 14px; - color: #000000; - } - } - } - - .item { - text-align: center; - &.number { - width: 134px; - border-right: 1px solid rgb(235, 235, 235); - } - - &.name { - border-right: 1px solid rgb(235, 235, 235); - } - - &.credit { - width: 80px; - } - } - } - - .link { - font-size: 15px; - padding: 17px 20px 24px 15px; - &.brochure { - .img { - width: 70px; - height: 70px; - margin-right: 8px; - } - .title { - font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; - font-weight: 650; - font-style: normal; - color: #000000; - line-height: normal; - margin-bottom: 10px; - } - .name { - font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; - font-weight: 400; - font-style: normal; - font-size: 13px; - color: #555555; - } - } - .title { - color: #000000; - line-height: 34px; - margin-bottom: 8px; - } - .text { - text-decoration: underline; - text-decoration: underline; - line-height: 24px; - color: #333333; - margin-bottom: 20px; - } - - .btn { - width: 127px; - height: 40px; - line-height: 40px; - cursor: pointer; - background-color: rgba(246, 246, 246, 1); - border: 1px solid rgba(215, 215, 215, 1); - border-radius: 115px; - color: #333333; - margin-left: 10px; - .icon { - width: 18px; - height: 18px; - margin-right: 6px; - } - - &.open { - border: none; - background-color: rgba(111, 193, 109, 1); - font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; - font-weight: 650; - font-style: normal; - color: #ffffff; - } - } - } - - .degree { - text-align: center; - padding: 16px 0 24px; - - .title { - width: 103px; - height: 30px; - position: relative; - z-index: 1; - font-size: 16px; - color: #ffffff; - margin: 0 auto 16px; - .icon { - width: 103px; - height: 30px; - position: absolute; - top: 0; - left: 0; - z-index: -1; - } - } - - .name { - font-size: 16px; - color: #000000; - line-height: 34px; - margin-bottom: 10px; - } - - .english { - font-size: 14px; - color: #7f7f7f; - } - } - - .issue-bj { - z-index: 1; - position: relative; - .issue { - padding: 0 26px 0 41px; - margin-left: 5px; - position: relative; - .index-bj { - position: absolute; - width: 27px; - height: 24px; - top: 35px; - left: -5px; - z-index: -1; - } - .index { - width: 30px; - height: 26px; - background-color: rgba(249, 93, 93, 1); - border-radius: 0 5px 5px 0; - font-family: "Arial-Black", "Arial Black", sans-serif; - font-weight: 900; - color: #ffffff; - position: absolute; - top: 21px; - left: -5px; - } - .title { - font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; - font-weight: 650; - font-style: normal; - font-size: 15px; - color: #000000; - padding-top: 20px; - padding-bottom: 15px; - border-bottom: 1px dotted rgb(235, 235, 235); - line-height: 28px; - } - - .text { - font-size: 15px; - color: #555555; - line-height: 32px; - padding: 19px 0; - } - } - } - } - } - - .else { - width: 290px; - height: 2000px; - - background: -webkit-linear-gradient(270.008830663227deg, rgba(247, 251, 247, 1) 0%, rgba(234, 246, 234, 1) 100%); - background: -moz-linear-gradient(179.991169336773deg, rgba(247, 251, 247, 1) 0%, rgba(234, 246, 234, 1) 100%); - background: linear-gradient(179.991169336773deg, rgba(247, 251, 247, 1) 0%, rgba(234, 246, 234, 1) 100%); - border: none; - border-radius: 12px; - padding: 20px 10px 0; - - .school { - margin-bottom: 20px; - - .logo { - width: 50px; - height: 50px; - background-color: rgba(255, 255, 255, 1); - border: 1px solid rgba(246, 246, 246, 1); - border-radius: 8px; - margin-right: 10px; - .img { - height: 30px; - } - } - .info { - .name { - font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; - font-weight: 650; - font-style: normal; - font-size: 18px; - color: #000000; - margin-bottom: 5px; - } - - .name-en { - font-size: 13px; - color: #555555; - } - } - } - - .case { - width: 270px; - background-color: #ffffff; - border-radius: 8px; - .head { - width: 270px; - height: 45px; - border-bottom: 1px dotted rgb(235, 235, 235); - padding: 0 10px; - background: linear-gradient(to right, rgba(255, 255, 255, 0.501961), #d8f1d8); - overflow: hidden; - .dot { - width: 14px; - height: 14px; - background-color: rgba(231, 247, 238, 1); - border: 1px solid rgba(183, 196, 189, 1); - border-radius: 39px; - position: relative; - margin-right: 10px; - &::after { - content: ""; - width: 6px; - height: 6px; - display: block; - background-color: rgba(114, 219, 134, 1); - border: 1px solid rgba(87, 168, 105, 1); - border-radius: 39px; - box-sizing: border-box; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } - } - - .text { - font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; - font-weight: 650; - font-style: normal; - font-size: 16px; - color: #000000; - } - - .img { - width: 14px; - height: 14px; - } - } - } - } - - .base { - width: 640px; - height: 60px; - // background-color: rgba(123, 140, 211, 1); - border-radius: 153px; - position: fixed; - bottom: 30px; - left: 50%; - transform: translateX(-50%); - z-index: 2; - - .type1 { - width: 100%; - height: 100%; - border-radius: 153px; - border: 1px solid rgb(219, 224, 242); - background: linear-gradient(to right, rgb(238, 247, 245), rgb(219, 227, 253)); - font-size: 15px; - color: #000000; - - .btn { - line-height: 50px; - margin: 0 24px; - - .img { - height: 20px; - margin-right: 6px; - } - } - - .line { - width: 1px; - height: 20px; - background-color: rgb(215, 215, 215); - } - - .add { - height: 50px; - line-height: 50px; - text-align: center; - background-color: rgba(123, 140, 211, 1); - border-radius: 158px; - font-weight: 400; - font-style: normal; - font-size: 15px; - color: #ffffff; - margin-right: 5px; - .img { - width: 16px; - height: 16px; - margin-right: 10px; - } - } - } - - .type2 { - width: 100%; - height: 100%; - background-color: rgba(242, 242, 242, 1); - border: 1px solid rgba(215, 215, 215, 1); - border-radius: 153px; - - .btn { - padding: 0 20px; - height: 100%; - margin-right: 20px; - border-right: 1px solid rgb(215, 215, 215); - cursor: pointer; - font-size: 15px; - color: #000000; - .img { - width: 16px; - height: 16px; - margin-left: 7px; - } - } - - .input-box { - width: 370px; - height: 40px; - margin-right: 10px; - background-color: rgba(255, 255, 255, 1); - border-radius: 158px; - overflow: hidden; - .img { - width: 20px; - height: 20px; - margin-left: 12px; - margin-right: 6px; - } - .input { - height: 100%; - padding-right: 20px; - border: none; - outline: none; - } - } - - .state-box { - .state-btn { - width: 100px; - height: 40px; - background-color: rgba(249, 93, 93, 1); - border-radius: 158px; - font-size: 15px; - color: #ffffff; - cursor: pointer; - .img { - width: 11px; - height: 6px; - margin-left: 8px; - } - } - } - } - - .type3 { - width: 100%; - height: 100%; - background-color: rgba(242, 242, 242, 1); - border: 1px solid rgba(215, 215, 215, 1); - border-radius: 153px; - - .btn { - padding: 0 20px; - height: 100%; - margin-right: 20px; - border-right: 1px solid rgb(215, 215, 215); - cursor: pointer; - font-size: 15px; - color: #000000; - - .img { - width: 16px; - height: 16px; - margin-left: 7px; - } - } - - .add-btn { - width: 235px; - height: 40px; - background-color: rgba(123, 140, 211, 1); - font-size: 15px; - color: #ffffff; - border-radius: 158px; - &.already { - background-color: rgba(251, 251, 251, 1); - font-size: 16px; - color: #aaaaaa; - } - .img { - width: 16px; - height: 16px; - margin-right: 10px; - } - } - } - } -} diff --git a/css/common.css b/css/common.css new file mode 100644 index 0000000..53b4947 --- /dev/null +++ b/css/common.css @@ -0,0 +1,98 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} +.flexflex { + display: flex; +} +.flexcenter { + display: flex; + justify-content: center; + align-items: center; +} +.flexjcenter { + display: flex; + justify-content: center; +} +.flexacenter { + display: flex; + align-items: center; +} +.flex1 { + flex: 1; +} +.flexcolumn { + display: flex; + flex-direction: column; +} +body { + background-color: #eef2f5; + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; +} +.main { + width: 1200px; + margin: 0 auto; +} +.main .index-icon { + width: 184px; + height: 42px; + margin-top: 37px; + margin-bottom: 40px; +} +.base { + width: 640px; + height: 60px; + background-color: #7b8cd3; + border-radius: 153px; + position: fixed; + bottom: 15px; + left: 50%; + transform: translateX(-50%); + z-index: 2; +} +.base .left { + width: 450px; + height: 50px; + background-color: #fff; + border-radius: 153px 15px 15px 153px; + margin-right: 5px; + padding: 0 20px; +} +.base .left .text { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 16px; + color: rgba(170, 170, 170, 0.90196078); +} +.base .left .img { + width: 20px; + height: 20px; +} +.base .rigth { + width: 175px; + height: 50px; + background-color: #fff; + border-radius: 15px 153px 153px 15px; + padding-left: 19px; +} +.base .rigth .img { + width: 25px; + height: 22px; + margin-right: 5px; +} +.base .rigth .text { + font-size: 16px; + color: #333333; + margin-right: 9px; +} +.base .rigth .number { + height: 20px; + line-height: 20px; + background-color: #f2f2f2; + border-radius: 150px; + font-size: 13px; + color: #f95d5d; + padding: 0 8px; +} diff --git a/css/common.less b/css/common.less new file mode 100644 index 0000000..6d37052 --- /dev/null +++ b/css/common.less @@ -0,0 +1,113 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +.flexflex { + display: flex; +} + +.flexcenter { + display: flex; + justify-content: center; + align-items: center; +} + +.flexjcenter { + display: flex; + justify-content: center; +} + +.flexacenter { + display: flex; + align-items: center; +} + +.flex1 { + flex: 1; +} + +.flexcolumn { + display: flex; + flex-direction: column; +} + +body { + background-color: rgba(238, 242, 245, 1); + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; +} + +.main { + width: 1200px; + margin: 0 auto; + + .index-icon { + width: 184px; + height: 42px; + margin-top: 37px; + margin-bottom: 40px; + } +} + +.base { + width: 640px; + height: 60px; + background-color: rgba(123, 140, 211, 1); + border-radius: 153px; + position: fixed; + bottom: 15px; + left: 50%; + transform: translateX(-50%); + z-index: 2; + .left { + width: 450px; + height: 50px; + background-color: #fff; + border-radius: 153px 15px 15px 153px; + margin-right: 5px; + padding: 0 20px; + .text { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 16px; + color: rgba(170, 170, 170, 0.901960784313726); + } + + .img { + width: 20px; + height: 20px; + } + } + + .rigth { + width: 175px; + height: 50px; + background-color: #fff; + border-radius: 15px 153px 153px 15px; + padding-left: 19px; + + .img { + width: 25px; + height: 22px; + margin-right: 5px; + } + + .text { + font-size: 16px; + color: #333333; + margin-right: 9px; + } + + .number { + height: 20px; + line-height: 20px; + background-color: rgba(242, 242, 242, 1); + border-radius: 150px; + font-size: 13px; + color: #f95d5d; + padding: 0 8px; + } + } +} \ No newline at end of file diff --git a/04-details/details.css b/css/details.css similarity index 65% rename from 04-details/details.css rename to css/details.css index 1c65b1b..67d1966 100644 --- a/04-details/details.css +++ b/css/details.css @@ -1,53 +1,11 @@ -* { - padding: 0; - margin: 0; - box-sizing: border-box; -} -.flexflex { - display: flex; -} -.flexcenter { - display: flex; - justify-content: center; - align-items: center; -} -.flexjcenter { - display: flex; - justify-content: center; -} -.flexacenter { - display: flex; - align-items: center; -} -.flex1 { - flex: 1; -} -.flexcolumn { - display: flex; - flex-direction: column; -} -body { - background-color: #eef2f5; - font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; -} -.main { - width: 1200px; - margin: 0 auto; -} -.main .index-icon { - width: 184px; - height: 42px; - margin-top: 37px; - margin-bottom: 40px; -} -.main .box { +.box { width: 1200px; background-color: #fbfbfb; border-radius: 12px; position: relative; margin-bottom: 20px; } -.main .box::after { +.box::after { content: ""; position: absolute; top: -5px; @@ -60,29 +18,29 @@ body { border-radius: 18px; z-index: -1; } -.main .box .tab { +.box .tab { height: 60px; font-size: 14px; color: #7f7f7f; border-bottom: 1px dotted #ebebeb; padding-left: 24px; } -.main .box .tab .img { +.box .tab .img { width: 6px; height: 10px; margin: 0 15px; } -.main .box .tab .current { +.box .tab .current { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 14px; color: #000000; } -.main .box .details { +.box .details { padding: 31px 60px; } -.main .box .details .logo { +.box .details .logo { width: 120px; height: 120px; position: relative; @@ -92,7 +50,7 @@ body { margin-right: 39px; display: inline-flex; } -.main .box .details .right .name { +.box .details .right .name { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; @@ -100,7 +58,7 @@ body { color: #000000; margin-bottom: 6px; } -.main .box .details .right .name-en { +.box .details .right .name-en { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; @@ -108,31 +66,31 @@ body { color: #7f7f7f; margin-bottom: 15px; } -.main .box .details .right .school { +.box .details .right .school { font-size: 16px; color: #333333; margin-bottom: 15px; } -.main .box .details .right .school .icon { +.box .details .right .school .icon { height: 20px; margin-right: 9px; } -.main .box .details .right .school .line { +.box .details .right .school .line { margin: 0 13px; color: #d7d7d7; } -.main .box .details .right .word { +.box .details .right .word { margin-bottom: 15px; font-size: 14px; color: #7f7f7f; } -.main .box .details .right .word .img { +.box .details .right .word .img { width: 20px; height: 14px; margin-right: 6px; margin-bottom: 8px; } -.main .box .details .right .tag .tag-item { +.box .details .right .tag .tag-item { width: fit-content; height: 24px; line-height: 24px; @@ -144,29 +102,32 @@ body { color: #7f7f7f; margin-right: 10px; } -.main .box .details .right .tag .tag-item.gray { +.box .details .right .tag .tag-item.gray { background-color: #333333; color: #ffffff; } -.main .box .details .right .tag .tag-item.semester { +.box .details .right .tag .tag-item.semester { color: #ffffff; background-color: #f95d5d; } -.main .content { +.body { + align-items: flex-start; +} +.content { height: 1214px; background-color: #ffffff; border: 1px solid #f2f2f2; border-radius: 12px; margin-right: 10px; } -.main .content .side { +.content .side { border-radius: 12px 0 0 0; width: 141px; height: 500px; overflow: hidden; flex-direction: column; } -.main .content .side .item { +.content .side .item { width: 100%; height: 56px; font-size: 15px; @@ -174,7 +135,7 @@ body { cursor: pointer; border-right: 1px solid #ebebeb; } -.main .content .side .item.pitch { +.content .side .item.pitch { background-color: #fbfbfb; border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; @@ -186,10 +147,10 @@ body { color: #000000; position: relative; } -.main .content .side .item.pitch:first-of-type { +.content .side .item.pitch:first-of-type { border-top: none; } -.main .content .side .item.pitch::after { +.content .side .item.pitch::after { content: ""; width: 5px; height: 100%; @@ -199,19 +160,19 @@ body { left: 0; top: 0; } -.main .content .details-box { +.content .details-box { padding-top: 40px; padding-left: 50px; padding-right: 30px; background-color: #fbfbfb; border-radius: 0 12px 0 0; } -.main .content .details-box .block { +.content .details-box .block { background-color: #ffffff; border: 1px solid #ebebeb; border-radius: 12px; } -.main .content .details-box .item-header { +.content .details-box .item-header { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; @@ -221,7 +182,7 @@ body { margin-bottom: 22px; position: relative; } -.main .content .details-box .item-header::after { +.content .details-box .item-header::after { content: ""; width: 6px; height: 16px; @@ -235,37 +196,37 @@ body { display: block; box-sizing: border-box; } -.main .content .details-box .item-header .list-btn { +.content .details-box .item-header .list-btn { font-weight: 400; font-size: 14px; color: #000000; } -.main .content .details-box .item-header .list-btn .icon { +.content .details-box .item-header .list-btn .icon { width: 16px; height: 16px; margin-left: 8px; } -.main .content .details-box .ranking { +.content .details-box .ranking { margin-bottom: 40px; } -.main .content .details-box .ranking .item { +.content .details-box .ranking .item { height: 76px; border: 1px solid #ebebeb; border-radius: 6px; overflow: hidden; } -.main .content .details-box .ranking .item:not(:last-of-type) { +.content .details-box .ranking .item:not(:last-of-type) { margin-bottom: 10px; } -.main .content .details-box .ranking .item .rank { +.content .details-box .ranking .item .rank { background-color: #ffffff; padding: 0 22px; justify-content: space-between; } -.main .content .details-box .ranking .item .rank .logo { +.content .details-box .ranking .item .rank .logo { height: 24px; } -.main .content .details-box .ranking .item .rank .number { +.content .details-box .ranking .item .rank .number { width: 90px; height: 30px; line-height: 30px; @@ -276,69 +237,69 @@ body { font-size: 18px; color: #ffffff; } -.main .content .details-box .ranking .item .rank-box { +.content .details-box .ranking .item .rank-box { background-color: #f6f6f6; flex-direction: column; justify-content: center; } -.main .content .details-box .ranking .item .rank-box .itemm { +.content .details-box .ranking .item .rank-box .itemm { font-size: 14px; padding-left: 20px; } -.main .content .details-box .ranking .item .rank-box .itemm .key { +.content .details-box .ranking .item .rank-box .itemm .key { color: #7f7f7f; } -.main .content .details-box .ranking .item .rank-box .itemm .value { +.content .details-box .ranking .item .rank-box .itemm .value { color: #333333; } -.main .content .details-box .ranking .item .rank-box .itemm:first-of-type { +.content .details-box .ranking .item .rank-box .itemm:first-of-type { margin-bottom: 9px; } -.main .content .details-box .application-schedule { +.content .details-box .application-schedule { margin-bottom: 40px; } -.main .content .details-box .application-schedule .list .time { +.content .details-box .application-schedule .list .time { padding-top: 19px; padding-bottom: 22px; text-align: center; } -.main .content .details-box .application-schedule .list .time .item:first-of-type { +.content .details-box .application-schedule .list .time .item:first-of-type { border-right: 1px dotted #ebebeb; } -.main .content .details-box .application-schedule .list .time .item .name { +.content .details-box .application-schedule .list .time .item .name { font-size: 16px; color: #000000; font-family: "Arial-Black", "Arial Black", sans-serif; font-weight: 900; margin-bottom: 14px; } -.main .content .details-box .application-schedule .list .time .item .value { +.content .details-box .application-schedule .list .time .item .value { font-size: 14px; color: #555555; } -.main .content .details-box .application-schedule .application-else { +.content .details-box .application-schedule .application-else { background-color: #f6f6f6; border-radius: 6px; padding: 14px 10px; margin: 0 20px 20px; } -.main .content .details-box .application-schedule .application-else .item:not(:last-of-type) { +.content .details-box .application-schedule .application-else .item:not(:last-of-type) { margin-bottom: 10px; } -.main .content .details-box .application-schedule .application-else .item .name { +.content .details-box .application-schedule .application-else .item .name { font-size: 14px; color: #7f7f7f; margin-right: 11px; } -.main .content .details-box .application-schedule .application-else .item .value { +.content .details-box .application-schedule .application-else .item .value { font-size: 14px; color: #333333; } -.main .content .details-box .demand { +.content .details-box .demand { margin-bottom: 40px; padding: 17px 20px; } -.main .content .details-box .demand .text { +.content .details-box .demand .text { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; @@ -349,19 +310,19 @@ body { white-space: pre-line; margin-bottom: 32px; } -.main .content .details-box .demand .title { +.content .details-box .demand .title { font-weight: 650; font-style: normal; font-size: 18px; color: #000000; margin-bottom: 10px; } -.main .content .details-box .demand .hint { +.content .details-box .demand .hint { font-size: 15px; color: #333333; margin-bottom: 21px; } -.main .content .details-box .demand .list .item { +.content .details-box .demand .list .item { background-color: #f6f6f6; border-radius: 6px; padding: 14px 0 14px 28px; @@ -369,35 +330,35 @@ body { flex-direction: column; justify-content: center; } -.main .content .details-box .demand .list .item .triangle { +.content .details-box .demand .list .item .triangle { position: absolute; transform: rotate(270deg); top: 27px; left: 7px; } -.main .content .details-box .demand .list .item:not(:last-of-type) { +.content .details-box .demand .list .item:not(:last-of-type) { margin-bottom: 10px; } -.main .content .details-box .demand .list .item .name { +.content .details-box .demand .list .item .name { font-size: 15px; color: #7f7f7f; margin-bottom: 8px; } -.main .content .details-box .demand .list .item .value { +.content .details-box .demand .list .item .value { font-size: 16px; color: #000000; } -.main .content .details-box .tuition { +.content .details-box .tuition { width: 451px; height: 140px; padding-right: 10px; } -.main .content .details-box .tuition .tuition-left { +.content .details-box .tuition .tuition-left { height: 100%; position: relative; flex-direction: column; } -.main .content .details-box .tuition .tuition-left .unit { +.content .details-box .tuition .tuition-left .unit { position: absolute; top: 10px; left: 10px; @@ -411,7 +372,7 @@ body { color: #ffffff; text-align: center; } -.main .content .details-box .tuition .tuition-left .number { +.content .details-box .tuition .tuition-left .number { font-family: "Arial-Black", "Arial Black", sans-serif; font-weight: 900; font-style: normal; @@ -420,42 +381,42 @@ body { margin-bottom: 9px; text-align: center; } -.main .content .details-box .tuition .tuition-left .text { +.content .details-box .tuition .tuition-left .text { font-size: 15px; color: #555555; text-align: center; } -.main .content .details-box .tuition .tuition-right { +.content .details-box .tuition .tuition-right { width: 240px; height: 120px; background-color: #f6f6f6; border-radius: 6px; padding: 16px 11px; } -.main .content .details-box .tuition .tuition-right .item { +.content .details-box .tuition .tuition-right .item { justify-content: space-between; } -.main .content .details-box .tuition .tuition-right .item:not(:last-of-type) { +.content .details-box .tuition .tuition-right .item:not(:last-of-type) { margin-bottom: 12px; } -.main .content .details-box .tuition .tuition-right .item .key { +.content .details-box .tuition .tuition-right .item .key { font-size: 15px; color: #555555; } -.main .content .details-box .tuition .tuition-right .item .value { +.content .details-box .tuition .tuition-right .item .value { font-family: "Arial-Black", "Arial Black", sans-serif; font-weight: 900; font-style: normal; font-size: 16px; color: #000000; } -.main .content .details-box .tuition-scholarships { +.content .details-box .tuition-scholarships { margin-bottom: 40px; } -.main .content .details-box .tuition-scholarships .left { +.content .details-box .tuition-scholarships .left { margin-right: 39px; } -.main .content .details-box .tuition-scholarships .right .scholarships { +.content .details-box .tuition-scholarships .right .scholarships { width: 180px; height: 140px; font-size: 15px; @@ -463,10 +424,10 @@ body { line-height: 34px; text-align: center; } -.main .content .details-box .pattern { +.content .details-box .pattern { padding: 20px 16px 33px; } -.main .content .details-box .pattern .tab { +.content .details-box .pattern .tab { width: 180px; height: 40px; background-color: #f2f2f2; @@ -474,41 +435,41 @@ body { border-radius: 114px; margin: 0 auto 33px; } -.main .content .details-box .pattern .tab .item { +.content .details-box .pattern .tab .item { height: 100%; font-size: 16px; color: #555555; cursor: pointer; } -.main .content .details-box .pattern .tab .item.pitch { +.content .details-box .pattern .tab .item.pitch { background-color: #6fc16d; border-radius: 22px; color: #ffffff; } -.main .content .details-box .pattern .introduce .item { +.content .details-box .pattern .introduce .item { text-align: center; } -.main .content .details-box .pattern .introduce .item:not(:last-of-type) { +.content .details-box .pattern .introduce .item:not(:last-of-type) { border-right: 1px dotted #ebebeb; } -.main .content .details-box .pattern .introduce .item .value { +.content .details-box .pattern .introduce .item .value { font-size: 16px; color: #000000; font-family: "Arial-Black", "Arial Black", "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 900; margin-bottom: 14.5px; } -.main .content .details-box .pattern .introduce .item .name { +.content .details-box .pattern .introduce .item .name { font-size: 14px; color: #555555; } -.main .content .details-box .course { +.content .details-box .course { position: relative; padding-top: 19px; margin-bottom: 20px; font-size: 14px; } -.main .content .details-box .course .icon { +.content .details-box .course .icon { position: absolute; top: 0; left: 50%; @@ -516,7 +477,7 @@ body { width: 16px; height: 9px; } -.main .content .details-box .course .title { +.content .details-box .course .title { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; @@ -525,66 +486,66 @@ body { text-align: center; margin-bottom: 9px; } -.main .content .details-box .course .hint { +.content .details-box .course .hint { color: #555555; line-height: 22px; text-align: center; margin-bottom: 21px; } -.main .content .details-box .course .table-head { +.content .details-box .course .table-head { background-color: #f6f6f6; border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; } -.main .content .details-box .course .table-head .item { +.content .details-box .course .table-head .item { height: 40px; line-height: 40px; } -.main .content .details-box .course .table-body .list:not(:last-of-type) { +.content .details-box .course .table-body .list:not(:last-of-type) { border-bottom: 1px solid #ebebeb; } -.main .content .details-box .course .table-body .item { +.content .details-box .course .table-body .item { color: #333333; padding: 12px 4px; } -.main .content .details-box .course .table-body .item.name { +.content .details-box .course .table-body .item.name { color: #000000; text-align: left; } -.main .content .details-box .course .table-body .item.name .english { +.content .details-box .course .table-body .item.name .english { font-family: "Arial Normal", "Arial", sans-serif; color: #aaaaaa; } -.main .content .details-box .course .table-body .item.credit { +.content .details-box .course .table-body .item.credit { font-family: "Arial-Black", "Arial Black", sans-serif; font-weight: 900; font-style: normal; font-size: 14px; color: #000000; } -.main .content .details-box .course .item { +.content .details-box .course .item { text-align: center; } -.main .content .details-box .course .item.number { +.content .details-box .course .item.number { width: 134px; border-right: 1px solid #ebebeb; } -.main .content .details-box .course .item.name { +.content .details-box .course .item.name { border-right: 1px solid #ebebeb; } -.main .content .details-box .course .item.credit { +.content .details-box .course .item.credit { width: 80px; } -.main .content .details-box .link { +.content .details-box .link { font-size: 15px; padding: 17px 20px 24px 15px; } -.main .content .details-box .link.brochure .img { +.content .details-box .link.brochure .img { width: 70px; height: 70px; margin-right: 8px; } -.main .content .details-box .link.brochure .title { +.content .details-box .link.brochure .title { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; @@ -592,25 +553,25 @@ body { line-height: normal; margin-bottom: 10px; } -.main .content .details-box .link.brochure .name { +.content .details-box .link.brochure .name { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; font-size: 13px; color: #555555; } -.main .content .details-box .link .title { +.content .details-box .link .title { color: #000000; line-height: 34px; margin-bottom: 8px; } -.main .content .details-box .link .text { +.content .details-box .link .text { text-decoration: underline; line-height: 24px; color: #333333; margin-bottom: 20px; } -.main .content .details-box .link .btn { +.content .details-box .link .btn { width: 127px; height: 40px; line-height: 40px; @@ -621,12 +582,12 @@ body { color: #333333; margin-left: 10px; } -.main .content .details-box .link .btn .icon { +.content .details-box .link .btn .icon { width: 18px; height: 18px; margin-right: 6px; } -.main .content .details-box .link .btn.open { +.content .details-box .link .btn.open { border: none; background-color: #6fc16d; font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; @@ -634,11 +595,11 @@ body { font-style: normal; color: #ffffff; } -.main .content .details-box .degree { +.content .details-box .degree { text-align: center; padding: 16px 0 24px; } -.main .content .details-box .degree .title { +.content .details-box .degree .title { width: 103px; height: 30px; position: relative; @@ -647,7 +608,7 @@ body { color: #ffffff; margin: 0 auto 16px; } -.main .content .details-box .degree .title .icon { +.content .details-box .degree .title .icon { width: 103px; height: 30px; position: absolute; @@ -655,26 +616,26 @@ body { left: 0; z-index: -1; } -.main .content .details-box .degree .name { +.content .details-box .degree .name { font-size: 16px; color: #000000; line-height: 34px; margin-bottom: 10px; } -.main .content .details-box .degree .english { +.content .details-box .degree .english { font-size: 14px; color: #7f7f7f; } -.main .content .details-box .issue-bj { +.content .details-box .issue-bj { z-index: 1; position: relative; } -.main .content .details-box .issue-bj .issue { +.content .details-box .issue-bj .issue { padding: 0 26px 0 41px; margin-left: 5px; position: relative; } -.main .content .details-box .issue-bj .issue .index-bj { +.content .details-box .issue-bj .issue .index-bj { position: absolute; width: 27px; height: 24px; @@ -682,7 +643,7 @@ body { left: -5px; z-index: -1; } -.main .content .details-box .issue-bj .issue .index { +.content .details-box .issue-bj .issue .index { width: 30px; height: 26px; background-color: #f95d5d; @@ -694,7 +655,7 @@ body { top: 21px; left: -5px; } -.main .content .details-box .issue-bj .issue .title { +.content .details-box .issue-bj .issue .title { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; @@ -705,15 +666,14 @@ body { border-bottom: 1px dotted #ebebeb; line-height: 28px; } -.main .content .details-box .issue-bj .issue .text { +.content .details-box .issue-bj .issue .text { font-size: 15px; color: #555555; line-height: 32px; padding: 19px 0; } -.main .else { +.else { width: 290px; - height: 2000px; background: -webkit-linear-gradient(270.00883066deg, #f7fbf7 0%, #eaf6ea 100%); background: -moz-linear-gradient(179.99116934deg, #f7fbf7 0%, #eaf6ea 100%); background: linear-gradient(179.99116934deg, #f7fbf7 0%, #eaf6ea 100%); @@ -721,10 +681,10 @@ body { border-radius: 12px; padding: 20px 10px 0; } -.main .else .school { +.else .school { margin-bottom: 20px; } -.main .else .school .logo { +.else .school .logo { width: 50px; height: 50px; background-color: #ffffff; @@ -732,10 +692,10 @@ body { border-radius: 8px; margin-right: 10px; } -.main .else .school .logo .img { +.else .school .logo .img { height: 30px; } -.main .else .school .info .name { +.else .school .info .name { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; @@ -743,24 +703,26 @@ body { color: #000000; margin-bottom: 5px; } -.main .else .school .info .name-en { +.else .school .info .name-en { font-size: 13px; color: #555555; } -.main .else .case { +.else .case { width: 270px; background-color: #ffffff; border-radius: 8px; + margin-bottom: 20px; } -.main .else .case .head { +.else .case .head { width: 270px; height: 45px; border-bottom: 1px dotted #ebebeb; padding: 0 10px; - background: linear-gradient(to right, rgba(255, 255, 255, 0.501961), #d8f1d8); + background: linear-gradient(to right, #d8f1d8, rgba(255, 255, 255, 0.501961)); + border-radius: 8px 8px 0 0; overflow: hidden; } -.main .else .case .head .dot { +.else .case .head .dot { width: 14px; height: 14px; background-color: #e7f7ee; @@ -769,7 +731,7 @@ body { position: relative; margin-right: 10px; } -.main .else .case .head .dot::after { +.else .case .head .dot::after { content: ""; width: 6px; height: 6px; @@ -783,28 +745,81 @@ body { left: 50%; transform: translate(-50%, -50%); } -.main .else .case .head .text { +.else .case .head .text { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 16px; color: #000000; } -.main .else .case .head .img { +.else .case .head .img { width: 14px; height: 14px; + transform: rotate(270deg); } -.main .base { - width: 640px; - height: 60px; - border-radius: 153px; - position: fixed; - bottom: 30px; - left: 50%; - transform: translateX(-50%); - z-index: 2; +.else .case .list .item { + padding: 20px 10px; } -.main .base .type1 { +.else .case .list .item:not(:last-of-type) { + border-bottom: 1px solid #f6f6f6; +} +.else .case .list .item .name { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-size: 15px; + color: #000000; + margin-bottom: 8px; +} +.else .case .list .item .brief { + font-size: 14px; + color: #7f7f7f; +} +.else .case .list .item .brief span { + color: #d7d7d7; + margin: 0 8px; +} +.else .case.mj .list .item { + padding-top: 15px; +} +.else .case.mj .list .item:not(:last-of-type) { + border-bottom: 1px dotted #ebebeb; +} +.else .case.mj .list .name { + font-weight: 650; + font-style: normal; + font-size: 15px; + color: #000000; +} +.else .case.mj .list .brief-box { + padding: 10px 15px 10px 10px; + width: 251px; + border-radius: 6px; + background-color: #f7f7f7; +} +.else .case.mj .list .brief { + display: inline-block; + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + font-style: normal; + color: #555555; + line-height: 20px; + font-size: 13px; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; +} +.else .case.mj .list .brief .avatar { + width: 20px; + height: 20px; + margin-right: 5px; + vertical-align: bottom; +} +.base { + background-color: transparent; +} +.base .type1 { width: 100%; height: 100%; border-radius: 153px; @@ -813,20 +828,20 @@ body { font-size: 15px; color: #000000; } -.main .base .type1 .btn { +.base .type1 .btn { line-height: 50px; margin: 0 24px; } -.main .base .type1 .btn .img { +.base .type1 .btn .img { height: 20px; margin-right: 6px; } -.main .base .type1 .line { +.base .type1 .line { width: 1px; height: 20px; background-color: #d7d7d7; } -.main .base .type1 .add { +.base .type1 .add { height: 50px; line-height: 50px; text-align: center; @@ -838,19 +853,19 @@ body { color: #ffffff; margin-right: 5px; } -.main .base .type1 .add .img { +.base .type1 .add .img { width: 16px; height: 16px; margin-right: 10px; } -.main .base .type2 { +.base .type2 { width: 100%; height: 100%; background-color: #f2f2f2; border: 1px solid #d7d7d7; border-radius: 153px; } -.main .base .type2 .btn { +.base .type2 .btn { padding: 0 20px; height: 100%; margin-right: 20px; @@ -859,12 +874,12 @@ body { font-size: 15px; color: #000000; } -.main .base .type2 .btn .img { +.base .type2 .btn .img { width: 16px; height: 16px; margin-left: 7px; } -.main .base .type2 .input-box { +.base .type2 .input-box { width: 370px; height: 40px; margin-right: 10px; @@ -872,19 +887,19 @@ body { border-radius: 158px; overflow: hidden; } -.main .base .type2 .input-box .img { +.base .type2 .input-box .img { width: 20px; height: 20px; margin-left: 12px; margin-right: 6px; } -.main .base .type2 .input-box .input { +.base .type2 .input-box .input { height: 100%; padding-right: 20px; border: none; outline: none; } -.main .base .type2 .state-box .state-btn { +.base .type2 .state-box .state-btn { width: 100px; height: 40px; background-color: #f95d5d; @@ -893,19 +908,19 @@ body { color: #ffffff; cursor: pointer; } -.main .base .type2 .state-box .state-btn .img { +.base .type2 .state-box .state-btn .img { width: 11px; height: 6px; margin-left: 8px; } -.main .base .type3 { +.base .type3 { width: 100%; height: 100%; background-color: #f2f2f2; border: 1px solid #d7d7d7; border-radius: 153px; } -.main .base .type3 .btn { +.base .type3 .btn { padding: 0 20px; height: 100%; margin-right: 20px; @@ -914,12 +929,12 @@ body { font-size: 15px; color: #000000; } -.main .base .type3 .btn .img { +.base .type3 .btn .img { width: 16px; height: 16px; margin-left: 7px; } -.main .base .type3 .add-btn { +.base .type3 .add-btn { width: 235px; height: 40px; background-color: #7b8cd3; @@ -927,12 +942,12 @@ body { color: #ffffff; border-radius: 158px; } -.main .base .type3 .add-btn.already { +.base .type3 .add-btn.already { background-color: #fbfbfb; font-size: 16px; color: #aaaaaa; } -.main .base .type3 .add-btn .img { +.base .type3 .add-btn .img { width: 16px; height: 16px; margin-right: 10px; diff --git a/css/details.less b/css/details.less new file mode 100644 index 0000000..e1dc198 --- /dev/null +++ b/css/details.less @@ -0,0 +1,1091 @@ +.box { + width: 1200px; + background-color: rgba(251, 251, 251, 1); + border-radius: 12px; + position: relative; + margin-bottom: 20px; + + &::after { + content: ""; + position: absolute; + top: -5px; + left: 0; + width: 100%; + height: 66px; + background: -webkit-linear-gradient(0deg, rgba(123, 140, 211, 1) 0%, rgba(218, 227, 253, 1) 99%); + background: -moz-linear-gradient(90deg, rgba(123, 140, 211, 1) 0%, rgba(218, 227, 253, 1) 99%); + background: linear-gradient(90deg, rgba(123, 140, 211, 1) 0%, rgba(218, 227, 253, 1) 99%); + border-radius: 18px; + z-index: -1; + } + .tab { + height: 60px; + font-size: 14px; + color: #7f7f7f; + border-bottom: 1px dotted rgb(235, 235, 235); + padding-left: 24px; + .img { + width: 6px; + height: 10px; + margin: 0 15px; + } + + .current { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 14px; + color: #000000; + } + } + .details { + padding: 31px 60px; + .logo { + width: 120px; + height: 120px; + position: relative; + z-index: 1; + padding-right: 10px; + padding-bottom: 7px; + margin-right: 39px; + display: inline-flex; + } + + .right { + .name { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 32px; + color: #000000; + margin-bottom: 6px; + } + + .name-en { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 14px; + color: #7f7f7f; + margin-bottom: 15px; + } + + .school { + .icon { + height: 20px; + margin-right: 9px; + } + + font-size: 16px; + color: #333333; + margin-bottom: 15px; + + .line { + margin: 0 13px; + color: rgb(215, 215, 215); + } + } + + .word { + margin-bottom: 15px; + + .img { + width: 20px; + height: 14px; + margin-right: 6px; + margin-bottom: 8px; + } + font-size: 14px; + color: #7f7f7f; + } + + .tag { + .tag-item { + width: fit-content; + height: 24px; + line-height: 24px; + background-color: rgba(249, 248, 248, 1); + border: 1px solid rgba(170, 170, 170, 1); + border-radius: 6px; + padding: 0 9px; + font-size: 14px; + color: #7f7f7f; + margin-right: 10px; + + &.gray { + background-color: rgba(51, 51, 51, 1); + color: #ffffff; + } + + &.semester { + color: #ffffff; + background-color: rgba(249, 93, 93, 1); + } + } + } + } + } +} + +.body { + align-items: flex-start; +} + +.content { + height: 1214px; + background-color: rgba(255, 255, 255, 1); + border: 1px solid rgba(242, 242, 242, 1); + border-radius: 12px; + margin-right: 10px; + + .side { + border-radius: 12px 0 0 0; + width: 141px; + height: 500px; + overflow: hidden; + flex-direction: column; + .item { + width: 100%; + height: 56px; + font-size: 15px; + color: #555555; + cursor: pointer; + border-right: 1px solid rgba(235, 235, 235, 1); + + &.pitch { + &:first-of-type { + border-top: none; + } + background-color: rgba(251, 251, 251, 1); + border-top: 1px solid rgba(235, 235, 235, 1); + border-bottom: 1px solid rgba(235, 235, 235, 1); + border-right: none; + + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 15px; + color: #000000; + position: relative; + &::after { + content: ""; + width: 5px; + height: 100%; + display: block; + background-color: rgba(111, 193, 109, 1); + position: absolute; + left: 0; + top: 0; + } + } + } + } + + .details-box { + padding-top: 40px; + padding-left: 50px; + padding-right: 30px; + background-color: #fbfbfb; + border-radius: 0 12px 0 0; + + .block { + background-color: rgba(255, 255, 255, 1); + border: 1px solid rgba(235, 235, 235, 1); + border-radius: 12px; + } + + .item-header { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 16px; + color: #000000; + justify-content: space-between; + margin-bottom: 22px; + position: relative; + &::after { + content: ""; + width: 6px; + height: 16px; + background-color: rgba(253, 223, 109, 1); + border: 1px solid rgba(202, 177, 87, 1); + border-radius: 5px; + margin-right: 14px; + position: absolute; + top: 4px; + left: -20px; + display: block; + box-sizing: border-box; + } + + .list-btn { + font-weight: 400; + font-size: 14px; + color: #000000; + .icon { + width: 16px; + height: 16px; + margin-left: 8px; + } + } + } + + .ranking { + margin-bottom: 40px; + .item { + height: 76px; + border: 1px solid rgba(235, 235, 235, 1); + border-radius: 6px; + overflow: hidden; + + &:not(:last-of-type) { + margin-bottom: 10px; + } + .rank { + background-color: rgba(255, 255, 255, 1); + padding: 0 22px; + justify-content: space-between; + .logo { + height: 24px; + } + .number { + width: 90px; + height: 30px; + line-height: 30px; + background-color: rgba(247, 166, 2, 1); + border-radius: 4px; + font-family: "Arial-Black", "Arial Black", sans-serif; + font-weight: 900; + font-size: 18px; + color: #ffffff; + .triangle { + } + } + } + + .rank-box { + background-color: rgba(246, 246, 246, 1); + flex-direction: column; + justify-content: center; + + .itemm { + font-size: 14px; + padding-left: 20px; + .key { + color: #7f7f7f; + } + .value { + color: #333333; + } + + &:first-of-type { + margin-bottom: 9px; + } + } + } + } + } + + .application-schedule { + margin-bottom: 40px; + .list { + .time { + padding-top: 19px; + padding-bottom: 22px; + text-align: center; + + .item { + &:first-of-type { + border-right: 1px dotted rgb(235, 235, 235); + } + .name { + font-size: 16px; + color: #000000; + font-family: "Arial-Black", "Arial Black", sans-serif; + font-weight: 900; + margin-bottom: 14px; + } + + .value { + font-size: 14px; + color: #555555; + } + } + } + } + .application-else { + background-color: rgba(246, 246, 246, 1); + border-radius: 6px; + padding: 14px 10px; + margin: 0 20px 20px; + + .item { + &:not(:last-of-type) { + margin-bottom: 10px; + } + + .name { + font-size: 14px; + color: #7f7f7f; + margin-right: 11px; + } + + .value { + font-size: 14px; + color: #333333; + } + } + } + } + + .demand { + margin-bottom: 40px; + padding: 17px 20px; + + .text { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 15px; + color: #000000; + line-height: 32px; + word-break: break-word; + white-space: pre-line; + margin-bottom: 32px; + } + + .title { + font-weight: 650; + font-style: normal; + font-size: 18px; + color: #000000; + margin-bottom: 10px; + } + + .hint { + font-size: 15px; + color: #333333; + margin-bottom: 21px; + } + + .list { + .item { + background-color: rgba(246, 246, 246, 1); + border-radius: 6px; + padding: 14px 0 14px 28px; + position: relative; + flex-direction: column; + justify-content: center; + + .triangle { + position: absolute; + transform: rotate(270deg); + top: 27px; + left: 7px; + } + + &:not(:last-of-type) { + margin-bottom: 10px; + } + + .name { + font-size: 15px; + color: #7f7f7f; + margin-bottom: 8px; + } + + .value { + font-size: 16px; + color: #000000; + } + } + } + } + + .tuition { + width: 451px; + height: 140px; + padding-right: 10px; + .tuition-left { + height: 100%; + position: relative; + .unit { + position: absolute; + top: 10px; + left: 10px; + width: 42px; + height: 20px; + background-color: rgba(249, 93, 93, 1); + border-radius: 15px; + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + font-size: 14px; + color: #ffffff; + text-align: center; + } + flex-direction: column; + + .number { + font-family: "Arial-Black", "Arial Black", sans-serif; + font-weight: 900; + font-style: normal; + font-size: 20px; + color: #000000; + margin-bottom: 9px; + text-align: center; + } + + .text { + font-size: 15px; + color: #555555; + text-align: center; + } + } + + .tuition-right { + width: 240px; + height: 120px; + background-color: rgba(246, 246, 246, 1); + border-radius: 6px; + + padding: 16px 11px; + .item { + justify-content: space-between; + &:not(:last-of-type) { + margin-bottom: 12px; + } + .key { + font-size: 15px; + color: #555555; + } + .value { + font-family: "Arial-Black", "Arial Black", sans-serif; + font-weight: 900; + font-style: normal; + font-size: 16px; + color: #000000; + } + } + } + } + + .tuition-scholarships { + margin-bottom: 40px; + + .left { + margin-right: 39px; + } + + .right { + .scholarships { + width: 180px; + height: 140px; + font-size: 15px; + color: #000000; + line-height: 34px; + text-align: center; + } + } + } + + .pattern { + padding: 20px 16px 33px; + .tab { + width: 180px; + height: 40px; + background-color: rgba(242, 242, 242, 1); + border: 1px solid rgba(235, 235, 235, 1); + border-radius: 114px; + margin: 0 auto 33px; + + .item { + height: 100%; + font-size: 16px; + color: #555555; + cursor: pointer; + &.pitch { + background-color: rgba(111, 193, 109, 1); + border-radius: 22px; + color: #ffffff; + } + } + } + + .introduce { + .item { + text-align: center; + + &:not(:last-of-type) { + border-right: 1px dotted rgb(235, 235, 235); + } + + .value { + font-size: 16px; + color: #000000; + font-family: "Arial-Black", "Arial Black", "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 900; + margin-bottom: 14.5px; + } + + .name { + font-size: 14px; + color: #555555; + } + } + } + } + + .course { + position: relative; + padding-top: 19px; + margin-bottom: 20px; + + .icon { + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + width: 16px; + height: 9px; + } + + .title { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 18px; + color: #000000; + text-align: center; + margin-bottom: 9px; + } + + .hint { + color: #555555; + line-height: 22px; + text-align: center; + margin-bottom: 21px; + } + font-size: 14px; + .table-head { + background-color: rgb(246, 246, 246); + border-top: 1px solid rgb(235, 235, 235); + border-bottom: 1px solid rgb(235, 235, 235); + .item { + height: 40px; + line-height: 40px; + } + } + + .table-body { + .list { + &:not(:last-of-type) { + border-bottom: 1px solid #ebebeb; + } + } + .item { + // height: 100%; + color: #333333; + padding: 12px 4px; + + &.name { + color: #000000; + .english { + font-family: "Arial Normal", "Arial", sans-serif; + color: #aaaaaa; + } + text-align: left; + } + + &.credit { + font-family: "Arial-Black", "Arial Black", sans-serif; + font-weight: 900; + font-style: normal; + font-size: 14px; + color: #000000; + } + } + } + + .item { + text-align: center; + &.number { + width: 134px; + border-right: 1px solid rgb(235, 235, 235); + } + + &.name { + border-right: 1px solid rgb(235, 235, 235); + } + + &.credit { + width: 80px; + } + } + } + + .link { + font-size: 15px; + padding: 17px 20px 24px 15px; + &.brochure { + .img { + width: 70px; + height: 70px; + margin-right: 8px; + } + .title { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + color: #000000; + line-height: normal; + margin-bottom: 10px; + } + .name { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 13px; + color: #555555; + } + } + .title { + color: #000000; + line-height: 34px; + margin-bottom: 8px; + } + .text { + text-decoration: underline; + text-decoration: underline; + line-height: 24px; + color: #333333; + margin-bottom: 20px; + } + + .btn { + width: 127px; + height: 40px; + line-height: 40px; + cursor: pointer; + background-color: rgba(246, 246, 246, 1); + border: 1px solid rgba(215, 215, 215, 1); + border-radius: 115px; + color: #333333; + margin-left: 10px; + .icon { + width: 18px; + height: 18px; + margin-right: 6px; + } + + &.open { + border: none; + background-color: rgba(111, 193, 109, 1); + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + color: #ffffff; + } + } + } + + .degree { + text-align: center; + padding: 16px 0 24px; + + .title { + width: 103px; + height: 30px; + position: relative; + z-index: 1; + font-size: 16px; + color: #ffffff; + margin: 0 auto 16px; + .icon { + width: 103px; + height: 30px; + position: absolute; + top: 0; + left: 0; + z-index: -1; + } + } + + .name { + font-size: 16px; + color: #000000; + line-height: 34px; + margin-bottom: 10px; + } + + .english { + font-size: 14px; + color: #7f7f7f; + } + } + + .issue-bj { + z-index: 1; + position: relative; + .issue { + padding: 0 26px 0 41px; + margin-left: 5px; + position: relative; + .index-bj { + position: absolute; + width: 27px; + height: 24px; + top: 35px; + left: -5px; + z-index: -1; + } + .index { + width: 30px; + height: 26px; + background-color: rgba(249, 93, 93, 1); + border-radius: 0 5px 5px 0; + font-family: "Arial-Black", "Arial Black", sans-serif; + font-weight: 900; + color: #ffffff; + position: absolute; + top: 21px; + left: -5px; + } + .title { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 15px; + color: #000000; + padding-top: 20px; + padding-bottom: 15px; + border-bottom: 1px dotted rgb(235, 235, 235); + line-height: 28px; + } + + .text { + font-size: 15px; + color: #555555; + line-height: 32px; + padding: 19px 0; + } + } + } + } +} + +.else { + width: 290px; + background: -webkit-linear-gradient(270.008830663227deg, rgba(247, 251, 247, 1) 0%, rgba(234, 246, 234, 1) 100%); + background: -moz-linear-gradient(179.991169336773deg, rgba(247, 251, 247, 1) 0%, rgba(234, 246, 234, 1) 100%); + background: linear-gradient(179.991169336773deg, rgba(247, 251, 247, 1) 0%, rgba(234, 246, 234, 1) 100%); + border: none; + border-radius: 12px; + padding: 20px 10px 0; + + .school { + margin-bottom: 20px; + + .logo { + width: 50px; + height: 50px; + background-color: rgba(255, 255, 255, 1); + border: 1px solid rgba(246, 246, 246, 1); + border-radius: 8px; + margin-right: 10px; + .img { + height: 30px; + } + } + .info { + .name { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 18px; + color: #000000; + margin-bottom: 5px; + } + + .name-en { + font-size: 13px; + color: #555555; + } + } + } + + .case { + width: 270px; + background-color: #ffffff; + border-radius: 8px; + margin-bottom: 20px; + .head { + width: 270px; + height: 45px; + border-bottom: 1px dotted rgb(235, 235, 235); + padding: 0 10px; + background: linear-gradient(to right, #d8f1d8, rgba(255, 255, 255, 0.501961)); + border-radius: 8px 8px 0 0; + overflow: hidden; + .dot { + width: 14px; + height: 14px; + background-color: rgba(231, 247, 238, 1); + border: 1px solid rgba(183, 196, 189, 1); + border-radius: 39px; + position: relative; + margin-right: 10px; + &::after { + content: ""; + width: 6px; + height: 6px; + display: block; + background-color: rgba(114, 219, 134, 1); + border: 1px solid rgba(87, 168, 105, 1); + border-radius: 39px; + box-sizing: border-box; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + } + + .text { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 16px; + color: #000000; + } + + .img { + width: 14px; + height: 14px; + transform: rotate(270deg); + } + } + + .list { + .item { + &:not(:last-of-type) { + border-bottom: 1px solid rgb(246, 246, 246); + } + padding: 20px 10px; + .name { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-size: 15px; + color: #000000; + margin-bottom: 8px; + } + .brief { + font-size: 14px; + color: #7f7f7f; + + span { + color: #d7d7d7; + margin: 0 8px; + } + } + } + } + + &.mj { + .list { + .item { + padding-top: 15px; + &:not(:last-of-type) { + border-bottom: 1px dotted rgb(235, 235, 235); + } + } + .name { + font-weight: 650; + font-style: normal; + font-size: 15px; + color: #000000; + } + .brief-box { + padding: 10px 15px 10px 10px; + width: 251px; + border-radius: 6px; + background-color: rgba(247, 247, 247, 1); + + } + .brief { + display: inline-block; + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + font-style: normal; + color: #555555; + line-height: 20px; + font-size: 13px; + + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + + .avatar { + width: 20px; + height: 20px; + margin-right: 5px; + vertical-align: bottom; + } + } + } + } + } +} + +.base { + background-color: transparent; + + .type1 { + width: 100%; + height: 100%; + border-radius: 153px; + border: 1px solid rgb(219, 224, 242); + background: linear-gradient(to right, rgb(238, 247, 245), rgb(219, 227, 253)); + font-size: 15px; + color: #000000; + + .btn { + line-height: 50px; + margin: 0 24px; + + .img { + height: 20px; + margin-right: 6px; + } + } + + .line { + width: 1px; + height: 20px; + background-color: rgb(215, 215, 215); + } + + .add { + height: 50px; + line-height: 50px; + text-align: center; + background-color: rgba(123, 140, 211, 1); + border-radius: 158px; + font-weight: 400; + font-style: normal; + font-size: 15px; + color: #ffffff; + margin-right: 5px; + .img { + width: 16px; + height: 16px; + margin-right: 10px; + } + } + } + + .type2 { + width: 100%; + height: 100%; + background-color: rgba(242, 242, 242, 1); + border: 1px solid rgba(215, 215, 215, 1); + border-radius: 153px; + + .btn { + padding: 0 20px; + height: 100%; + margin-right: 20px; + border-right: 1px solid rgb(215, 215, 215); + cursor: pointer; + font-size: 15px; + color: #000000; + .img { + width: 16px; + height: 16px; + margin-left: 7px; + } + } + + .input-box { + width: 370px; + height: 40px; + margin-right: 10px; + background-color: rgba(255, 255, 255, 1); + border-radius: 158px; + overflow: hidden; + .img { + width: 20px; + height: 20px; + margin-left: 12px; + margin-right: 6px; + } + .input { + height: 100%; + padding-right: 20px; + border: none; + outline: none; + } + } + + .state-box { + .state-btn { + width: 100px; + height: 40px; + background-color: rgba(249, 93, 93, 1); + border-radius: 158px; + font-size: 15px; + color: #ffffff; + cursor: pointer; + .img { + width: 11px; + height: 6px; + margin-left: 8px; + } + } + } + } + + .type3 { + width: 100%; + height: 100%; + background-color: rgba(242, 242, 242, 1); + border: 1px solid rgba(215, 215, 215, 1); + border-radius: 153px; + + .btn { + padding: 0 20px; + height: 100%; + margin-right: 20px; + border-right: 1px solid rgb(215, 215, 215); + cursor: pointer; + font-size: 15px; + color: #000000; + + .img { + width: 16px; + height: 16px; + margin-left: 7px; + } + } + + .add-btn { + width: 235px; + height: 40px; + background-color: rgba(123, 140, 211, 1); + font-size: 15px; + color: #ffffff; + border-radius: 158px; + &.already { + background-color: rgba(251, 251, 251, 1); + font-size: 16px; + color: #aaaaaa; + } + .img { + width: 16px; + height: 16px; + margin-right: 10px; + } + } + } +} diff --git a/01-index/index.css b/css/index.css similarity index 64% rename from 01-index/index.css rename to css/index.css index e972887..14609a0 100644 --- a/01-index/index.css +++ b/css/index.css @@ -1,46 +1,4 @@ -* { - padding: 0; - margin: 0; - box-sizing: border-box; -} -.flexflex { - display: flex; -} -.flexcenter { - display: flex; - justify-content: center; - align-items: center; -} -.flexjcenter { - display: flex; - justify-content: center; -} -.flexacenter { - display: flex; - align-items: center; -} -.flex1 { - flex: 1; -} -.flexcolumn { - display: flex; - flex-direction: column; -} -body { - background-color: #eef2f5; - font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; -} -.main { - width: 1200px; - margin: 0 auto; -} -.main .index-icon { - width: 184px; - height: 42px; - margin-top: 37px; - margin-bottom: 40px; -} -.main .header-box { +.header-box { width: 100%; height: 130px; padding: 0 50px; @@ -49,7 +7,7 @@ body { position: relative; margin-bottom: 20px; } -.main .header-box:before { +.header-box:before { content: ""; position: absolute; top: 0; @@ -60,13 +18,13 @@ body { background-image: linear-gradient(to right, rgba(60, 26, 94, 0.717647), rgba(53, 60, 90, 0.886275)); z-index: -1; } -.main .header-box .bj { +.header-box .bj { position: absolute; top: 0; left: 0; z-index: -2; } -.main .header-box .search { +.header-box .search { width: 610px; height: 48px; background-color: rgba(255, 255, 255, 0.4); @@ -74,17 +32,17 @@ body { padding: 0 20px; cursor: pointer; } -.main .header-box .search .input { +.header-box .search .input { height: 48px; line-height: 48px; background-color: transparent; color: #ffffff; } -.main .header-box .search .search-icon { +.header-box .search .search-icon { width: 22px; height: 22px; } -.main .header-box .btn .item { +.header-box .btn .item { width: 160px; height: 40px; background: -webkit-linear-gradient(194.03624347deg, #dbe3fd 0%, #eef7f5 100%); @@ -96,35 +54,35 @@ body { color: #000000; cursor: pointer; } -.main .header-box .btn .item .icon { +.header-box .btn .item .icon { height: 22px; margin-right: 8px; } -.main .screen { +.screen { margin-bottom: 20px; } -.main .screen .block { +.screen .block { background-color: #ffffff; border-radius: 12px; padding: 24px 34px 32px; } -.main .screen .block .title { +.screen .block .title { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-size: 18px; color: #000000; margin-bottom: 26px; } -.main .screen .block .title .icon { +.screen .block .title .icon { width: 40px; height: 40px; border-radius: 50%; margin-right: 10px; } -.main .screen .block .title .icon .img { +.screen .block .title .icon .img { width: 24px; } -.main .screen .block .list .item { +.screen .block .list .item { width: fit-content; height: 36px; line-height: 36px; @@ -135,43 +93,43 @@ body { color: #333; cursor: pointer; } -.main .screen .block.school { +.screen .block.school { width: 500px; margin-right: 20px; } -.main .screen .block.school .title .icon { +.screen .block.school .title .icon { background-color: #d5f1f7; } -.main .screen .block.school .list { +.screen .block.school .list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } -.main .screen .block.school .list .item { +.screen .block.school .list .item { width: 78px; } -.main .screen .block.subject { +.screen .block.subject { padding-bottom: 22px; } -.main .screen .block.subject .title .icon { +.screen .block.subject .title .icon { background-color: #fdefbc; } -.main .screen .block.subject .list { +.screen .block.subject .list { flex-wrap: wrap; } -.main .screen .block.subject .list .item { +.screen .block.subject .list .item { padding: 0 17px; margin-right: 10px; margin-bottom: 10px; } -.main .fate { +.fate { width: 100%; background-color: #ffffff; border-radius: 12px; margin-bottom: 20px; padding: 31px 37px 10px; } -.main .fate .title { +.fate .title { justify-content: space-between; font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; @@ -179,32 +137,32 @@ body { color: #000000; margin-bottom: 6px; } -.main .fate .title .btn { +.fate .title .btn { font-weight: 400; color: #555555; font-size: 14px; cursor: pointer; } -.main .fate .title .btn .icon { +.fate .title .btn .icon { width: 16px; height: 16px; margin-right: 8px; } -.main .fate .list { +.fate .list { justify-content: space-between; flex-wrap: wrap; } -.main .fate .list .item { +.fate .list .item { width: 530px; margin-left: 20px; padding-top: 22px; padding-bottom: 22px; justify-content: space-between; } -.main .fate .list .item:not(:nth-last-child(-n + 2)) { +.fate .list .item:not(:nth-last-child(-n + 2)) { border-bottom: 1px dotted #ebebeb; } -.main .fate .list .item .left .name { +.fate .list .item .left .name { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-size: 16px; @@ -212,7 +170,7 @@ body { margin-bottom: 6px; position: relative; } -.main .fate .list .item .left .name::after { +.fate .list .item .left .name::after { content: ""; position: absolute; top: 50%; @@ -224,14 +182,14 @@ body { border: 1px solid #d7d7d7; border-radius: 39px; } -.main .fate .list .item .left .message { +.fate .list .item .left .message { color: #7f7f7f; font-size: 14px; } -.main .fate .list .item .left .message .virgule { +.fate .list .item .left .message .virgule { color: #d7d7d7; } -.main .fate .list .item .btn { +.fate .list .item .btn { width: 110px; height: 32px; background: -webkit-linear-gradient(196.2201937deg, #dbe3fd 0%, #eef7f5 100%); @@ -242,7 +200,7 @@ body { color: #000000; cursor: pointer; } -.main .fate .list .item .btn .add { +.fate .list .item .btn .add { width: 24px; height: 24px; background-color: #ffffff; @@ -250,11 +208,11 @@ body { border-radius: 20px; margin: 0 3px; } -.main .fate .list .item .btn .add .icon { +.fate .list .item .btn .add .icon { width: 10px; height: 10px; } -.main .recruit { +.recruit { width: 100%; height: 502px; background: linear-gradient(-36.49404556deg, #cfe0f9 -23%, #f1f2df 39%, #eef7f5 114%); @@ -263,35 +221,35 @@ body { padding: 24px 30px 24px; margin-bottom: 20px; } -.main .recruit .title { +.recruit .title { justify-content: space-between; margin-bottom: 20px; } -.main .recruit .title .img { +.recruit .title .img { width: 100px; height: 26px; } -.main .recruit .title .btn { +.recruit .title .btn { font-size: 14px; color: #333333; cursor: pointer; } -.main .recruit .title .btn .icon { +.recruit .title .btn .icon { width: 16px; height: 16px; margin-left: 7px; transform: rotate(270deg); } -.main .recruit .list { +.recruit .list { overflow: hidden; margin-bottom: 20px; } -.main .recruit .list .list-item { +.recruit .list .list-item { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } -.main .recruit .list .item { +.recruit .list .item { width: 565px; height: 180px; background-color: #ffffff; @@ -301,29 +259,29 @@ body { align-items: flex-start; position: relative; } -.main .recruit .list .item .avatar { +.recruit .list .item .avatar { width: 32px; object-fit: contain; margin-right: 10px; } -.main .recruit .list .item .info .school { +.recruit .list .item .info .school { font-size: 14px; color: #333333; margin-bottom: 10px; } -.main .recruit .list .item .info .name { +.recruit .list .item .info .name { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-size: 16px; color: #000000; margin-bottom: 10px; } -.main .recruit .list .item .info .name-en { +.recruit .list .item .info .name-en { font-size: 14px; color: #7f7f7f; margin-bottom: 15px; } -.main .recruit .list .item .info .aq { +.recruit .list .item .info .aq { width: 477px; height: 36px; line-height: 36px; @@ -331,26 +289,26 @@ body { border-radius: 3px; padding: 0 10px; } -.main .recruit .list .item .info .aq .text { +.recruit .list .item .info .aq .text { font-size: 14px; color: #e4c762; margin-right: 10px; } -.main .recruit .list .item .info .aq .value { +.recruit .list .item .info .aq .value { font-size: 15px; color: #333333; } -.main .recruit .list .item .info .aq .icon { +.recruit .list .item .info .aq .icon { width: 20px; height: 20px; } -.main .recruit .list .item .operate { +.recruit .list .item .operate { position: relative; position: absolute; top: 24px; right: 24px; } -.main .recruit .list .item .operate .circle { +.recruit .list .item .operate .circle { position: relative; z-index: 1; cursor: pointer; @@ -360,15 +318,15 @@ body { border: 1px solid #afb5ca; border-radius: 20px; } -.main .recruit .list .item .operate .circle .img-add { +.recruit .list .item .operate .circle .img-add { width: 12px; height: 12px; } -.main .recruit .list .item .operate .circle .img-dot { +.recruit .list .item .operate .circle .img-dot { width: 18px; height: 8px; } -.main .recruit .list .item .operate .select { +.recruit .list .item .operate .select { position: absolute; right: -24px; top: -24px; @@ -385,17 +343,17 @@ body { flex-direction: column; align-items: center; } -.main .recruit .list .item .operate .select.show { +.recruit .list .item .operate .select.show { height: 180px; opacity: 1; } -.main .recruit .list .item .operate .select .title { +.recruit .list .item .operate .select .title { font-size: 14px; color: #7f7f7f; margin-top: 75px; margin-bottom: 19px; } -.main .recruit .list .item .operate .select .title .dot { +.recruit .list .item .operate .select .title .dot { width: 8px; height: 8px; border-radius: 50%; @@ -403,7 +361,7 @@ body { background-color: #fddf6d; margin-right: 5px; } -.main .recruit .list .item .operate .select .btn { +.recruit .list .item .operate .select .btn { cursor: pointer; width: 144px; height: 36px; @@ -414,16 +372,16 @@ body { font-size: 14px; color: #333333; } -.main .recruit .list .item .operate .select .btn .img { +.recruit .list .item .operate .select .btn .img { width: 16px; height: 16px; margin-right: 8px; } -.main .recruit .list .item .operate .already { +.recruit .list .item .operate .already { font-size: 14px; color: #7f7f7f; } -.main .recruit .list .item .operate .already .tick-box { +.recruit .list .item .operate .already .tick-box { width: 20px; height: 20px; background-color: #f6f6f6; @@ -431,44 +389,44 @@ body { border-radius: 20px; margin-right: 5px; } -.main .recruit .list .item .operate .already .tick-box .img-tick { +.recruit .list .item .operate .already .tick-box .img-tick { width: 10px; height: 8px; } -.main .recruit .indicate { +.recruit .indicate { line-height: 12px; } -.main .recruit .indicate .icon { +.recruit .indicate .icon { width: 7px; height: 12px; cursor: pointer; } -.main .recruit .indicate .text { +.recruit .indicate .text { color: #555555; font-size: 13px; margin: 0 12px; } -.main .data .fall { +.data .fall { width: 285px; display: block; } -.main .data .item { +.data .item { width: 285px; background-color: #ffffff; border: 1px solid #ebebeb; border-radius: 12px; padding: 21px 15px 0; } -.main .data .item .school { +.data .item .school { font-size: 14px; color: #333333; margin-bottom: 12px; } -.main .data .item .school .img { +.data .item .school .img { height: 20px; margin-right: 8px; } -.main .data .item .name { +.data .item .name { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; @@ -476,7 +434,7 @@ body { color: #000000; margin-bottom: 12px; } -.main .data .item .name-en { +.data .item .name-en { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; @@ -484,22 +442,22 @@ body { color: #555555; margin-bottom: 12px; } -.main .data .item .introduce { +.data .item .introduce { color: #555555; font-size: 14px; margin-bottom: 12px; } -.main .data .item .introduce .quantity { +.data .item .introduce .quantity { font-family: "Arial-Black", "Arial Black", sans-serif; font-weight: 900; color: #000000; margin-left: 8px; } -.main .data .item .introduce .line { +.data .item .introduce .line { color: #d7d7d7; margin: 0 10px; } -.main .data .item .word { +.data .item .word { background-color: #f9f8f8; border-radius: 3px; padding: 10px 15px; @@ -507,7 +465,7 @@ body { color: #7f7f7f; margin-bottom: 12px; } -.main .data .item .tag .tag-item { +.data .item .tag .tag-item { width: fit-content; height: 24px; line-height: 24px; @@ -519,19 +477,19 @@ body { color: #7f7f7f; margin-right: 10px; } -.main .data .item .tag .tag-item.gray { +.data .item .tag .tag-item.gray { background-color: #333333; color: #ffffff; } -.main .data .item .tag .tag-item.semester { +.data .item .tag .tag-item.semester { color: #ffffff; background-color: #f95d5d; } -.main .data .item .operate { +.data .item .operate { height: 80px; position: relative; } -.main .data .item .operate .circle { +.data .item .operate .circle { position: relative; z-index: 1; cursor: pointer; @@ -541,15 +499,15 @@ body { border: 1px solid #afb5ca; border-radius: 20px; } -.main .data .item .operate .circle .img-add { +.data .item .operate .circle .img-add { width: 12px; height: 12px; } -.main .data .item .operate .circle .img-dot { +.data .item .operate .circle .img-dot { width: 18px; height: 8px; } -.main .data .item .operate .select { +.data .item .operate .select { position: absolute; bottom: 0; width: 285px; @@ -564,19 +522,19 @@ body { opacity: 0; height: 0; } -.main .data .item .operate .select.show { +.data .item .operate .select.show { height: 211px; opacity: 1; } -.main .data .item .operate .select .top { +.data .item .operate .select .top { flex-direction: column; } -.main .data .item .operate .select .top .title { +.data .item .operate .select .top .title { font-size: 14px; color: #7f7f7f; margin-bottom: 19px; } -.main .data .item .operate .select .top .title .dot { +.data .item .operate .select .top .title .dot { width: 8px; height: 8px; border-radius: 50%; @@ -584,7 +542,7 @@ body { background-color: #fddf6d; margin-right: 5px; } -.main .data .item .operate .select .top .btn { +.data .item .operate .select .top .btn { cursor: pointer; width: 144px; height: 36px; @@ -595,20 +553,20 @@ body { font-size: 14px; color: #333333; } -.main .data .item .operate .select .top .btn .img { +.data .item .operate .select .top .btn .img { width: 16px; height: 16px; margin-right: 8px; } -.main .data .item .operate .select .bottom { +.data .item .operate .select .bottom { border-top: 1px dotted #ebebeb; height: 80px; } -.main .data .item .operate .already { +.data .item .operate .already { font-size: 14px; color: #7f7f7f; } -.main .data .item .operate .already .tick-box { +.data .item .operate .already .tick-box { width: 20px; height: 20px; background-color: #f6f6f6; @@ -616,62 +574,7 @@ body { border-radius: 20px; margin-right: 5px; } -.main .data .item .operate .already .tick-box .img-tick { +.data .item .operate .already .tick-box .img-tick { width: 10px; height: 8px; } -.main .base { - width: 640px; - height: 60px; - background-color: #7b8cd3; - border-radius: 153px; - position: fixed; - bottom: 15px; - left: 50%; - transform: translateX(-50%); -} -.main .base .left { - width: 450px; - height: 50px; - background-color: #fff; - border-radius: 153px 15px 15px 153px; - margin-right: 5px; - padding: 0 20px; -} -.main .base .left .text { - font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; - font-weight: 400; - font-style: normal; - font-size: 16px; - color: rgba(170, 170, 170, 0.90196078); -} -.main .base .left .img { - width: 20px; - height: 20px; -} -.main .base .rigth { - width: 175px; - height: 50px; - background-color: #fff; - border-radius: 15px 153px 153px 15px; - padding-left: 19px; -} -.main .base .rigth .img { - width: 25px; - height: 22px; - margin-right: 5px; -} -.main .base .rigth .text { - font-size: 16px; - color: #333333; - margin-right: 9px; -} -.main .base .rigth .number { - height: 20px; - line-height: 20px; - background-color: #f2f2f2; - border-radius: 150px; - font-size: 13px; - color: #f95d5d; - padding: 0 8px; -} diff --git a/css/index.less b/css/index.less new file mode 100644 index 0000000..122e04b --- /dev/null +++ b/css/index.less @@ -0,0 +1,648 @@ +.header-box { + width: 100%; + height: 130px; + padding: 0 50px; + border-radius: 12px; + justify-content: space-between; + position: relative; + margin-bottom: 20px; + + &:before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 12px; + background-image: linear-gradient(to right, rgba(60, 26, 94, 0.717647), rgba(53, 60, 90, 0.886275)); + z-index: -1; + } + + .bj { + position: absolute; + top: 0; + left: 0; + z-index: -2; + } + + .search { + width: 610px; + height: 48px; + background-color: rgba(255, 255, 255, 0.4); + border-radius: 183px; + padding: 0 20px; + cursor: pointer; + .input { + height: 48px; + line-height: 48px; + background-color: transparent; + color: #ffffff; + } + + .search-icon { + width: 22px; + height: 22px; + } + } + + .btn { + .item { + width: 160px; + height: 40px; + background: -webkit-linear-gradient(194.036243467926deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); + background: -moz-linear-gradient(255.963756532074deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); + background: linear-gradient(255.963756532074deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); + border-radius: 70px; + margin-left: 20px; + font-size: 16px; + color: #000000; + cursor: pointer; + + .icon { + height: 22px; + margin-right: 8px; + } + } + } +} +.screen { + margin-bottom: 20px; + + .block { + // height: 250px; + background-color: rgba(255, 255, 255, 1); + border-radius: 12px; + padding: 24px 34px 32px; + + .title { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-size: 18px; + color: #000000; + margin-bottom: 26px; + + .icon { + width: 40px; + height: 40px; + border-radius: 50%; + margin-right: 10px; + .img { + width: 24px; + } + } + } + + .list { + .item { + width: fit-content; + height: 36px; + line-height: 36px; + background-color: rgba(251, 251, 251, 1); + border: 1px solid rgba(235, 235, 235, 1); + border-radius: 12px; + font-size: 14px; + color: #333; + cursor: pointer; + } + } + + &.school { + width: 500px; + margin-right: 20px; + .title { + .icon { + background-color: rgb(213, 241, 247); + } + } + + .list { + display: grid; + grid-template-columns: repeat(5, 1fr); + gap: 10px; + .item { + width: 78px; + } + } + } + + &.subject { + padding-bottom: 22px; + .title { + .icon { + background-color: rgb(253, 239, 188); + } + } + + .list { + flex-wrap: wrap; + .item { + padding: 0 17px; + margin-right: 10px; + margin-bottom: 10px; + } + } + } + } +} + +.fate { + width: 100%; + background-color: rgba(255, 255, 255, 1); + border-radius: 12px; + margin-bottom: 20px; + padding: 31px 37px 10px; + + .title { + justify-content: space-between; + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-size: 18px; + color: #000000; + margin-bottom: 6px; + + .btn { + font-weight: 400; + color: #555555; + font-size: 14px; + cursor: pointer; + + .icon { + width: 16px; + height: 16px; + margin-right: 8px; + } + } + } + + .list { + justify-content: space-between; + flex-wrap: wrap; + .item { + width: 530px; + margin-left: 20px; + padding-top: 22px; + padding-bottom: 22px; + justify-content: space-between; + &:not(:nth-last-child(-n + 2)) { + border-bottom: 1px dotted rgb(235, 235, 235); + } + .left { + .name { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + font-size: 16px; + color: #000000; + margin-bottom: 6px; + + position: relative; + + &::after { + content: ""; + position: absolute; + top: 50%; + left: -20px; + transform: translateY(-50%); + width: 8px; + height: 8px; + background-color: rgba(242, 242, 242, 1); + border: 1px solid rgba(215, 215, 215, 1); + border-radius: 39px; + } + } + .message { + color: #7f7f7f; + font-size: 14px; + .virgule { + color: #d7d7d7; + } + } + } + .btn { + width: 110px; + height: 32px; + background: -webkit-linear-gradient(196.220193695603deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); + background: -moz-linear-gradient(253.779806304397deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); + background: linear-gradient(253.779806304397deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); + border-radius: 61px; + font-size: 14px; + color: #000000; + cursor: pointer; + .add { + width: 24px; + height: 24px; + background-color: rgba(255, 255, 255, 1); + border: 1px solid rgba(219, 227, 253, 1); + border-radius: 20px; + margin: 0 3px; + .icon { + width: 10px; + height: 10px; + } + } + } + } + } +} + +.recruit { + width: 100%; + height: 502px; + background: linear-gradient(-36.4940455615096deg, rgba(207, 224, 249, 1) -23%, rgba(241, 242, 223, 1) 39%, rgba(238, 247, 245, 1) 114%); + border: 1px solid rgba(235, 235, 235, 1); + border-radius: 16px; + padding: 24px 30px 24px; + margin-bottom: 20px; + + .title { + justify-content: space-between; + margin-bottom: 20px; + .img { + width: 100px; + height: 26px; + } + .btn { + font-size: 14px; + color: #333333; + cursor: pointer; + .icon { + width: 16px; + height: 16px; + margin-left: 7px; + transform: rotate(270deg); + } + } + } + .list { + overflow: hidden; + margin-bottom: 20px; + .list-item { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + } + .item { + width: 565px; + height: 180px; + background-color: rgba(255, 255, 255, 1); + border: 1px solid rgba(235, 235, 235, 1); + border-radius: 12px; + // padding-top: 25px; + padding: 25px 24px; + align-items: flex-start; + position: relative; + .avatar { + width: 32px; + object-fit: contain; + margin-right: 10px; + } + .info { + .school { + font-size: 14px; + color: #333333; + margin-bottom: 10px; + } + .name { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-size: 16px; + color: #000000; + margin-bottom: 10px; + } + .name-en { + font-size: 14px; + color: #7f7f7f; + margin-bottom: 15px; + } + + .aq { + width: 477px; + height: 36px; + line-height: 36px; + background-color: rgba(249, 248, 248, 1); + border-radius: 3px; + padding: 0 10px; + .text { + font-size: 14px; + color: #e4c762; + margin-right: 10px; + } + .value { + font-size: 15px; + color: #333333; + } + .icon { + width: 20px; + height: 20px; + } + } + } + + .operate { + // height: 80px; + position: relative; + position: absolute; + top: 24px; + right: 24px; + .circle { + position: relative; + z-index: 1; + cursor: pointer; + width: 28px; + height: 28px; + background-color: rgba(219, 227, 253, 1); + border: 1px solid rgba(175, 181, 202, 1); + border-radius: 20px; + .img-add { + width: 12px; + height: 12px; + } + .img-dot { + width: 18px; + height: 8px; + } + } + .select { + position: absolute; + right: -24px; + top: -24px; + background-color: rgba(251, 251, 251, 1); + border-radius: 8px; + -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.180392156862745); + -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.180392156862745); + box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.180392156862745); + flex-direction: column; + transition: all 0.3s; + overflow: hidden; + opacity: 0; + height: 0; + width: 300px; + &.show { + height: 180px; + opacity: 1; + } + flex-direction: column; + align-items: center; + + // .top { + // flex-direction: column; + .title { + .dot { + width: 8px; + height: 8px; + border-radius: 50%; + border: 1px solid rgb(202, 177, 87); + background-color: rgb(253, 223, 109); + margin-right: 5px; + } + + font-size: 14px; + color: #7f7f7f; + margin-top: 75px; + margin-bottom: 19px; + } + + .btn { + cursor: pointer; + width: 144px; + height: 36px; + background: -webkit-linear-gradient(194.036243467926deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); + background: -moz-linear-gradient(255.963756532074deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); + background: linear-gradient(255.963756532074deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); + border-radius: 158px; + + font-size: 14px; + color: #333333; + + .img { + width: 16px; + height: 16px; + margin-right: 8px; + } + } + // } + } + .already { + font-size: 14px; + color: #7f7f7f; + .tick-box { + width: 20px; + height: 20px; + background-color: rgba(246, 246, 246, 1); + border: 1px solid rgba(215, 215, 215, 1); + border-radius: 20px; + margin-right: 5px; + + .img-tick { + width: 10px; + height: 8px; + } + } + } + } + } + } + + .indicate { + line-height: 12px; + + .icon { + width: 7px; + height: 12px; + cursor: pointer; + } + .text { + color: #555555; + font-size: 13px; + margin: 0 12px; + } + } +} + +.data { + .fall { + width: 285px; + display: block; + } + + .item { + width: 285px; + background-color: rgba(255, 255, 255, 1); + border: 1px solid rgba(235, 235, 235, 1); + border-radius: 12px; + padding: 21px 15px 0; + + .school { + .img { + height: 20px; + margin-right: 8px; + } + font-size: 14px; + color: #333333; + margin-bottom: 12px; + } + + .name { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 16px; + color: #000000; + margin-bottom: 12px; + } + + .name-en { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 14px; + color: #555555; + margin-bottom: 12px; + } + .introduce { + color: #555555; + font-size: 14px; + margin-bottom: 12px; + .quantity { + font-family: "Arial-Black", "Arial Black", sans-serif; + font-weight: 900; + color: #000000; + margin-left: 8px; + } + .line { + color: #d7d7d7; + margin: 0 10px; + } + } + .word { + background-color: rgba(249, 248, 248, 1); + border-radius: 3px; + padding: 10px 15px; + font-size: 14px; + color: #7f7f7f; + margin-bottom: 12px; + } + .tag { + .tag-item { + width: fit-content; + height: 24px; + line-height: 24px; + background-color: rgba(249, 248, 248, 1); + border: 1px solid rgba(170, 170, 170, 1); + border-radius: 6px; + padding: 0 9px; + font-size: 14px; + color: #7f7f7f; + margin-right: 10px; + + &.gray { + background-color: rgba(51, 51, 51, 1); + color: #ffffff; + } + + &.semester { + color: #ffffff; + background-color: rgba(249, 93, 93, 1); + } + } + } + .operate { + height: 80px; + position: relative; + .circle { + position: relative; + z-index: 1; + cursor: pointer; + width: 28px; + height: 28px; + background-color: rgba(219, 227, 253, 1); + border: 1px solid rgba(175, 181, 202, 1); + border-radius: 20px; + .img-add { + width: 12px; + height: 12px; + } + .img-dot { + width: 18px; + height: 8px; + } + } + .select { + position: absolute; + bottom: 0; + width: 285px; + background-color: rgba(251, 251, 251, 1); + border-radius: 8px; + -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.180392156862745); + -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.180392156862745); + box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.180392156862745); + flex-direction: column; + transition: all 0.3s; + overflow: hidden; + opacity: 0; + height: 0; + &.show { + height: 211px; + opacity: 1; + } + .top { + flex-direction: column; + .title { + .dot { + width: 8px; + height: 8px; + border-radius: 50%; + border: 1px solid rgb(202, 177, 87); + background-color: rgb(253, 223, 109); + margin-right: 5px; + } + + font-size: 14px; + color: #7f7f7f; + margin-bottom: 19px; + } + + .btn { + cursor: pointer; + width: 144px; + height: 36px; + background: -webkit-linear-gradient(194.036243467926deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); + background: -moz-linear-gradient(255.963756532074deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); + background: linear-gradient(255.963756532074deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); + border-radius: 158px; + + font-size: 14px; + color: #333333; + + .img { + width: 16px; + height: 16px; + margin-right: 8px; + } + } + } + .bottom { + border-top: 1px dotted #ebebeb; + height: 80px; + } + } + .already { + font-size: 14px; + color: #7f7f7f; + .tick-box { + width: 20px; + height: 20px; + background-color: rgba(246, 246, 246, 1); + border: 1px solid rgba(215, 215, 215, 1); + border-radius: 20px; + margin-right: 5px; + + .img-tick { + width: 10px; + height: 8px; + } + } + } + } + } +} diff --git a/02-school/school.css b/css/school.css similarity index 62% rename from 02-school/school.css rename to css/school.css index 5f62b1a..2e143bf 100644 --- a/02-school/school.css +++ b/css/school.css @@ -1,46 +1,4 @@ -* { - padding: 0; - margin: 0; - box-sizing: border-box; -} -.flexflex { - display: flex; -} -.flexcenter { - display: flex; - justify-content: center; - align-items: center; -} -.flexjcenter { - display: flex; - justify-content: center; -} -.flexacenter { - display: flex; - align-items: center; -} -.flex1 { - flex: 1; -} -.flexcolumn { - display: flex; - flex-direction: column; -} -body { - background-color: #eef2f5; - font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; -} -.main { - width: 1200px; - margin: 0 auto; -} -.main .index-icon { - width: 184px; - height: 42px; - margin-top: 37px; - margin-bottom: 40px; -} -.main .box { +.box { width: 1200px; height: 396px; background-color: #fbfbfb; @@ -48,7 +6,7 @@ body { position: relative; margin-bottom: 20px; } -.main .box::after { +.box::after { content: ""; position: absolute; top: -5px; @@ -61,29 +19,29 @@ body { border-radius: 18px; z-index: -1; } -.main .box .tab { +.box .tab { height: 60px; font-size: 14px; color: #7f7f7f; border-bottom: 1px dotted #ebebeb; padding-left: 24px; } -.main .box .tab .img { +.box .tab .img { width: 6px; height: 10px; margin: 0 15px; } -.main .box .tab .current { +.box .tab .current { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 14px; color: #000000; } -.main .box .details { +.box .details { padding: 31px 60px; } -.main .box .details .logo { +.box .details .logo { width: 120px; height: 120px; position: relative; @@ -93,7 +51,7 @@ body { margin-right: 39px; display: inline-flex; } -.main .box .details .logo .bj { +.box .details .logo .bj { width: 120px; height: 120px; position: absolute; @@ -101,10 +59,10 @@ body { left: 0; z-index: -1; } -.main .box .details .logo .img { +.box .details .logo .img { width: 65px; } -.main .box .details .right .name { +.box .details .right .name { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; @@ -112,7 +70,7 @@ body { color: #000000; margin-bottom: 6px; } -.main .box .details .right .name-en { +.box .details .right .name-en { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; @@ -120,18 +78,18 @@ body { color: #555555; margin-bottom: 22px; } -.main .box .details .right .world { +.box .details .right .world { width: 423px; padding-bottom: 15px; margin-bottom: 27px; border-bottom: 1px solid #ebebeb; } -.main .box .details .right .world .head { +.box .details .right .world .head { width: 100%; position: relative; margin-bottom: 9px; } -.main .box .details .right .world .head::after { +.box .details .right .world .head::after { content: ""; position: absolute; top: 50%; @@ -139,21 +97,21 @@ body { height: 1px; background-color: #ebebeb; } -.main .box .details .right .world .head .icon { +.box .details .right .world .head .icon { width: 90px; background-color: #fbfbfb; position: relative; z-index: 1; } -.main .box .details .right .world .head .icon .img { +.box .details .right .world .head .icon .img { width: 64px; height: 22px; } -.main .box .details .right .world .list .item { +.box .details .right .world .list .item { text-align: center; flex-direction: column; } -.main .box .details .right .world .list .item .quantity { +.box .details .right .world .list .item .quantity { font-family: "Arial-Black", "Arial Black", sans-serif; font-weight: 900; font-style: normal; @@ -161,7 +119,7 @@ body { color: #000000; margin-bottom: 9px; } -.main .box .details .right .world .list .item .ranking-name { +.box .details .right .world .list .item .ranking-name { font-family: "HelveticaNeue", "Helvetica Neue", sans-serif; font-weight: 400; font-style: normal; @@ -169,7 +127,7 @@ body { color: #555555; position: relative; } -.main .box .details .right .world .list .item .ranking-name .ranking-icon { +.box .details .right .world .list .item .ranking-name .ranking-icon { position: absolute; right: -10px; bottom: 0; @@ -177,7 +135,7 @@ body { height: 8px; transform: rotate(270deg); } -.main .box .details .right .brief { +.box .details .right .brief { height: 40px; background-color: #f6f6f6; border-radius: 6px; @@ -189,21 +147,21 @@ body { justify-content: space-between; padding: 6px; } -.main .box .details .right .brief .text { +.box .details .right .brief .text { margin-right: 15px; } -.main .box .details .right .brief .img { +.box .details .right .brief .img { width: 16px; height: 16px; cursor: pointer; } -.main .hot { +.hot { background-color: #ffffff; border-radius: 12px; padding: 24px; margin-bottom: 20px; } -.main .hot .header { +.hot .header { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; @@ -211,34 +169,34 @@ body { color: #000000; margin-bottom: 15px; } -.main .hot .header .icon { +.hot .header .icon { border-radius: 50%; width: 40px; height: 40px; background-color: #fbe3ea; margin-right: 13px; } -.main .hot .header .icon .img { +.hot .header .icon .img { width: 24px; height: 24px; } -.main .hot .list { +.hot .list { width: 1152px; margin-bottom: 10px; } -.main .hot .list .list-item { +.hot .list .list-item { display: grid; grid-template-columns: repeat(2, 1fr); } -.main .hot .list .list-item .item { +.hot .list .list-item .item { padding: 22px 0; width: 510px; margin-left: 20px; } -.main .hot .list .list-item .item:not(:nth-last-child(-n + 2)) { +.hot .list .list-item .item:not(:nth-last-child(-n + 2)) { border-bottom: 1px dotted #ebebeb; } -.main .hot .list .list-item .item .left .name { +.hot .list .list-item .item .left .name { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; @@ -247,7 +205,7 @@ body { margin-bottom: 6px; position: relative; } -.main .hot .list .list-item .item .left .name::after { +.hot .list .list-item .item .left .name::after { content: ""; width: 8px; height: 8px; @@ -260,29 +218,29 @@ body { transform: translateY(-50%); box-sizing: border-box; } -.main .hot .list .list-item .item .left .text { +.hot .list .list-item .item .left .text { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; color: #7f7f7f; font-size: 14px; } -.main .hot .list .list-item .item .left .text .ranking { +.hot .list .list-item .item .left .text .ranking { color: #555555; } -.main .hot .list .list-item .item .left .text .vertical { +.hot .list .list-item .item .left .text .vertical { color: #d7d7d7; margin: 0 8px; } -.main .hot .list .list-item .item .left .text .number { +.hot .list .list-item .item .left .text .number { font-family: "Arial-Black", "Arial Black", sans-serif; font-weight: 900; color: #000000; margin-left: 8px; } -.main .hot .list .list-item .item .operate { +.hot .list .list-item .item .operate { position: relative; } -.main .hot .list .list-item .item .operate .circle { +.hot .list .list-item .item .operate .circle { position: relative; z-index: 1; cursor: pointer; @@ -292,15 +250,15 @@ body { border: 1px solid #afb5ca; border-radius: 20px; } -.main .hot .list .list-item .item .operate .circle .img-add { +.hot .list .list-item .item .operate .circle .img-add { width: 12px; height: 12px; } -.main .hot .list .list-item .item .operate .circle .img-dot { +.hot .list .list-item .item .operate .circle .img-dot { width: 18px; height: 8px; } -.main .hot .list .list-item .item .operate .select { +.hot .list .list-item .item .operate .select { position: absolute; right: 40px; top: 50%; @@ -319,16 +277,16 @@ body { flex-direction: column; align-items: center; } -.main .hot .list .list-item .item .operate .select.show { +.hot .list .list-item .item .operate .select.show { height: 90px; opacity: 1; } -.main .hot .list .list-item .item .operate .select .title { +.hot .list .list-item .item .operate .select .title { font-size: 14px; color: #7f7f7f; margin-bottom: 14px; } -.main .hot .list .list-item .item .operate .select .title .dot { +.hot .list .list-item .item .operate .select .title .dot { width: 8px; height: 8px; border-radius: 50%; @@ -336,7 +294,7 @@ body { background-color: #fddf6d; margin-right: 5px; } -.main .hot .list .list-item .item .operate .select .btn { +.hot .list .list-item .item .operate .select .btn { cursor: pointer; width: 144px; height: 36px; @@ -347,16 +305,16 @@ body { font-size: 14px; color: #333333; } -.main .hot .list .list-item .item .operate .select .btn .img { +.hot .list .list-item .item .operate .select .btn .img { width: 16px; height: 16px; margin-right: 8px; } -.main .hot .list .list-item .item .operate .already { +.hot .list .list-item .item .operate .already { font-size: 14px; color: #7f7f7f; } -.main .hot .list .list-item .item .operate .already .tick-box { +.hot .list .list-item .item .operate .already .tick-box { width: 20px; height: 20px; background-color: #f6f6f6; @@ -364,30 +322,30 @@ body { border-radius: 20px; margin-right: 5px; } -.main .hot .list .list-item .item .operate .already .tick-box .img-tick { +.hot .list .list-item .item .operate .already .tick-box .img-tick { width: 10px; height: 8px; } -.main .hot .indicate { +.hot .indicate { line-height: 12px; } -.main .hot .indicate .icon { +.hot .indicate .icon { width: 7px; height: 12px; cursor: pointer; } -.main .hot .indicate .text { +.hot .indicate .text { color: #555555; font-size: 13px; margin: 0 12px; } -.main .content { +.content { height: 1214px; background-color: #ffffff; border: 1px solid #f2f2f2; border-radius: 12px; } -.main .content .header { +.content .header { height: 88px; font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; @@ -396,22 +354,22 @@ body { color: #000000; text-align: center; } -.main .content .body .left { +.content .body .left { width: 200px; font-size: 16px; color: #333333; border-right: 1px solid #ebebeb; } -.main .content .body .left .item { +.content .body .left .item { height: 56px; padding-left: 34px; } -.main .content .body .left .item .img { +.content .body .left .item .img { width: 18px; height: 18px; margin-right: 12px; } -.main .content .body .left .item.pitch { +.content .body .left .item.pitch { background-color: #fbfbfb; border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; @@ -420,7 +378,7 @@ body { color: #000000; font-weight: 650; } -.main .content .body .left .item.pitch::after { +.content .body .left .item.pitch::after { content: ""; width: 5px; height: 56px; @@ -429,21 +387,21 @@ body { top: 0; left: 0; } -.main .content .body .right { +.content .body .right { background-color: #fbfbfb; border-top: 1px solid #ebebeb; padding: 0 32px; } -.main .content .body .right .screen .title { +.content .body .right .screen .title { font-size: 15px; color: #555555; padding-top: 27px; margin-bottom: 20px; } -.main .content .body .right .screen .list { +.content .body .right .screen .list { flex-wrap: wrap; } -.main .content .body .right .screen .list .item { +.content .body .right .screen .list .item { width: fit-content; height: 36px; line-height: 36px; @@ -456,35 +414,35 @@ body { margin-bottom: 10px; margin-right: 10px; } -.main .content .body .right .screen .list .item.pitch { +.content .body .right .screen .list .item.pitch { background-color: #7b8cd3; color: #ffffff; border: none; } -.main .content .body .right .h { +.content .body .right .h { justify-content: space-between; padding-top: 27px; margin-bottom: 24px; } -.main .content .body .right .h .total { +.content .body .right .h .total { font-size: 14px; color: #7f7f7f; } -.main .content .body .right .h .sort { +.content .body .right .h .sort { font-size: 14px; color: #000000; cursor: pointer; } -.main .content .body .right .h .sort .img { +.content .body .right .h .sort .img { width: 20px; height: 20px; margin-left: 8px; } -.main .content .body .right .list { +.content .body .right .list { flex-wrap: wrap; justify-content: space-between; } -.main .content .body .right .list .item { +.content .body .right .list .item { width: 460px; background-color: #ffffff; border: 1px solid #f2f2f2; @@ -493,7 +451,7 @@ body { margin-bottom: 20px; position: relative; } -.main .content .body .right .list .item .name { +.content .body .right .list .item .name { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; @@ -501,7 +459,7 @@ body { color: #000000; margin-bottom: 12px; } -.main .content .body .right .list .item .english { +.content .body .right .list .item .english { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; @@ -509,22 +467,22 @@ body { color: #555555; margin-bottom: 12px; } -.main .content .body .right .list .item .introduce { +.content .body .right .list .item .introduce { color: #555555; font-size: 14px; margin-bottom: 12px; } -.main .content .body .right .list .item .introduce .quantity { +.content .body .right .list .item .introduce .quantity { font-family: "Arial-Black", "Arial Black", sans-serif; font-weight: 900; color: #000000; margin-left: 8px; } -.main .content .body .right .list .item .introduce .line { +.content .body .right .list .item .introduce .line { color: #d7d7d7; margin: 0 10px; } -.main .content .body .right .list .item .word { +.content .body .right .list .item .word { background-color: #f9f8f8; border-radius: 3px; padding: 10px 15px; @@ -532,7 +490,7 @@ body { color: #7f7f7f; margin-bottom: 12px; } -.main .content .body .right .list .item .tag .tag-item { +.content .body .right .list .item .tag .tag-item { width: fit-content; height: 24px; line-height: 24px; @@ -544,20 +502,20 @@ body { color: #7f7f7f; margin-right: 10px; } -.main .content .body .right .list .item .tag .tag-item.gray { +.content .body .right .list .item .tag .tag-item.gray { background-color: #333333; color: #ffffff; } -.main .content .body .right .list .item .tag .tag-item.semester { +.content .body .right .list .item .tag .tag-item.semester { color: #ffffff; background-color: #f95d5d; } -.main .content .body .right .list .item .operate { +.content .body .right .list .item .operate { position: absolute; top: 18px; right: 24px; } -.main .content .body .right .list .item .operate .circle { +.content .body .right .list .item .operate .circle { position: relative; z-index: 1; cursor: pointer; @@ -567,15 +525,15 @@ body { border: 1px solid #afb5ca; border-radius: 20px; } -.main .content .body .right .list .item .operate .circle .img-add { +.content .body .right .list .item .operate .circle .img-add { width: 12px; height: 12px; } -.main .content .body .right .list .item .operate .circle .img-dot { +.content .body .right .list .item .operate .circle .img-dot { width: 18px; height: 8px; } -.main .content .body .right .list .item .operate .select { +.content .body .right .list .item .operate .select { position: absolute; top: -18px; right: -24px; @@ -593,16 +551,16 @@ body { align-items: center; padding-top: 68px; } -.main .content .body .right .list .item .operate .select.show { +.content .body .right .list .item .operate .select.show { height: 171px; opacity: 1; } -.main .content .body .right .list .item .operate .select .title { +.content .body .right .list .item .operate .select .title { font-size: 14px; color: #7f7f7f; margin-bottom: 19px; } -.main .content .body .right .list .item .operate .select .title .dot { +.content .body .right .list .item .operate .select .title .dot { width: 8px; height: 8px; border-radius: 50%; @@ -610,7 +568,7 @@ body { background-color: #fddf6d; margin-right: 5px; } -.main .content .body .right .list .item .operate .select .btn { +.content .body .right .list .item .operate .select .btn { cursor: pointer; width: 144px; height: 36px; @@ -621,16 +579,16 @@ body { font-size: 14px; color: #333333; } -.main .content .body .right .list .item .operate .select .btn .img { +.content .body .right .list .item .operate .select .btn .img { width: 16px; height: 16px; margin-right: 8px; } -.main .content .body .right .list .item .operate .already { +.content .body .right .list .item .operate .already { font-size: 14px; color: #7f7f7f; } -.main .content .body .right .list .item .operate .already .tick-box { +.content .body .right .list .item .operate .already .tick-box { width: 20px; height: 20px; background-color: #f6f6f6; @@ -638,62 +596,7 @@ body { border-radius: 20px; margin-right: 5px; } -.main .content .body .right .list .item .operate .already .tick-box .img-tick { +.content .body .right .list .item .operate .already .tick-box .img-tick { width: 10px; height: 8px; } -.main .base { - width: 640px; - height: 60px; - background-color: #7b8cd3; - border-radius: 153px; - position: fixed; - bottom: 15px; - left: 50%; - transform: translateX(-50%); -} -.main .base .left { - width: 450px; - height: 50px; - background-color: #fff; - border-radius: 153px 15px 15px 153px; - margin-right: 5px; - padding: 0 20px; -} -.main .base .left .text { - font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; - font-weight: 400; - font-style: normal; - font-size: 16px; - color: rgba(170, 170, 170, 0.90196078); -} -.main .base .left .img { - width: 20px; - height: 20px; -} -.main .base .rigth { - width: 175px; - height: 50px; - background-color: #fff; - border-radius: 15px 153px 153px 15px; - padding-left: 19px; -} -.main .base .rigth .img { - width: 25px; - height: 22px; - margin-right: 5px; -} -.main .base .rigth .text { - font-size: 16px; - color: #333333; - margin-right: 9px; -} -.main .base .rigth .number { - height: 20px; - line-height: 20px; - background-color: #f2f2f2; - border-radius: 150px; - font-size: 13px; - color: #f95d5d; - padding: 0 8px; -} diff --git a/css/school.less b/css/school.less new file mode 100644 index 0000000..ceb6719 --- /dev/null +++ b/css/school.less @@ -0,0 +1,673 @@ +.box { + width: 1200px; + height: 396px; + background-color: rgba(251, 251, 251, 1); + border-radius: 12px; + position: relative; + margin-bottom: 20px; + + &::after { + content: ""; + position: absolute; + top: -5px; + left: 0; + width: 100%; + height: 66px; + background: -webkit-linear-gradient(0deg, rgba(123, 140, 211, 1) 0%, rgba(218, 227, 253, 1) 99%); + background: -moz-linear-gradient(90deg, rgba(123, 140, 211, 1) 0%, rgba(218, 227, 253, 1) 99%); + background: linear-gradient(90deg, rgba(123, 140, 211, 1) 0%, rgba(218, 227, 253, 1) 99%); + border-radius: 18px; + z-index: -1; + } + .tab { + height: 60px; + font-size: 14px; + color: #7f7f7f; + border-bottom: 1px dotted rgb(235, 235, 235); + padding-left: 24px; + .img { + width: 6px; + height: 10px; + margin: 0 15px; + } + + .current { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 14px; + color: #000000; + } + } + .details { + padding: 31px 60px; + .logo { + width: 120px; + height: 120px; + position: relative; + z-index: 1; + padding-right: 10px; + padding-bottom: 7px; + margin-right: 39px; + display: inline-flex; + .bj { + width: 120px; + height: 120px; + position: absolute; + top: 0; + left: 0; + z-index: -1; + } + .img { + width: 65px; + } + } + + .right { + .name { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 32px; + color: #000000; + margin-bottom: 6px; + } + + .name-en { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 16px; + color: #555555; + margin-bottom: 22px; + } + + .world { + width: 423px; + padding-bottom: 15px; + margin-bottom: 27px; + border-bottom: 1px solid rgb(235, 235, 235); + .head { + width: 100%; + position: relative; + margin-bottom: 9px; + + &::after { + content: ""; + position: absolute; + top: 50%; + width: 100%; + height: 1px; + background-color: rgb(235, 235, 235); + } + .icon { + width: 90px; + background-color: #fbfbfb; + position: relative; + z-index: 1; + .img { + width: 64px; + height: 22px; + } + } + } + + .list { + .item { + text-align: center; + flex-direction: column; + + .quantity { + font-family: "Arial-Black", "Arial Black", sans-serif; + font-weight: 900; + font-style: normal; + font-size: 18px; + color: #000000; + margin-bottom: 9px; + } + + .ranking-name { + font-family: "HelveticaNeue", "Helvetica Neue", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 16px; + color: #555555; + + position: relative; + .ranking-icon { + position: absolute; + right: -10px; + bottom: 0; + width: 8px; + height: 8px; + transform: rotate(270deg); + } + } + } + } + } + + .brief { + // width: 946px; + height: 40px; + background-color: rgba(246, 246, 246, 1); + border-radius: 6px; + font-size: 14px; + color: #7f7f7f; + line-height: 28px; + + display: flex; + align-items: center; + justify-content: space-between; + padding: 6px; + + .text { + margin-right: 15px; + } + + .img { + width: 16px; + height: 16px; + cursor: pointer; + } + } + } + } +} + +.hot { + background-color: rgba(255, 255, 255, 1); + border-radius: 12px; + padding: 24px; + margin-bottom: 20px; + .header { + .icon { + border-radius: 50%; + width: 40px; + height: 40px; + background-color: rgb(251, 227, 234); + margin-right: 13px; + .img { + width: 24px; + height: 24px; + } + } + + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 18px; + color: #000000; + margin-bottom: 15px; + } + + .list { + width: 1152px; + margin-bottom: 10px; + .list-item { + display: grid; + grid-template-columns: repeat(2, 1fr); + .item { + padding: 22px 0; + width: 510px; + margin-left: 20px; + &:not(:nth-last-child(-n + 2)) { + border-bottom: 1px dotted #ebebeb; + } + + .left { + .name { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 16px; + color: #000000; + margin-bottom: 6px; + position: relative; + &::after { + content: ""; + width: 8px; + height: 8px; + background-color: rgba(242, 242, 242, 1); + border: 1px solid rgba(215, 215, 215, 1); + border-radius: 39px; + position: absolute; + top: 50%; + left: -20px; + transform: translateY(-50%); + box-sizing: border-box; + } + } + + .text { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + color: #7f7f7f; + font-size: 14px; + .ranking { + color: #555555; + } + + .vertical { + color: #d7d7d7; + margin: 0 8px; + } + + .number { + font-family: "Arial-Black", "Arial Black", sans-serif; + font-weight: 900; + color: #000000; + margin-left: 8px; + } + } + } + + .operate { + // height: 80px; + position: relative; + // position: absolute; + // top: 24px; + // right: 24px; + .circle { + position: relative; + z-index: 1; + cursor: pointer; + width: 28px; + height: 28px; + background-color: rgba(219, 227, 253, 1); + border: 1px solid rgba(175, 181, 202, 1); + border-radius: 20px; + .img-add { + width: 12px; + height: 12px; + } + .img-dot { + width: 18px; + height: 8px; + } + } + .select { + position: absolute; + right: 40px; + top: 50%; + transform: translateY(-50%); + background-color: rgba(251, 251, 251, 1); + border-radius: 8px; + -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.180392156862745); + -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.180392156862745); + box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.180392156862745); + flex-direction: column; + transition: all 0.3s; + overflow: hidden; + opacity: 0; + height: 0; + width: 324px; + padding-top: 10px; + &.show { + height: 90px; + opacity: 1; + } + flex-direction: column; + align-items: center; + + .title { + .dot { + width: 8px; + height: 8px; + border-radius: 50%; + border: 1px solid rgb(202, 177, 87); + background-color: rgb(253, 223, 109); + margin-right: 5px; + } + + font-size: 14px; + color: #7f7f7f; + margin-bottom: 14px; + } + + .btn { + cursor: pointer; + width: 144px; + height: 36px; + background: -webkit-linear-gradient(194.036243467926deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); + background: -moz-linear-gradient(255.963756532074deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); + background: linear-gradient(255.963756532074deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); + border-radius: 158px; + + font-size: 14px; + color: #333333; + + .img { + width: 16px; + height: 16px; + margin-right: 8px; + } + } + } + .already { + font-size: 14px; + color: #7f7f7f; + .tick-box { + width: 20px; + height: 20px; + background-color: rgba(246, 246, 246, 1); + border: 1px solid rgba(215, 215, 215, 1); + border-radius: 20px; + margin-right: 5px; + + .img-tick { + width: 10px; + height: 8px; + } + } + } + } + } + } + } + + .indicate { + line-height: 12px; + + .icon { + width: 7px; + height: 12px; + cursor: pointer; + } + .text { + color: #555555; + font-size: 13px; + margin: 0 12px; + } + } +} + +.content { + height: 1214px; + background-color: rgba(255, 255, 255, 1); + border: 1px solid rgba(242, 242, 242, 1); + border-radius: 12px; + .header { + height: 88px; + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 24px; + color: #000000; + text-align: center; + } + .body { + // align-items: flex-start; + .left { + width: 200px; + font-size: 16px; + color: #333333; + border-right: 1px solid rgba(235, 235, 235, 1); + .item { + height: 56px; + padding-left: 34px; + .img { + width: 18px; + height: 18px; + margin-right: 12px; + } + + &.pitch { + background-color: rgba(251, 251, 251, 1); + border-top: 1px solid rgba(235, 235, 235, 1); + border-bottom: 1px solid rgba(235, 235, 235, 1); + width: 201px; + position: relative; + color: #000000; + font-weight: 650; + &::after { + content: ""; + width: 5px; + height: 56px; + background-color: rgba(111, 193, 109, 1); + position: absolute; + top: 0; + left: 0; + } + } + } + } + + .right { + background-color: rgba(251, 251, 251, 1); + border-top: 1px solid rgba(235, 235, 235, 1); + padding: 0 32px; + + .screen { + .title { + font-size: 15px; + color: #555555; + padding-top: 27px; + margin-bottom: 20px; + } + + .list { + flex-wrap: wrap; + .item { + width: fit-content; + height: 36px; + line-height: 36px; + padding: 0 17px; + background-color: rgba(251, 251, 251, 0); + border: 1px solid rgba(235, 235, 235, 1); + border-radius: 12px; + font-size: 14px; + color: #333333; + margin-bottom: 10px; + margin-right: 10px; + + &.pitch { + background-color: rgba(123, 140, 211, 1); + color: #ffffff; + border: none; + } + } + } + } + + .h { + justify-content: space-between; + padding-top: 27px; + margin-bottom: 24px; + + .total { + font-size: 14px; + color: #7f7f7f; + } + + .sort { + font-size: 14px; + color: #000000; + cursor: pointer; + + .img { + width: 20px; + height: 20px; + margin-left: 8px; + } + } + } + + .list { + flex-wrap: wrap; + justify-content: space-between; + .item { + width: 460px; + background-color: rgba(255, 255, 255, 1); + border: 1px solid rgba(242, 242, 242, 1); + border-radius: 12px; + padding: 21px 15px; + margin-bottom: 20px; + position: relative; + .name { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 16px; + color: #000000; + margin-bottom: 12px; + } + + .english { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 14px; + color: #555555; + margin-bottom: 12px; + } + .introduce { + color: #555555; + font-size: 14px; + margin-bottom: 12px; + .quantity { + font-family: "Arial-Black", "Arial Black", sans-serif; + font-weight: 900; + color: #000000; + margin-left: 8px; + } + .line { + color: #d7d7d7; + margin: 0 10px; + } + } + .word { + background-color: rgba(249, 248, 248, 1); + border-radius: 3px; + padding: 10px 15px; + font-size: 14px; + color: #7f7f7f; + margin-bottom: 12px; + } + .tag { + .tag-item { + width: fit-content; + height: 24px; + line-height: 24px; + background-color: rgba(249, 248, 248, 1); + border: 1px solid rgba(170, 170, 170, 1); + border-radius: 6px; + padding: 0 9px; + font-size: 14px; + color: #7f7f7f; + margin-right: 10px; + + &.gray { + background-color: rgba(51, 51, 51, 1); + color: #ffffff; + } + + &.semester { + color: #ffffff; + background-color: rgba(249, 93, 93, 1); + } + } + } + .operate { + position: absolute; + top: 18px; + right: 24px; + .circle { + position: relative; + z-index: 1; + cursor: pointer; + width: 28px; + height: 28px; + background-color: rgba(219, 227, 253, 1); + border: 1px solid rgba(175, 181, 202, 1); + border-radius: 20px; + .img-add { + width: 12px; + height: 12px; + } + .img-dot { + width: 18px; + height: 8px; + } + } + .select { + position: absolute; + top: -18px; + right: -24px; + width: 285px; + background-color: rgba(251, 251, 251, 1); + border-radius: 8px; + -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.180392156862745); + -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.180392156862745); + box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.180392156862745); + flex-direction: column; + transition: all 0.3s; + overflow: hidden; + opacity: 0; + height: 0; + align-items: center; + padding-top: 68px; + &.show { + height: 171px; + opacity: 1; + } + // .top { + // flex-direction: column; + .title { + .dot { + width: 8px; + height: 8px; + border-radius: 50%; + border: 1px solid rgb(202, 177, 87); + background-color: rgb(253, 223, 109); + margin-right: 5px; + } + + font-size: 14px; + color: #7f7f7f; + margin-bottom: 19px; + } + + .btn { + cursor: pointer; + width: 144px; + height: 36px; + background: -webkit-linear-gradient(194.036243467926deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); + background: -moz-linear-gradient(255.963756532074deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); + background: linear-gradient(255.963756532074deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); + border-radius: 158px; + + font-size: 14px; + color: #333333; + + .img { + width: 16px; + height: 16px; + margin-right: 8px; + } + } + // } + } + .already { + font-size: 14px; + color: #7f7f7f; + .tick-box { + width: 20px; + height: 20px; + background-color: rgba(246, 246, 246, 1); + border: 1px solid rgba(215, 215, 215, 1); + border-radius: 20px; + margin-right: 5px; + + .img-tick { + width: 10px; + height: 8px; + } + } + } + } + } + } + } + } +} diff --git a/03-subject/subject.css b/css/subject.css similarity index 59% rename from 03-subject/subject.css rename to css/subject.css index 54338ce..8e62fd0 100644 --- a/03-subject/subject.css +++ b/css/subject.css @@ -1,46 +1,4 @@ -* { - padding: 0; - margin: 0; - box-sizing: border-box; -} -.flexflex { - display: flex; -} -.flexcenter { - display: flex; - justify-content: center; - align-items: center; -} -.flexjcenter { - display: flex; - justify-content: center; -} -.flexacenter { - display: flex; - align-items: center; -} -.flex1 { - flex: 1; -} -.flexcolumn { - display: flex; - flex-direction: column; -} -body { - background-color: #eef2f5; - font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; -} -.main { - width: 1200px; - margin: 0 auto; -} -.main .index-icon { - width: 184px; - height: 42px; - margin-top: 37px; - margin-bottom: 40px; -} -.main .box { +.box { width: 1200px; height: 396px; background-color: #ffffff; @@ -48,7 +6,7 @@ body { position: relative; margin-bottom: 20px; } -.main .box::after { +.box::after { content: ""; position: absolute; top: -5px; @@ -61,35 +19,35 @@ body { border-radius: 18px; z-index: -1; } -.main .box .tab { +.box .tab { height: 60px; font-size: 14px; color: #7f7f7f; border-bottom: 1px dotted #ebebeb; padding-left: 24px; } -.main .box .tab .img { +.box .tab .img { width: 6px; height: 10px; margin: 0 15px; } -.main .box .tab .current { +.box .tab .current { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; font-size: 14px; color: #000000; } -.main .box .info { +.box .info { padding: 41px 60px 0; margin-bottom: 40px; } -.main .box .info .img { +.box .info .img { width: 120px; height: 120px; margin-right: 40px; } -.main .box .info .title { +.box .info .title { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; @@ -97,10 +55,10 @@ body { color: #000000; margin-bottom: 20px; } -.main .box .info .list { +.box .info .list { flex-wrap: wrap; } -.main .box .info .list .item { +.box .info .list .item { width: fit-content; height: 36px; line-height: 36px; @@ -113,30 +71,30 @@ body { margin-bottom: 10px; margin-right: 10px; } -.main .box .info .list .item.pitch { +.box .info .list .item.pitch { background-color: #7b8cd3; color: #ffffff; border: none; } -.main .body { +.body { background-color: #ffffff; border-radius: 12px; } -.main .body .left { +.body .left { width: 200px; font-size: 16px; color: #333333; border-right: 1px solid #ebebeb; } -.main .body .left .item { +.body .left .item { height: 56px; padding-left: 34px; } -.main .body .left .item .img { +.body .left .item .img { width: 18px; margin-right: 12px; } -.main .body .left .item.pitch { +.body .left .item.pitch { background-color: #fbfbfb; border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; @@ -145,7 +103,7 @@ body { color: #000000; font-weight: 650; } -.main .body .left .item.pitch::after { +.body .left .item.pitch::after { content: ""; width: 5px; height: 56px; @@ -154,40 +112,40 @@ body { top: 0; left: 0; } -.main .body .right { +.body .right { background-color: #fbfbfb; border-top: 1px solid #ebebeb; padding: 0 32px; } -.main .body .right .h { +.body .right .h { justify-content: space-between; padding-top: 27px; margin-bottom: 24px; } -.main .body .right .h .total { +.body .right .h .total { font-size: 14px; color: #7f7f7f; } -.main .body .right .h .item { +.body .right .h .item { font-size: 14px; color: #000000; cursor: pointer; } -.main .body .right .h .item .img-sort { +.body .right .h .item .img-sort { width: 20px; height: 20px; margin-left: 8px; } -.main .body .right .h .item .img-school { +.body .right .h .item .img-school { width: 16px; height: 16px; margin-left: 8px; } -.main .body .right .list { +.body .right .list { flex-wrap: wrap; justify-content: space-between; } -.main .body .right .list .item { +.body .right .list .item { width: 460px; background-color: #ffffff; border: 1px solid #f2f2f2; @@ -196,7 +154,7 @@ body { margin-bottom: 20px; position: relative; } -.main .body .right .list .item .name { +.body .right .list .item .name { font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; font-weight: 650; font-style: normal; @@ -204,7 +162,7 @@ body { color: #000000; margin-bottom: 12px; } -.main .body .right .list .item .english { +.body .right .list .item .english { font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; font-weight: 400; font-style: normal; @@ -212,22 +170,22 @@ body { color: #555555; margin-bottom: 12px; } -.main .body .right .list .item .introduce { +.body .right .list .item .introduce { color: #555555; font-size: 14px; margin-bottom: 12px; } -.main .body .right .list .item .introduce .quantity { +.body .right .list .item .introduce .quantity { font-family: "Arial-Black", "Arial Black", sans-serif; font-weight: 900; color: #000000; margin-left: 8px; } -.main .body .right .list .item .introduce .line { +.body .right .list .item .introduce .line { color: #d7d7d7; margin: 0 10px; } -.main .body .right .list .item .word { +.body .right .list .item .word { background-color: #f9f8f8; border-radius: 3px; padding: 10px 15px; @@ -235,7 +193,7 @@ body { color: #7f7f7f; margin-bottom: 12px; } -.main .body .right .list .item .tag .tag-item { +.body .right .list .item .tag .tag-item { width: fit-content; height: 24px; line-height: 24px; @@ -247,20 +205,20 @@ body { color: #7f7f7f; margin-right: 10px; } -.main .body .right .list .item .tag .tag-item.gray { +.body .right .list .item .tag .tag-item.gray { background-color: #333333; color: #ffffff; } -.main .body .right .list .item .tag .tag-item.semester { +.body .right .list .item .tag .tag-item.semester { color: #ffffff; background-color: #f95d5d; } -.main .body .right .list .item .operate { +.body .right .list .item .operate { position: absolute; top: 18px; right: 24px; } -.main .body .right .list .item .operate .circle { +.body .right .list .item .operate .circle { position: relative; z-index: 1; cursor: pointer; @@ -270,15 +228,15 @@ body { border: 1px solid #afb5ca; border-radius: 20px; } -.main .body .right .list .item .operate .circle .img-add { +.body .right .list .item .operate .circle .img-add { width: 12px; height: 12px; } -.main .body .right .list .item .operate .circle .img-dot { +.body .right .list .item .operate .circle .img-dot { width: 18px; height: 8px; } -.main .body .right .list .item .operate .select { +.body .right .list .item .operate .select { position: absolute; top: -18px; right: -24px; @@ -296,16 +254,16 @@ body { align-items: center; padding-top: 68px; } -.main .body .right .list .item .operate .select.show { +.body .right .list .item .operate .select.show { height: 171px; opacity: 1; } -.main .body .right .list .item .operate .select .title { +.body .right .list .item .operate .select .title { font-size: 14px; color: #7f7f7f; margin-bottom: 19px; } -.main .body .right .list .item .operate .select .title .dot { +.body .right .list .item .operate .select .title .dot { width: 8px; height: 8px; border-radius: 50%; @@ -313,7 +271,7 @@ body { background-color: #fddf6d; margin-right: 5px; } -.main .body .right .list .item .operate .select .btn { +.body .right .list .item .operate .select .btn { cursor: pointer; width: 144px; height: 36px; @@ -324,16 +282,16 @@ body { font-size: 14px; color: #333333; } -.main .body .right .list .item .operate .select .btn .img { +.body .right .list .item .operate .select .btn .img { width: 16px; height: 16px; margin-right: 8px; } -.main .body .right .list .item .operate .already { +.body .right .list .item .operate .already { font-size: 14px; color: #7f7f7f; } -.main .body .right .list .item .operate .already .tick-box { +.body .right .list .item .operate .already .tick-box { width: 20px; height: 20px; background-color: #f6f6f6; @@ -341,62 +299,7 @@ body { border-radius: 20px; margin-right: 5px; } -.main .body .right .list .item .operate .already .tick-box .img-tick { +.body .right .list .item .operate .already .tick-box .img-tick { width: 10px; height: 8px; } -.main .base { - width: 640px; - height: 60px; - background-color: #7b8cd3; - border-radius: 153px; - position: fixed; - bottom: 15px; - left: 50%; - transform: translateX(-50%); -} -.main .base .left { - width: 450px; - height: 50px; - background-color: #fff; - border-radius: 153px 15px 15px 153px; - margin-right: 5px; - padding: 0 20px; -} -.main .base .left .text { - font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; - font-weight: 400; - font-style: normal; - font-size: 16px; - color: rgba(170, 170, 170, 0.90196078); -} -.main .base .left .img { - width: 20px; - height: 20px; -} -.main .base .rigth { - width: 175px; - height: 50px; - background-color: #fff; - border-radius: 15px 153px 153px 15px; - padding-left: 19px; -} -.main .base .rigth .img { - width: 25px; - height: 22px; - margin-right: 5px; -} -.main .base .rigth .text { - font-size: 16px; - color: #333333; - margin-right: 9px; -} -.main .base .rigth .number { - height: 20px; - line-height: 20px; - background-color: #f2f2f2; - border-radius: 150px; - font-size: 13px; - color: #f95d5d; - padding: 0 8px; -} diff --git a/css/subject.less b/css/subject.less new file mode 100644 index 0000000..fe06cb2 --- /dev/null +++ b/css/subject.less @@ -0,0 +1,333 @@ +.box { + width: 1200px; + height: 396px; + background-color: rgba(255, 255, 255, 1); + border-radius: 12px; + position: relative; + margin-bottom: 20px; + + &::after { + content: ""; + position: absolute; + top: -5px; + left: 0; + width: 100%; + height: 66px; + background: -webkit-linear-gradient(0deg, rgba(123, 140, 211, 1) 0%, rgba(218, 227, 253, 1) 99%); + background: -moz-linear-gradient(90deg, rgba(123, 140, 211, 1) 0%, rgba(218, 227, 253, 1) 99%); + background: linear-gradient(90deg, rgba(123, 140, 211, 1) 0%, rgba(218, 227, 253, 1) 99%); + border-radius: 18px; + z-index: -1; + } + .tab { + height: 60px; + font-size: 14px; + color: #7f7f7f; + border-bottom: 1px dotted rgb(235, 235, 235); + padding-left: 24px; + .img { + width: 6px; + height: 10px; + margin: 0 15px; + } + + .current { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 14px; + color: #000000; + } + } + + .info { + padding: 41px 60px 0; + margin-bottom: 40px; + .img { + width: 120px; + height: 120px; + margin-right: 40px; + } + + .title { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 24px; + color: #000000; + margin-bottom: 20px; + } + + .list { + flex-wrap: wrap; + .item { + width: fit-content; + height: 36px; + line-height: 36px; + padding: 0 17px; + background-color: rgba(251, 251, 251, 0); + border: 1px solid rgba(235, 235, 235, 1); + border-radius: 12px; + font-size: 14px; + color: #333333; + margin-bottom: 10px; + margin-right: 10px; + + &.pitch { + background-color: rgba(123, 140, 211, 1); + color: #ffffff; + border: none; + } + } + } + } +} + +.body { + background-color: rgba(255, 255, 255, 1); + border-radius: 12px; + // align-items: flex-start; + .left { + width: 200px; + font-size: 16px; + color: #333333; + border-right: 1px solid rgba(235, 235, 235, 1); + .item { + height: 56px; + padding-left: 34px; + .img { + width: 18px; + margin-right: 12px; + } + + &.pitch { + background-color: rgba(251, 251, 251, 1); + border-top: 1px solid rgba(235, 235, 235, 1); + border-bottom: 1px solid rgba(235, 235, 235, 1); + width: 201px; + position: relative; + color: #000000; + font-weight: 650; + &::after { + content: ""; + width: 5px; + height: 56px; + background-color: rgba(111, 193, 109, 1); + position: absolute; + top: 0; + left: 0; + } + } + } + } + + .right { + background-color: rgba(251, 251, 251, 1); + border-top: 1px solid rgba(235, 235, 235, 1); + padding: 0 32px; + + .h { + justify-content: space-between; + padding-top: 27px; + margin-bottom: 24px; + + .total { + font-size: 14px; + color: #7f7f7f; + } + + .item { + font-size: 14px; + color: #000000; + cursor: pointer; + + .img-sort { + width: 20px; + height: 20px; + margin-left: 8px; + } + + .img-school { + width: 16px; + height: 16px; + margin-left: 8px; + } + } + } + + .list { + flex-wrap: wrap; + justify-content: space-between; + .item { + width: 460px; + background-color: rgba(255, 255, 255, 1); + border: 1px solid rgba(242, 242, 242, 1); + border-radius: 12px; + padding: 21px 15px; + margin-bottom: 20px; + position: relative; + .name { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 16px; + color: #000000; + margin-bottom: 12px; + } + + .english { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 14px; + color: #555555; + margin-bottom: 12px; + } + .introduce { + color: #555555; + font-size: 14px; + margin-bottom: 12px; + .quantity { + font-family: "Arial-Black", "Arial Black", sans-serif; + font-weight: 900; + color: #000000; + margin-left: 8px; + } + .line { + color: #d7d7d7; + margin: 0 10px; + } + } + .word { + background-color: rgba(249, 248, 248, 1); + border-radius: 3px; + padding: 10px 15px; + font-size: 14px; + color: #7f7f7f; + margin-bottom: 12px; + } + .tag { + .tag-item { + width: fit-content; + height: 24px; + line-height: 24px; + background-color: rgba(249, 248, 248, 1); + border: 1px solid rgba(170, 170, 170, 1); + border-radius: 6px; + padding: 0 9px; + font-size: 14px; + color: #7f7f7f; + margin-right: 10px; + + &.gray { + background-color: rgba(51, 51, 51, 1); + color: #ffffff; + } + + &.semester { + color: #ffffff; + background-color: rgba(249, 93, 93, 1); + } + } + } + .operate { + position: absolute; + top: 18px; + right: 24px; + .circle { + position: relative; + z-index: 1; + cursor: pointer; + width: 28px; + height: 28px; + background-color: rgba(219, 227, 253, 1); + border: 1px solid rgba(175, 181, 202, 1); + border-radius: 20px; + .img-add { + width: 12px; + height: 12px; + } + .img-dot { + width: 18px; + height: 8px; + } + } + .select { + position: absolute; + top: -18px; + right: -24px; + width: 285px; + background-color: rgba(251, 251, 251, 1); + border-radius: 8px; + -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.180392156862745); + -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.180392156862745); + box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.180392156862745); + flex-direction: column; + transition: all 0.3s; + overflow: hidden; + opacity: 0; + height: 0; + align-items: center; + padding-top: 68px; + &.show { + height: 171px; + opacity: 1; + } + + .title { + .dot { + width: 8px; + height: 8px; + border-radius: 50%; + border: 1px solid rgb(202, 177, 87); + background-color: rgb(253, 223, 109); + margin-right: 5px; + } + + font-size: 14px; + color: #7f7f7f; + margin-bottom: 19px; + } + + .btn { + cursor: pointer; + width: 144px; + height: 36px; + background: -webkit-linear-gradient(194.036243467926deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); + background: -moz-linear-gradient(255.963756532074deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); + background: linear-gradient(255.963756532074deg, rgba(219, 227, 253, 1) 0%, rgba(238, 247, 245, 1) 100%); + border-radius: 158px; + + font-size: 14px; + color: #333333; + + .img { + width: 16px; + height: 16px; + margin-right: 8px; + } + } + // } + } + .already { + font-size: 14px; + color: #7f7f7f; + .tick-box { + width: 20px; + height: 20px; + background-color: rgba(246, 246, 246, 1); + border: 1px solid rgba(215, 215, 215, 1); + border-radius: 20px; + margin-right: 5px; + + .img-tick { + width: 10px; + height: 8px; + } + } + } + } + } + } + } +} diff --git a/04-details/details.html b/html/details.html similarity index 93% rename from 04-details/details.html rename to html/details.html index 9bb2600..924a685 100644 --- a/04-details/details.html +++ b/html/details.html @@ -4,7 +4,8 @@ Document - + +
@@ -378,7 +379,33 @@
Asian Studies
-
MPhil | 24Fall | offer
+
MPhil | 24Fall | offer
+
+
+
Asian Studies
+
MPhil | 24Fall | offer
+
+
+
Asian Studies
+
MPhil | 24Fall | offer
+
+
+
+
+
+
+
面经
+ +
+
+
+
environmental science
+
+
+ + 第二轮申请的，第二轮申请的，第二轮申请的，第二轮申请的，第二轮申请的，第二轮申请的，第二轮申请的，因为第一轮的时候我还没注意到这个项目，错过了DDL... +
+
diff --git a/01-index/index.html b/html/index.html similarity index 99% rename from 01-index/index.html rename to html/index.html index e8b858d..5f576a5 100644 --- a/01-index/index.html +++ b/html/index.html @@ -4,7 +4,8 @@ Document - + +
diff --git a/02-school/school.html b/html/school.html similarity index 99% rename from 02-school/school.html rename to html/school.html index 242db72..5f2cb50 100644 --- a/02-school/school.html +++ b/html/school.html @@ -4,7 +4,8 @@ Document - + +
diff --git a/03-subject/subject.html b/html/subject.html similarity index 98% rename from 03-subject/subject.html rename to html/subject.html index fc6fefa..004affe 100644 --- a/03-subject/subject.html +++ b/html/subject.html @@ -4,7 +4,8 @@ Document - + +