From fc5707c285860391874771d1523518bf785902f6 Mon Sep 17 00:00:00 2001 From: Puqns67 Date: Mon, 18 Sep 2023 22:02:34 +0800 Subject: [PATCH] move some css to less, remove unneeded css from pages, remove page footer for some page Signed-off-by: Puqns67 --- .../fruitable/controller/action/Order.kt | 2 +- .../controller/action/editor/User.kt | 20 +- .../team8/fruitable/controller/page/Editor.kt | 6 +- src/main/resources/static/styles/cart.less | 0 src/main/resources/static/styles/clock.css | 18 +- src/main/resources/static/styles/edit.less | 154 +++++----- src/main/resources/static/styles/footer.css | 44 --- src/main/resources/static/styles/footer.less | 44 +++ src/main/resources/static/styles/header.css | 131 -------- src/main/resources/static/styles/header.less | 126 ++++++++ src/main/resources/static/styles/index.css | 287 +++++++++--------- src/main/resources/static/styles/item.less | 200 ++++++------ src/main/resources/static/styles/loading.css | 65 ---- src/main/resources/static/styles/loading.less | 65 ++++ src/main/resources/templates/account.mustache | 5 +- src/main/resources/templates/cart.mustache | 33 ++ src/main/resources/templates/editor.mustache | 9 +- .../resources/templates/editor/item.mustache | 6 +- .../resources/templates/editor/user.mustache | 6 +- src/main/resources/templates/error.mustache | 8 +- src/main/resources/templates/footer.mustache | 6 +- src/main/resources/templates/index.mustache | 7 +- src/main/resources/templates/item.mustache | 16 +- src/main/resources/templates/items.mustache | 4 +- src/main/resources/templates/login.mustache | 6 +- .../resources/templates/register.mustache | 6 +- 26 files changed, 647 insertions(+), 627 deletions(-) create mode 100644 src/main/resources/static/styles/cart.less delete mode 100644 src/main/resources/static/styles/footer.css create mode 100644 src/main/resources/static/styles/footer.less delete mode 100644 src/main/resources/static/styles/header.css create mode 100644 src/main/resources/static/styles/header.less delete mode 100644 src/main/resources/static/styles/loading.css create mode 100644 src/main/resources/static/styles/loading.less diff --git a/src/main/kotlin/team8/fruitable/controller/action/Order.kt b/src/main/kotlin/team8/fruitable/controller/action/Order.kt index ef3c5e0..741cb80 100644 --- a/src/main/kotlin/team8/fruitable/controller/action/Order.kt +++ b/src/main/kotlin/team8/fruitable/controller/action/Order.kt @@ -8,8 +8,8 @@ import org.springframework.web.bind.annotation.RequestParam import org.springframework.web.servlet.mvc.support.RedirectAttributes import team8.fruitable.controller.util.error import team8.fruitable.datebase.entity.Item -import team8.fruitable.datebase.entity.User import team8.fruitable.datebase.entity.Order +import team8.fruitable.datebase.entity.User import team8.fruitable.datebase.repository.* @Controller diff --git a/src/main/kotlin/team8/fruitable/controller/action/editor/User.kt b/src/main/kotlin/team8/fruitable/controller/action/editor/User.kt index c78d926..e6048c8 100644 --- a/src/main/kotlin/team8/fruitable/controller/action/editor/User.kt +++ b/src/main/kotlin/team8/fruitable/controller/action/editor/User.kt @@ -38,9 +38,9 @@ class User(private val accountRepository: AccountRepository) { @RequestParam("is_admin", required = false) isAdmin: Boolean?, @RequestParam("redirect", required = false) redirect: String? ): String { - if (!this.hasAdminPermissions(token)) return error(attributes, "创建用户", "账户无权限") - if (name.isBlank()) return error(attributes, "创建用户", "用户名不能为空", "/editor?use=user") - if (password.isBlank()) return error(attributes, "创建用户", "密码不能为空", "/editor?use=user") + if (!this.hasAdminPermissions(token)) return error(attributes, "创建账户", "账户无权限") + if (name.isBlank()) return error(attributes, "创建账户", "账户名不能为空", "/editor?use=user") + if (password.isBlank()) return error(attributes, "创建账户", "密码不能为空", "/editor?use=user") accountRepository.save(User(name, password, age, gender, phone, email, address, isAdmin)) redirect?.let { return "redirect:/${it}" } return "redirect:/editor?use=user" @@ -62,10 +62,10 @@ class User(private val accountRepository: AccountRepository) { @RequestParam("is_admin", required = false) isAdmin: Boolean?, @RequestParam("redirect", required = false) redirect: String? ): String { - val currentUser = this.getCurrentUser(token) ?: return error(attributes, "更新用户", "账户未登录") - if (!this.hasAdminPermissions(currentUser)) return error(attributes, "更新用户", "账户无权限") + val currentUser = this.getCurrentUser(token) ?: return error(attributes, "更新账户", "账户未登录") + if (!this.hasAdminPermissions(currentUser)) return error(attributes, "更新账户", "账户无权限") val user = accountRepository.findById(id).orElse(null) ?: return error( - attributes, "更新用户", "未找到此用户", "/editor?use=user" + attributes, "更新账户", "未找到此账户", "/editor?use=user" ) user.update(name, password, age, gender, phone, email, address, isAdmin) accountRepository.save(user) @@ -86,11 +86,11 @@ class User(private val accountRepository: AccountRepository) { @PathVariable("id") id: Long, @RequestParam("redirect", required = false) redirect: String? ): String { - val currentUser = this.getCurrentUser(token) ?: return error(attributes, "禁用用户", "账户未登录") - if (!this.hasAdminPermissions(currentUser)) return error(attributes, "禁用用户", "账户无权限") - if (currentUser.id == id) return error(attributes, "禁用用户", "无法删除当前使用的账户", "/editor?use=user") + val currentUser = this.getCurrentUser(token) ?: return error(attributes, "禁用账户", "账户未登录") + if (!this.hasAdminPermissions(currentUser)) return error(attributes, "禁用账户", "账户无权限") + if (currentUser.id == id) return error(attributes, "禁用账户", "无法删除当前使用的账户", "/editor?use=user") val user = accountRepository.findById(id).orElse(null) ?: return error( - attributes, "禁用用户", "未找到此用户", "/editor?use=user" + attributes, "禁用账户", "未找到此账户", "/editor?use=user" ) user.revoke() accountRepository.delete(user) diff --git a/src/main/kotlin/team8/fruitable/controller/page/Editor.kt b/src/main/kotlin/team8/fruitable/controller/page/Editor.kt index 4ed684f..77e48a6 100644 --- a/src/main/kotlin/team8/fruitable/controller/page/Editor.kt +++ b/src/main/kotlin/team8/fruitable/controller/page/Editor.kt @@ -31,10 +31,6 @@ class Editor( return user?.isAdmin ?: false } - private fun hasAdminPermissions(token: String?): Boolean { - return this.hasAdminPermissions(this.getCurrentUser(token)) - } - private final val editorTabs: Array> = arrayOf( "user" to "用户", "item" to "商品" @@ -109,7 +105,7 @@ class Editor( when (action) { "creating" -> model["isCreating"] = true "updating" -> model["isUpdating"] = true - "deleting" -> model["isDeleting"] = true + "revoking" -> model["isRevoking"] = true else -> model["isNothing"] = true } if (action == "updating" || action == "deleting") { diff --git a/src/main/resources/static/styles/cart.less b/src/main/resources/static/styles/cart.less new file mode 100644 index 0000000..e69de29 diff --git a/src/main/resources/static/styles/clock.css b/src/main/resources/static/styles/clock.css index 41d62a5..a05780a 100644 --- a/src/main/resources/static/styles/clock.css +++ b/src/main/resources/static/styles/clock.css @@ -1,14 +1,14 @@ @font-face { - font-family: "LcdD"; - src: url("../fonts/LcdD.ttf"); + font-family: "LcdD"; + src: url("../fonts/LcdD.ttf"); } .CLOCK { - width: 140px; - color: rgb(0, 255, 90); - text-align: center; - font-family: "LcdD", serif; - border: 3px solid black; - border-radius: 5px; - background-color: rgba(0, 0, 0, 0.5); + width: 140px; + color: rgb(0, 255, 90); + text-align: center; + font-family: "LcdD", serif; + border: 3px solid black; + border-radius: 5px; + background-color: rgba(0, 0, 0, 0.5); } diff --git a/src/main/resources/static/styles/edit.less b/src/main/resources/static/styles/edit.less index a81d01a..6f354bd 100644 --- a/src/main/resources/static/styles/edit.less +++ b/src/main/resources/static/styles/edit.less @@ -1,101 +1,101 @@ @font-face { - font-family: "Normal"; - src: url("../fonts/华文圆体-Regular.ttf") format("ttf"); + font-family: "Normal"; + src: url("../fonts/华文圆体-Regular.ttf") format("ttf"); } body { - display: flex; - margin: auto; - flex-direction: column; - align-items: center; + display: flex; + margin: auto; + flex-direction: column; + align-items: center; } div { - display: flex; + display: flex; } #Contents { - flex-direction: column; - width: 100%; - height: 500px; + flex-direction: column; + width: 100%; + height: 500px; - > .Title { - justify-content: space-between; - margin: 5px; - padding: 5px; - color: wheat; - background-color: rgba(0, 60, 130, 0.8); - border: 3px solid rgba(0, 120, 255, 0.8); - border-spacing: 0; - border-radius: 15px; - } + > .Title { + justify-content: space-between; + margin: 5px; + padding: 5px; + color: wheat; + background-color: rgba(0, 60, 130, 0.8); + border: 3px solid rgba(0, 120, 255, 0.8); + border-spacing: 0; + border-radius: 15px; + } - > .Editors { - flex-direction: row; - justify-content: space-between; - width: auto; + > .Editors { + flex-direction: row; + justify-content: space-between; + width: auto; - > * { - justify-content: center; - margin: 5px; - padding: 5px; - color: wheat; - background-color: rgba(0, 60, 130, 0.8); - border: 3px solid rgba(0, 120, 255, 0.8); - border-spacing: 0; - border-radius: 15px; - font-family: "Normal", system-ui; - } + > * { + justify-content: center; + margin: 5px; + padding: 5px; + color: wheat; + background-color: rgba(0, 60, 130, 0.8); + border: 3px solid rgba(0, 120, 255, 0.8); + border-spacing: 0; + border-radius: 15px; + font-family: "Normal", system-ui; + } - > .ResultPanel { - flex: 2 auto; - align-items: start; + > .ResultPanel { + flex: 2 auto; + align-items: start; - > .Result { - flex-grow: 1; + > .Result { + flex-grow: 1; - > thead { - background-color: #044488; - } + > thead { + background-color: #044488; + } - > tbody { - background-color: #008080; - } + > tbody { + background-color: #008080; + } - td { - border: 1px solid cornflowerblue; - } - } - } + td { + border: 1px solid cornflowerblue; + } + } + } - > .EditPanel { - flex: 1 auto; - } - } + > .EditPanel { + flex: 1 auto; + } + } - > .Pages { - margin: 5px; - padding: 5px; - color: wheat; - background-color: rgba(0, 60, 130, 0.8); - border: 3px solid rgba(0, 120, 255, 0.8); - border-spacing: 0; - border-radius: 15px; + > .Pages { + margin: 5px; + padding: 5px; + color: wheat; + background-color: rgba(0, 60, 130, 0.8); + border: 3px solid rgba(0, 120, 255, 0.8); + border-spacing: 0; + border-radius: 15px; - > * { - color: wheat; - margin-right: 3px; - border: 3px solid skyblue; - border-radius: 10px; - background-color: cadetblue; - } + > * { + color: wheat; + margin-right: 3px; + border: 3px solid skyblue; + border-radius: 10px; + background-color: cadetblue; + } - > *:last-child { - margin-right: inherit; - } + > *:last-child { + margin-right: inherit; + } - > span { - color: green; - } - } + > span { + color: green; + } + } } diff --git a/src/main/resources/static/styles/footer.css b/src/main/resources/static/styles/footer.css deleted file mode 100644 index c9379fb..0000000 --- a/src/main/resources/static/styles/footer.css +++ /dev/null @@ -1,44 +0,0 @@ -#Footer { - display: flex; - flex-direction: row; - height: 150px; - width: 100%; - border-top: 2px solid #3bfeff; - background-image: linear-gradient(#489dff, #355ae8, #702CF5); -} - -#Footer[pined] { - position: fixed; - bottom: 0px; -} - -#Footer div { - display: flex; -} - -#Footer .Infos { - flex: 1 0; - flex-direction: column; - justify-content: space-evenly; - align-items: flex-start; - padding: 10px 50px 10px 50px; -} - -#Footer .Infos .Icon { - height: 80px; - width: 80px; -} - -#Footer .Contents { - flex-direction: column; - padding-left: 15px; - font-size: 8px; -} - -#Footer .Links { - flex: 1 0; - flex-direction: column; - justify-content: space-evenly; - align-items: flex-end; - padding: 10px 50px 10px 50px; -} diff --git a/src/main/resources/static/styles/footer.less b/src/main/resources/static/styles/footer.less new file mode 100644 index 0000000..9e2f2d2 --- /dev/null +++ b/src/main/resources/static/styles/footer.less @@ -0,0 +1,44 @@ +#Footer { + display: flex; + flex-direction: row; + height: 150px; + width: 100%; + border-top: 2px solid #3bfeff; + background-image: linear-gradient(#489dff, #355ae8, #702CF5); + + &[pined] { + position: fixed; + bottom: 0; + } + + div { + display: flex; + } + + .Infos { + flex: 1 0; + flex-direction: column; + justify-content: space-evenly; + align-items: flex-start; + padding: 10px 50px 10px 50px; + + .Icon { + height: 80px; + width: 80px; + } + } + + .Contents { + flex-direction: column; + padding-left: 15px; + font-size: 8px; + } + + .Links { + flex: 1 0; + flex-direction: column; + justify-content: space-evenly; + align-items: flex-end; + padding: 10px 50px 10px 50px; + } +} diff --git a/src/main/resources/static/styles/header.css b/src/main/resources/static/styles/header.css deleted file mode 100644 index f611d8f..0000000 --- a/src/main/resources/static/styles/header.css +++ /dev/null @@ -1,131 +0,0 @@ -@font-face { - font-family: "SmileySans"; - src: url("../fonts/SmileySans-Oblique.otf.woff2") format("woff2"); -} - -@keyframes BackgroundBlur { - from { - border-radius: 0px; - background-color: rgba(0, 0, 0, 0); - } - - to { - border-radius: 8px; - background-color: rgba(0, 0, 0, 0.25); - } -} - -@keyframes BackgroundUnblur { - from { - border-radius: 8px; - background-color: rgba(0, 0, 0, 0.25); - } - - to { - border-radius: 0px; - background-color: rgba(0, 0, 0, 0); - } -} - -body[headerPined] { - padding-top: 58px; -} - -#Header { - display: flex; - height: 56px; - width: 100%; - flex-direction: row; - border-bottom: 2px solid #3bfeff; - background-image: linear-gradient(#355ae8, #489dff); -} - -#Header[pined] { - position: fixed; - top: 0px; -} - -#Header .List { - flex: 0 0 auto; - padding-left: 5px; - padding-right: 5px; - - display: flex; - justify-content: space-around; - align-items: center; - color: wheat; -} - -#Header .List .Text { - padding: 3px; - animation-duration: 0.3s; -} - -#Header .List .Text[blured] { - border-radius: 8px; - background-color: rgba(0, 0, 0, 0.25); -} - -#Header .Blank { - flex: 1 0 auto; -} - -#Header .Title { - padding-left: 15px; - padding-right: 15px; - font-size: 32px; - font-family: "SmileySans"; -} - -#Header .Link .Text { - font-size: 22px; -} - -#Header .Link[this] { - background-color: rgba(0, 0, 0, 0.1); -} - -#Header .Button .Text { - font-size: 18px; -} - -#Header .SearchBar { - flex-grow: 1; -} - -#Header .SearchBar .InputBar { - flex-grow: 1; - - height: 30px; - border: 2px solid #3bfeff; - border-radius: 15px; - background-image: linear-gradient(#489dff, #355ae8); - padding-left: 10px; - padding-right: 10px; -} - -#Header .Clock { - font-size: 16px; -} - -#Header .PinHeader .PIN { - padding: 10px; - height: 25px; - width: 25px; -} - -#Header .PinHeader .PIN { - animation-duration: 0.3s; - animation-name: BackgroundUnblur; - - border-radius: 0px; - background-color: rgba(0, 0, 0, 0); -} - -#Header .PinHeader .PIN[checked] { - animation-duration: 0.3s; - animation-name: BackgroundBlur; - - border-radius: 8px; - background-color: rgba(0, 0, 0, 0.25); -} diff --git a/src/main/resources/static/styles/header.less b/src/main/resources/static/styles/header.less new file mode 100644 index 0000000..74bdfc7 --- /dev/null +++ b/src/main/resources/static/styles/header.less @@ -0,0 +1,126 @@ +@font-face { + font-family: "SmileySans"; + src: url("../fonts/SmileySans-Oblique.otf.woff2") format("woff2"); +} + +@keyframes BackgroundBlur { + from { + border-radius: 0; + background-color: rgba(0, 0, 0, 0); + } + to { + border-radius: 8px; + background-color: rgba(0, 0, 0, 0.25); + } +} + +@keyframes BackgroundUnBlur { + from { + border-radius: 8px; + background-color: rgba(0, 0, 0, 0.25); + } + to { + border-radius: 0; + background-color: rgba(0, 0, 0, 0); + } +} + +body[headerPined] { + padding-top: 58px; +} + +#Header { + display: flex; + height: 56px; + width: 100%; + flex-direction: row; + border-bottom: 2px solid #3bfeff; + background-image: linear-gradient(#355ae8, #489dff); + + &[pined] { + position: fixed; + top: 0; + } + + > .List { + flex: 0 0 auto; + padding-left: 5px; + padding-right: 5px; + + display: flex; + justify-content: space-around; + align-items: center; + color: wheat; + + > .Text { + padding: 3px; + animation-duration: 0.3s; + + &[blured] { + border-radius: 8px; + background-color: rgba(0, 0, 0, 0.25); + } + } + } + + > .Blank { + flex: 1 0 auto; + } + + > .Title { + padding-left: 15px; + padding-right: 15px; + font-size: 32px; + font-family: "SmileySans", sans-serif; + } + + > .Link { + &[this] { + background-color: rgba(0, 0, 0, 0.1); + } + + > .Text { + font-size: 22px; + } + } + + > .Button > .Text { + font-size: 18px; + } + + > .SearchBar { + flex-grow: 1; + + .InputBar { + flex-grow: 1; + + height: 30px; + border: 2px solid #3bfeff; + border-radius: 15px; + background-image: linear-gradient(#489dff, #355ae8); + padding-left: 10px; + padding-right: 10px; + } + } + + > .Clock { + font-size: 16px; + } + + .PinHeader .PIN { + padding: 10px; + height: 25px; + width: 25px; + + animation-duration: 0.3s; + animation-name: BackgroundUnBlur; + border-radius: 0; + background-color: rgba(0, 0, 0, 0); + + &[checked] { + animation-name: BackgroundBlur; + border-radius: 8px; + background-color: rgba(0, 0, 0, 0.25); + } + } +} diff --git a/src/main/resources/static/styles/index.css b/src/main/resources/static/styles/index.css index d5670b2..82773f1 100644 --- a/src/main/resources/static/styles/index.css +++ b/src/main/resources/static/styles/index.css @@ -1,267 +1,260 @@ @font-face { - font-family: "Normal"; - src: url("../fonts/华文圆体-Regular.ttf") format("ttf"); + font-family: "Normal"; + src: url("../fonts/华文圆体-Regular.ttf") format("ttf"); } body { - display: flex; - margin: auto; - flex-direction: column; - align-items: center; + display: flex; + margin: auto; + flex-direction: column; + align-items: center; } div { - display: flex; + display: flex; } #Contents { - flex-direction: column; - width: 100%; + flex-direction: column; + width: 100%; } .ContentHeader { - height: 330px; - flex-direction: row; + height: 330px; + flex-direction: row; } .ContentHeader * { - margin: 5px; + margin: 5px; } .ContentHeader .RollingBanner { - flex: 1 1; - flex-direction: column; - background-color: rgba(0, 60, 130, 0.8); - border-radius: 10px; + flex: 1 1; + flex-direction: column; + background-color: rgba(0, 60, 130, 0.8); + border-radius: 10px; } .ContentHeader .RollingBanner .BannerImage { - flex: 4 1; - max-width: 100%; - max-height: 260px; - justify-content: center; + flex: 4 1; + max-width: 100%; + max-height: 260px; + justify-content: center; } .ContentHeader .RollingBanner .BannerImage img { - max-width: 100%; - max-height: 100%; - object-fit: cover; - border-radius: 10px; - height: 100%; + max-width: 100%; + max-height: 100%; + object-fit: cover; + border-radius: 10px; + height: 100%; } .ContentHeader .RollingBanner .Infos { - flex: 1 1; - flex-direction: row; - align-items: center; - justify-content: center; + flex: 1 1; + flex-direction: row; + align-items: center; + justify-content: center; } .ContentHeader .RollingBanner .Infos .Title { - flex: 2 1; - font-family: "Normal"; - color: rgba(21, 255, 172, 0.8); - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; + flex: 2 1; + font-family: "Normal", system-ui; + color: rgba(21, 255, 172, 0.8); + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; } .ContentHeader .RollingBanner .Infos .Selecter { - border: 3px solid rgba(0, 120, 255, 0.8); - border-radius: 8px; - flex-direction: row; + border: 3px solid rgba(0, 120, 255, 0.8); + border-radius: 8px; + flex-direction: row; } .ContentHeader .RollingBanner .Infos .Selecter .Button { - flex: 1 1; - width: 22px; - background-color: rgba(0, 60, 130, 0.8); - background: unset; - border: unset; - font-family: "Normal"; - color: rgba(0, 225, 145, 0.8); + flex: 1 1; + width: 22px; + background: rgba(0, 60, 130, 0.8); + border: unset; + font-family: "Normal", system-ui; + color: rgba(0, 225, 145, 0.8); } .ContentHeader .RollingBanner .Infos .Selecter .Button[selected] { - background-color: rgba(0, 84, 181, 0.8); + background-color: rgba(0, 84, 181, 0.8); } .ContentHeader .RecommendItems { - flex: 2 1; + flex: 2 1; - flex-wrap: wrap; - overflow: hidden; - background-color: rgba(0, 60, 130, 0.8); - border-radius: 15px; - justify-content: space-around; + flex-wrap: wrap; + overflow: hidden; + background-color: rgba(0, 60, 130, 0.8); + border-radius: 15px; + justify-content: space-around; } .ContentHeader .RecommendItems .Item { - margin: 5px; - width: 120px; - height: 150px; - border-radius: 15px; - flex-direction: column; - background-color: rgba(0, 84, 181, 0.8); + margin: 5px; + width: 120px; + height: 150px; + border-radius: 15px; + flex-direction: column; + background-color: rgba(0, 84, 181, 0.8); } .ContentHeader .RecommendItems .Item .Picture { - flex: 3 1; - align-items: center; - justify-content: center; - padding: 5px; - max-width: 100%; - height: 100px; + flex: 3 1; + align-items: center; + justify-content: center; + padding: 5px; + max-width: 100%; + height: 100px; } .ContentHeader .RecommendItems .Item .Picture img { - max-width: 100%; - max-height: 100%; - object-fit: cover; - border-radius: 10px; - height: 100%; + max-width: 100%; + max-height: 100%; + object-fit: cover; + border-radius: 10px; + height: 100%; } .ContentHeader .RecommendItems .Item .Title { - flex: 1 1; - flex-direction: column; - align-items: start; - justify-content: center; - font-family: "Normal"; - text-decoration: none; - color: rgba(21, 255, 172, 0.8); - font-size: 12px; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; + flex: 1 1; + flex-direction: column; + align-items: start; + justify-content: center; + font-family: "Normal", system-ui; + text-decoration: none; + color: rgba(21, 255, 172, 0.8); + font-size: 12px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; } .Items { - flex-direction: column; + flex-direction: column; } .Items .ItemSection { - flex-direction: row; - width: 100%; + flex-direction: row; + width: 100%; - justify-content: center; - align-items: center; + justify-content: center; + align-items: center; } .Items .ItemSection .Item { - flex: 1 0; - flex-direction: row; - margin: 5px; - background-color: rgba(0, 60, 130, 0.8); - border-radius: 15px; - height: 110px; + flex: 1 0; + flex-direction: row; + margin: 5px; + background-color: rgba(0, 60, 130, 0.8); + border-radius: 15px; + height: 110px; } .Items .ItemSection .Item .Picture { - height: 110px; - width: 110px; + height: 110px; + width: 110px; } .Items .ItemSection .Item .Picture img { - padding: 5px; - border-radius: 15px; + padding: 5px; + border-radius: 15px; } .Items .ItemSection .Item .Descriptions { - flex: 1 0; - flex-direction: column; - padding: 5px; + flex: 1 0; + flex-direction: column; + padding: 5px; } .Items .ItemSection .Item .Descriptions span { - font-family: "Normal"; + font-family: "Normal", system-ui; } .Items .ItemSection .Item .Descriptions .TitlePrices { - justify-content: space-between; - height: 30px; + justify-content: space-between; + height: 30px; } .Items .ItemSection .Item .Descriptions .TitlePrices .Title { - color: rgb(220, 220, 255); - font-size: 20px; - overflow: hidden; - text-overflow: ellipsis; + color: rgb(220, 220, 255); + font-size: 20px; + overflow: hidden; + text-overflow: ellipsis; } .Items .ItemSection .Item .Descriptions .TitlePrices .Prices { - align-items: center; + align-items: center; } .Items .ItemSection .Item .Descriptions .TitlePrices .Prices .Price { - color: red; - font-size: 18px; - font-weight: bold; + color: red; + font-size: 18px; + font-weight: bold; } -.Items - .ItemSection - .Item - .Descriptions - .TitlePrices - .Prices - .Price[has_vip_price] { - color: gray; - font-weight: lighter; - font-style: italic; - text-decoration: line-through; +.Items .ItemSection .Item .Descriptions .TitlePrices .Prices .Price[has_vip_price] { + color: grey; + font-weight: lighter; + font-style: italic; + text-decoration: line-through; } .Items .ItemSection .Item .Descriptions .TitlePrices .Prices .VipPrice { - color: gold; - font-size: 18px; - font-weight: bold; + color: gold; + font-size: 18px; + font-weight: bold; } .Items .ItemSection .Item .Descriptions .Description { - color: rgb(175, 175, 255); - font-size: 16px; - overflow: hidden; - text-overflow: ellipsis; + color: rgb(175, 175, 255); + font-size: 16px; + overflow: hidden; + text-overflow: ellipsis; } .Items .ItemSection .Item .Buttons { - padding-left: 10px; - padding-right: 10px; - flex-direction: column; - justify-content: space-around; + padding-left: 10px; + padding-right: 10px; + flex-direction: column; + justify-content: space-around; } .Items .ItemSection .Item .Buttons .Button { - width: 40px; - height: 40px; - background-repeat: no-repeat; - background-color: rgba(40, 150, 40, 0.2); - border: 1px solid rgba(100, 255, 100, 0.8); - border-radius: 15px; + width: 40px; + height: 40px; + background-repeat: no-repeat; + background-color: rgba(40, 150, 40, 0.2); + border: 1px solid rgba(100, 255, 100, 0.8); + border-radius: 15px; } .Items .ItemSection .Item .Buttons .AddToCart { - background-image: url("../images/add_to_cart.svg"); + background-image: url("../images/add_to_cart.svg"); } .Items .ItemSection .Item .Buttons .PlaceAnOrder { - background-image: url("../images/place_an_order.svg"); + background-image: url("../images/place_an_order.svg"); } .ContentFooter { - height: 48px; - margin: 5px; - justify-content: center; - align-items: center; + height: 48px; + margin: 5px; + justify-content: center; + align-items: center; } .ContentFooter .Info { - display: none; + display: none; } @media (min-width: 1280px) { - #Contents { - width: 1280px; - } + #Contents { + width: 1280px; + } } diff --git a/src/main/resources/static/styles/item.less b/src/main/resources/static/styles/item.less index 9724623..c32e0cd 100644 --- a/src/main/resources/static/styles/item.less +++ b/src/main/resources/static/styles/item.less @@ -1,125 +1,139 @@ @font-face { - font-family: "Normal"; - src: url("../fonts/华文圆体-Regular.ttf") format("ttf"); + font-family: "Normal"; + src: url("../fonts/华文圆体-Regular.ttf") format("ttf"); } body { - display: flex; - margin: auto; - flex-direction: column; - align-items: center; + display: flex; + margin: auto; + flex-direction: column; + align-items: center; } div { - display: flex; + display: flex; } #Contents { - flex-direction: column; - width: 100%; + flex-direction: column; + width: 100%; } .Item { - display: flex; - flex-direction: row; - width: auto; - border-radius: 15px; - margin: 5px; - padding: 15px; - background-color: rgba(0, 60, 130, 0.8); - border: 3px solid rgba(0, 120, 255, 0.8); + display: flex; + flex-direction: row; + width: auto; + border-radius: 15px; + margin: 5px; + padding: 15px; + background-color: rgba(0, 60, 130, 0.8); + border: 3px solid rgba(0, 120, 255, 0.8); - > .Picture { - flex: 1 0; - justify-content: center; + > .Picture { + flex: 1 0; + justify-content: center; - > img { - width: 400px; - height: 400px; - } - } + > img { + width: 400px; + height: 400px; + } + } - > .Infos { - flex: 1 0; - margin: 10px; - flex-direction: column; - color: wheat; + > .Infos { + flex: 1 0; + margin: 10px; + flex-direction: column; + color: wheat; - > * { - margin: 10px 0; - } + > * { + margin: 10px 0; + } - > .Title { - font-size: 30px; - font-weight: bold; - font-family: "Normal", system-ui; - } + > .Title { + font-size: 30px; + font-weight: bold; + font-family: "Normal", system-ui; + } - .Description { - font-size: 20px; - font-family: "Normal", system-ui; - } + .Description { + font-size: 20px; + font-family: "Normal", system-ui; + } - .Price { - align-items: baseline; - font-family: "Normal", system-ui; - color: red; - font-size: 20px; - font-weight: bold; - } + .Price { + align-items: baseline; + font-family: "Normal", system-ui; + color: red; + font-size: 20px; + font-weight: bold; + } - > .Options { - flex-direction: column; + > .Options { + flex-direction: column; - > .Option { - flex-direction: row; - margin: 5px 0; - border: 1px solid rgba(0, 120, 255, 0.8); - border-radius: 5px; + > .Option { + flex-direction: row; + margin: 5px 0; + border: 1px solid rgba(0, 120, 255, 0.8); + border-radius: 5px; - > .Title { - font-weight: bold; - padding: 0 10px; - border-radius: 5px 0 0 5px; - background: green; - font-size: 20px; - } + > .Title { + font-weight: bold; + padding: 0 10px; + border-radius: 5px 0 0 5px; + background: green; + font-size: 20px; + } - > .Contents { - flex-wrap: wrap; - align-items: stretch; + > .Contents { + flex-wrap: wrap; + align-items: stretch; - > .Option { - font-size: 18px; - padding: 0 5px; - align-items: center; - background-color: #355ae8; - } + > .Option { + font-size: 18px; + padding: 0 5px; + align-items: center; + background-color: #355ae8; + } - .Option[selected] { - font-weight: bold; - background-color: #489dff; - } - } - } - } + .Option[selected] { + font-weight: bold; + background-color: #489dff; + } + } + } + } - > .Buttons { - justify-content: space-evenly; - text-align: center; + > .Buttons { + justify-content: space-evenly; + text-align: center; - > .Button { - width: 90px; - padding: 10px 30px; - border-radius: 15px; - background-color: darkgreen; - } - } - } + > .Button { + width: 90px; + padding: 10px 30px; + border-radius: 15px; + background-color: darkgreen; + } + } + + &[revoked] { + > .Price { + color: gray; + } + + > .Options { + display: none; + } + + > .Buttons > .Button { + background-color: gray; + } + } + } } @media (min-width: 1280px) { - #Contents { - width: 1280px; - } + #Contents { + width: 1280px; + } } diff --git a/src/main/resources/static/styles/loading.css b/src/main/resources/static/styles/loading.css deleted file mode 100644 index d45bef8..0000000 --- a/src/main/resources/static/styles/loading.css +++ /dev/null @@ -1,65 +0,0 @@ -@keyframes loading-zoom-in { - 0% { - transform: scale(0); - } - 100% { - transform: scale(1); - } -} - -@keyframes loading-move { - 0% { - transform: translate(0, 0); - } - 100% { - transform: translate(24px, 0); - } -} - -@keyframes loading-zoom-out { - 0% { - transform: scale(1); - } - 100% { - transform: scale(0); - } -} - -.Loading { - display: inline-block; - position: relative; - width: 62px; - height: 15px; -} - -.Loading div { - position: absolute; - top: 1px; - width: 13px; - height: 13px; - border-radius: 50%; - background: #3bfeff; - border: 1px solid black; - animation-duration: 0.6s; - animation-iteration-count: infinite; -} - -.Loading div:nth-child(1) { - left: 0px; - animation-name: loading-zoom-in; -} - -.Loading div:nth-child(2) { - left: 0px; - animation-name: loading-move; -} - -.Loading div:nth-child(3) { - left: 24px; - animation-name: loading-move; -} - -.Loading div:nth-child(4) { - left: 48px; - animation-name: loading-zoom-out; -} diff --git a/src/main/resources/static/styles/loading.less b/src/main/resources/static/styles/loading.less new file mode 100644 index 0000000..e5e52ef --- /dev/null +++ b/src/main/resources/static/styles/loading.less @@ -0,0 +1,65 @@ +@keyframes loading-zoom-in { + 0% { + transform: scale(0); + } + 100% { + transform: scale(1); + } +} + +@keyframes loading-move { + 0% { + transform: translate(0, 0); + } + 100% { + transform: translate(24px, 0); + } +} + +@keyframes loading-zoom-out { + 0% { + transform: scale(1); + } + 100% { + transform: scale(0); + } +} + +.Loading { + display: inline-block; + position: relative; + width: 62px; + height: 15px; + + > div { + position: absolute; + top: 1px; + width: 13px; + height: 13px; + border-radius: 50%; + background: #3bfeff; + border: 1px solid black; + animation-duration: 0.6s; + animation-iteration-count: infinite; + + &:nth-child(1) { + left: 0; + animation-name: loading-zoom-in; + } + + &:nth-child(2) { + left: 0; + animation-name: loading-move; + } + + &:nth-child(3) { + left: 24px; + animation-name: loading-move; + } + + &:nth-child(4) { + left: 48px; + animation-name: loading-zoom-out; + } + } +} diff --git a/src/main/resources/templates/account.mustache b/src/main/resources/templates/account.mustache index b7c59a4..0adbccb 100644 --- a/src/main/resources/templates/account.mustache +++ b/src/main/resources/templates/account.mustache @@ -8,10 +8,9 @@ - + - @@ -97,7 +96,5 @@ -{{>footer}} - diff --git a/src/main/resources/templates/cart.mustache b/src/main/resources/templates/cart.mustache index e69de29..4c51639 100644 --- a/src/main/resources/templates/cart.mustache +++ b/src/main/resources/templates/cart.mustache @@ -0,0 +1,33 @@ + + + + + 编辑 - 在线果蔬商城 + + + + + + + + + + + + + + + + + + + + +{{>header}} + + +
+
+ + + diff --git a/src/main/resources/templates/editor.mustache b/src/main/resources/templates/editor.mustache index 111084a..9872ff5 100644 --- a/src/main/resources/templates/editor.mustache +++ b/src/main/resources/templates/editor.mustache @@ -9,10 +9,9 @@ - + - @@ -33,9 +32,9 @@ }); }); - Array.from(document.getElementsByClassName("remove")).forEach((v) => { + Array.from(document.getElementsByClassName("revoke")).forEach((v) => { v.addEventListener("click", function () { - window.location.replace(`/editor?use={{using}}&action=deleting&target=${getID(this)}`); + window.location.replace(`/editor?use={{using}}&action=revoking&target=${getID(this)}`); }); }); }); @@ -97,7 +96,5 @@ -{{>footer}} - diff --git a/src/main/resources/templates/editor/item.mustache b/src/main/resources/templates/editor/item.mustache index f0b038f..6cd53f9 100644 --- a/src/main/resources/templates/editor/item.mustache +++ b/src/main/resources/templates/editor/item.mustache @@ -22,7 +22,7 @@ {{tagPretty}} - + {{/data}} @@ -123,10 +123,10 @@ {{/isUpdating}} - {{#isDeleting}} + {{#isRevoking}}

确定要删除商品 {{target.name}} 吗？

- {{/isDeleting}} + {{/isRevoking}} diff --git a/src/main/resources/templates/editor/user.mustache b/src/main/resources/templates/editor/user.mustache index d929ac3..9b0ac91 100644 --- a/src/main/resources/templates/editor/user.mustache +++ b/src/main/resources/templates/editor/user.mustache @@ -30,7 +30,7 @@ {{#isAdmin}}是{{/isAdmin}}{{^isAdmin}}否{{/isAdmin}} - + {{/data}} @@ -184,10 +184,10 @@ {{/isUpdating}} - {{#isDeleting}} + {{#isRevoking}}

确定要删除用户 {{target.name}} 吗？

- {{/isDeleting}} + {{/isRevoking}} diff --git a/src/main/resources/templates/error.mustache b/src/main/resources/templates/error.mustache index 12b3865..3700ab1 100644 --- a/src/main/resources/templates/error.mustache +++ b/src/main/resources/templates/error.mustache @@ -11,11 +11,11 @@ - + - - + + @@ -40,7 +40,5 @@ {{/redirect}} -{{>footer}} - diff --git a/src/main/resources/templates/footer.mustache b/src/main/resources/templates/footer.mustache index dadf82b..e5fcd02 100644 --- a/src/main/resources/templates/footer.mustache +++ b/src/main/resources/templates/footer.mustache @@ -8,8 +8,7 @@
-
-
+ Git Repo
@@ -17,5 +16,6 @@
- + +
diff --git a/src/main/resources/templates/index.mustache b/src/main/resources/templates/index.mustache index f3b6772..d859381 100644 --- a/src/main/resources/templates/index.mustache +++ b/src/main/resources/templates/index.mustache @@ -11,14 +11,15 @@ - + - - + + + diff --git a/src/main/resources/templates/item.mustache b/src/main/resources/templates/item.mustache index 4a8e253..7a88512 100644 --- a/src/main/resources/templates/item.mustache +++ b/src/main/resources/templates/item.mustache @@ -10,10 +10,9 @@ - + - @@ -28,13 +27,20 @@
-
+
商品图片
{{item.name}} -
{{item.price}}
+
+ {{#item.isRevoked}} + 暂无报价 + {{/item.isRevoked}} + {{^item.isRevoked}} + {{item.price}} + {{/item.isRevoked}} +
{{#item.description}} {{item.description}} {{/item.description}} @@ -66,7 +72,5 @@
-{{>footer}} - diff --git a/src/main/resources/templates/items.mustache b/src/main/resources/templates/items.mustache index 8d42958..4db3f1f 100644 --- a/src/main/resources/templates/items.mustache +++ b/src/main/resources/templates/items.mustache @@ -10,10 +10,10 @@ - + - + diff --git a/src/main/resources/templates/login.mustache b/src/main/resources/templates/login.mustache index 0e174c2..41ed1e8 100644 --- a/src/main/resources/templates/login.mustache +++ b/src/main/resources/templates/login.mustache @@ -11,11 +11,9 @@ - + - - @@ -57,7 +55,5 @@
-{{>footer}} - diff --git a/src/main/resources/templates/register.mustache b/src/main/resources/templates/register.mustache index e6644db..f532205 100644 --- a/src/main/resources/templates/register.mustache +++ b/src/main/resources/templates/register.mustache @@ -11,11 +11,9 @@ - + - - @@ -93,7 +91,5 @@ -{{>footer}} -