From e58b2d9483e3e047941d6128c2dbde07c800a1ec Mon Sep 17 00:00:00 2001 From: j10c Date: Tue, 16 May 2023 22:12:26 +0800 Subject: [PATCH 1/2] perf(applist): replace svg icon to iconfont chore(icon): add two icons: freeroom and schoolbus chore(assets): remove applist icon fix(score): remove applist icon dependency --- src/assets/icons/applist/canteenflow.svg | 1 - src/assets/icons/applist/electricity.svg | 1 - src/assets/icons/applist/exam.svg | 1 - src/assets/icons/applist/freeroom.svg | 1 - src/assets/icons/applist/lessonstable.svg | 1 - src/assets/icons/applist/library.svg | 1 - src/assets/icons/applist/schoolbus.svg | 1 - src/assets/icons/applist/schoolcard.svg | 1 - src/assets/icons/applist/score.svg | 1 - src/components/AppList/AppListItem/index.scss | 22 +++-- src/components/AppList/AppListItem/index.vue | 12 ++- src/components/AppList/index.scss | 8 +- src/components/AppList/index.vue | 18 +--- src/components/Button/index.scss | 2 +- src/pages/score/index.scss | 13 +-- src/pages/score/index.vue | 85 +++++++------------ src/style/icons.scss | 10 ++- 17 files changed, 77 insertions(+), 102 deletions(-) delete mode 100644 src/assets/icons/applist/canteenflow.svg delete mode 100644 src/assets/icons/applist/electricity.svg delete mode 100644 src/assets/icons/applist/exam.svg delete mode 100644 src/assets/icons/applist/freeroom.svg delete mode 100644 src/assets/icons/applist/lessonstable.svg delete mode 100644 src/assets/icons/applist/library.svg delete mode 100644 src/assets/icons/applist/schoolbus.svg delete mode 100644 src/assets/icons/applist/schoolcard.svg delete mode 100644 src/assets/icons/applist/score.svg diff --git a/src/assets/icons/applist/canteenflow.svg b/src/assets/icons/applist/canteenflow.svg deleted file mode 100644 index c9930ff..0000000 --- a/src/assets/icons/applist/canteenflow.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/assets/icons/applist/electricity.svg b/src/assets/icons/applist/electricity.svg deleted file mode 100644 index 272bcbd..0000000 --- a/src/assets/icons/applist/electricity.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/assets/icons/applist/exam.svg b/src/assets/icons/applist/exam.svg deleted file mode 100644 index 26f9a66..0000000 --- a/src/assets/icons/applist/exam.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/assets/icons/applist/freeroom.svg b/src/assets/icons/applist/freeroom.svg deleted file mode 100644 index 8a2b53c..0000000 --- a/src/assets/icons/applist/freeroom.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/assets/icons/applist/lessonstable.svg b/src/assets/icons/applist/lessonstable.svg deleted file mode 100644 index 338ff92..0000000 --- a/src/assets/icons/applist/lessonstable.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/assets/icons/applist/library.svg b/src/assets/icons/applist/library.svg deleted file mode 100644 index 02527a2..0000000 --- a/src/assets/icons/applist/library.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/assets/icons/applist/schoolbus.svg b/src/assets/icons/applist/schoolbus.svg deleted file mode 100644 index 24aff4c..0000000 --- a/src/assets/icons/applist/schoolbus.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/assets/icons/applist/schoolcard.svg b/src/assets/icons/applist/schoolcard.svg deleted file mode 100644 index ca49111..0000000 --- a/src/assets/icons/applist/schoolcard.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/assets/icons/applist/score.svg b/src/assets/icons/applist/score.svg deleted file mode 100644 index 01c91a1..0000000 --- a/src/assets/icons/applist/score.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/components/AppList/AppListItem/index.scss b/src/components/AppList/AppListItem/index.scss index 3115fa8..e929d46 100644 --- a/src/components/AppList/AppListItem/index.scss +++ b/src/components/AppList/AppListItem/index.scss @@ -5,23 +5,27 @@ display: flex; flex-direction: column; align-items: center; + gap: 4Px; - .applist-bg { + .icon-wrapper { border-radius: 0.5rem; - height: 120px; - width: 120px; + height: 60Px; + width: 60Px; + display: flex; + justify-content: center; + align-items: center; } - .label { - font-size: 0.75rem; + .iconfont { + color: var(--wjh-color-white); + font-size: 32Px; } - .applist-item-icon { - width: 100%; - height: 100%; + .label { + font-size: 0.75rem; } .disabled { background-color: var(--wjh-color-week); } -} \ No newline at end of file +} diff --git a/src/components/AppList/AppListItem/index.vue b/src/components/AppList/AppListItem/index.vue index 7a9ab8e..6d14047 100644 --- a/src/components/AppList/AppListItem/index.vue +++ b/src/components/AppList/AppListItem/index.vue @@ -1,11 +1,9 @@ @@ -17,14 +15,14 @@ import "./index.scss"; const props = defineProps<{ label: string, - iconUrl: string, + icon: string, url: string, bg: string, require: string, }>(); const { require: requireActive, bg = ref("green"), label, url } = toRefs(props); -let isDisabled = ref(false); +const isDisabled = ref(false); if (requireActive.value === "zf" && !serviceStore.user.isBindZF) isDisabled.value = true; if (requireActive.value === "library" && !serviceStore.user.isBindLibrary) diff --git a/src/components/AppList/index.scss b/src/components/AppList/index.scss index f906d59..d3d79e5 100644 --- a/src/components/AppList/index.scss +++ b/src/components/AppList/index.scss @@ -1,9 +1,13 @@ +$nav-bar-height: 49Px; +$nav-bar-padding-top: 8Px; +$applit-padding-top: .8rem; + .applist { display: grid; justify-content: center; grid-template-columns: repeat(4, 25%); width: 90%; margin: 0 auto; - padding-bottom: 4rem; - padding-top: 0.8rem; + padding-bottom: calc($nav-bar-height + $nav-bar-padding-top + $applit-padding-top); + padding-top: $applit-padding-top; } diff --git a/src/components/AppList/index.vue b/src/components/AppList/index.vue index c410593..59966f3 100644 --- a/src/components/AppList/index.vue +++ b/src/components/AppList/index.vue @@ -1,21 +1,14 @@ diff --git a/src/components/Button/index.scss b/src/components/Button/index.scss index 93ba46e..4ba1e7f 100644 --- a/src/components/Button/index.scss +++ b/src/components/Button/index.scss @@ -46,7 +46,7 @@ button:after { } .wjh-button-disable { - background-color: var(--wjh-color-gray) !important; + background-color: var(--wjh-color-week) !important; } .wjh-button-shape-rounded { diff --git a/src/pages/score/index.scss b/src/pages/score/index.scss index 7d66e55..cb56c57 100644 --- a/src/pages/score/index.scss +++ b/src/pages/score/index.scss @@ -46,14 +46,17 @@ .score-icon-wrapper { border-radius: 8Px; background-color: var(--wjh-color-primary); - width: 50Px; height: 50Px; + display: flex; + align-items: center; + justify-content: center; - .score-icon { - width: 100%; - height: 100%; + .iconfont { + font-size: 1.8rem; + color: var(--wjh-color-white); } + } .score-list-collapse { @@ -71,7 +74,7 @@ flex: auto; } - .score-list-collapse-extra { + .score-list-collapse-item-extra { flex: 0 0 10%; } diff --git a/src/pages/score/index.vue b/src/pages/score/index.vue index 9acb39e..1cbb1ca 100644 --- a/src/pages/score/index.vue +++ b/src/pages/score/index.vue @@ -11,7 +11,7 @@