优化文章导航栏

app/components/DevelopNews.vue

@@ -1,103 +1,176 @@
 <script lang="ts" setup>
-import {onMounted} from "vue";
+import { ref, onMounted, computed } from 'vue'
+
+// 类型定义
+interface Article {
+  id: number
+  title: string
+  time: number
+}
+
+interface NewsCategory {
+  name: string
+  articleList: Article[]
+}
+
+interface NewsApiResponse {
+  code: string
+  data: NewsCategory[]
+}
+
+// 响应式数据
+const newsData = ref<NewsCategory[]>([])
+const loading = ref(false)
+const error = ref('')
+
+// 计算属性 - 格式化时间
+const formatTime = (timestamp: number): string => {
+  const date = new Date(timestamp * 1000)
+  const Y = date.getFullYear()
+  const M = String(date.getMonth() + 1).padStart(2, '0')
+  const D = String(date.getDate()).padStart(2, '0')
+  const h = String(date.getHours()).padStart(2, '0')
+  const m = String(date.getMinutes()).padStart(2, '0')
+  return `${Y}-${M}-${D} ${h}:${m}`
+}
+
+// 获取新闻数据
+const fetchNewsData = async (): Promise<void> => {
+  loading.value = true
+  error.value = ''
+  
+  try {
+    const response = await fetch('https://article.yuxiit.com/Home/Article/articleList.html', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+      body: 'p1_Num=10'
+    })
+    
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+    
+    const result: NewsApiResponse = await response.json()
+    
+    if (result.code === '10000') {
+      newsData.value = result.data
+    } else {
+      throw new Error('API returned error code: ' + result.code)
+    }
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : '获取新闻数据失败'
+    console.error('Error fetching news data:', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 获取文章链接
+const getArticleLink = (articleId: number): string => {
+  return `http://www.yuxiit.com/news/news_${articleId}.html`
+}
+
+// 获取显示的文章列表（每个分类显示前2篇文章，与原来jQuery版本保持一致）
+const getDisplayArticles = (articles: Article[]): Article[] => {
+  return articles.slice(0, 2)
+}
 
 onMounted(() => {
-  // 加载CSS样式文件
-  loadCSSFiles()
-
-  // 加载JavaScript文件
-  loadJSFiles()
+  fetchNewsData()
 })
-
-const loadJSFiles = () => {
-  const jsFiles = [
-
-
-    '/js/news.js',
-
-
-  ]
-
-  jsFiles.forEach(src => {
-    // 检查是否已经加载过该JS文件
-    const existingScript = document.querySelector(`script[src="${src}"]`)
-    if (!existingScript) {
-      const script = document.createElement('script')
-      script.src = src
-      script.type = 'text/javascript'
-      document.head.appendChild(script)
-    }
-  })
-}
-
-const loadCSSFiles = () => {
-  const cssFiles = []
-
-  cssFiles.forEach(href => {
-    // 检查是否已经加载过该CSS文件
-    const existingLink = document.querySelector(`link[href="${href}"]`)
-    if (!existingLink) {
-      const link = document.createElement('link')
-      link.rel = 'stylesheet'
-      link.href = href
-      link.type = 'text/css'
-      document.head.appendChild(link)
-    }
-  })
-}
 </script>
 
 <template>
   <!--box3 新闻-->
-  <!-- <div style="background: #fafafa;"> -->
   <div class="container">
+    <!-- 标题区域 -->
     <div class="text-center">
       <div class="blank50"/>
       <div
           class="cBlack f_42 line42 marginB10 wow fadeInDown animated"
-          style="visibility: visible; animation-name: fadeInDown;"><!-- APP -->开发资讯
+          style="visibility: visible; animation-name: fadeInDown;">
+        开发资讯
+      </div>
+      <div class="cGray f_18 wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;">
+        NEWS
       </div>
-      <div class="cGray f_18 wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;">NEWS</div>
       <div class="blank20"/>
       <div class="blank20"/>
     </div>
 
-    <div
-        class="col-md-4 firstPageBox3Li wow fadeInDown animated active" data-wow-delay="300ms"
-        style="visibility: visible; animation-delay: 300ms; animation-name: fadeInDown;">
-      <div class="title f_22 cBlue text-center pointer" title="解决方案"/>
-      <hr>
-      <div class="blank20"/>
-      <ul/>
+    <!-- 加载状态 -->
+    <div v-if="loading" class="text-center">
+      <div class="blank50"/>
+      <div class="cGray f_18 loading-text">正在加载新闻...</div>
       <div class="blank50"/>
     </div>
 
-    <div
-        class="col-md-4 firstPageBox3Li wow fadeInDown animated active" data-wow-delay="500ms"
-        style="visibility: visible; animation-delay: 500ms; animation-name: fadeInDown;">
-      <div class="title f_22 cBlue text-center pointer" title="开发知识"/>
-      <hr>
+    <!-- 错误状态 -->
+    <div v-else-if="error" class="text-center">
+      <div class="blank50"/>
+      <div class="cRed f_18">加载失败: {{ error }}</div>
       <div class="blank20"/>
-      <ul/>
+      <button 
+        @click="fetchNewsData" 
+        class="btn btn-primary"
+        style="background-color: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer;">
+        重新加载
+      </button>
       <div class="blank50"/>
     </div>
 
-    <div
-        class="col-md-4 firstPageBox3Li wow fadeInDown animated active" data-wow-delay="700ms"
-        style="visibility: visible; animation-delay: 700ms; animation-name: fadeInDown;">
-      <div class="title f_22 cBlue text-center pointer" title="行业动态"/>
-      <hr>
-      <div class="blank20"/>
-      <ul/>
+    <!-- 新闻分类列表 -->
+    <div v-else class="row">
+      <div
+          v-for="(category, index) in newsData"
+          :key="category.name"
+          class="col-md-4 firstPageBox3Li wow fadeInDown animated active"
+          :data-wow-delay="`${300 + index * 200}ms`"
+          :style="`visibility: visible; animation-delay: ${300 + index * 200}ms; animation-name: fadeInDown;`">
+        
+        <!-- 分类标题 -->
+        <div class="title f_22 cBlue text-center pointer" :title="category.name">
+          {{ category.name }}
+        </div>
+        <hr>
+        <div class="blank20"/>
+        
+        <!-- 文章列表 -->
+        <ul>
+          <li v-for="article in getDisplayArticles(category.articleList)" :key="article.id">
+            <a rel="nofollow" target="_blank">
+              <span class="pull-right"></span>
+            </a>
+            <a 
+              :href="getArticleLink(article.id)"
+              :title="article.title"
+              target="_blank"
+              class="cGray f_14">
+              <span class="pull-right">{{ formatTime(article.time) }}</span>
+              <span class="oneIn oneIn_1">{{ article.title }}</span>
+              <div class="blank20"></div>
+            </a>
+          </li>
+        </ul>
+        
+        <div class="blank50"/>
+      </div>
+    </div>
+
+    <!-- 空状态 -->
+    <div v-if="!loading && !error && newsData.length === 0" class="text-center">
+      <div class="blank50"/>
+      <div class="cGray f_18">暂无新闻数据</div>
       <div class="blank50"/>
     </div>
   </div>
-  <!-- </div> -->
-
 </template>
 
 
 <style scoped>
+/* 文本截断样式 */
 .line-clamp-2 {
   display: -webkit-box;
   -webkit-line-clamp: 2;
@@ -105,10 +178,94 @@ const loadCSSFiles = () => {
   overflow: hidden;
 }
 
+/* 错误状态样式 */
+.cRed {
+  color: #dc3545;
+}
+
+/* 按钮样式 */
+.btn {
+  display: inline-block;
+  font-weight: 400;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  user-select: none;
+  border: 1px solid transparent;
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  border-radius: 0.25rem;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  cursor: pointer;
+}
+
+.btn:hover {
+  opacity: 0.9;
+}
+
+.btn-primary {
+  color: #fff;
+  background-color: #007bff;
+  border-color: #007bff;
+}
+
+/* 加载状态动画 */
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.loading-text {
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+/* 文章列表样式优化 */
+.firstPageBox3Li ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.firstPageBox3Li li {
+  margin-bottom: 10px;
+}
+
+.firstPageBox3Li a {
+  text-decoration: none;
+  display: block;
+  padding: 5px 0;
+}
+
+.firstPageBox3Li a:hover {
+  text-decoration: underline;
+}
+
 /* 响应式调整 */
 @media (max-width: 1024px) {
   .grid {
     gap: 1.5rem;
   }
+  
+  .firstPageBox3Li {
+    margin-bottom: 2rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .firstPageBox3Li {
+    margin-bottom: 1.5rem;
+  }
+  
+  .title {
+    font-size: 18px !important;
+  }
 }
 </style>

app/components/Navigation.vue

@@ -29,7 +29,7 @@
                 <img alt="共享充电宝" class="img-responsive" src="/img/yuxiupdata/mune-6.png">
               </div>
               <ul class="pull-right col-xs-4 col-sm-6">
-                <li><a href="/sharedSolutions/bike" target="_blank">共享单车<p>
+                <li><a href="/sharedSolutions/bike">共享单车<p>
                   一种新型环保共享经济，最大化的利用了公共道路通过率</p></a></li>
 
                 <li><a href="/sharedSolutions/carShare">景区共享电动车<p>
@@ -102,7 +102,7 @@
             </div>
           </li>
           <li class="hidden-xs hidden-sm hidden-md"><a href="/about">关于创特 </a></li>
-          <li><a href="#contact-us">联系我们</a></li>
+          <li><a href="https://ele.ccttiot.com/login" target="_blank">后台管理</a></li>
           <!-- <li><a>0755-85225123</a></li> -->
           <!-- <li class="hidden-xs hidden-sm"><a>18123752516</a></li> -->
           <li class="hidden-xs  hidden-sm hidden-md hidden-lg"/>