提交

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@element-plus/icons": "^0.0.11",
+    "@element-plus/icons-vue": "^2.3.2",
     "@kjgl77/datav-vue3": "^1.7.4",
     "axios": "^1.13.2",
     "echarts": "^6.0.0",

src/App.vue

@@ -6,6 +6,4 @@
 
 <script setup></script>
 
-<style scoped lang="less">
-@import "./assets/font/font.less";
-</style>
+<style scoped lang="less"></style>

src/assets/font/font.less

-@font-face {
-  font-family: 'YouSheBiaoTiHei-Regular';
-  src: url('../font/字体/优设标题黑.ttf'); 
-  font-weight: normal;
-  font-style: normal;
-}
\ No newline at end of file

src/assets/fonts/font.less

+@font-face {
+  font-family: 'YouSheBiaoTiHei';
+  src: url('../fonts/优设标题黑.ttf') format('woff'); 
+  font-weight: bold;
+  font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'YouSheBiaoTiYuan';
+  src: url('../fonts/优设标题圆.otf') format('woff'); 
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'DIN';
+  src: url('../fonts/0.otf') format('woff'); 
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Alibaba PuHuiTi';
+  src: url('../fonts/2.otf') format('woff'); 
+  font-weight: normal;
+  font-style: normal;
+}
\ No newline at end of file

src/components/CommonComplete.vue

@@ -5,22 +5,34 @@
       <div class="stat-card-value">
         <div class="card-value-top">
           <div>
-            <p class="pro-title">11月完成</p>
-            <p class="pro-value">1.1亿元</p>
+            <p class="pro-title">{{ item.protitle }}</p>
+            <p class="pro-value">{{ item.proValue }}<span>亿元</span></p>
           </div>
           <div>
-            <p class="pro-title">第三季度完成</p>
-            <p class="pro-value">4.21亿元</p>
+            <p class="pro-title">{{ item.thirdTtile }}</p>
+            <p class="pro-value">{{ item.thirdValue }}<span>亿元</span></p>
           </div>
         </div>
         <div class="card-value-bottom">
           <div>
             <p class="pro-title">2025年累计完成</p>
-            <p class="pro-value">112.1亿元</p>
+            <p class="pro-value">112.1<span>亿元</span></p>
           </div>
           <div class="value-bottom-right">
             <p class="comparison">累计同期环比</p>
-            <p class="comparison-value">+1.2%</p>
+            <p
+              class="comparison-value"
+              :class="{ 'down-trend': item.title === '运营成本' }"
+            >
+              {{ item.compareValue }}
+              <el-icon
+                class="trend-icon"
+                :class="{ 'down-trend': item.title === '运营成本' }"
+              >
+                <Bottom v-if="item.title === '运营成本'" />
+                <Top v-else />
+              </el-icon>
+            </p>
           </div>
         </div>
       </div>
@@ -30,6 +42,7 @@
 
 <script setup>
 import { onMounted, reactive, watch, ref } from "vue";
