no message
This commit is contained in:
A1300399510
parent
69649f4e30
commit
5226411b38
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
98
css/common.css
Normal file
98
css/common.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
113
css/common.less
Normal file
113
css/common.less
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
1091
css/details.less
Normal file
1091
css/details.less
Normal file
File diff suppressed because it is too large
Load Diff
@ -1,46 +1,4 @@
|
|||||||
* {
|
.header-box {
|
||||||
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 {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 130px;
|
height: 130px;
|
||||||
padding: 0 50px;
|
padding: 0 50px;
|
||||||
@ -49,7 +7,7 @@ body {
|
|||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
.main .header-box:before {
|
.header-box:before {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
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));
|
background-image: linear-gradient(to right, rgba(60, 26, 94, 0.717647), rgba(53, 60, 90, 0.886275));
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
.main .header-box .bj {
|
.header-box .bj {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: -2;
|
z-index: -2;
|
||||||
}
|
}
|
||||||
.main .header-box .search {
|
.header-box .search {
|
||||||
width: 610px;
|
width: 610px;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
background-color: rgba(255, 255, 255, 0.4);
|
background-color: rgba(255, 255, 255, 0.4);
|
||||||
@ -74,17 +32,17 @@ body {
|
|||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.main .header-box .search .input {
|
.header-box .search .input {
|
||||||
height: 48px;
|
height: 48px;
|
||||||
line-height: 48px;
|
line-height: 48px;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
.main .header-box .search .search-icon {
|
.header-box .search .search-icon {
|
||||||
width: 22px;
|
width: 22px;
|
||||||
height: 22px;
|
height: 22px;
|
||||||
}
|
}
|
||||||
.main .header-box .btn .item {
|
.header-box .btn .item {
|
||||||
width: 160px;
|
width: 160px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
background: -webkit-linear-gradient(194.03624347deg, #dbe3fd 0%, #eef7f5 100%);
|
background: -webkit-linear-gradient(194.03624347deg, #dbe3fd 0%, #eef7f5 100%);
|
||||||
@ -96,35 +54,35 @@ body {
|
|||||||
color: #000000;
|
color: #000000;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.main .header-box .btn .item .icon {
|
.header-box .btn .item .icon {
|
||||||
height: 22px;
|
height: 22px;
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
.main .screen {
|
.screen {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
.main .screen .block {
|
.screen .block {
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
padding: 24px 34px 32px;
|
padding: 24px 34px 32px;
|
||||||
}
|
}
|
||||||
.main .screen .block .title {
|
.screen .block .title {
|
||||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||||
font-weight: 650;
|
font-weight: 650;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
margin-bottom: 26px;
|
margin-bottom: 26px;
|
||||||
}
|
}
|
||||||
.main .screen .block .title .icon {
|
.screen .block .title .icon {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
.main .screen .block .title .icon .img {
|
.screen .block .title .icon .img {
|
||||||
width: 24px;
|
width: 24px;
|
||||||
}
|
}
|
||||||
.main .screen .block .list .item {
|
.screen .block .list .item {
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
line-height: 36px;
|
line-height: 36px;
|
||||||
@ -135,43 +93,43 @@ body {
|
|||||||
color: #333;
|
color: #333;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.main .screen .block.school {
|
.screen .block.school {
|
||||||
width: 500px;
|
width: 500px;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
}
|
}
|
||||||
.main .screen .block.school .title .icon {
|
.screen .block.school .title .icon {
|
||||||
background-color: #d5f1f7;
|
background-color: #d5f1f7;
|
||||||
}
|
}
|
||||||
.main .screen .block.school .list {
|
.screen .block.school .list {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(5, 1fr);
|
grid-template-columns: repeat(5, 1fr);
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
}
|
}
|
||||||
.main .screen .block.school .list .item {
|
.screen .block.school .list .item {
|
||||||
width: 78px;
|
width: 78px;
|
||||||
}
|
}
|
||||||
.main .screen .block.subject {
|
.screen .block.subject {
|
||||||
padding-bottom: 22px;
|
padding-bottom: 22px;
|
||||||
}
|
}
|
||||||
.main .screen .block.subject .title .icon {
|
.screen .block.subject .title .icon {
|
||||||
background-color: #fdefbc;
|
background-color: #fdefbc;
|
||||||
}
|
}
|
||||||
.main .screen .block.subject .list {
|
.screen .block.subject .list {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
.main .screen .block.subject .list .item {
|
.screen .block.subject .list .item {
|
||||||
padding: 0 17px;
|
padding: 0 17px;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
.main .fate {
|
.fate {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
padding: 31px 37px 10px;
|
padding: 31px 37px 10px;
|
||||||
}
|
}
|
||||||
.main .fate .title {
|
.fate .title {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||||
font-weight: 650;
|
font-weight: 650;
|
||||||
@ -179,32 +137,32 @@ body {
|
|||||||
color: #000000;
|
color: #000000;
|
||||||
margin-bottom: 6px;
|
margin-bottom: 6px;
|
||||||
}
|
}
|
||||||
.main .fate .title .btn {
|
.fate .title .btn {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #555555;
|
color: #555555;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.main .fate .title .btn .icon {
|
.fate .title .btn .icon {
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
.main .fate .list {
|
.fate .list {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
.main .fate .list .item {
|
.fate .list .item {
|
||||||
width: 530px;
|
width: 530px;
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
padding-top: 22px;
|
padding-top: 22px;
|
||||||
padding-bottom: 22px;
|
padding-bottom: 22px;
|
||||||
justify-content: space-between;
|
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;
|
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-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
@ -212,7 +170,7 @@ body {
|
|||||||
margin-bottom: 6px;
|
margin-bottom: 6px;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.main .fate .list .item .left .name::after {
|
.fate .list .item .left .name::after {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
@ -224,14 +182,14 @@ body {
|
|||||||
border: 1px solid #d7d7d7;
|
border: 1px solid #d7d7d7;
|
||||||
border-radius: 39px;
|
border-radius: 39px;
|
||||||
}
|
}
|
||||||
.main .fate .list .item .left .message {
|
.fate .list .item .left .message {
|
||||||
color: #7f7f7f;
|
color: #7f7f7f;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
.main .fate .list .item .left .message .virgule {
|
.fate .list .item .left .message .virgule {
|
||||||
color: #d7d7d7;
|
color: #d7d7d7;
|
||||||
}
|
}
|
||||||
.main .fate .list .item .btn {
|
.fate .list .item .btn {
|
||||||
width: 110px;
|
width: 110px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
background: -webkit-linear-gradient(196.2201937deg, #dbe3fd 0%, #eef7f5 100%);
|
background: -webkit-linear-gradient(196.2201937deg, #dbe3fd 0%, #eef7f5 100%);
|
||||||
@ -242,7 +200,7 @@ body {
|
|||||||
color: #000000;
|
color: #000000;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.main .fate .list .item .btn .add {
|
.fate .list .item .btn .add {
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
@ -250,11 +208,11 @@ body {
|
|||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
margin: 0 3px;
|
margin: 0 3px;
|
||||||
}
|
}
|
||||||
.main .fate .list .item .btn .add .icon {
|
.fate .list .item .btn .add .icon {
|
||||||
width: 10px;
|
width: 10px;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
}
|
}
|
||||||
.main .recruit {
|
.recruit {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 502px;
|
height: 502px;
|
||||||
background: linear-gradient(-36.49404556deg, #cfe0f9 -23%, #f1f2df 39%, #eef7f5 114%);
|
background: linear-gradient(-36.49404556deg, #cfe0f9 -23%, #f1f2df 39%, #eef7f5 114%);
|
||||||
@ -263,35 +221,35 @@ body {
|
|||||||
padding: 24px 30px 24px;
|
padding: 24px 30px 24px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
.main .recruit .title {
|
.recruit .title {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
.main .recruit .title .img {
|
.recruit .title .img {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 26px;
|
height: 26px;
|
||||||
}
|
}
|
||||||
.main .recruit .title .btn {
|
.recruit .title .btn {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.main .recruit .title .btn .icon {
|
.recruit .title .btn .icon {
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
margin-left: 7px;
|
margin-left: 7px;
|
||||||
transform: rotate(270deg);
|
transform: rotate(270deg);
|
||||||
}
|
}
|
||||||
.main .recruit .list {
|
.recruit .list {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
.main .recruit .list .list-item {
|
.recruit .list .list-item {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
}
|
}
|
||||||
.main .recruit .list .item {
|
.recruit .list .item {
|
||||||
width: 565px;
|
width: 565px;
|
||||||
height: 180px;
|
height: 180px;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
@ -301,29 +259,29 @@ body {
|
|||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.main .recruit .list .item .avatar {
|
.recruit .list .item .avatar {
|
||||||
width: 32px;
|
width: 32px;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
.main .recruit .list .item .info .school {
|
.recruit .list .item .info .school {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
margin-bottom: 10px;
|
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-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||||
font-weight: 650;
|
font-weight: 650;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
.main .recruit .list .item .info .name-en {
|
.recruit .list .item .info .name-en {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #7f7f7f;
|
color: #7f7f7f;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
.main .recruit .list .item .info .aq {
|
.recruit .list .item .info .aq {
|
||||||
width: 477px;
|
width: 477px;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
line-height: 36px;
|
line-height: 36px;
|
||||||
@ -331,26 +289,26 @@ body {
|
|||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
}
|
}
|
||||||
.main .recruit .list .item .info .aq .text {
|
.recruit .list .item .info .aq .text {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #e4c762;
|
color: #e4c762;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
.main .recruit .list .item .info .aq .value {
|
.recruit .list .item .info .aq .value {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
}
|
}
|
||||||
.main .recruit .list .item .info .aq .icon {
|
.recruit .list .item .info .aq .icon {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
}
|
}
|
||||||
.main .recruit .list .item .operate {
|
.recruit .list .item .operate {
|
||||||
position: relative;
|
position: relative;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 24px;
|
top: 24px;
|
||||||
right: 24px;
|
right: 24px;
|
||||||
}
|
}
|
||||||
.main .recruit .list .item .operate .circle {
|
.recruit .list .item .operate .circle {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -360,15 +318,15 @@ body {
|
|||||||
border: 1px solid #afb5ca;
|
border: 1px solid #afb5ca;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
}
|
}
|
||||||
.main .recruit .list .item .operate .circle .img-add {
|
.recruit .list .item .operate .circle .img-add {
|
||||||
width: 12px;
|
width: 12px;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
}
|
}
|
||||||
.main .recruit .list .item .operate .circle .img-dot {
|
.recruit .list .item .operate .circle .img-dot {
|
||||||
width: 18px;
|
width: 18px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
}
|
}
|
||||||
.main .recruit .list .item .operate .select {
|
.recruit .list .item .operate .select {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: -24px;
|
right: -24px;
|
||||||
top: -24px;
|
top: -24px;
|
||||||
@ -385,17 +343,17 @@ body {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
.main .recruit .list .item .operate .select.show {
|
.recruit .list .item .operate .select.show {
|
||||||
height: 180px;
|
height: 180px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
.main .recruit .list .item .operate .select .title {
|
.recruit .list .item .operate .select .title {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #7f7f7f;
|
color: #7f7f7f;
|
||||||
margin-top: 75px;
|
margin-top: 75px;
|
||||||
margin-bottom: 19px;
|
margin-bottom: 19px;
|
||||||
}
|
}
|
||||||
.main .recruit .list .item .operate .select .title .dot {
|
.recruit .list .item .operate .select .title .dot {
|
||||||
width: 8px;
|
width: 8px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
@ -403,7 +361,7 @@ body {
|
|||||||
background-color: #fddf6d;
|
background-color: #fddf6d;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
.main .recruit .list .item .operate .select .btn {
|
.recruit .list .item .operate .select .btn {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: 144px;
|
width: 144px;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
@ -414,16 +372,16 @@ body {
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
}
|
}
|
||||||
.main .recruit .list .item .operate .select .btn .img {
|
.recruit .list .item .operate .select .btn .img {
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
.main .recruit .list .item .operate .already {
|
.recruit .list .item .operate .already {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #7f7f7f;
|
color: #7f7f7f;
|
||||||
}
|
}
|
||||||
.main .recruit .list .item .operate .already .tick-box {
|
.recruit .list .item .operate .already .tick-box {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
background-color: #f6f6f6;
|
background-color: #f6f6f6;
|
||||||
@ -431,44 +389,44 @@ body {
|
|||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
.main .recruit .list .item .operate .already .tick-box .img-tick {
|
.recruit .list .item .operate .already .tick-box .img-tick {
|
||||||
width: 10px;
|
width: 10px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
}
|
}
|
||||||
.main .recruit .indicate {
|
.recruit .indicate {
|
||||||
line-height: 12px;
|
line-height: 12px;
|
||||||
}
|
}
|
||||||
.main .recruit .indicate .icon {
|
.recruit .indicate .icon {
|
||||||
width: 7px;
|
width: 7px;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.main .recruit .indicate .text {
|
.recruit .indicate .text {
|
||||||
color: #555555;
|
color: #555555;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
margin: 0 12px;
|
margin: 0 12px;
|
||||||
}
|
}
|
||||||
.main .data .fall {
|
.data .fall {
|
||||||
width: 285px;
|
width: 285px;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
.main .data .item {
|
.data .item {
|
||||||
width: 285px;
|
width: 285px;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
border: 1px solid #ebebeb;
|
border: 1px solid #ebebeb;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
padding: 21px 15px 0;
|
padding: 21px 15px 0;
|
||||||
}
|
}
|
||||||
.main .data .item .school {
|
.data .item .school {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
.main .data .item .school .img {
|
.data .item .school .img {
|
||||||
height: 20px;
|
height: 20px;
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
.main .data .item .name {
|
.data .item .name {
|
||||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||||
font-weight: 650;
|
font-weight: 650;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -476,7 +434,7 @@ body {
|
|||||||
color: #000000;
|
color: #000000;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
.main .data .item .name-en {
|
.data .item .name-en {
|
||||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -484,22 +442,22 @@ body {
|
|||||||
color: #555555;
|
color: #555555;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
.main .data .item .introduce {
|
.data .item .introduce {
|
||||||
color: #555555;
|
color: #555555;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
.main .data .item .introduce .quantity {
|
.data .item .introduce .quantity {
|
||||||
font-family: "Arial-Black", "Arial Black", sans-serif;
|
font-family: "Arial-Black", "Arial Black", sans-serif;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
}
|
}
|
||||||
.main .data .item .introduce .line {
|
.data .item .introduce .line {
|
||||||
color: #d7d7d7;
|
color: #d7d7d7;
|
||||||
margin: 0 10px;
|
margin: 0 10px;
|
||||||
}
|
}
|
||||||
.main .data .item .word {
|
.data .item .word {
|
||||||
background-color: #f9f8f8;
|
background-color: #f9f8f8;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
@ -507,7 +465,7 @@ body {
|
|||||||
color: #7f7f7f;
|
color: #7f7f7f;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
.main .data .item .tag .tag-item {
|
.data .item .tag .tag-item {
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
@ -519,19 +477,19 @@ body {
|
|||||||
color: #7f7f7f;
|
color: #7f7f7f;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
.main .data .item .tag .tag-item.gray {
|
.data .item .tag .tag-item.gray {
|
||||||
background-color: #333333;
|
background-color: #333333;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
.main .data .item .tag .tag-item.semester {
|
.data .item .tag .tag-item.semester {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
background-color: #f95d5d;
|
background-color: #f95d5d;
|
||||||
}
|
}
|
||||||
.main .data .item .operate {
|
.data .item .operate {
|
||||||
height: 80px;
|
height: 80px;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.main .data .item .operate .circle {
|
.data .item .operate .circle {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -541,15 +499,15 @@ body {
|
|||||||
border: 1px solid #afb5ca;
|
border: 1px solid #afb5ca;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
}
|
}
|
||||||
.main .data .item .operate .circle .img-add {
|
.data .item .operate .circle .img-add {
|
||||||
width: 12px;
|
width: 12px;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
}
|
}
|
||||||
.main .data .item .operate .circle .img-dot {
|
.data .item .operate .circle .img-dot {
|
||||||
width: 18px;
|
width: 18px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
}
|
}
|
||||||
.main .data .item .operate .select {
|
.data .item .operate .select {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: 285px;
|
width: 285px;
|
||||||
@ -564,19 +522,19 @@ body {
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
}
|
}
|
||||||
.main .data .item .operate .select.show {
|
.data .item .operate .select.show {
|
||||||
height: 211px;
|
height: 211px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
.main .data .item .operate .select .top {
|
.data .item .operate .select .top {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
.main .data .item .operate .select .top .title {
|
.data .item .operate .select .top .title {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #7f7f7f;
|
color: #7f7f7f;
|
||||||
margin-bottom: 19px;
|
margin-bottom: 19px;
|
||||||
}
|
}
|
||||||
.main .data .item .operate .select .top .title .dot {
|
.data .item .operate .select .top .title .dot {
|
||||||
width: 8px;
|
width: 8px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
@ -584,7 +542,7 @@ body {
|
|||||||
background-color: #fddf6d;
|
background-color: #fddf6d;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
.main .data .item .operate .select .top .btn {
|
.data .item .operate .select .top .btn {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: 144px;
|
width: 144px;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
@ -595,20 +553,20 @@ body {
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
}
|
}
|
||||||
.main .data .item .operate .select .top .btn .img {
|
.data .item .operate .select .top .btn .img {
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
.main .data .item .operate .select .bottom {
|
.data .item .operate .select .bottom {
|
||||||
border-top: 1px dotted #ebebeb;
|
border-top: 1px dotted #ebebeb;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
}
|
}
|
||||||
.main .data .item .operate .already {
|
.data .item .operate .already {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #7f7f7f;
|
color: #7f7f7f;
|
||||||
}
|
}
|
||||||
.main .data .item .operate .already .tick-box {
|
.data .item .operate .already .tick-box {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
background-color: #f6f6f6;
|
background-color: #f6f6f6;
|
||||||
@ -616,62 +574,7 @@ body {
|
|||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
.main .data .item .operate .already .tick-box .img-tick {
|
.data .item .operate .already .tick-box .img-tick {
|
||||||
width: 10px;
|
width: 10px;
|
||||||
height: 8px;
|
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;
|
|
||||||
}
|
|
||||||
648
css/index.less
Normal file
648
css/index.less
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,46 +1,4 @@
|
|||||||
* {
|
.box {
|
||||||
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 {
|
|
||||||
width: 1200px;
|
width: 1200px;
|
||||||
height: 396px;
|
height: 396px;
|
||||||
background-color: #fbfbfb;
|
background-color: #fbfbfb;
|
||||||
@ -48,7 +6,7 @@ body {
|
|||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
.main .box::after {
|
.box::after {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -5px;
|
top: -5px;
|
||||||
@ -61,29 +19,29 @@ body {
|
|||||||
border-radius: 18px;
|
border-radius: 18px;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
.main .box .tab {
|
.box .tab {
|
||||||
height: 60px;
|
height: 60px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #7f7f7f;
|
color: #7f7f7f;
|
||||||
border-bottom: 1px dotted #ebebeb;
|
border-bottom: 1px dotted #ebebeb;
|
||||||
padding-left: 24px;
|
padding-left: 24px;
|
||||||
}
|
}
|
||||||
.main .box .tab .img {
|
.box .tab .img {
|
||||||
width: 6px;
|
width: 6px;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
margin: 0 15px;
|
margin: 0 15px;
|
||||||
}
|
}
|
||||||
.main .box .tab .current {
|
.box .tab .current {
|
||||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||||
font-weight: 650;
|
font-weight: 650;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
}
|
}
|
||||||
.main .box .details {
|
.box .details {
|
||||||
padding: 31px 60px;
|
padding: 31px 60px;
|
||||||
}
|
}
|
||||||
.main .box .details .logo {
|
.box .details .logo {
|
||||||
width: 120px;
|
width: 120px;
|
||||||
height: 120px;
|
height: 120px;
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -93,7 +51,7 @@ body {
|
|||||||
margin-right: 39px;
|
margin-right: 39px;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
}
|
}
|
||||||
.main .box .details .logo .bj {
|
.box .details .logo .bj {
|
||||||
width: 120px;
|
width: 120px;
|
||||||
height: 120px;
|
height: 120px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -101,10 +59,10 @@ body {
|
|||||||
left: 0;
|
left: 0;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
.main .box .details .logo .img {
|
.box .details .logo .img {
|
||||||
width: 65px;
|
width: 65px;
|
||||||
}
|
}
|
||||||
.main .box .details .right .name {
|
.box .details .right .name {
|
||||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||||
font-weight: 650;
|
font-weight: 650;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -112,7 +70,7 @@ body {
|
|||||||
color: #000000;
|
color: #000000;
|
||||||
margin-bottom: 6px;
|
margin-bottom: 6px;
|
||||||
}
|
}
|
||||||
.main .box .details .right .name-en {
|
.box .details .right .name-en {
|
||||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -120,18 +78,18 @@ body {
|
|||||||
color: #555555;
|
color: #555555;
|
||||||
margin-bottom: 22px;
|
margin-bottom: 22px;
|
||||||
}
|
}
|
||||||
.main .box .details .right .world {
|
.box .details .right .world {
|
||||||
width: 423px;
|
width: 423px;
|
||||||
padding-bottom: 15px;
|
padding-bottom: 15px;
|
||||||
margin-bottom: 27px;
|
margin-bottom: 27px;
|
||||||
border-bottom: 1px solid #ebebeb;
|
border-bottom: 1px solid #ebebeb;
|
||||||
}
|
}
|
||||||
.main .box .details .right .world .head {
|
.box .details .right .world .head {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 9px;
|
margin-bottom: 9px;
|
||||||
}
|
}
|
||||||
.main .box .details .right .world .head::after {
|
.box .details .right .world .head::after {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
@ -139,21 +97,21 @@ body {
|
|||||||
height: 1px;
|
height: 1px;
|
||||||
background-color: #ebebeb;
|
background-color: #ebebeb;
|
||||||
}
|
}
|
||||||
.main .box .details .right .world .head .icon {
|
.box .details .right .world .head .icon {
|
||||||
width: 90px;
|
width: 90px;
|
||||||
background-color: #fbfbfb;
|
background-color: #fbfbfb;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
.main .box .details .right .world .head .icon .img {
|
.box .details .right .world .head .icon .img {
|
||||||
width: 64px;
|
width: 64px;
|
||||||
height: 22px;
|
height: 22px;
|
||||||
}
|
}
|
||||||
.main .box .details .right .world .list .item {
|
.box .details .right .world .list .item {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
flex-direction: column;
|
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-family: "Arial-Black", "Arial Black", sans-serif;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -161,7 +119,7 @@ body {
|
|||||||
color: #000000;
|
color: #000000;
|
||||||
margin-bottom: 9px;
|
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-family: "HelveticaNeue", "Helvetica Neue", sans-serif;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -169,7 +127,7 @@ body {
|
|||||||
color: #555555;
|
color: #555555;
|
||||||
position: relative;
|
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;
|
position: absolute;
|
||||||
right: -10px;
|
right: -10px;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
@ -177,7 +135,7 @@ body {
|
|||||||
height: 8px;
|
height: 8px;
|
||||||
transform: rotate(270deg);
|
transform: rotate(270deg);
|
||||||
}
|
}
|
||||||
.main .box .details .right .brief {
|
.box .details .right .brief {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
background-color: #f6f6f6;
|
background-color: #f6f6f6;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
@ -189,21 +147,21 @@ body {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 6px;
|
padding: 6px;
|
||||||
}
|
}
|
||||||
.main .box .details .right .brief .text {
|
.box .details .right .brief .text {
|
||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
}
|
}
|
||||||
.main .box .details .right .brief .img {
|
.box .details .right .brief .img {
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.main .hot {
|
.hot {
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
.main .hot .header {
|
.hot .header {
|
||||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||||
font-weight: 650;
|
font-weight: 650;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -211,34 +169,34 @@ body {
|
|||||||
color: #000000;
|
color: #000000;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
.main .hot .header .icon {
|
.hot .header .icon {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
background-color: #fbe3ea;
|
background-color: #fbe3ea;
|
||||||
margin-right: 13px;
|
margin-right: 13px;
|
||||||
}
|
}
|
||||||
.main .hot .header .icon .img {
|
.hot .header .icon .img {
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
}
|
}
|
||||||
.main .hot .list {
|
.hot .list {
|
||||||
width: 1152px;
|
width: 1152px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
.main .hot .list .list-item {
|
.hot .list .list-item {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
}
|
}
|
||||||
.main .hot .list .list-item .item {
|
.hot .list .list-item .item {
|
||||||
padding: 22px 0;
|
padding: 22px 0;
|
||||||
width: 510px;
|
width: 510px;
|
||||||
margin-left: 20px;
|
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;
|
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-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -247,7 +205,7 @@ body {
|
|||||||
margin-bottom: 6px;
|
margin-bottom: 6px;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.main .hot .list .list-item .item .left .name::after {
|
.hot .list .list-item .item .left .name::after {
|
||||||
content: "";
|
content: "";
|
||||||
width: 8px;
|
width: 8px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
@ -260,29 +218,29 @@ body {
|
|||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
box-sizing: border-box;
|
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-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #7f7f7f;
|
color: #7f7f7f;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
.main .hot .list .list-item .item .left .text .ranking {
|
.hot .list .list-item .item .left .text .ranking {
|
||||||
color: #555555;
|
color: #555555;
|
||||||
}
|
}
|
||||||
.main .hot .list .list-item .item .left .text .vertical {
|
.hot .list .list-item .item .left .text .vertical {
|
||||||
color: #d7d7d7;
|
color: #d7d7d7;
|
||||||
margin: 0 8px;
|
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-family: "Arial-Black", "Arial Black", sans-serif;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
}
|
}
|
||||||
.main .hot .list .list-item .item .operate {
|
.hot .list .list-item .item .operate {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.main .hot .list .list-item .item .operate .circle {
|
.hot .list .list-item .item .operate .circle {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -292,15 +250,15 @@ body {
|
|||||||
border: 1px solid #afb5ca;
|
border: 1px solid #afb5ca;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
}
|
}
|
||||||
.main .hot .list .list-item .item .operate .circle .img-add {
|
.hot .list .list-item .item .operate .circle .img-add {
|
||||||
width: 12px;
|
width: 12px;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
}
|
}
|
||||||
.main .hot .list .list-item .item .operate .circle .img-dot {
|
.hot .list .list-item .item .operate .circle .img-dot {
|
||||||
width: 18px;
|
width: 18px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
}
|
}
|
||||||
.main .hot .list .list-item .item .operate .select {
|
.hot .list .list-item .item .operate .select {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 40px;
|
right: 40px;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
@ -319,16 +277,16 @@ body {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
.main .hot .list .list-item .item .operate .select.show {
|
.hot .list .list-item .item .operate .select.show {
|
||||||
height: 90px;
|
height: 90px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
.main .hot .list .list-item .item .operate .select .title {
|
.hot .list .list-item .item .operate .select .title {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #7f7f7f;
|
color: #7f7f7f;
|
||||||
margin-bottom: 14px;
|
margin-bottom: 14px;
|
||||||
}
|
}
|
||||||
.main .hot .list .list-item .item .operate .select .title .dot {
|
.hot .list .list-item .item .operate .select .title .dot {
|
||||||
width: 8px;
|
width: 8px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
@ -336,7 +294,7 @@ body {
|
|||||||
background-color: #fddf6d;
|
background-color: #fddf6d;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
.main .hot .list .list-item .item .operate .select .btn {
|
.hot .list .list-item .item .operate .select .btn {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: 144px;
|
width: 144px;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
@ -347,16 +305,16 @@ body {
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
}
|
}
|
||||||
.main .hot .list .list-item .item .operate .select .btn .img {
|
.hot .list .list-item .item .operate .select .btn .img {
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
.main .hot .list .list-item .item .operate .already {
|
.hot .list .list-item .item .operate .already {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #7f7f7f;
|
color: #7f7f7f;
|
||||||
}
|
}
|
||||||
.main .hot .list .list-item .item .operate .already .tick-box {
|
.hot .list .list-item .item .operate .already .tick-box {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
background-color: #f6f6f6;
|
background-color: #f6f6f6;
|
||||||
@ -364,30 +322,30 @@ body {
|
|||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
margin-right: 5px;
|
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;
|
width: 10px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
}
|
}
|
||||||
.main .hot .indicate {
|
.hot .indicate {
|
||||||
line-height: 12px;
|
line-height: 12px;
|
||||||
}
|
}
|
||||||
.main .hot .indicate .icon {
|
.hot .indicate .icon {
|
||||||
width: 7px;
|
width: 7px;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.main .hot .indicate .text {
|
.hot .indicate .text {
|
||||||
color: #555555;
|
color: #555555;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
margin: 0 12px;
|
margin: 0 12px;
|
||||||
}
|
}
|
||||||
.main .content {
|
.content {
|
||||||
height: 1214px;
|
height: 1214px;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
border: 1px solid #f2f2f2;
|
border: 1px solid #f2f2f2;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
}
|
}
|
||||||
.main .content .header {
|
.content .header {
|
||||||
height: 88px;
|
height: 88px;
|
||||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||||
font-weight: 650;
|
font-weight: 650;
|
||||||
@ -396,22 +354,22 @@ body {
|
|||||||
color: #000000;
|
color: #000000;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.main .content .body .left {
|
.content .body .left {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
border-right: 1px solid #ebebeb;
|
border-right: 1px solid #ebebeb;
|
||||||
}
|
}
|
||||||
.main .content .body .left .item {
|
.content .body .left .item {
|
||||||
height: 56px;
|
height: 56px;
|
||||||
padding-left: 34px;
|
padding-left: 34px;
|
||||||
}
|
}
|
||||||
.main .content .body .left .item .img {
|
.content .body .left .item .img {
|
||||||
width: 18px;
|
width: 18px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
margin-right: 12px;
|
margin-right: 12px;
|
||||||
}
|
}
|
||||||
.main .content .body .left .item.pitch {
|
.content .body .left .item.pitch {
|
||||||
background-color: #fbfbfb;
|
background-color: #fbfbfb;
|
||||||
border-top: 1px solid #ebebeb;
|
border-top: 1px solid #ebebeb;
|
||||||
border-bottom: 1px solid #ebebeb;
|
border-bottom: 1px solid #ebebeb;
|
||||||
@ -420,7 +378,7 @@ body {
|
|||||||
color: #000000;
|
color: #000000;
|
||||||
font-weight: 650;
|
font-weight: 650;
|
||||||
}
|
}
|
||||||
.main .content .body .left .item.pitch::after {
|
.content .body .left .item.pitch::after {
|
||||||
content: "";
|
content: "";
|
||||||
width: 5px;
|
width: 5px;
|
||||||
height: 56px;
|
height: 56px;
|
||||||
@ -429,21 +387,21 @@ body {
|
|||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
.main .content .body .right {
|
.content .body .right {
|
||||||
background-color: #fbfbfb;
|
background-color: #fbfbfb;
|
||||||
border-top: 1px solid #ebebeb;
|
border-top: 1px solid #ebebeb;
|
||||||
padding: 0 32px;
|
padding: 0 32px;
|
||||||
}
|
}
|
||||||
.main .content .body .right .screen .title {
|
.content .body .right .screen .title {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
color: #555555;
|
color: #555555;
|
||||||
padding-top: 27px;
|
padding-top: 27px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
.main .content .body .right .screen .list {
|
.content .body .right .screen .list {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
.main .content .body .right .screen .list .item {
|
.content .body .right .screen .list .item {
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
line-height: 36px;
|
line-height: 36px;
|
||||||
@ -456,35 +414,35 @@ body {
|
|||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
.main .content .body .right .screen .list .item.pitch {
|
.content .body .right .screen .list .item.pitch {
|
||||||
background-color: #7b8cd3;
|
background-color: #7b8cd3;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
.main .content .body .right .h {
|
.content .body .right .h {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding-top: 27px;
|
padding-top: 27px;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
.main .content .body .right .h .total {
|
.content .body .right .h .total {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #7f7f7f;
|
color: #7f7f7f;
|
||||||
}
|
}
|
||||||
.main .content .body .right .h .sort {
|
.content .body .right .h .sort {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.main .content .body .right .h .sort .img {
|
.content .body .right .h .sort .img {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
}
|
}
|
||||||
.main .content .body .right .list {
|
.content .body .right .list {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
.main .content .body .right .list .item {
|
.content .body .right .list .item {
|
||||||
width: 460px;
|
width: 460px;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
border: 1px solid #f2f2f2;
|
border: 1px solid #f2f2f2;
|
||||||
@ -493,7 +451,7 @@ body {
|
|||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
position: relative;
|
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-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||||
font-weight: 650;
|
font-weight: 650;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -501,7 +459,7 @@ body {
|
|||||||
color: #000000;
|
color: #000000;
|
||||||
margin-bottom: 12px;
|
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-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -509,22 +467,22 @@ body {
|
|||||||
color: #555555;
|
color: #555555;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
.main .content .body .right .list .item .introduce {
|
.content .body .right .list .item .introduce {
|
||||||
color: #555555;
|
color: #555555;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
margin-bottom: 12px;
|
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-family: "Arial-Black", "Arial Black", sans-serif;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
}
|
}
|
||||||
.main .content .body .right .list .item .introduce .line {
|
.content .body .right .list .item .introduce .line {
|
||||||
color: #d7d7d7;
|
color: #d7d7d7;
|
||||||
margin: 0 10px;
|
margin: 0 10px;
|
||||||
}
|
}
|
||||||
.main .content .body .right .list .item .word {
|
.content .body .right .list .item .word {
|
||||||
background-color: #f9f8f8;
|
background-color: #f9f8f8;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
@ -532,7 +490,7 @@ body {
|
|||||||
color: #7f7f7f;
|
color: #7f7f7f;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
.main .content .body .right .list .item .tag .tag-item {
|
.content .body .right .list .item .tag .tag-item {
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
@ -544,20 +502,20 @@ body {
|
|||||||
color: #7f7f7f;
|
color: #7f7f7f;
|
||||||
margin-right: 10px;
|
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;
|
background-color: #333333;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
.main .content .body .right .list .item .tag .tag-item.semester {
|
.content .body .right .list .item .tag .tag-item.semester {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
background-color: #f95d5d;
|
background-color: #f95d5d;
|
||||||
}
|
}
|
||||||
.main .content .body .right .list .item .operate {
|
.content .body .right .list .item .operate {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 18px;
|
top: 18px;
|
||||||
right: 24px;
|
right: 24px;
|
||||||
}
|
}
|
||||||
.main .content .body .right .list .item .operate .circle {
|
.content .body .right .list .item .operate .circle {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -567,15 +525,15 @@ body {
|
|||||||
border: 1px solid #afb5ca;
|
border: 1px solid #afb5ca;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
}
|
}
|
||||||
.main .content .body .right .list .item .operate .circle .img-add {
|
.content .body .right .list .item .operate .circle .img-add {
|
||||||
width: 12px;
|
width: 12px;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
}
|
}
|
||||||
.main .content .body .right .list .item .operate .circle .img-dot {
|
.content .body .right .list .item .operate .circle .img-dot {
|
||||||
width: 18px;
|
width: 18px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
}
|
}
|
||||||
.main .content .body .right .list .item .operate .select {
|
.content .body .right .list .item .operate .select {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -18px;
|
top: -18px;
|
||||||
right: -24px;
|
right: -24px;
|
||||||
@ -593,16 +551,16 @@ body {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
padding-top: 68px;
|
padding-top: 68px;
|
||||||
}
|
}
|
||||||
.main .content .body .right .list .item .operate .select.show {
|
.content .body .right .list .item .operate .select.show {
|
||||||
height: 171px;
|
height: 171px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
.main .content .body .right .list .item .operate .select .title {
|
.content .body .right .list .item .operate .select .title {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #7f7f7f;
|
color: #7f7f7f;
|
||||||
margin-bottom: 19px;
|
margin-bottom: 19px;
|
||||||
}
|
}
|
||||||
.main .content .body .right .list .item .operate .select .title .dot {
|
.content .body .right .list .item .operate .select .title .dot {
|
||||||
width: 8px;
|
width: 8px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
@ -610,7 +568,7 @@ body {
|
|||||||
background-color: #fddf6d;
|
background-color: #fddf6d;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
.main .content .body .right .list .item .operate .select .btn {
|
.content .body .right .list .item .operate .select .btn {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: 144px;
|
width: 144px;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
@ -621,16 +579,16 @@ body {
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
}
|
}
|
||||||
.main .content .body .right .list .item .operate .select .btn .img {
|
.content .body .right .list .item .operate .select .btn .img {
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
.main .content .body .right .list .item .operate .already {
|
.content .body .right .list .item .operate .already {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #7f7f7f;
|
color: #7f7f7f;
|
||||||
}
|
}
|
||||||
.main .content .body .right .list .item .operate .already .tick-box {
|
.content .body .right .list .item .operate .already .tick-box {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
background-color: #f6f6f6;
|
background-color: #f6f6f6;
|
||||||
@ -638,62 +596,7 @@ body {
|
|||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
margin-right: 5px;
|
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;
|
width: 10px;
|
||||||
height: 8px;
|
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;
|
|
||||||
}
|
|
||||||
673
css/school.less
Normal file
673
css/school.less
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,46 +1,4 @@
|
|||||||
* {
|
.box {
|
||||||
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 {
|
|
||||||
width: 1200px;
|
width: 1200px;
|
||||||
height: 396px;
|
height: 396px;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
@ -48,7 +6,7 @@ body {
|
|||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
.main .box::after {
|
.box::after {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -5px;
|
top: -5px;
|
||||||
@ -61,35 +19,35 @@ body {
|
|||||||
border-radius: 18px;
|
border-radius: 18px;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
.main .box .tab {
|
.box .tab {
|
||||||
height: 60px;
|
height: 60px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #7f7f7f;
|
color: #7f7f7f;
|
||||||
border-bottom: 1px dotted #ebebeb;
|
border-bottom: 1px dotted #ebebeb;
|
||||||
padding-left: 24px;
|
padding-left: 24px;
|
||||||
}
|
}
|
||||||
.main .box .tab .img {
|
.box .tab .img {
|
||||||
width: 6px;
|
width: 6px;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
margin: 0 15px;
|
margin: 0 15px;
|
||||||
}
|
}
|
||||||
.main .box .tab .current {
|
.box .tab .current {
|
||||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||||
font-weight: 650;
|
font-weight: 650;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
}
|
}
|
||||||
.main .box .info {
|
.box .info {
|
||||||
padding: 41px 60px 0;
|
padding: 41px 60px 0;
|
||||||
margin-bottom: 40px;
|
margin-bottom: 40px;
|
||||||
}
|
}
|
||||||
.main .box .info .img {
|
.box .info .img {
|
||||||
width: 120px;
|
width: 120px;
|
||||||
height: 120px;
|
height: 120px;
|
||||||
margin-right: 40px;
|
margin-right: 40px;
|
||||||
}
|
}
|
||||||
.main .box .info .title {
|
.box .info .title {
|
||||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||||
font-weight: 650;
|
font-weight: 650;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -97,10 +55,10 @@ body {
|
|||||||
color: #000000;
|
color: #000000;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
.main .box .info .list {
|
.box .info .list {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
.main .box .info .list .item {
|
.box .info .list .item {
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
line-height: 36px;
|
line-height: 36px;
|
||||||
@ -113,30 +71,30 @@ body {
|
|||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
.main .box .info .list .item.pitch {
|
.box .info .list .item.pitch {
|
||||||
background-color: #7b8cd3;
|
background-color: #7b8cd3;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
.main .body {
|
.body {
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
}
|
}
|
||||||
.main .body .left {
|
.body .left {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
border-right: 1px solid #ebebeb;
|
border-right: 1px solid #ebebeb;
|
||||||
}
|
}
|
||||||
.main .body .left .item {
|
.body .left .item {
|
||||||
height: 56px;
|
height: 56px;
|
||||||
padding-left: 34px;
|
padding-left: 34px;
|
||||||
}
|
}
|
||||||
.main .body .left .item .img {
|
.body .left .item .img {
|
||||||
width: 18px;
|
width: 18px;
|
||||||
margin-right: 12px;
|
margin-right: 12px;
|
||||||
}
|
}
|
||||||
.main .body .left .item.pitch {
|
.body .left .item.pitch {
|
||||||
background-color: #fbfbfb;
|
background-color: #fbfbfb;
|
||||||
border-top: 1px solid #ebebeb;
|
border-top: 1px solid #ebebeb;
|
||||||
border-bottom: 1px solid #ebebeb;
|
border-bottom: 1px solid #ebebeb;
|
||||||
@ -145,7 +103,7 @@ body {
|
|||||||
color: #000000;
|
color: #000000;
|
||||||
font-weight: 650;
|
font-weight: 650;
|
||||||
}
|
}
|
||||||
.main .body .left .item.pitch::after {
|
.body .left .item.pitch::after {
|
||||||
content: "";
|
content: "";
|
||||||
width: 5px;
|
width: 5px;
|
||||||
height: 56px;
|
height: 56px;
|
||||||
@ -154,40 +112,40 @@ body {
|
|||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
.main .body .right {
|
.body .right {
|
||||||
background-color: #fbfbfb;
|
background-color: #fbfbfb;
|
||||||
border-top: 1px solid #ebebeb;
|
border-top: 1px solid #ebebeb;
|
||||||
padding: 0 32px;
|
padding: 0 32px;
|
||||||
}
|
}
|
||||||
.main .body .right .h {
|
.body .right .h {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding-top: 27px;
|
padding-top: 27px;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
.main .body .right .h .total {
|
.body .right .h .total {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #7f7f7f;
|
color: #7f7f7f;
|
||||||
}
|
}
|
||||||
.main .body .right .h .item {
|
.body .right .h .item {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.main .body .right .h .item .img-sort {
|
.body .right .h .item .img-sort {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
}
|
}
|
||||||
.main .body .right .h .item .img-school {
|
.body .right .h .item .img-school {
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
}
|
}
|
||||||
.main .body .right .list {
|
.body .right .list {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
.main .body .right .list .item {
|
.body .right .list .item {
|
||||||
width: 460px;
|
width: 460px;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
border: 1px solid #f2f2f2;
|
border: 1px solid #f2f2f2;
|
||||||
@ -196,7 +154,7 @@ body {
|
|||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
position: relative;
|
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-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||||
font-weight: 650;
|
font-weight: 650;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -204,7 +162,7 @@ body {
|
|||||||
color: #000000;
|
color: #000000;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
.main .body .right .list .item .english {
|
.body .right .list .item .english {
|
||||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -212,22 +170,22 @@ body {
|
|||||||
color: #555555;
|
color: #555555;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
.main .body .right .list .item .introduce {
|
.body .right .list .item .introduce {
|
||||||
color: #555555;
|
color: #555555;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
margin-bottom: 12px;
|
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-family: "Arial-Black", "Arial Black", sans-serif;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
}
|
}
|
||||||
.main .body .right .list .item .introduce .line {
|
.body .right .list .item .introduce .line {
|
||||||
color: #d7d7d7;
|
color: #d7d7d7;
|
||||||
margin: 0 10px;
|
margin: 0 10px;
|
||||||
}
|
}
|
||||||
.main .body .right .list .item .word {
|
.body .right .list .item .word {
|
||||||
background-color: #f9f8f8;
|
background-color: #f9f8f8;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
@ -235,7 +193,7 @@ body {
|
|||||||
color: #7f7f7f;
|
color: #7f7f7f;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
.main .body .right .list .item .tag .tag-item {
|
.body .right .list .item .tag .tag-item {
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
@ -247,20 +205,20 @@ body {
|
|||||||
color: #7f7f7f;
|
color: #7f7f7f;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
.main .body .right .list .item .tag .tag-item.gray {
|
.body .right .list .item .tag .tag-item.gray {
|
||||||
background-color: #333333;
|
background-color: #333333;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
.main .body .right .list .item .tag .tag-item.semester {
|
.body .right .list .item .tag .tag-item.semester {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
background-color: #f95d5d;
|
background-color: #f95d5d;
|
||||||
}
|
}
|
||||||
.main .body .right .list .item .operate {
|
.body .right .list .item .operate {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 18px;
|
top: 18px;
|
||||||
right: 24px;
|
right: 24px;
|
||||||
}
|
}
|
||||||
.main .body .right .list .item .operate .circle {
|
.body .right .list .item .operate .circle {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -270,15 +228,15 @@ body {
|
|||||||
border: 1px solid #afb5ca;
|
border: 1px solid #afb5ca;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
}
|
}
|
||||||
.main .body .right .list .item .operate .circle .img-add {
|
.body .right .list .item .operate .circle .img-add {
|
||||||
width: 12px;
|
width: 12px;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
}
|
}
|
||||||
.main .body .right .list .item .operate .circle .img-dot {
|
.body .right .list .item .operate .circle .img-dot {
|
||||||
width: 18px;
|
width: 18px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
}
|
}
|
||||||
.main .body .right .list .item .operate .select {
|
.body .right .list .item .operate .select {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -18px;
|
top: -18px;
|
||||||
right: -24px;
|
right: -24px;
|
||||||
@ -296,16 +254,16 @@ body {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
padding-top: 68px;
|
padding-top: 68px;
|
||||||
}
|
}
|
||||||
.main .body .right .list .item .operate .select.show {
|
.body .right .list .item .operate .select.show {
|
||||||
height: 171px;
|
height: 171px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
.main .body .right .list .item .operate .select .title {
|
.body .right .list .item .operate .select .title {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #7f7f7f;
|
color: #7f7f7f;
|
||||||
margin-bottom: 19px;
|
margin-bottom: 19px;
|
||||||
}
|
}
|
||||||
.main .body .right .list .item .operate .select .title .dot {
|
.body .right .list .item .operate .select .title .dot {
|
||||||
width: 8px;
|
width: 8px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
@ -313,7 +271,7 @@ body {
|
|||||||
background-color: #fddf6d;
|
background-color: #fddf6d;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
.main .body .right .list .item .operate .select .btn {
|
.body .right .list .item .operate .select .btn {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: 144px;
|
width: 144px;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
@ -324,16 +282,16 @@ body {
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
}
|
}
|
||||||
.main .body .right .list .item .operate .select .btn .img {
|
.body .right .list .item .operate .select .btn .img {
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
.main .body .right .list .item .operate .already {
|
.body .right .list .item .operate .already {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #7f7f7f;
|
color: #7f7f7f;
|
||||||
}
|
}
|
||||||
.main .body .right .list .item .operate .already .tick-box {
|
.body .right .list .item .operate .already .tick-box {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
background-color: #f6f6f6;
|
background-color: #f6f6f6;
|
||||||
@ -341,62 +299,7 @@ body {
|
|||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
margin-right: 5px;
|
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;
|
width: 10px;
|
||||||
height: 8px;
|
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;
|
|
||||||
}
|
|
||||||
333
css/subject.less
Normal file
333
css/subject.less
Normal file
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -4,7 +4,8 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Document</title>
|
<title>Document</title>
|
||||||
<link rel="stylesheet" href="./details.css" />
|
<link rel="stylesheet" href="/css/common.css" />
|
||||||
|
<link rel="stylesheet" href="/css/details.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="main">
|
<div class="main">
|
||||||
@ -378,7 +379,33 @@
|
|||||||
<div class="list offer">
|
<div class="list offer">
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<div class="name">Asian Studies</div>
|
<div class="name">Asian Studies</div>
|
||||||
<div class="brief flexacenter">MPhil | 24Fall | offer</div>
|
<div class="brief flexacenter">MPhil <span>|</span> 24Fall <span>|</span> offer</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="name">Asian Studies</div>
|
||||||
|
<div class="brief flexacenter">MPhil <span>|</span> 24Fall <span>|</span> offer</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="name">Asian Studies</div>
|
||||||
|
<div class="brief flexacenter">MPhil <span>|</span> 24Fall <span>|</span> offer</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="case mj">
|
||||||
|
<div class="head flexacenter">
|
||||||
|
<div class="dot"></div>
|
||||||
|
<div class="text flex1">面经</div>
|
||||||
|
<img class="img" src="/img/arrows-icon.png" />
|
||||||
|
</div>
|
||||||
|
<div class="list offer">
|
||||||
|
<div class="item">
|
||||||
|
<div class="name">environmental science</div>
|
||||||
|
<div class="brief-box">
|
||||||
|
<div class="brief flexacenter">
|
||||||
|
<img class="avatar" src="http://127.0.0.1:5500/images/%E9%A1%B9%E7%9B%AE%E8%AF%A6%E6%83%85/u1144.svg" />
|
||||||
|
第二轮申请的，第二轮申请的，第二轮申请的，第二轮申请的，第二轮申请的，第二轮申请的，第二轮申请的，因为第一轮的时候我还没注意到这个项目，错过了DDL...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -4,7 +4,8 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Document</title>
|
<title>Document</title>
|
||||||
<link rel="stylesheet" href="./index.css" />
|
<link rel="stylesheet" href="/css/common.css" />
|
||||||
|
<link rel="stylesheet" href="/css/index.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="main">
|
<div class="main">
|
||||||
@ -4,7 +4,8 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Document</title>
|
<title>Document</title>
|
||||||
<link rel="stylesheet" href="./school.css" />
|
<link rel="stylesheet" href="/css/common.css" />
|
||||||
|
<link rel="stylesheet" href="/css/school.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="main">
|
<div class="main">
|
||||||
@ -4,7 +4,8 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Document</title>
|
<title>Document</title>
|
||||||
<link rel="stylesheet" href="./subject.css" />
|
<link rel="stylesheet" href="/css/common.css" />
|
||||||
|
<link rel="stylesheet" href="/css/subject.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="main">
|
<div class="main">
|
||||||
Loading…
Reference in New Issue
Block a user