bike修复图bug

app/pages/sharedSolutions/bike.vue

@@ -1,62 +1,32 @@
 <script lang="ts" setup>
 import {onMounted} from "vue";
+import {useHead} from "#app";
 
-onMounted(() => {
+// 使用 Nuxt 3 的 useHead 来管理头部资源
-  // 加载CSS样式文件
+useHead({
-  loadCSSFiles()
+  link: [
-
+    {rel: 'stylesheet', href: '/cssBike/bootstrap.min.css'},
-  // 加载JavaScript文件
+    {rel: 'stylesheet', href: '/cssBike/main2.css'},
-  loadJSFiles()
+    {rel: 'stylesheet', href: '/cssBike/index.css'},
+    {rel: 'stylesheet', href: '/cssBike/public.css'}
+  ],
+  script: [
+    {src: '/jsBike/jquery.min.js'},
+    {src: '/jsBike/minBanner.js'},
+    {src: '/jsBike/news.js'}
+  ]
 })
 
-const loadJSFiles = () => {
+onMounted(() => {
-  const jsFiles = [
+  // 延迟加载以确保DOM完全渲染
-    '/jsBike/jquery.min.js',
+  
-    '/jsBike/minBanner.js',
+})
-    '/jsBike/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 = [
-    '/cssBike/bootstrap.min.css',
-    '/cssBike/main2.css',
-
-
-    '/cssBike/index.css',
-    '/cssBike/public.css',
-  ]
-
-  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>
-
+  <div>
-  <view>
 
 
     <!-- 首页巨幕 -->
@@ -280,7 +250,7 @@ const loadCSSFiles = () => {
         </li>
       </ul>
     </div>
-  </view>
+  </div>
 </template>
 
 <style scoped>

public/jsBike/minBanner.js

@@ -1,63 +1,67 @@
 var p = $('#picplayer');
-var pics1 = [{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}];
+var pics1 = [{url: '/images/minBanner-1.png', link: '#', time: 3000}, {
-initPicPlayer(pics1,p.css('width').split('px')[0],p.css('height').split('px')[0]);
+    url: '/images/minBanner-2.jpg',
+    link: '',
+    time: 3000
+}, {url: '/images/minBanner-3.jpg', link: '', time: 3000}, {url: '/images/minBanner-4.jpg', link: '', time: 3000}];
+initPicPlayer(pics1, p.css('width').split('px')[0], p.css('height').split('px')[0]);
 //
 //
-function initPicPlayer(pics,w,h){
+function initPicPlayer(pics, w, h) {
-	//选中的图片
+    //选中的图片
-	var selectedItem;
+    var selectedItem;
-	//选中的按钮
+    //选中的按钮
-	var selectedBtn;
+    var selectedBtn;
-	//自动播放的id
+    //自动播放的id
-	var playID;
+    var playID;
-	//选中图片的索引
+    //选中图片的索引
-	var selectedIndex;
+    var selectedIndex;
-	//容器
+    //容器
-	var p = $('#picplayer');
+    var p = $('#picplayer');
-	var c = $('#piccontent');
+    var c = $('#piccontent');
 
-	for(var i=0; i<pics.length; i++){
+    for (var i = 0; i < pics.length; i++) {
-		//添加图片到容器中
+        //添加图片到容器中
-		c.append('<a target="_blank"><img id="picitem'+i+'" style="display: none;z-index:'+i+'" src="'+pics[i].url+'" /></a>');
+        c.append('<a target="_blank"><img id="picitem' + i + '" style="display: none;z-index:' + i + '" src="' + pics[i].url + '" /></a>');
-		// href="'+pics[i].link+'"
+        // href="'+pics[i].link+'"
-	}
+    }
 
-	//按钮容器，绝对定位在右下角
+    //按钮容器，绝对定位在右下角
-	var btnHolder = $('#picbtnHolder');
+    var btnHolder = $('#picbtnHolder');
-	var btns = $('#picbtns');
+    var btns = $('#picbtns');
 
-	for(var i=0; i<pics.length; i++){
+    for (var i = 0; i < pics.length; i++) {
-		//增加图片对应的按钮
+        //增加图片对应的按钮
-		$('#picbtn'+i).data('index',i);
+        $('#picbtn' + i).data('index', i);
-		$('#picbtn'+i).click( function(event){
+        $('#picbtn' + i).click(function (event) {
-			if(selectedItem.attr('src') == $('#picitem'+$(this).data('index')).attr('src')){
+            if (selectedItem.attr('src') == $('#picitem' + $(this).data('index')).attr('src')) {
-				return;
+                return;
-			}
+            }
-			setSelectedItem($(this).data('index'));
+            setSelectedItem($(this).data('index'));
-		});
+        });
-	}
+    }
-	setSelectedItem(0);
+    setSelectedItem(0);
- 
+
-	//显示指定的图片index
+    //显示指定的图片index
-    function setSelectedItem(index){
+    function setSelectedItem(index) {
         selectedIndex = index;
         clearInterval(playID);
-        if(selectedItem)selectedItem.fadeOut('fast');
+        if (selectedItem) selectedItem.fadeOut('fast');
-        selectedItem = $('#picitem'+index);
+        selectedItem = $('#picitem' + index);
         selectedItem.fadeIn('slow');
         //
-        if(selectedBtn){
+        if (selectedBtn) {
-            selectedBtn.children('span').css('backgroundColor','#D8D8D8');
+            selectedBtn.children('span').css('backgroundColor', '#D8D8D8');
             // selectedBtn.css('color','#000');
         }
-        selectedBtn = $('#picbtn'+index);
+        selectedBtn = $('#picbtn' + index);
-        selectedBtn.children('span').css('backgroundColor','#485766');
+        selectedBtn.children('span').css('backgroundColor', '#485766');
         // selectedBtn.css('color','#fff');
         //自动播放
-        playID = setInterval(function(){
+        playID = setInterval(function () {
-            var index = selectedIndex+1;
+            var index = selectedIndex + 1;
-            if(index > pics.length-1)index=0;
+            if (index > pics.length - 1) index = 0;
             setSelectedItem(index);
-        },pics[index].time);
+        }, pics[index].time);
     }
 }