+import { Top, Bottom } from "@element-plus/icons-vue";
 const props = defineProps({
   numberList: {
     type: Array,
@@ -48,7 +61,7 @@ const props = defineProps({
     .vw(border-radius, 5);
     .vw(padding, 10);
     .vw(margin,10);
-    background-image: url("../assets/images/complete.png");
+    background-image: url("@/assets/images/complete.png");
     background-repeat: no-repeat;
     background-size: 100% 100%;
     background-position: center;
@@ -66,21 +79,45 @@ const props = defineProps({
           .vh(height,10);
         }
         .pro-title {
-          .font(12);
+          .font(10);
+          margin-bottom: -12px;
         }
         .pro-value {
-          .font(16);
+          .font(18);
+          font-family: "DIN";
           color: @Color;
+          font-weight: 100;
+          span {
+            .font(10);
+            font-weight: 400;
           }
-        .comparison {
+        }
+      }
+      .value-bottom-right {
+        .vh(margin-top,10);
         .font(10);
+        .comparison {
+          font-family: "Alibaba PuHuiTi";
         }
         .comparison-value {
-          color: green;
+          color: #32d25a;
+          display: flex;
+          align-items: center;
+          gap: 2px;
+
+          &.down-trend {
+            color: #ff4757;
+          }
+
+          .trend-icon {
+            font-size: 12px;
+            color: #32d25a;
+
+            &.down-trend {
+              color: #ff4757;
+            }
           }
         }
-      .value-bottom-right {
-        .vh(margin-top,13);
       }
     }
   }

src/components/Map.vue → src/components/CommonMap.vue

@@ -6,7 +6,7 @@
 <script setup>
 import AMapLoader from "@amap/amap-jsapi-loader";
 import { onMounted } from "vue";
-import gansuLine from "./gansu.json";
+import gansuLine from "./newLine.json";
 let map = null;
 window._AMapSecurityConfig = {
   securityJsCode: "75a8291a9e8f7c838fc5e4dd0d538f30",

src/components/CommonPlant.vue

 <template>
   <div class="stat-cards-container">
     <div class="stat-card" v-for="(item, idx) in props.numberList" :key="idx">
-      <div class="stat-card__title">{{ item.title }}</div>
-      <div class="stat-card__value">{{ item.value }}</div>
+      <div class="stat-card-title">{{ item.title }}</div>
+      <div class="stat-card-value">{{ item.value }}</div>
       <div class="amount">
         <div>
           <p class="amount-title">实际完成金额</p>
-          <p class="amount-value">2.87亿元</p>
+          <p class="amount-value">2.87<span>亿元</span></p>
         </div>
         <div>
           <p class="amount-title">计划完成金额</p>
-          <p class="amount-value">4.21亿元</p>
+          <p class="amount-value">4.21<span>亿元</span></p>
         </div>
       </div>
     </div>
@@ -34,16 +34,18 @@ const props = defineProps({
     .vw(border-radius, 5);
     .vw(padding, 10);
     .vw(margin,10);
-    background-image: url("../assets/images/total2.png");
+    background-image: url("@/assets/images/total2.png");
     background-repeat: no-repeat;
     background-size: 100% 100%;
     background-position: center;
-    .stat-card__title {
+    .stat-card-title {
       .font(12);
       font-weight: 700;
     }
-    .stat-card__value {
-      .font(16);
+    .stat-card-value {
+      .font(20);
+      color: @Color;
+      font-family: "DIN";
     }
     .amount {
       display: flex;
@@ -53,8 +55,14 @@ const props = defineProps({
         .vh(height, 5);
       }
       .amount-value {
-        .font(20);
+        .font(16);
         color: @Color;
+        font-family: "DIN";
+        font-weight: 100;
+        span {
+          .font(10);
+          font-weight: 400;
+        }
       }
     }
   }

src/components/CommonTotal.vue

 <template>
+  <div class="common-container">
     <div class="stat-cards-container">
       <div class="stat-card" v-for="(item, idx) in props.numberList" :key="idx">
-      <div class="stat-card__title">{{ item.title }}</div>
-      <div class="stat-card__value">{{ item.value }}</div>
+        <div class="stat-card-title">{{ item.title }}</div>
+        <div class="stat-card-value" @click="handleDetail(item)">
+          {{ item.value }}
         </div>
       </div>
+    </div>
+    <!-- 详情信息 -->
+    <el-dialog
+      :title="dialogTitle + '详情'"
+      v-model="dialogVisible"
+      width="50%"
+      :before-close="handleClose"
+    >
+      <commonTable
+        :data="tableData"
+        :columns="tableColumns"
+        :total="tableTotal"
+        :current-page="currentPage"
+        :page-size="pageSize"
+        @size-change="handleSizeChange"
+        @current-page-change="handleCurrentPageChange"
+        @row-click="handleRowClick"
+      >
+        <template #status="{ row }">
+          <el-tag :type="row.status === 'active' ? 'success' : 'danger'">
+            {{ row.status === "active" ? "正常" : "异常" }}
+          </el-tag>
+        </template>
+      </commonTable>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="dialogVisible = false"
+            >确 定</el-button
+          >
+        </span>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <script setup>
 import { onMounted, reactive, watch, ref } from "vue";
+import commonTable from "./common/commonTable.vue";
+
 const props = defineProps({
   numberList: {
     type: Array,
     default: () => [],
   },
 });
+
+// 弹窗相关
+const dialogVisible = ref(false);
+const dialogTitle = ref("");
+
+// 表格相关数据
+const tableData = ref([]);
+const tableColumns = ref([
+  { prop: "id", label: "ID", autoWidth: true },
+  { prop: "name", label: "名称", autoWidth: true },
+  { prop: "type", label: "类型", autoWidth: true },
+  { prop: "value", label: "数值", autoWidth: true },
+  { prop: "date", label: "日期", autoWidth: true },
+  { prop: "status", label: "状态", autoWidth: true, slot: "status" },
+]);
+
+// 分页相关
+const currentPage = ref(1);
+const pageSize = ref(10);
+const tableTotal = ref(0);
+
+const generateTableData = () => {
+  const data = [];
+  const types = ["类型A", "类型B", "类型C"];
+  const statuses = ["active", "inactive"];
+
+  for (let i = 1; i <= 10; i++) {
+    data.push({
+      id: i,
+      name: `项目${i}`,
+      type: types[Math.floor(Math.random() * types.length)],
+      value: Math.floor(Math.random() * 1000),
+      date: new Date(
+        Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000
+      ).toLocaleDateString(),
+      status: statuses[Math.floor(Math.random() * statuses.length)],
+    });
+  }
+
+  tableTotal.value = data.length;
+  return data;
+};
+
+const handleDetail = (item) => {
+  dialogVisible.value = true;
+  dialogTitle.value = item.title;
+  tableData.value = generateTableData();
+};
+
+// 分页处理
+const handleSizeChange = (val) => {
+  pageSize.value = val;
+  currentPage.value = 1;
+  loadTableData();
+};
+
+const handleCurrentPageChange = (val) => {
+  currentPage.value = val;
+  loadTableData();
+};
+
+const loadTableData = () => {
+  const allData = generateTableData();
+  const start = (currentPage.value - 1) * pageSize.value;
+  const end = start + pageSize.value;
+  tableData.value = allData.slice(start, end);
+};
+
+const handleRowClick = (row, column, event) => {
+  console.log("行点击:", row);
+};
+
+const handleClose = () => {
+  dialogVisible.value = false;
+};
+onMounted(() => {});
 </script>
 
 <style scoped lang="less">
-.stat-cards-container {
+.common-container {
+  display: flex;
+  justify-content: center;
+  .stat-cards-container {
     display: flex;
     .stat-card {
       .vw(width, 170);
       .vw(border-radius, 5);
-    .vw(padding, 10);
-    .vw(margin,10);
-    background-image: url("../assets/images/total2.png");
+      .vw(padding, 20);
+      // .vw(margin,10);
+      background-image: url("@/assets/images/total2.png");
       background-repeat: no-repeat;
-    background-size: 100% 100%;
+      background-size: 90% 80%;
       background-position: center;
-    .stat-card__title {
+      .stat-card-title {
         .font(12);
       }
-    .stat-card__value {
-      .vh(margin-top, 10);
-      .font(20);
+      .stat-card-value {
+        // .vh(margin-top, 10);
+        .font(24);
+        cursor: pointer;
+        font-family: "DIN";
       }
     }
+  }
+}
+:deep(.el-dialog__title) {
+  font-weight: 900;
 }
 </style>

src/layouts/MainLayout.vue

@@ -3,9 +3,9 @@
     <!-- 顶部Header -->
     <el-header class="city-header">
       <div class="header-left">
-        <span class="city-name"></span>
+        <img src="@/assets/images/logo.png" alt="" />
+        <!-- <span class="city-name">123123</span> -->
       </div>
-      <!-- </div> -->
       <div class="header-right">
         <div>
           <el-dropdown>
@@ -22,7 +22,6 @@
           </el-dropdown>
         </div>
       </div>
-      <!-- </div> -->
     </el-header>
 
     <el-container>
@@ -88,7 +87,7 @@ const handleLogout = () => {
 };
 </script>
 
-<style scoped>
+<style scoped lang="less">
 .smart-city-container {
   height: 100vh;
   overflow: hidden;
@@ -104,13 +103,15 @@ const handleLogout = () => {
 .city-header {
   width: 100%;
   height: 64px;
-  background: #3db8c5
-    url("https://apaas-static.oss-cn-beijing.aliyuncs.com/app/header_bg.jpg")
-    no-repeat fixed top left / 100% 64px;
+  background: #3db8c5 url("@/assets/images/header-bg.png") no-repeat fixed top
+    left / 100% 64px;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  .header-left {
+    padding-left: 25px;
+  }
 }
 
 .city-name {

src/main.js

@@ -5,6 +5,7 @@ import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import * as ElIcons from '@element-plus/icons'
 import router from './router'
+import "./assets/fonts/font.less"; // 字体样式
 
 const app = createApp(App)
 for (const [key, component] of Object.entries(ElIcons)) {

src/components/Construct.vue → src/views/components/Construct.vue

@@ -2,7 +2,7 @@
   <div class="construct-container">
     <div class="construct-left">
       <div class="tag-image">
-        <img src="../assets/images/建设.png" />
+        <img src="@/assets/images/建设.png" />
       </div>
       <div class="construct-left-map">
         <Map />
@@ -42,8 +42,8 @@
 </template>
 
 <script setup>
-import Map from "./Map.vue";
-import CommonTotal from "./CommonTotal.vue";
+import Map from "@/components/CommonMap.vue";
+import CommonTotal from "@/components/CommonTotal.vue";
 import { reactive, ref, onMounted, onUnmounted } from "vue";
 import CircleProgress from "./CircleProgress.vue";
 const projectList = reactive([
@@ -89,18 +89,16 @@ const recycleList = reactive([
       .vw(width, 180);
       .vh(height, 30);
       .vh(line-height, 30);
-      .vw(margin-left,10);
-      .font(14);
+      .vw(margin-left,20);
+      .font(20);
       .vw(padding-left,23);
       text-align: left;
       color: #fff;
       font-family: YouSheBiaoTiYuan;
-      background-image: url("../assets/images/tag.png");
+      background-image: url("@/assets/images/tag.png");
       background-repeat: no-repeat;
       background-size: cover;
       background-position: center;
-      font-weight: 700;
-      letter-spacing: 3px;
       background-size: 100% 100%;
     }
     .progress {
@@ -119,7 +117,7 @@ const recycleList = reactive([
           align-items: center;
           .vw(width,520);
           .vh(height,85);
-          background-image: url("../assets/images/箭头.png");
+          background-image: url("@/assets/images/箭头.png");
           background-repeat: no-repeat;
           background-size: contain;
           background-position: center;

src/components/Operation.vue → src/views/components/Operation.vue

@@ -2,7 +2,7 @@
   <div class="construct-container">
     <div class="construct-left">
       <div class="tag-image">
-        <img src="../assets/images/建设.png" />
+        <img src="@/assets/images/建设.png" />
       </div>
       <div class="construct-left-map">
         <Map />
@@ -44,10 +44,10 @@
 </template>
 
 <script setup>
-import Map from "./Map.vue";
-import CommonTotal from "./CommonTotal.vue";
-import CommonComplete from "./CommonComplete.vue";
-import CommonPlant from "./CommonPlant.vue";
+import Map from "@/components/CommonMap.vue";
+import CommonTotal from "@/components/CommonTotal.vue";
+import CommonComplete from "@/components/CommonComplete.vue";
+import CommonPlant from "@/components/CommonPlant.vue";
 import { reactive, ref, onMounted, onUnmounted } from "vue";
 const projectList = reactive([
   { title: "总个数（个）", value: "59" },
@@ -70,9 +70,30 @@ const operationList = reactive([
   { title: "利润总额完成进度", value: "68.1%" },
 ]);
 const completeList = reactive([
-  { title: "营业收入" },
-  { title: "运营成本" },
-  { title: "利润总额" },
+  {
+    title: "营业收入",
+    protitle: "11月完成",
+    proValue: "1.1",
+    thirdTtile: "第三季度完成",
+    thirdValue: "4.21",
+    compareValue: "+1.2%",
+  },
+  {
+    title: "运营成本",
+    protitle: "11月完成",
+    proValue: "47.98",
+    thirdTtile: "第三季度完成",
+    thirdValue: "5.75",
+    compareValue: "-0.5%",
+  },
+  {
+    title: "利润总额",
+    protitle: "11月完成",
+    proValue: "9.90",
+    thirdTtile: "第三季度完成",
+    thirdValue: "23.52",
+    compareValue: "+1.2%",
+  },
 ]);
 </script>
 
@@ -92,21 +113,19 @@ const completeList = reactive([
     flex-direction: column;
     justify-content: space-between;
     .info-title {
-      .vw(width, 220);
+      .vw(width, 230);
       .vh(height, 30);
       .vh(line-height, 30);
       .vw(margin-left,10);
-      .font(14);
-      .vw(padding-left,23);
+      .font(20);
+      .vw(padding-left,28);
       text-align: left;
       color: #fff;
       font-family: YouSheBiaoTiYuan;
-      background-image: url("../assets/images/tag.png");
+      background-image: url("@/assets/images/tag.png");
       background-repeat: no-repeat;
       background-size: cover;
       background-position: center;
-      font-weight: 700;
-      letter-spacing: 3px;
       background-size: 100% 100%;
     }
   }

src/components/ProjectApproval.vue → src/views/components/ProjectApproval.vue

 <template>
-  <div class="stat-cards-container">
-    <div class="stat-card" v-for="(item, idx) in numberList" :key="idx">
-      <div class="stat-card__title">{{ item.title }}</div>
-      <div class="stat-card__value">{{ item.value }}</div>
-    </div>
-  </div>
+  <CommonTotal :numberList="initiationList" />
   <Map />
 </template>
 
 <script setup>
-import Map from "./Map.vue";
+import CommonTotal from "@/components/CommonTotal.vue";
+import Map from "@/components/CommonMap.vue";
 import { onMounted, reactive, watch, ref } from "vue";
 
 const props = defineProps({
@@ -18,19 +14,17 @@ const props = defineProps({
     default: "立项",
   },
 });
-
-const numberList = ref([]);
-
+const initiationList = ref([]);
 // 根据currentName设置不同的数据
 const setNumberList = (name) => {
   if (name === "立项") {
-    numberList.value = [
+    initiationList.value = [
       { title: "总个数（个）", value: "59" },
       { title: "总投资（亿元）", value: "2733.35" },
       { title: "总规模（公里）", value: "5116.72" },
     ];
   } else {
-    numberList.value = [
+    initiationList.value = [
       { title: "总个数（个）", value: "59" },
       { title: "总投资（亿元）", value: "2733.35" },
       { title: "总规模（公里）", value: "5116.72" },
@@ -67,14 +61,14 @@ onMounted(() => {
     .vw(padding, 10);
     .vw(padding, 10);
     .vw(margin,10);
-    background-image: url("../assets/images/total.png");
+    background-image: url("@/assets/images/total.png");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
-    .stat-card__title {
+    .stat-card-title {
       .font(14);
     }
-    .stat-card__value {
+    .stat-card-value {
       .vh(margin-top, 20);
       .font(20);
     }

src/views/homePage/index.vue

@@ -73,14 +73,14 @@
 </template>
 
 <script setup>
-import Construct from "@/components/Construct.vue";
-import ProjectApproval from "@/components/ProjectApproval.vue";
-import Operation from "@/components/Operation.vue";
+import Construct from "../components/Construct.vue";
+import ProjectApproval from "../components/ProjectApproval.vue";
+import Operation from "../components/Operation.vue";
 import { reactive, ref } from "vue";
 
 const selectedLeftBtn = ref("equity");
 const selectedRightBtn = ref("");
-const selectedContentBtn = ref(1);
+const selectedContentBtn = ref(3);
 const selectedContentName = ref("立项");
 const isFullscreen = ref(false);
 const showPopup = ref(false);
@@ -188,12 +188,13 @@ window.addEventListener("fullscreenchange", () => {
 
 <style scoped lang="less">
 .home-container {
-  background-image: url("../../assets/images/bg.png");
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
+  // background-image: url("@/assets/images/bg.png");
+  // background-repeat: no-repeat;
+  // background-size: cover;
+  // background-position: center;
   width: 100%;
   height: 100%;
+  background-color: #04427e;
   overflow: hidden;
   color: #fff;
   display: flex;
@@ -204,38 +205,44 @@ window.addEventListener("fullscreenchange", () => {
     .vh(height, 80);
     text-align: center;
     .title-section {
-      background-image: url("../../assets/images/header.png");
+      background-image: url("@/assets/images/header.png");
       background-repeat: no-repeat;
-      background-size: cover;
       background-position: center;
-      font-weight: 700;
-      letter-spacing: 3px;
+      background-size: 170% 100%;
       .vh(margin-top, -15);
-      .font(24);
-      font-family: HelveticaNeue;
+      .font(28);
+      letter-spacing: 1px;
+      font-weight: 400;
+      text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
+      font-family: "YouSheBiaoTiHei";
+      width: 950px;
+      height: 74px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
     .header-left {
       display: flex;
-      // justify-content: center;
       align-items: center;
-      padding-left: 75px;
+      .vw( padding-left, 75);
       .nav-btn {
         .vh(line-height, 36);
         .font(14);
         cursor: pointer;
         color: #fff;
         background-repeat: no-repeat;
-        background-size: 100%, 100%;
+        background-size: 85%, 100%;
         background-position: center;
-
+        font-family: YouSheBiaoTiYuan;
+        font-weight: 100;
         &:not(.active) {
-          background-image: url("../../assets/images/left-btn.png");
+          background-image: url("@/assets/images/left-btn.png");
           .vh(height,36);
           .vw(width,208);
         }
 
         &.active {
-          background-image: url("../../assets/images/left-hlightBtn.png");
+          background-image: url("@/assets/images/left-hlightBtn.png");
           .vh(height,36);
           .vw(width,208);
         }
@@ -253,15 +260,15 @@ window.addEventListener("fullscreenchange", () => {
         background-repeat: no-repeat;
         background-size: cover;
         background-position: center;
-
+        font-family: YouSheBiaoTiYuan;
         &:not(.active) {
-          background-image: url("../../assets/images/right-btn.png");
+          background-image: url("@/assets/images/right-btn.png");
           .vh(height,36);
           .vw(width,208);
         }
 
         &.active {
-          background-image: url("../../assets/images/right-hight-btn.png");
+          background-image: url("@/assets/images/right-hight-btn.png");
           .vh(height,36);
           .vw(width,208);
         }
@@ -275,61 +282,79 @@ window.addEventListener("fullscreenchange", () => {
     .content-btn {
       .vh(margin-top,-10);
       .vh(margin-bottom,20);
-      text-align: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
       span {
         .font(14);
-        .vw(width,110);
-        .vh(height,35);
-        display: inline-block;
+        width: 110px;
+        height: 35px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
         cursor: pointer;
+        flex-shrink: 0;
+        color: #fff; // 补充文字颜色（匹配蓝色按钮的白色文字）
       }
+
+      // 立项按钮
       :nth-child(1) {
         background-repeat: no-repeat;
-        background-size: cover;
+        background-size: 80% 80%;
         background-position: center;
-        .vw(width,105);
-        .vh(height,35);
-        .vh(line-height,35);
+        width: 115px;
+        height: 35px;
+        line-height: 35px;
         text-align: center;
-        .vw(margin-right,-7);
-        background-image: url("../../assets/images/立项.png");
         &.active {
-          background-image: url("../../assets/images/nav-hight-btn.png");
+          background-image: url("@/assets/images/立项.png");
+        }
+        &:not(.active) {
+          background-image: url("@/assets/images/initiation-default.png");
         }
       }
+
+      // 退出按钮
       :nth-child(5) {
         background-repeat: no-repeat;
-        background-size: cover;
+        background-size: 80% 80%;
         background-position: center;
-        .vw(width,105);
-        .vh(height,35);
-        .vh(line-height,35);
+        width: 111px;
+        height: 35px;
+        line-height: 35px;
         text-align: center;
-        background-image: url("../../assets/images/退出.png");
         &.active {
-          background-image: url("../../assets/images/退出-active.png");
+          background-image: url("@/assets/images/退出-active.png");
+        }
+        &:not(.active) {
+          background-image: url("@/assets/images/退出.png");
         }
       }
+
+      // 中间按钮（建设、运营、转止）
       :nth-child(2),
       :nth-child(3),
       :nth-child(4) {
         background-repeat: no-repeat;
-        background-size: cover;
+        background-size: 80% 80%;
         background-position: center;
-        .vw(width,108);
-        .vh(height,35);
-        .vh(line-height,35);
-        .vw(margin-right,-7);
+        width: 115px;
+        height: 35px;
+        line-height: 35px;
         text-align: center;
-        background-image: url("../../assets/images/default-btn.png");
+        margin-left: -32px;
+        background-image: url("@/assets/images/default-btn.png");
         &.active {
-          background-image: url("../../assets/images/nav-hight-btn.png");
+          background-image: url("@/assets/images/nav-hight-btn.png");
+        }
       }
+      :nth-child(5) {
+        margin-left: -31px;
       }
     }
   }
   .bottom {
-    background-image: url("../../assets/images/bottom.png");
+    background-image: url("@/assets/images/bottom.png");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;

src/views/login/index.vue

 <template>
   <div class="login-container">
+    <div class="login-header">葛洲坝集团交通投资有限公司投资决策分析系统</div>
     <div class="login-form-wrapper">
-      <h2 class="login-title">后台管理系统登录</h2>
+      <div class="company-logo"></div>
       <el-form
         ref="loginFormRef"
         :model="loginForm"
         :rules="loginRules"
-        label-width="80px"
+        label-width="70px"
         class="login-form"
+        labelPosition="top"
       >
         <el-form-item label="用户名" prop="username">
           <el-input
+            :prefix-icon="User"
             v-model="loginForm.username"
             placeholder="请输入用户名"
             prefix-icon="el-icon-user"
@@ -18,10 +21,11 @@
         </el-form-item>
         <el-form-item label="密码" prop="password">
           <el-input
+            prefix-icon="Lock"
             v-model="loginForm.password"
             type="password"
             placeholder="请输入密码"
-            prefix-icon="el-icon-lock"
+            show-password
           ></el-input>
         </el-form-item>
         <el-form-item>
@@ -39,23 +43,25 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { ref } from "vue";
 import { useRouter } from "vue-router";
-import type { FormInstance, FormRules } from "element-plus";
+import { User, Lock } from "@element-plus/icons-vue";
 
 const router = useRouter();
-const loginFormRef = ref<FormInstance>();
+const loginFormRef = ref();
 const loading = ref(false);
+const captchaSrc = ref("https://picsum.photos/120/40"); // 模拟验证码图片
 
 // 登录表单数据
 const loginForm = ref({
-  username: "",
+  username: "admin",
   password: "",
+  captcha: "",
 });
 
 // 表单验证规则
-const loginRules = ref<FormRules>({
+const loginRules = ref({
   username: [
     { required: true, message: "请输入用户名", trigger: "blur" },
     { min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" },
@@ -69,12 +75,8 @@ const loginRules = ref<FormRules>({
 // 处理登录
 const handleLogin = async () => {
   try {
-    // 验证表单
     await loginFormRef.value?.validate();
-
     loading.value = true;
-
-    // 模拟登录请求
     setTimeout(() => {
       // 登录成功后设置token
       const mockToken = "mock-jwt-token";
@@ -92,51 +94,135 @@ const handleLogin = async () => {
 
 <style scoped lang="less">
 .login-container {
+  width: 100%;
+  height: 100vh;
+  background-image: url("@/assets/images/login.png");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  padding-top: 15px;
+}
+
+.login-header {
+  color: #fff;
+  font-size: 24px;
+  font-weight: bold;
+  padding-left: 20px;
+  margin: 0 20px;
+  border-radius: 5px;
   display: flex;
-  justify-content: flex-end;
+  justify-content: left;
   align-items: center;
-  height: 100vh;
-  // background-image: url('@/assets/images/background.png');
-  // background-size: cover;
-  // background-position: center;
-  // background-repeat: no-repeat;
-  // padding-right: 100px;
+  height: 50px;
+  background: linear-gradient(
+    to right,
+    rgba(0, 0, 0, 0.3),
+    rgba(0, 0, 0, 0.6),
+    rgba(0, 0, 0, 0.3)
+  );
 }
 
 .login-form-wrapper {
-  background-color: rgba(255, 255, 255, 0.9);
+  background-color: rgba(0, 0, 0, 0.8);
   position: absolute;
-  top: 35%;
-  right: 6%;
+  top: 50%;
+  right: 1%;
   transform: translateY(-50%);
-  padding: 48px;
+  padding: 15px;
   box-sizing: border-box;
-  width: 460px;
-  height: 550px;
-  box-shadow: 0 0 16px #2e31361a;
+  width: 350px;
+  height: 350px;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
   border-radius: 8px;
   :deep(.el-form-item) {
+    margin-bottom: 10px;
     .el-form-item__content {
       .el-input {
         height: 48px;
         border-radius: 4px;
         .el-input__wrapper {
-          background: #f3f4f9;
+          background: rgba(255, 255, 255, 0.9);
+        }
+        .el-input__inner {
+          color: #333;
+        }
+      }
+      .el-form-item__label {
+        color: #fff;
       }
     }
   }
+  :deep(.el-form-item__label) {
+    color: #fff;
   }
 }
 
-.login-title {
-  text-align: center;
+.company-logo {
+  width: 100%;
+  height: 30px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   margin-bottom: 30px;
-  color: #304156;
+  background-image: url(/src/assets/images/logo.png);
+  background-size: 100% 80%;
+  background-position: center;
+  background-repeat: no-repeat;
 }
 
 .login-form {
   .login-btn {
     width: 100%;
+    height: 30px;
+    border-radius: 4px;
+    background-color: #1890ff;
+    margin-top: 18px;
+  }
+  .forgot-password {
+    color: #fff;
+    float: right;
+    margin-top: 10px;
+  }
+}
+
+.captcha-image {
+  position: absolute;
+  right: 0;
+  top: 0;
+  cursor: pointer;
+  img {
+    width: 120px;
+    height: 40px;
+    border-radius: 4px;
+  }
+}
+
+:deep(.el-form-item__content) {
+  position: relative;
+  &.el-form-item__content--with-captcha {
+    padding-right: 130px;
+  }
+}
+
+:deep(.el-input__inner) {
+  color: #333;
+}
+
+:deep(.el-input__prefix-inner) {
+  color: #909399;
+}
+.login-form {
+  :deep(.el-form-item) {
+    .el-form-item__content {
+      .el-input {
+        height: 30px;
+      }
+    }
+  }
+  :deep(.el-form-item--label-top) {
+    .el-form-item__label {
+      line-height: 15px;
+    }
   }
 }
 </style>