代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
<title>20001010330王钰鑫</title>
<script src="./font/iconfont.js"></script>
<link rel="stylesheet" href="./css/pub.css">
<link rel="stylesheet" href="./font/iconfont.css">
<link rel="stylesheet" href="./js/swiper/swiper-bundle.min.css">
<style>
body{
margin-bottom: 100px;/* 值为下导航的高度 */
}
p,.title svg{
font-size: .5rem;
line-height: .8rem;
}
#header{
display: flex;
padding-left: 10px;
background-color: rgb(249,243,255);
position: fixed;
width: 100%;
z-index: 9;
}
#header span{
margin: 0 4px;
}
#header>span:first-child{/* 第一个span */
font-size: 16px;
line-height: 30px;
}
#header div{
flex-grow: 1;
background-color: #fff;
border-radius: 18px;
display: flex;
border: 3px solid rgb(214,197,239);
}
#header div span{
font-size: 16px;
line-height: 30px;
}
#header input{
bottom: none;
outline: none;
background-color: #fff;
line-height: 30px;
flex-grow: 1;/* 占用剩余所有空间 */
border-radius: 12px;
border: 1px solid #fff;
}
#header>span:nth-child(3){
font-size: 22px;
/* padding: 0 8px; */
margin-top: 4px;
}
.license{
font-size: 10px;
padding: 3px;
color: rgb(156,156,156);
line-height: 14px;
border: 1px solid #ccc;
border-radius: 5px;
}
.mySwiper img{
width: 100%;
}
/* 导航条 */
.tab{
padding-top: 42px;
}
.tt,.dtt{
display: flex;
padding-left: 10px;
z-index: 9;
width: 100%;
background-color: #fff;
}
.tt span,.dtt span{
padding: 0 5px;
/* margin-top: 5px; */
padding-bottom: 0;
line-height: 33px;
text-align: center;
font-size: 14px;
background-color: #fff;
color: rgb(179,178,183);
letter-spacing: 3px;
}
.tt .cur,.dtt .cur{
border-bottom: 3px solid rgb(255,162,217);
font-size: 18px;
font-weight: bold;
color: #000;
}
.tc,.dtc{
padding: 0 5%;
display: none;
}
.option ul{
display: flex;
margin: .7rem 0;
}
.option svg{
font-size: 1.5rem;
}
.station{
margin: .6rem 0;
padding: 0 .3rem;
border: 1px solid rgb(179,178,183);
border-radius: .4rem;
}
.station h3,.price{
font-size: .7rem;
}
.station .title{
/* line-height: 12px; */
padding: .3rem 0;
display: flex;
border-bottom: 1px solid rgb(179,178,183);
}
.title h3,.title span,.price{
color:rgb(254,42,116);
}
.title p{
padding: 0 .3rem;
flex-grow: 1;
}
.content{
padding: .3rem 0;
display: flex;
line-height: 1rem;
}
.content img{
width: 15%;
}
.info{
padding: 0 .46rem;
}
.content p{
color: rgb(179,178,183);
}
.content .to{
display: flex;
}
.to {
width: 11.7rem;
}
.to p{
flex-grow: 1;
}
.to .go{
padding: .01rem .5rem;
font-size: .5rem;
border-radius: 1rem;
color: #fff;
background-color: rgb(254,42,116);
}
.dtc ul{
overflow: hidden;
display: flex;
}
.dtc li{
width: 30%;
margin: .2rem;
}
.dtc img{
width: 100%;
border-radius: .2rem
}
.list li{
margin: .5rem;
padding: 0 .5rem;
border: 1px solid rgb(179,178,183);
border-radius: .4rem;
}
.list span{
font-size: .5rem;
color: rgb(179,178,183);;
}
.brand .swiper-slide{
border: 1px solid #ddd;
border-radius: .4rem;
}
.number{
padding: .7rem;
background-color: #fe2a74;
border-radius: .5rem;
}
.number p{
color: #fff;
font-size: .7rem;
}
.work{
display: flex;
padding: .3rem;
}
.work img{
width: 20%;
margin-right: .3rem;
border-radius: .2rem;
}
/* 下导航 */
#bnav{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: rgb(251,251,251);/* 一定要设 */
z-index: 9;
}
#bnav ul,.list ul{
display: flex;/* 横 */
}
#bnav li,.option li{
width: 20%;
text-align: center;
}
#bnav svg{
font-size: 30px;
margin: 5px auto;
}
#bnav p{
font-size: 10px;
line-height: 22px;
}
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
#bnav a:hover{
color:rgb(254,42,116);
}
</style>
</head>
<body>
<header id="header">
<span class="txt">北京<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xiala"></use>
</svg>
</span>
<div>
<span class="iconfont icon-sousuo"></span>
<input type="text" placeholder="德云社">
<span class="iconfont icon-saoyisao"></span>
</div>
<span class="iconfont icon--chat"></span>
<span class="license">证照<br>信息</span>
</header>
<div class="tab">
<div class="tt">
<span class="cur">精选</span>
<span>音乐现场</span>
<span>话剧音乐剧</span>
<span>脱口秀</span>
<span>展览</span>
</div>
<div class="tc" style="display: block">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./img/1.jpg" />
</div>
<div class="swiper-slide">
<img src="./img/2.jpg" />
</div>
<div class="swiper-slide">
<img src="./img/3.jpg" />
</div>
<div class="swiper-slide">
<img src="./img/4.jpg" />
</div>
<div class="swiper-slide">
<img src="./img/5.jpg" />
</div>
<div class="swiper-slide">
<img src="./img/6.jpg" />
</div>
<div class="swiper-slide">
<img src="./img/7.jpg" />
</div>
<div class="swiper-slide">
<img src="./img/8.jpg" />
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<div class="option">
<ul>
<li>
<span>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-paihangbang"></use>
</svg>
</span>
<p>大麦演出榜</p>
</li>
<li>
<span>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-rili1"></use>
</svg>
</span>
<p>演出日历</p>
</li>
<li>
<span>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-032"></use>
</svg>
</span>
<p>早鸟票</p>
</li>
<li>
<span>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-034"></use>
</svg>
</span>
<p>剧本杀</p>
</li>
<li>
<span>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-banjiayouhui"></use>
</svg>
</span>
<p>周三半价</p>
</li>
</ul>
</div>
<div class="station">
<div class="title">
<h3>抢票播报站</h3>
<p><span>4.7万人围观</span>薛之谦海口</p>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-jiantouyou"></use>
</svg>
</div>
<div class="content">
<img src="./img/station1.jpg">
<div class="info">
<h3>音乐剧《基督山伯爵》中文版</h3>
<p>7686人围观</p>
<div class="to">
<p><span class="price">¥80</span> 起</p>
<span class="go" onclick="buy()">去抢票</span>
</div>
</div>
</div>
</div>
<div class="dtab">
<div class="dtt">
<span class="cur">必看排行榜</span>
<span>精选榜</span>
</div>
<div class="dtc" style="display: block">
<ul class="jlist1"></ul>
</div>
<div class="dtc">
<ul class="jlist2"></ul>
</div>
</div>
<div class="dtab">
<div class="dtt">
<span class="cur">七日精选</span>
<span>月度看点</span>
</div>
<div class="dtc" style="display: block">
<div class="swiper week">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./img/week1.jpg">
<p>辽阳大剧院2022-2023新春...</p>
<p><span class="price">¥60</span>起</p>
<p>明天</p>
</div>
<div class="swiper-slide">
<img src="./img/week2.jpg">
<p>原创现代昆剧《瞿秋白》</p>
<p><span class="price">¥30</span>起</p>
<p>七日内</p>
</div>
<div class="swiper-slide">
<img src="./img/week3.jpg">
<p>《金奖首席之声——八把大...</p>
<p><span class="price">¥30</span>起</p>
<p>七日内</p>
</div>
<div class="swiper-slide">
<img src="./img/week4.jpg">
<p>【沈阳】缘春社相声茶馆</p>
<p><span class="price">¥40</span>起</p>
<p>2天后</p>
</div>
<div class="swiper-slide">
<img src="./img/week5.jpg">
<p>[圣诞之夜]ShenYang|ISR</p>
<p><span class="price">¥59.9</span>起</p>
<p>本周六</p>
</div>
<div class="swiper-slide">
<img src="./img/week6.jpg">
<p>北京初相遇剧团爆笑喜剧《花...</p>
<p><span class="price">¥99</span>起</p>
<p>七日内</p>
</div>
<div class="swiper-slide">
<img src="./img/week7.jpg">
<p>重磅爆笑感动沉浸式话剧《夜...</p>
<p><span class="price">¥99</span>起</p>
<p>今天</p>
</div>
<div class="swiper-slide">
<img src="./img/week8.jpg">
<p>波波笑剧场-大悦城店 爆笑</p>
<p><span class="price">¥59</span>起</p>
<p>2天后</p>
</div>
<div class="swiper-slide">
<img src="./img/week9.jpg">
<p>波波笑剧场-大悦城店(脱口...</p>
<p><span class="price">¥19.9</span>起</p>
<p>明天</p>
</div>
<div class="swiper-slide">
<img src="./img/week10.jpg">
<p>【Laugh喜剧】脱口秀开放麦...</p>
<p><span class="price">¥19.9</span>起</p>
<p>下周三</p>
</div>
</div>
</div>
</div>
<div class="dtc">
<div class="swiper month">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./img/month1.jpg">
<p>《天空之城》久石让&宫崎骏...</p>
<p><span class="price">¥280</span>起</p>
<p>2023.01.07</p>
</div>
<div class="swiper-slide">
<img src="./img/month2.jpg">
<p>青年先锋艺术家群展《在剧场...</p>
<p><span class="price">¥35</span>起</p>
<p>2023.01.14</p>
</div>
<div class="swiper-slide">
<img src="./img/month3.jpg">
<p>世界著名花腔女高音歌唱家...</p>
<p><span class="price">¥30</span>起</p>
<p>2023.01.08</p>
</div>
<div class="swiper-slide">
<img src="./img/month4.jpg">
<p>"爱乐之城——经典电影音乐..."</p>
<p><span class="price">¥100</span>起</p>
<p>2023.01.07</p>
</div>
<div class="swiper-slide">
<img src="./img/month5.jpg">
<p>Laugh喜剧|周末爆笑脱口秀...</p>
<p><span class="price">¥80</span>起</p>
<p>本周六</p>
</div>
<div class="swiper-slide">
<img src="./img/month6.jpg">
<p>【搞笑圈脱口秀】沈阳本土...</p>
<p><span class="price">¥15.8</span>起</p>
<p>明天</p>
</div>
<div class="swiper-slide">
<img src="./img/month7.jpg">
<p>会友曲艺社相声专场</p>
<p><span class="price">¥30</span>起</p>
<p>2天后</p>
</div>
<div class="swiper-slide">
<img src="./img/month8.jpg">
<p>[寻找沈岚]送春归2022冬...</p>
<p><span class="price">¥80</span>起</p>
<p>2023.01.05</p>
</div>
<div class="swiper-slide">
<img src="./img/month9.jpg">
<p>《贩灵迷境》沉浸式喜剧</p>
<p><span class="price">¥388</span>起</p>
<p>2天后</p>
</div>
<div class="swiper-slide">
<img src="./img/month10.jpg">
<p>体验式戏剧《余梦诸山》</p>
<p><span class="price">¥318</span>起</p>
<p>本周日</p>
</div>
<div class="swiper-slide">
<img src="./img/month11.jpg">
<p>开心麻花爆笑舞台剧《乌龙山...</p>
<p><span class="price">¥80</span>起</p>
<p>2天后</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tc">
<img src="./img/1.jpg">
<div class="station">
<div class="title">
<h3>抢票播报站</h3>
<p>今晚Livehouse演出推荐</p>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-jiantouyou"></use>
</svg>
</div>
<div class="content">
<img src="./img/station2.jpg">
<div class="info">
<h3>【摇滚兄弟呈现】青春不常在</h3>
<p>人气爆棚</p>
<div class="to">
<p><span class="price">¥80</span> 起</p>
<span class="go" onclick="buy()">去抢票</span>
</div>
</div>
</div>
</div>
<div class="dtab">
<div class="dtt">
<span class="cur">带你去找夜生活</span>
<span>本周开演</span>
</div>
<div class="dtc" style="display: block">
<ul class="rlist"></ul>
</div>
<div class="dtc">
<ul class="jlist3"></ul>
</div>
</div>
</div>
<div class="tc">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./img/12.jpg" />
</div>
<div class="swiper-slide">
<img src="./img/2.jpg" />
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<div class="dtab">
<div class="dtt">
<span class="cur">近期上演</span>
<span>新开售</span>
<span>高分剧</span>
</div>
<div class="dtc" style="display: block">
<ul class="jlist4"></ul>
</div>
<div class="dtc">
<ul class="jlist5"></ul>
</div>
<div class="dtc">
<ul class="jlist6"></ul>
</div>
<div class="list">
<ul class="jlist7">
<li>
<img src="./img/list2.jpg">
<p>音乐剧《基督山伯爵》</p>
<span>经典音乐剧观剧清单</span>
</li>
<li>
<img src="./img/list2.jpg">
<p>口碑音乐剧</p>
<span>新手友好观剧清单</span>
</li>
</ul>
</div>
<h3>厂牌号</h3>
<div class="swiper brand">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="number">
<p>开心麻花<span class="iconfont icon-jiantouyou"></span></p>
<p>94.6万粉丝</p>
</div>
<div class="work">
<img src="./img/month11.jpg">
<div class="works">
<p>开心麻花爆笑舞台剧《乌龙山...</p>
<p><span class="price">¥80</span>起</p>
</div>
</div>
<div class="work">
<img src="./img/drama10.jpg">
<div class="works">
<p>开心麻花首个戏剧live秀...</p>
<p><span class="price">¥180</span>起</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="number">
<p>孟京辉戏剧工作室<span class="iconfont icon-jiantouyou"></span></p>
<p>51.9万粉丝</p>
</div>
<div class="work">
<img src="./img/drama13.jpg">
<div class="works">
<p>孟京辉戏剧作品《红与黑》</p>
</div>
</div>
<div class="work">
<img src="./img/drama14.jpg">
<div class="works">
<p>孟京辉经典戏剧作品</p>
<p><span class="price">¥50</span>起</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="number">
<p>笑果脱口秀<span class="iconfont icon-jiantouyou"></span></p>
<p>23.3万粉丝</p>
</div>
<div class="work">
<img src="./img/drama15.jpg">
<div class="works">
<p>笑果脱口秀|《坐在角落的人...</p>
</div>
</div>
<div class="work">
<img src="./img/drama16.jpg">
<div class="works">
<p>笑果脱口秀|《女儿红》小鹿...</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="number">
<p>摩登天空<span class="iconfont icon-jiantouyou"></span></p>
<p>68.3万粉丝</p>
</div>
<div class="work">
<img src="./img/month11.jpg">
<div class="works">
<p>【延期|时间待定】大波浪全新...</p>
<p><span class="price">¥180</span>起</p>
</div>
</div>
<div class="work">
<img src="./img/drama10.jpg">
<div class="works">
<p>鲸浪【西村波西米亚】2022巡演...</p>
<p><span class="price">¥130</span>起</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="number">
<p>上海话剧艺术中心<span class="iconfont icon-jiantouyou"></span></p>
<p>51.9万粉丝</p>
</div>
<div class="work">
<img src="./img/drama13.jpg">
<div class="works">
<p>无人生还And Then There Were</p>
</div>
</div>
<div class="work">
<img src="./img/drama14.jpg">
<div class="works">
<p>《原告证人》Witness For The...</p>
<p><span class="price">¥180</span>起</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="number">
<p>MAO Livehouse<span class="iconfont icon-jiantouyou"></span></p>
<p>51.9万粉丝</p>
</div>
<div class="work">
<img src="./img/drama15.jpg">
<div class="works">
<p>【秀动呈现】海底时光机2022</p>
</div>
</div>
<div class="work">
<img src="./img/drama16.jpg">
<div class="works">
<p>燕池【春归】2022春季巡演</p>
<p><span class="price">¥50</span>起</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="number">
<p>硬核喜剧脱口秀<span class="iconfont icon-jiantouyou"></span></p>
<p>51.9万粉丝</p>
</div>
<div class="work">
<img src="./img/month11.jpg">
<div class="works">
<p>孟京辉戏剧作品《红与黑》</p>
</div>
</div>
<div class="work">
<img src="./img/drama10.jpg">
<div class="works">
<p>孟京辉经典戏剧作品</p>
<p><span class="price">¥50</span>起</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="number">
<p>孟京辉戏剧工作室<span class="iconfont icon-jiantouyou"></span></p>
<p>51.9万粉丝</p>
</div>
<div class="work">
<img src="./img/drama13.jpg">
<div class="works">
<p>孟京辉戏剧作品《红与黑》</p>
</div>
</div>
<div class="work">
<img src="./img/drama14.jpg">
<div class="works">
<p>孟京辉经典戏剧作品</p>
<p><span class="price">¥50</span>起</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="number">
<p>孟京辉戏剧工作室<span class="iconfont icon-jiantouyou"></span></p>
<p>51.9万粉丝</p>
</div>
<div class="work">
<img src="./img/drama15.jpg">
<div class="works">
<p>孟京辉戏剧作品《红与黑》</p>
</div>
</div>
<div class="work">
<img src="./img/drama16.jpg">
<div class="works">
<p>孟京辉经典戏剧作品</p>
<p><span class="price">¥50</span>起</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tc">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./img/9.jpg" />
</div>
<div class="swiper-slide">
<img src="./img/12.jpg" />
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<div class="tc">
<div class="dtab">
<div class="dtt">
<span class="cur">热门榜</span>
<span>周末去看展</span>
</div>
<div class="dtc" style="display: block">
<div class="swiper week">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./img/week1.jpg">
<p>辽阳大剧院2022-2023新春...</p>
<p><span class="price">¥60</span>起</p>
<p>明天</p>
</div>
<div class="swiper-slide">
<img src="./img/week2.jpg">
<p>原创现代昆剧《瞿秋白》</p>
<p><span class="price">¥30</span>起</p>
<p>七日内</p>
</div>
<div class="swiper-slide">
<img src="./img/week3.jpg">
<p>《金奖首席之声——八把大...</p>
<p><span class="price">¥30</span>起</p>
<p>七日内</p>
</div>
<div class="swiper-slide">
<img src="./img/week4.jpg">
<p>【沈阳】缘春社相声茶馆</p>
<p><span class="price">¥40</span>起</p>
<p>2天后</p>
</div>
<div class="swiper-slide">
<img src="./img/week5.jpg">
<p>[圣诞之夜]ShenYang|ISR</p>
<p><span class="price">¥59.9</span>起</p>
<p>本周六</p>
</div>
<div class="swiper-slide">
<img src="./img/week6.jpg">
<p>北京初相遇剧团爆笑喜剧《花...</p>
<p><span class="price">¥99</span>起</p>
<p>七日内</p>
</div>
<div class="swiper-slide">
<img src="./img/week7.jpg">
<p>重磅爆笑感动沉浸式话剧《夜...</p>
<p><span class="price">¥99</span>起</p>
<p>今天</p>
</div>
<div class="swiper-slide">
<img src="./img/week8.jpg">
<p>波波笑剧场-大悦城店 爆笑</p>
<p><span class="price">¥59</span>起</p>
<p>2天后</p>
</div>
<div class="swiper-slide">
<img src="./img/week9.jpg">
<p>波波笑剧场-大悦城店(脱口...</p>
<p><span class="price">¥19.9</span>起</p>
<p>明天</p>
</div>
<div class="swiper-slide">
<img src="./img/week10.jpg">
<p>【Laugh喜剧】脱口秀开放麦...</p>
<p><span class="price">¥19.9</span>起</p>
<p>下周三</p>
</div>
</div>
</div>
</div>
<div class="dtc">
<div class="swiper month">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./img/month1.jpg">
<p>《天空之城》久石让&宫崎骏...</p>
<p><span class="price">¥280</span>起</p>
<p>2023.01.07</p>
</div>
<div class="swiper-slide">
<img src="./img/month2.jpg">
<p>青年先锋艺术家群展《在剧场...</p>
<p><span class="price">¥35</span>起</p>
<p>2023.01.14</p>
</div>
<div class="swiper-slide">
<img src="./img/month3.jpg">
<p>世界著名花腔女高音歌唱家...</p>
<p><span class="price">¥30</span>起</p>
<p>2023.01.08</p>
</div>
<div class="swiper-slide">
<img src="./img/month4.jpg">
<p>"爱乐之城——经典电影音乐..."</p>
<p><span class="price">¥100</span>起</p>
<p>2023.01.07</p>
</div>
<div class="swiper-slide">
<img src="./img/month5.jpg">
<p>Laugh喜剧|周末爆笑脱口秀...</p>
<p><span class="price">¥80</span>起</p>
<p>本周六</p>
</div>
<div class="swiper-slide">
<img src="./img/month6.jpg">
<p>【搞笑圈脱口秀】沈阳本土...</p>
<p><span class="price">¥15.8</span>起</p>
<p>明天</p>
</div>
<div class="swiper-slide">
<img src="./img/month7.jpg">
<p>会友曲艺社相声专场</p>
<p><span class="price">¥30</span>起</p>
<p>2天后</p>
</div>
<div class="swiper-slide">
<img src="./img/month8.jpg">
<p>[寻找沈岚]送春归2022冬...</p>
<p><span class="price">¥80</span>起</p>
<p>2023.01.05</p>
</div>
<div class="swiper-slide">
<img src="./img/month9.jpg">
<p>《贩灵迷境》沉浸式喜剧</p>
<p><span class="price">¥388</span>起</p>
<p>2天后</p>
</div>
<div class="swiper-slide">
<img src="./img/month10.jpg">
<p>体验式戏剧《余梦诸山》</p>
<p><span class="price">¥318</span>起</p>
<p>本周日</p>
</div>
<div class="swiper-slide">
<img src="./img/month11.jpg">
<p>开心麻花爆笑舞台剧《乌龙山...</p>
<p><span class="price">¥80</span>起</p>
<p>2天后</p>
</div>
</div>
</div>
</div>
</div>
</div>
<nav id="bnav">
<ul>
<li>
<a href="./index.html">
<span>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shouyefill"></use>
</svg>
</span>
<p>精选</p>
</a>
</li>
<li>
<a href="./live.html">
<span>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-yanjing"></use>
</svg>
</span>
<p>现场</p>
</a>
</li>
<li>
<a href="#">
<span>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-huiyuan3"></use>
</svg>
</span>
<p>会员</p>
</a>
</li>
<li>
<a href="./ticket.html">
<span>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-dianyingpiao"></use>
</svg>
</span>
<p>票夹</p>
</a>
</li>
<li>
<a href="./my.html">
<span>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-drip-full"></use>
</svg>
</span>
<p>我的</p>
</a>
</li>
</ul>
</nav>
<script src="./js/swiper/swiper-bundle.min.js"></script>
<script src="./js/tab.js"></script>
<script src="./js/jlist.js"></script>
<script>
var swiper = new Swiper(".mySwiper", {
pagination: {
el: ".swiper-pagination",
},
autoplay: {
delay: 2500,
disableOnInteraction: false,
}
});
var swiper = new Swiper(".week", {
slidesPerView: 3,
spaceBetween: 15,
freeMode: true,
});
var swiper = new Swiper(".month", {
slidesPerView: 3,
spaceBetween: 15,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
var swiper = new Swiper(".brand", {
watchSlidesProgress: true,
slidesPerView: 1.5,
spaceBetween: 15,
});
var url="http://rap2api.taobao.org/app/mock/308728/wang";
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var jarr=JSON.parse(xhr.responseText);
insert(jarr);/* 自定义函数 */
}
}
xhr.open("GET", url, true);
xhr.send();
function insert(jarr){
var rlist=document.querySelector(".rlist");
jarr.forEach((v,i)=>{
var nli=document.createElement("li");
nli.innerHTML=`
<img src="${v.img}">
<p>${v["title"]}</p>
<p><span class="price">${v.price}</span>起</p>
<p>${v.time}</p>
`;
rlist.appendChild(nli);
})
}
function buy(){
alert("实名制观演1.本项目需要实名制购票及入场2.观演请本人携带购票时填写证件验证入场3.购票完成后观演人信息不可更改");
}
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手