|
|
@@ -46,11 +46,18 @@
|
|
|
z-index: -9999;
|
|
|
}
|
|
|
|
|
|
+ .clearfix:after {
|
|
|
+ display: block;
|
|
|
+ content: ".";
|
|
|
+ height: 0;
|
|
|
+ line-height: 0;
|
|
|
+ clear: both;
|
|
|
+ visibility: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
html,
|
|
|
body {
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
- overflow-y: scroll;
|
|
|
}
|
|
|
|
|
|
html {
|
|
|
@@ -74,100 +81,308 @@
|
|
|
}
|
|
|
|
|
|
.w {
|
|
|
- width: 1190px;
|
|
|
+ max-width: 1190px;
|
|
|
margin-left: auto;
|
|
|
margin-right: auto;
|
|
|
}
|
|
|
|
|
|
.header {
|
|
|
- position: relative;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
width: 100%;
|
|
|
- padding: 122px 0 202px;
|
|
|
- background: linear-gradient(45deg, #000000 0%, #525050 100%);
|
|
|
+ padding: 16px 0;
|
|
|
+ background: linear-gradient(90deg, #000000 0%, #525050 100%);
|
|
|
}
|
|
|
|
|
|
- .header .logo {
|
|
|
- display: block;
|
|
|
- width: 121px;
|
|
|
- height: 138px;
|
|
|
- margin: 0 auto;
|
|
|
+ .header .logo-wrap {
|
|
|
+ float: left;
|
|
|
+ font-size: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header .logo-wrap .logo {
|
|
|
+ width: 48px;
|
|
|
+ height: 34px;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header .logo-wrap .slogn {
|
|
|
+ width: 164px;
|
|
|
+ height: 13px;
|
|
|
+ margin-left: 13px;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header .menu-wrap {
|
|
|
+ float: right;
|
|
|
+ font-size: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header .menu-wrap a {
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 34px;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header .menu-wrap a:nth-of-type(2) {
|
|
|
+ margin-left: 26px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .download-app {
|
|
|
+ width: 100%;
|
|
|
+ padding: 26px 0 0 113px;
|
|
|
+ opacity: 0.9;
|
|
|
+ background: linear-gradient(90deg, #000, #584946);
|
|
|
+ }
|
|
|
+
|
|
|
+ .download-app img {
|
|
|
+ float: left;
|
|
|
+ width: 221px;
|
|
|
+ height: 378px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .download-app .explain {
|
|
|
+ float: left;
|
|
|
+ padding-top: 104px;
|
|
|
+ margin-left: 62px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .download-app .explain .title {
|
|
|
+ font-size: 26px;
|
|
|
+ color: #D32323;
|
|
|
+ line-height: 37px;
|
|
|
+ letter-spacing: 5px;
|
|
|
+ background: linear-gradient(180deg, #FFAFAF 0%, #E73B3B 100%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .download-app .explain .subtitle {
|
|
|
+ margin: 12px 0 51px;
|
|
|
+ font-size: 17px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 23px;
|
|
|
}
|
|
|
|
|
|
- .header a {
|
|
|
+ .download-app .explain a {
|
|
|
display: block;
|
|
|
- width: 268px;
|
|
|
- height: 44px;
|
|
|
+ width: 102px;
|
|
|
+ height: 36px;
|
|
|
background: #D32323;
|
|
|
- border-radius: 25px;
|
|
|
- margin: 51px auto 0;
|
|
|
- font-size: 16px;
|
|
|
+ border-radius: 21px;
|
|
|
+ font-size: 13px;
|
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
|
font-weight: 600;
|
|
|
color: #FFFFFF;
|
|
|
- line-height: 44px;
|
|
|
- letter-spacing: 1px;
|
|
|
+ line-height: 36px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .app-explain {
|
|
|
+ padding: 36px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .main .title,
|
|
|
+ .app-explain .title {
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: PingFangSC-Semibold, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 27px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
+ .app-explain .title:before,
|
|
|
+ .app-explain .title:after,
|
|
|
+ .main .title:before,
|
|
|
+ .main .title:after {
|
|
|
+ display: inline-block;
|
|
|
+ content: '';
|
|
|
+ width: 9px;
|
|
|
+ height: 2px;
|
|
|
+ background: #D32323;
|
|
|
+ border-radius: 1px;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+
|
|
|
+ .main .title:before,
|
|
|
+ .app-explain .title:before {
|
|
|
+ margin-right: 7px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .main .title:after,
|
|
|
+ .app-explain .title:after {
|
|
|
+ margin-left: 7px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .app-explain .explain {
|
|
|
+ height: 18px;
|
|
|
+ margin: 11px 0 37px;
|
|
|
+ font-size: 13px;
|
|
|
+ font-family: PingFangSC-Semibold, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #A2A2A2;
|
|
|
+ line-height: 18px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .app-explain img {
|
|
|
+ display: block;
|
|
|
+ width: 385px;
|
|
|
+ height: 288px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+
|
|
|
.main {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
width: 100%;
|
|
|
- padding: 56px 0;
|
|
|
+ padding: 34px 0 50px;
|
|
|
+ background: #F5F4F4;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
|
|
|
- .main .album {
|
|
|
- display: block;
|
|
|
- width: 422px;
|
|
|
- height: 347px;
|
|
|
+ .main ul {
|
|
|
+ margin-top: 86px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .main li {
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: 45px;
|
|
|
}
|
|
|
|
|
|
- .main .explain {
|
|
|
- padding-top: 27px;
|
|
|
- margin-left: 44px;
|
|
|
+ .main li:nth-of-type(1) {
|
|
|
+ margin-left: 0;
|
|
|
}
|
|
|
|
|
|
- .main .explain .label {
|
|
|
- font-size: 18px;
|
|
|
+ .main li img {
|
|
|
+ display: block;
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .main li .subtitle {
|
|
|
+ margin: 17px 0 11px;
|
|
|
+ font-size: 15px;
|
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
|
font-weight: 600;
|
|
|
color: #333333;
|
|
|
- line-height: 30px;
|
|
|
+ line-height: 21px;
|
|
|
}
|
|
|
|
|
|
- .main .explain .value {
|
|
|
- font-size: 16px;
|
|
|
- color: #909090;
|
|
|
- line-height: 34px;
|
|
|
+ .main li .description {
|
|
|
+ font-size: 13px;
|
|
|
+ font-family: PingFangSC-Semibold, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #A2A2A2;
|
|
|
+ line-height: 18px;
|
|
|
+ display: inline-block;
|
|
|
+ padding: 7px 26px;
|
|
|
+ border: 1px solid #CDCDCD;
|
|
|
+ border-left: none;
|
|
|
+ border-right: none;
|
|
|
}
|
|
|
|
|
|
- .main .label::after {
|
|
|
- content: '';
|
|
|
- display: block;
|
|
|
+ .footer {
|
|
|
width: 100%;
|
|
|
- height: 2px;
|
|
|
- border-bottom: 1px solid #979797;
|
|
|
+ padding: 24px 0 29px;
|
|
|
+ background: linear-gradient(90deg, #000000 0%, #525050 100%);
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer .title {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer .contact {
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: PingFangSC-Semibold, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 27px;
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .footer .infomation {
|
|
|
+ margin: 4px 0;
|
|
|
+ text-align: center;
|
|
|
+ color: #939393;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jump-bei-an {
|
|
|
+ display: block;
|
|
|
+ text-align: center;
|
|
|
+ color: #939393;
|
|
|
+ font-size: 12px;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="header">
|
|
|
+ <div class="w clearfix">
|
|
|
+ <a class="logo-wrap" href="/">
|
|
|
+ <img alt="" class="logo" src="./imgs/logo@2x.png">
|
|
|
+ <img alt="" class="slogn" src="./imgs/slogan@2x.png">
|
|
|
+ </a>
|
|
|
+ <div class="menu-wrap">
|
|
|
+ <a href="#contact">联系我们</a>
|
|
|
+ <a href="#tool">功能</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+<div class="download-app">
|
|
|
+ <div class="w clearfix">
|
|
|
+ <img alt="" src="./imgs/banner_00@2x.png">
|
|
|
+ <div class="explain">
|
|
|
+ <p class="title">好歌就要听现场的</p>
|
|
|
+ <p class="subtitle">「听邦」 APP 连接线上与线下的现场音乐服务台</p>
|
|
|
+ <a href="//tingbang-h5.codedreamit.com/downloadapp">下载APP</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+<div class="app-explain">
|
|
|
<div class="w">
|
|
|
- <img class="logo" src="./imgs/logo@2x.png" alt="">
|
|
|
- <a href="javascript:;">APP下载</a>
|
|
|
+ <p class="title">手机APP随时访问，一键登录</p>
|
|
|
+ <p class="explain">包括苹果、安卓手机</p>
|
|
|
+ <img alt="" src="./imgs/banner_01@2x.png">
|
|
|
</div>
|
|
|
</div>
|
|
|
-<div class="main">
|
|
|
- <img class="album" src="./imgs/about@2x.png" alt="">
|
|
|
- <div class="explain">
|
|
|
- <p class="label">去 AF house 听歌</p>
|
|
|
- <p class="label">必须要下载的APP</p>
|
|
|
- <p class="value">·查看演出计划</p>
|
|
|
- <p class="value">·订座/点单</p>
|
|
|
- <p class="value">·积分/优惠</p>
|
|
|
- <p class="value">·现场互动</p>
|
|
|
+<div class="main" id="tool">
|
|
|
+ <div class="w">
|
|
|
+ <p class="title">功能一览</p>
|
|
|
+ <ul class="clearfix">
|
|
|
+ <li>
|
|
|
+ <img alt="" src="./imgs/ic_show@2x.png">
|
|
|
+ <p class="subtitle">演出计划</p>
|
|
|
+ <p class="description">查看未来7日演出安排</p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img alt="" src="./imgs/ic_place@2x.png">
|
|
|
+ <p class="subtitle">在线订座</p>
|
|
|
+ <p class="description">线上预定座位 好演出不错过</p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img alt="" src="./imgs/ic_order@2x.png">
|
|
|
+ <p class="subtitle">现场点单</p>
|
|
|
+ <p class="description">现场扫码点单</p>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+<div class="footer" id="contact">
|
|
|
+ <div class="w">
|
|
|
+ <p class="title">联系我们</p>
|
|
|
+ <p class="contact">153 5615 9528</p>
|
|
|
+ <div class="infomation">
|
|
|
+ <a class="p2"
|
|
|
+ href="https://beian.miit.gov.cn" style="color: #939393;"
|
|
|
+ target="_blank">浙ICP备2021019534号-1</a>
|
|
|
+ </div>
|
|
|
+ <a class="jump-bei-an"
|
|
|
+ href="https://beian.miit.gov.cn"
|
|
|
+ target="_blank">信息产业部备案信息查询</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</body>
|
panyong
