fix: 抽奖ui优化 #494

frontend_nuxt/assets/global.css

@@ -16,6 +16,7 @@
   --menu-text-color: black;
   --scroller-background-color: rgba(130, 175, 180, 0.5);
   --normal-background-color: rgb(241, 241, 241);
+  --lottery-background-color: rgb(241, 241, 241);
   --login-background-color: rgb(248, 248, 248);
   --login-background-color-hover: #e0e0e0;
   --text-color: black;
@@ -42,6 +43,7 @@
   --menu-selected-background-color: rgba(255, 255, 255, 0.1);
   --menu-text-color: white;
   --normal-background-color: #000000;
+  --lottery-background-color: #4e4e4e;
   --login-background-color: #575757;
   --login-background-color-hover: #717171;
   --text-color: #eee;

frontend_nuxt/pages/new-post.vue

@@ -43,6 +43,7 @@
           @crop="onPrizeCropped"
         />
         <div class="prize-row">
+          <span class="prize-row-title">奖品图片</span>
           <label class="prize-container">
             <img v-if="prizeIcon" :src="prizeIcon" class="prize-preview" alt="prize" />
             <i v-else class="fa-solid fa-image default-prize-icon"></i>
@@ -51,11 +52,11 @@
           </label>
         </div>
         <div class="prize-name-row">
-          <span>奖品描述</span>
+          <span class="prize-row-title">奖品描述</span>
-          <input class="prize-name-input" v-model="prizeDescription" placeholder="奖品描述" />
+          <BaseInput v-model="prizeDescription" placeholder="奖品描述" />
         </div>
         <div class="prize-count-row">
-          <span>奖品数量</span>
+          <span class="prize-row-title">奖品数量</span>
           <div class="prize-count-input">
             <input
               class="prize-count-input-field"
@@ -66,7 +67,7 @@
           </div>
         </div>
         <div class="prize-time-row">
-          <span>抽奖结束时间</span>
+          <span class="prize-row-title">抽奖结束时间</span>
           <client-only>
             <flat-pickr v-model="endTime" :config="dateConfig" class="time-picker" />
           </client-only>
@@ -490,6 +491,7 @@ export default {
 .post-submit:hover {
   background-color: var(--primary-color-hover);
 }
+
 .post-submit.disabled:hover {
   background-color: var(--primary-color-disabled);
 }
@@ -534,8 +536,21 @@ export default {
   gap: 20px;
 }
 
+.prize-row-title {
+  font-size: 16px;
+  color: var(--text-color);
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
 .prize-row {
   display: flex;
+  flex-direction: column;
+}
+
+.prize-name-row {
+  display: flex;
+  flex-direction: column;
 }
 
 .prize-container {
@@ -545,11 +560,15 @@ export default {
   border-radius: 10px;
   overflow: hidden;
   cursor: pointer;
+  background-color: var(--lottery-background-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .default-prize-icon {
-  font-size: 100px;
+  font-size: 30px;
-  opacity: 0.5;
+  opacity: 0.1;
   color: var(--text-color);
 }
 
@@ -585,8 +604,7 @@ export default {
 .prize-count-row,
 .prize-time-row {
   display: flex;
-  align-items: center;
+  flex-direction: column;
-  gap: 10px;
 }
 
 .prize-count-input {
@@ -612,11 +630,18 @@ export default {
   padding: 0 10px;
   font-size: 16px;
   color: var(--text-color);
+  background-color: var(--lottery-background-color);
 }
 
 .time-picker {
   max-width: 200px;
   height: 30px;
+  background-color: var(--lottery-background-color);
+  border-radius: 5px;
+  border: 1px solid var(--border-color);
+  padding: 0 10px;
+  font-size: 16px;
+  color: var(--text-color);
 }
 
 @media (max-width: 768px) {

frontend_nuxt/pages/posts/[id]/index.vue

@@ -110,20 +110,35 @@
               <div class="prize-count">x {{ lottery.prizeCount }}</div>
             </div>
             <div class="prize-end-time prize-info-right">
-              <div class="prize-end-time-title">离结束还有</div>
+              <div v-if="!isMobile" class="prize-end-time-title">离结束还有</div>
               <div class="prize-end-time-value">{{ countdown }}</div>
-              <div
+              <div v-if="!isMobile" class="join-prize-button-container-desktop">
-                v-if="loggedIn && !hasJoined && !lotteryEnded"
+                <div
-                class="join-prize-button"
+                  v-if="loggedIn && !hasJoined && !lotteryEnded"
-                @click="joinLottery"
+                  class="join-prize-button"
-              >
+                  @click="joinLottery"
-                <div class="join-prize-button-text">参与抽奖</div>
+                >
-              </div>
+                  <div class="join-prize-button-text">参与抽奖</div>
-              <div v-else-if="hasJoined" class="join-prize-button-disabled">
+                </div>
-                <div class="join-prize-button-text">已参与</div>
+                <div v-else-if="hasJoined" class="join-prize-button-disabled">
+                  <div class="join-prize-button-text">已参与</div>
+                </div>
               </div>
             </div>
           </div>
+
+          <div v-if="isMobile" class="join-prize-button-container-mobile">
+            <div
+              v-if="loggedIn && !hasJoined && !lotteryEnded"
+              class="join-prize-button"
+              @click="joinLottery"
+            >
+              <div class="join-prize-button-text">参与抽奖</div>
+            </div>
+            <div v-else-if="hasJoined" class="join-prize-button-disabled">
+              <div class="join-prize-button-text">已参与</div>
+            </div>
+          </div>
         </div>
         <div class="prize-member-container">
           <img
@@ -145,6 +160,9 @@
               alt="avatar"
               @click="gotoUser(w.id)"
             />
+            <div v-if="lotteryWinners.length === 1" class="prize-member-winner-name">
+              {{ lotteryWinners[0].username }}
+            </div>
           </div>
         </div>
       </div>
@@ -1181,7 +1199,8 @@ export default {
   display: flex;
   flex-direction: column;
   gap: 10px;
-  background-color: var(--normal-background-color);
+  background-color: var(--lottery-background-color);
+  border-radius: 10px;
   padding: 10px;
 }
 
@@ -1190,6 +1209,12 @@ export default {
   flex-direction: row;
   justify-content: space-between;
   width: 100%;
+  align-items: center;
+}
+
+.join-prize-button-container-mobile {
+  margin-top: 15px;
+  margin-bottom: 10px;
 }
 
 .prize-icon {
@@ -1256,6 +1281,7 @@ export default {
   padding: 5px 10px;
   border-radius: 8px;
   cursor: pointer;
+  text-align: center;
 }
 
 .join-prize-button:hover {
@@ -1263,6 +1289,7 @@ export default {
 }
 
 .join-prize-button-disabled {
+  text-align: center;
   margin-left: 10px;
   background-color: var(--primary-color);
   color: white;
@@ -1278,6 +1305,8 @@ export default {
   height: 30px;
   margin-left: 3px;
   border-radius: 50%;
+  object-fit: cover;
+  cursor: pointer;
 }
 
 .prize-member-winner {
@@ -1348,5 +1377,10 @@ export default {
   .loading-container {
     width: 100%;
   }
+
+  .join-prize-button,
+  .join-prize-button-disabled {
+    margin-left: 0;
+  }
 }
 </style>