主题：新增页面

- 字数最长文章页
 - 感情积极文章页

static/painting/css/painting.css

@@ -131,8 +131,8 @@ html {
 
 .tab2-box {
     position: fixed;
-    top: 1rem;
+    top: 2rem;
-    padding: 1rem 1rem;
+    padding-left: 2rem;
     font-size: 1.75rem;
     color: #FFFFFFD9;
 }
@@ -148,8 +148,8 @@ html {
 
 .tab3-box {
     position: fixed;
-    top: 1rem;
+    top: 2rem;
-    padding: 1rem 1rem;
+    padding-left: 2rem;
     font-size: 1.75rem;
     color: #ffa940;
 }
@@ -164,20 +164,34 @@ html {
 }
 
 .tab4-box {
-    writing-mode: vertical-lr;
+    position: relative;;
-    position: fixed;
     top: 2rem;
-    font-size: 1.75rem;
+    left: 2rem;
-    color: #FFFFFFD9;
+    line-height: 2rem;
+    color: #448288D9;
 }
 
-#tab4 > .tab4-box > p:last-child {
+#tab4 > .tab4-box > p:nth-child(1) {
-    writing-mode: horizontal-tb;
+    width: 7rem;
-    margin: 0 0;
+    font-size: 2.5rem;
-    height: 30vh;
+}
-    width: 13rem;
+
+#tab4 > .tab4-box > p:nth-child(2) {
+    font-size: 1.5rem;
+    width: 16rem;
+}
+
+#tab4 > .tab4-box > p:nth-child(3) {
     font-size: 1.25rem;
-    line-height: 1.75rem;
+    width: 14rem;
+}
+
+#tab4 > .tab4-box > p:nth-child(4) {
+    font-size: 2rem;
+}
+
+#tab4 > .tab4-box > p:nth-child(5) {
+    font-size: 2rem;
 }
 
 
@@ -186,13 +200,59 @@ html {
 }
 
 .tab5-box {
+    writing-mode: vertical-lr;
+    position: fixed;
+    top: 2rem;
+    font-size: 1.75rem;
+    color: #FFFFFFD9;
+}
+
+#tab5 > .tab5-box > p:last-child {
+    writing-mode: horizontal-tb;
+    margin: 0 0;
+    height: 30vh;
+    width: 13rem;
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+}
+
+#tab6 {
+    background-image: url('../img/page6.jpg');
+}
+
+.tab6-box {
+    position: relative;
+    padding: 1rem;
+    text-align: center;
+    line-height: 2rem;
+    color: #613f38c7;
+}
+
+#tab6 > .tab6-box > p:nth-child(1) {
+    font-size: 2rem;
+}
+
+#tab6 > .tab6-box > p:nth-child(2) {
+    font-size: 1.25rem;
+}
+
+#tab6 > .tab6-box > p:nth-child(3) {
+    font-size: 1.5rem;
+}
+
+
+#tab7 {
+    background-image: url('../img/page7.jpg');
+}
+
+.tab7-box {
     position: relative;
     top: 2rem;
     left: 0.75rem;
     color: #597ef7;
 }
 
-#tab5 > .tab5-box > p:nth-child(1) {
+#tab7 > .tab7-box > p:nth-child(1) {
     position: relative;
     top: -6rem;
     left: 0.8rem;
@@ -200,7 +260,7 @@ html {
     font-size: 1.75rem;
 }
 
-#tab5 > .tab5-box > p:nth-child(2) {
+#tab7 > .tab7-box > p:nth-child(2) {
     position: relative;
     top: 3.2rem;
     left: 7.8rem;
@@ -208,7 +268,7 @@ html {
     font-size: 3.5rem;
 }
 
-#tab5 > .tab5-box > p:nth-child(3) {
+#tab7 > .tab7-box > p:nth-child(3) {
     position: relative;
     top: 8rem;
     left: 2rem;
@@ -216,7 +276,7 @@ html {
     font-size: 2.5rem;
 }
 
-#tab5 > .tab5-box > p:nth-child(4) {
+#tab7 > .tab7-box > p:nth-child(4) {
     position: relative;
     top: -13rem;
     left: 11.7rem;
@@ -224,7 +284,7 @@ html {
     font-size: 1.75rem;
 }
 
-#tab5 > .tab5-box > p:nth-child(5) {
+#tab7 > .tab7-box > p:nth-child(5) {
     position: relative;
     top: -5.6rem;
     left: 9.7rem;
@@ -232,51 +292,52 @@ html {
     font-size: 2rem;
 }
 
-#tab5 > .tab5-box > p:nth-child(6) {
+#tab7 > .tab7-box > p:nth-child(6) {
+    position: relative;
+    top: 3rem;
+    left: 2rem;
+    font-size: 1.5rem;
+    line-height: 3rem;
+}
+
+#tab7 > .tab7-box > p:nth-child(6) > small {
+    font-size: 3rem;
+}
+
+#tab7 > .tab7-box > p:nth-child(7) {
     position: relative;
     top: 2rem;
     left: 2rem;
     font-size: 1.5rem;
