feat：首页UI优化
This commit is contained in:
parent
f50f4f9533
commit
0d2875ed01
@ -11,7 +11,7 @@
|
||||
<view v-for="(article, index) in articles" :key="article._id"
|
||||
class="article-card flex px-20 py-20"
|
||||
: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="text-base leading-normal font-semibold truncate mb-10 text-dark">
|
||||
{{ article.title }}
|
||||
@ -65,7 +65,6 @@ watch(articleIds, n => {
|
||||
</script>
|
||||
<style scoped>
|
||||
.article-container {
|
||||
padding: 24rpx 30rpx;
|
||||
margin: 0 30rpx;
|
||||
margin-top: 24rpx;
|
||||
padding-bottom: 40rpx;
|
||||
@ -81,6 +80,8 @@ watch(articleIds, n => {
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
|
||||
transition: all 0.3s;
|
||||
min-height: 168rpx;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.article-card:active {
|
||||
@ -90,7 +91,7 @@ watch(articleIds, n => {
|
||||
|
||||
.cover {
|
||||
width: 160rpx;
|
||||
height: 120rpx;
|
||||
height: 128rpx;
|
||||
border-radius: 12rpx;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
@ -9,8 +9,8 @@
|
||||
:key="item.id"
|
||||
@click="handleItemClick(item)"
|
||||
>
|
||||
<view class="item-icon" :style="{ background: item.bgColor }">
|
||||
<image :src="item.icon" class="icon-img" mode="aspectFit" />
|
||||
<view class="item-icon">
|
||||
<image :src="item.icon" class="icon-img" mode="aspectFill" />
|
||||
</view>
|
||||
<view class="item-label">{{ item.label }}</view>
|
||||
</view>
|
||||
@ -59,28 +59,24 @@ const consultItems = ref([
|
||||
id: "chat",
|
||||
label: "聊天咨询",
|
||||
icon: "/static/home/聊天咨询.png",
|
||||
bgColor: "linear-gradient(135deg, #5DADE2 0%, #3498DB 100%)",
|
||||
needSelectConsultant: true,
|
||||
},
|
||||
{
|
||||
id: "education",
|
||||
label: "我的宣教",
|
||||
icon: "/static/home/我的宣教.png",
|
||||
bgColor: "linear-gradient(135deg, #F4D03F 0%, #F39C12 100%)",
|
||||
path: "/pages/article/article-list",
|
||||
},
|
||||
{
|
||||
id: "survey",
|
||||
label: "我的问卷",
|
||||
icon: "/static/home/我的问卷.png",
|
||||
bgColor: "linear-gradient(135deg, #58D68D 0%, #27AE60 100%)",
|
||||
path: "/pages/survey/survey-list",
|
||||
},
|
||||
{
|
||||
id: "rating",
|
||||
label: "服务评价",
|
||||
icon: "/static/home/服务评价.png",
|
||||
bgColor: "linear-gradient(135deg, #AF7AC5 0%, #8E44AD 100%)",
|
||||
path: "",
|
||||
},
|
||||
]);
|
||||
@ -155,7 +151,6 @@ function handleAddNewArchive() {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.consult-container {
|
||||
padding: 24rpx 30rpx;
|
||||
margin: 0 30rpx;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
@ -170,7 +165,7 @@ function handleAddNewArchive() {
|
||||
.consult-grid {
|
||||
background: #fff;
|
||||
border-radius: 32rpx;
|
||||
padding: 32rpx;
|
||||
padding: 24rpx 30rpx;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 32rpx;
|
||||
@ -181,19 +176,19 @@ function handleAddNewArchive() {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
gap: 12rpx;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: transform 0.2s;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.consult-item:active .item-icon {
|
||||
@ -201,12 +196,12 @@ function handleAddNewArchive() {
|
||||
}
|
||||
|
||||
.icon-img {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
}
|
||||
|
||||
.item-label {
|
||||
font-size: 28rpx;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
|
||||
@ -16,26 +16,24 @@
|
||||
<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 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)">
|
||||
<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'">
|
||||
{{ i.name }}
|
||||
</view>
|
||||
<view class="flex items-center">
|
||||
<image v-if="i.sex" class="sex-icon mr-5"
|
||||
:src="i.sex === '男' ? '/static/icon/male.png' : '/static/home/女性图标.png'"
|
||||
mode="aspectFit"></image>
|
||||
<view class="text-base leading-normal"
|
||||
:class="current && i._id === current._id ? 'text-primary' : 'text-gray'">
|
||||
<view class="flex items-center mb-5">
|
||||
<image
|
||||
v-if="i.sex"
|
||||
class="sex-icon mr-5"
|
||||
:src="i.sex === '男' ? '/static/icon/male.png' : '/static/home/女性图标.png'"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<view class="customer-age text-base leading-normal text-gray">
|
||||
{{ i.age > 0 ? i.age + '岁' : '' }}
|
||||
</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>
|
||||
@ -48,25 +46,25 @@
|
||||
授权
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="current" class="flex mt-10">
|
||||
<view class="info-card flex-grow mr-10" @click="fillBaseInfo()">
|
||||
<image class="info-bg" src="/static/home/个人基本信息bg.svg" mode="aspectFit"></image>
|
||||
<view v-if="current" class="flex mt-15">
|
||||
<view class="info-card-new flex-grow mr-10" @click="fillBaseInfo()">
|
||||
<view class="info-bg info-bg-base"></view>
|
||||
<view class="info-content">
|
||||
<view class="flex items-center justify-between mb-5">
|
||||
<view class="text-lg text-dark">个人基本信息</view>
|
||||
<image class="arrow-icon" src="/static/home/右箭头-蓝色.png" mode="aspectFit"></image>
|
||||
<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>
|
||||
</view>
|
||||
<view class="text-base text-gray">完善个人信息</view>
|
||||
<view class="info-subtitle">完善个人信息</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-card flex-grow" @click="toHealthList()">
|
||||
<image class="info-bg" src="/static/home/健康信息bg.svg" mode="aspectFit"></image>
|
||||
<view class="info-card-new flex-grow" @click="toHealthList()">
|
||||
<view class="info-bg info-bg-health"></view>
|
||||
<view class="info-content">
|
||||
<view class="flex items-center justify-between mb-5">
|
||||
<view class="text-lg text-dark">个人健康信息</view>
|
||||
<image class="arrow-icon" src="/static/home/右箭头-蓝色.png" mode="aspectFit"></image>
|
||||
<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>
|
||||
</view>
|
||||
<view class="text-base text-gray">填写健康信息</view>
|
||||
<view class="info-subtitle">上传健康档案</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -175,7 +173,7 @@ watch(() => props.corpId, n => {
|
||||
.archive-container {
|
||||
padding: 24rpx 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;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
@ -186,16 +184,67 @@ watch(() => props.corpId, n => {
|
||||
}
|
||||
|
||||
.customer-card {
|
||||
background: white;
|
||||
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;
|
||||
position: relative;
|
||||
border: 2rpx solid transparent;
|
||||
margin-bottom: 18rpx;
|
||||
}
|
||||
|
||||
.current-customer {
|
||||
background: linear-gradient(135deg, #E3F2FF 0%, #FFFFFF 100%);
|
||||
border: 2rpx solid #065BD6;
|
||||
box-shadow: 0 4rpx 12rpx rgba(6, 91, 214, 0.2);
|
||||
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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
@ -203,29 +252,28 @@ watch(() => props.corpId, n => {
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
.relationship-tag {
|
||||
margin-top: 8rpx;
|
||||
border: 1rpx solid currentColor;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
.info-card-new {
|
||||
position: relative;
|
||||
padding: 20rpx;
|
||||
border-radius: 16rpx;
|
||||
background: white;
|
||||
padding: 24rpx;
|
||||
border-radius: 12rpx;
|
||||
background: linear-gradient(135deg, #F0F7FF 0%, #FFFFFF 100%);
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
|
||||
overflow: hidden;
|
||||
min-height: 160rpx;
|
||||
height: 140rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.info-bg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
opacity: 0.8;
|
||||
z-index: 0;
|
||||
background-repeat: no-repeat;
|
||||
background-position: right bottom;
|
||||
background-size: cover;
|
||||
opacity: 0.95;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.info-content {
|
||||
@ -233,9 +281,34 @@ watch(() => props.corpId, n => {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
.info-bg-base {
|
||||
background-image: url('/static/home/个人基本信息bg.svg');
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<view>
|
||||
<view :style="{ height: statusBarHeight }" class="bg-primary"></view>
|
||||
<view class="relative z-3 flex items-center px-15 py-12 bg-primary">
|
||||
<view :style="{ height: statusBarHeight }" class="status-bar"></view>
|
||||
<view class="relative z-3 flex items-center px-15 py-12 header-bar">
|
||||
<view class="flex-shrink-0 mr-5">
|
||||
<group-avatar :size="120" :avatarList="currentTeam ? currentTeam.avatarList : []" />
|
||||
</view>
|
||||
<view class="w-0 flex-grow ">
|
||||
<view class="flex mb-10">
|
||||
<view class="w-0 flex-grow truncate 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 class="flex items-center mb-10">
|
||||
<view class="flex-shrink-0 text-lg font-semibold text-white">{{ 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>
|
||||
</view>
|
||||
@ -42,9 +42,11 @@
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="team.teamTroduce" class="px-15 py-12 flex team-introduce">
|
||||
<image class="laba-icon flex-shrink-0 mr-5" src="/static/home/喇叭介绍.png" mode="aspectFit"></image>
|
||||
<view class="w-0 flex-grow text-sm text-white leading-normal line-clamp-2">{{ team.teamTroduce }} </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>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="showDropDown" class="mask" @click="showDropDown = false"></view>
|
||||
@ -92,29 +94,74 @@ onMounted(() => {
|
||||
})
|
||||
</script>
|
||||
<style scoped>
|
||||
.status-bar {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.header-bar {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.laba-icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
.switch-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.switch-btn {
|
||||
padding: 4rpx;
|
||||
}
|
||||
|
||||
.team-introduce {
|
||||
background: rgba(194, 220, 255, 0.3);
|
||||
border-radius: 16rpx;
|
||||
margin: 0 16rpx;
|
||||
margin-top: -20rpx;
|
||||
.ml-10 {
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
|
||||
.team-introduce-wrapper {
|
||||
padding: 0 30rpx;
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: 30rpx;
|
||||
position: relative;
|
||||
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 {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
|
||||
@ -72,7 +72,6 @@ watch(teamates, val => {
|
||||
</script>
|
||||
<style scoped>
|
||||
.team-mate-container {
|
||||
padding: 24rpx 30rpx;
|
||||
margin: 0 30rpx;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
@ -102,11 +101,13 @@ watch(teamates, val => {
|
||||
}
|
||||
|
||||
.add-friend-btn {
|
||||
width: 140rpx;
|
||||
padding: 8rpx 0;
|
||||
border: 1rpx solid #065BD6;
|
||||
border-radius: 24rpx;
|
||||
margin-top: 8rpx;
|
||||
width: 144rpx;
|
||||
padding: 10rpx 0;
|
||||
background: #EAF2FF;
|
||||
color: #2F6BFF;
|
||||
border-radius: 12rpx;
|
||||
margin-top: 10rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.h-24 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user