diff --git a/css/common.css b/css/common.css index 53b4947..20dc84e 100644 --- a/css/common.css +++ b/css/common.css @@ -96,3 +96,58 @@ body { color: #f95d5d; padding: 0 8px; } +.one-line-display { + word-break: keep-all; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.tag { + flex-wrap: wrap; +} +.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; + margin-bottom: 10px; + flex-wrap: wrap; +} +.tag .tag-item.gray { + background-color: #333333; + color: #ffffff; + border: none; +} +.tag .tag-item.semester { + color: #ffffff; + background-color: #f95d5d; + border: none; +} +.red-dot { + position: fixed; + width: 10px; + height: 10px; + background-color: red; + border-radius: 50%; + top: -5%; + left: -5%; + z-index: 99; + transition: left 0.3s linear, top 0.3s cubic-bezier(0.5, -0.5, 1, 1); +} +.my-project { + width: 100vw; + height: 100vh; + background-color: #000000; + position: fixed; + top: 0; + left: 0; + z-index: 999; + display: flex; + justify-content: center; +} diff --git a/css/common.less b/css/common.less index 6d37052..ebae741 100644 --- a/css/common.less +++ b/css/common.less @@ -110,4 +110,65 @@ body { padding: 0 8px; } } +} + +.one-line-display { + word-break: keep-all; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.tag { + flex-wrap: wrap; + .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; + margin-bottom: 10px; + flex-wrap: wrap; + &.gray { + background-color: rgba(51, 51, 51, 1); + color: #ffffff; + border: none; + } + + &.semester { + color: #ffffff; + background-color: rgba(249, 93, 93, 1); + border: none; + } + } +} + +.red-dot { + position: fixed; + width: 10px; + height: 10px; + background-color: red; + border-radius: 50%; + top: -5%; + left: -5%; + z-index: 99; + transition: left 0.3s linear, top 0.3s cubic-bezier(0.5, -0.5, 1, 1); +} + + +.my-project { + width: 100vw; + height: 100vh; + background-color: rgb(0, 0, 0); + position: fixed; + top: 0; + left: 0; + z-index: 999; + display: flex; + justify-content: center; } \ No newline at end of file diff --git a/css/details.css b/css/details.css index 67d1966..03d34a2 100644 --- a/css/details.css +++ b/css/details.css @@ -90,26 +90,6 @@ margin-right: 6px; margin-bottom: 8px; } -.box .details .right .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; -} -.box .details .right .tag .tag-item.gray { - background-color: #333333; - color: #ffffff; -} -.box .details .right .tag .tag-item.semester { - color: #ffffff; - background-color: #f95d5d; -} .body { align-items: flex-start; } diff --git a/css/details.less b/css/details.less index e1dc198..41133d6 100644 --- a/css/details.less +++ b/css/details.less @@ -98,31 +98,6 @@ font-size: 14px; color: #7f7f7f; } - - .tag { - .tag-item { - width: fit-content; - height: 24px; - line-height: 24px; - background-color: rgba(249, 248, 248, 1); - border: 1px solid rgba(170, 170, 170, 1); - border-radius: 6px; - padding: 0 9px; - font-size: 14px; - color: #7f7f7f; - margin-right: 10px; - - &.gray { - background-color: rgba(51, 51, 51, 1); - color: #ffffff; - } - - &.semester { - color: #ffffff; - background-color: rgba(249, 93, 93, 1); - } - } - } } } } diff --git a/css/index.css b/css/index.css index 14609a0..3c7fc7c 100644 --- a/css/index.css +++ b/css/index.css @@ -169,6 +169,7 @@ color: #000000; margin-bottom: 6px; position: relative; + max-width: 405px; } .fate .list .item .left .name::after { content: ""; @@ -186,8 +187,12 @@ color: #7f7f7f; font-size: 14px; } +.fate .list .item .left .message .project { + max-width: 280px; +} .fate .list .item .left .message .virgule { color: #d7d7d7; + margin: 0 5px; } .fate .list .item .btn { width: 110px; @@ -212,6 +217,22 @@ width: 10px; height: 10px; } +.fate .list .item .already { + font-size: 14px; + color: #7f7f7f; +} +.fate .list .item .already .tick-box { + width: 20px; + height: 20px; + background-color: #f6f6f6; + border: 1px solid #d7d7d7; + border-radius: 20px; + margin-right: 5px; +} +.fate .list .item .already .tick-box .img-tick { + width: 10px; + height: 8px; +} .recruit { width: 100%; height: 502px; @@ -275,11 +296,13 @@ font-size: 16px; color: #000000; margin-bottom: 10px; + width: 490px; } .recruit .list .item .info .name-en { font-size: 14px; color: #7f7f7f; margin-bottom: 15px; + width: 490px; } .recruit .list .item .info .aq { width: 477px; @@ -340,6 +363,7 @@ opacity: 0; height: 0; width: 300px; + z-index: 2; flex-direction: column; align-items: center; } @@ -377,6 +401,14 @@ height: 16px; margin-right: 8px; } +.recruit .list .item .operate .select-mask { + position: fixed; + width: 100%; + height: 100%; + z-index: 2; + top: 0; + left: 0; +} .recruit .list .item .operate .already { font-size: 14px; color: #7f7f7f; @@ -401,6 +433,9 @@ height: 12px; cursor: pointer; } +.recruit .indicate .icon.btn-right { + transform: rotate(180deg); +} .recruit .indicate .text { color: #555555; font-size: 13px; @@ -409,6 +444,7 @@ .data .fall { width: 285px; display: block; + margin-bottom: 20px; } .data .item { width: 285px; @@ -416,6 +452,7 @@ border: 1px solid #ebebeb; border-radius: 12px; padding: 21px 15px 0; + margin-bottom: 20px; } .data .item .school { font-size: 14px; @@ -446,6 +483,7 @@ color: #555555; font-size: 14px; margin-bottom: 12px; + flex-wrap: wrap; } .data .item .introduce .quantity { font-family: "Arial-Black", "Arial Black", sans-serif; @@ -465,26 +503,6 @@ color: #7f7f7f; margin-bottom: 12px; } -.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; -} -.data .item .tag .tag-item.gray { - background-color: #333333; - color: #ffffff; -} -.data .item .tag .tag-item.semester { - color: #ffffff; - background-color: #f95d5d; -} .data .item .operate { height: 80px; position: relative; @@ -562,6 +580,14 @@ border-top: 1px dotted #ebebeb; height: 80px; } +.data .item .operate .select-mask { + position: fixed; + width: 100%; + height: 100%; + z-index: 2; + top: 0; + left: 0; +} .data .item .operate .already { font-size: 14px; color: #7f7f7f; diff --git a/css/index.less b/css/index.less index 122e04b..830293e 100644 --- a/css/index.less +++ b/css/index.less @@ -10,7 +10,7 @@ &:before { content: ""; position: absolute; - top: 0; + top: 0; left: 0; width: 100%; height: 100%; @@ -194,8 +194,8 @@ font-size: 16px; color: #000000; margin-bottom: 6px; - position: relative; + max-width: 405px; &::after { content: ""; @@ -213,8 +213,12 @@ .message { color: #7f7f7f; font-size: 14px; + .project { + max-width: 280px; + } .virgule { color: #d7d7d7; + margin: 0 5px; } } } @@ -241,6 +245,24 @@ } } } + + .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; + } + } + } } } } @@ -308,11 +330,13 @@ font-size: 16px; color: #000000; margin-bottom: 10px; + width: 490px; } .name-en { font-size: 14px; color: #7f7f7f; margin-bottom: 15px; + width: 490px; } .aq { @@ -377,6 +401,7 @@ opacity: 0; height: 0; width: 300px; + z-index: 2; &.show { height: 180px; opacity: 1; @@ -384,8 +409,6 @@ flex-direction: column; align-items: center; - // .top { - // flex-direction: column; .title { .dot { width: 8px; @@ -410,7 +433,6 @@ 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; @@ -420,7 +442,15 @@ margin-right: 8px; } } - // } + } + + .select-mask { + position: fixed; + width: 100%; + height: 100%; + z-index: 2; + top: 0; + left: 0; } .already { font-size: 14px; @@ -450,6 +480,10 @@ width: 7px; height: 12px; cursor: pointer; + + &.btn-right { + transform: rotate(180deg); + } } .text { color: #555555; @@ -463,6 +497,7 @@ .fall { width: 285px; display: block; + margin-bottom: 20px; } .item { @@ -471,6 +506,7 @@ border: 1px solid rgba(235, 235, 235, 1); border-radius: 12px; padding: 21px 15px 0; + margin-bottom: 20px; .school { .img { @@ -503,6 +539,7 @@ color: #555555; font-size: 14px; margin-bottom: 12px; + flex-wrap: wrap; .quantity { font-family: "Arial-Black", "Arial Black", sans-serif; font-weight: 900; @@ -522,30 +559,7 @@ 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; @@ -626,6 +640,16 @@ height: 80px; } } + + .select-mask { + position: fixed; + width: 100%; + height: 100%; + z-index: 2; + top: 0; + left: 0; + } + .already { font-size: 14px; color: #7f7f7f; diff --git a/css/school.css b/css/school.css index 2e143bf..3026cc7 100644 --- a/css/school.css +++ b/css/school.css @@ -490,26 +490,6 @@ color: #7f7f7f; margin-bottom: 12px; } -.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; -} -.content .body .right .list .item .tag .tag-item.gray { - background-color: #333333; - color: #ffffff; -} -.content .body .right .list .item .tag .tag-item.semester { - color: #ffffff; - background-color: #f95d5d; -} .content .body .right .list .item .operate { position: absolute; top: 18px; diff --git a/css/school.less b/css/school.less index ceb6719..2d209d7 100644 --- a/css/school.less +++ b/css/school.less @@ -544,30 +544,7 @@ 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; diff --git a/css/subject.css b/css/subject.css index 8e62fd0..69e07c3 100644 --- a/css/subject.css +++ b/css/subject.css @@ -193,26 +193,6 @@ color: #7f7f7f; margin-bottom: 12px; } -.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; -} -.body .right .list .item .tag .tag-item.gray { - background-color: #333333; - color: #ffffff; -} -.body .right .list .item .tag .tag-item.semester { - color: #ffffff; - background-color: #f95d5d; -} .body .right .list .item .operate { position: absolute; top: 18px; diff --git a/css/subject.less b/css/subject.less index fe06cb2..2fb454c 100644 --- a/css/subject.less +++ b/css/subject.less @@ -206,30 +206,6 @@ 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; diff --git a/html/details.html b/html/details.html index 924a685..c768fa7 100644 --- a/html/details.html +++ b/html/details.html @@ -437,7 +437,7 @@
我的项目
- + 已加入对比单
diff --git a/html/index.html b/html/index.html index a26eedd..3cfe8d5 100644 --- a/html/index.html +++ b/html/index.html @@ -6,10 +6,20 @@ Document + + + + + + -
+
@@ -39,13 +49,7 @@ 按学校查看
-
港大
-
港大
-
港大
-
港大
-
港大
-
港大
-
港大
+
{{ item.label }}
@@ -56,56 +60,47 @@ 按学科查看
-
港大
-
港大
-
港大
-
港大
-
港大
-
港大
-
港大
+
{{ item.label }}
-
+
今日缘分项目
-
+
换一批
-
+
-
教育学硕士
-
Master of Education | 香港大学
+
{{ item.name_zh }}
+
+
{{ item.name_en }}
+ |{{ item.schoolname }} +
-
+
加入对比单
-
-
-
-
教育学硕士
-
Master of Education | 香港大学
-
-
-
- +
+
+
- 加入对比单 + 已加入
-
+
@@ -113,90 +108,36 @@
-
-
-
+
+
+
- - - - - -
-
香港大学
-
城市设计硕士
-
Master of Urban Design
-
-
招生官答疑时间
-
长期答疑
- +
+ +
+
+ +
+
+
+
+
+ {{ item.contraststatus?.status == 1 ? '该项目已加入对比单，未加入项目管理' : '该项目已加入项目管理，未加入对比单' }} +
+
加入{{ item.contraststatus?.status == 1 ? '项目管理' : '对比单' }}
-
-
-
-
- +
-
香港大学
-
城市设计硕士
-
Master of Urban Design
-
-
招生官答疑时间
-
长期答疑
- -
-
-
-
- -
-
香港大学
-
城市设计硕士
-
Master of Urban Design
-
-
招生官答疑时间
-
长期答疑
- -
-
-
-
- -
-
香港大学
-
城市设计硕士
-
Master of Urban Design
-
-
招生官答疑时间
-
长期答疑
- -
-
-
-
- -
-
香港大学
-
城市设计硕士
-
Master of Urban Design
+
{{ item.schoolname }}
+
{{ item.name_zh }}
+
{{ item.name_en }}
招生官答疑时间
长期答疑
@@ -208,85 +149,326 @@
- -
1/3
- + +
{{ admissionPage }}/{{ admissionTotalPage }}
+
-
- -
-
香港中文大学
-
金融数学研究型硕士
-
Mphil in Financial Mathematics
+
+ +
+
{{ item.schoolname }}
+
{{ item.name_zh }}
+
{{ item.name_en }}
-
+
专业排名 -
52
+
{{ item.rank }}
-
-
|
+
+
|
学费HK$ -
281,000
+
{{ item.tuition_fee_text }}
-
一句话描述独特之处，一句话描述独特之处。
+
{{ item.distinctive }}
-
无需面试
+
{{ item.semester.text }}
+
{{ item }}
- -
- -
-
-
-
-
- 该项目已加入对比单，未加入项目管理 -
-
加入项目管理
-
-
-
-
+ + -
-
-
搜索项目
- -
-
- -
项目对比
-
16
-
+ + +
+ dfgfdgdfgdfgfd
+
diff --git a/img/arrows-triangle-blue.png b/img/arrows-triangle-blue.png new file mode 100644 index 0000000..8436cf9 Binary files /dev/null and b/img/arrows-triangle-blue.png differ diff --git a/img/group-QRCode.svg b/img/group-QRCode.svg new file mode 100644 index 0000000..b297625 --- /dev/null +++ b/img/group-QRCode.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/img/arrows-circle-gray.svg b/img/tick-circle-gray.svg similarity index 100% rename from img/arrows-circle-gray.svg rename to img/tick-circle-gray.svg diff --git a/js/base.js b/js/base.js new file mode 100644 index 0000000..7ea14eb --- /dev/null +++ b/js/base.js @@ -0,0 +1,60 @@ +const base = { + template: ` +
+
+
+
搜索项目
+ +
+
+ +
项目对比
+
16
+
+
`, + data() { + return { + hideIcon: false, + top: 0, + left: 0, + } + }, + methods: { + customMethod() { + console.log("Custom method called") + }, + // 计算按钮位置 + calculate(random) { + const dom = document.querySelector(".add" + random) + const rect = dom.getBoundingClientRect() + const top = rect.top + rect.height / 2 - 5 + const left = rect.left + rect.width / 2 - 5 + this.top = top + this.left = left + this.hideIcon = true + + setTimeout(() => { + const dom = document.querySelector(".base .number") + const rect = dom.getBoundingClientRect() + const top = rect.top + rect.height / 2 - 5 + const left = rect.left + rect.width / 2 - 5 + this.top = top + this.left = left + }, 10) + + setTimeout(() => { + this.top = null + this.left = null + this.hideIcon = false + }, 330) + + return + const button = document.querySelector(".button") + const container = document.querySelector(".container") + const containerWidth = container.offsetWidth + const buttonWidth = button.offsetWidth + const buttonLeft = (containerWidth - buttonWidth) / 2 + button.style.left = buttonLeft + "px" + }, + }, +} diff --git a/js/common.js b/js/common.js new file mode 100644 index 0000000..a8e2ada --- /dev/null +++ b/js/common.js @@ -0,0 +1,81 @@ +const baseURL = "https://offer.gter.net" +if (["localhost", "127.0.0.1"].includes(location.hostname)) { + axios.defaults.headers = { + "Authorization": "i0pmeq8tsx1orf5q8ywr5p0p4nr1j6b4", + } +} + +function $ajax(url) { + var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {} + url = url.indexOf("https://") > -1 ? url : baseURL + url + + data["authorization"] = "i0pmeq8tsx1orf5q8ywr5p0p4nr1j6b4" + + return new Promise(function (resolve, reject) { + console.log(axios) + axios + .post(url, data, { + emulateJSON: true, + withCredentials: true, + }) + .then(function (res) { + var data = typeof res.data == "string" ? JSON.parse(res.data) : res.data + if (data.code == 401) reject() + resolve(data) + }) + .catch(err => { + if (err.response.status == 401) + showWindow("login", "https://passport.gter.net/login/ajax", "get", -1, { + cover: true, + }) + }) + }) +} + +function $ajaxget(url, data) { + url = url.indexOf("https://") > -1 ? url : baseURL + url + url += objectToQueryString(data) + return new Promise(function (resolve, reject) { + axios + .get( + url, + {}, + { + emulateJSON: true, + withCredentials: true, + } + ) + .then(function (res) { + var data = typeof res.data == "string" ? JSON.parse(res.data) : res.data + if (data.code == 401) reject() + resolve(data) + }) + .catch(error => { + reject(error) + }) + }) +} + +function randomString(n) { + let str = "abcdefghijklmnopqrstuvwxyz9876543210" + let tmp = "", + i = 0, + l = str.length + for (i = 0; i < n; i++) { + tmp += str.charAt(Math.floor(Math.random() * l)) + } + return tmp +} + +function formatNumberWithSpaces(number) { + if (typeof number != "string") number = "" + return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") +} + +// 将一个JavaScript对象转换为路由参数的形式将键值对转换为key=value的形式 +function objectToQueryString(obj = {}) { + const queryString = Object.keys(obj) + .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(obj[key])) + .join("&") + return queryString ? "?" + queryString : "" +}