代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<title>桂圆铺-发展历程</title>
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<link rel="stylesheet" href="./css/swiper.min.css">
<link rel="stylesheet" href="./css/amazeui.min.css">
<link rel="stylesheet" href="./css/history.css">
<script>
(function (window, document) {
function resize() {
var ww = window.innerWidth;
if (ww > window.screen.width) {
window.requestAnimationFrame(resize);
} else {
if (ww > 750) ww = 750;
// 下面代码按照比例为100px = 1rem，此处一定要同pxToRem的转换比例
document.documentElement.style.fontSize = ww * 100 / 750 + 'px';
}
}
if (document.readyState !== 'loading') {
resize();
} else {
document.addEventListener('DOMContentLoaded', resize);
}
window.addEventListener('resize', resize);
})(window, document);
</script>
</head>
<body>
<div class="outer brand-container">
<!-- star-nav -->
<div class="nav-container">
<nav class="top-nav">
<img src="./images/logo.png" alt="" class='nav-logo'>
<button>
<span></span>
<span></span>
<span></span>
</button>
</nav>
<!-- menu-list -->
<ul class="nav-box am-list admin-sidebar-list" id="collapase-nav-1">
<li class="am-panel">
<a class='nav-item' data-am-collapse="{parent: '#collapase-nav-1', target: '#nav-1'}">
关于桂源铺
<i class="am-icon-plus am-fr am-margin-right"></i>
</a>
<!-- child-menu -->
<ul class="am-list am-collapse admin-sidebar-sub" id="nav-1">
<li><a href="#/userAdd"> 品牌背景 </a></li>
<li><a href="#/userList/0">品牌核心价值 </a></li>
<li><a href="#/userList/0">品牌标签 </a></li>
<li><a href="#/userList/0">热点话题 </a></li>
</ul>
</li>
<li class="am-panel">
<a class='nav-item' data-am-collapse="{parent: '#collapase-nav-1', target: '#nav-2'}">
港奶起源
<i class="am-icon-plus am-fr am-margin-right"></i>
</a>
<ul class="am-list am-collapse admin-sidebar-sub" id="nav-2">
<li><a href="#/companyAdd"> 添加单位（部门） </a></li>
<li><a href="#/companyList/0"> 单位（部门）列表 </a></li>
</ul>
</li>
<li class="am-panel">
<a class='nav-item' data-am-collapse="{parent: '#collapase-nav-1', target: '#nav-3'}">
品牌历程
<i class="am-icon-plus am-fr am-margin-right"></i>
</a>
<ul class="am-list am-collapse admin-sidebar-sub" id="nav-3">
<li>
<a href="#/roleAdd">历程</a>
</li>
</ul>
</li>
<li class="am-panel">
<a class='nav-item'>
产品优势
<i class="am-icon-plus am-fr am-margin-right"></i>
</a>
</li>
<li class="am-panel">
<a class='nav-item'>
店铺展示
<i class="am-icon-plus am-fr am-margin-right"></i>
</a>
</li>
<li class="am-panel">
<a class='nav-item'>
更多资讯
<i class="am-icon-plus am-fr am-margin-right"></i>
</a>
</li>
</ul>
</div><!-- end-nav -->
<!-- start top-banner -->
<div class="top-banner-box">
<img src="./images/banner-1.png" alt="banner" class='banner-img'>
</div>
<!-- start main-content -->
<div class="man-container">
<!-- collapse menu -->
<div class="collapse-menu">
<div class="collase-button" data-am-collapse="{target: '#collapseMenu'}">
<span class="index-num">0.1</span>
<span>品牌背景</span>
<span class="icons am-icon-chevron-down"></span>
</div>
<div class="menu-cotent">
<nav>
<ul id="collapseMenu" class="am-nav am-collapse">
<li class="am-active"><a href=""><span class="index">01</span>品牌背景</a></li>
<li><a href=""><span class="index">02</span>品牌核心价值</a></li>
<li><a href=""><span class="index">03</span>品牌标签</a></li>
<li><a href=""><span class="index">04</span>热点话题</a></li>
</ul>
</nav>
</div>
</div>
<!--end collapse menu-->
<div class="settled-box">
<!-- 店铺图swiper -->
<div class="swiper-container focus-box" id='settledFocus'>
<div class="swiper-wrapper">
<div class="swiper-slide">
<!-- address info -->
<div class='address-info-box'>
<!-- 店铺图 -->
<img src="./images/history.png" alt="">
<p class="history-info">
2011年11月创始人Arthur在南京路步行街附近开出了第一家桂源铺
</p>
</div>
</div>
<div class="swiper-slide">
<!-- address info -->
<div class='address-info-box'>
<!-- 店铺图 -->
<img src="./images/history.png" alt="">
<p class="history-info">
2011年11月创始人Arthur在南京路步行街附近开出了第一家桂源铺
</p>
</div>
</div>
<div class="swiper-slide">
<!-- address info -->
<div class='address-info-box'>
<!-- 店铺图 -->
<img src="./images/history.png" alt="">
<p class="history-info">
2011年11月创始人Arthur在南京路步行街附近开出了第一家桂源铺
</p>
</div>
</div>
<div class="swiper-slide">
<!-- address info -->
<div class='address-info-box'>
<!-- 店铺图 -->
<img src="./images/history.png" alt="">
<p class="history-info">
2011年11月创始人Arthur在南京路步行街附近开出了第一家桂源铺
</p>
</div>
</div>
<div class="swiper-slide">
<!-- address info -->
<div class='address-info-box'>
<!-- 店铺图 -->
<img src="./images/history.png" alt="">
<p class="history-info">
2011年11月创始人Arthur在南京路步行街附近开出了第一家桂源铺
</p>
</div>
</div>
</div>
<!-- next prev btn -->
<div class="btn-prev do-btn">
<span class="am-icon-angle-left"></span>
</div>
<div class='btn-next do-btn'>
<span class='am-icon-angle-right'></span>
</div>
</div>
<!-- 历史年份 -->
<div class="swiper-container address-name-box" id='addressFocus'>
<div class="swiper-wrapper">
<div class="swiper-slide address-item">
2019
</div>
<div class="swiper-slide address-item">
2012
</div>
<div class="swiper-slide address-item">
2013
</div>
<div class="swiper-slide address-item">
2013
</div>
<div class="swiper-slide address-item">
2013
</div>
</div>
</div>
</div>
</div>
<footer class="footer-box">
<nav class="footer-nav">
<ul>
<li class="line"><a href=""><span class="icons"></span>供应商</a></li>
<li class="line"><a href=""><span class="icons"></span>加盟商</a></li>
<li><a href=""><span class="icons"></span>员工通道</a></li>
</ul>
</nav>
<div class="address-box">
<div class="info-text">
All rights reserved 2018 © 桂源铺 沪ICP备0000000号
<br>技术支持：柏优传媒
</div>
<div class="icon-box">
<span class="am-icon-weixin"></span>
<span class="am-icon-weibo"></span>
<span class="am-icon-qq"></span>
</div>
</div>
</footer>
</div>
<script src="./js/jquery-1.8.2.min.js"></script>
<script src="./js/amazeui.min.js"></script>
<script src="./js/swiper.min.js"></script>
<script>
var btn = $('.top-nav').children('button')
, spa = btn.children('span')
, ul = $('.nav-container').children('.nav-box')
, logos = $('.top-nav').children('.nav-logo')
// 导航按钮切换
btn.on('click', function () {
$('.nav-container').toggleClass('active-bg')
if (!$(spa[0]).hasClass('spa1')) {
spa[0].className = 'spa1';
spa[1].style.display = 'none';
spa[2].className = 'spa3';
logos.attr('src', './images/logo-ff.png')
$('.nav-container')[0].style.height = 80 + ul[0].offsetHeight + 'px';
} else {
spa[0].className = '';
spa[1].style.display = 'block';
spa[2].className = '';
$('.nav-container')[0].style.height = 1.05 + 'rem';
logos.attr('src', './images/logo.png')
}
});
$(document).on('click', '.nav-item', function () {
setTimeout(function () {
$('.nav-container')[0].style.height = 80 + ul[0].offsetHeight + 'px';
}, 150)
})
// 默认第一个折叠开启
$('#nav-1').collapse('open')
</script>
<!-- swiper -->
<script>
$(document).ready(function () {
// 店铺图swiper
var gallerySwiper = new Swiper('#settledFocus', {
spaceBetween: 10,
navigation: {
nextEl: '.btn-next',
prevEl: '.btn-prev',
},
thumbs: {
swiper: {
el: '#addressFocus',
spaceBetween: 0, // 间距
slidesPerView: 5, // 店铺地址个数
watchSlidesVisibility: true,/*避免出现bug*/
},
}
})
})
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
