|
|
@@ -0,0 +1,161 @@
|
|
|
+<route lang="yaml">
|
|
|
+layout: tabbar
|
|
|
+style:
|
|
|
+ navigationBarTitleText: 全部设计师
|
|
|
+ navigationBarBackgroundColor: '#fff'
|
|
|
+</route>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import Card from '@/components/card.vue'
|
|
|
+import { integral, interact, system } from '@/core/libs/svgs'
|
|
|
+import { beforeNow } from '@/utils/date-util'
|
|
|
+import dayjs from 'dayjs'
|
|
|
+import { vipIcon, rightArrowIcon } from '@designer-hub/assets/src/svgs'
|
|
|
+
|
|
|
+const msgs = ref([
|
|
|
+ {
|
|
|
+ title: '王磊回复了你',
|
|
|
+ createdAt: Date.now(),
|
|
|
+ content: '设计师李家豪刚刚点赞了你的设计圈点击前往查看',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '李琳赞了你的设计圈',
|
|
|
+ createdAt: Date.now(),
|
|
|
+ content: '设计师李家豪刚刚点赞了你的设计圈点击前往查看',
|
|
|
+ },
|
|
|
+])
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <view class="flex-grow">
|
|
|
+ <div>
|
|
|
+ <wd-search
|
|
|
+ v-model="value"
|
|
|
+ @focus="focus"
|
|
|
+ @blur="blur"
|
|
|
+ @search="search"
|
|
|
+ @clear="clear"
|
|
|
+ @cancel="cancel"
|
|
|
+ @change="change"
|
|
|
+ maxlength="10"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="p-3.5 gap-3.5 flex flex-col">
|
|
|
+ <template v-for="({ title, createdAt, content }, i) in msgs" :key="i">
|
|
|
+ <Card>
|
|
|
+ <div class="items-center">
|
|
|
+ <div class="">
|
|
|
+ <div class="flex items-center">
|
|
|
+ <div
|
|
|
+ class="w-[55px] h-[55px] bg-neutral-100 rounded-full mr-2 flex items-center justify-center"
|
|
|
+ >
|
|
|
+ <wd-img
|
|
|
+ :src="{ integral: integral, system: system, interact: interact }"
|
|
|
+ ></wd-img>
|
|
|
+ </div>
|
|
|
+ <div class="flex flex-col flex-1">
|
|
|
+ <div class="flex-row flex items-center justify-between w-full">
|
|
|
+ <div class="flex-row flex items-center">
|
|
|
+ <div
|
|
|
+ class="text-black/90 text-base font-normal font-['PingFang SC'] leading-[10.18px]"
|
|
|
+ >
|
|
|
+ 苏小萌
|
|
|
+ </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/60 text-xs font-normal font-['PingFang SC'] leading-snug flex items-center"
|
|
|
+ >
|
|
|
+ <div>分享主页</div>
|
|
|
+ <wd-img width="13" height="13" :src="rightArrowIcon"></wd-img>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center gap-2 mt-[18px]">
|
|
|
+ <div
|
|
|
+ class="text-black/30 text-xs font-normal font-['PingFang SC'] leading-none"
|
|
|
+ >
|
|
|
+ 2天前访问
|
|
|
+ </div>
|
|
|
+ <div class="bg-[#eeeeee] w-[2px] h-[10px]"></div>
|
|
|
+ <div
|
|
|
+ class="text-black/30 text-xs font-normal font-['PingFang SC'] leading-none"
|
|
|
+ >
|
|
|
+ 积分：0
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="row-start-2 col-start-2 col-end-4">
|
|
|
+ <div class="flex items-center justify-between w-full mt-[20px]">
|
|
|
+ <div class="flex items-center">
|
|
|
+ <div class="w-2 h-2 bg-[#89f4e2] rounded-full mr-[7px]"></div>
|
|
|
+ <div class="text-black/90 text-xs font-normal font-['PingFang SC'] leading-snug">
|
|
|
+ 30天未跟进
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center">
|
|
|
+ <div class="w-2 h-2 bg-[#ffb96a] rounded-full mr-[7px]"></div>
|
|
|
+ <div class="text-black/90 text-xs font-normal font-['PingFang SC'] leading-snug">
|
|
|
+ 60天未产生积分
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center">
|
|
|
+ <div class="w-2 h-2 bg-[#c493ff] rounded-full mr-[7px]"></div>
|
|
|
+ <div class="text-black/90 text-xs font-normal font-['PingFang SC'] leading-snug">
|
|
|
+ 60天未消耗积分
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="row-start-5 col-start-2 col-end-4 flex items-center mt-[26px] justify-around"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="px-3 py-1.5 rounded-[30px] border border-[#ff2d2d] justify-center items-center gap-1 flex"
|
|
|
+ style="border: 1px solid #ff2d2d"
|
|
|
+ >
|
|
|
+ <div style="color: #ff2d2d" class="flex items-center">+</div>
|
|
|
+ <div class="text-[#ff2d2d] text-xs font-normal font-['PingFang SC'] leading-none">
|
|
|
+ 重点跟进
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="px-5 py-1 bg-[#e1ecff] rounded-[30px] border border-[#2357e9] justify-center items-center gap-1 inline-flex"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="text-center text-[#2357e9] text-sm font-normal font-['PingFang SC'] leading-normal"
|
|
|
+ >
|
|
|
+ 打电话
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="px-5 py-1 bg-[#0052d9] rounded-[30px] justify-center items-center gap-1 inline-flex"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="text-center text-white text-sm font-normal font-['PingFang SC'] leading-normal"
|
|
|
+ >
|
|
|
+ 写跟进
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Card>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style scoped lang="scss"></style>
|
Jake
