ai优化bike页面
This commit is contained in:
WindowBird
parent
f4c23d8de6
commit
ae8c95e4a7
|
|
@ -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"
|
||||
src="/img/internet_thinks/icon_iot11.png"></div>
|
||||
alt="适配模块" class="center-block"
|
||||
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"
|
||||
src="/img/internet_thinks/icon_iot11.png"></div>
|
||||
alt="多协议" class="center-block"
|
||||
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="规则引擎"
|
||||
class="img-responsive center-block" src="/img/internet_thinks/icon_iot11.png"></div>
|
||||
alt="规则引擎"
|
||||
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="安全"
|
||||
class="img-responsive center-block" src="/img/internet_thinks/icon_iot11.png"></div>
|
||||
alt="安全"
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import {onMounted} from "vue";
|
||||
|
||||
definePageMeta({
|
||||
layout: 'mini'
|
||||
layout: 'no-new'
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
|
|
|
|||
|
|
@ -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(){
|
||||
var off=true;
|
||||
$('.left-bar-1').on('click',function(){
|
||||
if(off){
|
||||
$('.left-bar').animate({'right':0}, "1000");
|
||||
off=false;
|
||||
}else{
|
||||
$('.left-bar').animate({'right':'-32px'}, "slow");
|
||||
off=true;
|
||||
(function offBar() {
|
||||
let off = true;
|
||||
$('.left-bar-1').on('click', function () {
|
||||
if (off) {
|
||||
$('.left-bar').animate({'right': 0}, "1000");
|
||||
off = false;
|
||||
} else {
|
||||
$('.left-bar').animate({'right': '-32px'}, "slow");
|
||||
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() {
|
||||
$("body").animate({
|
||||
$(".miaodian a").click(function () {
|
||||
$("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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user