From 06fc253835457b7f829f43409d042d54c42bbfde Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BB=96=E5=BE=B7=E4=BA=91?= <ldeyun@163.com>
Date: Wed, 5 Mar 2025 03:27:35 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=BB=86=E8=8A=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../images/{logo (2).png => logo(2).png}      | Bin
 src/layout/components/Navbar.vue              |   6 +-
 src/layout/components/Sidebar/Logo.vue        |   2 +-
 src/views/index.vue                           | 330 ++++++++++++------
 4 files changed, 234 insertions(+), 104 deletions(-)
 rename src/assets/images/{logo (2).png => logo(2).png} (100%)

diff --git a/src/assets/images/logo (2).png b/src/assets/images/logo(2).png
similarity index 100%
rename from src/assets/images/logo (2).png
rename to src/assets/images/logo(2).png
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index eb5815b..d163324 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -2,8 +2,8 @@
   <div class="navbar">
     <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
 
-    <!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
-    <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/> -->
+    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav" />
+    <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav" />
 
     <div class="left-menu" v-if="topNav">
       <p style="color: white">欢迎进入天然气工具系统平台</p>
@@ -115,7 +115,7 @@ export default {
   height: 50px;
   overflow: hidden;
   position: relative;
-  background: #19b6ff;
+  background: #00007f;
   box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
 
   .hamburger-container {
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index e56a762..e000b27 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -61,7 +61,7 @@ export default {
   width: 100%;
   height: 50px;
   line-height: 50px;
-  background: #2b2f3a;
+  background: #00007f;
   text-align: center;
   overflow: hidden;
 
diff --git a/src/views/index.vue b/src/views/index.vue
index 0791f73..efa1df8 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,69 +1,107 @@
 <template>
   <div class="container">
-    <!-- 顶部区域 -->
-    <div class="top"><h2>天然气工具系统 简要说明</h2></div>
-    <hr style="border: 1px solid #ccc; margin: 20px 0" />
-    <!-- <el-divider></el-divider> -->
-    <div class="middle">
-      <!-- 左侧区域 -->
-      <div class="left"></div>
-      <!-- 右侧区域 -->
-      <div class="right">
-        <div class="content" style="overflow-y: auto; height: calc(100vh - 230px)">
-          <p>
-            天然气工具系统 是一款采用 vue
-            2和springboot前后端分离技术开发的网页版天然气计量计算和专业信息的专业软件。借助先进的前端框架，提供更流畅、便捷的操作体验，无需安装，通过网页即可直接使用。
-          </p>
+    <!-- 主内容区 -->
+    <div class="main-content">
+      <!-- 顶部广告横幅 -->
+      <el-carousel height="320px" class="top-ad">
+        <el-carousel-item v-for="(item, index) in ads" :key="index">
+          <a :href="item.link" target="_blank">
+            <img :src="item.img" class="ad-image" />
+          </a>
+        </el-carousel-item>
+      </el-carousel>
 
-          <h2>主要功能</h2>
-          <ol>
-            <li>多类型流量计流量计算：支持标准孔板、速度式、容积式和临界流文丘利喷嘴流量计的流量计算，严格依据相关标准和规程，确保计算结果的准确性和可靠性。</li>
-            <li>
-              系数修正方法多样：在流量计算过程中，可灵活使用校准提供的流量计系数、仪表系数（适用于速度式和容积式流量计）、流出系数（针对标准孔板和临界流文丘利喷嘴）进行修正。对于标准孔板，还支持多种流出系数标准公式，满足不同场景的计算需求。
-            </li>
-            <li>流量单位换算：提供标准参比条件下体积流量、工作条件下体积流量、质量流量和标准参比条件下能量流量的换算功能，方便用户在不同流量单位之间进行快速转换。</li>
-            <li>物性参数计算丰富：具备多种计算标准参比条件下物性参数、工作条件下压缩因子和密度、等熵指数和临界流函数等物性参数的方法，为天然气流量计算提供全面的数据支持。</li>
-          </ol>
+      <!-- 核心功能区 -->
+      <div class="function-area">
+        <el-row :gutter="20">
+          <el-col :xs="24" :sm="12" :md="8" v-for="(func, index) in functions" :key="index">
+            <el-card shadow="hover" class="function-card" @click.native="handleFunction(func.path)">
+              <i :class="['iconfont', func.icon]"></i>
+              <h3>{{ func.title }}</h3>
+              <p>{{ func.desc }}</p>
+            </el-card>
+          </el-col>
+        </el-row>
+      </div>
 
-          <h3>计算选择</h3>
-          <ul>
-            <li>物性参数计算：在系统设置框中，可从参比条件下拉式选择框中选择合适的标准参比条件，从压缩因子和等熵指数下拉式选择框中选择相应的计算方法，以满足不同的计算需求。</li>
-            <li>
-              流量计算：选择流量计算单选按钮后，根据所选的流量计类型，按要求输入天然气和流量计数据，选择合适的流出系数计算方法，输入温度、压力等相关数据，然后按计算按钮或从系统文件菜单中选择开始计算项目，即可完成流量计算。
-            </li>
-            <li>
-              流量换算：选择流量换算单选按钮，按上述方法选择标准参比条件和压缩因子计算方法，输入天然气数据和温度、压力、大气压、流量等数据，点击计算按钮或从菜单选择开始计算项目，即可进行流量换算。
-            </li>
-          </ul>
-          <h3>结果输出</h3>
-          <p>
-            计算结果支持显示、打印和保存三种方式。显示结果会在指定的文本框中呈现，用户可清晰查看计算结果；通过系统文件菜单中的打印计算结果子菜单，可选择需要打印的内容进行打印；选择保存计算结果子菜单，可选择保存内容、文件格式和文件名，将计算结果保存到指定位置。
-          </p>
-
-          <h2>注意事项</h2>
-          <ul>
-            <li>
-              本软件计算方法严格遵循相关国家和行业标准，计算结果与标准中的计算示例结果的偏差均在标准允许的范围内，但开发者不承担因直接或间接使用本软件所引起的经济和安全责任。
-            </li>
-          </ul>
-        </div>
+      <!-- 资料查询区 -->
+      <div class="document-area">
+        <h2 class="section-title">最新行业资料</h2>
+        <el-table :data="documents" style="width: 100%">
+          <el-table-column prop="title" label="文档名称"></el-table-column>
+          <el-table-column prop="type" label="类型" width="120"></el-table-column>
+          <el-table-column prop="date" label="发布日期" width="120"></el-table-column>
+          <el-table-column label="操作" width="100">
+            <template slot-scope="scope">
+              <el-button type="text" @click="downloadDoc(scope.row)">下载</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
       </div>
     </div>
-    <!-- 底部区域 -->
-    <div class="bottom">
-      <p style="color: blue; font-size: 14px">妍杰丽云工作室 ----- 基于若依管理框架系统 V3.8.9&copy;</p>
-    </div>
+
+    <!-- 底部信息 -->
+    <el-footer class="footer">
+      <div class="footer-content">
+        <div class="footer-section">
+          <h4>联系我们</h4>
+          <p>电话：400-800-XXXX</p>
+          <p>邮箱：contact@gas.com</p>
+        </div>
+        <div class="footer-section">
+          <h4>友情链接</h4>
+          <ul>
+            <li><a href="#">国家能源局</a></li>
+            <li><a href="#">石油天然气协会</a></li>
+          </ul>
+        </div>
+        <div class="copyright">
+          <p>© 2023 天然气工程平台 版权所有</p>
+          <p>京ICP备XXXXXXXX号</p>
+        </div>
+      </div>
+    </el-footer>
   </div>
 </template>
 
 <script>
 import { listSysUnitConvert } from '@/api/system/sysUnitConvert';
+
 export default {
   name: 'Index',
   data() {
     return {
-      // 版本号
       version: '3.8.9',
+      searchKey: '',
+      ads: [
+        { img: require('@/assets/images/logo.png'), link: '#' },
+        { img: require('@/assets/images/logo(2).png'), link: '#' }
+      ],
+      functions: [
+        {
+          icon: 'icon-flow',
+          title: '流量计算',
+          desc: '支持国家(国际)标准计算方法',
+          path: '/ngtools/FlowCal/index'
+        },
+        {
+          icon: 'icon-parameter',
+          title: '参数计算',
+          desc: '天然气物性参数精确计算',
+          path: '/calc/parameter'
+        },
+        {
+          icon: 'icon-doc',
+          title: '资料查询',
+          desc: '行业规范与技术文档',
+          path: '/docs'
+        }
+      ],
+      documents: [
+        { title: '天然气管道设计规范', type: '行业标准', date: '2023-08-01' },
+        { title: '燃气轮机技术手册', type: '技术文档', date: '2023-07-25' },
+        { title: '安全操作指南', type: '操作规范', date: '2023-07-20' }
+      ],
       unitData: [],
       queryParams: {
         pageNum: 1,
@@ -82,6 +120,7 @@ export default {
     this.getList();
   },
   methods: {
+    // 保留原有单位换算方法
     groupByUnitType(data) {
       return data.reduce((acc, unit) => {
         const type = unit.unitType;
@@ -99,81 +138,172 @@ export default {
         return acc;
       }, {});
     },
-    // 加载单位数据
+
     getList() {
-      this.loading = true;
       listSysUnitConvert(this.queryParams).then((response) => {
-        console.log('aaaaaa', response);
         let unitData = this.groupByUnitType(response.rows);
         localStorage.setItem('unitData', JSON.stringify(unitData));
-        this.$store.console.log('saaaaaaaaa', this.sysUnitConvertList);
       });
     },
-    goTarget(href) {
-      window.open(href, '_blank');
+
+    handleFunction(path) {
+      this.$router.push(path);
+    },
+
+    downloadDoc(doc) {
+      // 实现文档下载逻辑
+      console.log('下载文档:', doc.title);
     }
   }
 };
 </script>
-<style scoped>
+
+<style lang="scss" scoped>
 .container {
-  display: flex;
-  flex-direction: column;
-  height: calc(100vh - 100px);
+  background: linear-gradient(rgba(255, 255, 255, 0.9), url('~@/assets/images/logo.png')) center/cover fixed;
+  min-height: 100vh;
 }
 
-.top {
-  height: 30px;
-  text-align: center;
-  /* background-color: #f0f0f0; */
+.header {
+  background: rgba(26, 35, 126, 0.9);
+  height: 60px !important;
+  .header-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .logo {
+      display: flex;
+      align-items: center;
+      img {
+        height: 40px;
+        margin-right: 10px;
+      }
+      span {
+        color: #fff;
+        font-size: 20px;
+        font-weight: bold;
+      }
+    }
+
+    .el-menu {
+      flex: 1;
+      margin-left: 40px;
+    }
+
+    .header-right {
+      width: 300px;
+      margin-left: 20px;
+    }
+  }
 }
 
-.bottom {
-  height: 30px;
-  text-align: center;
-  vertical-align: top;
-  /* background-color: #f0f0f0; */
+.top-ad {
+  margin: 20px 0;
+  border-radius: 4px;
+  overflow: hidden;
+  .ad-image {
+    width: 100%;
+    height: 240px;
+    object-fit: cover;
+  }
 }
 
-.middle {
-  display: flex;
-  flex: 1; /* 中间区域占满剩余空间 */
+.function-area {
+  padding: 20px;
+  .function-card {
+    text-align: center;
+    margin-bottom: 20px;
+    cursor: pointer;
+    transition: transform 0.3s;
+
+    &:hover {
+      transform: translateY(-5px);
+    }
+
+    i {
+      font-size: 40px;
+      color: #1a237e;
+      margin: 10px 0;
+    }
+
+    h3 {
+      color: #1a237e;
+      margin: 10px 0;
+    }
+
+    p {
+      color: #666;
+      font-size: 14px;
+    }
+  }
 }
 
-.left {
-  width: 75%;
-  /* background-color: #e0e0e0; */
+.document-area {
+  background: rgba(255, 255, 255, 0.9);
+  padding: 20px;
+  border-radius: 4px;
+  margin: 20px 0;
+
+  .section-title {
+    color: #1a237e;
+    border-left: 4px solid #2196f3;
+    padding-left: 10px;
+    margin-bottom: 20px;
+  }
 }
 
-.right {
-  width: 25%;
-  /* background-color: #d0d0d0; */
+.footer {
+  background: rgba(0, 0, 255, 0.9);
+  color: #fff;
+  padding: 40px 0;
+
+  .footer-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+
+    .footer-section {
+      h4 {
+        color: #ff9800;
+        margin-bottom: 15px;
+      }
+
+      a {
+        color: #fff;
+        &:hover {
+          color: #2196f3;
+        }
+      }
+    }
+
+    .copyright {
+      text-align: center;
+      margin-top: 30px;
+      width: 100%;
+      opacity: 0.8;
+    }
+  }
 }
 
-/* 美化 .content 部分的样式 */
-.content {
-  font-size: 14px; /* 缩小字体 */
-  line-height: 1.6; /* 调整行高，增强可读性 */
-  padding: 20px; /* 添加内边距，使内容不紧贴边框 */
-}
+@media (max-width: 768px) {
+  .header-content {
+    padding: 0 10px;
 
-.content p {
-  text-indent: 2em; /* 首行缩进2个字符 */
-  margin-bottom: 10px; /* 段落底部间距 */
-}
+    .el-menu {
+      display: none;
+    }
 
-.content h2,
-.content h3 {
-  margin-top: 20px; /* 标题顶部间距 */
-  margin-bottom: 10px; /* 标题底部间距 */
-}
+    .header-right {
+      width: auto !important;
+    }
+  }
 
-.content ol,
-.content ul {
-  padding-left: 20px; /* 列表左侧内边距 */
-}
-
-.content li {
-  margin-bottom: 8px; /* 列表项底部间距 */
+  .function-card {
+    margin-bottom: 15px !important;
+  }
 }
 </style>