<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/index.css">
<script src="../utils/code.jquery.com_jquery-3.7.0.js"></script>
<script src="../js/index.js"></script>
</head>
<body>
<div class="container">
<!-- 头部 -->
<div class="head-container">
<div class="head">
<div class="head-left">
<a href="" class="head-logo"></a>
<ul class="head-tip">
<li>
<a class="head-tip-target" 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>
</div>
<div class="head-right">
<div class="head-input">
<input type="text" placeholder="音乐/视频/电台/用户">
</div>
<div class="head-right-center">
创作者中心
</div>
<div class="head-login">
登录
</div>
</div>
</div>
</div>
<!-- 分类 -->
<div class="sort-container">
<ul class="sort">
<li class="sort-target">推荐</li>
<li>排行榜</li>
<li>歌单</li>
<li>主播电台</li>
<li>歌手</li>
<li>新碟上架</li>
</ul>
</div>
<!-- 轮播图 -->
<div class="banner-container">
<div class="banner">
<div class="banner-main">
<div class="banner-img">
<ul class="banner-circle">
<!-- <li class="banner-circle-target"></li>
<li></li>
<li></li> -->
</ul>
</div>
<div class="fixed-img">
</div>
</div>
<div class="banner-left">
</div>
<div class="banner-right">
</div>
</div>
</div>
<!-- 主要部分 -->
<div class="main-container">
<div class="main">
<div class="main-left">
<!-- 热门推荐 -->、
<div class="main-hot">
<div class="main-hot-title">
<a href="" class="main-hot-title-word">热门推荐</a>
<div class="main-hot-title-tip">
<a href="">华语</a>
<span>|</span>
<a href="">流行</a>
<span>|</span>
<a href="">摇滚</a>
<span>|</span>
<a href="">民谣</a>
<span>|</span>
<a href="">电子</a>
</div>
<div class="main-hot-title-more">
<a href="">更多</a>
<span class="more-arrow">
</span>
</div>
</div>
<div class="main-hot-songs">
<li>
<img src="../img/main-hot1.jpg" alt="">
<div class="song-msg">
<div class="song-headset"></div>
<span>7175万</span>
<div class="song-play"></div>
</div>
<div class="hotsong"></div>
<p>
<span class="song-tab"></span>
这些充满『强烈画面感』的音乐
</p>
</li>
<li>
<img src="../img/main-hot1.jpg" alt="">
<div class="song-msg">
<div class="song-headset"></div>
<span>7175万</span>
<div class="song-play"></div>
</div>
<p>这些充满『强烈画面感』的音乐</p>
</li>
<li>
<img src="../img/main-hot1.jpg" alt="">
<div class="song-msg">
<div class="song-headset"></div>
<span>7175万</span>
<div class="song-play"></div>
</div>
<p>
<span class="song-tab"></span>
这些充满『强烈画面感』的音乐
</p>
</li>
<li>
<img src="../img/main-hot1.jpg" alt="">
<div class="song-msg">
<div class="song-headset"></div>
<span>7175万</span>
<div class="song-play"></div>
</div>
<div class="hotsong"></div>
<p>这些充满『强烈画面感』的音乐</p>
</li>
<li>
<img src="../img/main-hot1.jpg" alt="">
<div class="song-msg">
<div class="song-headset"></div>
<span>7175万</span>
<div class="song-play"></div>
</div>
<p>这些充满『强烈画面感』的音乐</p>
</li>
<li>
<img src="../img/main-hot1.jpg" alt="">
<div class="song-msg">
<div class="song-headset"></div>
<span>7175万</span>
<div class="song-play"></div>
</div>
<p>这些充满『强烈画面感』的音乐</p>
</li>
<li>
<img src="../img/main-hot1.jpg" alt="">
<div class="song-msg">
<div class="song-headset"></div>
<span>7175万</span>
<div class="song-play"></div>
</div>
<p>这些充满『强烈画面感』的音乐</p>
</li>
<li>
<img src="../img/main-hot1.jpg" alt="">
<div class="song-msg">
<div class="song-headset"></div>
<span>7175万</span>
<div class="song-play"></div>
</div>
<p>这些充满『强烈画面感』的音乐</p>
</li>
</div>
</div>
<!-- 新碟上架 -->
<div class="main-new">
<div class="main-new-title">
<div class="main-new-title-word">
新碟上架
</div>
<div class="main-hot-title-more">
<a href="">更多</a>
<span class="more-arrow">
</span>
</div>
</div>
<div class="main-new-disk">
<div class="new-dis-container">
<ul class="main-new-disk-list">
<!-- <li class="new-disk-list">
<ul>
<li>
<div class="new-disk-img">
<img src="../img/newdisk1.jpg" alt="">
<div class="new-disk-play"></div>
</div>
<p class="new-disk-name">
<span>共同的土地</span>
</p>
<p class="new-disk-author">
<span>缺省</span>
</p>
</li>
<li>
<div class="new-disk-img">
<img src="../img/newdisk1.jpg" alt="">
<div class="new-disk-play"></div>
</div>
<p class="new-disk-name">
<span>共同的土地</span>
</p>
<p class="new-disk-author">
<span>缺省</span>
</p>
</li>
<li>
<div class="new-disk-img">
<img src="../img/newdisk1.jpg" alt="">
<div class="new-disk-play"></div>
</div>
<p class="new-disk-name">
<span>共同的土地</span>
</p>
<p class="new-disk-author">
<span>缺省</span>
</p>
</li>
<li>
<div class="new-disk-img">
<img src="../img/newdisk1.jpg" alt="">
<div class="new-disk-play"></div>
</div>
<p class="new-disk-name">
<span>共同的土地</span>
</p>
<p class="new-disk-author">
<span>缺省</span>
</p>
</li>
<li>
<div class="new-disk-img">
<img src="../img/newdisk1.jpg" alt="">
<div class="new-disk-play"></div>
</div>
<p class="new-disk-name">
<span>共同的土地</span>
</p>
<p class="new-disk-author">
<span>缺省</span>
</p>
</li>
</ul>
</li>
<li class="new-disk-list">
<ul>
<li>
<div class="new-disk-img">
<img src="../img/newdisk2.jpg" alt="">
<div class="new-disk-play"></div>
</div>
<p class="new-disk-name">
<span>GUTS</span>
</p>
<p class="new-disk-author">
<span>Olivia Rodrigo</span>
</p>
</li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li class="new-disk-list">
<ul>
<li>
<div class="new-disk-img">
<img src="../img/newdisk1.jpg" alt="">
<div class="new-disk-play"></div>
</div>
<p class="new-disk-name">
<span>共同的土地</span>
</p>
<p class="new-disk-author">
<span>缺省</span>
</p>
</li>
</ul>
</li> -->
</ul>
</div>
<!-- 前后切换 -->
<div class="new-disk-pre">
</div>
<div class="new-disk-next">
</div>
</div>
</div>
<!-- 榜单 -->
<div class="main-bill">
<div class="main-bill-title">
<div class="main-bill-title-word">
榜单
</div>
<div class="main-bill-title-more">
<a href="">更多</a>
<span class="more-arrow">
</span>
</div>
</div>
<ul class="main-bill-list">
<li class="main-bill-list-li">
<div class="bill-list-top">
<div class="bill-list-top-left">
<img src="../img/bill1.jpg" alt="">
</div>
<div class="bill-list-top-right">
<p>飙升榜</p>
<div class="bill-top-right-logo">
<a href="" class="bill-top-right-play"></a>
<a href="" class="bill-top-right-add"></a>
</div>
</div>
</div>
<ul class="bill-list-song">
<li>
<span style="color: #c10d0c;">1</span>
<a href="" >公路商店（issue）</a>
<div class="bill-list-song-oper">
<div class="bill-list-song-oper-play">
</div>
<div class="bill-list-song-oper-add">
</div>
<div class="bill-list-song-oper-collect">
</div>
</div>
</li>
<li>
<span style="color: #c10d0c;">2</span>
<a href="">鲜花（live）</a>
<div class="bill-list-song-oper">
<div class="bill-list-song-oper-play">
</div>
<div class="bill-list-song-oper-add">
</div>
<div class="bill-list-song-oper-collect">
</div>
</div>
</li>
<li>
<span style="color: #c10d0c;">3</span>
<a href="">WTF Freestyle</a>
<div class="bill-list-song-oper">
<div class="bill-list-song-oper-play">
</div>
<div class="bill-list-song-oper-add">
</div>
<div class="bill-list-song-oper-collect">
</div>
</div>
</li>
<li>
<span>4</span>
<a href="">鲜花</a>
<div class="bill-list-song-oper">
<div class="bill-list-song-oper-play">
</div>
<div class="bill-list-song-oper-add">
</div>
<div class="bill-list-song-oper-collect">
</div>
</div>
</li>
<li>
<span>5</span>
<a href="">活着</a>
<div class="bill-list-song-oper">
<div class="bill-list-song-oper-play">
</div>
<div class="bill-list-song-oper-add">
</div>
<div class="bill-list-song-oper-collect">
</div>
</div>
</li>
<li>
<span>6</span>
<a href="">I'M A VINGIN</a>
<div class="bill-list-song-oper">
<div class="bill-list-song-oper-play">
</div>
<div class="bill-list-song-oper-add">
</div>
<div class="bill-list-song-oper-collect">
</div>
</div>
</li>
<li>
<span>7</span>
<a href="">野草</a>
<div class="bill-list-song-oper">
<div class="bill-list-song-oper-play">
</div>
<div class="bill-list-song-oper-add">
</div>
<div class="bill-list-song-oper-collect">
</div>
</div>
</li>
<li>
<span>8</span>
<a href="">阴转晴</a>
<div class="bill-list-song-oper">
<div class="bill-list-song-oper-play">
</div>
<div class="bill-list-song-oper-add">
</div>
<div class="bill-list-song-oper-collect">
</div>
</div>
</li>
<li>
<span>9</span>
<a href="">我们会走在哪里</a>
<div class="bill-list-song-oper">
<div class="bill-list-song-oper-play">
</div>
<div class="bill-list-song-oper-add">
</div>
<div class="bill-list-song-oper-collect">
</div>
</div>
</li>
<li>
<span>10</span>
<a href="">姑娘别哭泣</a>
<div class="bill-list-song-oper">
<div class="bill-list-song-oper-play">
</div>
<div class="bill-list-song-oper-add">
</div>
<div class="bill-list-song-oper-collect">
</div>
</div>
</li>
<li>
<a href="" class="bill-list-song-more">查看更多></a>
</li>
</ul>
</li>
<li class="main-bill-list-li">
<div class="bill-list-top">
<div class="bill-list-top-left">
<img src="../img/bill2.jpg" alt="">
</div>
<div class="bill-list-top-right">
<p>新歌榜</p>
<div class="bill-top-right-logo">
<a href="" class="bill-top-right-play"></a>
<a href="" class="bill-top-right-add"></a>
</div>
</div>
</div>
<ul class="bill-list-song">
<li>
<span style="color: #c10d0c;">1</span>
<a href="">公路商店（issue）</a>
<div class="bill-list-song-oper">
<div class="bill-list-song-oper-play">
</div>
<div class="bill-list-song-oper-add">
</div>
<div class="bill-list-song-oper-collect">
</div>
</div>
</li>
<li>
<span style="color: #c10d0c;">2</span>
<a href="">唯一</a>
<div class="bill-list-song-oper">
<div class="bill-list-song-oper-play">
</div>
<div class="bill-list-song-oper-add">
</div>
<div class="bill-list-song-oper-collect">
</div>
</div>
</li>
<li>
<span style="color: #c10d0c;">3</span>
<a href="">NUNA3.0</a>
<div class="bill-list-song-oper">
<div class="bill-list-song-oper-play">
</div>
<div class="bill-list-song-oper-add">
</div>
<div class="bill-list-song-oper-collect">
</div>
</div>
</li>
<li>
<span>4</span>
<a href="">风之海</a>
<div class="bill-list-song-oper">
<div class="bill-list-song-oper-play">
</div>
<div class="bill-list-song-oper-add">
</div>
<div class="bill-list-song-oper-collect">
</div>
</div>
</li>
<li>
<span>5</span>
<a href="">失落盛行</a>
<div class="bill-list-song-oper">
<div class="bill-list-song-oper-play">
</div>
<div class="bill-list-song-oper-add">
</div>
<div class="bill-list-song-oper-collect">
</div>
</div>
</li>
<li>
<span>6</span>
<a href="">圣山</a>
<div class="bill-list-song-oper">
<div class="bill-list-song-oper-play">
</div>
<div class="bill-list-song-oper-add">
</div>
<div class="bill-list-song-oper-collect">
</div>
</div>
</li>
<li>
<span>7</span>
<a href="">何必</a>
<div class="bill-list-song-oper">
<div class="bill-list-song-oper-play">
</div>
<div class="bill-list-song-oper-add">
</div>
<div class="bill-list-song-oper-collect">
</div>
</div>
</li>
<li>
<span>8</span>
<a href="">太聪明 Beat</a>
<div class="bill-list-song-oper">
<div class="bill-list-song-oper-play">
</div>
<div class="bill-list-song-oper-add">
</div>
<div class="bill-list-song-oper-collect">
</div>
</div>
</li>
<li>
<span>9</span>
<a href="">情人</a>
<div class="bill-list-song-oper">
<div class="bill-list-song-oper-play">
</div>
<div class="bill-list-song-oper-add">
</div>
<div class="bill-list-song-oper-collect">
</div>
</div>
</li>
<li>
<span>10</span>
<a href="">Qollarimdan tut</a>
<div class="bill-list-song-oper">
<div class="bill-list-song-oper-play">
</div>
<div class="bill-list-song-oper-add">
</div>
<div class="bill-list-song-oper-collect">
</div>
</div>
</li>
<li>
<a href="" class="bill-list-song-more">查看更多></a>
</li>
</ul>
</li>
<li class="main-bill-list-li">
<div class="bill-list-top">
<div class="bill-list-top-left">
<img src="../img/bill3.jpg" alt="">
</div>
<div class="bill-list-top-right">
<p>原创榜</p>
<div class="bill-top-right-logo">
<a href="" class="bill-top-right-play"></a>
<a href="" class="bill-top-right-add"></a>
</div>
</div>
</div>
<ul class="bill-list-song">
<li>
<span style="color: #c10d0c;">1</span>
<a href="">失落盛行</a>
<div class="bill-list-song-oper">
<div class="bill-list-song-oper-play">
</div>
<div class="bill-list-song-oper-add">
</div>
<div class="bill-list-song-oper-collect">
</div>
</div>
</li>
<li>
<span style="color: #c10d0c;">2</span>
<a href="">遥遥望你</a>
<div class="bill-list-song-oper">
<div class="bill-list-song-oper-play">
</div>
<div class="bill-list-song-oper-add">
</div>
<div class="bill-list-song-oper-collect">
</div>
</div>
</li>
<li>
<span style="color: #c10d0c;">3</span>
<a href="">凌晨三点半</a>
<div class="bill-list-song-oper">
<div class="bill-list-song-oper-play">
</div>
<div class="bill-list-song-oper-add">
</div>
<div class="bill-list-song-oper-collect">
</div>
</div>
</li>
<li>
<span>4</span>
<a href="">公路商店（issue）</a>
<div class="bill-list-song-oper">
<div class="bill-list-song-oper-play">
</div>
<div class="bill-list-song-oper-add">
</div>
<div class="bill-list-song-oper-collect">
</div>
</div>
</li>
<li>
<span>5</span>
<a href="">Forget-Me-Not</a>
<div class="bill-list-song-oper">
<div class="bill-list-song-oper-play">
</div>
<div class="bill-list-song-oper-add">
</div>
<div class="bill-list-song-oper-collect">
</div>
</div>
</li>
<li>
<span>6</span>
<a href="">败贝</a>
<div class="bill-list-song-oper">
<div class="bill-list-song-oper-play">
</div>
<div class="bill-list-song-oper-add">
</div>
<div class="bill-list-song-oper-collect">
</div>
</div>
</li>
<li>
<span>7</span>
<a href="">如履薄冰</a>
<div class="bill-list-song-oper">
<div class="bill-list-song-oper-play">
</div>
<div class="bill-list-song-oper-add">
</div>
<div class="bill-list-song-oper-collect">
</div>
</div>
</li>
<li>
<span>8</span>
<a href="">破唱片 Broken Record</a>
<div class="bill-list-song-oper">
<div class="bill-list-song-oper-play">
</div>
<div class="bill-list-song-oper-add">
</div>
<div class="bill-list-song-oper-collect">
</div>
</div>
</li>
<li>
<span>9</span>
<a href="">江湖爱</a>
<div class="bill-list-song-oper">
<div class="bill-list-song-oper-play">
</div>
<div class="bill-list-song-oper-add">
</div>
<div class="bill-list-song-oper-collect">
</div>
</div>
</li>
<li>
<span>10</span>
<a href="">流浪水母</a>
<div class="bill-list-song-oper">
<div class="bill-list-song-oper-play">
</div>
<div class="bill-list-song-oper-add">
</div>
<div class="bill-list-song-oper-collect">
</div>
</div>
</li>
<li>
<a href="" class="bill-list-song-more">查看更多></a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- main-right -->
<div class="main-right">
<!-- 未登录状态 -->
<div class="main-user">
<p class="main-user-word">
登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机
</p>
<div class="main-user-btn">
用户登录
</div>
</div>
<!-- 入驻歌手 -->
<div class="main-singer">
<div class="main-singer-title">
<span>入驻歌手</span>
<a href="">查看更多></a>
</div>
<ul class="main-singer-card">
<li>
<div class="main-singer-head">
<img src="../img/singer1.jpg" alt="">
</div>
<div class="main-singer-info">
<h4>张惠妹aMEI</h4>
<p>台湾歌手张惠妹</p>
</div>
</li>
<li>
<div class="main-singer-head">
<img src="../img/singer1.jpg" alt="">
</div>
<div class="main-singer-info">
<h4>张惠妹aMEI</h4>
<p>台湾歌手张惠妹</p>
</div>
</li>
<li>
<div class="main-singer-head">
<img src="../img/singer1.jpg" alt="">
</div>
<div class="main-singer-info">
<h4>张惠妹aMEI</h4>
<p>台湾歌手张惠妹</p>
</div>
</li>
<li>
<div class="main-singer-head">
<img src="../img/singer1.jpg" alt="">
</div>
<div class="main-singer-info">
<h4>张惠妹aMEI</h4>
<p>台湾歌手张惠妹</p>
</div>
</li>
<li>
<div class="main-singer-head">
<img src="../img/singer1.jpg" alt="">
</div>
<div class="main-singer-info">
<h4>张惠妹aMEI</h4>
<p>台湾歌手张惠妹</p>
</div>
</li>
</ul>
<div class="main-singer-btn">
申请成为网易音乐人
</div>
<div class="main-anchor">
<div class="main-anchor-title">
热门主播
</div>
<ul class="main-anchor-card">
<li>
<div class="main-anchor-head">
<img src="../img/anchor1.jpg" alt="">
</div>
<div class="main-anchor-info">
<div>陈立</div>
<p>心理学家、美食家陈立教授</p>
</div>
</li>
<li>
<div class="main-anchor-head">
<img src="../img/anchor1.jpg" alt="">
</div>
<div class="main-anchor-info">
<div>陈立</div>
<p>心理学家、美食家陈立教授</p>
</div>
</li>
<li>
<div class="main-anchor-head">
<img src="../img/anchor1.jpg" alt="">
</div>
<div class="main-anchor-info">
<div>陈立</div>
<p>心理学家、美食家陈立教授</p>
</div>
</li>
<li>
<div class="main-anchor-head">
<img src="../img/anchor1.jpg" alt="">
</div>
<div class="main-anchor-info">
<div>陈立</div>
<p>心理学家、美食家陈立教授</p>
</div>
</li>
<li>
<div class="main-anchor-head">
<img src="../img/anchor1.jpg" alt="">
</div>
<div class="main-anchor-info">
<div>陈立</div>
<p>心理学家、美食家陈立教授</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- 底部 -->
<div class="foot-container">
<div class="foot">
<!-- enter -->
<ul class="foot-enter">
<li>
<a href="" class="foot-enter-logo logo-openplatform">
</a>
<p>音乐开放平台</p>
</li>
<li>
<a href="" class="foot-enter-logo logo-trade">
</a>
<p>云村交易所</p>
</li>
<li>
<a href="" class="foot-enter-logo logo-amped">
</a>
<p>Amped Studio</p>
</li>
<li>
<a href="" class="foot-enter-logo logo-xstudio">
</a>
<p>X Studio虚拟歌手</p>
</li>
<li>
<a href="" class="foot-enter-logo logo-auth">
</a>
<p>用户认证</p>
</li>
<li>
<a href="" class="foot-enter-logo logo-musician">
</a>
<p>音乐交易平台</p>
</li>
<li>
<a href="" class="foot-enter-logo logo-cloudsong">
</a>
<p>云推歌</p>
</li>
<li>
<a href="" class="foot-enter-logo logo-reward">
</a>
<p>赞赏</p>
</li>
</ul>
<!-- msg -->
<div class="msg">
<p class="msg-link">
<a href="">服务条款</a>
<span>|</span>
<a href="">隐私政策</a>
<span>|</span>
<a href="">儿童隐私政策</a>
<span>|</span>
<a href="">版权投诉</a>
<span>|</span>
<a href="">投资者关系</a>
<span>|</span>
<a href="">广告合作</a>
<span>|</span>
<a href="">联系我们</a>
</p>
<p class="msg-word">
<a href="" style="margin-right: 14px;">廉正举报</a>
<span style="margin-right: 14px;">
不良信息举报邮箱: [email protected]
</span>
<span style="margin: 0;">客服热线：95163298</span>
</p>
<p class="msg-word">
<span>
互联网宗教信息服务许可证：浙（2022）0000120
</span>
<span>
增值电信业务经营许可证：浙B2-20150198
</span>
<a href="">粤B2-20090191-18 工业和信息化部备案管理系统网站</a>
</p>
<p class="msg-word">
<span style="margin-right: 14px;">
网易公司版权所有©1997-2023
</span>
<span>
杭州乐读科技有限公司运营：
</span>
<a href="">浙网文[2021] 1186-054号</a>
<a href="" class="police-a">
<span class="police-logo"></span>
<span class="police">浙公网安备 33010902002564号</span>
</a>
</p>
</div>
</div>
</div>
</div>
</body>
</html>css
index.css
/* 分类 */
.sort-container {
width: 100%;
min-width: 1200px;
height: 35px;
box-sizing: border-box;
background-color: #C20C0C;
border-bottom: 1px solid #a40011;
position: relative;
}
.sort {
width: 1200px;
height: 34px;
/* background-color: antiquewhite; */
margin: auto;
box-sizing: border-box;
padding-left: 180px;
display: flex;
align-items: center;
font-size: 12px;
color: #fff;
}
.sort li {
height: 20px;
line-height: 20px;
padding: 0 13px;
margin: 0 17px;
border-radius: 20px;
}
.sort-target {
background-color: #9B0909;
}
.sort :hover {
background-color: #9B0909;
cursor: pointer;
}
/* 轮播图 */
.banner-container {
width: 100%;
min-width: 1200px;
height: 285px;
background-image: url('http://p1.music.126.net/aDxcTn-0a6hLo0rpClb9ZA==/109951168963535337.jpg?imageView&blur=40x20');
background-size: 100% 285px;
position: relative;
}
.banner {
width: 1200px;
height: 285px;
margin: auto;
position: relative;
}
.banner-main {
width: 984px;
height: 100%;
margin: auto;
display: flex;
}
.banner-img {
width: 730px;
height: 285px;
background-image: url('https://p1.music.126.net/aDxcTn-0a6hLo0rpClb9ZA==/109951168963535337.jpg?imageView&quality=89');
background-size: 100% 285px;
position: relative;
}
.banner-circle {
height: 20px;
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
}
.banner-circle li {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #fff;
margin-right: 8px;
cursor: pointer;
}
.banner-circle-target {
background-color: red !important;
}
.banner-circle :hover {
background-color: red;
}
.fixed-img {
width: 254px;
height: 285px;
background-image: url('../img/download.png');
background-size: cover;
}
.banner-left {
width: 37px;
height: 63px;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 50px;
background-image: url('../img/banner.png');
background-position: 0 -360px;
}
.banner-left:hover {
background-position: 0 -430px;
}
.banner-right {
width: 37px;
height: 63px;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 50px;
background-image: url('../img/banner.png');
background-position: 0 -508px;
}
.banner-right:hover {
background-position: 0 -578px;
}
/* 主要部分 */
.main-container {
width: 100%;
min-width: 1200px;
height: 1425px;
background-color: rgb(245, 245, 245);
position: relative;
}
.main {
width: 980px;
height: 1425px;
margin: auto;
display: flex;
border-left:1px solid #d3d3d3 ;
border-right:1px solid #d3d3d3 ;
}
.main-left {
width: 729px;
height: 100%;
padding: 20px 20px 40px 20px;
box-sizing: border-box;
background-color: #fff;
border-right:1px solid #d3d3d3 ;
}
/* 热门推荐 */
.main-hot {
width: 689px;
height: 523px;
/* background-color: antiquewhite; */
}
.main-hot-title {
width: 645px;
height: 33px;
padding: 0 10px 0 34px;
background-image: url('../img/index.png');
background-repeat: no-repeat;
background-position: -225px -156px;
border-bottom: 2px solid #C10D0C;
display: flex;
/* align-items: center; */
font-size: 12px;
color: #666;
position: relative;
}
.main-hot-title-word {
display: block;
width: 80px;
height: 28px;
line-height: 28px;
font-size: 20px;
color: #333;
}
.main-hot-title-tip {
height: 16px;
line-height: 16px;
margin: 7px 0 0 20px;
}
.main-hot-title-tip a {
font-size: 12px;
color: #666;
}
.main-hot-title-tip a:hover {
text-decoration: underline;
}
.main-hot-title-tip span {
color: #ccc;
margin: 0 14px;
}
.main-hot-title-more {
position: absolute;
top: 9px;
right: 0;
}
.main-hot-title-more a {
font-size: 12px;
color: #666;
}
.main-hot-title-more a:hover {
text-decoration: underline;
}
.more-arrow {
display: inline-block;
width: 12px;
height: 12px;
margin-left: 4px;
vertical-align: middle;
background-image: url('../img/index.png');
background-position: 0 -240px;
}
.main-hot-songs {
width: 100%;
height: 468px;
margin-top: 20px;
/* background-color: red; */
display: grid;
grid-template-columns: repeat(4, 140px);
grid-template-rows: repeat(2, 204px);
gap: 30px 42px;
}
.main-hot-songs li {
width: 140px;
height: 204px;
position: relative;
}
.main-hot-songs li img {
width: 140px;
height: 140px;
}
.song-msg {
position: absolute;
bottom: 64px;
left: 0;
width: 100%;
height: 27px;
background-image: url('../img/coverall.png');
background-position: 0 -537px;
color: #ccc;
display: flex;
}
.song-headset {
width: 14px;
height: 11px;
background-image: url('../img/iconall.png');
background-position: 0 -24px;
margin: 9px 5px 9px 10px;
}
.song-msg span {
display: inline-block;
margin-top: 7px;
height: 16.8px;
line-height: 16.8px;
font-size: 12px;
color: #ccc;
}
.song-play {
position: absolute;
right: 10px;
bottom: 5px;
width: 16px;
height: 17px;
background-image: url('../img/iconall.png');
background-position: 0 0;
cursor: pointer;
}
.hotsong {
width: 40px;
height: 40px;
background-image: url('../img/icon2.png');
background-position: -135px -220px;
position: absolute;
top: 0;
left: 0;
}
.main-hot-songs li p {
cursor: pointer;
font-size: 14px;
display: inline-block;
}
.song-tab {
display: inline-block;
margin-right: 4px;
position: relative;
top: 2px;
width: 35px;
height: 15px;
background-image: url('../img/icon.png');
background-position: -31px -658px;
}
.main-hot-songs li p:hover {
text-decoration: underline;
}
/* 新碟上架 */
.main-new {
width: 689px;
height: 243px;
position: relative;
margin-top: 35px;
}
.main-new-title {
width: 645px;
height: 33px;
padding: 0 10px 0 34px;
background-image: url('../img/index.png');
background-repeat: no-repeat;
background-position: -225px -156px;
border-bottom: 2px solid #C10D0C;
display: flex;
/* align-items: center; */
font-size: 12px;
color: #666;
position: relative;
}
.main-new-title-word {
display: block;
width: 80px;
height: 28px;
line-height: 28px;
font-size: 20px;
color: #333;
cursor: pointer;
}
.main-new-title-more {
position: absolute;
top: 9px;
right: 0;
}
.main-new-title-more a {
font-size: 12px;
color: #666;
}
.main-new-title-more a:hover {
text-decoration: underline;
}
.main-new-disk {
width: 645px;
height: 180px;
margin: 20px 0 37px;
padding-left: 16px;
padding-right: 24px;
border: 1px solid #d3d3d3;
background-color: rgb(245, 245, 245);
position: relative;
}
.new-dis-container {
width: 645px;
height: 180px;
position: relative;
overflow: hidden;
}
.main-new-disk-list {
width: 1935px;
height: 100%;
position: relative;
left: 0;
transition: 0.3s;
display: flex;
}
.new-disk-list {
width: 645px;
height: 180px;
position: absolute;
/* background-color: blue; */
}
.new-disk-list ul {
width: 645px;
height: 150px;
margin-top: 28px;
display: flex;
}
.new-disk-list li {
width: 118px;
height: 150px;
margin-left: 11px;
font-size: 12px;
}
.new-disk-img {
width: 118px;
height: 100px;
background-image: url('../img/coverall.png');
background-position: 0 -570px;
position: relative;
cursor: pointer;
}
.new-disk-img img {
width: 100px;
height: 100px;
}
.new-disk-play {
display: none;
width: 22px;
height: 22px;
background-image: url('../img/iconall.png');
background-position: 0 -85px;
position: absolute;
left: 72px;
bottom: 5px;
cursor: pointer;
}
.new-disk-img img:hover~.new-disk-play {
display: block;
}
.new-disk-play:hover {
display: block;
background-position: 0 -110px;
}
.new-disk-name span {
line-height: 18px;
color: #000;
cursor: pointer;
}
.new-disk-author span {
line-height: 18px;
color: #666;
cursor: pointer;
}
.new-disk-list li p span:hover {
text-decoration: underline;
}
/* 前后切换 */
.new-disk-pre {
width: 17px;
height: 17px;
position: absolute;
top: 71px;
background-image: url('../img/index.png');
background-position: -260px -75px;
left: 12px;
cursor: pointer;
}
.new-disk-pre:hover {
background-position: -280px -75px;
}
.new-disk-next {
width: 17px;
height: 17px;
position: absolute;
top: 71px;
background-image: url('../img/index.png');
background-position: -300px -75px;
right: 6px;
cursor: pointer;
}
.new-disk-next:hover {
background-position: -320px -75px;
}
/* 榜单 */
.main-bill {
width: 689px;
height: 527px;
position: relative;
margin-top: 37px;
}
.main-bill-title {
width: 645px;
height: 33px;
padding: 0 10px 0 34px;
background-image: url('../img/index.png');
background-repeat: no-repeat;
background-position: -225px -156px;
border-bottom: 2px solid #C10D0C;
display: flex;
/* align-items: center; */
font-size: 12px;
color: #666;
position: relative;
}
.main-bill-title-word {
display: block;
width: 80px;
height: 28px;
line-height: 28px;
font-size: 20px;
color: #333;
cursor: pointer;
}
.main-bill-title-more {
position: absolute;
top: 9px;
right: 0;
}
.main-bill-title-more a {
font-size: 12px;
color: #666;
}
.main-bill-title-more a:hover {
text-decoration: underline;
}
.main-bill-list {
width: 689px;
height: 472px;
position: relative;
margin-top: 20px;
background-image: url('../img/index_bill.png');
display: flex;
}
.main-bill-list-li{
width: 230px;
height: 100%;
position: relative;
}
.bill-list-top{
width: 211px;
height: 100px;
padding: 20px 0 0 19px;
display: flex;
}
.bill-list-top-left,
.bill-list-top-left img{
width: 80px;
height: 80px;
}
.bill-list-top-right{
width: calc(100% - 80px);
height: 51px;
padding-left: 10px;
padding-top: 6px;
box-sizing: border-box;
}
.bill-list-top-right p{
width: 100%;
height: 19px;
line-height: 19px;
font-size: 14px;
font-weight: bold;
}
.bill-top-right-logo{
width: 100%;
height: 22px;
margin-top: 10px;
}
.bill-top-right-logo a{
display: inline-block;
width: 22px;
height: 22px;
margin-right: 10px;
background-image: url('../img/index.png');
}
.bill-top-right-play{
background-position: -267px -205px;
}
.bill-top-right-play:hover{
background-position: -267px -235px;
}
.bill-top-right-add{
background-position: -300px -205px;
}
.bill-top-right-add:hover{
background-position: -300px -235px;
}
.bill-list-song{
width: 100%;
height: 352px;
padding-left: 15px;
box-sizing: border-box;
}
.bill-list-song li{
width: 215px;
height: 32px;
display: flex;
position: relative;
}
.bill-list-song li span{
display: block;
width: 35px;
height: 32px;
line-height: 32px;
text-align: center;
font-size: 16px;
color: #666;
}
.bill-list-song li a{
display: block;
width: calc(100% - 35px);
height: 32px;
line-height: 32px;
font-size: 12px;
color: #000;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bill-list-song li a:hover{
text-decoration: underline;
}
.bill-list-song-oper{
position: absolute;
width: 82px;
height: 19px;
top: 7px;
right: 0;
/* background-color: yellow; */
display:none;
}
.bill-list-song-oper div{
width: 17px;
height: 17px;
cursor: pointer;
margin-right: 10px;
}
.bill-list-song-oper-play{
background-image: url('../img/index.png');
background-position: -267px -268px;
}
.bill-list-song-oper-play:hover{
background-position: -267px -288px;
}
.bill-list-song-oper-add{
margin-top: 2px;
background-image: url('../img/icon.png');
background-position: 0 -700px;
}
.bill-list-song-oper-add:hover{
background-position: -22px -700px;
}
.bill-list-song-oper-collect{
background-image: url('../img/index.png');
background-position: -297px -268px;
}
.bill-list-song-oper-collect:hover{
background-position: -297px -288px;
}
.bill-list-song-more{
width: 100% !important;
padding-right: 32px;
box-sizing: border-box;
text-align: right;
}
/* main-right */
.main-right {
width: 250px;
height: 100%;
position: relative;
background-color: #fff;
}
/* 未登录状态 */
.main-user {
width: 250px;
height: 126px;
background-image: url('../img/index.png');
background-position: 0 0;
padding: 0 22.5px;
box-sizing: border-box;
}
.main-user-word {
width: 205px;
line-height: 22px;
padding: 16px 0;
font-size: 12px;
}
.main-user-btn {
display: block;
width: 100px;
height: 31px;
line-height: 31px;
font-size: 12px;
text-align: center;
margin: auto;
color: #fff;
text-shadow: 0 1px 0 #8a060b;
background-image: url('../img/index.png');
background-position: 0 -195px;
cursor: pointer;
}
.main-user-btn:hover {
background-position: -110px -195px;
}
/* 入驻歌手 */
.main-singer {
width: 250px;
height: 455px;
position: relative;
background-color: #fff;
margin-top: 15px;
}
.main-singer-title {
width: 210px;
height: 23px;
border-bottom: 2px solid #d13030;
margin: auto;
font-size: 12px;
color: #333;
}
.main-singer-title span {
font-weight: 700;
}
.main-singer-title a {
float: right;
font-size: 12px;
color: #666;
}
.main-singer-title a:hover {
text-decoration: underline;
}
.main-singer-card {
width: 230px;
height: 380px;
margin: 6px 0 0 20px;
}
.main-singer-card li {
width: 210px;
height: 62px;
margin-top: 14px;
background-color: #fafafa;
display: flex;
cursor: pointer;
}
.main-singer-head,
.main-singer-head img {
width: 62px;
height: 62px;
}
.main-singer-info{
width: 133px;
height: 60px;
padding-left: 14px;
border: 1px solid #e9e9e9;
border-left: none;
}
.main-singer-info h4{
padding-top: 8px;
height: 22px;
line-height: 22px;
font-size: 12px;
}
.main-singer-info p{
height: 16px;
line-height: 16px;
padding-top: 8px;
font-size: 12px;
color: #666;
}
.main-singer-btn{
width: 210px;
height: 31px;
line-height: 31px;
text-align: center;
margin-left: 20px;
font-size: 12px;
color: #333;
cursor: pointer;
border-radius: 4px;
border: 1px solid rgb(195, 195, 195);
box-sizing: border-box;
box-shadow: 0 1px rgb(195, 195, 195);
}
/* 热门主播 */
.main-anchor{
width: 250px;
height: 294px;
margin-top: 25px;
background-color: #fff;
}
.main-anchor-title{
width: 210px;
height: 23px;
border-bottom: 1px solid #ccc;
font-size: 12px;
font-weight: bold;
margin: auto;
}
.main-anchor-card{
width: 230px;
height: 250px;
margin-left: 20px;
margin-top: 20px;
font: 12px;
}
.main-anchor-card li{
width: 210px;
height: 40px;
margin-bottom: 10px;
display: flex;
}
.main-anchor-head,
.main-anchor-head img{
width: 40px;
height: 40px;
cursor: pointer;
}
.main-anchor-info{
width: 160px;
height: 40px;
margin-left: 10px;
font-size: 12px;
}
.main-anchor-info div{
height: 20px;
line-height: 20px;
color: #000;
cursor: pointer;
}
.main-anchor-info div:hover{
text-decoration: underline;
}
.main-anchor-info p{
width: 160px;
height: 20px;
line-height: 20px;
color: #666;
/* 超出变成省略号 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}public.css
* {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
.container {
width: 100%;
min-width: 1200px;
}
/* 头部 */
.head-container {
width: 100%;
min-width: 1200px;
height: 70px;
box-sizing: border-box;
background-color: #242424;
border-bottom: 1px solid #000;
position: relative;
}
.head {
width: 1200px;
height: 69px;
/* background-color: antiquewhite; */
margin: auto;
display: flex;
justify-content: space-between;
}
.head-left {
height: 69px;
display: flex;
}
.head-logo {
display: block;
width: 157px;
height: 69px;
padding-right: 20px;
background-image: url('../img/topbar.png');
background-position: 0px 0px;
}
.head-tip {
height: 69px;
display: flex;
}
.head-tip li {
height: 69px;
}
.head-tip li a {
display: inline-block;
height: 69px;
line-height: 69px;
text-align: center;
padding: 0 19px;
color: #ccc;
font-size: 14px;
}
.head-tip-target {
background-color: #000;
color: #fff !important;
}
.head-tip li a:hover {
background-color: #000;
color: #fff !important;
}
.head-right {
height: 69px;
display: flex;
align-items: center;
}
.head-input {
width: 158px;
height: 32px;
background-image: url(../img/topbar.png);
background-position: 0 -99px;
background-color: #fff;
border-radius: 32px;
position: relative;
}
.head-input input {
width: 116px;
height: 16px;
line-height: 16px;
font-size: 12px;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 30px;
border: none;
outline: none;
}
.head-right-center {
width: 90px;
height: 32px;
box-sizing: border-box;
color: #ccc;
border-radius: 20px;
line-height: 30px;
border: 1px solid #4F4F4F;
font-size: 12px;
text-align: center;
margin-left: 12px;
cursor: pointer;
}
.head-right-center:hover {
color: #fff;
border-color: #fff;
}
.head-login {
width: 28px;
height: 16px;
line-height: 16px;
text-align: center;
font-size: 12px;
color: #666;
margin-left: 20px;
margin-right: 22px;
cursor: pointer;
}
.head-login:hover {
color: #787878;
text-decoration: underline;
}
/* 底部 */
.foot-container {
width: 100%;
min-width: 1200px;
height: 325px;
position: relative;
border-top: 1px solid #d3d3d3;
background: #f2f2f2;
}
.foot {
width: 980px;
height: 325px;
margin: auto;
/* background-color: antiquewhite; */
}
/* enter */
.foot-enter {
width: 980px;
height: 71px;
/* background-color: #fff; */
padding-top: 33px;
display: flex;
justify-content: space-around;
margin-bottom: 60px;
}
.foot-enter li {
width: 100px;
height: 71px;
/* background-color: red; */
position: relative;
}
.foot-enter-logo {
display: block;
width: 45px;
height: 45px;
background-image: url('../img/foot_enter_new2.png');
background-size: 220px 220px;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.logo-openplatform {
background-position: -170px -5px;
}
.logo-openplatform:hover {
background-position: -5px -115px;
}
.logo-trade {
background-position: -5px -170px;
}
.logo-trade:hover {
background-position: -60px -170px;
}
.logo-amped {
background-position: -5px -60px;
}
.logo-amped:hover {
background-position: -60px -5px;
}
.logo-xstudio {
background-image: url('../img/xStudio.png');
background-size: 45px 45px;
}
.logo-xstudio:hover {
background-image: url('../img/xStudioHover.png');
background-size: 45px 45px;
}
.logo-auth {
background-position: -60px -60px;
}
.logo-auth:hover {
background-position: -115px -5px;
}
.logo-musician {
background-position: -115px -115px;
}
.logo-musician:hover {
background-position: -5px -5px;
}
.logo-cloudsong {
background-image: url('../img/cloudSong.png');
background-size: 45px;
}
.logo-cloudsong:hover {
background-image: url('../img/cloudSongHover.png');
background-size: 45px;
}
.logo-reward {
background-position: -170px -115px;
}
.logo-reward:hover {
background-position: -60px -115px;
}
.foot-enter li p {
width: 100px;
height: 12px;
line-height: 12px;
position: absolute;
bottom: 0;
font-size: 12px;
text-align: center;
color: rgba(0, 0, 0, 0.5);
}
/* msg */
.msg {
width: 980px;
height: 100px;
/* background-color: #fff; */
position: relative;
font-size: 14px;
color: #666;
}
.msg-link,
.msg-word {
height: 24px;
line-height: 24px;
text-align: center;
}
.msg a {
font-size: 14px;
color: #666;
}
.msg-link span {
color: #d9d9d9;
margin: 0 8px;
}
.msg a:hover {
text-decoration: underline;
}
.police-logo {
display: inline-block;
width: 14px;
height: 14px;
background-image: url('../img/police.png');
background-size: cover;
margin-left: 2px;
vertical-align: -2px;
}
.police-a:hover {
text-decoration: none !important;
}
.police-logo:hover~.police {
text-decoration: underline;
}
.police:hover {
text-decoration: underline;
}js
$(function () {
// 轮播图
var bannerCount = 0;
var bannerImg = [
{
backImg: "http://p1.music.126.net/aDxcTn-0a6hLo0rpClb9ZA==/109951168963535337.jpg?imageView&blur=40x20",
centerImg: "https://p1.music.126.net/aDxcTn-0a6hLo0rpClb9ZA==/109951168963535337.jpg?imageView&quality=89"
},
{
backImg: "http://p1.music.126.net/_bnQhZdu335wUxh6VPyZpQ==/109951168968517586.jpg?imageView&blur=40x20",
centerImg: "https://p1.music.126.net/_bnQhZdu335wUxh6VPyZpQ==/109951168968517586.jpg?imageView&quality=89"
},
{
backImg: "http://p1.music.126.net/aDxcTn-0a6hLo0rpClb9ZA==/109951168963535337.jpg?imageView&blur=40x20",
centerImg: "https://p1.music.126.net/aDxcTn-0a6hLo0rpClb9ZA==/109951168963535337.jpg?imageView&quality=89"
},
{
backImg: "http://p1.music.126.net/_bnQhZdu335wUxh6VPyZpQ==/109951168968517586.jpg?imageView&blur=40x20",
centerImg: "https://p1.music.126.net/_bnQhZdu335wUxh6VPyZpQ==/109951168968517586.jpg?imageView&quality=89"
},
{
backImg: "http://p1.music.126.net/aDxcTn-0a6hLo0rpClb9ZA==/109951168963535337.jpg?imageView&blur=40x20",
centerImg: "https://p1.music.126.net/zGfNaVSNgllRwIJFUOIBlw==/109951168968356614.jpg?imageView&quality=89"
}
]
var str = '';
for (var i = 0; i < bannerImg.length; i++) {
if (i == 0) {
str += `<li class="banner-circle-target"></li>`
} else {
str += `<li></li>`
}
}
$(".banner-circle").html(str);
// 变化函数
function bannerImgChange(n) {
$(".banner-container").css("backgroundImage", `url(${bannerImg[n].backImg})`)
$(".banner-img").css("backgroundImage", `url(${bannerImg[n].centerImg})`)
$(".banner-circle li").eq(n).addClass("banner-circle-target")
$(".banner-circle li").eq(n).siblings().removeClass("banner-circle-target")
}
// 下一张
function backImgNext() {
bannerCount++;
if (bannerCount == bannerImg.length) {
bannerCount = 0
}
bannerImgChange(bannerCount)
}
$(".banner-right").click(function () {
backImgNext();
})
$(".banner-left").click(function () {
bannerCount--;
if (bannerCount == -1) {
bannerCount = bannerImg.length - 1
}
bannerImgChange(bannerCount)
})
$(".banner-circle li").each(function (index, item) {
$(item).click(function () {
bannerImgChange(index);
bannerCount = index
})
})
var backImgTime = setInterval(function () {
backImgNext();
}, 3000)
$(".banner-container").mouseover(function () {
clearInterval(backImgTime);
})
$(".banner-container").mouseout(function () {
backImgTime = setInterval(function () {
backImgNext();
}, 3000)
})
// 新碟上架轮播图
var disk = [
{
imgURl: "../img/newdisk1.jpg",
name: "共同的土地",
author: "缺省"
},
{
imgURl: "../img/newdisk1.jpg",
name: "共同的土地",
author: "缺省"
},
{
imgURl: "../img/newdisk1.jpg",
name: "共同的土地",
author: "缺省"
},
{
imgURl: "../img/newdisk1.jpg",
name: "共同的土地",
author: "缺省"
},
{
imgURl: "../img/newdisk1.jpg",
name: "共同的土地",
author: "缺省"
},
{
imgURl: "../img/newdisk2.jpg",
name: "GUTS",
author: "Olivia Rodrigo"
},
{
imgURl: "../img/newdisk1.jpg",
name: "共同的土地",
author: "缺省"
},
{
imgURl: "../img/newdisk1.jpg",
name: "共同的土地",
author: "缺省"
},
{
imgURl: "../img/newdisk1.jpg",
name: "共同的土地",
author: "缺省"
},
{
imgURl: "../img/newdisk1.jpg",
name: "共同的土地",
author: "缺省"
},
{
imgURl: "../img/newdisk1.jpg",
name: "共同的土地",
author: "缺省"
}
]
var diskArr = [];
var diskLength = Math.ceil(disk.length / 5);
for (var i = 0; i < diskLength; i++) {
diskArr.push(disk.slice(5 * i, 5 * (i + 1)));
}
str = '';
for (var i = 0; i < diskLength + 2; i++) {
str += `<li class="new-disk-list">
<ul></ul>
</li>`
}
$(".main-new-disk-list").html(str);
for (var i = 0; i < diskLength + 2; i++) {
$(".new-disk-list").eq(i).css("left", 645 * (i - 1) + "px")
}
// disk生成函数
function diskProduct(n, k) {
str = "";
for (var i = 0; i < diskArr[n].length; i++) {
str += `<li>
<div class="new-disk-img">
<img src="${diskArr[n][i].imgURl}" alt="">
<div class="new-disk-play"></div>
</div>
<p class="new-disk-name">
<span>${diskArr[n][i].name}</span>
</p>
<p class="new-disk-author">
<span>${diskArr[n][i].author}</span>
</p>
</li>`
}
$(".new-disk-list ul").eq(k).html(str)
}
//
diskProduct(diskLength - 1, 0)
diskProduct(0, diskLength + 1)
for (var i = 0; i < diskArr.length; i++) {
diskProduct(i, i + 1)
}
function diskChange(n) {
$(".main-new-disk-list").css("left", -645 * n + "px");
}
//点击切换
var diskCount = 0;
var diskClick = true;
$(".new-disk-next").click(function () {
if (diskClick == true) {
diskClick = false;
diskCount++;
$(".main-new-disk-list").css("transition", "0.3s")
diskChange(diskCount)
setTimeout(function () {
if (diskCount == diskLength) {
$(".main-new-disk-list").css("transition", "0s")
diskCount = 0;
diskChange(diskCount);
}
diskClick = true;
}, 300)
}
})
$(".new-disk-pre").click(function () {
if (diskClick == true) {
diskClick = false
diskCount--;
$(".main-new-disk-list").css("transition", "0.3s")
diskChange(diskCount);
setTimeout(function () {
if (diskCount == -1) {
$(".main-new-disk-list").css("transition", "0s")
diskCount = diskLength - 1;
diskChange(diskCount);
}
diskClick = true
}, 300)
}
})
var billList = []
var billAList=[]
var billDList=[]
for (var i = 0; i < $(".bill-list-song").length; i++) {
billList.push($(".bill-list-song li").slice(10 * i + i, 10 * i + i + 10))
billAList.push($(".bill-list-song li a").slice(10 * i + i, 10 * i + i + 10))
billDList.push($(".bill-list-song-oper").slice(10 * i, 10 * (i+1)))
}
console.log(billList);
$.each(billList, function (index, item) {
console.log(item);
$.each(item, function (indexs, items) {
$(items).mouseover(function () {
console.log(index);
console.log(indexs);
console.log(billAList[index][indexs]);
$(billAList[index][indexs]).css("width", "96px")
$(billDList[index][indexs]).css("display", "flex")
})
$(items).mouseout(function () {
$(billAList[index][indexs]).css("width", "180px")
$(billDList[index][indexs]).css("display", "none")
})
})
})
})