From aa49580f773c5420d97519dbed643e1ed70dfa97 Mon Sep 17 00:00:00 2001 From: lixinyang123 Date: Mon, 25 Dec 2023 01:55:51 +0800 Subject: [PATCH 1/8] init --- MixApp.Shared/MixApp.Shared.csproj | 4 +- MixApp.Shared/Shared/MainLayout.razor | 45 +++-------------------- MixApp.Shared/Shared/MainLayout.razor.css | 33 +++++++++++++++++ MixApp.Shared/wwwroot/js/index.js | 2 +- 4 files changed, 42 insertions(+), 42 deletions(-) create mode 100644 MixApp.Shared/Shared/MainLayout.razor.css diff --git a/MixApp.Shared/MixApp.Shared.csproj b/MixApp.Shared/MixApp.Shared.csproj index a4429bf..48f1042 100644 --- a/MixApp.Shared/MixApp.Shared.csproj +++ b/MixApp.Shared/MixApp.Shared.csproj @@ -15,8 +15,8 @@ - - + + diff --git a/MixApp.Shared/Shared/MainLayout.razor b/MixApp.Shared/Shared/MainLayout.razor index 2d0b665..8c51ed9 100644 --- a/MixApp.Shared/Shared/MainLayout.razor +++ b/MixApp.Shared/Shared/MainLayout.razor @@ -11,10 +11,12 @@
- - @Body - +
+ + @Body + +
@@ -23,38 +25,3 @@ - - \ No newline at end of file diff --git a/MixApp.Shared/Shared/MainLayout.razor.css b/MixApp.Shared/Shared/MainLayout.razor.css new file mode 100644 index 0000000..ef6c7e8 --- /dev/null +++ b/MixApp.Shared/Shared/MainLayout.razor.css @@ -0,0 +1,33 @@ +.layout { + height: 100vh; +} + +.main { + text-align: center; + width: 100%; + margin: 0 auto; + display: flex; + text-decoration: none; +} + +.container { + height: calc(100vh - 60px); + width: calc(100% - 70px); + text-align: left; + overflow-y: scroll; +} + +@media only screen and (max-width: 950px) { + .main { + width: 100%; + margin: 0; + } + + .container { + padding: 10px; + } + + .container .page { + padding: 0; + } +} \ No newline at end of file diff --git a/MixApp.Shared/wwwroot/js/index.js b/MixApp.Shared/wwwroot/js/index.js index 4c2bf25..eced0a6 100644 --- a/MixApp.Shared/wwwroot/js/index.js +++ b/MixApp.Shared/wwwroot/js/index.js @@ -32,7 +32,7 @@ window.initHighLight = (card) => { this.addEventListener('mousemove', function (e) { var x = e.pageX - this.offsetLeft - light.offsetWidth / 2 - var y = e.pageY + document.querySelector('.page').scrollTop - this.offsetTop - light.offsetHeight / 2 + var y = e.pageY + document.querySelector('.container').scrollTop - this.offsetTop - light.offsetHeight / 2 light.style.left = x + 'px' light.style.top = y + 'px' }) From 99f9ce5e8fce7af1cc6cd975eea4a22bc1ce730f Mon Sep 17 00:00:00 2001 From: lixinyang123 Date: Tue, 26 Dec 2023 03:35:47 +0800 Subject: [PATCH 2/8] fixed load software err --- MixApp.Shared/wwwroot/js/index.js | 2 +- MixApp.Shared/wwwroot/locale/en-US.json | 4 ++-- MixApp.Shared/wwwroot/locale/zh-CN.json | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/MixApp.Shared/wwwroot/js/index.js b/MixApp.Shared/wwwroot/js/index.js index eced0a6..98165fc 100644 --- a/MixApp.Shared/wwwroot/js/index.js +++ b/MixApp.Shared/wwwroot/js/index.js @@ -7,7 +7,7 @@ catch (error) { } window.initPageSoftware = (dotnet) => { - let scrollBox = document.querySelector('.page') + let scrollBox = document.querySelector('.container') // 内存泄漏 ！！！！！！！！！ // dispose dotnet diff --git a/MixApp.Shared/wwwroot/locale/en-US.json b/MixApp.Shared/wwwroot/locale/en-US.json index b39b844..8cf1fe2 100644 --- a/MixApp.Shared/wwwroot/locale/en-US.json +++ b/MixApp.Shared/wwwroot/locale/en-US.json @@ -33,8 +33,8 @@ "c.request_permission.close": "Don't remind me again", "c.side_bar.home": "Home", - "c.side_bar.collections": "Collections", - "c.side_bar.apps": "Apps", + "c.side_bar.collections": "Explore", + "c.side_bar.apps": "App", "c.side_bar.library": "Library", "c.side_bar.setting": "Setting", "c.side_bar.help": "Help", diff --git a/MixApp.Shared/wwwroot/locale/zh-CN.json b/MixApp.Shared/wwwroot/locale/zh-CN.json index 4b2fc07..d9d58ed 100644 --- a/MixApp.Shared/wwwroot/locale/zh-CN.json +++ b/MixApp.Shared/wwwroot/locale/zh-CN.json @@ -33,7 +33,7 @@ "c.request_permission.close": "不再提醒", "c.side_bar.home": "主页", - "c.side_bar.collections": "合集", + "c.side_bar.collections": "探索", "c.side_bar.apps": "软件", "c.side_bar.library": "库", "c.side_bar.setting": "设置", From 5c8ca2d1054284d1803b744453f200f5962104f1 Mon Sep 17 00:00:00 2001 From: lixinyang123 Date: Wed, 27 Dec 2023 03:36:11 +0800 Subject: [PATCH 3/8] css isolation --- MixApp.Shared/Components/Detail.razor | 144 +----------------- MixApp.Shared/Components/Detail.razor.css | 139 +++++++++++++++++ MixApp.Shared/Components/Header.razor | 72 +-------- MixApp.Shared/Components/Header.razor.css | 61 ++++++++ .../Components/RequestPermission.razor | 10 -- .../Components/RequestPermission.razor.css | 7 + MixApp.Shared/Components/SideBar.razor | 66 -------- MixApp.Shared/Components/SideBar.razor.css | 63 ++++++++ MixApp.Shared/Components/SkeletonBanner.razor | 41 +---- .../Components/SkeletonBanner.razor.css | 26 ++++ MixApp.Shared/Components/SkeletonCard.razor | 83 +++------- .../Components/SkeletonCard.razor.css | 48 ++++++ MixApp.Shared/Components/SoftwareCard.razor | 47 +----- .../Components/SoftwareCard.razor.css | 42 +++++ MixApp.Shared/Pages/Softwares.razor | 1 + 15 files changed, 419 insertions(+), 431 deletions(-) create mode 100644 MixApp.Shared/Components/Detail.razor.css create mode 100644 MixApp.Shared/Components/Header.razor.css create mode 100644 MixApp.Shared/Components/RequestPermission.razor.css create mode 100644 MixApp.Shared/Components/SideBar.razor.css create mode 100644 MixApp.Shared/Components/SkeletonBanner.razor.css create mode 100644 MixApp.Shared/Components/SkeletonCard.razor.css create mode 100644 MixApp.Shared/Components/SoftwareCard.razor.css diff --git a/MixApp.Shared/Components/Detail.razor b/MixApp.Shared/Components/Detail.razor index db1ed20..336e08c 100644 --- a/MixApp.Shared/Components/Detail.razor +++ b/MixApp.Shared/Components/Detail.razor @@ -6,6 +6,8 @@ @if (Software == null) return; +
+ @@ -173,144 +175,4 @@
- + \ No newline at end of file diff --git a/MixApp.Shared/Components/Detail.razor.css b/MixApp.Shared/Components/Detail.razor.css new file mode 100644 index 0000000..241fb98 --- /dev/null +++ b/MixApp.Shared/Components/Detail.razor.css @@ -0,0 +1,139 @@ +.detailSkeleton{ + display: flex; + box-sizing: border-box; +} + +.detailSkeletonIntroLeft{ + width: calc(100% - 135px); + padding: 20px; +} + +.firstOnLeft { + margin-bottom: 12px; +} + +.secondOnLeft { + margin-bottom: 16px; +} + +.buttonOnLeft { + margin-bottom: 16px; +} + +.detailSkeletonButtonRight{ + display: flex; + flex-direction: column; + align-items: flex-end; + padding: 20px; + width: 135px; +} + +.detailSkeletonButtonRight .detailSkeletonRight{ + margin: 5px; +} + +.installer{ + padding: 20px; +} + +::deep fluent-dialog::part(control) { + --dialog-width: 60%; + --dialog-height: 100%; + padding: 0 !important; + overflow: hidden; + position: relative; +} + +@media only screen and (max-width: 1270px) { + ::deep fluent-dialog::part(control) { + --dialog-width: 100%; + } + + .detailSkeletonButtonRight{ + width: 175px; + } + + .detailSkeletonIntroLeft{ + width: calc(100% - 175px); + } +} + +::deep .cancelButton { + position: absolute; + border-radius: 50%; + width: 32px; + height: 32px; + z-index: 5; + right: 0; + top: -6px; +} + +.detail { + overflow-y: scroll; + height: 100%; + position: relative; +} + +.detail .cover { + object-fit: cover; + height: 50vh; + width: 100%; + border-radius: 5px; +} + +.detail .mask { + position: absolute; + top: 0; + height: 50vh; + width: 100%; + background: linear-gradient(to top, var(--fill-color), rgba(255, 255, 255, 0)); +} + +.detail .head { + display: flex; + justify-content: space-between; + padding: 30px; +} + +.detail .head > div fluent-button+fluent-button { + margin-left: 10px; +} + +.head > div:first-child { + text-align: left; +} + +.detail .head > div:last-child { + text-align: right; + padding: 20px 0; + min-width: 250px; +} + +.detail .head > div:last-child p { + margin: 5px; +} + +.detail .info { + padding: 0 30px 20px 30px; +} + +.detail .info > div { + margin-bottom: 20px; +} + +.detail .info > div:last-child { + margin-bottom: 0; +} + +.detail .info fluent-text-field { + width: 300px; +} + +.detail .info fluent-data-grid { + max-height: 400px; + overflow-y: scroll; +} + +.detail .copyright { + text-align: center; +} \ No newline at end of file diff --git a/MixApp.Shared/Components/Header.razor b/MixApp.Shared/Components/Header.razor index 2792ca4..b269cc7 100644 --- a/MixApp.Shared/Components/Header.razor +++ b/MixApp.Shared/Components/Header.razor @@ -2,10 +2,10 @@ @inject LocaleManager LM -
-
- - Mix Store +
+
+ + Mix Store
}
- - \ No newline at end of file diff --git a/MixApp.Shared/Components/Header.razor.css b/MixApp.Shared/Components/Header.razor.css new file mode 100644 index 0000000..b105e09 --- /dev/null +++ b/MixApp.Shared/Components/Header.razor.css @@ -0,0 +1,61 @@ +.header { + position: relative; + display: flex; + justify-content: center; + background-color: var(--neutral-fill-layer-rest); + position: relative; + height: 60px; +} + +.left { + position: absolute; + left: 25px; + top: 15px; +} + +.icon { + width: 30px; + height: 30px; + display: inline-block; + vertical-align: middle; +} + +.info { + padding-left: 10px; + font-size: 15px; + font-weight: bold; + display: inline-block; + vertical-align: middle; +} + +::deep .search { + width: 50%; + margin: 15px; + margin-right: 10px; +} + +.searchContent { + position: absolute; + margin: 60px; + overflow-y: scroll; + text-align: left; + max-height: calc(100vh - 200px); + z-index: 10; + box-shadow: 0 0 10px 0 rgba(0,0,0,.5); + background-color: var(--fill-color); + border-radius: 5px; +} + +::-webkit-scrollbar { + display: none; +} + +::deep .searchResult { + padding: 20px; +} + +@media only screen and (max-width: 950px) { + .header .search { + display: none; + } +} \ No newline at end of file diff --git a/MixApp.Shared/Components/RequestPermission.razor b/MixApp.Shared/Components/RequestPermission.razor index 7413c8e..c20dde3 100644 --- a/MixApp.Shared/Components/RequestPermission.razor +++ b/MixApp.Shared/Components/RequestPermission.razor @@ -24,13 +24,3 @@
- - \ No newline at end of file diff --git a/MixApp.Shared/Components/RequestPermission.razor.css b/MixApp.Shared/Components/RequestPermission.razor.css new file mode 100644 index 0000000..1e43563 --- /dev/null +++ b/MixApp.Shared/Components/RequestPermission.razor.css @@ -0,0 +1,7 @@ +.dialogFooter { + margin-bottom: 20px; +} + +.dialogFooter > fluent-button { + margin-right: 10px; +} \ No newline at end of file diff --git a/MixApp.Shared/Components/SideBar.razor b/MixApp.Shared/Components/SideBar.razor index 7a4f914..4ede0a5 100644 --- a/MixApp.Shared/Components/SideBar.razor +++ b/MixApp.Shared/Components/SideBar.razor @@ -48,69 +48,3 @@ }
- - \ No newline at end of file diff --git a/MixApp.Shared/Components/SideBar.razor.css b/MixApp.Shared/Components/SideBar.razor.css new file mode 100644 index 0000000..3599b9e --- /dev/null +++ b/MixApp.Shared/Components/SideBar.razor.css @@ -0,0 +1,63 @@ +.top-sidebar { + position: relative; +} + +#counter-into { + border-radius: 50%; + margin: 0; + padding: 0; + min-width: 14px; + min-height: 14px; + position: absolute; + right: 4px; + top: 4px; + background-color: rgba(255, 3, 3, 0.7); + color: white; + padding: 1px; + font-size: 12px; + line-height: 12px; + text-align: center; +} + +.active { + background-color: rgba(255, 255, 255, 0.1); +} + +.sidebar { + width: 70px; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 5px; + background-color: var(--neutral-fill-layer-rest); +} + +.sidebar .top, +.sidebar .bottom { + width: 100%; +} + +.sidebar .top div, +.sidebar .bottom div { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + text-align: center; + padding: 8px 0 4px 0; + border-radius: 7px; + box-sizing: border-box; + margin: 2px; +} + +::deep a { + font-size: 12px; + font-family: Arial, Helvetica, sans-serif; + text-decoration: none; +} + +@media only screen and (max-width: 950px) { + .sidebar { + display: none; + } +} \ No newline at end of file diff --git a/MixApp.Shared/Components/SkeletonBanner.razor b/MixApp.Shared/Components/SkeletonBanner.razor index 6e91409..6865ba0 100644 --- a/MixApp.Shared/Components/SkeletonBanner.razor +++ b/MixApp.Shared/Components/SkeletonBanner.razor @@ -1,34 +1,7 @@ - - - - - - - \ No newline at end of file +
+ + + + + +
\ No newline at end of file diff --git a/MixApp.Shared/Components/SkeletonBanner.razor.css b/MixApp.Shared/Components/SkeletonBanner.razor.css new file mode 100644 index 0000000..9739718 --- /dev/null +++ b/MixApp.Shared/Components/SkeletonBanner.razor.css @@ -0,0 +1,26 @@ +.bannerSkeleton { + margin-right: 10px; + height: 550px; + width: 950px; + position: relative; +} + +::deep .bannerSkeletonTitle { + position: absolute; + top: 45%; + left: 6%; + margin-bottom: 12px; +} + +::deep .bannerSkeletonIntro { + position: absolute; + top: 54%; + left: 6%; + margin-bottom: 16px; +} + +::deep .bannerSkeletonButton { + position: absolute; + top: 60%; + left: 6%; +} \ No newline at end of file diff --git a/MixApp.Shared/Components/SkeletonCard.razor b/MixApp.Shared/Components/SkeletonCard.razor index d12449d..2e93299 100644 --- a/MixApp.Shared/Components/SkeletonCard.razor +++ b/MixApp.Shared/Components/SkeletonCard.razor @@ -1,66 +1,17 @@ - -
- - - - - - - - - - - - - - - \ No newline at end of file +
+ +
+ + + + + + + + + + + + + +
\ No newline at end of file diff --git a/MixApp.Shared/Components/SkeletonCard.razor.css b/MixApp.Shared/Components/SkeletonCard.razor.css new file mode 100644 index 0000000..1f6b2a6 --- /dev/null +++ b/MixApp.Shared/Components/SkeletonCard.razor.css @@ -0,0 +1,48 @@ +::deep .skeleton { + height: 300px; + position: relative; + padding: 20px 20px 60px 20px; + box-sizing: border-box; +} + +::deep .packageSkeleton{ + border-radius: 7px; + margin-bottom: 16px; +} + +::deep .titleSkeleton{ + float: left; + margin: 0.75rem 0; +} + +::deep .iconSkeleton{ + float: right; + border-radius: 5px; + margin: 10px; +} + +::deep .firmSkeleton{ + margin-bottom: 10px; +} + +::deep .introSkeleton{ + margin: 5px 0 6px 0; +} + +::deep .buttonSkeleton{ + float: left; + position: absolute; + bottom: 30px; +} + +::deep .moreSkeleton{ + left: 105px; +} + +::deep .starSkeleton{ + left: 20px; +} + +::deepBox{ + width: 5000px; +} \ No newline at end of file diff --git a/MixApp.Shared/Components/SoftwareCard.razor b/MixApp.Shared/Components/SoftwareCard.razor index 62c1f7f..022853f 100644 --- a/MixApp.Shared/Components/SoftwareCard.razor +++ b/MixApp.Shared/Components/SoftwareCard.razor @@ -39,49 +39,4 @@
- - - \ No newline at end of file + \ No newline at end of file diff --git a/MixApp.Shared/Components/SoftwareCard.razor.css b/MixApp.Shared/Components/SoftwareCard.razor.css new file mode 100644 index 0000000..e960955 --- /dev/null +++ b/MixApp.Shared/Components/SoftwareCard.razor.css @@ -0,0 +1,42 @@ +::deep fluent-card { + padding: 20px 20px 60px 20px; + position: relative; + overflow: hidden; +} + +::deep .title { + margin: 0.75rem 0; +} + +::deep .desc { + margin-top: 10px; +} + +::deep .action { + margin: 1.5rem 0; + position: absolute; + bottom: 0; +} + +::deep .action fluent-button+fluent-button { + margin-left: 10px; +} + +::deep .icon{ + float: right; + width: 40px; + height: 40px; + margin: 10px; + border-radius: 5px; +} + +::deep .light { + display: none; + position: absolute; + width: 300px; + height: 300px; + background-color: #ffffff27; + border-radius: 50%; + filter: blur(40px); + z-index: -1; +} \ No newline at end of file diff --git a/MixApp.Shared/Pages/Softwares.razor b/MixApp.Shared/Pages/Softwares.razor index 6aa3dec..1e6f21a 100644 --- a/MixApp.Shared/Pages/Softwares.razor +++ b/MixApp.Shared/Pages/Softwares.razor @@ -53,6 +53,7 @@ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-gap: 1em; + width: 100%; } @@media only screen and (max-width: 1400px) { From fb64b3e0d4544c2dbf3f2542fd0800eb2c308391 Mon Sep 17 00:00:00 2001 From: lixinyang123 Date: Thu, 28 Dec 2023 03:48:53 +0800 Subject: [PATCH 4/8] css isolation --- .../Components/SkeletonCollection.razor | 77 ++++--------------- .../Components/SkeletonCollection.razor.css | 47 +++++++++++ MixApp.Shared/Pages/Index.razor | 1 + 3 files changed, 64 insertions(+), 61 deletions(-) create mode 100644 MixApp.Shared/Components/SkeletonCollection.razor.css diff --git a/MixApp.Shared/Components/SkeletonCollection.razor b/MixApp.Shared/Components/SkeletonCollection.razor index ea6b54c..df417a9 100644 --- a/MixApp.Shared/Components/SkeletonCollection.razor +++ b/MixApp.Shared/Components/SkeletonCollection.razor @@ -1,61 +1,16 @@ - -
-
- - - -
-
-
- - - -
- - - \ No newline at end of file +
+ +
+
+ + + +
+
+
+ + + +
+ +
\ No newline at end of file diff --git a/MixApp.Shared/Components/SkeletonCollection.razor.css b/MixApp.Shared/Components/SkeletonCollection.razor.css new file mode 100644 index 0000000..3eb6f2b --- /dev/null +++ b/MixApp.Shared/Components/SkeletonCollection.razor.css @@ -0,0 +1,47 @@ +.skeleton { + width: calc(50% - 6px); +} + +::deep .collectionSkeleton { + height: 220px; + display: flex; + justify-content: space-around; + padding: 21px; +} + +@media only screen and (max-width: 1280px) { + ::deep .collectionSkeleton { + width: 100%; + } +} + +::deep .left{ + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +::deep .collectionSkeletonTitle{ + width: 205px; + height: 36px; + margin-bottom: 12px; +} + +::deep .collectionSkeletonIntro{ + width: 205px; + height: 20px; + margin-bottom: 12px; +} + +::deep .right{ + display: flex; + align-items: center; + justify-content: center; +} + +::deep .collectionSkeletonFirstSign, +::deep .collectionSkeletonSecondSign, +::deep .collectionSkeletonThirdSign { + margin: 5px; +} \ No newline at end of file diff --git a/MixApp.Shared/Pages/Index.razor b/MixApp.Shared/Pages/Index.razor index b6a146f..1189960 100644 --- a/MixApp.Shared/Pages/Index.razor +++ b/MixApp.Shared/Pages/Index.razor @@ -177,6 +177,7 @@ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-gap: 1em; + width: 100%; } @@media only screen and (max-width: 1400px) { From 8f766e7647aeb5a67eebbb70d92e22775962c8f1 Mon Sep 17 00:00:00 2001 From: lixinyang123 Date: Thu, 28 Dec 2023 23:57:06 +0800 Subject: [PATCH 5/8] index page css isolation --- MixApp.Shared/Pages/Index.razor | 130 +--------------------------- MixApp.Shared/Pages/Index.razor.css | 125 ++++++++++++++++++++++++++ 2 files changed, 126 insertions(+), 129 deletions(-) create mode 100644 MixApp.Shared/Pages/Index.razor.css diff --git a/MixApp.Shared/Pages/Index.razor b/MixApp.Shared/Pages/Index.razor index 1189960..8f9976c 100644 --- a/MixApp.Shared/Pages/Index.razor +++ b/MixApp.Shared/Pages/Index.razor @@ -91,132 +91,4 @@ - - - \ No newline at end of file + \ No newline at end of file diff --git a/MixApp.Shared/Pages/Index.razor.css b/MixApp.Shared/Pages/Index.razor.css new file mode 100644 index 0000000..e2514db --- /dev/null +++ b/MixApp.Shared/Pages/Index.razor.css @@ -0,0 +1,125 @@ +.page { + height: 100%; + overflow-y: scroll; + padding: 10px 20px; +} + +::deep .banner { + width: 100%; +} + +.page .text { + font-weight: bold; + font-size: 17px; + font-family: inherit; +} + +::deep .banner fluent-card { + margin-right: 10px; + height: 550px; + width: 950px; + position: relative; +} + +::deep .banner fluent-card:hover { + -webkit-box-shadow: 0 0 6px #999; + box-shadow: 0 0 6px #999; + -webkit-transition: all .2s ease-out; + transition: all .2s ease-out; +} + +::deep .banner .cover { + height: 100%; + transition: all .2s ease-out; +} + +::deep .banner fluent-card:hover .cover { + transform: scale(1.08); +} + +::deep .banner .mask { + width: 100%; + height: 100%; + position: absolute; + top: 0%; + left: 0%; + z-index: 3; + background: linear-gradient(to right, var(--fill-color), rgba(255, 255, 255, 0)); +} + +::deep .bannerDesc { + font-size: 20px; + font-weight: bold; + max-width: 400px; + position: absolute; + top: 30%; + left: 10%; + z-index: 4; + transition: all .2s ease-out; +} + +::deep .bannerDesc fluent-button { + backdrop-filter: saturate(110%) blur(10px); +} + +::deep .bannerDesc img { + width: 60px; + height: 60px; + margin: 20px 0; + border-radius: 5px; +} + +::deep .banner fluent-card { + padding: 0; +} + +::deep .banner fluent-card:hover .bannerDesc { + transform: translateY(-10px); +} + +.content { + display: grid; + grid-template-columns: repeat(5, minmax(0, 1fr)); + grid-gap: 1em; + width: 100%; +} + +@media only screen and (max-width: 1400px) { + .content { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } +} + +@media only screen and (max-width: 1200px) { + .content { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +} + +@media only screen and (max-width: 950px) { + .content { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .banner fluent-card { + width: calc(100vw - 20px); + } +} + +@media only screen and (max-width: 700px) { + .content { + width: 100%; + grid-template-columns: repeat(1, minmax(0, 1fr)); + } +} + +.page .recommended { + width: 100%; + margin-top: 20px; + text-align: left; +} + +.page .footer { + padding-top: 30px; + padding-bottom: 20px; +} \ No newline at end of file From d916b4b2f532f728b2b23ad1c5f32ab2ee63ce1e Mon Sep 17 00:00:00 2001 From: lixinyang123 Date: Fri, 29 Dec 2023 00:17:11 +0800 Subject: [PATCH 6/8] fixed index page style err --- MixApp.Shared/Pages/Index.razor | 4 ++-- MixApp.Shared/Pages/Index.razor.css | 9 +++++---- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/MixApp.Shared/Pages/Index.razor b/MixApp.Shared/Pages/Index.razor index 8f9976c..c6dd90e 100644 --- a/MixApp.Shared/Pages/Index.razor +++ b/MixApp.Shared/Pages/Index.razor @@ -7,7 +7,7 @@ @LM.Scripts["p.index.home"] - +
\ No newline at end of file diff --git a/MixApp.Shared/Pages/Index.razor.css b/MixApp.Shared/Pages/Index.razor.css index e2514db..44fea0b 100644 --- a/MixApp.Shared/Pages/Index.razor.css +++ b/MixApp.Shared/Pages/Index.razor.css @@ -1,5 +1,6 @@ .page { height: 100%; + width: 100%; overflow-y: scroll; padding: 10px 20px; } @@ -101,7 +102,7 @@ grid-template-columns: repeat(2, minmax(0, 1fr)); } - .banner fluent-card { + ::deep .banner fluent-card { width: calc(100vw - 20px); } } @@ -113,13 +114,13 @@ } } -.page .recommended { +.recommended { width: 100%; - margin-top: 20px; + margin: 25px 0; text-align: left; } -.page .footer { +::deep .footer { padding-top: 30px; padding-bottom: 20px; } \ No newline at end of file From c26774a33050c7677a6a7aeae86482c90589faf7 Mon Sep 17 00:00:00 2001 From: lixinyang123 Date: Fri, 29 Dec 2023 01:03:08 +0800 Subject: [PATCH 7/8] css isolation --- MixApp.Shared/Components/Detail.razor.css | 16 +-- MixApp.Shared/Pages/Collections.razor | 132 +--------------------- MixApp.Shared/Pages/Collections.razor.css | 127 +++++++++++++++++++++ MixApp.Shared/Pages/Softwares.razor | 74 +++--------- MixApp.Shared/Pages/Softwares.razor.css | 39 +++++++ 5 files changed, 191 insertions(+), 197 deletions(-) create mode 100644 MixApp.Shared/Pages/Collections.razor.css create mode 100644 MixApp.Shared/Pages/Softwares.razor.css diff --git a/MixApp.Shared/Components/Detail.razor.css b/MixApp.Shared/Components/Detail.razor.css index 241fb98..3fe1ec1 100644 --- a/MixApp.Shared/Components/Detail.razor.css +++ b/MixApp.Shared/Components/Detail.razor.css @@ -1,4 +1,4 @@ -.detailSkeleton{ +.detailSkeleton { display: flex; box-sizing: border-box; } @@ -8,15 +8,15 @@ padding: 20px; } -.firstOnLeft { +::deep .firstOnLeft { margin-bottom: 12px; } -.secondOnLeft { +::deep .secondOnLeft { margin-bottom: 16px; } -.buttonOnLeft { +::deep .buttonOnLeft { margin-bottom: 16px; } @@ -28,7 +28,7 @@ width: 135px; } -.detailSkeletonButtonRight .detailSkeletonRight{ +::deep .detailSkeletonButtonRight .detailSkeletonRight{ margin: 5px; } @@ -95,7 +95,7 @@ padding: 30px; } -.detail .head > div fluent-button+fluent-button { +::deep .detail .head > div fluent-button+fluent-button { margin-left: 10px; } @@ -125,11 +125,11 @@ margin-bottom: 0; } -.detail .info fluent-text-field { +::deep .detail .info fluent-text-field { width: 300px; } -.detail .info fluent-data-grid { +::deep .detail .info fluent-data-grid { max-height: 400px; overflow-y: scroll; } diff --git a/MixApp.Shared/Pages/Collections.razor b/MixApp.Shared/Pages/Collections.razor index 60dcbae..a41c5d0 100644 --- a/MixApp.Shared/Pages/Collections.razor +++ b/MixApp.Shared/Pages/Collections.razor @@ -78,134 +78,4 @@ } - - - \ No newline at end of file + \ No newline at end of file diff --git a/MixApp.Shared/Pages/Collections.razor.css b/MixApp.Shared/Pages/Collections.razor.css new file mode 100644 index 0000000..cf205b9 --- /dev/null +++ b/MixApp.Shared/Pages/Collections.razor.css @@ -0,0 +1,127 @@ +.page { + height: 100%; + overflow-y: scroll; + width: 100%; + padding: 10px 20px; +} + +.group { + width: 100%; + display: flex; + flex-wrap: wrap; + gap: 10px; +} + +::deep .collection { + background-attachment: fixed; + background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax, 110vmax 110vmax, 90vmax 90vmax; + background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax, -30vmax -10vmax, 50vmax 50vmax; + background-repeat: no-repeat; + animation: 10s movement linear infinite; + height: 220px; + width: calc(50% - 6px); + background-image: + radial-gradient(closest-side,rgb(43, 66, 163),rgba(235,105,78,0)), + radial-gradient(closest-side,rgb(122, 64, 143),rgba(243,11,164,0)), + radial-gradient(closest-side,rgb(91, 49, 160),rgba(254,234,131,0)), + radial-gradient(closest-side,rgb(69, 143, 149),rgba(170,142,245,0)), + radial-gradient(closest-side,rgb(59, 95, 147),rgba(248,192,147,0)); +} + +@media only screen and (max-width: 1280px) { + ::deep .collection { + width: 100%; + } +} + +@keyframes movement { + 0%, 100% { + background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax, 110vmax 110vmax, 90vmax 90vmax; + background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax, -30vmax -10vmax, 50vmax 50vmax; + } + 25% { + background-size: 100vmax 100vmax, 90vmax 90vmax, 100vmax 100vmax, 90vmax 90vmax, 60vmax 60vmax; + background-position: -60vmax -90vmax, 50vmax -40vmax, 0vmax -20vmax, -40vmax -20vmax, 40vmax 60vmax; + } + 50% { + background-size: 80vmax 80vmax, 110vmax 110vmax, 80vmax 80vmax, 60vmax 60vmax, 80vmax 80vmax; + background-position: -50vmax -70vmax, 40vmax -30vmax, 10vmax 0vmax, 20vmax 10vmax, 30vmax 70vmax; + } + 75% { + background-size: 90vmax 90vmax, 90vmax 90vmax, 100vmax 100vmax, 90vmax 90vmax, 70vmax 70vmax; + background-position: -50vmax -40vmax, 50vmax -30vmax, 20vmax 0vmax, -10vmax 10vmax, 40vmax 60vmax; + } +} + +.collection .content { + display: flex; + justify-content: space-between; + height: 100%; + padding: 0 50px; +} + +.collection .content > div { + margin: auto 0; +} + +@media only screen and (max-width: 750px) { + .content .right { + display: none; + } +} + +.left .intro { + max-width: 300px; +} + +.right .icon { + margin: 5px; + height: 50px; + border-radius: 5px; + transition: all .2s ease-out; + cursor: pointer; +} + +.right .icon:hover { + transform: scale(1.3); +} + +.detail .header { + display: flex; + margin: 0 0 15px 0; +} + +::deep .header > fluent-badge { + margin: auto 10px; +} + +.detail .content { + display: grid; + grid-template-columns: repeat(5, minmax(0, 1fr)); + grid-gap: 1em; +} + +@media only screen and (max-width: 1400px) { + .detail .content { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } +} + +@media only screen and (max-width: 1200px) { + .detail .content { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +} + +@media only screen and (max-width: 950px) { + .detail .content { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media only screen and (max-width: 700px) { + .detail .content { + width: 100%; + grid-template-columns: repeat(1, minmax(0, 1fr)); + } +} \ No newline at end of file diff --git a/MixApp.Shared/Pages/Softwares.razor b/MixApp.Shared/Pages/Softwares.razor index 1e6f21a..e1b5385 100644 --- a/MixApp.Shared/Pages/Softwares.razor +++ b/MixApp.Shared/Pages/Softwares.razor @@ -7,7 +7,7 @@ @LM.Scripts["p.softwares.softwares"] - +
@if (Softwares.Count == 0) @@ -26,62 +26,20 @@ }
- @if(IsLoading) - { - if(!IsFirstRender) + + @if(IsLoading) { - + if(!IsFirstRender) + { + + } } - } - else - { - - @LM.Scripts["p.softwares.load_more"] - - } - - - - \ No newline at end of file + else + { + + @LM.Scripts["p.softwares.load_more"] + + } + +
+ \ No newline at end of file diff --git a/MixApp.Shared/Pages/Softwares.razor.css b/MixApp.Shared/Pages/Softwares.razor.css new file mode 100644 index 0000000..1fb0677 --- /dev/null +++ b/MixApp.Shared/Pages/Softwares.razor.css @@ -0,0 +1,39 @@ +.page { + padding: 10px 20px; + width: 100%; +} + +.content { + display: grid; + grid-template-columns: repeat(5, minmax(0, 1fr)); + grid-gap: 1em; +} + +@media only screen and (max-width: 1400px) { + .content { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } +} + +@media only screen and (max-width: 1200px) { + .content { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +} + +@media only screen and (max-width: 950px) { + .content { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media only screen and (max-width: 700px) { + .content { + width: 100%; + grid-template-columns: repeat(1, minmax(0, 1fr)); + } +} + +::deep .progress { + margin: 20px; +} \ No newline at end of file From 694f1b5064c2e539a7ccdb6d9143c56203aedf4a Mon Sep 17 00:00:00 2001 From: lixinyang123 Date: Fri, 29 Dec 2023 01:13:26 +0800 Subject: [PATCH 8/8] css isolation --- MixApp.Shared/Pages/Help.razor | 26 +------------------- MixApp.Shared/Pages/Help.razor.css | 21 +++++++++++++++++ MixApp.Shared/Pages/Library.razor | 34 +-------------------------- MixApp.Shared/Pages/Library.razor.css | 29 +++++++++++++++++++++++ MixApp.Shared/Pages/Setting.razor | 29 +++-------------------- MixApp.Shared/Pages/Setting.razor.css | 20 ++++++++++++++++ 6 files changed, 75 insertions(+), 84 deletions(-) create mode 100644 MixApp.Shared/Pages/Help.razor.css create mode 100644 MixApp.Shared/Pages/Library.razor.css create mode 100644 MixApp.Shared/Pages/Setting.razor.css diff --git a/MixApp.Shared/Pages/Help.razor b/MixApp.Shared/Pages/Help.razor index 8a4c044..5318e1f 100644 --- a/MixApp.Shared/Pages/Help.razor +++ b/MixApp.Shared/Pages/Help.razor @@ -53,28 +53,4 @@ } - - - \ No newline at end of file + \ No newline at end of file diff --git a/MixApp.Shared/Pages/Help.razor.css b/MixApp.Shared/Pages/Help.razor.css new file mode 100644 index 0000000..c89c995 --- /dev/null +++ b/MixApp.Shared/Pages/Help.razor.css @@ -0,0 +1,21 @@ +.page { + width: 100%; + padding: 10px 20px; + margin: 10px; +} + +.feedback { + width: 50%; + padding: 30px 20px; + margin: 0 auto; +} + +::deep .form { + width: 100%; + margin: 20px 0; +} + +::deep .contact, ::deep .content { + width: 100%; + padding: 5px 0; +} \ No newline at end of file diff --git a/MixApp.Shared/Pages/Library.razor b/MixApp.Shared/Pages/Library.razor index 561f7c5..f3244ff 100644 --- a/MixApp.Shared/Pages/Library.razor +++ b/MixApp.Shared/Pages/Library.razor @@ -126,36 +126,4 @@ } - - - \ No newline at end of file + \ No newline at end of file diff --git a/MixApp.Shared/Pages/Library.razor.css b/MixApp.Shared/Pages/Library.razor.css new file mode 100644 index 0000000..b3bf7f7 --- /dev/null +++ b/MixApp.Shared/Pages/Library.razor.css @@ -0,0 +1,29 @@ +.page { + width: 100%; + padding: 10px 20px; + margin: 10px; +} + +.page .list { + margin-bottom: 40px; +} + +.page h1 { + margin-bottom: 20px; +} + +.page img { + height: 30px; +} + +.page .line { + height: 30px; + line-height: 30px; + margin-bottom: 0; +} + +.page lottie-player { + margin: 200px auto; + width: 180px; + height: 180px +} \ No newline at end of file diff --git a/MixApp.Shared/Pages/Setting.razor b/MixApp.Shared/Pages/Setting.razor index 389d3f0..dfadfcf 100644 --- a/MixApp.Shared/Pages/Setting.razor +++ b/MixApp.Shared/Pages/Setting.razor @@ -6,8 +6,8 @@ @LM.Scripts["p.setting.setting"] -
-

@LM.Scripts["p.setting.setting"]

+
+

@LM.Scripts["p.setting.setting"]

@@ -86,27 +86,4 @@ -
- - +
\ No newline at end of file diff --git a/MixApp.Shared/Pages/Setting.razor.css b/MixApp.Shared/Pages/Setting.razor.css new file mode 100644 index 0000000..41ce6fa --- /dev/null +++ b/MixApp.Shared/Pages/Setting.razor.css @@ -0,0 +1,20 @@ +.page { + width: 100%; + padding: 10px 20px; + margin: 10px; +} + +::deep fluent-accordion-item { + margin-bottom: 20px; +} + +::deep .content { + padding: 10px 20px; + display: flex; + justify-content: space-between; +} + +::deep .title { + line-height: 100%; + margin: 0; +} \ No newline at end of file