ai优化bike页面

app/pages/IoTSolutions/Internet_Things_IOT.vue

@@ -2,9 +2,8 @@
 import {onMounted} from "vue";
 
 definePageMeta({
-  layout: 'mini'
+  layout: 'no-new'
 })
-
 onMounted(() => {
   // 加载CSS样式文件
   loadCSSFiles()

app/pages/IoTSolutions/Internet_Things_hardware.vue

@@ -2,7 +2,7 @@
 import {onMounted} from "vue";
 
 definePageMeta({
-  layout: 'mini'
+  layout: 'no-new'
 })
 
 onMounted(() => {

app/pages/sharedSolutions/bike.vue

@@ -2,6 +2,10 @@
 import {onMounted} from "vue";
 import {useHead} from "#app";
 
+definePageMeta({
+  layout: 'no-new'
+})
+
 // 使用 Nuxt 3 的 useHead 来管理头部资源
 useHead({
   link: [
@@ -12,7 +16,6 @@ useHead({
   ],
   script: [
     {src: '/jsBike/jquery.min.js'},
-    {src: '/jsBike/minBanner.js'},
     {src: '/jsBike/news.js'}
   ]
 })
@@ -20,6 +23,12 @@ useHead({
 onMounted(() => {
   // 延迟加载以确保DOM完全渲染
   setTimeout(() => {
+    // 检查jQuery是否加载
+    if (typeof $ === 'undefined') {
+      console.error('jQuery未加载');
+      return;
+    }
+
     // 设置首页巨幕高度
     $('.index-giant').height($(window).height());
 
@@ -46,7 +55,7 @@ onMounted(() => {
 
     // 左侧栏动画功能
     (function offBar() {
-      var off=true;
+      let off = true;
       $('.left-bar-1').on('click', function () {
         if (off) {
           $('.left-bar').animate({'right': 0}, "1000");
@@ -86,9 +95,83 @@ onMounted(() => {
       }, 1500);
       return false;
     });
-  }, 100);
+
+    // 初始化轮播图
+    initBanner();
+  }, 500);
 })
 
+// 轮播图初始化函数
+function initBanner() {
+  if (typeof $ === 'undefined') {
+    console.error('jQuery未加载，无法初始化轮播图');
+    return;
+  }
+
+  const pics = [
+    {url: '/images/minBanner-1.png', link: '#', time: 3000},
+    {url: '/images/minBanner-2.jpg', link: '', time: 3000},
+    {url: '/images/minBanner-3.jpg', link: '', time: 3000},
+    {url: '/images/minBanner-4.jpg', link: '', time: 3000}
+  ];
+
+  const $picplayer = $('#picplayer');
+  const $piccontent = $('#piccontent');
+  
+  if ($picplayer.length === 0 || $piccontent.length === 0) {
+    console.error('轮播图容器未找到');
+    return;
+  }
+
+  // 清空现有内容
+  $piccontent.empty();
+
+  // 添加图片到容器中
+  pics.forEach((pic, index) => {
+    $piccontent.append(`<a target="_blank" href="${pic.link}"><img id="picitem${index}" style="display: none; z-index: ${index}" src="${pic.url}" /></a>`);
+  });
+
+  // 设置按钮点击事件
+  pics.forEach((pic, index) => {
+    $(`#picbtn${index}`).data('index', index);
+    $(`#picbtn${index}`).off('click').on('click', function() {
+      setSelectedItem(index);
+    });
+  });
+
+  let selectedIndex = 0;
+  let playID = null;
+
+  function setSelectedItem(index) {
+    selectedIndex = index;
+    clearInterval(playID);
+    
+    // 隐藏当前图片
+    $piccontent.find('img').fadeOut('fast');
+    
+    // 显示选中图片
+    $(`#picitem${index}`).fadeIn('slow');
+    
+    // 更新按钮状态
+    $('#picbtns .caption').each(function(i) {
+      if (i === index) {
+        $(this).find('span').css('backgroundColor', '#485766');
+      } else {
+        $(this).find('span').css('backgroundColor', '#D8D8D8');
+      }
+    });
+
+    // 自动播放
+    playID = setInterval(() => {
+      const nextIndex = (selectedIndex + 1) % pics.length;
+      setSelectedItem(nextIndex);
+    }, pics[index].time);
+  }
+
+  // 初始化第一张图片
+  setSelectedItem(0);
+}
+
 
 </script>