Browse Source

主内容区域占比增大,修改标题顺序,调整网页样式

yangtaodemon 2 months ago
parent
commit
09c8b19c55

+ 0 - 6
src/components/layout/AppAside.vue

@@ -175,10 +175,4 @@ watch(
   align-items: center;
 }
 
-/* 下拉图标右移调整 */
-:deep(.el-sub-menu__icon-arrow) {
-  margin-left: auto;
-  margin-right: 0; /* 移除负边距 */
-  transition: transform 0.3s ease;
-}
 </style>

+ 16 - 16
src/components/layout/AppLayout.vue

@@ -275,6 +275,17 @@ const tabs = computed(() => {
         icon: "el-icon-info-filled",
         routes: ["/SoilPro", "/Overview", "/ResearchFindings", "/Unit"],
       },*/
+      {
+        name: "cadmiumPrediction",
+        label: "土壤污染物含量预测",
+        icon: "el-icon-c-scale-to-original",
+        routes: [
+          "/CropCadmiumPrediction",
+          "/EffectiveCadmiumPrediction",
+          "/netFlux",
+          "/currentYearConcentration",
+        ],
+      },
       {
         name: "HmOutFlux",
         label: "重金属输入通量",
@@ -318,17 +329,6 @@ const tabs = computed(() => {
         icon: "el-icon-map-location",
         routes: ["/mapView"],
       },*/
-      {
-        name: "cadmiumPrediction",
-        label: "土壤污染物含量预测",
-        icon: "el-icon-c-scale-to-original",
-        routes: [
-          "/netFlux",
-          "/currentYearConcentration",
-          "/EffectiveCadmiumPrediction",
-          "/CropCadmiumPrediction",
-        ],
-      },
       // {
       //   name: "cropRiskAssessment",
       //   label: "作物风险评估",
@@ -541,7 +541,7 @@ const mainStyle = computed(() => ({
 
 /* Header 样式 */
 .layout-header {
-  height: 150px;
+  height: 80px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -564,7 +564,7 @@ const mainStyle = computed(() => ({
 
 .title-and-user {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   flex: 1;
 }
 
@@ -679,10 +679,10 @@ const mainStyle = computed(() => ({
 }
 
 .project-name {
-  font-size: 48px;
+  font-size: 36px;
   font-weight: bold;
-  margin-top: 30px;
   color: #333;
+  flex: 1;
   /* 深色文字 */
 }
 
@@ -698,7 +698,7 @@ const mainStyle = computed(() => ({
 
 /* 侧边栏 - 白色背景 */
 .layout-aside {
-  width: 360px;
+  width: 280px;
   background: linear-gradient(to bottom, #b7f1fc, #fff8f0);
   border-right: 1px solid;
   overflow-y: auto;

+ 24 - 24
src/components/layout/menuItems.ts

@@ -58,6 +58,30 @@ export const menuItems: MenuItem[] = [
     label: 'Unit.Title',//<!--i18n:Unit.Title-->团队信息
     icon: HelpFilled,
     tab: 'introduction'
+  },
+   {
+    index: '/CropCadmiumPrediction',
+    label: 'CropCadmiumPrediction.Title',//<!--i18n:CropCadmiumPrediction.Title-->土壤镉作物态含量预测
+    icon: PieChart,
+    tab: 'cadmiumPrediction'
+  },
+  {
+    index: '/EffectiveCadmiumPrediction',
+    label: 'EffectiveCadmiumPrediction.Title',//<!--i18n:EffectiveCadmiumPrediction.Title-->土壤镉有效态含量预测
+    icon: PieChart,
+    tab: 'cadmiumPrediction'
+  },
+  {
+    index: '/netFlux',
+    label: 'netFlux.Title',//<!--i18n:netFlux.Title-->净通量
+    icon: PieChart,
+    tab: 'cadmiumPrediction'
+  },
+  {
+    index: '/currentYearConcentration',
+    label: 'currentYearConcentration.Title',//<!--i18n:currentYearConcentration.Title-->当年浓度
+    icon: PieChart,
+    tab: 'cadmiumPrediction'
   },
   {
     index: 'irrigationWater',
@@ -269,30 +293,6 @@ export const menuItems: MenuItem[] = [
     icon: Location,
     tab: 'mapView'
   },
-  {
-    index: '/netFlux',
-    label: 'netFlux.Title',//<!--i18n:netFlux.Title-->净通量
-    icon: PieChart,
-    tab: 'cadmiumPrediction'
-  },
-  {
-    index: '/currentYearConcentration',
-    label: 'currentYearConcentration.Title',//<!--i18n:currentYearConcentration.Title-->当年浓度
-    icon: PieChart,
-    tab: 'cadmiumPrediction'
-  },
-  {
-    index: '/EffectiveCadmiumPrediction',
-    label: 'EffectiveCadmiumPrediction.Title',//<!--i18n:EffectiveCadmiumPrediction.Title-->土壤镉有效态含量预测
-    icon: PieChart,
-    tab: 'cadmiumPrediction'
-  },
-  {
-    index: '/CropCadmiumPrediction',
-    label: 'CropCadmiumPrediction.Title',//<!--i18n:CropCadmiumPrediction.Title-->土壤镉作物态含量预测
-    icon: PieChart,
-    tab: 'cadmiumPrediction'
-  },
   // {
   //   index: '/cropRiskAssessment',
   //   label: 'cropRiskAssessment.Title',//<!--i18n:cropRiskAssessment.Title-->水稻镉污染风险

+ 1 - 1
src/router/index.ts

@@ -17,7 +17,7 @@ const routes = [
       },
       {
         path: '',
-        redirect: '/irriSampleData'
+        redirect: '/CropCadmiumPrediction'
       },
       {
         path: "select-city", // remove leading slash

+ 2 - 2
src/views/User/cadmiumPrediction/CropCadmiumPrediction.vue

@@ -30,7 +30,7 @@
         </el-button>
       </div>
       <!-- 操作按钮 -->
-      <div class="action-buttons">
+      <!-- <div class="action-buttons">
         <el-button class="custom-button" :disabled="!mapBlob" @click="exportMap">
           <el-icon class="upload-icon"><Download /></el-icon>
           导出地图</el-button>
@@ -40,7 +40,7 @@
         <el-button class="custom-button" :disabled="!statisticsData.length" @click="exportData">
           <el-icon class="upload-icon"><Download /></el-icon>
           导出数据</el-button>
-      </div>
+      </div> -->
     </div>
 
     <!-- 主体内容区 -->

+ 9 - 6
src/views/User/dataStatistics/DetectionStatistics.vue

@@ -41,12 +41,15 @@ export default {
 </script>
 <style scoped>
 .scale-wrapper {
-  transform: scale(0.9);
-  transform-origin: top left;
-  width: fit-content;
-  margin-left: 0;
-  margin-bottom: 0;
-  overflow: hidden;
+   padding: 20px;
+  /* 添加70%透明度的渐变背景 */
+  background: linear-gradient(
+    135deg, 
+    rgba(230, 247, 255, 0.7) 0%, 
+    rgba(240, 248, 255, 0.7) 100%
+  );
+  min-height: 80vh;
+  box-sizing: border-box;
 }
 
 /* 核心:改为3列网格布局 */

+ 7 - 1
src/views/User/dataStatistics/LandCultivatedStatistics.vue

@@ -138,7 +138,13 @@ onMounted(async () => {
 
 .container {
   padding: 20px;
-  background: linear-gradient(135deg, rgba(230, 247, 255, 0.7) 0%, rgba(240, 248, 255, 0.7) 100%);
+  /* 添加70%透明度的渐变背景 */
+  background: linear-gradient(
+    135deg, 
+    rgba(230, 247, 255, 0.7) 0%, 
+    rgba(240, 248, 255, 0.7) 100%
+  );
+  box-sizing: border-box;
 }
 .chart-wrapper {
   width: 100%;

+ 9 - 9
src/views/User/dataStatistics/SoilCdStatistics.vue

@@ -40,15 +40,15 @@ export default {
 </script>
 <style scoped>
 .scale-wrapper {
-  transform: scale(0.9);
-  transform-origin: top left;
-  gap: 20px;
-  background: linear-gradient(135deg, rgba(230, 247, 255, 0.7) 0%, rgba(240, 248, 255, 0.7) 100%);
-  padding: 20px;
-  width: fit-content;
-  margin-left: 0;
-  margin-bottom: 0;
-  overflow: hidden;
+   padding: 20px;
+  /* 添加70%透明度的渐变背景 */
+  background: linear-gradient(
+    135deg, 
+    rgba(230, 247, 255, 0.7) 0%, 
+    rgba(240, 248, 255, 0.7) 100%
+  );
+  min-height: 80vh;
+  box-sizing: border-box;
 }
 
 /* 核心:改为3列网格布局 */

+ 8 - 8
src/views/User/dataStatistics/SoilacidificationStatistics.vue

@@ -44,14 +44,14 @@ export default {
 
 /* 统一子组件外层容器:确保填充网格单元格 */
 .component-container {
-  width: 1000px;
-  height: 500px;
-  padding: 16px;
-  margin: 20px;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+  padding: 20px;
+  /* 添加70%透明度的渐变背景 */
+  background: linear-gradient(
+    135deg, 
+    rgba(230, 247, 255, 0.7) 0%, 
+    rgba(240, 248, 255, 0.7) 100%
+  );
+  min-height: 60vh;
   box-sizing: border-box;
 }
 

+ 11 - 4
src/views/User/farmlandQualityAssessment/farmlandQualityAssessment.vue

@@ -263,15 +263,22 @@ export default {
 }
 
 .page-container {
-  width: 100%;
-  height: 100%;
+ padding: 20px;
+  /* 添加70%透明度的渐变背景 */
+  background: linear-gradient(
+    135deg, 
+    rgba(230, 247, 255, 0.7) 0%, 
+    rgba(240, 248, 255, 0.7) 100%
+  );
+  min-height: 100vh;
+  box-sizing: border-box;
 }
 
 /* 顶部信息卡片区域 */
 .dashboard {
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
   gap: 20px;
+  grid-template-columns: 1fr 1fr; /* 统计与分布占1份,饼图占1份 */
   margin-bottom: 20px;
 }