修改首页图片样式

README.md

@@ -1,37 +1,85 @@
-# 九聚-h5挂号-前端
+# 九聚-宁夏武警公众号前端页面
 
-#### 介绍
-九聚-h5挂号-前端
+## 项目介绍
+本项目是九聚-宁夏武警公众号的前端页面，基于Vue.js框架开发，提供了面向用户的医疗服务功能，包括预约挂号、缴费、报告查询、健康管理等多种功能模块。
 
-#### 软件架构
-软件架构说明
+## 技术栈
+- **前端框架**: Vue.js 2.6.11
+- **UI组件库**: Vant 2.12.48
+- **路由管理**: Vue Router 3.2.0
+- **状态管理**: Vuex 3.4.0
+- **HTTP请求**: Vue Resource 1.5.1
+- **图表库**: ECharts 6.0.0
+- **地图服务**: Vue AMAP 0.5.10
+- **文档处理**: pdfh5 1.4.7, vue-pdf 4.3.0
+- **富文本编辑器**: Quill 1.3.6
+- **二维码生成**: vue-qr 2.5.0
+- **构建工具**: Vue CLI 4.4.0
+
+## 功能模块
+
+### 核心功能
+- **预约挂号**: 提供科室选择、医生预约、挂号记录查询等功能
+- **门诊缴费**: 支持在线缴费、缴费记录查询
+- **报告查询**: 检验报告、检查报告的在线查询
+- **住院管理**: 住院费用查询、日清单查看
+- **健康体检**: 体检预约、体检报告查询
+- **个人中心**: 用户信息管理、家庭成员管理、就诊记录查询
+
+### 辅助功能
+- **医院导航**: 医院信息、科室介绍、医生信息查询
+- **智能导诊**: 症状自查、疾病查询
+- **消息中心**: 系统通知、就诊提醒
+- **意见反馈**: 用户建议与反馈
+
+## 项目结构
+```
+src/
+├── assets/            # 静态资源文件(图片等)
+├── components/        # 公共组件
+├── css/               # 全局样式
+├── request/           # API请求配置
+├── router/            # 路由配置
+├── store/             # Vuex状态管理
+├── utils/             # 工具函数
+├── views/             # 页面组件
+├── App.vue            # 根组件
+└── main.js            # 入口文件
+```
+
+## 安装与运行
+
+### 环境要求
+- Node.js 14.x 或更高版本
+- Yarn 或 npm
+
+### 安装依赖
+```bash
+yarn install
+npm install
+```
 
 
-#### 安装教程
+### 生产环境构建
+```bash
+npm run build
+```
 
-1.  xxxx
-2.  xxxx
-3.  xxxx
+## 注意事项
+1. 项目基于微信公众号开发，需要在微信环境中测试部分功能
+2. 图片资源已进行优化处理，提高页面加载速度
+3. 部分功能需要后端API支持，请确保API服务正常运行
+4. 构建时会自动进行资源压缩和代码分割，优化前端性能
 
-#### 使用说明
+## API接口
+项目使用以下API接口（示例）：
+```javascript
+// API基础地址
+Vue.prototype.httpurl = "https://nxwj.btlsoln.com/nxgzh";
+```
 
-1.  xxxx
-2.  xxxx
-3.  xxxx
+## 开发
+九聚科技开发团队-桑
 
-#### 参与贡献
-
-1.  Fork 本仓库
-2.  新建 Feat_xxx 分支
-3.  提交代码
-4.  新建 Pull Request
-
-
-#### 特技
-
-1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
-2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
-3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
-4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
-5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
-6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
+## 许可证
+MIT License

analyze-png.js

@@ -1,39 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-
-// 读取src/assets目录
-const assetsDir = path.join(__dirname, 'src', 'assets');
-
-fs.readdir(assetsDir, (err, files) => {
-  if (err) {
-    console.error('读取目录失败:', err);
-    return;
-  }
-
-  // 过滤出PNG图片
-  const pngFiles = files.filter(file => file.endsWith('.png'));
-
-  // 获取每个文件的大小
-  const fileInfo = pngFiles.map(file => {
-    const filePath = path.join(assetsDir, file);
-    const stats = fs.statSync(filePath);
-    return {
-      name: file,
-      size: stats.size,
-      sizeKB: (stats.size / 1024).toFixed(2)
-    };
-  });
-
-  // 按大小排序（从大到小）
-  fileInfo.sort((a, b) => b.size - a.size);
-
-  // 输出结果
-  console.log('src/assets目录下PNG图片大小分析（从大到小）:');
-  console.log('文件名'.padEnd(25), '大小（字节）'.padEnd(15), '大小（KB）');
-  console.log('-' .repeat(60));
-  fileInfo.forEach(file => {
-    console.log(file.name.padEnd(25), file.size.toString().padEnd(15), file.sizeKB);
-  });
-  console.log('-' .repeat(60));
-  console.log(`总计: ${pngFiles.length} 个PNG图片`);
-});

