Browse Source

feat: 添加二维码图标,优化个人主页布局,调整样式和组件逻辑

EvilDragon 3 months ago
parent
commit
3b1ee72ba2

+ 14 - 9
packages/app/src/pages/mine/homepage/index.vue

@@ -32,6 +32,7 @@ import { handleUpvoteClick, handleShareClick } from '../../../core/libs/actions'
 import { usePermissions } from '../../../composables/permissions'
 import ImageEvo from '@/components/image-evo.vue'
 import more from '@designer-hub/assets/src/libs/assets/more'
+import qrCode from '@designer-hub/assets/src/libs/assets/qrCode'
 
 const { features } = usePermissions()
 const { alert, confirm } = useMessage()
@@ -196,10 +197,8 @@ defineExpose({
       </div>
       <div class="absolute bottom-0 left-0 right-0">
         <div class="bg-gradient-to-t from-black to-transparent">
-          <div class="flex min-h-27">
-            <div
-              class="w-18 h-18 border-white border border-solid mx-3.5 rounded-full overflow-hidden"
-            >
+          <div class="flex min-h-27 px-3.5 gap-3.5">
+            <div class="w-18 h-18 border-white border border-solid rounded-full overflow-hidden">
               <wd-img
                 width="100%"
                 height="100%"
@@ -207,18 +206,24 @@ defineExpose({
               ></wd-img>
             </div>
             <div class="pb-8 flex-1">
-              <div class="text-white text-2xl font-normal font-['PingFang_SC'] leading-normal">
-                {{ memberInfo.name }}
+              <div class="flex items-center justify-between">
+                <div class="text-white text-2xl font-normal font-['PingFang_SC'] leading-normal">
+                  {{ memberInfo.name }}
+                </div>
+                <div class="flex items-center">
+                  <wd-img width="22" height="22" :src="qrCode"></wd-img>
+                  <wd-icon name="chevron-right" color="white" size="16"></wd-icon>
+                </div>
               </div>
+
               <div class="flex flex-wrap gap-4">
                 <template v-for="(it, i) in designerInfo?.personalIdentity?.split('、')" :key="i">
                   <div
-                    class="h-6 px-2 bg-black/10 rounded-[30px] border border-solid border-white/60 justify-center items-center gap-2.5 inline-flex"
+                    class="h-6 px-2 bg-black/10 rounded-[30px] border border-solid border-white/60 justify-center items-center box-border inline-flex"
                   >
                     <div
-                      class="text-center text-white text-[10px] font-normal font-['PingFang_SC'] leading-normal"
+                      class="text-center text-white text-[10px] font-normal font-['PingFang_SC']"
                     >
-                      <!-- 创设空间事务所创始人 -->
                       {{ it }}
                     </div>
                   </div>

+ 6 - 0
packages/assets/src/assets/qr-code.svg

@@ -0,0 +1,6 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.74941 10.2781H2.59297C2.31152 10.2781 2.08594 10.0504 2.08594 9.77109V2.6125C2.08594 2.33105 2.31367 2.10547 2.59297 2.10547H9.74941C10.0309 2.10547 10.2564 2.3332 10.2564 2.6125V9.76895C10.2564 10.0504 10.0287 10.2781 9.74941 10.2781ZM3.10215 9.26191H9.24238V3.12168H3.10215V9.26191Z" fill="white"/>
+<path d="M5.37549 5.39473H6.96963V6.98887H5.37549V5.39473ZM19.364 10.2781H12.2075C11.9261 10.2781 11.7005 10.0504 11.7005 9.77109V2.6125C11.7005 2.33105 11.9282 2.10547 12.2075 2.10547H19.364C19.6454 2.10547 19.871 2.3332 19.871 2.6125V9.76895C19.871 10.0504 19.6454 10.2781 19.364 10.2781ZM12.7167 9.26191H18.8569V3.12168H12.7167V9.26191Z" fill="white"/>
+<path d="M14.9895 5.39453H16.5836V6.98867H14.9895V5.39453ZM14.9895 17.8404H16.5836V19.4346H14.9895V17.8404ZM18.2035 17.8404H19.7977V19.4346H18.2035V17.8404ZM9.74941 19.9416H2.59297C2.31152 19.9416 2.08594 19.7139 2.08594 19.4346V12.2781C2.08594 11.9967 2.31367 11.7711 2.59297 11.7711H9.74941C10.0309 11.7711 10.2564 11.9988 10.2564 12.2781V19.4346C10.2564 19.7139 10.0287 19.9416 9.74941 19.9416ZM3.10215 18.9254H9.24238V12.7873H3.10215V18.9254Z" fill="white"/>
+<path d="M5.37549 15.0605H6.96963V16.6547H5.37549V15.0605ZM12.2075 19.9418C11.9261 19.9418 11.7005 19.7141 11.7005 19.4348V12.2783C11.7005 11.9969 11.9282 11.7713 12.2075 11.7713H15.5741C15.8556 11.7713 16.0812 11.999 16.0812 12.2783V15.3484H18.8548V11.9475C18.8548 11.666 19.0825 11.4404 19.3618 11.4404C19.6433 11.4404 19.8688 11.6682 19.8688 11.9475V15.8555C19.8688 16.1369 19.6411 16.3625 19.3618 16.3625H15.5741C15.2927 16.3625 15.0671 16.1348 15.0671 15.8555V12.7875H12.7167V19.4348C12.7167 19.7141 12.489 19.9418 12.2075 19.9418Z" fill="white"/>
+</svg>

+ 2 - 0
packages/assets/src/libs/assets/qrCode.ts

@@ -0,0 +1,2 @@
+import qrCode from '../../assets/qr-code.svg' 
+ export default qrCode