designer-hub/packages/merchant/src/pages/designer/homepage.vue

<route lang="yaml">
style:
  navigationBarTitleText: 个人主页
  navigationBarBackgroundColor: '#fff'
</route>

<script setup lang="ts">
import {
  vipIcon,
  shareIcon,
  praiseIcon,
  messageIcon,
  yinyongIcon,
  homepageBg,
  videoEyeIcon,
  videoPlayIcon,
} from '@designer-hub/assets/src/svgs'
const tab = ref(0)
const tabs = ref([
  { label: '案例', value: 'integral' },
  { label: '动态', value: 'system' },
  { label: '视频', value: 'interact' },
])
</script>

<template>
  <view>
    <div class="aspect-[1.13/1] absolute left-0 right-0 top-0">
      <wd-img width="100%" height="100%" :src="homepageBg" custom-class="vertical-top"></wd-img>
    </div>
    <div class="flex flex-col relative mt-[180px]">
      <div class="rounded-2xl flex items-center p-4">
        <div>
          <img class="w-16 h-16 rounded-full" src="https://via.placeholder.com/64x64" />
        </div>
        <div class="flex-1 ml-[11px]">
          <div class="flex flex-col w-[100%]">
            <div class="flex-row flex items-center justify-between w-full">
              <div class="flex-row flex items-center">
                <div class="text-white text-2xl font-normal font-['PingFang SC'] leading-normal">
                  苏小萌
                </div>

                <div
                  class="h-4 bg-neutral-100 rounded-[20px] justify-start items-center inline-flex flex-row ml-[9px]"
                >
                  <wd-img width="17" height="17" :src="vipIcon"></wd-img>

                  <div
                    class="text-black/40 text-[10px] font-normal font-['PingFang SC'] px-[7px] leading-none"
                  >
                    白银会员
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="mt-[12px] flex items-center">
            <div
              class="text-center text-white text-[10px] font-normal font-['PingFang SC'] leading-normal"
            >
              创设空间事务所创始人
            </div>
          </div>
        </div>
      </div>
      <div class="bg-white rounded-tl-2xl rounded-tr-2xl border-2 pa-[11px]">
        <div class="flex items-center justify-start gap-[6px]">
          <div class="text-black/90 text-base font-normal font-['PingFang SC'] leading-[26.98px]">
            10
          </div>
          <div class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-[26.98px]">
            从业年限
          </div>
          <div style="width: 1px; height: 10px; background-color: black"></div>
          <div class="text-black/90 text-base font-normal font-['PingFang SC'] leading-[26.98px]">
            10
          </div>
          <div class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-[26.98px]">
            客户
          </div>
        </div>
        <div
          class="w-[347px] h-10 text-black/40 text-sm font-normal font-['PingFang SC'] leading-normal mt-[21px]"
        >
          “设计没有风格，设计是对生活的一种诠释，不是所谓的造型与装饰！”
        </div>
        <div class="mt-[26px]">
          <div
            class="h-7 px-3 py-0.5 bg-[#e6e6e6]/40 rounded-[30px] justify-center items-center gap-2.5 inline-flex"
          >
            <div
              class="text-center text-black/60 text-xs font-normal font-['PingFang SC'] leading-normal"
            >
              日本设计游学
            </div>
          </div>
        </div>
      </div>
      <div>
        <wd-tabs v-model="tab">
          <block v-for="(item, index) in tabs" :key="item">
            <wd-tab :title="`${item.label}`">
              <view class="content ma-[15px]" v-if="index === 0">
                <div class="bg-white rounded-2xl shadow pa-[15px] mt-[20px] flex-col gap-2 flex">
                  <div class="flex items-center justify-between">
                    <div class="flex items-center">
                      <img
                        class="w-[35px] h-[35px] rounded-full"
                        src="https://via.placeholder.com/35x35"
                      />
                      <div
                        class="text-black/90 text-base font-normal font-['PingFang SC'] leading-[10.18px] ml-[11px]"
                      >
                        苏小萌
                      </div>
                    </div>
                    <div
                      class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-[10.18px]"
                    >
                      4小时前
                    </div>
                  </div>
                  <div
                    class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-normal mr-[15px] mt-[29px]"
                  >
                    和周老师在工作碰了环球项目，选了瓷砖款式，后天客户交定金，订单金额初步为 304958
                  </div>
                  <div class="mt-[15px]">
                    <img
                      class="w-[319px] h-[194px] rounded-lg"
                      src="https://via.placeholder.com/319x194"
                    />
                  </div>
                  <div
                    class="text-black text-lg font-normal font-['PingFang SC'] leading-[10.18px] mt-[20px]"
                  >
                    现代 ｜ 日星花园
                  </div>
                  <div
                    class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-[10.18px] mt-[18px]"
                  >
                    龙湖狮山天街生活广场三期·780 m²·全案定制
                  </div>
                  <div class="flex items-center justify-between mt-[19px]">
                    <div class="flex items-center gap-[8px]">
                      <wd-img width="17" height="17" :src="shareIcon"></wd-img>
                      <div
                        class="text-black/90 text-sm font-normal font-['D-DIN Exp'] leading-snug"
                      >
                        232
                      </div>
                    </div>
                    <div class="flex items-center gap-[8px]">
                      <wd-img width="17" height="17" :src="messageIcon"></wd-img>
                      <div
                        class="text-black/90 text-sm font-normal font-['D-DIN Exp'] leading-snug"
                      >
                        232
                      </div>
                    </div>
                    <div class="flex items-center gap-[8px]">
                      <wd-img width="17" height="17" :src="praiseIcon"></wd-img>
                      <div
                        class="text-black/90 text-sm font-normal font-['D-DIN Exp'] leading-snug"
                      >
                        232
                      </div>
                    </div>
                    <div
                      class="text-black/30 text-xs font-normal font-['PingFang SC'] leading-[10.18px]"
                    >
                      删除x
                    </div>
                  </div>
                </div>
              </view>
              <view class="content ma-[15px]" v-if="index === 1">
                <div class="bg-white rounded-2xl shadow pa-[15px] mt-[20px] flex-col gap-2 flex">
                  <div class="flex items-center justify-between">
                    <div class="flex items-center">
                      <img
                        class="w-[35px] h-[35px] rounded-full"
                        src="https://via.placeholder.com/35x35"
                      />
                      <div
                        class="text-black/90 text-base font-normal font-['PingFang SC'] leading-[10.18px] ml-[11px]"
                      >
                        苏小萌
                      </div>
                      <div
                        class="h-4 bg-neutral-100 rounded-[20px] justify-start items-center inline-flex flex-row ml-[9px]"
                      >
                        <wd-img width="17" height="17" :src="vipIcon"></wd-img>

                        <div
                          class="text-black/40 text-[10px] font-normal font-['PingFang SC'] px-[7px] leading-none"
                        >
                          白银会员
                        </div>
                      </div>
                    </div>
                    <div
                      class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-[10.18px]"
                    >
                      4小时前
                    </div>
                  </div>

                  <div class="mt-[15px]">
                    <img
                      class="w-[70px] h-[70px] rounded-lg"
                      src="https://via.placeholder.com/70x70"
                    />
                  </div>
                  <div
                    class="text-black/90 text-base font-normal font-['PingFang SC'] leading-[10.18px] mt-[30px]"
                  >
                    用心做好设计，为客户创造美好家居环境
                  </div>

                  <div
                    class="h-7 py-1.5 rounded-[50px] border border-black/20 justify-start items-center gap-[5px] inline-flex mt-[29px]"
                  >
                    <wd-img width="17" height="17" :src="yinyongIcon"></wd-img>

                    <div
                      class="text-black/60 text-xs font-normal font-['PingFang SC'] leading-none"
                    >
                      意大利游学设计班
                    </div>
                  </div>
                  <div class="flex items-center justify-between mt-[19px]">
                    <div class="flex items-center gap-[8px]">
                      <wd-img width="17" height="17" :src="shareIcon"></wd-img>
                      <div
                        class="text-black/90 text-sm font-normal font-['D-DIN Exp'] leading-snug"
                      >
                        232
                      </div>
                    </div>
                    <div class="flex items-center gap-[8px]">
                      <wd-img width="17" height="17" :src="messageIcon"></wd-img>
                      <div
                        class="text-black/90 text-sm font-normal font-['D-DIN Exp'] leading-snug"
                      >
                        232
                      </div>
                    </div>
                    <div class="flex items-center gap-[8px]">
                      <wd-img width="17" height="17" :src="praiseIcon"></wd-img>
                      <div
                        class="text-black/90 text-sm font-normal font-['D-DIN Exp'] leading-snug"
                      >
                        232
                      </div>
                    </div>
                    <div
                      class="text-black/30 text-xs font-normal font-['PingFang SC'] leading-[10.18px]"
                    >
                      删除x
                    </div>
                  </div>
                </div>
              </view>
              <view class="content" v-if="index === 2">
                <div class="pa-[15px] mt-[0px] flex-col gap-2">
                  <div class="grid-cols-2 gap-2.5 grid">
                    <div class="relative">
                      <img
                        class="w-[168px] h-[220px] rounded-lg"
                        src="https://via.placeholder.com/168x220"
                      />
                      <div style="position: absolute; top: 10px; left: 10px">
                        <wd-img width="17" height="17" :src="videoPlayIcon"></wd-img>
                      </div>
                      <div
                        style="position: absolute; bottom: 10px; right: 10px"
                        class="flex items-center gap-[2px]"
                      >
                        <div
                          class="text-[#cacaca] text-xs font-normal font-['PingFang SC'] leading-normal"
                        >
                          315
                        </div>
                        <wd-img width="17" height="17" :src="videoEyeIcon"></wd-img>
                      </div>
                    </div>
                  </div>
                </div>
              </view>
            </wd-tab>
          </block>
        </wd-tabs>
      </div>
    </div>
  </view>
</template>

<style scoped lang="scss">
:deep(.wd-tabs) {
  background: transparent;
}
</style>