optimize-png.js

@@ -1,49 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const imagemin = require('imagemin');
-const imageminPngquant = require('imagemin-pngquant');
-
-// 源目录和目标目录
-const srcDir = path.join(__dirname, 'src', 'assets');
-const destDir = path.join(__dirname, 'src', 'assets'); // 直接覆盖原文件
-
-// 优化PNG图片的函数
-async function optimizePng() {
-  try {
-    console.log('开始优化PNG图片...');
-    
-    // 读取源目录下的所有PNG图片
-    const files = await imagemin([`${srcDir}/*.png`], {
-      destination: destDir,
-      plugins: [
-        imageminPngquant({
-          quality: [0.6, 0.8] // 质量范围
-        })
-      ]
-    });
-    
-    console.log('PNG图片优化完成！');
-    console.log('优化的文件:');
-    
-    // 计算并显示优化前后的文件大小对比
-    for (const file of files) {
-      const srcPath = path.join(srcDir, path.basename(file.sourcePath));
-      const destPath = file.destinationPath;
-      
-      const srcStats = fs.statSync(srcPath);
-      const destStats = fs.statSync(destPath);
-      
-      const srcSize = srcStats.size;
-      const destSize = destStats.size;
-      const reduction = ((srcSize - destSize) / srcSize * 100).toFixed(2);
-      
-      console.log(`${path.basename(file.sourcePath)}: ${(srcSize / 1024).toFixed(2)}KB → ${(destSize / 1024).toFixed(2)}KB (减少${reduction}%)`);
-    }
-    
-  } catch (error) {
-    console.error('优化PNG图片时出错:', error);
-  }
-}
-
-// 执行优化
-optimizePng();

src/views/Home.vue

@@ -9,7 +9,7 @@
           <img :src="item.img"/>
         </van-swipe-item>
       </van-swipe>
-      <div class="color-overlay"></div>
+      <!-- <div class="color-overlay"></div> -->
       <div class="in_search">
         <router-link to="search">
           <img src="../assets/search.png"/>可搜索医生、科室
@@ -379,7 +379,7 @@ export default {
 }
 
 .in_search a {
-  background: rgba(255, 255, 255, 0.4);
+  background: hsl(0deg 0% 0% / 40%);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -406,6 +406,9 @@ export default {
   font-size: 0.37rem;
   font-weight: 700;
   z-index: 4;
+  padding: 5px 10px;
+  background: hsl(0deg 0% 0% / 40%);
+  border-radius: 15px;
 }
 
 

verify-optimization.js

@@ -1,51 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-
-// 源图片目录和构建后的图片目录
-const srcDir = path.join(__dirname, 'src', 'assets');
-const distDir = path.join(__dirname, 'dist', 'img');
-
-// 比较源图片和构建后图片的大小
-function compareImageSizes() {
-  try {
-    // 读取dist目录下的所有图片文件
-    const distFiles = fs.readdirSync(distDir).filter(file => file.endsWith('.png'));
-    
-    console.log('图片优化效果验证（源图片 vs 构建后图片）:');
-    console.log('-' .repeat(70));
-    console.log('源文件名'.padEnd(25), '构建后文件名'.padEnd(30), '大小对比');
-    console.log('-' .repeat(70));
-    
-    // 遍历dist目录下的图片文件
-    for (const distFile of distFiles) {
-      // 提取源文件名（去掉hash和扩展名）
-      const srcFileName = distFile.replace(/\.[a-f0-9]{8}\.png$/, '.png');
-      const srcPath = path.join(srcDir, srcFileName);
-      const distPath = path.join(distDir, distFile);
-      
-      // 检查源文件是否存在
-      if (fs.existsSync(srcPath)) {
-        const srcStats = fs.statSync(srcPath);
-        const distStats = fs.statSync(distPath);
-        
-        const srcSize = srcStats.size;
-        const distSize = distStats.size;
-        const reduction = ((srcSize - distSize) / srcSize * 100).toFixed(2);
-        
-        console.log(
-          srcFileName.padEnd(25),
-          distFile.padEnd(30),
-          `${(srcSize / 1024).toFixed(2)}KB → ${(distSize / 1024).toFixed(2)}KB (减少${reduction}%)`
-        );
-      }
-    }
-    
-    console.log('-' .repeat(70));
-    
-  } catch (error) {
-    console.error('验证图片优化效果时出错:', error);
-  }
-}
-
-// 执行验证
-compareImageSizes();