Merge branch 'milestone-20260107-用户画像记录' into dev

src/views/PlatformData/UserLoginStats.vue

@@ -875,12 +875,12 @@ const updatePieChart = (chartRef, chartInstance, data) => {
     const option = {
         color: regionColors,
         tooltip: { trigger: 'item' },
-        legend: { orient: 'vertical', right: '0%', top: 'center', itemWidth: 10, itemHeight: 10, textStyle: { fontSize: 10 } },
+        legend: { orient: 'vertical', right: '15%', top: 'center', itemWidth: 10, itemHeight: 10, textStyle: { fontSize: 10 } },
         series: [
             {
                 type: 'pie',
                 radius: '70%',
-                center: ['30%', '50%'],
+                center: ['50%', '50%'], // 改为居中显示
                 data: data,
                 label: { show: false },
                 itemStyle: {
@@ -1011,12 +1011,12 @@ const initCharts = () => {
         chart.setOption({
           color: regionColors,
           tooltip: { trigger: 'item' },
-          legend: { orient: 'vertical', right: '10%', top: 'center' },
+          legend: { orient: 'vertical', right: '15%', top: 'center', itemWidth: 10, itemHeight: 10, textStyle: { fontSize: 10 } },
           series: [
             {
               type: 'pie',
-              radius: '80%',
-              center: ['40%', '50%'],
+              radius: '70%',
+              center: ['50%', '50%'],
               data: [
                 { value: 1048, name: '香港地区' },
                 { value: 735, name: '新加坡地区' },
@@ -1042,12 +1042,12 @@ const initCharts = () => {
         chart.setOption({
           color: regionColors,
           tooltip: { trigger: 'item' },
-           legend: { orient: 'vertical', right: '0%', top: 'center', itemWidth: 10, itemHeight: 10, textStyle: { fontSize: 10 } },
+           legend: { orient: 'vertical', right: '15%', top: 'center', itemWidth: 10, itemHeight: 10, textStyle: { fontSize: 10 } },
           series: [
             {
               type: 'pie',
               radius: '70%',
-              center: ['30%', '50%'],
+              center: ['50%', '50%'],
               data: [
                 { value: 1048, name: '香港地区' },
                 { value: 735, name: '新加坡地区' },
@@ -1068,12 +1068,12 @@ const initCharts = () => {
         chart.setOption({
           color: regionColors,
           tooltip: { trigger: 'item' },
-           legend: { orient: 'vertical', right: '0%', top: 'center', itemWidth: 10, itemHeight: 10, textStyle: { fontSize: 10 } },
+           legend: { orient: 'vertical', right: '15%', top: 'center', itemWidth: 10, itemHeight: 10, textStyle: { fontSize: 10 } },
           series: [
              {
               type: 'pie',
               radius: '70%',
-              center: ['30%', '50%'],
+              center: ['50%', '50%'],
               data: [
                  { value: 1048, name: '香港地区' },
                 { value: 735, name: '新加坡地区' },
@@ -1142,6 +1142,10 @@ onMounted(() => {
   gap: 10px;
   margin-bottom: 20px;
   border: 1px solid #f0f0f0;
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
 .search-label {
   font-weight: bold;

src/views/PlatformData/UserOverview.vue

@@ -36,27 +36,30 @@
         <div class="right-stats-col">
           <!-- 会员总数 -->
           <div class="stat-card orange-gradient small-card">
-            <div class="top-row">
+            <div class="left-part">
               <div class="card-title">
                 <el-icon><Trophy /></el-icon> 会员总数
               </div>
-              <div class="card-value-small">{{ overviewData.member }}</div>
             </div>
+            <div class="right-part">
+              <div class="card-value-small">{{ overviewData.member }}</div>
               <div class="card-tag-wrapper">
                 <div class="card-tag" :class="getGrowthClass(overviewData.member_growth)">
                   {{ getGrowthText(overviewData.member_growth) }}
                 </div>
               </div>
             </div>
+          </div>
           
           <!-- 非会员总数 -->
           <div class="stat-card blue-gradient small-card">
-            <div class="top-row">
+            <div class="left-part">
               <div class="card-title">
                 <el-icon><User /></el-icon> 非会员总数
               </div>
-              <div class="card-value-small">{{ overviewData.normal }}</div>
             </div>
+            <div class="right-part">
+              <div class="card-value-small">{{ overviewData.normal }}</div>
               <div class="card-tag-wrapper">
                  <div class="card-tag" :class="getGrowthClass(overviewData.normal_growth)">
                    {{ getGrowthText(overviewData.normal_growth) }}
@@ -65,6 +68,7 @@
             </div>
           </div>
         </div>
+      </div>
 
       <!-- 用户构成比例 -->
       <div class="composition-section">
@@ -117,6 +121,7 @@
              <template #default="scope">
                 <span :class="{
                   'text-red': scope.row.type === '用户总数',
+                  'text-black-bold': ['会员总数', '非会员总数'].includes(scope.row.type),
                   'sub-item-text': ['新非网总数', '老非网总数'].includes(scope.row.type)
                 }">{{ scope.row.type }}</span>
              </template>
@@ -622,14 +627,29 @@ onMounted(() => {
   border-radius: 12px;
   padding: 20px;
   display: flex;
-  flex-direction: column;
-  justify-content: flex-start; /* 改为从顶部开始布局 */
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
   color: #fff;
   position: relative; /* 确保绝对定位相对于卡片 */
 }
 
+.left-part {
+  display: flex;
+  align-items: center;
+  align-self: flex-start; /* 标题垂直居上 */
+}
+
+.right-part {
+  display: flex;
+  flex-direction: column;
+  align-items: center; /* 改为水平居中 */
+  justify-content: center;
+  margin-right: 150px; /* 右边容器向左移 */
+}
+
 .card-title {
-  font-size: 24px; /* 字体放大 */
+  font-size: 34px; /* 字体放大 */
   font-weight: bold; /* 加粗 */
   display: flex;
   align-items: center;
@@ -637,6 +657,12 @@ onMounted(() => {
   margin-bottom: 20px; /* 增加底部间距 */
   width: 100%; /* 占满宽度 */
 }
+
+.small-card .card-title {
+  width: auto;
+  margin-bottom: 0;
+}
+
 .card-value {
   font-size: 64px;
   font-weight: bold;
@@ -652,10 +678,16 @@ onMounted(() => {
   gap: 10px; /* 数字和百分比之间的间距 */
 }
 .card-value-small {
-  font-size: 48px;
+  font-size: 64px;
   font-weight: bold;
   margin-left: auto;
 }
+
+.small-card .card-value-small {
+  margin-left: 0;
+  line-height: 1.2;
+}
+
 .top-row {
   display: flex;
   align-items: center;
@@ -666,6 +698,10 @@ onMounted(() => {
   justify-content: flex-end;
   margin-top: 10px;
 }
+
+.small-card .card-tag-wrapper {
+  margin-top: 8px;
+}
 .card-tag {
   background-color: #fff;
   padding: 8px 16px; /* 增加高度 */
@@ -753,6 +789,10 @@ onMounted(() => {
   gap: 10px;
   margin-bottom: 20px;
   border: 1px solid #f0f0f0;
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
 .search-label {
   font-weight: bold;
@@ -793,6 +833,7 @@ onMounted(() => {
 
 .text-red { color: #ff4d4f; font-weight: bold; }
 .text-green { color: #52c41a; font-weight: bold; }
+.text-black-bold { color: #333; font-weight: bold; }
 
 .sub-item-text {
   font-size: 12px;