feat:首页UI修改
This commit is contained in:
parent
0d2875ed01
commit
63a31a1382
@ -1,22 +1,22 @@
|
||||
<template>
|
||||
<view v-if="articles.length" class="article-container">
|
||||
<view class="flex items-center justify-between">
|
||||
<view class="text-lg font-semibold text-dark">健康宣教</view>
|
||||
<view class="module-title">健康宣教</view>
|
||||
<view class="flex items-center" @click="toList()">
|
||||
<view class="mr-5 text-base text-gray">更多</view>
|
||||
<image class="arrow-icon" src="/static/home/右箭头-灰色.png" mode="aspectFit"></image>
|
||||
<image class="arrow-icon" src="/static/home/arrow-right-gray.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-10">
|
||||
<view v-for="(article, index) in articles" :key="article._id"
|
||||
class="article-card flex px-20 py-20"
|
||||
class="article-card flex"
|
||||
:class="{'mb-15': index < articles.length - 1}">
|
||||
<image class="flex-shrink-0 mr-15 cover" :src="article.cover || '/static/home/健康宣教.png'" mode="aspectFill" />
|
||||
<image class="flex-shrink-0 cover" :src="article.cover || '/static/home/health-education.png'" mode="aspectFill" />
|
||||
<view class="w-0 flex-grow">
|
||||
<view class="text-base leading-normal font-semibold truncate mb-10 text-dark">
|
||||
<view class="article-title truncate mb-10">
|
||||
{{ article.title }}
|
||||
</view>
|
||||
<view v-if="article.summary" class="text-sm text-gray line-clamp-2">
|
||||
<view v-if="article.summary" class="article-summary line-clamp-2">
|
||||
{{ article.summary }}
|
||||
</view>
|
||||
</view>
|
||||
@ -75,13 +75,22 @@ watch(articleIds, n => {
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
.module-title {
|
||||
color: #000000;
|
||||
font-size: 36rpx;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.article-card {
|
||||
background: white;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
|
||||
box-shadow: 0 8rpx 10rpx 0 rgba(60, 169, 145, 0.06);
|
||||
transition: all 0.3s;
|
||||
min-height: 168rpx;
|
||||
align-items: center;
|
||||
min-height: 188rpx;
|
||||
padding: 20rpx;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.article-card:active {
|
||||
@ -90,9 +99,10 @@ watch(articleIds, n => {
|
||||
}
|
||||
|
||||
.cover {
|
||||
width: 160rpx;
|
||||
height: 128rpx;
|
||||
width: 272rpx;
|
||||
height: 151rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-right: 20rpx;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
@ -100,6 +110,22 @@ watch(articleIds, n => {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
color: #333333;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.article-summary {
|
||||
max-width: 402rpx;
|
||||
color: #666666;
|
||||
text-align: justify;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.line-clamp-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
|
||||
@ -58,25 +58,25 @@ const consultItems = ref([
|
||||
{
|
||||
id: "chat",
|
||||
label: "聊天咨询",
|
||||
icon: "/static/home/聊天咨询.png",
|
||||
icon: "/static/home/chat-consult.png",
|
||||
needSelectConsultant: true,
|
||||
},
|
||||
{
|
||||
id: "education",
|
||||
label: "我的宣教",
|
||||
icon: "/static/home/我的宣教.png",
|
||||
icon: "/static/home/my-education.png",
|
||||
path: "/pages/article/article-list",
|
||||
},
|
||||
{
|
||||
id: "survey",
|
||||
label: "我的问卷",
|
||||
icon: "/static/home/我的问卷.png",
|
||||
icon: "/static/home/my-questionnaire.png",
|
||||
path: "/pages/survey/survey-list",
|
||||
},
|
||||
{
|
||||
id: "rating",
|
||||
label: "服务评价",
|
||||
icon: "/static/home/服务评价.png",
|
||||
icon: "/static/home/service-rating.png",
|
||||
path: "",
|
||||
},
|
||||
]);
|
||||
@ -156,20 +156,25 @@ function handleAddNewArchive() {
|
||||
}
|
||||
|
||||
.consult-title {
|
||||
color: #000000;
|
||||
font-size: 36rpx;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
line-height: normal;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.consult-grid {
|
||||
height: 208rpx;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
border-radius: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx 30rpx;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
align-items: center;
|
||||
gap: 32rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 8rpx 10rpx 0 rgba(60, 169, 145, 0.06);
|
||||
}
|
||||
|
||||
.consult-item {
|
||||
@ -181,9 +186,8 @@ function handleAddNewArchive() {
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 50%;
|
||||
width: 80rpx;
|
||||
height: 80;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -196,14 +200,14 @@ function handleAddNewArchive() {
|
||||
}
|
||||
|
||||
.icon-img {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
.item-label {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
color: #666d76;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-weight: 400;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<view class="archive-container">
|
||||
<view class="mb-10 flex items-center justify-between">
|
||||
<view class="flex-shrink-0 text-lg font-semibold truncate text-dark">
|
||||
<view class="module-title flex-shrink-0 truncate">
|
||||
成员档案
|
||||
</view>
|
||||
<view class="flex items-center px-10 leading-normal text-base text-primary rounded-sm" @click="toManagePage()">
|
||||
<image class="manage-icon mr-5" src="/static/home/档案管理.png" mode="aspectFit"></image>
|
||||
<view>档案管理</view>
|
||||
<view class="flex items-center px-10 leading-normal rounded-sm" @click="toManagePage()">
|
||||
<image class="manage-icon mr-5" src="/static/home/archive-manage.png" mode="aspectFit"></image>
|
||||
<view style="font-size: 28rpx; color: #065BD6;">档案管理</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="customers.length === 0" class="flex items-center justify-center h-80 border-dashed text-dark rounded">
|
||||
@ -16,8 +16,13 @@
|
||||
<scroll-view scroll-x="true">
|
||||
<view class="flex flex-nowrap pb-5 ">
|
||||
<view v-for="i in customers" :key="i._id"
|
||||
class="customer-card flex-shrink-0 mr-15 p-15 rounded-lg relative"
|
||||
class="customer-card flex-shrink-0 mr-15 relative"
|
||||
:class="current && i._id === current._id ? 'current-customer' : ''" @click="toggle(i)">
|
||||
<!-- 关系标签 -->
|
||||
<view v-if="i.relationship" class="relationship-tag"
|
||||
:class="i.relationship === '本人' ? 'tag-blue' : 'tag-green'">
|
||||
{{ i.relationship }}
|
||||
</view>
|
||||
<view class="flex flex-col items-center">
|
||||
<view class="customer-name text-lg leading-normal font-semibold whitespace-nowrap mb-8"
|
||||
:class="current && i._id === current._id ? 'text-primary' : 'text-dark'">
|
||||
@ -27,14 +32,18 @@
|
||||
<image
|
||||
v-if="i.sex"
|
||||
class="sex-icon mr-5"
|
||||
:src="i.sex === '男' ? '/static/icon/male.png' : '/static/home/女性图标.png'"
|
||||
mode="aspectFit"
|
||||
:src="i.sex === '男' ? '/static/home/male.svg' : '/static/home/female.svg'"
|
||||
/>
|
||||
<view class="customer-age text-base leading-normal text-gray">
|
||||
{{ i.age > 0 ? i.age + '岁' : '' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 选中状态底部条和三角 -->
|
||||
<view v-if="current && i._id === current._id" class="active-indicator">
|
||||
<view class="active-bar"></view>
|
||||
<view class="active-triangle"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
@ -52,7 +61,7 @@
|
||||
<view class="info-content">
|
||||
<view class="flex items-center justify-between mb-8">
|
||||
<view class="info-title">个人基本信息</view>
|
||||
<image class="arrow-icon-small" src="/static/home/右箭头-蓝色.png" mode="aspectFit"></image>
|
||||
<image class="arrow-icon-small" src="/static/home/arrow-right-blue.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="info-subtitle">完善个人信息</view>
|
||||
</view>
|
||||
@ -62,7 +71,7 @@
|
||||
<view class="info-content">
|
||||
<view class="flex items-center justify-between mb-8">
|
||||
<view class="info-title">健康信息</view>
|
||||
<image class="arrow-icon-small" src="/static/home/右箭头-蓝色.png" mode="aspectFit"></image>
|
||||
<image class="arrow-icon-small" src="/static/home/arrow-right-blue.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="info-subtitle">上传健康档案</view>
|
||||
</view>
|
||||
@ -173,9 +182,11 @@ watch(() => props.corpId, n => {
|
||||
.archive-container {
|
||||
padding: 24rpx 30rpx;
|
||||
margin: 0 30rpx;
|
||||
background: linear-gradient(to bottom, #C2DCFF 0%, #C2DCFF 40%, #FFFFFF 100%);
|
||||
border-radius: 32rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
background: linear-gradient(181deg, #C2DCFF 1.01%, #FFFFFF 43.31%);
|
||||
border-radius: 16rpx;
|
||||
box-shadow:
|
||||
inset 0 2rpx 0 0 rgba(255, 255, 255, 0.82),
|
||||
0 8rpx 10rpx 0 rgba(60, 169, 145, 0.06);
|
||||
}
|
||||
|
||||
.manage-icon {
|
||||
@ -183,54 +194,103 @@ watch(() => props.corpId, n => {
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
.module-title {
|
||||
color: #000000;
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.customer-card {
|
||||
background: linear-gradient(180deg, #FFFFFF 0%, #F2F6FF 100%);
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
|
||||
transition: all 0.3s;
|
||||
min-width: 180rpx;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(180deg, #FFFFFF 0%, #E6EFFB 100%);
|
||||
border-radius: 12rpx;
|
||||
border: 2rpx solid #AECAF2;
|
||||
transition: all 0.2s;
|
||||
position: relative;
|
||||
border: 2rpx solid transparent;
|
||||
margin-bottom: 18rpx;
|
||||
}
|
||||
|
||||
.current-customer {
|
||||
background: #FFFFFF;
|
||||
border: 2rpx solid #5B9CFF;
|
||||
box-shadow: 0 4rpx 12rpx rgba(91, 156, 255, 0.25);
|
||||
}
|
||||
|
||||
.current-customer::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: -14rpx;
|
||||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 14rpx solid transparent;
|
||||
border-right: 14rpx solid transparent;
|
||||
border-top: 14rpx solid #5B9CFF;
|
||||
}
|
||||
|
||||
.current-customer::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: -12rpx;
|
||||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 12rpx solid transparent;
|
||||
border-right: 12rpx solid transparent;
|
||||
border-top: 12rpx solid #FFFFFF;
|
||||
z-index: 1;
|
||||
border: 2rpx solid #065BD6;
|
||||
}
|
||||
|
||||
.customer-name {
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.relationship-tag {
|
||||
position: absolute;
|
||||
top: -2rpx;
|
||||
right: -10rpx;
|
||||
padding: 4rpx 16rpx;
|
||||
font-size: 20rpx;
|
||||
line-height: normal;
|
||||
color: #fff;
|
||||
border-top-left-radius: 16rpx;
|
||||
border-bottom-left-radius: 16rpx;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.relationship-tag::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: -8rpx;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-right: 10rpx solid transparent;
|
||||
}
|
||||
|
||||
.tag-blue {
|
||||
background: #065BD6;
|
||||
}
|
||||
|
||||
.tag-blue::after {
|
||||
border-top: 8rpx solid #003F96;
|
||||
}
|
||||
|
||||
.tag-green {
|
||||
background: #1DBF98;
|
||||
}
|
||||
|
||||
.tag-green::after {
|
||||
border-top: 8rpx solid #0F8C6D;
|
||||
}
|
||||
|
||||
.active-indicator {
|
||||
position: absolute;
|
||||
bottom: -2rpx;
|
||||
left: -2rpx;
|
||||
right: -2rpx;
|
||||
height: 10rpx;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.active-bar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #065bd6;
|
||||
border-bottom-left-radius: 12rpx;
|
||||
border-bottom-right-radius: 12rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.active-triangle {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) rotate(45deg);
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
background: #065BD6;
|
||||
margin-top: -8rpx;
|
||||
}
|
||||
|
||||
.customer-age {
|
||||
color: #999999;
|
||||
}
|
||||
@ -255,11 +315,12 @@ watch(() => props.corpId, n => {
|
||||
.info-card-new {
|
||||
position: relative;
|
||||
padding: 24rpx;
|
||||
border-radius: 12rpx;
|
||||
background: linear-gradient(135deg, #F0F7FF 0%, #FFFFFF 100%);
|
||||
border-radius: 16rpx;
|
||||
background: linear-gradient(115deg, #F4F9FF 14.74%, #DBEAFF 66.11%);
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
|
||||
overflow: hidden;
|
||||
height: 140rpx;
|
||||
width: 310rpx;
|
||||
height: 94rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@ -282,11 +343,11 @@ watch(() => props.corpId, n => {
|
||||
}
|
||||
|
||||
.info-bg-base {
|
||||
background-image: url('/static/home/个人基本信息bg.svg');
|
||||
background-image: url('/static/home/basic-info-bg.svg');
|
||||
}
|
||||
|
||||
.info-bg-health {
|
||||
background-image: url('/static/home/健康信息bg.svg');
|
||||
background-image: url('/static/home/health-info-bg.svg');
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -4,10 +4,18 @@
|
||||
<template #header>
|
||||
<team-head :team="team" :teams="teams" @changeTeam="changeTeam" />
|
||||
</template>
|
||||
<view class="home-section home-section--first">
|
||||
<customer-archive :corpId="corpId" :team="team" @update:customers="handleCustomersUpdate" />
|
||||
</view>
|
||||
<view class="home-section">
|
||||
<consult :corpId="corpId" :teamId="team.teamId" :customers="customers" />
|
||||
</view>
|
||||
<view class="home-section">
|
||||
<team-mate :team="team" />
|
||||
</view>
|
||||
<view class="home-section">
|
||||
<article-list :team="team" />
|
||||
</view>
|
||||
</full-page>
|
||||
<yc-home v-else />
|
||||
</template>
|
||||
@ -38,7 +46,9 @@ const customers = ref([]);
|
||||
|
||||
const corpId = computed(() => team.value?.corpId);
|
||||
|
||||
const pageStyle = 'background: linear-gradient(to bottom, #065BD6 0%, #F6FAFA 400rpx);';
|
||||
// UI 两段式背景：顶部 281px 渐变 + 下方纯色（按 375 设计稿，281px ≈ 562rpx）
|
||||
const pageStyle =
|
||||
'background: linear-gradient(180deg, #065BD6 15.05%, #F6FAFA 95.37%) 0 0/100% 562rpx no-repeat, #F6FAFA;';
|
||||
|
||||
function handleCustomersUpdate(newCustomers) {
|
||||
customers.value = newCustomers;
|
||||
@ -85,4 +95,12 @@ useShow(() => {
|
||||
.home-container {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.home-section {
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.home-section--first {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -7,10 +7,10 @@
|
||||
</view>
|
||||
<view class="w-0 flex-grow ">
|
||||
<view class="flex items-center mb-10">
|
||||
<view class="flex-shrink-0 text-lg font-semibold text-white">{{ team.name }}</view>
|
||||
<view class="team-name flex-shrink-0">{{ team.name }}</view>
|
||||
<view v-if="teams.length > 1" class="flex-shrink-0 flex items-center switch-btn ml-10"
|
||||
@click="showDropDown = true">
|
||||
<image class="switch-icon" src="/static/home/切换团队.png" mode="aspectFit"></image>
|
||||
<image class="switch-icon" src="/static/home/switch-team.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="currentTeam" class="text-base text-white truncate">{{ currentTeam.corpName }}</view>
|
||||
@ -44,8 +44,12 @@
|
||||
</view>
|
||||
<view v-if="team.teamTroduce" class="team-introduce-wrapper">
|
||||
<view class="team-introduce flex items-center">
|
||||
<image class="laba-icon flex-shrink-0 mr-8" src="/static/home/喇叭介绍.png" mode="aspectFit"></image>
|
||||
<view class="flex-grow text-base text-dark leading-relaxed line-clamp-2">{{ team.teamTroduce }}</view>
|
||||
<!-- 顶部小三角形 -->
|
||||
<view class="triangle-wrapper">
|
||||
<view class="team-triangle"></view>
|
||||
</view>
|
||||
<image class="laba-icon flex-shrink-0" src="/static/home/speaker-intro.png" mode="aspectFit"></image>
|
||||
<view class="introduce-text flex-grow line-clamp-2">{{ team.teamTroduce }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -105,6 +109,16 @@ onMounted(() => {
|
||||
.laba-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-left: 12rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.team-name {
|
||||
color: #ffffff;
|
||||
font-size: 36rpx;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.switch-icon {
|
||||
@ -129,25 +143,44 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.team-introduce {
|
||||
background: linear-gradient(135deg, #C2DCFF 0%, #E6F2FF 100%);
|
||||
width: 690rpx;
|
||||
min-height: 111rpx;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(186deg, rgba(255, 255, 255, 0.4) 13.34%, rgba(255, 255, 255, 0.6) 99.17%);
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx 24rpx;
|
||||
padding: 20rpx 20rpx 20rpx 0;
|
||||
position: relative;
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 2rpx 8rpx rgba(6, 91, 214, 0.08);
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.team-introduce::before {
|
||||
content: '';
|
||||
.triangle-wrapper {
|
||||
position: absolute;
|
||||
left: 30rpx;
|
||||
top: -14rpx;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 14rpx solid transparent;
|
||||
border-right: 14rpx solid transparent;
|
||||
border-bottom: 14rpx solid #C2DCFF;
|
||||
filter: drop-shadow(0 -2rpx 0 rgba(255, 255, 255, 0.9));
|
||||
top: -12rpx;
|
||||
left: 60rpx;
|
||||
width: 24rpx;
|
||||
height: 12rpx;
|
||||
overflow: hidden;
|
||||
z-index: 10;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.team-triangle {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: -10rpx;
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
background: linear-gradient(186deg, rgba(255, 255, 255, 0.4) 13.34%, rgba(255, 255, 255, 0.6) 99.17%);
|
||||
transform: translateX(-50%) rotate(45deg);
|
||||
}
|
||||
|
||||
.introduce-text {
|
||||
max-width: 594rpx;
|
||||
color: #000000;
|
||||
font-size: 24rpx;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.line-clamp-2 {
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<view class="team-mate-container">
|
||||
<view class="flex items-center justify-between">
|
||||
<view class="text-lg font-semibold text-dark">团队成员</view>
|
||||
<view class="module-title">团队成员</view>
|
||||
<view class="flex items-center" @click="toTeamDetail()">
|
||||
<view class="mr-5 text-base text-gray">团队详情</view>
|
||||
<image class="arrow-icon" src="/static/home/右箭头-灰色.png" mode="aspectFit"></image>
|
||||
<image class="arrow-icon" src="/static/home/arrow-right-gray.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-10">
|
||||
@ -16,10 +16,10 @@
|
||||
<image class="flex-shrink-0 avatar mr-10" :src="i.avatar || '/static/default-avatar.png'" />
|
||||
<view class="flex-grow flex flex-col justify-between">
|
||||
<view>
|
||||
<view class="leading-normal h-24 text-base font-semibold text-dark whitespace-nowrap">
|
||||
<view class="member-name leading-normal h-24 text-base font-semibold text-dark whitespace-nowrap">
|
||||
{{ i.anotherName }}
|
||||
</view>
|
||||
<view class="max-w-100 h-21 leading-normal text-sm text-gray truncate">
|
||||
<view class="member-job max-w-100 h-21 leading-normal text-sm text-gray truncate">
|
||||
{{ memberJob[i.userid] }}
|
||||
</view>
|
||||
</view>
|
||||
@ -101,13 +101,36 @@ watch(teamates, val => {
|
||||
}
|
||||
|
||||
.add-friend-btn {
|
||||
width: 144rpx;
|
||||
padding: 10rpx 0;
|
||||
background: #EAF2FF;
|
||||
color: #2F6BFF;
|
||||
border-radius: 12rpx;
|
||||
width: 128rpx;
|
||||
height: 48rpx;
|
||||
line-height: 48rpx;
|
||||
padding: 0;
|
||||
background: rgba(6, 91, 214, 0.10);
|
||||
color: #065BD6;
|
||||
border-radius: 8rpx;
|
||||
margin-top: 10rpx;
|
||||
font-weight: 500;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.module-title {
|
||||
color: #000000;
|
||||
font-size: 36rpx;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.member-job {
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.member-name {
|
||||
color: #333333;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.h-24 {
|
||||
|
||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 498 B After Width: | Height: | Size: 498 B |
|
Before Width: | Height: | Size: 483 B After Width: | Height: | Size: 483 B |
|
Before Width: | Height: | Size: 5.6 KiB After Width: | Height: | Size: 5.6 KiB |
|
Before Width: | Height: | Size: 7.9 KiB After Width: | Height: | Size: 7.9 KiB |
1
static/home/female.svg
Normal file
1
static/home/female.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1770103681929" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5978" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M877.714286 365.714286C877.714286 163.7504 713.963886 0 512 0S146.285714 163.7504 146.285714 365.714286c0 183.285029 134.999771 334.6432 310.857143 361.142857L457.142857 804.571429l-164.571429 0 0 109.714286 164.571429 0 0 109.714286 109.714286 0 0-109.714286 164.571429 0 0-109.714286-164.571429 0 0-77.714286C742.714514 700.357486 877.714286 548.999314 877.714286 365.714286zM256 365.714286c0-141.143771 114.856229-256 256-256s256 114.856229 256 256-114.856229 256-256 256S256 506.858057 256 365.714286z" fill="#F69661" p-id="5979"></path></svg>
|
||||
|
After Width: | Height: | Size: 880 B |
|
Before Width: | Height: | Size: 74 KiB After Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 5.7 KiB After Width: | Height: | Size: 5.7 KiB |
1
static/home/male.svg
Normal file
1
static/home/male.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1770103702423" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2069" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M914.285714 0 658.285714 0l0 109.714286 178.428343 0-160.393143 160.393143C605.429029 215.606857 516.928 182.857143 420.571429 182.857143 188.286171 182.857143 0 371.143314 0 603.428571s188.286171 420.571429 420.571429 420.571429 420.571429-188.286171 420.571429-420.571429c0-96.356571-32.749714-184.8576-87.250286-255.749486L914.285714 187.285943 914.285714 365.714286l109.714286 0L1024 109.714286 1024 0 914.285714 0zM420.571429 914.285714c-171.392 0-310.857143-139.465143-310.857143-310.857143s139.465143-310.857143 310.857143-310.857143 310.857143 139.465143 310.857143 310.857143S591.963429 914.285714 420.571429 914.285714z" fill="#1296db" p-id="2070"></path></svg>
|
||||
|
After Width: | Height: | Size: 1004 B |
|
Before Width: | Height: | Size: 8.3 KiB After Width: | Height: | Size: 8.3 KiB |
|
Before Width: | Height: | Size: 7.6 KiB After Width: | Height: | Size: 7.6 KiB |
|
Before Width: | Height: | Size: 9.5 KiB After Width: | Height: | Size: 9.5 KiB |
|
Before Width: | Height: | Size: 5.8 KiB After Width: | Height: | Size: 5.8 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 947 B |
Loading…
x
Reference in New Issue
Block a user