代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>微星-客服</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/service.css">
<link rel="stylesheet" href="css/common.css">
<script src="js/jquery.min.js"></script>
<style>
.wth {
width: 0%!important;
}
/* .wft {
width: 100%!important;
} */
.top_nav > ul > li > .table_goods > .goods_left > ul > li > ol > li > a {
padding: 0!important;
border: none!important;
}
.menu_box > ul > li > span > ul > li > a {
text-decoration: none!important;
color: rgb(121, 121, 121)!important;
}
.menu_box > ul > li > a {
text-decoration: none!important;
color: rgb(121, 121, 121)!important;
}
</style>
</head>
<body>
<!-- 头部部分 -->
<header>
<div class="top">
<!-- 大盒子包裹 -->
<div class="top_left hidden-sm hidden-xs"></div>
<div class="top_nav hidden-sm hidden-xs ">
<ul>
<li>
<a href="#">产品资讯</a>
<div class="table_goods">
<!-- <div class="goods_box"> -->
<div class="goods_left">
<ul>
<li>
笔记本电脑
<ol>
<li><a href="list.html">泰坦GT系列</a></li>
<li>绝影GS系列</li>
<li>强袭GE系列</li>
<li>侠客GF系列</li>
<li>先锋Alpha</li>
</ol>
</li>
<li>
台式电脑
<ol>
<li>Aegis系列</li>
<li>Nightblade系列</li>
<li>Infinite系列</li>
<li>Trident系列</li>
<li>CodeX系列</li>
</ol>
</li>
<li>
电脑显卡
<ol>
<li>MEG系列</li>
<li>MPG系列</li>
<li>MAG系列</li>
<li>Pro系列</li>
<li>NVA系列</li>
</ol>
</li>
<li>
电脑主板
<ol>
<li>MEG系列</li>
<li>MPG系列</li>
<li>MAG系列</li>
<li>Pro系列</li>
<li>NVA系列</li>
</ol>
</li>
<li>
显示器
<ol>
<li>MPG系列</li>
<li>MAG系列</li>
<li>PAG系列</li>
<li>Creator系列</li>
<li>Prestige系列</li>
</ol>
</li>
</ul>
</div>
<div class="goods_center"></div>
<div class="goods_right">
<div class="mac">
<div class="mac_box"></div>
</div>
<div class="pc">
<div class="pc_box"></div>
</div>
<div class="socket">
<div class="socket_box"></div>
</div>
<div class="cpu">
<div class="cpu_box"></div>
</div>
<div class="display">
<div class="display_box"></div>
</div>
</div>
<!-- </div> -->
</div>
</li>
<li>
<a href="characteristic.html">勇者系列</a>
<div class="table_list">
<div class="list_box"></div>
</div>
</li>
<li>
<a href="active.html">活动&促销</a>
<div class="table_active">
<div class="active_box"></div>
</div>
</li>
<li>
<a href="main.html">内容创造</a>
<div class="table_main">
<div class="main_box"></div>
</div>
</li>
<li>
<a href="service.html">客户服务</a>
</li>
<li>
<a href="news.html">新闻</a>
</li>
</ul>
</div>
<!-- 小屏下隐藏以上两个盒子，显示下边两个盒子 -->
<div class="tops_left visible-sm visible-xs">
<a href="#" class="glyphicon glyphicon-align-justify"></a>
<a href="#" class="glyphicon glyphicon-remove" style="display:none;"></a>
</div>
<div class="tops_logo visible-sm visible-xs">
<a href="index.html"></a>
</div>
<div class="click_menu">
<div class="menu_box">
<ul>
<li>
<em>产品资讯</em>
<!-- <em>返回</em> -->
<span>
<em>返回</em>
<ul>
<li>
<a href="list.html">笔记本电脑</a>
</li>
<li>台式电脑</li>
<li>电脑显卡</li>
<li>电脑主板</li>
<li>显示器</li>
</ul>
</span>
</li>
<li>
<em>勇者系列</em>
<span>
<em>返回</em>
<ul>
<li>
<a href="characteristic.html">勇者系列</a>
</li>
</ul>
</span>
</li>
<li>
<em>活动&促销</em>
<span>
<em>返回</em>
<ul>
<li>
<a href="active.html">活动</a>
</li>
<li>促销</li>
</ul>
</span>
</li>
<li>
<em>内容创造</em>
<span>
<em>返回</em>
<ul>
<li>
<a href="main.html">内容</a>
</li>
<li>创造</li>
</ul>
</span>
</li>
<li>
<a href="service.html">客户服务</a>
</li>
<li>
<a href="news.html">新闻</a>
</li>
</ul>
</div>
</div>
<div class="top_right">
<ul>
<li><a href="login.html"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
</div>
</header>
<!-- 焦点图部分 -->
<div class="row">
<div class="focus col-xs-12">
<div class="welcome w">
<h1>欢迎来到技术与支持</h1>
<p>为您量身定做专属服务</p>
<div class="search">
<input type="text" name="" id="search" placeholder="搜索">
</div>
</div>
</div>
</div>
<!-- 问题解决方案部分 -->
<div class="list container">
<ul class="row">
<li class="col-lg-3 col-xs-6">
<a href="#">
<img src="images/list1.webp" alt="">
</a>
<h3>如何兑换活动赠品？</h3>
</li>
<li class="col-lg-3 col-xs-6">
<a href="#">
<img src="images/list2.webp" alt="">
</a>
<h3>如何查询保修状态？</h3>
</li>
<li class="col-lg-3 col-xs-6">
<a href="#">
<img src="images/list3.webp" alt="">
</a>
<h3>如何查询维修进度？</h3>
</li>
<li class="col-lg-3 col-xs-6">
<a href="#">
<img src="images/list4.webp" alt="">
</a>
<h3>如何送修我的产品？</h3>
</li>
</ul>
</div>
<!-- 产品部分 -->
<div class="production container">
<div class="row">
<div class="col-xs-12">
<h2>选择您的产品</h2>
<p>选择您所需要的产品服务</p>
</div>
<ul class="w clearfix">
<li class="col-lg-2 col-xs-4">
<a href="#">
<img src="images/prduction1.png" alt="">
<span>主板</span>
</a>
</li>
<li class="col-lg-2 col-xs-4">
<a href="#">
<img src="images/production2.png" alt="">
<span>笔记本</span>
</a>
</li>
<li class="col-lg-2 col-xs-4">
<a href="#">
<img src="images/production3.png" alt="">
<span>显卡</span>
</a>
</li>
<li class="col-lg-2 col-xs-4">
<a href="#">
<img src="images/production4.png" alt="">
<span>移动工作站</span>
</a>
</li>
<li class="col-lg-2 col-xs-4">
<a href="#">
<img src="images/production5.png" alt="">
<span>显示器</span>
</a>
</li>
<li class="col-lg-2 col-xs-4">
<a href="#">
<img src="images/production6.png" alt="">
<span>桌面电脑</span>
</a>
</li>
</ul>
</div>
<div class="hiddens container">
<div class="row">
<div class="col-xs-12">
<div class="btn">
<button>更多产品资讯</button>
<span class="add"></span>
<span class="minus"></span>
</div>
</div>
<ul class="part w clearfix">
<li class="col-lg-2 col-xs-4">
<a href="#">
<img src="images/item1.webp" alt="">
<span>键盘</span>
</a>
</li>
<li class="col-lg-2 col-xs-4">
<a href="#">
<img src="images/item2.webp" alt="">
<span>鼠标</span>
</a>
</li>
<li class="col-lg-2 col-xs-4">
<a href="#">
<img src="images/item3.png" alt="">
<span>耳机</span>
</a>
</li>
<li class="col-lg-2 col-xs-4">
<a href="#">
<img src="images/item4.png" alt="">
<span>摇杆</span>
</a>
</li>
<li class="col-lg-2 col-xs-4">
<a href="#">
<img src="images/item5.webp" alt="">
<span>电竞椅</span>
</a>
</li>
<li class="col-lg-2 col-xs-4">
<a href="#">
<img src="images/item6.webp" alt="">
<span>电脑机箱</span>
</a>
</li>
<li class="col-lg-2 col-xs-4">
<a href="#">
<img src="images/item7.webp" alt="">
<span>其他</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 售后服务 -->
<div class="serve container">
<div class="row">
<div class="col-xs-12">
<h2>售后服务</h2>
<p>服务项目</p>
</div>
<ul class="serve_item">
<li class="col-md-4 col-xs-6">
<a href="https://account-cn.msi.com/customized">
<div class="pic"></div>
<h4>笔记本增值服务</h4>
<span>上门、延保、清洁保养、意外保等服务</span>
</a>
</li>
<li class="col-md-4 col-xs-6">
<a href="https://cn.msi.com/Landing/battery-service/nb">
<div class="pic"></div>
<h4>更换及维修扩展计划</h4>
<span>适用于 GE60和 GE70 的电池服务</span>
</a>
</li>
<li class="col-md-4 col-xs-6">
<a href="#">
<div class="pic"></div>
<h4>常见问题</h4>
<span>解决你的困扰</span>
</a>
</li>
<li class="col-md-4 col-xs-6">
<a href="https://register.msi.com/">
<div class="pic"></div>
<h4>注册你的产品</h4>
<span>获得促销咨询与更多服务</span>
</a>
</li>
<li class="col-md-4 col-xs-6">
<a href="https://account-cn.msi.com/page/repair_inquiry">
<div class="pic"></div>
<h4>进度查询</h4>
<span>跟踪维修状态</span>
</a>
</li>
<li class="col-md-4 col-xs-6">
<a href="#">
<div class="pic"></div>
<h4>保修政策</h4>
<span>点击查看保修政策！</span>
</a>
</li>
<li class="col-md-4 col-xs-6">
<a href="#">
<div class="pic"></div>
<h4>驱动与下载</h4>
<span>下载最新的软件、驱动程序、实用工具及程序</span>
</a>
</li>
<li class="col-md-4 col-xs-6">
<a href="https://account-cn.msi.com/home/service">
<div class="pic"></div>
<h4>售后服务</h4>
<span>微星游戏本在线预约售后服务</span>
</a>
</li>
<li class="col-md-4 col-xs-6">
<a href="https://register.msi.com/page/how_to_identify_barcode">
<div class="pic"></div>
<h4>识别微星条码</h4>
<span>识别微星条码的方法</span>
</a>
</li>
</ul>
</div>
</div>
<!-- 联系我们 -->
<div class="support container">
<div class="row">
<div class="col-xs-12 one">
<h2 id="h2">联系我们</h2>
<p id="p">感谢您选择微星的产品。请您透过以下方式与我们联系，我们很乐意提供协助。</p>
</div>
<ul class="clearfix">
<li class="col-md-4 col-xs-12">
<a href="https://account-cn.msi.com/customized">
<div></div>
<h4>在线提问</h4>
<span>解决你的问题</span>
</a>
</li>
<li class="col-md-4 col-xs-12">
<a href=" javascript:;">
<div></div>
<h4>联系客服人员寻求协助</h4>
<span>想要获得售后支持？那就联系我们售后客服吧！</span>
</a>
</li>
<li class="col-md-4 col-xs-12">
<a href="javascript:;">
<div></div>
<h4>线上对话</h4>
<span>获得即时支援,与我们客服直接对话</span>
</a>
</li>
</ul>
</div>
<div class="station">
<a href="https://cn.msi.com/page/hot-line">
<div></div>
<h4>联系客服人员寻求协助</h4>
<span>想要获得售后支持？那就联系我们售后客服吧！</span>
</a>
</div>
</div>
<!-- 规定定位 -->
<div class="container">
<div class="fix row">
<div class="col-xs-12">
<a href="#">
<span class="icon"></span>
线上即时客服
</a>
</div>
</div>
</div>
<footer>
<!-- 底部上部分 -->
<div class="footer_top hidden-xs">
<ol>
<li>
<h2>社区</h2>
<ul>
<li><a href="#">微星论坛</a></li>
<li><a href="#">部落格</a></li>
<li><a href="#">媒体平台</a></li>
<li><a href="#">影音中心</a></li>
<li><a href="#">电竞战队</a></li>
<li><a href="#">星光班论坛</a></li>
<li><a href="#">Customer Studies</a></li>
</ul>
</li>
<li>
<h2>技术支持</h2>
<ul>
<li><a href="#">大客户服务</a></li>
<li><a href="#">下载中心</a></li>
<li><a href="#">会员中心</a></li>
<li><a href="#">在线客服</a></li>
<li><a href="#">授权代理</a></li>
<li><a href="#">服务站点</a></li>
<li><a href="#">保修条款</a></li>
<li><a href="#">增值服务</a></li>
</ul>
</li>
<li>
<h2>新闻</h2>
<ul>
<li><a href="#">新闻</a></li>
<li><a href="#">获奖荣誉</a></li>
</ul>
</li>
<li>
<h2>媒体</h2>
<ul>
<li><a href="#">产品目录</a></li>
<li><a href="#">壁纸下载</a></li>
<li><a href="#">MSI App</a></li>
</ul>
</li>
<li>
<h2>关于微星</h2>
<ul>
<li><a href="#">微星简介</a></li>
<li><a href="#">品牌故事</a></li>
<li><a href="#">品质认证</a></li>
<li><a href="#">品质标准</a></li>
</ul>
</li>
</ol>
</div>
<!-- 底部上部分小屏显示 -->
<div class="footers_top visible-xs">
<ul>
<li>
社区
<dl>
<dd>微星论坛</dd>
<dd>部落格</dd>
<dd>媒体平台</dd>
<dd>影音中心</dd>
<dd>电竞战队</dd>
<dd>星光班论坛</dd>
<dd>Customer Studies</dd>
</dl>
</li>
<li>
技术支持
<dl>
<dd>大客户服务</dd>
<dd>下载中心</dd>
<dd>会员中心</dd>
<dd>在线客服</dd>
<dd>授权代理</dd>
<dd>服务站点</dd>
<dd>保修条款</dd>
<dd>增值服务</dd>
</dl>
</li>
<li>
新闻
<dl>
<dd>新闻</dd>
<dd>荣誉获奖</dd>
</dl>
</li>
<li>
媒体
<dl>
<dd>产品目录</dd>
<dd>壁纸下载</dd>
<dd>MSI App</dd>
</dl>
</li>
<li>
关于微星
<dl>
<dd>微星简介</dd>
<dd>品牌故事</dd>
<dd>媒体平台</dd>
<dd>品质认证</dd>
<dd>品质标准</dd>
</dl>
</li>
</ul>
</div>
<!-- 底部下部分 -->
<div class="footer_bottom">
<a href="#">联系我们</a>
<a href="#">隐私保护权政策</a>
<a href="#">网站使用条款</a>
</div>
<!-- 版权保护 -->
<div class="copyright">
<div class="logo"></div>
Copyright © 2020 版权为微星科技股份有限公司所有 沪ICP备19047683号
</div>
</footer>
<script>
$(function () {
// $(".hiddens .btn").click(function () {
// $(".hiddens ul").toggle(1000)
// $(".hiddens .add").toggle()
// $(".hiddens .minus").toggle()
// })
$('.add').click(function(){
$(this).hide().siblings('.minus').show()
$('.hiddens ul').fadeIn(800)
})
$('.minus').click(function(){
$(this).hide().siblings('.add').show()
$('.hiddens ul').fadeOut(800)
})
})
</script>
<script>
$('.top_nav > ul > li:first').mousemove(function(){
$('.table_goods').css({
height:'400px',
borderBottom:'4px solid red'
})
$('.goods_left ul').show()
})
$('.top_nav > ul > li:first').mouseout(function(){
$('.table_goods').css({
height:'0px',
borderBottom:'0px'
})
$('.goods_left ul').hide()
})
$('.top_nav > ul > li:eq(1)').mousemove(function(){
$('.table_list').css({
height:'300px',
borderBottom:'4px solid red'
})
})
$('.top_nav > ul > li:eq(1)').mouseout(function(){
$('.table_list').css({
height:'0px',
borderBottom:'0px'
})
})
$('.top_nav > ul > li:eq(2)').mousemove(function(){
$('.table_active').css({
height:'300px',
borderBottom:'4px solid red'
})
})
$('.top_nav > ul > li:eq(2)').mouseout(function(){
$('.table_active').css({
height:'0px',
borderBottom:'0px'
})
})
$('.top_nav > ul > li:eq(3)').mousemove(function(){
$('.table_main').css({
height:'300px',
borderBottom:'4px solid red'
})
})
$('.top_nav > ul > li:eq(3)').mouseout(function(){
$('.table_main').css({
height:'0px',
borderBottom:'0px'
})
})
$('.goods_left > ul > li:first').mousemove(function() {
$('.mac').show()
})
$('.goods_left > ul > li:first').mouseout(function() {
$('.mac').hide()
})
$('.goods_left > ul > li:eq(1)').mousemove(function() {
$('.pc').show()
})
$('.goods_left > ul > li:eq(1)').mouseout(function() {
$('.pc').hide()
})
$('.goods_left > ul > li:eq(2)').mousemove(function() {
$('.socket').show()
})
$('.goods_left > ul > li:eq(2)').mouseout(function() {
$('.socket').hide()
})
$('.goods_left > ul > li:eq(3)').mousemove(function() {
$('.cpu').show()
})
$('.goods_left > ul > li:eq(3)').mouseout(function() {
$('.cpu').hide()
})
$('.goods_left > ul > li:eq(4)').mousemove(function() {
$('.display').show()
})
$('.goods_left > ul > li:eq(4)').mouseout(function() {
$('.display').hide()
})
$('.mac').mousemove(function(){
$(this).show()
$('.mac_box').css('width','250px')
})
$('.mac').mouseout(function(){
$(this).hide()
$('.mac_box').css('width','0px')
})
$('.pc').mousemove(function(){
$(this).show()
$('.pc_box').css('width','250px')
})
$('.pc').mouseout(function(){
$(this).hide()
$('.pc_box').css('width','0px')
})
$('.socket').mousemove(function(){
$(this).show()
$('.socket_box').css('width','250px')
})
$('.socket').mouseout(function(){
$(this).hide()
$('.socket_box').css('width','0px')
})
$('.cpu').mousemove(function(){
$(this).show()
$('.cpu_box').css('width','250px')
})
$('.cpu').mouseout(function(){
$(this).hide()
$('.cpu_box').css('width','0px')
})
$('.display').mousemove(function(){
$(this).show()
$('.display_box').css('width','250px')
})
$('.display').mouseout(function(){
$(this).hide()
$('.display_box').css('width','0px')
})
$('.goods_left > ul > li:eq(0)').mousemove(function(){
$('.goods_left > ul > li:eq(0) > ol').show()
})
$('.goods_left > ul > li:eq(0)').mouseout(function(){
$('.goods_left > ul > li:eq(0) > ol').hide()
})
$('.goods_left > ul > li:eq(1)').mousemove(function(){
$('.goods_left > ul > li:eq(1) > ol').show()
})
$('.goods_left > ul > li:eq(1)').mouseout(function(){
$('.goods_left > ul > li:eq(1) > ol').hide()
})
$('.goods_left > ul > li:eq(2)').mousemove(function(){
$('.goods_left > ul > li:eq(2) > ol').show()
})
$('.goods_left > ul > li:eq(2)').mouseout(function(){
$('.goods_left > ul > li:eq(2) > ol').hide()
})
$('.goods_left > ul > li:eq(3)').mousemove(function(){
$('.goods_left > ul > li:eq(3) > ol').show()
})
$('.goods_left > ul > li:eq(3)').mouseout(function(){
$('.goods_left > ul > li:eq(3) > ol').hide()
})
$('.goods_left > ul > li:eq(4)').mousemove(function(){
$('.goods_left > ul > li:eq(4) > ol').show()
})
$('.goods_left > ul > li:eq(4)').mouseout(function(){
$('.goods_left > ul > li:eq(4) > ol').hide()
})
</script>
<!-- 小屏菜单 -->
<script>
$('.tops_left > a:first').click(function(){
$('.click_menu').css('width','100%')
$(this).hide(500)
$('.tops_left > a:last').show(500)
// $('.click_menu').show()
})
$('.tops_left > a:last').click(function(){
$('.click_menu').css('width','0')
$(this).hide(500)
$('.tops_left > a:first').show(500)
// $('.click_menu').hide()
})
$('.menu_box > ul > li > em').click(function(){
$(this).siblings('span').addClass('wth1')
})
$('.menu_box > ul > li > span > em').click(function(){
$(this).parent('span').removeClass('wth1')
})
// $('.menu_box > ul > li:first').click(function(){
// $('.menu_box > ul > li:first span').css('width','100%')
// })
// $('.menu_box > ul > li:first em').click(function(){
// // if (flag) {
// $('.menu_box > ul > li:first span').addClass('wth')
// // flag = false
// // }else {
// // $('.menu_box > ul > li:first span').classList.remove('wth')
// // flag = true
// // }
// })
// $('.menu_box > ul > li:eq(1)').click(function(){
// $('.menu_box > ul > li:eq(1) span').css('width','100%')
// })
// $('.menu_box > ul > li:eq(1) span em').click(function(){
// $('.menu_box > ul > li:eq(1) span').addClass('wth')
// })
// $('.menu_box > ul > li:eq(2)').click(function(){
// $('.menu_box > ul > li:eq(2) span').css('width','100%')
// })
// $('.menu_box > ul > li:eq(2) span em').click(function(){
// $('.menu_box > ul > li:eq(2) span').addClass('wth')
// })
// $('.menu_box > ul > li:eq(3)').click(function(){
// $('.menu_box > ul > li:eq(3) span').css('width','100%')
// })
// $('.menu_box > ul > li:eq(3) span em').click(function(){
// $('.menu_box > ul > li:eq(3) span').addClass('wth')
// })
</script>
<!-- // 底部论坛手风琴 -->
<script>
$('.footers_top > ul > li').mouseenter(function(){
$(this).stop().animate({
height:250
}).find('dl').stop().fadeIn()
$(this).siblings().stop().animate({
height:40
}).find('dl').stop().fadeOut()
})
// $('.footers_top > ul > li:first').mouseenter(function(){
// $('.footers_top > ul > li:first dl').show()
// $('.footers_top > ul > li:eq(1) dl').hide()
// $('.footers_top > ul > li:eq(2) dl').hide()
// $('.footers_top > ul > li:eq(3) dl').hide()
// $('.footers_top > ul > li:eq(4) dl').hide()
// })
// $('.footers_top > ul > li:eq(1)').mouseenter(function(){
// $('.footers_top > ul > li:first dl').hide()
// $('.footers_top > ul > li:eq(1) dl').show()
// $('.footers_top > ul > li:eq(2) dl').hide()
// $('.footers_top > ul > li:eq(3) dl').hide()
// $('.footers_top > ul > li:eq(4) dl').hide()
// })
// $('.footers_top > ul > li:eq(2)').mouseenter(function(){
// $('.footers_top > ul > li:first dl').hide()
// $('.footers_top > ul > li:eq(1) dl').hide()
// $('.footers_top > ul > li:eq(2) dl').show()
// $('.footers_top > ul > li:eq(3) dl').hide()
// $('.footers_top > ul > li:eq(4) dl').hide()
// })
// $('.footers_top > ul > li:eq(3)').mouseenter(function(){
// $('.footers_top > ul > li:first dl').hide()
// $('.footers_top > ul > li:eq(1) dl').hide()
// $('.footers_top > ul > li:eq(2) dl').hide()
// $('.footers_top > ul > li:eq(3) dl').show()
// $('.footers_top > ul > li:eq(4) dl').hide()
// })
// $('.footers_top > ul > li:eq(4)').mouseenter(function(){
// $('.footers_top > ul > li:first dl').hide()
// $('.footers_top > ul > li:eq(1) dl').hide()
// $('.footers_top > ul > li:eq(2) dl').hide()
// $('.footers_top > ul > li:eq(3) dl').hide()
// $('.footers_top > ul > li:eq(4) dl').show()
// })
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手