代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/swiper.css"/>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/swiper.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=tLfmkn3SLUPSEPNKAn83pApq0bg5sziI"></script>
<style type="text/css">
.swiper-container-teacher{
width: 100%;
height: 12rem;
}
.major-box{
margin: 0.625rem 0.625rem;
padding: 0.625rem 0.6125rem;
background-color: white;
border-radius: 0.625rem;
}
.major-box p.describe{
text-indent: 2em;
margin-bottom: 0.625rem;
}
.major-box .title{
display: inline-block;
font-weight: bold;
border-right: 0.3125rem solid #01eabb;
padding-right: 0.25rem;
margin-bottom: 0.625rem;
}
.major-box .describe>div{
font-size: 0.875rem;
margin-bottom: 0.5rem;
}
.major-box .zongzhi{
display: flex;
justify-content: space-around;
}
.major-box .zongzhi img{
width: 22%;
border-radius: 0.375rem;
}
.major-box .huanjing{
display: flex;
align-items: flex-end;
flex-wrap: wrap;
justify-content: space-around;
text-align: center;
}
.major-box .huanjing>div{
width: 48%;
}
.major-box .huanjing>div>img{
width: 100%;
border-radius: 0.625rem;
}
</style>
</head>
<body>
<header>
<div class="logo-box">
<div class="logo-name"></div>
<div class="slogan"></div>
</div>
<div class="logo-img">
<img src="img/true.jpg" >
</div>
</header>
<div class="navbar-box">
<ul class="navbar">
<li><a href="index.html">首页</a></li>
<li><a href="jianjie.html" >简介</a></li>
<li><a href="major.html">专业</a></li>
<li><a href="shizi.html">师资</a></li>
<li><a href="huanjing.html" class="active">环境</a></li>
<li><a href="jiuye.html">就业</a></li>
<li><a href="xinwen.html">新闻</a></li>
<li><a href="wenda.html">问答</a></li>
</ul>
</div>
<div class="swiper-container" id="lunbo">
<div class="swiper-wrapper">
<!-- <div class="swiper-slide"><img src="http://www.cqzuxia.com/statics/zuxia20/images/banner4.jpg" ></div>
<div class="swiper-slide"><img src="http://www.cqzuxia.com/statics/zuxia20/images/banner5.jpg" ></div>
<div class="swiper-slide"><img src="http://www.cqzuxia.com/statics/zuxia20/images/banner6.jpg" ></div> -->
</div>
<!-- Add Arrows -->
<!-- <div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div> -->
</div>
<div class="major-box huanjing1">
<div class="title">学院环境</div>
<div class="jianjie">
<p class="describe"></p>
<div class="zongzhi">
<!-- <img src="http://www.cqzuxia.com/statics/zuxia20/images/hj1.jpg" >
<img src="http://www.cqzuxia.com/statics/zuxia20/images/hj2.jpg" >
<img src="http://www.cqzuxia.com/statics/zuxia20/images/hj3.jpg" >
<img src="http://www.cqzuxia.com/statics/zuxia20/images/hj4.jpg" > -->
</div>
</div>
</div>
<div class="major-box">
<div class="huanjing">
<!-- <div><img src="http://www.cqzuxia.com/statics/zuxia20/images/hj1.jpg" ><p>教学楼</p></div>
<div><img src="http://www.cqzuxia.com/statics/zuxia20/images/hj2.jpg" ><p>媒体中心</p></div>
<div><img src="http://www.cqzuxia.com/statics/zuxia20/images/hj3.jpg" ><p>健身房</p></div>
<div><img src="http://www.cqzuxia.com/statics/zuxia20/images/hj4.jpg" ><p>宿舍大厅</p></div> -->
</div>
</div>
<style type="text/css">
.major-box .lianxi{
width: 4.25rem;
text-align: center;
font-weight: bold;
border-bottom: 0.3125rem solid #01eabb;
padding-bottom: 0.25rem;
margin-bottom: 0.625rem;
}
#map{
height: 12.5rem;
}
.info-box img{
width: 1rem;
margin-right: 0.625rem;
}
</style>
<div class="major-box">
<div class="lianxi">联系我们</div>
<div id="map"></div>
<div class="info-box">
<!-- <div class="tel"><img src="img/duanxin.png"><span>400-6655-720</span> </div> -->
<div class="msg"><img src="img/phone.png" ><span>020-13587458</span></div>
<div class="position"><img src="img/position.png" ><span> 湖南省株洲市天元区</span></div>
</div>
</div>
<footer>
<div class="" style="padding: 0rem 0.625rem;">
<div id="address"></div>
<div><img src="" id="qrcode" ></div>
</div>
<div id="beian" style="text-align: center;font-size: 0.75rem;display: block;color: #ccc;"></div>
</footer>
<!-- 底部导航 -->
<div id="fixBottom">
<ul>
<li class="telzixun"><a href="tel:10000" id="tel"><img src="img/tel.png" ><div>电话咨询</div></a></li>
<!-- <li class="baoming"><a href="tencent://message/?uin=1014167202&Site=在线QQ&Menu=yes"><img src="img/msg.png"><div>在线报名</div></a></li> -->
<li class="baoming"><a href="leavemsg.html"><img src="img/msg.png"><div>在线报名</div></a></li>
<li class="feezixun"><a href="chat.html"><img src="img/qq.png" ><div>报名咨询</div></a></li>
<li class="feezixun"><a href="chat.html"><img src="img/fee.png" ><div>学费咨询</div></a></li>
<!-- <li class="qqzixin"><a href="https://wpa1.qq.com/JEFqRGvh?_type=wpa&qidian=true"><img src="img/qq.png" ><div>QQ咨询</div></a></li>
<li class="feezixun"><a href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes"><img src="img/fee.png" ><div>学费咨询</div></a></li> -->
</ul>
</div>
</body>
<script>
// 网页轮播
var lunbo = new Swiper('#lunbo', {
// autoplay: true,//可选选项，自动滑动
});
</script>
<script type="text/javascript">
var scheme = "";
$(function () {
var map = new BMapGL.Map("map"); // 创建Map实例
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); // 添加比例尺控件
map.addControl(zoomCtrl);
var marker = new BMapGL.Marker(new BMapGL.Point(116.404, 39.915));
map.addOverlay(marker); // 增加点
});
</script>
<script src="js/config.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
getLunbo("huanjing");
$.ajax({
url:HOST+"/h5/content/getModuleContent?parentName=huanjing",
success:function(res){
$(".huanjing1 .title").html(res.data[0].key);
$(".huanjing1 .describe").html(res.msg);
if(res.data[0].value.length>0)
{
let n = res.data[0].value.length>4 ? 4 : res.data[0].value.length;
for (let i = 0; i < n; i++) {
let s = `<img src="${HOST}/upload/${res.data[0].value[i].content}" >`;
$(".huanjing1 .zongzhi").append(s);
}
if(res.data[0].value.length>4)
{ for (var i = 4; i < res.data[0].value.length; i++) {
let s =`<div><img src="${HOST}/upload/${res.data[0].value[i].content}"><p>${res.data[0].value[i].title}</p></div>`;
$(".huanjing").append(s)
}
}else{
$(".huanjing").parent().remove()
}
}
},
})
// 显示地图
$(function () {
let zuobiao = localStorage.getItem("zuobiao");
let arr = zuobiao.split(",");
let jingdu = arr[0];
let weidu = arr[1];
var map = new BMapGL.Map("map"); // 创建Map实例
map.centerAndZoom(new BMapGL.Point(jingdu, weidu), 15); // 初始化地图,设置中心点坐标和地图级别
// map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); // 添加比例尺控件
map.addControl(zoomCtrl);
map.disableDragging(); //禁止拖拽
var marker = new BMapGL.Marker(new BMapGL.Point(jingdu, weidu));
map.addOverlay(marker); // 增加点
});
</script>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手