|
|
@@ -0,0 +1,305 @@
|
|
|
+<route lang="yaml">
|
|
|
+layout: tabbar
|
|
|
+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/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-[200px]">
|
|
|
+ <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>
|
Jake
