feat: 添加背景图

BITNP · Aug 23, 2024 · 17b8f3b · 17b8f3b
1 parent 9b2805b
commit 17b8f3b
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 5 deletions.
diff --git a/contest/quiz/static/img/bg-contest.jpg b/contest/quiz/static/img/bg-contest.jpg
diff --git a/contest/quiz/static/img/bg-info.jpg b/contest/quiz/static/img/bg-info.jpg
diff --git a/contest/quiz/templates/base.html b/contest/quiz/templates/base.html
@@ -18,6 +18,15 @@
     {% block scripts %}
     {% endblock scripts %}
     {% tailwind_css %}
+    {# 一般样式编译时能确定，请用 Tailwind；若需`{% static … %}`（部署时才确定），再加到这里 #}
+    <style>
+      .bg-img-contest {
+        background-image: url('{% static "img/bg-contest.jpg" %}');
+      }
+      .bg-img-info {
+        background-image: url('{% static "img/bg-info.jpg" %}');
+      }
+    </style>
   </head>
   <body class="h-full">
     <div class="min-h-full grid grid-rows-[auto_1fr_auto]">
@@ -139,8 +148,8 @@ <h1 class="text-3xl font-bold tracking-tight text-gray-900">{% current_page_titl
         {% endblock heading %}
       </header>
       {% block main %}
-        <main>
-          <div class="mx-auto max-w-2xl py-6 px-6 lg:px-8">
+        <main class="bg-fixed bg-center {% block main_bg_style %}{% endblock main_bg_style %}">
+          <div class="mx-auto max-w-2xl py-6 px-6 lg:px-8 {% block main_container_bg_style %}bg-gray-100/85 shadow{% endblock main_container_bg_style %}">
             {% block content %}
             {% endblock content %}
           </div>

diff --git a/contest/quiz/templates/contest.html b/contest/quiz/templates/contest.html
@@ -11,7 +11,7 @@
 {% endblock scripts %}
 {% block main %}
   {# 宽度超过 7xl / 80rem / 1280px 后，aside 与 header 右对齐 #}
-  <main class="mx-auto max-w-7xl w-full">
+  <main class="mx-auto max-w-7xl w-full bg-img-contest bg-fixed bg-center">
     {# 进度 #}
     <aside class="sticky top-0 md:top-4 mt-4 md:mr-4 min-[1280px]:mr-0 md:ml-auto md:w-80 p-2 bg-white shadow">
       <div class="grid grid-cols-[auto_1fr] mx-auto max-w-md items-center">

diff --git a/contest/quiz/templates/contest_review.html b/contest/quiz/templates/contest_review.html
@@ -1,8 +1,12 @@
 {% extends "base.html" %}
 {% load my_humanize humanize %}
+{% block main_bg_style %}bg-img-contest{% endblock main_bg_style %}
+{% block main_container_bg_style %}{% endblock main_container_bg_style %}
 {% block content %}
-  <p class="prose">提交时刻：{{ response.submit_at }}（{{ response.submit_at | naturaltime }}）。</p>
-  <p class="prose">单次成绩：{{ response.score | as_score }}分。</p>
+  <aside class="my-4 -mx-6 lg:-mx-8 p-4 sm:px-6 lg:px-8 bg-white shadow">
+    <p class="prose">提交时刻：{{ response.submit_at }}（{{ response.submit_at | naturaltime }}）。</p>
+    <p class="prose">单次成绩：{{ response.score | as_score }}分。</p>
+  </aside>
   <form class="prose">
     {% for a in response.answer_set.all %}
       <fieldset class="my-4 -mx-6 lg:-mx-8 p-4 sm:px-6 lg:px-8 bg-white shadow disabled:text-gray-400"

diff --git a/contest/quiz/templates/info.html b/contest/quiz/templates/info.html
@@ -5,6 +5,7 @@
   <script type='module' src="{% static 'js/dist/index_and_info.js' %}"></script>
   {{ status | json_script:"data:status" }}
 {% endblock scripts %}
+{% block main_bg_style %}bg-img-info{% endblock main_bg_style %}
 {% block content %}
   <div class="prose mb-4 prose-a:no-underline">
     <h2>成绩</h2>