huxuejian/ykt-team-wxapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：首页UI优化

Browse Source
This commit is contained in:
Jafeng 2026-02-03 10:45:54 +08:00
parent f50f4f9533
commit 0d2875ed01
5 changed files with 205 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
pages/home/article-list.vue
View File

@ -11,7 +11,7 @@
<view v-for="(article, index) in articles" :key="article._id" <view v-for="(article, index) in articles" :key="article._id"
class="article-card flex px-20 py-20" class="article-card flex px-20 py-20"
:class="{'mb-15': index < articles.length - 1}"> :class="{'mb-15': index < articles.length - 1}">
<image class="flex-shrink-0 mr-15 cover" :src="article.cover || '/static/book.svg'" mode="aspectFill" /> <image class="flex-shrink-0 mr-15 cover" :src="article.cover || '/static/home/健康宣教.png'" mode="aspectFill" />
<view class="w-0 flex-grow"> <view class="w-0 flex-grow">
<view class="text-base leading-normal font-semibold truncate mb-10 text-dark"> <view class="text-base leading-normal font-semibold truncate mb-10 text-dark">
{{ article.title }} {{ article.title }}
@ -65,7 +65,6 @@ watch(articleIds, n => {
</script> </script>
<style scoped> <style scoped>
.article-container { .article-container {
padding: 24rpx 30rpx;
margin: 0 30rpx; margin: 0 30rpx;
margin-top: 24rpx; margin-top: 24rpx;
padding-bottom: 40rpx; padding-bottom: 40rpx;
@ -81,6 +80,8 @@ watch(articleIds, n => {
border-radius: 16rpx; border-radius: 16rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
transition: all 0.3s; transition: all 0.3s;
min-height: 168rpx;
align-items: center;
} }
.article-card:active { .article-card:active {
@ -90,7 +91,7 @@ watch(articleIds, n => {
.cover { .cover {
width: 160rpx; width: 160rpx;
height: 120rpx; height: 128rpx;
border-radius: 12rpx; border-radius: 12rpx;
object-fit: cover; object-fit: cover;
} }

25
pages/home/consult.vue
View File

@ -9,8 +9,8 @@
:key="item.id" :key="item.id"
@click="handleItemClick(item)" @click="handleItemClick(item)"
> >
<view class="item-icon" :style="{ background: item.bgColor }"> <view class="item-icon">
<image :src="item.icon" class="icon-img" mode="aspectFit" /> <image :src="item.icon" class="icon-img" mode="aspectFill" />
</view> </view>
<view class="item-label">{{ item.label }}</view> <view class="item-label">{{ item.label }}</view>
</view> </view>
@ -59,28 +59,24 @@ const consultItems = ref([
id: "chat", id: "chat",
label: "聊天咨询", label: "聊天咨询",
icon: "/static/home/聊天咨询.png", icon: "/static/home/聊天咨询.png",
bgColor: "linear-gradient(135deg, #5DADE2 0%, #3498DB 100%)",
needSelectConsultant: true, needSelectConsultant: true,
}, },
{ {
id: "education", id: "education",
label: "我的宣教", label: "我的宣教",
icon: "/static/home/我的宣教.png", icon: "/static/home/我的宣教.png",
bgColor: "linear-gradient(135deg, #F4D03F 0%, #F39C12 100%)",
path: "/pages/article/article-list", path: "/pages/article/article-list",
}, },
{ {
id: "survey", id: "survey",
label: "我的问卷", label: "我的问卷",
icon: "/static/home/我的问卷.png", icon: "/static/home/我的问卷.png",
bgColor: "linear-gradient(135deg, #58D68D 0%, #27AE60 100%)",
path: "/pages/survey/survey-list", path: "/pages/survey/survey-list",
}, },
{ {
id: "rating", id: "rating",
label: "服务评价", label: "服务评价",
icon: "/static/home/服务评价.png", icon: "/static/home/服务评价.png",
bgColor: "linear-gradient(135deg, #AF7AC5 0%, #8E44AD 100%)",
path: "", path: "",
}, },
]); ]);
@ -155,7 +151,6 @@ function handleAddNewArchive() {
<style lang="scss" scoped> <style lang="scss" scoped>
.consult-container { .consult-container {
padding: 24rpx 30rpx;
margin: 0 30rpx; margin: 0 30rpx;
margin-top: 24rpx; margin-top: 24rpx;
} }
@ -170,7 +165,7 @@ function handleAddNewArchive() {
.consult-grid { .consult-grid {
background: #fff; background: #fff;
border-radius: 32rpx; border-radius: 32rpx;
padding: 32rpx; padding: 24rpx 30rpx;
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
gap: 32rpx; gap: 32rpx;
@ -181,19 +176,19 @@ function handleAddNewArchive() {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 16rpx; gap: 12rpx;
cursor: pointer; cursor: pointer;
} }
.item-icon { .item-icon {
width: 112rpx; width: 88rpx;
height: 112rpx; height: 88rpx;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: transform 0.2s; transition: transform 0.2s;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); overflow: hidden;
} }
.consult-item:active .item-icon { .consult-item:active .item-icon {
@ -201,12 +196,12 @@ function handleAddNewArchive() {
} }
.icon-img { .icon-img {
width: 64rpx; width: 88rpx;
height: 64rpx; height: 88rpx;
} }
.item-label { .item-label {
font-size: 28rpx; font-size: 26rpx;
color: #333; color: #333;
text-align: center; text-align: center;
font-weight: 500; font-weight: 500;

167
pages/home/customer-archive.vue
View File

@ -16,26 +16,24 @@
<scroll-view scroll-x="true"> <scroll-view scroll-x="true">
<view class="flex flex-nowrap pb-5 "> <view class="flex flex-nowrap pb-5 ">
<view v-for="i in customers" :key="i._id" <view v-for="i in customers" :key="i._id"
class="customer-card flex-shrink-0 min-w-100 mr-10 p-10 rounded-lg relative" class="customer-card flex-shrink-0 mr-15 p-15 rounded-lg relative"
:class="current && i._id === current._id ? 'current-customer' : ''" @click="toggle(i)"> :class="current && i._id === current._id ? 'current-customer' : ''" @click="toggle(i)">
<view class="flex flex-col items-center"> <view class="flex flex-col items-center">
<view class="text-base leading-normal font-semibold whitespace-nowrap mb-5" <view class="customer-name text-lg leading-normal font-semibold whitespace-nowrap mb-8"
:class="current && i._id === current._id ? 'text-primary' : 'text-dark'"> :class="current && i._id === current._id ? 'text-primary' : 'text-dark'">
{{ i.name }} {{ i.name }}
</view> </view>
<view class="flex items-center"> <view class="flex items-center mb-5">
<image v-if="i.sex" class="sex-icon mr-5" <image
:src="i.sex === '男' ? '/static/icon/male.png' : '/static/home/女性图标.png'" v-if="i.sex"
mode="aspectFit"></image> class="sex-icon mr-5"
<view class="text-base leading-normal" :src="i.sex === '男' ? '/static/icon/male.png' : '/static/home/女性图标.png'"
:class="current && i._id === current._id ? 'text-primary' : 'text-gray'"> mode="aspectFit"
/>
<view class="customer-age text-base leading-normal text-gray">
{{ i.age > 0 ? i.age + '岁' : '' }} {{ i.age > 0 ? i.age + '岁' : '' }}
</view> </view>
</view> </view>
<view v-if="i.relationship" class="relationship-tag flex-shrink-0 px-5 rounded-sm text-sm leading-normal"
:class="current && i._id === current._id ? 'text-primary' : 'text-gray'">
{{ i.relationship }}
</view>
</view> </view>
</view> </view>
</view> </view>
@ -48,25 +46,25 @@
授权 授权
</view> </view>
</view> </view>
<view v-if="current" class="flex mt-10"> <view v-if="current" class="flex mt-15">
<view class="info-card flex-grow mr-10" @click="fillBaseInfo()"> <view class="info-card-new flex-grow mr-10" @click="fillBaseInfo()">
<image class="info-bg" src="/static/home/个人基本信息bg.svg" mode="aspectFit"></image> <view class="info-bg info-bg-base"></view>
<view class="info-content"> <view class="info-content">
<view class="flex items-center justify-between mb-5"> <view class="flex items-center justify-between mb-8">
<view class="text-lg text-dark">个人基本信息</view> <view class="info-title">个人基本信息</view>
<image class="arrow-icon" src="/static/home/右箭头-蓝色.png" mode="aspectFit"></image> <image class="arrow-icon-small" src="/static/home/右箭头-蓝色.png" mode="aspectFit"></image>
</view> </view>
<view class="text-base text-gray">完善个人信息</view> <view class="info-subtitle">完善个人信息</view>
</view> </view>
</view> </view>
<view class="info-card flex-grow" @click="toHealthList()"> <view class="info-card-new flex-grow" @click="toHealthList()">
<image class="info-bg" src="/static/home/健康信息bg.svg" mode="aspectFit"></image> <view class="info-bg info-bg-health"></view>
<view class="info-content"> <view class="info-content">
<view class="flex items-center justify-between mb-5"> <view class="flex items-center justify-between mb-8">
<view class="text-lg text-dark">个人健康信息</view> <view class="info-title">健康信息</view>
<image class="arrow-icon" src="/static/home/右箭头-蓝色.png" mode="aspectFit"></image> <image class="arrow-icon-small" src="/static/home/右箭头-蓝色.png" mode="aspectFit"></image>
</view> </view>
<view class="text-base text-gray">填写健康信息</view> <view class="info-subtitle">上传健康档案</view>
</view> </view>
</view> </view>
</view> </view>
@ -175,7 +173,7 @@ watch(() => props.corpId, n => {
.archive-container { .archive-container {
padding: 24rpx 30rpx; padding: 24rpx 30rpx;
margin: 0 30rpx; margin: 0 30rpx;
background: linear-gradient(to bottom, #C2DCFF 0%, #FFFFFF 100%); background: linear-gradient(to bottom, #C2DCFF 0%, #C2DCFF 40%, #FFFFFF 100%);
border-radius: 32rpx; border-radius: 32rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08); box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
} }
@ -186,16 +184,67 @@ watch(() => props.corpId, n => {
} }
.customer-card { .customer-card {
background: white; background: linear-gradient(180deg, #FFFFFF 0%, #F2F6FF 100%);
border-radius: 16rpx; border-radius: 16rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
transition: all 0.3s; transition: all 0.3s;
min-width: 180rpx;
position: relative;
border: 2rpx solid transparent;
margin-bottom: 18rpx;
} }
.current-customer { .current-customer {
background: linear-gradient(135deg, #E3F2FF 0%, #FFFFFF 100%); background: #FFFFFF;
border: 2rpx solid #065BD6; border: 2rpx solid #5B9CFF;
box-shadow: 0 4rpx 12rpx rgba(6, 91, 214, 0.2); 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;
}
.customer-name {
margin-top: 12rpx;
}
.customer-age {
color: #999999;
}
.mr-15 {
margin-right: 20rpx;
}
.mt-15 {
margin-top: 24rpx;
}
.mb-8 {
margin-bottom: 12rpx;
} }
.sex-icon { .sex-icon {
@ -203,29 +252,28 @@ watch(() => props.corpId, n => {
height: 32rpx; height: 32rpx;
} }
.relationship-tag { .info-card-new {
margin-top: 8rpx;
border: 1rpx solid currentColor;
}
.info-card {
position: relative; position: relative;
padding: 20rpx; padding: 24rpx;
border-radius: 16rpx; border-radius: 12rpx;
background: white; background: linear-gradient(135deg, #F0F7FF 0%, #FFFFFF 100%);
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
overflow: hidden; overflow: hidden;
min-height: 160rpx; height: 140rpx;
flex: 1;
} }
.info-bg { .info-bg {
position: absolute; position: absolute;
left: 0;
top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
width: 120rpx; background-repeat: no-repeat;
height: 120rpx; background-position: right bottom;
opacity: 0.8; background-size: cover;
z-index: 0; opacity: 0.95;
pointer-events: none;
} }
.info-content { .info-content {
@ -233,9 +281,34 @@ watch(() => props.corpId, n => {
z-index: 1; z-index: 1;
} }
.arrow-icon { .info-bg-base {
width: 32rpx; background-image: url('/static/home/个人基本信息bg.svg');
height: 32rpx; }
.info-bg-health {
background-image: url('/static/home/健康信息bg.svg');
}
.info-title {
color: #213E80;
font-size: 32rpx;
font-weight: 500;
}
.info-subtitle {
color: #78808F;
font-size: 24rpx;
}
.arrow-icon-small {
width: 24rpx;
height: 24rpx;
flex-shrink: 0;
}
.font-medium {
font-weight: 500;
} }
.h-80 { .h-80 {

81
pages/home/team-head.vue
View File

@ -1,14 +1,14 @@
<template> <template>
<view> <view>
<view :style="{ height: statusBarHeight }" class="bg-primary"></view> <view :style="{ height: statusBarHeight }" class="status-bar"></view>
<view class="relative z-3 flex items-center px-15 py-12 bg-primary"> <view class="relative z-3 flex items-center px-15 py-12 header-bar">
<view class="flex-shrink-0 mr-5"> <view class="flex-shrink-0 mr-5">
<group-avatar :size="120" :avatarList="currentTeam ? currentTeam.avatarList : []" /> <group-avatar :size="120" :avatarList="currentTeam ? currentTeam.avatarList : []" />
</view> </view>
<view class="w-0 flex-grow "> <view class="w-0 flex-grow ">
<view class="flex mb-10"> <view class="flex items-center mb-10">
<view class="w-0 flex-grow truncate text-lg font-semibold text-white">{{ team.name }}</view> <view class="flex-shrink-0 text-lg font-semibold text-white">{{ team.name }}</view>
<view v-if="teams.length > 1" class="flex-shinrk-0 flex items-center switch-btn" <view v-if="teams.length > 1" class="flex-shrink-0 flex items-center switch-btn ml-10"
@click="showDropDown = true"> @click="showDropDown = true">
<image class="switch-icon" src="/static/home/切换团队.png" mode="aspectFit"></image> <image class="switch-icon" src="/static/home/切换团队.png" mode="aspectFit"></image>
</view> </view>
@ -42,9 +42,11 @@
</scroll-view> </scroll-view>
</view> </view>
</view> </view>
<view v-if="team.teamTroduce" class="px-15 py-12 flex team-introduce"> <view v-if="team.teamTroduce" class="team-introduce-wrapper">
<image class="laba-icon flex-shrink-0 mr-5" src="/static/home/喇叭介绍.png" mode="aspectFit"></image> <view class="team-introduce flex items-center">
<view class="w-0 flex-grow text-sm text-white leading-normal line-clamp-2">{{ team.teamTroduce }} </view> <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>
</view> </view>
</view> </view>
<view v-if="showDropDown" class="mask" @click="showDropDown = false"></view> <view v-if="showDropDown" class="mask" @click="showDropDown = false"></view>
@ -92,29 +94,74 @@ onMounted(() => {
}) })
</script> </script>
<style scoped> <style scoped>
.status-bar {
background: transparent;
}
.header-bar {
background: transparent;
}
.laba-icon { .laba-icon {
width: 32rpx; width: 48rpx;
height: 32rpx; height: 48rpx;
} }
.switch-icon { .switch-icon {
width: 48rpx; width: 40rpx;
height: 48rpx; height: 40rpx;
} }
.switch-btn { .switch-btn {
padding: 4rpx; padding: 4rpx;
} }
.team-introduce { .ml-10 {
background: rgba(194, 220, 255, 0.3); margin-left: 12rpx;
border-radius: 16rpx; }
margin: 0 16rpx;
margin-top: -20rpx; .team-introduce-wrapper {
padding: 0 30rpx;
margin-top: 20rpx;
margin-bottom: 30rpx;
position: relative; position: relative;
z-index: 2; z-index: 2;
} }
.team-introduce {
background: linear-gradient(135deg, #C2DCFF 0%, #E6F2FF 100%);
border-radius: 16rpx;
padding: 20rpx 24rpx;
position: relative;
border: 2rpx solid rgba(255, 255, 255, 0.9);
box-shadow: 0 2rpx 8rpx rgba(6, 91, 214, 0.08);
}
.team-introduce::before {
content: '';
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));
}
.line-clamp-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
.leading-relaxed {
line-height: 1.6;
}
.check-icon { .check-icon {
width: 40rpx; width: 40rpx;
height: 40rpx; height: 40rpx;

13
pages/home/team-mate.vue
View File

@ -72,7 +72,6 @@ watch(teamates, val => {
</script> </script>
<style scoped> <style scoped>
.team-mate-container { .team-mate-container {
padding: 24rpx 30rpx;
margin: 0 30rpx; margin: 0 30rpx;
margin-top: 24rpx; margin-top: 24rpx;
} }
@ -102,11 +101,13 @@ watch(teamates, val => {
} }
.add-friend-btn { .add-friend-btn {
width: 140rpx; width: 144rpx;
padding: 8rpx 0; padding: 10rpx 0;
border: 1rpx solid #065BD6; background: #EAF2FF;
border-radius: 24rpx; color: #2F6BFF;
margin-top: 8rpx; border-radius: 12rpx;
margin-top: 10rpx;
font-weight: 500;
} }
.h-24 { .h-24 {