+    line-height: 3rem;
 }
 
-#tab5 > .tab5-box > p:nth-child(6) > small {
+#tab7 > .tab7-box > p:nth-child(7) > small {
-    font-size: 3rem;
-}
-
-#tab5 > .tab5-box > p:nth-child(7) {
-    position: relative;
-    top: 2rem;
-    left: 2rem;
-    font-size: 1.5rem;
-    line-height: 0;
-}
-
-#tab5 > .tab5-box > p:nth-child(7) > small {
     font-size: 3rem;
 }
 
 
-#tab6 {
+#tab8 {
-    background-image: url('../img/page6.jpg');
+    background-image: url('../img/page8.jpg');
 }
 
-#tab6 > .tab6-box {
+#tab8 > .tab8-box {
     position: fixed;
     bottom: 7%;
     padding-left: 2rem;
-    font-size: 1.75rem;
+    font-size:1.75rem;
     color: #FFFFFFD9;
 }
 
-#tab7 {
+#tab9 {
-    background-image: url('../img/page7.jpg');
+    background-image: url('../img/page9.jpg');
 }
 
-#tab7 > .tab7-box{
+#tab9 > .tab9-box {
     padding: 2rem 2rem;
 }
 
-.tab7-box > p {
+.tab9-box > p {
     font-family: 'dongzhu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
     'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
     'Noto Color Emoji';

templates/painting.html

@@ -70,31 +70,47 @@
 </div>
 <div class="container animate__animated animate__fadeIn animate__slow" id="tab4">
     <div class="tab4-box">
-        <p class="animate__animated animate__fadeInDown animate__delay-1s">{{ special_post.date }}那天，你写下了</p>
+        <p class="animate__animated animate__fadeInLeft animate__delay-1s"> 其中 </p>
+        <p class="animate__animated animate__fadeInLeft animate__delay-2s"> {{ long_post.title }} </p>
+        <p class="animate__animated animate__fadeInLeft animate__delay-3s"> {{ long_post.content[:50] }}</p>
+        <p class="animate__animated animate__fadeIn animate__delay-4s"> 长似一江春水</p>
+        <p class="animate__animated animate__fadeIn animate__delay-5s"> 永不止息 ~ </p>
+    </div>
+</div>
+<div class="container animate__animated animate__fadeIn animate__slow" id="tab5">
+    <div class="tab5-box">
+        <p class="animate__animated animate__fadeInDown animate__delay-1s">在{{ special_post.date }}那天，你写下了</p>
         <p class="animate__animated animate__fadeInDown animate__delay-2s">{{ special_post.title }}</p>
         <p class="animate__animated animate__fadeInDown animate__delay-3s">{{ special_post.content[:50] }}<small>……</small>
         </p>
     </div>
 </div>
-<div class="container animate__animated animate__fadeIn animate__slow" id="tab5">
+<div class="container animate__animated animate__fadeIn animate__slow" id="tab6">
-    <div class="tab5-box">
+    <div class="tab6-box">
+        <p class="animate__animated animate__fadeInUp animate__delay-1s">{{ sentiment_post.title }}</p>
+        <p class="animate__animated animate__fadeInUp animate__delay-2s">{{ sentiment_post.content[:50] }}</p>
+        <p class="animate__animated animate__fadeIn animate__delay-3s">如初春的暖阳，宁静而怡人</p>
+    </div>
+</div>
+<div class="container animate__animated animate__fadeIn animate__slow" id="tab7">
+    <div class="tab7-box">
         {% for keyword in blog.top_post_keys[0:5] %}
-            <p>{{ keyword[0] }}</p>
+            <p class="animate__animated animate__fadeIn animate__delay-1s">{{ keyword[0] }}</p>
         {% endfor %}
         <p class="animate__animated animate__fadeInDown animate__delay-1s">这些都是<small>你</small>的</p>
         <p class="animate__animated animate__fadeInDown animate__delay-2s">专属<small>关键词</small></p>
     </div>
 </div>
-<div class="container animate__animated animate__fadeIn animate__slow" id="tab6">
+<div class="container animate__animated animate__fadeIn animate__slow" id="tab8">
-    <div class="tab6-box">
+    <div class="tab8-box">
         <p class="animate__animated animate__fadeInLeft animate__delay-1s">
             热爱{% if blog.category == 1 %}生活{% else %}技术{% endif %}的你
         </p>
         <p class="animate__animated animate__fadeInLeft animate__delay-2s">一定要继续砥砺前行!</p>
     </div>
 </div>
-<div class="container animate__animated animate__fadeIn animate__slow" id="tab7">
+<div class="container animate__animated animate__fadeIn animate__slow" id="tab9">
-    <div class="tab7-box">
+    <div class="tab9-box">
         <p id="yiyan"> {{ custom.yiyan }}</p>
     </div>
 </div>