feat(splash): 调整了 web 端启动屏样式

2023-03-20 17:43:32 +08:00
parent ccd67991d7
commit 32043405a3
27 changed files with 55 additions and 43 deletions
--- a/web/index.html
+++ b/web/index.html
@@ -33,7 +33,11 @@
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
  <link rel="stylesheet" type="text/css" href="splash/style.css">
 </head>
-<body>
+<body>  <picture id="splash">
+      <source srcset="splash/img/light-1x.png 1x, splash/img/light-2x.png 2x, splash/img/light-3x.png 3x, splash/img/light-4x.png 4x" media="(prefers-color-scheme: light)">
+      <source srcset="splash/img/dark-1x.png 1x, splash/img/dark-2x.png 2x, splash/img/dark-3x.png 3x, splash/img/dark-4x.png 4x" media="(prefers-color-scheme: dark)">
+      <img class="contain" aria-hidden="true" src="splash/img/light-1x.png" alt="">
+  </picture>        
  <!-- This script installs service_worker.js to provide PWA functionality to
       application. For more information, see:
       https://developers.google.com/web/fundamentals/primers/service-workers -->
--- a/web/splash/img/dark-1x.png
+++ b/web/splash/img/dark-1x.png
--- a/web/splash/img/dark-2x.png
+++ b/web/splash/img/dark-2x.png
--- a/web/splash/img/dark-3x.png
+++ b/web/splash/img/dark-3x.png
--- a/web/splash/img/dark-4x.png
+++ b/web/splash/img/dark-4x.png
--- a/web/splash/img/light-1x.png
+++ b/web/splash/img/light-1x.png
--- a/web/splash/img/light-2x.png
+++ b/web/splash/img/light-2x.png
--- a/web/splash/img/light-3x.png
+++ b/web/splash/img/light-3x.png
--- a/web/splash/img/light-4x.png
+++ b/web/splash/img/light-4x.png
--- a/web/splash/img/light-background.png
+++ b/web/splash/img/light-background.png
--- a/web/splash/style.css
+++ b/web/splash/style.css
@@ -5,8 +5,7 @@ html {
 body {
  margin: 0;
  min-height: 100%;
-  background-color: #ffffff;
-  background-image: url("img/light-background.png");
+  background-color: #D59C6A;
  background-size: 100% 100%;
 }