feat:首页UI修改

pages/home/article-list.vue

@@ -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;
+  min-height: 188rpx;
-  align-items: center;
+  padding: 20rpx;
+  align-items: flex-start;
 }
 
 .article-card:active {
@@ -90,9 +99,10 @@ watch(articleIds, n => {
 }
 
 .cover {
-  width: 160rpx;
+  width: 272rpx;
-  height: 128rpx;
+  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;

pages/home/consult.vue

@@ -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;
+  width: 80rpx;
-  height: 88rpx;
+  height: 80;
-  border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -196,14 +200,14 @@ function handleAddNewArchive() {
 }
 
 .icon-img {
-  width: 88rpx;
+  width: 80rpx;
-  height: 88rpx;
+  height: 80rpx;
 }
 
 .item-label {
-  font-size: 26rpx;
+  font-size: 28rpx;
-  color: #333;
+  color: #666d76;
   text-align: center;
-  font-weight: 500;
+  font-weight: 400;
 }
 </style>

pages/home/customer-archive.vue

@@ -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()">
+      <view class="flex items-center px-10 leading-normal rounded-sm" @click="toManagePage()">
-        <image class="manage-icon mr-5" src="/static/home/档案管理.png" mode="aspectFit"></image>
+        <image class="manage-icon mr-5" src="/static/home/archive-manage.png" mode="aspectFit"></image>
-        <view>档案管理</view>
+        <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'"
+                :src="i.sex === '男' ? '/static/home/male.svg' : '/static/home/female.svg'"
-                mode="aspectFit"
               />
               <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%);
+  background: linear-gradient(181deg, #C2DCFF 1.01%, #FFFFFF 43.31%);
-  border-radius: 32rpx;
+  border-radius: 16rpx;
-  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+  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%);
+  width: 160rpx;
-  border-radius: 16rpx;
+  height: 160rpx;
-  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
+  display: flex;
-  transition: all 0.3s;
+  align-items: center;
-  min-width: 180rpx;
+  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;
+  border: 2rpx solid #065BD6;
-  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;
 }
 
+.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;
+  border-radius: 16rpx;
-  background: linear-gradient(135deg, #F0F7FF 0%, #FFFFFF 100%);
+  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');
 }
 
 

pages/home/home.vue

@@ -4,10 +4,18 @@
     <template #header>
       <team-head :team="team" :teams="teams" @changeTeam="changeTeam" />
     </template>
-    <customer-archive :corpId="corpId" :team="team" @update:customers="handleCustomersUpdate" />
+    <view class="home-section home-section--first">
-    <consult :corpId="corpId" :teamId="team.teamId" :customers="customers" />
+      <customer-archive :corpId="corpId" :team="team" @update:customers="handleCustomersUpdate" />
-    <team-mate :team="team" />
+    </view>
-    <article-list :team="team" />
+    <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>

pages/home/team-head.vue

@@ -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);
+  overflow: visible;
-  box-shadow: 0 2rpx 8rpx rgba(6, 91, 214, 0.08);
 }
 
-.team-introduce::before {
+.triangle-wrapper {
-  content: '';
   position: absolute;
-  left: 30rpx;
+  top: -12rpx;
-  top: -14rpx;
+  left: 60rpx;
-  width: 0;
+  width: 24rpx;
-  height: 0;
+  height: 12rpx;
-  border-left: 14rpx solid transparent;
+  overflow: hidden;
-  border-right: 14rpx solid transparent;
+  z-index: 10;
-  border-bottom: 14rpx solid #C2DCFF;
+  transform: translateX(-50%);
-  filter: drop-shadow(0 -2rpx 0 rgba(255, 255, 255, 0.9));
+}
+
+.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 {

pages/home/team-mate.vue

@@ -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;
+  width: 128rpx;
-  padding: 10rpx 0;
+  height: 48rpx;
-  background: #EAF2FF;
+  line-height: 48rpx;
-  color: #2F6BFF;
+  padding: 0;
-  border-radius: 12rpx;
+  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 {

static/home/female.svg

@@ -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>

static/home/male.svg

@@ -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>