Przeglądaj źródła

feat: 在首页添加荣誉徽章展示组件,优化样式和布局

EvilDragon 3 miesięcy temu
rodzic
commit
1d5ed327eb
1 zmienionych plików z 33 dodań i 0 usunięć
  1. 33 0
      packages/app/src/pages/mine/homepage/index.vue

+ 33 - 0
packages/app/src/pages/mine/homepage/index.vue

@@ -249,6 +249,39 @@ defineExpose({
       <div class="text-black/80 text-sm font-normal font-['PingFang_SC'] leading-normal">
         {{ designerInfo?.designDesc }}
       </div>
+
+      <div class="h-[42px] relative mr--3.5">
+        <div
+          class="h-[42px] left-0 right-20 top-0 absolute bg-gradient-to-r from-[#ffe9e9] via-[#fff7f7] to-[#fff8f8] rounded-tl-md rounded-bl-md"
+        ></div>
+        <div class="w-[186px] h-7 left-[80px] top-[7px] absolute overflow-hidden">
+          <div class="flex gap-4">
+            <template v-for="(it, i) in [1, 2, 3]" :key="i">
+              <div class="bg-[#fa9d3b]">
+                <wd-img width="28" height="24" src=""></wd-img>
+              </div>
+            </template>
+          </div>
+        </div>
+        <div
+          class="w-[61px] h-2 left-[14px] top-[23px] absolute bg-gradient-to-r from-[#ff9e91] via-[#ffe5d7] to-[#ffe4d6] rounded-tl-[20px] rounded-bl-[20px]"
+        ></div>
+        <div
+          class="w-12 h-[19px] left-[14px] top-[9px] absolute text-center text-black text-xs font-normal font-['PingFang SC'] leading-normal"
+        >
+          荣誉徽章
+        </div>
+        <div
+          class="w-[76px] h-[30px] px-3 py-[3px] right-0 top-0.5 absolute bg-black/90 rounded-tl-[30px] rounded-bl-[30px] justify-center items-center gap-2.5 inline-flex"
+        >
+          <div
+            class="text-center text-white text-xs font-normal font-['PingFang SC'] leading-normal"
+          >
+            查看荣誉
+          </div>
+        </div>
+      </div>
+
       <div
         v-if="isOwn || designerInfo?.videoNumber"
         class="bg-gradient-to-t from-[#fdf6ee] to-[#fefdfc] rounded-[10px] border border-[#fff4e6] border-solid flex items-center px-3.5 py-5 gap-3"