优化首页

yudao-ui/yudao-ui-admin-vue3/.env.local

@@ -4,7 +4,8 @@ NODE_ENV=development
 VITE_DEV=true
 
 # 请求路径
-VITE_BASE_URL='http://localhost:48080'
+VITE_BASE_URL='http://192.168.0.133:48080'
+# VITE_BASE_URL='http://localhost:48080'
 
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
 VITE_UPLOAD_TYPE=server

yudao-ui/yudao-ui-admin-vue3/src/views/Home/Index.vue

@@ -56,7 +56,7 @@
             seriesName="拜访量"
             color="#a9d672"
             height="350px"
-            width="500px"
+            width="100%"
           />
         </div>
         <div>
@@ -77,7 +77,7 @@
             :data="homeInfoKhxzdjzbqk"
             :total="200"
             tooltipTip="客户性质等级占比情况"
-            width="500px"
+            
           />
         </div>
         <div>
@@ -95,7 +95,7 @@
             :data="homeInfoKhbffszbqk"
             :total="200"
             tooltipTip="客户拜访方式占比情况"
-            width="500px"
+           
           />
         </div>
         <div>
@@ -103,7 +103,7 @@
             :data="homeInfoKhbmzbqk"
             :total="200"
             tooltipTip="客户部门占比情况"
-            width="500px"
+           
           />
         </div>
         <div>
@@ -111,14 +111,13 @@
             :data="homeInfoKhbflxzbqk"
             :total="200"
             tooltipTip="客户拜访类型占比情况"
-            width="500px"
           />
         </div>
       </div>
         <BarChart_1
           :data="homeInfoBfcplxzbqk"
           title="拜访产品类型占比情况"
-          width="1400px"
+          width="100%"
           height="400px"
         />
       </div>
@@ -388,7 +387,7 @@ h3 {
 }
 .top_3 {
   justify-content: space-between;
-  flex-wrap: wrap;
+  // flex-wrap: wrap;
   > div {
     width: 32%;
   }

yudao-ui/yudao-ui-admin-vue3/src/views/Home/card.vue

@@ -59,6 +59,21 @@ onMounted(() => {})
 </script>
 
 <style scoped lang="css">
+@media (max-width: 1024px) {
+  .stats-container {
+    justify-content: center; /* 中等屏幕居中排列 */
+  }
+
+  .stat-card {
+    flex-basis: 45%; /* 两行排列，每行约45%宽度 */
+  }
+}
+
+@media (max-width: 768px) {
+  .stat-card {
+    flex-basis: 100%; /* 小屏幕单行排列 */
+  }
+}
 .stats-container {
   display: flex;
   justify-content: space-around;

yudao-ui/yudao-ui-admin-vue3/src/views/Home/components/PieChart.vue

@@ -33,7 +33,7 @@ const props = defineProps({
   },
   width: {
     type: String,
-    default: '400px'
+    default: '100%'
   },
   height: {
     type: String,

yudao-ui/yudao-ui-admin-vue3/src/views/Home/components/barChart_1.vue

@@ -42,7 +42,22 @@ const props = defineProps({
     default: '400px'
   }
 })
-const colors = ['#fcd36e', '#f28b8b', '#a491f2', '#fbbc58', '#7ecb5c', '#68c0cf', '#66b1fc']
+const colors = [
+  '#fcd36e', // 暖黄
+  '#f28b8b', // 暖红
+  '#a491f2', // 浅紫
+  '#fbbc58', // 橘黄
+  '#7ecb5c', // 草绿
+  '#68c0cf', // 青蓝
+  '#66b1fc', // 浅蓝
+  '#d670d6', // 粉紫
+  '#ffd700', // 金黄
+  '#00ced1' // 青碧
+]
+const sortedData = computed(() => {
+  return [...props.data].sort((a, b) => b.value - a.value)
+})
+
 const chartOption = computed(() => ({
   tooltip: {
     trigger: 'item',
@@ -57,7 +72,7 @@ const chartOption = computed(() => ({
   xAxis: {
     type: 'value',
     // min: 0, // 最小值
-    // max: 100000, // 最大值
+    max: (value: any) => (sortedData.value.length > 0 ? sortedData.value[0].value * 1.2 : 0),
     axisTick: {
       show: false
     },