feat mobile handmade mall grid

web/src/mobile/styles.css

@@ -3543,105 +3543,40 @@ body {
 /* Olons 2 manual task mall */
 .m-task-mall {
   min-height: 100dvh;
-  padding: calc(18px + env(safe-area-inset-top)) 20px 32px;
+  padding: 0 12px 32px;
   background-color: #fffaf4;
   background-size: 100% auto;
   background-repeat: no-repeat;
 }
-.m-mall-search {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 12px;
-}
-.m-mall-search h1 {
-  margin: 0;
-  font-size: 28px;
-}
-.m-mall-search label {
-  height: 48px;
-  min-width: 0;
-  padding: 0 14px;
-  border-radius: 25px;
-  background: #fff;
-  color: #aaa;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.m-mall-search label .n-icon {
-  font-size: 24px;
-}
-.m-mall-search input {
-  width: 100%;
-  min-width: 0;
-  border: 0;
-  outline: 0;
-  background: transparent;
-}
-.m-mall-search > button,
-.m-mall-claim {
-  border: 0;
-  color: #fff;
-  background: #ff8b16;
-}
-.m-mall-search > button {
-  min-width: 72px;
-  height: 48px;
-  border-radius: 25px;
-  font-size: 17px;
+.m-task-mall > .m-page-header {
+  margin-inline: -2px;
 }
 .m-mall-banner {
   display: block;
   width: 100%;
-  margin-top: 18px;
+  margin: 0 0 12px;
   border-radius: 8px;
 }
-.m-mall-tabs {
-  min-height: 62px;
-  display: flex;
-  align-items: center;
-  gap: 24px;
-}
-.m-mall-tabs button {
-  min-height: 44px;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  font-size: 19px;
-}
-.m-mall-tabs button.active {
-  color: #ff6d50;
-  font-weight: 600;
-}
-.m-mall-tabs > .n-icon {
-  margin-left: auto;
-  font-size: 24px;
-}
 .m-mall-list {
   display: grid;
-  gap: 12px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px 6px;
 }
 .m-mall-task {
-  min-height: 128px;
-  padding: 12px;
-  border-radius: 8px;
-  background: #fff;
-  display: grid;
-  grid-template-columns: 104px minmax(0, 1fr) auto;
-  gap: 12px;
-  align-items: center;
-}
-.m-mall-cover {
-  width: 104px;
-  aspect-ratio: 1;
-  padding: 0;
+  min-width: 0;
+  padding: 0 0 11px;
   border: 0;
   border-radius: 8px;
+  background: #fff;
+  color: var(--m-ink);
   overflow: hidden;
-  background: #f0f0f0;
-  position: relative;
+  text-align: left;
+}
+.m-mall-cover {
   display: grid;
+  width: 100%;
+  aspect-ratio: 1;
+  background: #f0f0f0;
   place-items: center;
 }
 .m-mall-cover img {
@@ -3653,45 +3588,22 @@ body {
   color: #bbb;
   font-size: 38px;
 }
-.m-mall-cover span {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  padding: 4px;
-  background: rgba(109, 48, 11, 0.88);
-  color: #fff;
-  font-size: 12px;
-}
-.m-mall-task > div {
-  min-width: 0;
-}
-.m-mall-task h2 {
+.m-mall-task > strong {
   display: -webkit-box;
-  margin: 0 0 7px;
+  min-height: 2.5em;
+  margin: 8px 10px 3px;
   overflow: hidden;
-  font-size: 17px;
-  line-height: 1.35;
+  font-size: clamp(15px, 4.3vw, 19px);
+  font-weight: 600;
+  line-height: 1.22;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
+  -webkit-line-clamp: 3;
 }
-.m-mall-task strong {
+.m-mall-task > small {
   display: block;
-  color: #ff684d;
-  font-size: 21px;
-}
-.m-mall-task strong small {
-  font-size: 14px;
-}
-.m-mall-task p {
-  margin: 5px 0 0;
-  color: #b5b5b5;
-}
-.m-mall-claim {
-  min-width: 66px;
-  height: 38px;
-  border-radius: 20px;
-  font-size: 16px;
+  margin: 0 10px;
+  color: #555;
+  font-size: 13px;
 }
 
 /* Olons 2 leaderboard */
@@ -4028,23 +3940,6 @@ body {
   .m-leaderboard {
     padding-inline: 14px;
   }
-  .m-mall-task {
-    grid-template-columns: 92px minmax(0, 1fr) auto;
-    gap: 9px;
-    padding: 10px;
-  }
-  .m-mall-cover {
-    width: 92px;
-  }
-  .m-mall-search {
-    gap: 8px;
-  }
-  .m-mall-search h1 {
-    font-size: 23px;
-  }
-  .m-mall-search > button {
-    min-width: 60px;
-  }
   .m-claim-result {
     padding-inline: 20px;
   }