diff --git a/css/index.css b/css/index.css index 584e0d1..8b8fdad 100644 --- a/css/index.css +++ b/css/index.css @@ -190,7 +190,7 @@ background-color: #ffffff; border-radius: 12px; margin-bottom: 20px; - padding: 31px 37px 10px; + padding: 31px 30px 30px; } .fate .title { justify-content: space-between; @@ -198,7 +198,7 @@ font-weight: 650; font-size: 18px; color: #000000; - margin-bottom: 6px; + margin-bottom: 18px; } .fate .title .btn { font-weight: 400; @@ -306,6 +306,120 @@ width: 10px; height: 8px; } +.fate .content { + background-color: #fbfbfb; + border: 1px solid #f2f2f2; + height: 258px; + overflow: hidden; + border-radius: 12px; + position: relative; +} +.fate .content .item { + font-size: 14px; +} +.fate .content .item.top { + height: auto; + background-color: #f2f2f2; + border-radius: 12px 12px 0 0; +} +.fate .content .item.top .thead { + flex-direction: column; + justify-content: center; + line-height: normal; + position: relative; +} +.fate .content .item.top .thead .school { + color: #333333; + margin-bottom: 7px; + padding: 0 10px; +} +.fate .content .item.top .thead .school .img { + width: 16px; + height: 18px; + margin-right: 6px; +} +.fate .content .item.top .thead .name { + font-weight: 650; + font-style: normal; + font-size: 15px; + color: #000000; + padding: 0 10px; +} +.fate .content .item.top .thead .vs { + width: 38px; + height: 38px; + position: absolute; + top: 50%; + right: -19px; + z-index: 1; + transform: translateY(-50%); +} +.fate .content .item:not(:last-of-type) { + border-bottom: 1px solid #ebebeb; +} +.fate .content .item .head { + width: 98px; + color: #7f7f7f; + padding-left: 20px; +} +.fate .content .item .thead { + border-left: 1px solid #ebebeb; + text-align: center; + padding: 12px 0; +} +.fate .content .item .thead .mode1 { + font-family: "Arial-Black", "Arial Black", sans-serif; + font-weight: 900; + font-size: 16px; + color: #000000; +} +.fate .content .item .thead .mode2 { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + color: #333333; +} +.fate .content .item .thead .mode3 { + font-family: "Arial-Black", "Arial Black", sans-serif; + font-weight: 900; + font-size: 16px; +} +.fate .content .item .thead .mode3 .unit { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + color: #555555; + margin-left: 5px; + font-size: 13px; +} +.fate .content .btn { + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 53px; + background-color: #7b8cd3; + border-radius: 0 0 12px 12px; + font-size: 14px; + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 15px; + color: #ffffff; + text-align: center; + cursor: pointer; +} +.fate .content .btn::after { + content: ""; + position: absolute; + top: -32px; + left: 0; + width: 100%; + height: 32px; + background: linear-gradient(to bottom, rgba(255, 255, 255, 0.094), #fbfbfb); +} +.fate .content .btn .icon { + width: 16px; + height: 16px; + margin-left: 8px; +} .recruit { width: 100%; border: 1px solid #ebebeb; diff --git a/css/index.less b/css/index.less index d5c81af..b53a2b4 100644 --- a/css/index.less +++ b/css/index.less @@ -223,7 +223,7 @@ background-color: rgba(255, 255, 255, 1); border-radius: 12px; margin-bottom: 20px; - padding: 31px 37px 10px; + padding: 31px 30px 30px; .title { justify-content: space-between; @@ -231,7 +231,7 @@ font-weight: 650; font-size: 18px; color: #000000; - margin-bottom: 6px; + margin-bottom: 18px; .btn { font-weight: 400; @@ -344,6 +344,136 @@ } } } + + .content { + background-color: rgba(251, 251, 251, 1); + border: 1px solid rgba(242, 242, 242, 1); + height: 258px; + overflow: hidden; + border-radius: 12px; + .item { + font-size: 14px; + &.top { + height: auto; + background-color: rgba(242, 242, 242, 1); + border-radius: 12px 12px 0 0; + + .thead { + flex-direction: column; + justify-content: center; + line-height: normal; + position: relative; + .school { + .img { + width: 16px; + height: 18px; + margin-right: 6px; + } + color: #333333; + margin-bottom: 7px; + padding: 0 10px; + } + + .name { + font-weight: 650; + font-style: normal; + font-size: 15px; + color: #000000; + padding: 0 10px; + } + + .vs { + width: 38px; + height: 38px; + position: absolute; + top: 50%; + right: -19px; + z-index: 1; + transform: translateY(-50%); + } + } + } + + &:not(:last-of-type) { + border-bottom: 1px solid #ebebeb; + } + + .head { + width: 98px; + color: #7f7f7f; + padding-left: 20px; + } + + .thead { + border-left: 1px solid #ebebeb; + text-align: center; + padding: 12px 0; + + .mode1 { + font-family: "Arial-Black", "Arial Black", sans-serif; + font-weight: 900; + font-size: 16px; + color: #000000; + } + + .mode2 { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + color: #333333; + } + + .mode3 { + font-family: "Arial-Black", "Arial Black", sans-serif; + font-weight: 900; + font-size: 16px; + .unit { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + color: #555555; + margin-left: 5px; + font-size: 13px; + } + } + } + } + + position: relative; + + .btn { + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 53px; + background-color: rgba(123, 140, 211, 1); + border-radius: 0 0 12px 12px; + font-size: 14px; + + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 15px; + color: #ffffff; + text-align: center; + cursor: pointer; + + + &::after { + content: ""; + position: absolute; + top: -32px; + left: 0; + width: 100%; + height: 32px; + background: linear-gradient(to bottom, rgba(255, 255, 255, 0.094), rgba(251, 251, 251, 1)); // 从左到右的渐变 + } + + .icon { + width: 16px; + height: 16px; + margin-left: 8px; + } + } + } } .recruit { diff --git a/html/index.html b/html/index.html index cd72256..c06ca34 100644 --- a/html/index.html +++ b/html/index.html @@ -21,7 +21,7 @@
-
+
搜索项目
@@ -40,7 +40,7 @@
-
+
@@ -74,7 +74,100 @@ 换一批
-
+ +
+
+
项目
+
+
+ + 香港大学 +
+
理学硕士（电脑科学）
+ +
+
+
+ + 香港大学 +
+
理学硕士（电脑科学）
+
+
+
+
专业排名
+
+
151-200
+
+
+
151-200
+
+
+
+
学费
+
+
+ 141,00 +
HK$
+
+
+
+
+ 141,00 +
HK$
+
+
+
+
+
入学保证金
+
+
+ 141,00 +
HK$
+
+
+
+
+ 141,00 +
HK$
+
+
+
+
+
奖学金
+
+
均有
+
+
+
均有
+
+
+
+
一般学习时长
+
+
1.5年
+
+
+
-
+
+
+
+
授课语言
+
+
英语
+
+
+
英语
+
+
+ + + 项目对比 + + +
+ +
{{ item.name_zh }}
@@ -216,7 +309,7 @@ -
+
diff --git a/img/arrows-circle.svg b/img/arrows-circle.svg new file mode 100644 index 0000000..902f4bd --- /dev/null +++ b/img/arrows-circle.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/img/header-bj.png b/img/header-bj.png index bd921ff..50c061b 100644 Binary files a/img/header-bj.png and b/img/header-bj.png differ