0.0

src/api/request.js

@@ -1,4 +1,5 @@
 import axios from 'axios';
+import message from '../utils/message'  // 改用全局消息实例
 // request.js
 // 创建新的axios实例
 const baseURL='https://deepseek.lyzhcs.com';
@@ -80,26 +81,30 @@ service.interceptors.request.use(
 );
 //axios响应拦截器
 service.interceptors.response.use(
+	
 	response => {
 		return response;
 	},
 	error => {
+	
 		// 处理异常情况，根据项目实际情况处理或不处理
 		if (error && error.response) {
+			console.log(2);
 			// 根据约定的响应码处理
 			switch (error.response.status) {
 				case 403:
-					error.message = '拒绝访问';
+					message.error('拒绝访问');
 					break;
 				case 502:
-					error.message = '服务器端出错';
+					message.error('服务器端出错');
 					break;
 				default:
-					error.message = `连接错误${error.response.status}`;
+					message.error(`连接错误${error.response.status}`);
 			}
 		} else {
 			// 超时处理
-			error.message = '服务器响应超时，请刷新当前页';
+			message.error('服务器响应超时，请刷新当前页');
+			//message.error('Once upon a time you dressed so fine')
 		}
 		return Promise.resolve(error.response);
 	}

src/main.js

@@ -6,6 +6,7 @@ import App from './App.vue'
 import router from './router/routes'
 import VueWechatTitle from 'vue-wechat-title'; //引入VueWechatTitle
 import naive from 'naive-ui';
+import './polyfills.js';
 
 const app = createApp(App);
 app.use(naive);

src/polyfills.js

@@ -0,0 +1,8 @@
+if (!Array.prototype.at) {
+  Array.prototype.at = function(n) {
+    n = Math.trunc(n) || 0;
+    if (n < 0) n += this.length;
+    if (n < 0 || n >= this.length) return undefined;
+    return this[n];
+  };
+}

src/utils/message.js

@@ -0,0 +1,5 @@
+import { createDiscreteApi } from 'naive-ui'
+
+const { message } = createDiscreteApi(['message'])
+
+export default message 

src/view/home/index.vue

@@ -2,13 +2,12 @@
   <div class="home-container">
     <!-- 顶部公司名称 -->
     <div class="company-title">
-        洛阳弘义智慧城市建设服务有限公司
+      <img src="@/assets/title.png" alt="logo" style="width: 500px;">
     </div>
-
     <!-- 中间内容区域 -->
     <div class="content-wrapper">
-      <div class="start-chat-btn" >
+      <div class="start-chat-btn">
-        <button class="chat-btn" @click="startChat" >
+        <button class="chat-btn" @click="startChat">
           <div style="font-size: 20px;font-weight: 600;color: #4D6BFE;">开始对话</div>
           <div class="sub-text">
             <span>免费与 DeepSeek-R1 对话</span>
@@ -19,59 +18,94 @@
     </div>
     <!-- 添加底部区域 -->
   </div>
-  <div style="height: 400px;"></div>
+  <div style="text-align: center;padding: 20px;margin-top: 50px;">
+    <div
+      style="font-size: clamp(24px, 5vw, 40px);font-weight: 600;color: #222222;position: relative;display: inline-block;">
+      <span>AI智能搜索</span>
+      <img src="@/assets/xing.png" style="width: clamp(30px, 8vw, 40px);position: absolute;top: -10px;">
+    </div>
+    <div style="font-size: clamp(14px, 3vw, 16px);color: #999999;margin: 20px 0px;">智能中枢，多维解析，实时对接全网资讯生态</div>
+    <img src="@/assets/count.png" style="width: 900px; max-width: 100%;">
+  </div>
+  <div style="text-align: center;" :style="{ margin: isMobile ? '30px' : '60px' }">
+    <div style="font-size: clamp(24px, 3vw, 32px);font-weight: 600;color: #222222;">支持单位</div>
+    <div style="font-size: clamp(14px, 3vw, 16px);color: #999999;margin-top: 15px;">Support Unit</div>
+  </div>
   <div class="footer">
     <div class="footer-content">
       <div class="info-columns">
         <div class="info-column">
           <div class="title">
+            <img src="@/assets/icon1.png" alt="icon" class="title-icon">
             <a target="_blank" href="https://zwfw.ly.gov.cn/zwdt/lyzwdt/pages/index/index">洛阳市行政审批和政务信息管理局</a>
           </div>
         </div>
         <div class="info-column">
           <div class="title">
+            <img src="@/assets/icon2.png" alt="icon" class="title-icon">
             <a target="_blank" href="https://www.lygsjt.com/">洛阳国晟投资控股集团有限公司</a>
           </div>
         </div>
         <div class="info-column">
           <div class="title">
+            <img src="@/assets/icon3.png" alt="icon" class="title-icon">
             <a target="_blank" href="http://www.lyhygysy.com/">洛阳弘义公用事业投资发展集团有限公司</a>
           </div>
         </div>
         <div class="info-column">
           <div class="title">
+            <img src="@/assets/icon4.png" alt="icon" class="title-icon">
             <a target="_blank" href="http://www.lyzhcs.com/">
               洛阳弘义智慧城市建设服务有限公司
             </a>
           </div>
         </div>
       </div>
-        
+    </div>
+    <div style="background: #EEEEEE;height: 1px;width: 57%;margin: clamp(40px, 8vw, 80px) auto;"></div>
     <div class="company-info">
       <div class="logo">
         <img src="@/assets/loog.png" alt="公司logo">
       </div>
       <div class="contact-info">
-            <div style="word-break: break-all;">© 2025 有限公司 版权所有</div>
+        <div style="word-break: break-all;">网站备案号：豫ICP备xxxxxxxx号-1</div>
       </div>
-          <div class="qr-codes">
+      <div>
-            <div class="qr-code">
+        <img src="@/assets/qrcode.png" alt="二维码1" style="width: 150px;height: 150px;">
+      </div>
+      <!-- <div class="qr-codes"> -->
+      <!-- <div class="qr-code">
               <img src="@/assets/ai-logo.png" alt="二维码1">
-            </div>
+            </div> -->
-            <div class="qr-code">
+      <!-- <div class="qr-code">
               <img src="@/assets/ai-logo.png" alt="二维码1">
-            </div>
+            </div> -->
-          </div>
+      <!-- </div> -->
-          <div class="contact-info">网站备案号：豫ICP备xxxxxxxx号-1</div>
+      <!-- <div class="contact-info">网站备案号：豫ICP备xxxxxxxx号-1</div>
-          <div class="contact-info" style="margin-top: 10px;">豫公网安备 xxxxxxxxx 号 </div>
+          <div class="contact-info" style="margin-top: 10px;">豫公网安备 xxxxxxxxx 号 </div> -->
-        </div>
     </div>
   </div>
 </template>
 
 <script setup>
 import { useRouter } from 'vue-router';
+import { ref, onMounted, onUnmounted } from 'vue';
+
 const router = useRouter();
+const isMobile = ref(window.innerWidth <= 768);
+
+const handleResize = () => {
+  isMobile.value = window.innerWidth <= 768;
+};
+
+onMounted(() => {
+  window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+});
+
 const startChat = () => {
   // 处理开始对话的逻辑
   router.push('/ai');
@@ -86,23 +120,31 @@ const startChat = () => {
   min-height: 100vh;
   width: 100%;
   position: relative;
+
+  @media screen and (max-width: 768px) {
+    min-height: 50vh;
+  }
 }
 
 .company-title {
-  line-height: 40px;
-    font-size: 60px;
   color: #4D6BFE;
   text-align: center;
-    padding: 40px 20px;
   position: relative;
-    font-weight: 600;
   top: 150px;
   z-index: 1;
 
+  img {
+    width: 500px;
+
     @media screen and (max-width: 768px) {
-      font-size: 32px;
+      width: 80%; // 使用百分比宽度以适应不同屏幕
-      top: 100px;
+      max-width: 300px; // 设置最大宽度
-      padding: 20px;
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+    top: 80px; // 减小顶部间距
+    padding: 0 15px; // 添加两侧内边距
   }
 }
 
@@ -130,9 +172,10 @@ const startChat = () => {
     font-size: 20px;
     color: #333;
     cursor: pointer;
-    box-shadow: 0px 4px 13px 0px rgba(0,0,0,0.1);
+    box-shadow: 0px 4px 13px 0px rgba(0, 0, 0, 0.1);
     transition: all 0.3s;
     width: 450px;
+
     &:hover {
       transform: translateY(-2px);
       box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
@@ -160,9 +203,9 @@ const startChat = () => {
 }
 
 .footer {
-  padding: 40px 0;
   width: 100%;
   z-index: 1;
+
   .footer-content {
     display: flex;
     justify-content: center;
@@ -174,26 +217,70 @@ const startChat = () => {
     @media screen and (max-width: 768px) {
       flex-direction: column;
       padding: 0 20px;
+
     }
   }
 
   .info-columns {
     display: flex;
-    gap: 80px;
+    gap: 40px;
     margin-right: 40px;
 
     @media screen and (max-width: 768px) {
-      flex-direction: column;
+      display: grid;
-      gap: 30px;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 20px;
       margin-right: 0;
+      padding: 20px;
+      width: 100%;
     }
 
     .info-column {
+      width: 200px;
+      background: #FFFFFF;
+      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+      padding: 20px;
+     
+      @media screen and (max-width: 768px) {
+        width: 100%;
+        padding: 0px;
+        border-radius: 12px;
+        display: flex;
+        padding: 30px 0px;
+        align-items: center;
+        justify-content: center;
+      }
+
       .title {
-        font-size: 16px;
+        font-size: 14px;
         font-weight: bold;
-        margin-bottom: 20px;
+        color: #768597;
-        color: #333;
+        text-align: left;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+
+        @media screen and (max-width: 768px) {
+          font-size: 13px;
+          text-align: center;
+          flex-direction: column;
+          gap: 12px;
+          font-weight: 400;
+          width: 100%;
+          padding: 0px 10px;
+        }
+
+        a {
+          @media screen and (max-width: 768px) {
+            font-size: 12px;
+            line-height: 1.4;
+            text-align: center;
+            display: block;
+            width: 100%;
+            padding: 0 5px;
+          }
+        }
       }
 
       .item {
@@ -206,23 +293,12 @@ const startChat = () => {
           color: #4D6BFE;
         }
       }
-
-      @media screen and (max-width: 768px) {
-        text-align: center;
-        
-        .title {
-          font-size: 14px;
-          margin-bottom: 10px;
-        }
-      }
     }
   }
 
   .company-info {
-    width: 390px;
+    text-align: center;
-    margin-left: 80px;
     .logo {
-      margin-bottom: 20px;
       img {
         width: 120px;
         height: auto;
@@ -232,6 +308,8 @@ const startChat = () => {
     .contact-info {
       font-size: 14px;
       color: #94A3B8;
+      margin: 20px 0px;
+
       div {
         white-space: nowrap;
       }
@@ -243,10 +321,11 @@ const startChat = () => {
       margin: 20px 0px;
 
       .qr-code {
-        box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.34);
+        box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.34);
         width: 80px;
         height: 80px;
         border-radius: 4px;
+
         img {
           border-radius: 4px;
           width: 100%;
@@ -261,6 +340,8 @@ const startChat = () => {
       margin-left: 0;
       margin-top: 40px;
       text-align: center;
+      background-color: #F8F8F8;  // 添加移动端背景色
+      padding: 20px 0;  // 添加一些内边距使背景色更美观
 
       .logo {
         display: flex;
@@ -272,10 +353,29 @@ const startChat = () => {
       }
     }
   }
+
+  // 添加分隔线的媒体查询样式
+  div[style*="background: #EEEEEE"] {
+    @media screen and (max-width: 768px) {
+      margin: 40px auto; // 在移动端减小上下边距
+    }
+  }
 }
-a{
+
-  color: #000;
+a {
+  color: #768597;
   //去掉下划线
   text-decoration: none;
 }
+
+.title-icon {
+  width: 50px;
+  height: 50px;
+  object-fit: contain;
+
+  @media screen and (max-width: 768px) {
+    width: 55px;
+    height: 55px;
+  }
+}
 </style>

vite.config.js

@@ -13,7 +13,7 @@ export default defineConfig({
     port: 5000,
     proxy: {
       '/api': {
-        target: 'https://deepseek.lyzhcs.com',
+        target: 'https://deepseek.lyzhcs.com/',
         // target就是你要访问的目标地址，可以是基础地址，这样方便在这个网站的其他api口调用数据
         ws: true,
         changeOrigin: true,