no message
This commit is contained in:
A1300399510
parent
df39bcc9b3
commit
aaf6f19f0c
6
img/add-circle.svg
Normal file
6
img/add-circle.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -1217 -3905 )">
|
||||||
|
<path d="M 12.46875 9.13541666666667 C 12.6006944444444 9.00347222222222 12.6666666666667 8.84722222222222 12.6666666666667 8.66666666666667 L 12.6666666666667 7.33333333333333 C 12.6666666666667 7.15277777777778 12.6006944444444 6.99652777777778 12.46875 6.86458333333333 C 12.3368055555556 6.73263888888889 12.1805555555556 6.66666666666667 12 6.66666666666667 L 9.33333333333333 6.66666666666667 L 9.33333333333333 4 C 9.33333333333333 3.81944444444444 9.26736111111111 3.66319444444444 9.13541666666667 3.53125 C 9.00347222222222 3.39930555555556 8.84722222222222 3.33333333333333 8.66666666666667 3.33333333333333 L 7.33333333333333 3.33333333333333 C 7.15277777777778 3.33333333333333 6.99652777777778 3.39930555555556 6.86458333333333 3.53125 C 6.73263888888889 3.66319444444444 6.66666666666667 3.81944444444444 6.66666666666667 4 L 6.66666666666667 6.66666666666667 L 4 6.66666666666667 C 3.81944444444444 6.66666666666667 3.66319444444444 6.73263888888889 3.53125 6.86458333333333 C 3.39930555555556 6.99652777777778 3.33333333333333 7.15277777777778 3.33333333333333 7.33333333333333 L 3.33333333333333 8.66666666666667 C 3.33333333333333 8.84722222222222 3.39930555555556 9.00347222222222 3.53125 9.13541666666667 C 3.66319444444444 9.26736111111111 3.81944444444444 9.33333333333333 4 9.33333333333333 L 6.66666666666667 9.33333333333333 L 6.66666666666667 12 C 6.66666666666667 12.1805555555556 6.73263888888889 12.3368055555556 6.86458333333333 12.46875 C 6.99652777777778 12.6006944444444 7.15277777777778 12.6666666666667 7.33333333333333 12.6666666666667 L 8.66666666666667 12.6666666666667 C 8.84722222222222 12.6666666666667 9.00347222222222 12.6006944444444 9.13541666666667 12.46875 C 9.26736111111111 12.3368055555556 9.33333333333333 12.1805555555556 9.33333333333333 12 L 9.33333333333333 9.33333333333333 L 12 9.33333333333333 C 12.1805555555556 9.33333333333333 12.3368055555556 9.26736111111111 12.46875 9.13541666666667 Z M 14.9270833333333 3.984375 C 15.6423611111111 5.21006944444444 16 6.54861111111111 16 8 C 16 9.45138888888889 15.6423611111111 10.7899305555556 14.9270833333333 12.015625 C 14.2118055555556 13.2413194444444 13.2413194444444 14.2118055555556 12.015625 14.9270833333333 C 10.7899305555556 15.6423611111111 9.45138888888889 16 8 16 C 6.54861111111111 16 5.21006944444444 15.6423611111111 3.984375 14.9270833333333 C 2.75868055555556 14.2118055555556 1.78819444444444 13.2413194444444 1.07291666666667 12.015625 C 0.357638888888889 10.7899305555556 0 9.45138888888889 0 8 C 0 6.54861111111111 0.357638888888889 5.21006944444444 1.07291666666667 3.984375 C 1.78819444444444 2.75868055555556 2.75868055555556 1.78819444444444 3.984375 1.07291666666667 C 5.21006944444444 0.357638888888888 6.54861111111111 0 8 0 C 9.45138888888889 0 10.7899305555556 0.357638888888888 12.015625 1.07291666666667 C 13.2413194444444 1.78819444444444 14.2118055555556 2.75868055555556 14.9270833333333 3.984375 Z " fill-rule="nonzero" fill="#333333" stroke="none" transform="matrix(1 0 0 1 1217 3905 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
6
img/add-thick.svg
Normal file
6
img/add-thick.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="12px" height="12px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -8 -8 )">
|
||||||
|
<path d="M 11.7613636363636 4.60227272727273 C 11.9204545454545 4.76136363636363 12 4.95454545454545 12 5.18181818181818 L 12 6.81818181818182 C 12 7.04545454545455 11.9204545454545 7.23863636363636 11.7613636363636 7.39772727272727 C 11.6022727272727 7.55681818181818 11.4090909090909 7.63636363636364 11.1818181818182 7.63636363636364 L 7.63636363636364 7.63636363636364 L 7.63636363636364 11.1818181818182 C 7.63636363636364 11.4090909090909 7.55681818181818 11.6022727272727 7.39772727272727 11.7613636363636 C 7.23863636363637 11.9204545454545 7.04545454545455 12 6.81818181818182 12 L 5.18181818181818 12 C 4.95454545454546 12 4.76136363636364 11.9204545454545 4.60227272727273 11.7613636363636 C 4.44318181818182 11.6022727272727 4.36363636363636 11.4090909090909 4.36363636363636 11.1818181818182 L 4.36363636363636 7.63636363636364 L 0.818181818181818 7.63636363636364 C 0.590909090909091 7.63636363636364 0.397727272727273 7.55681818181818 0.238636363636364 7.39772727272727 C 0.0795454545454545 7.23863636363636 0 7.04545454545455 0 6.81818181818182 L 0 5.18181818181818 C 0 4.95454545454545 0.0795454545454545 4.76136363636363 0.238636363636364 4.60227272727273 C 0.397727272727273 4.44318181818182 0.590909090909091 4.36363636363636 0.818181818181818 4.36363636363636 L 4.36363636363636 4.36363636363636 L 4.36363636363636 0.818181818181819 C 4.36363636363636 0.59090909090909 4.44318181818182 0.397727272727272 4.60227272727273 0.238636363636364 C 4.76136363636364 0.0795454545454541 4.95454545454546 0 5.18181818181818 0 L 6.81818181818182 0 C 7.04545454545455 0 7.23863636363637 0.0795454545454541 7.39772727272727 0.238636363636364 C 7.55681818181818 0.397727272727272 7.63636363636364 0.59090909090909 7.63636363636364 0.818181818181819 L 7.63636363636364 4.36363636363636 L 11.1818181818182 4.36363636363636 C 11.4090909090909 4.36363636363636 11.6022727272727 4.44318181818182 11.7613636363636 4.60227272727273 Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 8 8 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
6
img/arrows-circle-black.svg
Normal file
6
img/arrows-circle-black.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -1487 -2346 )">
|
||||||
|
<path d="M 7 13.3958333333333 C 7.18055555555556 13.3958333333333 7.33680555555556 13.3298611111111 7.46875 13.1979166666667 L 12.1979166666667 8.46875 C 12.3298611111111 8.33680555555555 12.3958333333333 8.18055555555555 12.3958333333333 8 C 12.3958333333333 7.81944444444444 12.3298611111111 7.66319444444444 12.1979166666667 7.53125 L 7.46875 2.80208333333333 C 7.33680555555556 2.67013888888889 7.18055555555556 2.60416666666667 7 2.60416666666667 C 6.81944444444445 2.60416666666667 6.66319444444445 2.67013888888889 6.53125 2.80208333333333 L 5.46875 3.86458333333333 C 5.33680555555556 3.99652777777778 5.27083333333333 4.15277777777778 5.27083333333333 4.33333333333333 C 5.27083333333333 4.51388888888889 5.33680555555556 4.67013888888889 5.46875 4.80208333333333 L 8.66666666666667 8 L 5.46875 11.1979166666667 C 5.33680555555556 11.3298611111111 5.27083333333333 11.4861111111111 5.27083333333333 11.6666666666667 C 5.27083333333333 11.8472222222222 5.33680555555556 12.0034722222222 5.46875 12.1354166666667 L 6.53125 13.1979166666667 C 6.66319444444445 13.3298611111111 6.81944444444445 13.3958333333333 7 13.3958333333333 Z M 14.9270833333333 3.984375 C 15.6423611111111 5.21006944444444 16 6.54861111111111 16 8 C 16 9.45138888888889 15.6423611111111 10.7899305555556 14.9270833333333 12.015625 C 14.2118055555556 13.2413194444444 13.2413194444444 14.2118055555556 12.015625 14.9270833333333 C 10.7899305555556 15.6423611111111 9.45138888888889 16 8 16 C 6.54861111111111 16 5.21006944444444 15.6423611111111 3.984375 14.9270833333333 C 2.75868055555556 14.2118055555556 1.78819444444444 13.2413194444444 1.07291666666667 12.015625 C 0.357638888888889 10.7899305555556 0 9.45138888888889 0 8 C 0 6.54861111111111 0.357638888888889 5.21006944444444 1.07291666666667 3.984375 C 1.78819444444444 2.75868055555556 2.75868055555556 1.78819444444444 3.984375 1.07291666666667 C 5.21006944444444 0.357638888888888 6.54861111111111 0 8 0 C 9.45138888888889 0 10.7899305555556 0.357638888888888 12.015625 1.07291666666667 C 13.2413194444444 1.78819444444444 14.2118055555556 2.75868055555556 14.9270833333333 3.984375 Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 1487 2346 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
BIN
img/arrows-gray-icon.png
Normal file
BIN
img/arrows-gray-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
6
img/arrows.svg
Normal file
6
img/arrows.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="6px" height="10px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -423 -189 )">
|
||||||
|
<path d="M 5.89690721649484 4.76953907815631 C 5.96563573883162 4.83633934535738 6 4.91315965263861 6 5 C 6 5.08684034736139 5.96563573883162 5.16366065464262 5.89690721649484 5.23046092184369 L 1.09278350515464 9.8997995991984 C 1.02405498281787 9.96659986639947 0.945017182130584 10 0.855670103092783 10 C 0.766323024054983 10 0.687285223367698 9.96659986639947 0.618556701030928 9.8997995991984 L 0.103092783505155 9.39879759519038 C 0.0343642611683849 9.33199732798931 0 9.25517702070808 0 9.16833667334669 C 0 9.0814963259853 0.0343642611683849 9.00467601870407 0.103092783505155 8.93787575150301 L 4.15463917525773 5 L 0.103092783505155 1.06212424849699 C 0.0343642611683849 0.995323981295925 0 0.918503674014696 0 0.831663326653307 C 0 0.744822979291916 0.0343642611683849 0.668002672010687 0.103092783505155 0.601202404809619 L 0.618556701030928 0.100200400801603 C 0.687285223367698 0.0334001336005341 0.766323024054983 0 0.855670103092783 0 C 0.945017182130584 0 1.02405498281787 0.0334001336005341 1.09278350515464 0.100200400801603 L 5.89690721649484 4.76953907815631 Z " fill-rule="nonzero" fill="#7f7f7f" stroke="none" transform="matrix(1 0 0 1 423 189 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
BIN
img/dot-dot-dot.png
Normal file
BIN
img/dot-dot-dot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 486 B |
BIN
img/hot-icon.png
Normal file
BIN
img/hot-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
BIN
img/logo-bj.png
Normal file
BIN
img/logo-bj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
6
img/search-black-icon.svg
Normal file
6
img/search-black-icon.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -415 -20 )">
|
||||||
|
<path d="M 12.265625 12.265625 C 13.3193108974359 11.2119391025641 13.8461538461538 9.94391025641026 13.8461538461538 8.46153846153846 C 13.8461538461538 6.97916666666667 13.3193108974359 5.71113782051282 12.265625 4.65745192307692 C 11.2119391025641 3.60376602564102 9.94391025641026 3.07692307692308 8.46153846153846 3.07692307692308 C 6.97916666666667 3.07692307692308 5.71113782051282 3.60376602564102 4.65745192307692 4.65745192307692 C 3.60376602564103 5.71113782051282 3.07692307692308 6.97916666666667 3.07692307692308 8.46153846153846 C 3.07692307692308 9.94391025641026 3.60376602564103 11.2119391025641 4.65745192307692 12.265625 C 5.71113782051282 13.3193108974359 6.97916666666667 13.8461538461538 8.46153846153846 13.8461538461538 C 9.94391025641026 13.8461538461538 11.2119391025641 13.3193108974359 12.265625 12.265625 Z M 19.5552884615385 17.3798076923077 C 19.8517628205128 17.6762820512821 20 18.036858974359 20 18.4615384615385 C 20 18.8782051282051 19.8477564102564 19.2387820512821 19.5432692307692 19.5432692307692 C 19.2387820512821 19.8477564102564 18.8782051282051 20 18.4615384615385 20 C 18.0288461538462 20 17.6682692307692 19.8477564102564 17.3798076923077 19.5432692307692 L 13.2572115384615 15.4326923076923 C 11.8229166666667 16.4262820512821 10.224358974359 16.9230769230769 8.46153846153846 16.9230769230769 C 7.31570512820513 16.9230769230769 6.21995192307692 16.7007211538462 5.17427884615385 16.2560096153846 C 4.12860576923077 15.8112980769231 3.22716346153846 15.2103365384615 2.46995192307692 14.453125 C 1.71274038461538 13.6959134615385 1.11177884615385 12.7944711538462 0.667067307692308 11.7487980769231 C 0.222355769230769 10.703125 0 9.60737179487179 0 8.46153846153846 C 0 7.31570512820513 0.222355769230769 6.21995192307692 0.667067307692308 5.17427884615385 C 1.11177884615385 4.12860576923077 1.71274038461538 3.22716346153846 2.46995192307692 2.46995192307692 C 3.22716346153846 1.71274038461539 4.12860576923077 1.11177884615385 5.17427884615385 0.667067307692308 C 6.21995192307692 0.222355769230769 7.31570512820513 0 8.46153846153846 0 C 9.6073717948718 0 10.703125 0.222355769230769 11.7487980769231 0.667067307692308 C 12.7944711538462 1.11177884615385 13.6959134615385 1.71274038461539 14.453125 2.46995192307692 C 15.2103365384615 3.22716346153846 15.8112980769231 4.12860576923077 16.2560096153846 5.17427884615385 C 16.7007211538462 6.21995192307692 16.9230769230769 7.31570512820513 16.9230769230769 8.46153846153846 C 16.9230769230769 10.224358974359 16.4262820512821 11.8229166666667 15.4326923076923 13.2572115384615 L 19.5552884615385 17.3798076923077 Z " fill-rule="nonzero" fill="#333333" stroke="none" transform="matrix(1 0 0 1 415 20 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
BIN
img/side-all-pitch.png
Normal file
BIN
img/side-all-pitch.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
img/side-all.png
Normal file
BIN
img/side-all.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
img/side-school-pitch.png
Normal file
BIN
img/side-school-pitch.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
img/side-school.png
Normal file
BIN
img/side-school.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 869 B |
BIN
img/side-subject-pitch.png
Normal file
BIN
img/side-subject-pitch.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
BIN
img/side-subject.png
Normal file
BIN
img/side-subject.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
img/sort-icon.png
Normal file
BIN
img/sort-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
img/subject.png
Normal file
BIN
img/subject.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
6
img/tick-icon.svg
Normal file
6
img/tick-icon.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="10px" height="8px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -1084 -1686 )">
|
||||||
|
<path d="M 9.81935483870968 1.1043771043771 C 9.93978494623656 1.2300785634119 10 1.38271604938272 10 1.56228956228956 C 10 1.74186307519641 9.93978494623656 1.89450056116723 9.81935483870968 2.02020202020202 L 5.14838709677419 6.8956228956229 L 4.27096774193548 7.81144781144781 C 4.1505376344086 7.9371492704826 4.00430107526882 8 3.83225806451613 8 C 3.66021505376344 8 3.51397849462366 7.9371492704826 3.39354838709677 7.81144781144781 L 2.51612903225806 6.8956228956229 L 0.180645161290323 4.45791245791246 C 0.0602150537634409 4.33221099887766 0 4.17957351290685 0 4 C 0 3.82042648709315 0.0602150537634409 3.66778900112233 0.180645161290323 3.54208754208754 L 1.05806451612903 2.62626262626263 C 1.17849462365591 2.50056116722783 1.3247311827957 2.43771043771044 1.49677419354839 2.43771043771044 C 1.66881720430108 2.43771043771044 1.81505376344086 2.50056116722783 1.93548387096774 2.62626262626263 L 3.83225806451613 4.61279461279461 L 8.06451612903226 0.188552188552189 C 8.18494623655914 0.0628507295173959 8.33118279569893 0 8.50322580645161 0 C 8.6752688172043 0 8.82150537634409 0.0628507295173959 8.94193548387097 0.188552188552189 L 9.81935483870968 1.1043771043771 Z " fill-rule="nonzero" fill="#aaaaaa" stroke="none" transform="matrix(1 0 0 1 1084 1686 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
274
index/index.css
274
index/index.css
@ -299,6 +299,7 @@ body {
|
|||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
padding: 25px 24px;
|
padding: 25px 24px;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
.main .recruit .list .item .avatar {
|
.main .recruit .list .item .avatar {
|
||||||
width: 32px;
|
width: 32px;
|
||||||
@ -343,6 +344,97 @@ body {
|
|||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
}
|
}
|
||||||
|
.main .recruit .list .item .operate {
|
||||||
|
position: relative;
|
||||||
|
position: absolute;
|
||||||
|
top: 24px;
|
||||||
|
right: 24px;
|
||||||
|
}
|
||||||
|
.main .recruit .list .item .operate .circle {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
background-color: #dbe3fd;
|
||||||
|
border: 1px solid #afb5ca;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
.main .recruit .list .item .operate .circle .img-add {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
.main .recruit .list .item .operate .circle .img-dot {
|
||||||
|
width: 18px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
.main .recruit .list .item .operate .select {
|
||||||
|
position: absolute;
|
||||||
|
right: -24px;
|
||||||
|
top: -24px;
|
||||||
|
background-color: #fbfbfb;
|
||||||
|
border-radius: 8px;
|
||||||
|
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.18039216);
|
||||||
|
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.18039216);
|
||||||
|
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.18039216);
|
||||||
|
transition: all 0.3s;
|
||||||
|
overflow: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
height: 0;
|
||||||
|
width: 300px;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.main .recruit .list .item .operate .select.show {
|
||||||
|
height: 180px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.main .recruit .list .item .operate .select .title {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #7f7f7f;
|
||||||
|
margin-top: 75px;
|
||||||
|
margin-bottom: 19px;
|
||||||
|
}
|
||||||
|
.main .recruit .list .item .operate .select .title .dot {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid #cab157;
|
||||||
|
background-color: #fddf6d;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.main .recruit .list .item .operate .select .btn {
|
||||||
|
cursor: pointer;
|
||||||
|
width: 144px;
|
||||||
|
height: 36px;
|
||||||
|
background: -webkit-linear-gradient(194.03624347deg, #dbe3fd 0%, #eef7f5 100%);
|
||||||
|
background: -moz-linear-gradient(255.96375653deg, #dbe3fd 0%, #eef7f5 100%);
|
||||||
|
background: linear-gradient(255.96375653deg, #dbe3fd 0%, #eef7f5 100%);
|
||||||
|
border-radius: 158px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.main .recruit .list .item .operate .select .btn .img {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
.main .recruit .list .item .operate .already {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #7f7f7f;
|
||||||
|
}
|
||||||
|
.main .recruit .list .item .operate .already .tick-box {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background-color: #f6f6f6;
|
||||||
|
border: 1px solid #d7d7d7;
|
||||||
|
border-radius: 20px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.main .recruit .list .item .operate .already .tick-box .img-tick {
|
||||||
|
width: 10px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
.main .recruit .indicate {
|
.main .recruit .indicate {
|
||||||
line-height: 12px;
|
line-height: 12px;
|
||||||
}
|
}
|
||||||
@ -362,14 +454,15 @@ body {
|
|||||||
}
|
}
|
||||||
.main .data .item {
|
.main .data .item {
|
||||||
width: 285px;
|
width: 285px;
|
||||||
height: 332px;
|
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
border: 1px solid #ebebeb;
|
border: 1px solid #ebebeb;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
|
padding: 21px 15px 0;
|
||||||
}
|
}
|
||||||
.main .data .item .school {
|
.main .data .item .school {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
.main .data .item .school .img {
|
.main .data .item .school .img {
|
||||||
height: 20px;
|
height: 20px;
|
||||||
@ -381,6 +474,7 @@ body {
|
|||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
.main .data .item .name-en {
|
.main .data .item .name-en {
|
||||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
@ -388,10 +482,12 @@ body {
|
|||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #555555;
|
color: #555555;
|
||||||
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
.main .data .item .introduce {
|
.main .data .item .introduce {
|
||||||
color: #555555;
|
color: #555555;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
.main .data .item .introduce .quantity {
|
.main .data .item .introduce .quantity {
|
||||||
font-family: "Arial-Black", "Arial Black", sans-serif;
|
font-family: "Arial-Black", "Arial Black", sans-serif;
|
||||||
@ -403,3 +499,179 @@ body {
|
|||||||
color: #d7d7d7;
|
color: #d7d7d7;
|
||||||
margin: 0 10px;
|
margin: 0 10px;
|
||||||
}
|
}
|
||||||
|
.main .data .item .word {
|
||||||
|
background-color: #f9f8f8;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 10px 15px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #7f7f7f;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.main .data .item .tag .tag-item {
|
||||||
|
width: fit-content;
|
||||||
|
height: 24px;
|
||||||
|
line-height: 24px;
|
||||||
|
background-color: #f9f8f8;
|
||||||
|
border: 1px solid #aaaaaa;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 0 9px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #7f7f7f;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.main .data .item .tag .tag-item.gray {
|
||||||
|
background-color: #333333;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.main .data .item .tag .tag-item.semester {
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: #f95d5d;
|
||||||
|
}
|
||||||
|
.main .data .item .operate {
|
||||||
|
height: 80px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.main .data .item .operate .circle {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
background-color: #dbe3fd;
|
||||||
|
border: 1px solid #afb5ca;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
.main .data .item .operate .circle .img-add {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
.main .data .item .operate .circle .img-dot {
|
||||||
|
width: 18px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
.main .data .item .operate .select {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 285px;
|
||||||
|
background-color: #fbfbfb;
|
||||||
|
border-radius: 8px;
|
||||||
|
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.18039216);
|
||||||
|
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.18039216);
|
||||||
|
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.18039216);
|
||||||
|
flex-direction: column;
|
||||||
|
transition: all 0.3s;
|
||||||
|
overflow: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
.main .data .item .operate .select.show {
|
||||||
|
height: 211px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.main .data .item .operate .select .top {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.main .data .item .operate .select .top .title {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #7f7f7f;
|
||||||
|
margin-bottom: 19px;
|
||||||
|
}
|
||||||
|
.main .data .item .operate .select .top .title .dot {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid #cab157;
|
||||||
|
background-color: #fddf6d;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.main .data .item .operate .select .top .btn {
|
||||||
|
cursor: pointer;
|
||||||
|
width: 144px;
|
||||||
|
height: 36px;
|
||||||
|
background: -webkit-linear-gradient(194.03624347deg, #dbe3fd 0%, #eef7f5 100%);
|
||||||
|
background: -moz-linear-gradient(255.96375653deg, #dbe3fd 0%, #eef7f5 100%);
|
||||||
|
background: linear-gradient(255.96375653deg, #dbe3fd 0%, #eef7f5 100%);
|
||||||
|
border-radius: 158px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.main .data .item .operate .select .top .btn .img {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
.main .data .item .operate .select .bottom {
|
||||||
|
border-top: 1px dotted #ebebeb;
|
||||||
|
height: 80px;
|
||||||
|
}
|
||||||
|
.main .data .item .operate .already {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #7f7f7f;
|
||||||
|
}
|
||||||
|
.main .data .item .operate .already .tick-box {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background-color: #f6f6f6;
|
||||||
|
border: 1px solid #d7d7d7;
|
||||||
|
border-radius: 20px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.main .data .item .operate .already .tick-box .img-tick {
|
||||||
|
width: 10px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
.main .base {
|
||||||
|
width: 640px;
|
||||||
|
height: 60px;
|
||||||
|
background-color: #7b8cd3;
|
||||||
|
border-radius: 153px;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 15px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
.main .base .left {
|
||||||
|
width: 450px;
|
||||||
|
height: 50px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 153px 15px 15px 153px;
|
||||||
|
margin-right: 5px;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
.main .base .left .text {
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 16px;
|
||||||
|
color: rgba(170, 170, 170, 0.90196078);
|
||||||
|
}
|
||||||
|
.main .base .left .img {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
.main .base .rigth {
|
||||||
|
width: 175px;
|
||||||
|
height: 50px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 15px 153px 153px 15px;
|
||||||
|
padding-left: 19px;
|
||||||
|
}
|
||||||
|
.main .base .rigth .img {
|
||||||
|
width: 25px;
|
||||||
|
height: 22px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.main .base .rigth .text {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #333333;
|
||||||
|
margin-right: 9px;
|
||||||
|
}
|
||||||
|
.main .base .rigth .number {
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
border-radius: 150px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #f95d5d;
|
||||||
|
padding: 0 8px;
|
||||||
|
}
|
||||||
|
|||||||
122
index/index.html
122
index/index.html
@ -103,7 +103,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 招生官 -->
|
<!-- 招生官 -->
|
||||||
<div style="display: none;" class="recruit">
|
<div style="display: block;" class="recruit">
|
||||||
<div class="title flexacenter">
|
<div class="title flexacenter">
|
||||||
<img class="img" src="/img/admission-icon.png" />
|
<img class="img" src="/img/admission-icon.png" />
|
||||||
<div class="btn flexacenter">
|
<div class="btn flexacenter">
|
||||||
@ -114,45 +114,28 @@
|
|||||||
<div class="list flexflex">
|
<div class="list flexflex">
|
||||||
<div class="list-item">
|
<div class="list-item">
|
||||||
<div class="item flexflex">
|
<div class="item flexflex">
|
||||||
<img class="avatar" src="https://oss.x-php.com/school/J6BSwE-VfCFkCb1SBaR7ec6NYmTA4pRcOalNHJQuwf83NTE2" />
|
<div class="operate flexcenter">
|
||||||
<div class="info">
|
<div style="display: none;" class="circle flexcenter">
|
||||||
<div class="school">香港大学</div>
|
<img class="img-add" src="/img/add-thick.svg" />
|
||||||
<div class="name">城市设计硕士</div>
|
</div>
|
||||||
<div class="name-en">Master of Urban Design</div>
|
<div style="display: none;" class="circle flexcenter">
|
||||||
<div class="aq flexacenter">
|
<img class="img-dot" src="/img/dot-dot-dot.png" />
|
||||||
<div class="text">招生官答疑时间</div>
|
</div>
|
||||||
<div class="value flex1">长期答疑</div>
|
<div style="display: none;" class="select flexflex show">
|
||||||
<img class="icon" src="/img/arrows-long-icon.png" />
|
<div class="title flexacenter">
|
||||||
|
<div class="dot"></div>
|
||||||
|
该项目已加入对比单，未加入项目管理
|
||||||
|
</div>
|
||||||
|
<div class="btn flexcenter"><img class="img" src="/img/add-circle.svg" />加入项目管理</div>
|
||||||
|
<!-- <div class="bottom"></div> -->
|
||||||
|
</div>
|
||||||
|
<div style="display: none;" class="already flexacenter">
|
||||||
|
<div class="tick-box flexcenter">
|
||||||
|
<img class="img-tick" src="/img/tick-icon.svg" />
|
||||||
|
</div>
|
||||||
|
已加入
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="item flexflex">
|
|
||||||
<img class="avatar" src="https://oss.x-php.com/school/J6BSwE-VfCFkCb1SBaR7ec6NYmTA4pRcOalNHJQuwf83NTE2" />
|
|
||||||
<div class="info">
|
|
||||||
<div class="school">香港大学</div>
|
|
||||||
<div class="name">城市设计硕士</div>
|
|
||||||
<div class="name-en">Master of Urban Design</div>
|
|
||||||
<div class="aq flexacenter">
|
|
||||||
<div class="text">招生官答疑时间</div>
|
|
||||||
<div class="value flex1">长期答疑</div>
|
|
||||||
<img class="icon" src="/img/arrows-long-icon.png" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item flexflex">
|
|
||||||
<img class="avatar" src="https://oss.x-php.com/school/J6BSwE-VfCFkCb1SBaR7ec6NYmTA4pRcOalNHJQuwf83NTE2" />
|
|
||||||
<div class="info">
|
|
||||||
<div class="school">香港大学</div>
|
|
||||||
<div class="name">城市设计硕士</div>
|
|
||||||
<div class="name-en">Master of Urban Design</div>
|
|
||||||
<div class="aq flexacenter">
|
|
||||||
<div class="text">招生官答疑时间</div>
|
|
||||||
<div class="value flex1">长期答疑</div>
|
|
||||||
<img class="icon" src="/img/arrows-long-icon.png" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item flexflex">
|
|
||||||
<img class="avatar" src="https://oss.x-php.com/school/J6BSwE-VfCFkCb1SBaR7ec6NYmTA4pRcOalNHJQuwf83NTE2" />
|
<img class="avatar" src="https://oss.x-php.com/school/J6BSwE-VfCFkCb1SBaR7ec6NYmTA4pRcOalNHJQuwf83NTE2" />
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<div class="school">香港大学</div>
|
<div class="school">香港大学</div>
|
||||||
@ -231,19 +214,64 @@
|
|||||||
|
|
||||||
<!-- 列表 -->
|
<!-- 列表 -->
|
||||||
<div class="data">
|
<div class="data">
|
||||||
<img class="fall" src="/img/25fall.svg" />
|
<!-- <img class="fall" src="/img/25fall.svg" /> -->
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<div class="school flexacenter">
|
<div class="school flexacenter"><img class="img" src="https://oss.x-php.com/school/J6BSwE-VfCFkCb1SBaR7ec6NYmTA4pRcOalNHJQuwf83NTE2" />香港中文大学</div>
|
||||||
<img class="img" src="https://oss.x-php.com/school/J6BSwE-VfCFkCb1SBaR7ec6NYmTA4pRcOalNHJQuwf83NTE2" />香港中文大学
|
|
||||||
</div>
|
|
||||||
<div class="name">金融数学研究型硕士</div>
|
<div class="name">金融数学研究型硕士</div>
|
||||||
<div class="name-en">Mphil in Financial Mathematics</div>
|
<div class="name-en">Mphil in Financial Mathematics</div>
|
||||||
<view class="introduce flexacenter">
|
<div class="introduce flexacenter">
|
||||||
<view class="flexacenter">专业排名 <vie class="quantity">52</vie> </view>
|
<div class="flexacenter">
|
||||||
<view class="flexacenter"> <view class="line">|</view> 学费HK$ <vie class="quantity">281,000</vie> </view>
|
专业排名
|
||||||
</view>
|
<div class="quantity">52</div>
|
||||||
|
</div>
|
||||||
|
<div class="flexacenter">
|
||||||
|
<div class="line">|</div>
|
||||||
|
学费HK$
|
||||||
|
<div class="quantity">281,000</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="word">一句话描述独特之处，一句话描述独特之处。</div>
|
||||||
|
<div class="tag flexflex">
|
||||||
|
<!-- <div class="tag-item admissions">招生官项目</div> -->
|
||||||
|
<div class="tag-item">无需面试</div>
|
||||||
|
</div>
|
||||||
|
<div class="operate flexcenter">
|
||||||
|
<div style="display: none;" class="circle flexcenter">
|
||||||
|
<img class="img-add" src="/img/add-thick.svg" />
|
||||||
|
</div>
|
||||||
|
<div class="circle flexcenter">
|
||||||
|
<img class="img-dot" src="/img/dot-dot-dot.png" />
|
||||||
|
</div>
|
||||||
|
<div class="select flexflex">
|
||||||
|
<div class="top flex1 flexcenter">
|
||||||
|
<div class="title flexacenter">
|
||||||
|
<div class="dot"></div>
|
||||||
|
该项目已加入对比单，未加入项目管理
|
||||||
|
</div>
|
||||||
|
<div class="btn flexcenter"><img class="img" src="/img/add-circle.svg" />加入项目管理</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom"></div>
|
||||||
|
</div>
|
||||||
|
<div style="display: none;" class="already flexacenter">
|
||||||
|
<div class="tick-box flexcenter">
|
||||||
|
<img class="img-tick" src="/img/tick-icon.svg" />
|
||||||
|
</div>
|
||||||
|
已加入
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="word"></div>
|
<!-- 底部 -->
|
||||||
|
<div class="base flexcenter">
|
||||||
|
<div class="left flexacenter">
|
||||||
|
<div class="text flex1">搜索项目</div>
|
||||||
|
<img class="img" src="/img/search-black-icon.svg" />
|
||||||
|
</div>
|
||||||
|
<div class="rigth flexacenter">
|
||||||
|
<img class="img" src="/img/contrast-icon.png" />
|
||||||
|
<div class="text">项目对比</div>
|
||||||
|
<div class="number">16</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
302
index/index.less
302
index/index.less
@ -340,6 +340,7 @@ body {
|
|||||||
// padding-top: 25px;
|
// padding-top: 25px;
|
||||||
padding: 25px 24px;
|
padding: 25px 24px;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
|
position: relative;
|
||||||
.avatar {
|
.avatar {
|
||||||
width: 32px;
|
width: 32px;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
@ -386,6 +387,109 @@ body {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -410,12 +514,13 @@ body {
|
|||||||
width: 285px;
|
width: 285px;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
width: 285px;
|
width: 285px;
|
||||||
height: 332px;
|
|
||||||
background-color: rgba(255, 255, 255, 1);
|
background-color: rgba(255, 255, 255, 1);
|
||||||
border: 1px solid rgba(235, 235, 235, 1);
|
border: 1px solid rgba(235, 235, 235, 1);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
|
padding: 21px 15px 0;
|
||||||
|
|
||||||
.school {
|
.school {
|
||||||
.img {
|
.img {
|
||||||
@ -424,6 +529,7 @@ body {
|
|||||||
}
|
}
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
@ -432,6 +538,7 @@ body {
|
|||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.name-en {
|
.name-en {
|
||||||
@ -440,10 +547,12 @@ body {
|
|||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #555555;
|
color: #555555;
|
||||||
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
.introduce {
|
.introduce {
|
||||||
color: #555555;
|
color: #555555;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
margin-bottom: 12px;
|
||||||
.quantity {
|
.quantity {
|
||||||
font-family: "Arial-Black", "Arial Black", sans-serif;
|
font-family: "Arial-Black", "Arial Black", sans-serif;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
@ -455,6 +564,197 @@ body {
|
|||||||
margin: 0 10px;
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
699
school/school.css
Normal file
699
school/school.css
Normal file
@ -0,0 +1,699 @@
|
|||||||
|
* {
|
||||||
|
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;
|
||||||
|
height: 396px;
|
||||||
|
background-color: #fbfbfb;
|
||||||
|
border-radius: 12px;
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.main .box::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: -5px;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 66px;
|
||||||
|
background: -webkit-linear-gradient(0deg, #7b8cd3 0%, #dae3fd 99%);
|
||||||
|
background: -moz-linear-gradient(90deg, #7b8cd3 0%, #dae3fd 99%);
|
||||||
|
background: linear-gradient(90deg, #7b8cd3 0%, #dae3fd 99%);
|
||||||
|
border-radius: 18px;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
.main .box .tab {
|
||||||
|
height: 60px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #7f7f7f;
|
||||||
|
border-bottom: 1px dotted #ebebeb;
|
||||||
|
padding-left: 24px;
|
||||||
|
}
|
||||||
|
.main .box .tab .img {
|
||||||
|
width: 6px;
|
||||||
|
height: 10px;
|
||||||
|
margin: 0 15px;
|
||||||
|
}
|
||||||
|
.main .box .tab .current {
|
||||||
|
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 650;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
.main .box .details {
|
||||||
|
padding: 31px 60px;
|
||||||
|
}
|
||||||
|
.main .box .details .logo {
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
padding-right: 10px;
|
||||||
|
padding-bottom: 7px;
|
||||||
|
margin-right: 39px;
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
.main .box .details .logo .bj {
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
.main .box .details .logo .img {
|
||||||
|
width: 65px;
|
||||||
|
}
|
||||||
|
.main .box .details .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;
|
||||||
|
}
|
||||||
|
.main .box .details .right .name-en {
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #555555;
|
||||||
|
margin-bottom: 22px;
|
||||||
|
}
|
||||||
|
.main .box .details .right .world {
|
||||||
|
width: 423px;
|
||||||
|
padding-bottom: 15px;
|
||||||
|
margin-bottom: 27px;
|
||||||
|
border-bottom: 1px solid #ebebeb;
|
||||||
|
}
|
||||||
|
.main .box .details .right .world .head {
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 9px;
|
||||||
|
}
|
||||||
|
.main .box .details .right .world .head::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
background-color: #ebebeb;
|
||||||
|
}
|
||||||
|
.main .box .details .right .world .head .icon {
|
||||||
|
width: 90px;
|
||||||
|
background-color: #fbfbfb;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.main .box .details .right .world .head .icon .img {
|
||||||
|
width: 64px;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
.main .box .details .right .world .list .item {
|
||||||
|
text-align: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.main .box .details .right .world .list .item .quantity {
|
||||||
|
font-family: "Arial-Black", "Arial Black", sans-serif;
|
||||||
|
font-weight: 900;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #000000;
|
||||||
|
margin-bottom: 9px;
|
||||||
|
}
|
||||||
|
.main .box .details .right .world .list .item .ranking-name {
|
||||||
|
font-family: "HelveticaNeue", "Helvetica Neue", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #555555;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.main .box .details .right .world .list .item .ranking-name .ranking-icon {
|
||||||
|
position: absolute;
|
||||||
|
right: -10px;
|
||||||
|
bottom: 0;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
transform: rotate(270deg);
|
||||||
|
}
|
||||||
|
.main .box .details .right .brief {
|
||||||
|
height: 40px;
|
||||||
|
background-color: #f6f6f6;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #7f7f7f;
|
||||||
|
line-height: 28px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 6px;
|
||||||
|
}
|
||||||
|
.main .box .details .right .brief .text {
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
.main .box .details .right .brief .img {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.main .hot {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 24px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.main .hot .header {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
.main .hot .header .icon {
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background-color: #fbe3ea;
|
||||||
|
margin-right: 13px;
|
||||||
|
}
|
||||||
|
.main .hot .header .icon .img {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
.main .hot .list {
|
||||||
|
width: 1152px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.main .hot .list .list-item {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
.main .hot .list .list-item .item {
|
||||||
|
padding: 22px 0;
|
||||||
|
width: 510px;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
.main .hot .list .list-item .item:not(:nth-last-child(-n + 2)) {
|
||||||
|
border-bottom: 1px dotted #ebebeb;
|
||||||
|
}
|
||||||
|
.main .hot .list .list-item .item .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;
|
||||||
|
}
|
||||||
|
.main .hot .list .list-item .item .left .name::after {
|
||||||
|
content: "";
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
border: 1px solid #d7d7d7;
|
||||||
|
border-radius: 39px;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: -20px;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.main .hot .list .list-item .item .left .text {
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #7f7f7f;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.main .hot .list .list-item .item .left .text .ranking {
|
||||||
|
color: #555555;
|
||||||
|
}
|
||||||
|
.main .hot .list .list-item .item .left .text .vertical {
|
||||||
|
color: #d7d7d7;
|
||||||
|
margin: 0 8px;
|
||||||
|
}
|
||||||
|
.main .hot .list .list-item .item .left .text .number {
|
||||||
|
font-family: "Arial-Black", "Arial Black", sans-serif;
|
||||||
|
font-weight: 900;
|
||||||
|
color: #000000;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
.main .hot .list .list-item .item .operate {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.main .hot .list .list-item .item .operate .circle {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
background-color: #dbe3fd;
|
||||||
|
border: 1px solid #afb5ca;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
.main .hot .list .list-item .item .operate .circle .img-add {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
.main .hot .list .list-item .item .operate .circle .img-dot {
|
||||||
|
width: 18px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
.main .hot .list .list-item .item .operate .select {
|
||||||
|
position: absolute;
|
||||||
|
right: 40px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
background-color: #fbfbfb;
|
||||||
|
border-radius: 8px;
|
||||||
|
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.18039216);
|
||||||
|
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.18039216);
|
||||||
|
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.18039216);
|
||||||
|
transition: all 0.3s;
|
||||||
|
overflow: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
height: 0;
|
||||||
|
width: 324px;
|
||||||
|
padding-top: 10px;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.main .hot .list .list-item .item .operate .select.show {
|
||||||
|
height: 90px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.main .hot .list .list-item .item .operate .select .title {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #7f7f7f;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
.main .hot .list .list-item .item .operate .select .title .dot {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid #cab157;
|
||||||
|
background-color: #fddf6d;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.main .hot .list .list-item .item .operate .select .btn {
|
||||||
|
cursor: pointer;
|
||||||
|
width: 144px;
|
||||||
|
height: 36px;
|
||||||
|
background: -webkit-linear-gradient(194.03624347deg, #dbe3fd 0%, #eef7f5 100%);
|
||||||
|
background: -moz-linear-gradient(255.96375653deg, #dbe3fd 0%, #eef7f5 100%);
|
||||||
|
background: linear-gradient(255.96375653deg, #dbe3fd 0%, #eef7f5 100%);
|
||||||
|
border-radius: 158px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.main .hot .list .list-item .item .operate .select .btn .img {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
.main .hot .list .list-item .item .operate .already {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #7f7f7f;
|
||||||
|
}
|
||||||
|
.main .hot .list .list-item .item .operate .already .tick-box {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background-color: #f6f6f6;
|
||||||
|
border: 1px solid #d7d7d7;
|
||||||
|
border-radius: 20px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.main .hot .list .list-item .item .operate .already .tick-box .img-tick {
|
||||||
|
width: 10px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
.main .hot .indicate {
|
||||||
|
line-height: 12px;
|
||||||
|
}
|
||||||
|
.main .hot .indicate .icon {
|
||||||
|
width: 7px;
|
||||||
|
height: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.main .hot .indicate .text {
|
||||||
|
color: #555555;
|
||||||
|
font-size: 13px;
|
||||||
|
margin: 0 12px;
|
||||||
|
}
|
||||||
|
.main .content {
|
||||||
|
height: 1214px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border: 1px solid #f2f2f2;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
.main .content .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;
|
||||||
|
}
|
||||||
|
.main .content .body .left {
|
||||||
|
width: 200px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #333333;
|
||||||
|
border-right: 1px solid #ebebeb;
|
||||||
|
}
|
||||||
|
.main .content .body .left .item {
|
||||||
|
height: 56px;
|
||||||
|
padding-left: 34px;
|
||||||
|
}
|
||||||
|
.main .content .body .left .item .img {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
|
.main .content .body .left .item.pitch {
|
||||||
|
background-color: #fbfbfb;
|
||||||
|
border-top: 1px solid #ebebeb;
|
||||||
|
border-bottom: 1px solid #ebebeb;
|
||||||
|
width: 201px;
|
||||||
|
position: relative;
|
||||||
|
color: #000000;
|
||||||
|
font-weight: 650;
|
||||||
|
}
|
||||||
|
.main .content .body .left .item.pitch::after {
|
||||||
|
content: "";
|
||||||
|
width: 5px;
|
||||||
|
height: 56px;
|
||||||
|
background-color: #6fc16d;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.main .content .body .right {
|
||||||
|
background-color: #fbfbfb;
|
||||||
|
border-top: 1px solid #ebebeb;
|
||||||
|
padding: 0 32px;
|
||||||
|
}
|
||||||
|
.main .content .body .right .screen .title {
|
||||||
|
font-size: 15px;
|
||||||
|
color: #555555;
|
||||||
|
padding-top: 27px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.main .content .body .right .screen .list {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.main .content .body .right .screen .list .item {
|
||||||
|
width: fit-content;
|
||||||
|
height: 36px;
|
||||||
|
line-height: 36px;
|
||||||
|
padding: 0 17px;
|
||||||
|
background-color: rgba(251, 251, 251, 0);
|
||||||
|
border: 1px solid #ebebeb;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333333;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.main .content .body .right .screen .list .item.pitch {
|
||||||
|
background-color: #7b8cd3;
|
||||||
|
color: #ffffff;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.main .content .body .right .h {
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-top: 27px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
.main .content .body .right .h .total {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #7f7f7f;
|
||||||
|
}
|
||||||
|
.main .content .body .right .h .sort {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #000000;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.main .content .body .right .h .sort .img {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
.main .content .body .right .list {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.main .content .body .right .list .item {
|
||||||
|
width: 460px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border: 1px solid #f2f2f2;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 21px 15px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.main .content .body .right .list .item .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;
|
||||||
|
}
|
||||||
|
.main .content .body .right .list .item .english {
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #555555;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.main .content .body .right .list .item .introduce {
|
||||||
|
color: #555555;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.main .content .body .right .list .item .introduce .quantity {
|
||||||
|
font-family: "Arial-Black", "Arial Black", sans-serif;
|
||||||
|
font-weight: 900;
|
||||||
|
color: #000000;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
.main .content .body .right .list .item .introduce .line {
|
||||||
|
color: #d7d7d7;
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
.main .content .body .right .list .item .word {
|
||||||
|
background-color: #f9f8f8;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 10px 15px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #7f7f7f;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.main .content .body .right .list .item .tag .tag-item {
|
||||||
|
width: fit-content;
|
||||||
|
height: 24px;
|
||||||
|
line-height: 24px;
|
||||||
|
background-color: #f9f8f8;
|
||||||
|
border: 1px solid #aaaaaa;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 0 9px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #7f7f7f;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.main .content .body .right .list .item .tag .tag-item.gray {
|
||||||
|
background-color: #333333;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.main .content .body .right .list .item .tag .tag-item.semester {
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: #f95d5d;
|
||||||
|
}
|
||||||
|
.main .content .body .right .list .item .operate {
|
||||||
|
position: absolute;
|
||||||
|
top: 18px;
|
||||||
|
right: 24px;
|
||||||
|
}
|
||||||
|
.main .content .body .right .list .item .operate .circle {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
background-color: #dbe3fd;
|
||||||
|
border: 1px solid #afb5ca;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
.main .content .body .right .list .item .operate .circle .img-add {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
.main .content .body .right .list .item .operate .circle .img-dot {
|
||||||
|
width: 18px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
.main .content .body .right .list .item .operate .select {
|
||||||
|
position: absolute;
|
||||||
|
top: -18px;
|
||||||
|
right: -24px;
|
||||||
|
width: 285px;
|
||||||
|
background-color: #fbfbfb;
|
||||||
|
border-radius: 8px;
|
||||||
|
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.18039216);
|
||||||
|
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.18039216);
|
||||||
|
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.18039216);
|
||||||
|
flex-direction: column;
|
||||||
|
transition: all 0.3s;
|
||||||
|
overflow: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
height: 0;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 68px;
|
||||||
|
}
|
||||||
|
.main .content .body .right .list .item .operate .select.show {
|
||||||
|
height: 171px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.main .content .body .right .list .item .operate .select .title {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #7f7f7f;
|
||||||
|
margin-bottom: 19px;
|
||||||
|
}
|
||||||
|
.main .content .body .right .list .item .operate .select .title .dot {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid #cab157;
|
||||||
|
background-color: #fddf6d;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.main .content .body .right .list .item .operate .select .btn {
|
||||||
|
cursor: pointer;
|
||||||
|
width: 144px;
|
||||||
|
height: 36px;
|
||||||
|
background: -webkit-linear-gradient(194.03624347deg, #dbe3fd 0%, #eef7f5 100%);
|
||||||
|
background: -moz-linear-gradient(255.96375653deg, #dbe3fd 0%, #eef7f5 100%);
|
||||||
|
background: linear-gradient(255.96375653deg, #dbe3fd 0%, #eef7f5 100%);
|
||||||
|
border-radius: 158px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.main .content .body .right .list .item .operate .select .btn .img {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
.main .content .body .right .list .item .operate .already {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #7f7f7f;
|
||||||
|
}
|
||||||
|
.main .content .body .right .list .item .operate .already .tick-box {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background-color: #f6f6f6;
|
||||||
|
border: 1px solid #d7d7d7;
|
||||||
|
border-radius: 20px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.main .content .body .right .list .item .operate .already .tick-box .img-tick {
|
||||||
|
width: 10px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
.main .base {
|
||||||
|
width: 640px;
|
||||||
|
height: 60px;
|
||||||
|
background-color: #7b8cd3;
|
||||||
|
border-radius: 153px;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 15px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
.main .base .left {
|
||||||
|
width: 450px;
|
||||||
|
height: 50px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 153px 15px 15px 153px;
|
||||||
|
margin-right: 5px;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
.main .base .left .text {
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 16px;
|
||||||
|
color: rgba(170, 170, 170, 0.90196078);
|
||||||
|
}
|
||||||
|
.main .base .left .img {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
.main .base .rigth {
|
||||||
|
width: 175px;
|
||||||
|
height: 50px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 15px 153px 153px 15px;
|
||||||
|
padding-left: 19px;
|
||||||
|
}
|
||||||
|
.main .base .rigth .img {
|
||||||
|
width: 25px;
|
||||||
|
height: 22px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.main .base .rigth .text {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #333333;
|
||||||
|
margin-right: 9px;
|
||||||
|
}
|
||||||
|
.main .base .rigth .number {
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
border-radius: 150px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #f95d5d;
|
||||||
|
padding: 0 8px;
|
||||||
|
}
|
||||||
313
school/school.html
Normal file
313
school/school.html
Normal file
@ -0,0 +1,313 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Document</title>
|
||||||
|
<link rel="stylesheet" href="./school.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="main">
|
||||||
|
<img class="index-icon" src="/img/index-icon.png" />
|
||||||
|
|
||||||
|
<div style="display: none;" class="box">
|
||||||
|
<div class="tab flexacenter">
|
||||||
|
首页
|
||||||
|
<img class="img" src="/img/arrows.svg" />
|
||||||
|
按学校查看
|
||||||
|
<img class="img" src="/img/arrows.svg" />
|
||||||
|
<div class="current">香港大学</div>
|
||||||
|
</div>
|
||||||
|
<div class="details flexflex">
|
||||||
|
<div class="logo flexcenter">
|
||||||
|
<img class="bj" src="/img/logo-bj.png" />
|
||||||
|
<img class="img" src="https://axure-file.lanhuapp.com/md5__68256768938198d279381608ea82d345.png" />
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="name">香港大学</div>
|
||||||
|
<div class="name-en">The University of Hong Kong</div>
|
||||||
|
<div class="world">
|
||||||
|
<div class="head flexcenter">
|
||||||
|
<div class="icon flexcenter">
|
||||||
|
<img class="img" src="https://app.gter.net/image/miniApp/offer/world-ranking-icon.png" mode="widthFix" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="list flexacenter">
|
||||||
|
<div class="item flex1 flexacenter">
|
||||||
|
<div class="quantity">16</div>
|
||||||
|
<div class="ranking-name">
|
||||||
|
QS
|
||||||
|
<img class="ranking-icon" src="https://app.gter.net/image/miniApp/offer/triangle-QS.svg" />
|
||||||
|
<!-- <image wx:if="{{ item.mechanism == '泰晤士' }}" class="ranking-icon" mode="widthFix" src="https://app.gter.net/image/miniApp/offer/triangle-TIMES.svg"></image>
|
||||||
|
<image wx:if="{{ item.mechanism == 'USNEWS' }}" class="ranking-icon" mode="widthFix" src="https://app.gter.net/image/miniApp/offer/triangle-US-News.svg"></image>
|
||||||
|
<image wx:if="{{ item.mechanism == '软科' }}" class="ranking-icon" mode="widthFix" src="https://app.gter.net/image/miniApp/offer/triangle-Soft.svg"></image> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="brief">
|
||||||
|
<div class="text">香港大学简称为“港大”、“HKU”，是一所位处中华人民共和国香港特别行政区的公立研究型大学，其奠基于1910年3月16日，次年3月30日…</div>
|
||||||
|
<img class="img" src="/img/arrows-gray-icon.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 热门项目 -->
|
||||||
|
<div class="hot">
|
||||||
|
<div class="header flexacenter">
|
||||||
|
<div class="icon flexcenter">
|
||||||
|
<img class="img" src="/img/hot-icon.png" />
|
||||||
|
</div>
|
||||||
|
热门项目
|
||||||
|
</div>
|
||||||
|
<div class="list">
|
||||||
|
<div class="list-item">
|
||||||
|
<div class="item flexacenter">
|
||||||
|
<div class="left flex1">
|
||||||
|
<div class="name">教育学硕士</div>
|
||||||
|
<div class="text flexacenter">
|
||||||
|
Master of Education
|
||||||
|
<div class="ranking flexacenter">
|
||||||
|
<div class="vertical">|</div>
|
||||||
|
专业排名
|
||||||
|
<div class="number">52</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="operate flexcenter">
|
||||||
|
<div style="display: none;" class="circle flexcenter">
|
||||||
|
<img class="img-add" src="/img/add-thick.svg" />
|
||||||
|
</div>
|
||||||
|
<div style="display: none;" class="circle flexcenter">
|
||||||
|
<img class="img-dot" src="/img/dot-dot-dot.png" />
|
||||||
|
</div>
|
||||||
|
<div style="display: none;" class="select flexflex show">
|
||||||
|
<div class="title flexacenter">
|
||||||
|
<div class="dot"></div>
|
||||||
|
该项目已加入对比单，未加入项目管理
|
||||||
|
</div>
|
||||||
|
<div class="btn flexcenter"><img class="img" src="/img/add-circle.svg" />加入项目管理</div>
|
||||||
|
</div>
|
||||||
|
<div style="display: none;" class="already flexacenter">
|
||||||
|
<div class="tick-box flexcenter">
|
||||||
|
<img class="img-tick" src="/img/tick-icon.svg" />
|
||||||
|
</div>
|
||||||
|
已加入
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item flexacenter">
|
||||||
|
<div class="left flex1">
|
||||||
|
<div class="name">教育学硕士</div>
|
||||||
|
<div class="text flexacenter">
|
||||||
|
Master of Education
|
||||||
|
<div class="ranking flexacenter">
|
||||||
|
<div class="vertical">|</div>
|
||||||
|
专业排名
|
||||||
|
<div class="number">52</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="operate flexcenter">
|
||||||
|
<div style="display: none;" class="circle flexcenter">
|
||||||
|
<img class="img-add" src="/img/add-thick.svg" />
|
||||||
|
</div>
|
||||||
|
<div style="display: flex;" class="circle flexcenter">
|
||||||
|
<img class="img-dot" src="/img/dot-dot-dot.png" />
|
||||||
|
</div>
|
||||||
|
<div style="display: none;" class="select flexflex show">
|
||||||
|
<div class="title flexacenter">
|
||||||
|
<div class="dot"></div>
|
||||||
|
该项目已加入对比单，未加入项目管理
|
||||||
|
</div>
|
||||||
|
<div class="btn flexcenter"><img class="img" src="/img/add-circle.svg" />加入项目管理</div>
|
||||||
|
<!-- <div class="bottom"></div> -->
|
||||||
|
</div>
|
||||||
|
<div style="display: none;" class="already flexacenter">
|
||||||
|
<div class="tick-box flexcenter">
|
||||||
|
<img class="img-tick" src="/img/tick-icon.svg" />
|
||||||
|
</div>
|
||||||
|
已加入
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item flexacenter">
|
||||||
|
<div class="left flex1">
|
||||||
|
<div class="name">教育学硕士</div>
|
||||||
|
<div class="text flexacenter">
|
||||||
|
Master of Education
|
||||||
|
<div class="ranking flexacenter">
|
||||||
|
<div class="vertical">|</div>
|
||||||
|
专业排名
|
||||||
|
<div class="number">52</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="operate flexcenter">
|
||||||
|
<div style="display: none;" class="circle flexcenter">
|
||||||
|
<img class="img-add" src="/img/add-thick.svg" />
|
||||||
|
</div>
|
||||||
|
<div style="display: flex;" class="circle flexcenter">
|
||||||
|
<img class="img-dot" src="/img/dot-dot-dot.png" />
|
||||||
|
</div>
|
||||||
|
<div style="display: none;" class="select flexflex show">
|
||||||
|
<div class="title flexacenter">
|
||||||
|
<div class="dot"></div>
|
||||||
|
该项目已加入对比单，未加入项目管理
|
||||||
|
</div>
|
||||||
|
<div class="btn flexcenter"><img class="img" src="/img/add-circle.svg" />加入项目管理</div>
|
||||||
|
<!-- <div class="bottom"></div> -->
|
||||||
|
</div>
|
||||||
|
<div style="display: none;" class="already flexacenter">
|
||||||
|
<div class="tick-box flexcenter">
|
||||||
|
<img class="img-tick" src="/img/tick-icon.svg" />
|
||||||
|
</div>
|
||||||
|
已加入
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item flexacenter">
|
||||||
|
<div class="left flex1">
|
||||||
|
<div class="name">教育学硕士</div>
|
||||||
|
<div class="text flexacenter">
|
||||||
|
Master of Education
|
||||||
|
<div class="ranking flexacenter">
|
||||||
|
<div class="vertical">|</div>
|
||||||
|
专业排名
|
||||||
|
<div class="number">52</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="operate flexcenter">
|
||||||
|
<div style="display: none;" class="circle flexcenter">
|
||||||
|
<img class="img-add" src="/img/add-thick.svg" />
|
||||||
|
</div>
|
||||||
|
<div style="display: flex;" class="circle flexcenter">
|
||||||
|
<img class="img-dot" src="/img/dot-dot-dot.png" />
|
||||||
|
</div>
|
||||||
|
<div style="display: none;" class="select flexflex show">
|
||||||
|
<div class="title flexacenter">
|
||||||
|
<div class="dot"></div>
|
||||||
|
该项目已加入对比单，未加入项目管理
|
||||||
|
</div>
|
||||||
|
<div class="btn flexcenter"><img class="img" src="/img/add-circle.svg" />加入项目管理</div>
|
||||||
|
<!-- <div class="bottom"></div> -->
|
||||||
|
</div>
|
||||||
|
<div style="display: none;" class="already flexacenter">
|
||||||
|
<div class="tick-box flexcenter">
|
||||||
|
<img class="img-tick" src="/img/tick-icon.svg" />
|
||||||
|
</div>
|
||||||
|
已加入
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="indicate flexcenter">
|
||||||
|
<img class="icon" src="/img/arrows-triangle-gray.svg" />
|
||||||
|
<div class="text">1/3</div>
|
||||||
|
<img class="icon" src="/img/arrows-triangle-blue.svg" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- -->
|
||||||
|
<div class="content">
|
||||||
|
<div class="header flexcenter">项目筛选</div>
|
||||||
|
<div class="body flexflex">
|
||||||
|
<div class="left">
|
||||||
|
<div class="item flexacenter"><img class="img" src="/img/side-all.png" />全部项目</div>
|
||||||
|
<div class="item flexacenter pitch"><img class="img" src="/img/side-subject.png" />按学科</div>
|
||||||
|
<div class="item flexacenter"><img class="img" src="/img/side-school.png" />按学院</div>
|
||||||
|
</div>
|
||||||
|
<div class="right flex1">
|
||||||
|
<div class="screen">
|
||||||
|
<div class="title">按学科查看：</div>
|
||||||
|
<div class="list flexflex">
|
||||||
|
<div class="item pitch">建筑及城市规划</div>
|
||||||
|
<div class="item">建筑及城市规划</div>
|
||||||
|
<div class="item">建筑及城市规划</div>
|
||||||
|
<div class="item">建筑及城市规划</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="h flexacenter">
|
||||||
|
<div class="total">共 113 个项目</div>
|
||||||
|
<div class="sort flexacenter">
|
||||||
|
学费由低到高
|
||||||
|
<img class="img" src="/img/sort-icon.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="list flexflex">
|
||||||
|
<div class="item">
|
||||||
|
<div class="operate flexcenter">
|
||||||
|
<div style="display: none;" class="circle flexcenter">
|
||||||
|
<img class="img-add" src="/img/add-thick.svg" />
|
||||||
|
</div>
|
||||||
|
<div class="circle flexcenter">
|
||||||
|
<img class="img-dot" src="/img/dot-dot-dot.png" />
|
||||||
|
</div>
|
||||||
|
<div class="select flexflex show">
|
||||||
|
<div class="title flexacenter">
|
||||||
|
<div class="dot"></div>
|
||||||
|
该项目已加入对比单，未加入项目管理
|
||||||
|
</div>
|
||||||
|
<div class="btn flexcenter"><img class="img" src="/img/add-circle.svg" />加入项目管理</div>
|
||||||
|
</div>
|
||||||
|
<div style="display: none;" class="already flexacenter">
|
||||||
|
<div class="tick-box flexcenter">
|
||||||
|
<img class="img-tick" src="/img/tick-icon.svg" />
|
||||||
|
</div>
|
||||||
|
已加入
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="name flexflex">建筑硕士</div>
|
||||||
|
<div class="english">Master of Architecture</div>
|
||||||
|
<div class="introduce flexacenter">
|
||||||
|
建筑学院
|
||||||
|
<div class="flexacenter">
|
||||||
|
<div class="line">|</div>
|
||||||
|
专业排名
|
||||||
|
<div class="quantity">52</div>
|
||||||
|
</div>
|
||||||
|
<div class="flexacenter">
|
||||||
|
<div class="line">|</div>
|
||||||
|
学费HK$ <vie class="quantity">281,000</vie>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="word">一句话描述独特之处，一句话描述独特之处。</div>
|
||||||
|
<div class="tag flexflex">
|
||||||
|
<div class="tag-item admissions">招生官项目</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 底部 -->
|
||||||
|
<div class="base flexcenter">
|
||||||
|
<div class="left flexacenter">
|
||||||
|
<div class="text flex1">搜索项目</div>
|
||||||
|
<img class="img" src="/img/search-black-icon.svg" />
|
||||||
|
</div>
|
||||||
|
<div class="rigth flexacenter">
|
||||||
|
<img class="img" src="/img/contrast-icon.png" />
|
||||||
|
<div class="text">项目对比</div>
|
||||||
|
<div class="number">16</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
function name() {
|
||||||
|
return "123"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
786
school/school.less
Normal file
786
school/school.less
Normal file
@ -0,0 +1,786 @@
|
|||||||
|
* {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
402
subject/subject.css
Normal file
402
subject/subject.css
Normal file
@ -0,0 +1,402 @@
|
|||||||
|
* {
|
||||||
|
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;
|
||||||
|
height: 396px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 12px;
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.main .box::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: -5px;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 66px;
|
||||||
|
background: -webkit-linear-gradient(0deg, #7b8cd3 0%, #dae3fd 99%);
|
||||||
|
background: -moz-linear-gradient(90deg, #7b8cd3 0%, #dae3fd 99%);
|
||||||
|
background: linear-gradient(90deg, #7b8cd3 0%, #dae3fd 99%);
|
||||||
|
border-radius: 18px;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
.main .box .tab {
|
||||||
|
height: 60px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #7f7f7f;
|
||||||
|
border-bottom: 1px dotted #ebebeb;
|
||||||
|
padding-left: 24px;
|
||||||
|
}
|
||||||
|
.main .box .tab .img {
|
||||||
|
width: 6px;
|
||||||
|
height: 10px;
|
||||||
|
margin: 0 15px;
|
||||||
|
}
|
||||||
|
.main .box .tab .current {
|
||||||
|
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 650;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
.main .box .info {
|
||||||
|
padding: 41px 60px 0;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
.main .box .info .img {
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
margin-right: 40px;
|
||||||
|
}
|
||||||
|
.main .box .info .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;
|
||||||
|
}
|
||||||
|
.main .box .info .list {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.main .box .info .list .item {
|
||||||
|
width: fit-content;
|
||||||
|
height: 36px;
|
||||||
|
line-height: 36px;
|
||||||
|
padding: 0 17px;
|
||||||
|
background-color: rgba(251, 251, 251, 0);
|
||||||
|
border: 1px solid #ebebeb;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333333;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.main .box .info .list .item.pitch {
|
||||||
|
background-color: #7b8cd3;
|
||||||
|
color: #ffffff;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.main .body {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
.main .body .left {
|
||||||
|
width: 200px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #333333;
|
||||||
|
border-right: 1px solid #ebebeb;
|
||||||
|
}
|
||||||
|
.main .body .left .item {
|
||||||
|
height: 56px;
|
||||||
|
padding-left: 34px;
|
||||||
|
}
|
||||||
|
.main .body .left .item .img {
|
||||||
|
width: 18px;
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
|
.main .body .left .item.pitch {
|
||||||
|
background-color: #fbfbfb;
|
||||||
|
border-top: 1px solid #ebebeb;
|
||||||
|
border-bottom: 1px solid #ebebeb;
|
||||||
|
width: 201px;
|
||||||
|
position: relative;
|
||||||
|
color: #000000;
|
||||||
|
font-weight: 650;
|
||||||
|
}
|
||||||
|
.main .body .left .item.pitch::after {
|
||||||
|
content: "";
|
||||||
|
width: 5px;
|
||||||
|
height: 56px;
|
||||||
|
background-color: #6fc16d;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.main .body .right {
|
||||||
|
background-color: #fbfbfb;
|
||||||
|
border-top: 1px solid #ebebeb;
|
||||||
|
padding: 0 32px;
|
||||||
|
}
|
||||||
|
.main .body .right .h {
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-top: 27px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
.main .body .right .h .total {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #7f7f7f;
|
||||||
|
}
|
||||||
|
.main .body .right .h .item {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #000000;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.main .body .right .h .item .img-sort {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
.main .body .right .h .item .img-school {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
.main .body .right .list {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.main .body .right .list .item {
|
||||||
|
width: 460px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border: 1px solid #f2f2f2;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 21px 15px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.main .body .right .list .item .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;
|
||||||
|
}
|
||||||
|
.main .body .right .list .item .english {
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #555555;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.main .body .right .list .item .introduce {
|
||||||
|
color: #555555;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.main .body .right .list .item .introduce .quantity {
|
||||||
|
font-family: "Arial-Black", "Arial Black", sans-serif;
|
||||||
|
font-weight: 900;
|
||||||
|
color: #000000;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
.main .body .right .list .item .introduce .line {
|
||||||
|
color: #d7d7d7;
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
.main .body .right .list .item .word {
|
||||||
|
background-color: #f9f8f8;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 10px 15px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #7f7f7f;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.main .body .right .list .item .tag .tag-item {
|
||||||
|
width: fit-content;
|
||||||
|
height: 24px;
|
||||||
|
line-height: 24px;
|
||||||
|
background-color: #f9f8f8;
|
||||||
|
border: 1px solid #aaaaaa;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 0 9px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #7f7f7f;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.main .body .right .list .item .tag .tag-item.gray {
|
||||||
|
background-color: #333333;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.main .body .right .list .item .tag .tag-item.semester {
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: #f95d5d;
|
||||||
|
}
|
||||||
|
.main .body .right .list .item .operate {
|
||||||
|
position: absolute;
|
||||||
|
top: 18px;
|
||||||
|
right: 24px;
|
||||||
|
}
|
||||||
|
.main .body .right .list .item .operate .circle {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
background-color: #dbe3fd;
|
||||||
|
border: 1px solid #afb5ca;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
.main .body .right .list .item .operate .circle .img-add {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
.main .body .right .list .item .operate .circle .img-dot {
|
||||||
|
width: 18px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
.main .body .right .list .item .operate .select {
|
||||||
|
position: absolute;
|
||||||
|
top: -18px;
|
||||||
|
right: -24px;
|
||||||
|
width: 285px;
|
||||||
|
background-color: #fbfbfb;
|
||||||
|
border-radius: 8px;
|
||||||
|
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.18039216);
|
||||||
|
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.18039216);
|
||||||
|
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.18039216);
|
||||||
|
flex-direction: column;
|
||||||
|
transition: all 0.3s;
|
||||||
|
overflow: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
height: 0;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 68px;
|
||||||
|
}
|
||||||
|
.main .body .right .list .item .operate .select.show {
|
||||||
|
height: 171px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.main .body .right .list .item .operate .select .title {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #7f7f7f;
|
||||||
|
margin-bottom: 19px;
|
||||||
|
}
|
||||||
|
.main .body .right .list .item .operate .select .title .dot {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid #cab157;
|
||||||
|
background-color: #fddf6d;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.main .body .right .list .item .operate .select .btn {
|
||||||
|
cursor: pointer;
|
||||||
|
width: 144px;
|
||||||
|
height: 36px;
|
||||||
|
background: -webkit-linear-gradient(194.03624347deg, #dbe3fd 0%, #eef7f5 100%);
|
||||||
|
background: -moz-linear-gradient(255.96375653deg, #dbe3fd 0%, #eef7f5 100%);
|
||||||
|
background: linear-gradient(255.96375653deg, #dbe3fd 0%, #eef7f5 100%);
|
||||||
|
border-radius: 158px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.main .body .right .list .item .operate .select .btn .img {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
.main .body .right .list .item .operate .already {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #7f7f7f;
|
||||||
|
}
|
||||||
|
.main .body .right .list .item .operate .already .tick-box {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background-color: #f6f6f6;
|
||||||
|
border: 1px solid #d7d7d7;
|
||||||
|
border-radius: 20px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.main .body .right .list .item .operate .already .tick-box .img-tick {
|
||||||
|
width: 10px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
.main .base {
|
||||||
|
width: 640px;
|
||||||
|
height: 60px;
|
||||||
|
background-color: #7b8cd3;
|
||||||
|
border-radius: 153px;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 15px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
.main .base .left {
|
||||||
|
width: 450px;
|
||||||
|
height: 50px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 153px 15px 15px 153px;
|
||||||
|
margin-right: 5px;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
.main .base .left .text {
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 16px;
|
||||||
|
color: rgba(170, 170, 170, 0.90196078);
|
||||||
|
}
|
||||||
|
.main .base .left .img {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
.main .base .rigth {
|
||||||
|
width: 175px;
|
||||||
|
height: 50px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 15px 153px 153px 15px;
|
||||||
|
padding-left: 19px;
|
||||||
|
}
|
||||||
|
.main .base .rigth .img {
|
||||||
|
width: 25px;
|
||||||
|
height: 22px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.main .base .rigth .text {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #333333;
|
||||||
|
margin-right: 9px;
|
||||||
|
}
|
||||||
|
.main .base .rigth .number {
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
border-radius: 150px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #f95d5d;
|
||||||
|
padding: 0 8px;
|
||||||
|
}
|
||||||
123
subject/subject.html
Normal file
123
subject/subject.html
Normal file
@ -0,0 +1,123 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Document</title>
|
||||||
|
<link rel="stylesheet" href="./subject.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="main">
|
||||||
|
<img class="index-icon" src="/img/index-icon.png" />
|
||||||
|
|
||||||
|
<div class="box">
|
||||||
|
<div class="tab flexacenter">
|
||||||
|
首页
|
||||||
|
<img class="img" src="/img/arrows.svg" />
|
||||||
|
按学科查看
|
||||||
|
<img class="img" src="/img/arrows.svg" />
|
||||||
|
<div class="current">建筑及城市规划</div>
|
||||||
|
</div>
|
||||||
|
<div class="info flexacenter">
|
||||||
|
<img class="img" src="/img/subject.png" />
|
||||||
|
<div class="flex1">
|
||||||
|
<div class="title">学科领域</div>
|
||||||
|
<div class="list flexflex">
|
||||||
|
<div class="item pitch">建筑及城市规划</div>
|
||||||
|
<div class="item">建筑及城市规划</div>
|
||||||
|
<div class="item">建筑及城市规划</div>
|
||||||
|
<div class="item">建筑及城市规划</div>
|
||||||
|
<div class="item">建筑及城市规划</div>
|
||||||
|
<div class="item">建筑及城市规划</div>
|
||||||
|
<div class="item">建筑及城市规划</div>
|
||||||
|
<div class="item">建筑及城市规划</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="body flexflex">
|
||||||
|
<div class="left">
|
||||||
|
<div class="item flexacenter pitch"><img class="img" src="/img/side-all-pitch.png" />全部项目</div>
|
||||||
|
<div class="item flexacenter"><img class="img" src="https://axure-file.lanhuapp.com/md5__226be23041eb582c15651be885eb13cd.png" />香港大学</div>
|
||||||
|
</div>
|
||||||
|
<div class="right flex1">
|
||||||
|
<div class="h flexacenter">
|
||||||
|
<div class="total">共 113 个项目</div>
|
||||||
|
<div class="item flexacenter">
|
||||||
|
学费由低到高
|
||||||
|
<img class="img-sort" src="/img/sort-icon.png" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item flexacenter">
|
||||||
|
学校主页
|
||||||
|
<img class="img-school" src="/img/sort-icon.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="list flexflex">
|
||||||
|
<div class="item">
|
||||||
|
<div class="operate flexcenter">
|
||||||
|
<div style="display: none;" class="circle flexcenter">
|
||||||
|
<img class="img-add" src="/img/add-thick.svg" />
|
||||||
|
</div>
|
||||||
|
<div class="circle flexcenter">
|
||||||
|
<img class="img-dot" src="/img/dot-dot-dot.png" />
|
||||||
|
</div>
|
||||||
|
<div class="select flexflex show">
|
||||||
|
<div class="title flexacenter">
|
||||||
|
<div class="dot"></div>
|
||||||
|
该项目已加入对比单，未加入项目管理
|
||||||
|
</div>
|
||||||
|
<div class="btn flexcenter"><img class="img" src="/img/add-circle.svg" />加入项目管理</div>
|
||||||
|
</div>
|
||||||
|
<div style="display: none;" class="already flexacenter">
|
||||||
|
<div class="tick-box flexcenter">
|
||||||
|
<img class="img-tick" src="/img/tick-icon.svg" />
|
||||||
|
</div>
|
||||||
|
已加入
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="name flexflex">建筑硕士</div>
|
||||||
|
<div class="english">Master of Architecture</div>
|
||||||
|
<div class="introduce flexacenter">
|
||||||
|
建筑学院
|
||||||
|
<div class="flexacenter">
|
||||||
|
<div class="line">|</div>
|
||||||
|
专业排名
|
||||||
|
<div class="quantity">52</div>
|
||||||
|
</div>
|
||||||
|
<div class="flexacenter">
|
||||||
|
<div class="line">|</div>
|
||||||
|
学费HK$ <vie class="quantity">281,000</vie>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="word">一句话描述独特之处，一句话描述独特之处。</div>
|
||||||
|
<div class="tag flexflex">
|
||||||
|
<div class="tag-item admissions">招生官项目</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 底部 -->
|
||||||
|
<div class="base flexcenter">
|
||||||
|
<div class="left flexacenter">
|
||||||
|
<div class="text flex1">搜索项目</div>
|
||||||
|
<img class="img" src="/img/search-black-icon.svg" />
|
||||||
|
</div>
|
||||||
|
<div class="rigth flexacenter">
|
||||||
|
<img class="img" src="/img/contrast-icon.png" />
|
||||||
|
<div class="text">项目对比</div>
|
||||||
|
<div class="number">16</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
function name() {
|
||||||
|
return "123"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
447
subject/subject.less
Normal file
447
subject/subject.less
Normal file
@ -0,0 +1,447 @@
|
|||||||
|
* {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user