feat: new page aword

zzz1220 · Dec 3, 2023 · 6b0066c · 6b0066c
1 parent 824cff2
commit 6b0066c
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 9 deletions.
diff --git a/source/_data/aword.yml b/source/_data/aword.yml
@@ -1,8 +1,10 @@
 罗马数字:
   word: '关于罗马数字转阿拉伯数字，有一个很简单的逻辑就是如果从左往右看，
         一个数右边有比它更大的数，那就应该减去它，比如“IV”，
-        I 是 1， V是5，那就是先减去1 再加上5。'      
+        I 是 1， V是5，那就是先减去1 再加上5。'  
+  timestamp: 1700568719000         
 
 逆向思维:
   word: '逆向思维是一种通过反向思考或挑战传统观念来寻找创新解决方案的思考方式。
-        在数学中尤其常见，比如有n 堆苹果，求两边拿m堆的最大值，就是求n-m堆中间的最小值。'
+        在数学中尤其常见，比如有n 堆苹果，求两边拿m堆的最大值，就是求n-m堆中间的最小值。'
+  timestamp: 1701579729000     
diff --git a/themes/material/layout/_widget/page-aword.ejs b/themes/material/layout/_widget/page-aword.ejs
@@ -10,25 +10,45 @@
     .material-aword_container ul {
         list-style-type: none;
         padding: 0;
+        font-size: 1pc;
+        font-weight: 400;
+        color: #757575!important
     }
 
-    .material-aword_container li {
-        margin-bottom: 8px;
-        padding: 8px;
-        background-color: #f0f0f0;
+    .material-aword_container .material-aword_li {
+        display: flex;
+        flex-direction: column;
+        padding: 1rem;
+        margin: 1rem 0;
+        background: #fff;
         border-radius: 4px;
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     }
+
+    .material-aword_container .material-aword_li .material-aword_time {
+        font-size: 0.8pc;
+        align-self: flex-end;
+        padding-top: 1rem;
+        padding-right: 3rem;
+    }
+
+    .material-aword_container .material-aword_li:hover {
+        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
+    }
+
+
+
 </style>
 
 
 <div class="material-aword_container">
     <h4 class="material-aword_head">零碎想法</h4>
-    <ul class="material-post mdl-grid">
+    <ul class="">
         <% if (site.data.aword) { %>
             <% for (var i in site.data.aword) { %>
-                <li>
-                    <%= site.data.aword[i].word %>
+                <li class="material-aword_li mdl-shadow--2dp fade">
+                    <div><%= site.data.aword[i].word %></div>
+                    <div class="material-aword_time">- <%= new Date(site.data.aword[i].timestamp || null).toLocaleString('zh-CN') %></div>
                 </li>
                 <% } %>
                     <% } %>