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()
@@ -82,8 +81,8 @@ const loadCSSFiles = () => {
           <div class="col-xs-6 col-md-3">
             <div class="row">
               <div class="col-xs-12 col-md-3"><img
-alt="适配模块" class="center-block"
+                  alt="适配模块" class="center-block"
-                                                   src="/img/internet_thinks/icon_iot11.png"></div>
+                  src="/img/internet_thinks/icon_iot11.png"></div>
               <div class="col-xs-12 col-md-9">
                 <h4>适配模块</h4>
                 <h6>帮助您的设备快速智能化</h6>
@@ -94,8 +93,8 @@ alt="适配模块" class="center-block"
           <div class="col-xs-6 col-md-3">
             <div class="row">
               <div class="col-xs-12 col-md-3"><img
-alt="多协议" class="center-block"
+                  alt="多协议" class="center-block"
-                                                   src="/img/internet_thinks/icon_iot11.png"></div>
+                  src="/img/internet_thinks/icon_iot11.png"></div>
               <div class="col-xs-12 col-md-9">
                 <h4>多协议</h4>
                 <h6>支持多种行业的标准协议</h6>
@@ -106,8 +105,8 @@ alt="多协议" class="center-block"
           <div class="col-xs-6 col-md-3">
             <div class="row">
               <div class="col-xs-12 col-md-3"><img
-alt="规则引擎"
+                  alt="规则引擎"
-                                                   class="img-responsive center-block" src="/img/internet_thinks/icon_iot11.png"></div>
+                  class="img-responsive center-block" src="/img/internet_thinks/icon_iot11.png"></div>
               <div class="col-xs-12 col-md-9">
                 <h4>规则引擎</h4>
                 <h6>灵活适配，助力业务升级</h6>
@@ -118,8 +117,8 @@ alt="规则引擎"
           <div class="col-xs-6 col-md-3">
             <div class="row">
               <div class="col-xs-12 col-md-3"><img
-alt="安全"
+                  alt="安全"
-                                                   class="img-responsive center-block" src="/img/internet_thinks/icon_iot11.png"></div>
+                  class="img-responsive center-block" src="/img/internet_thinks/icon_iot11.png"></div>
               <div class="col-xs-12 col-md-9">
                 <h4>安全</h4>
                 <h6>全链路高级别验证和授权机制</h6>

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,75 +23,155 @@ useHead({
 onMounted(() => {
   // 延迟加载以确保DOM完全渲染
   setTimeout(() => {
+    // 检查jQuery是否加载
+    if (typeof $ === 'undefined') {
+      console.error('jQuery未加载');
+      return;
+    }
+
     // 设置首页巨幕高度
     $('.index-giant').height($(window).height());
-    
+
     // 解决方案切换功能
-    $('.index-solut ul li').on('click', function(){
+    $('.index-solut ul li').on('click', function () {
       $(this).addClass('index-solut-li').siblings().removeClass('index-solut-li');
       $('.solut-detail ul').eq($(this).index()).show().siblings().hide();
-      if($(this).index()==0){
+      if ($(this).index() == 0) {
         $('#triangle-up').css({
           'left': '45%'
         });
       }
-      if($(this).index()==1){
+      if ($(this).index() == 1) {
         $('#triangle-up').css({
           'left': '49.5%'
         });
       }
-      if($(this).index()==2){
+      if ($(this).index() == 2) {
         $('#triangle-up').css({
           'left': '54.5%'
         });
       }
     });
-    
+
     // 左侧栏动画功能
-    (function offBar(){
+    (function offBar() {
-      var off=true;
+      let off = true;
-      $('.left-bar-1').on('click',function(){
+      $('.left-bar-1').on('click', function () {
-        if(off){
+        if (off) {
-          $('.left-bar').animate({'right':0}, "1000");
+          $('.left-bar').animate({'right': 0}, "1000");
-          off=false;
+          off = false;
-        }else{
+        } else {
-          $('.left-bar').animate({'right':'-32px'}, "slow");
+          $('.left-bar').animate({'right': '-32px'}, "slow");
-          off=true;
+          off = true;
         }
       });
     })();
-    
+
     // 微信二维码悬停效果
-    $('.left-bar-2 a.wecate').hover(function() {
+    $('.left-bar-2 a.wecate').hover(function () {
       $('.left-bar-3').show();
-    }, function() {
+    }, function () {
       $('.left-bar-3').hide();
     });
-    
+
     // 腾讯QQ悬停效果
-    $('._tencent').hover(function() {
+    $('._tencent').hover(function () {
       $('.left-bar-4').show();
-    }, function() {
+    }, function () {
       $('.left-bar-4').hide();
     });
-    
+
     // 电话悬停效果
-    $('._phone').hover(function() {
+    $('._phone').hover(function () {
       $('.left-bar-5').show();
-    }, function() {
+    }, function () {
       $('.left-bar-5').hide();
     });
-    
+
     // 锚点滚动功能
-    $(".miaodian a").click(function() {
+    $(".miaodian a").click(function () {
-      $("body").animate({    
+      $("body").animate({
         scrollTop: 3550
       }, 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>