feat: 迁移静态资源文件至static目录
将图片、音频和HTML文件从根目录迁移至static目录下的img和mp3子目录,并删除原文件
846
static/css/index.css
Normal file
@@ -0,0 +1,846 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.content .flexflex {
|
||||
display: flex;
|
||||
}
|
||||
.content .flexcenter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.content .flexjcenter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.content .flexacenter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.content .flex1 {
|
||||
flex: 1;
|
||||
}
|
||||
.content .flexcolumn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.content .mar1200 {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.content .sidebar {
|
||||
position: fixed;
|
||||
top: 175px;
|
||||
right: 100px;
|
||||
z-index: 10;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.content .sidebar .pointer {
|
||||
margin-bottom: 192px;
|
||||
}
|
||||
.content .sidebar .pointer .item {
|
||||
width: 4px;
|
||||
height: 50px;
|
||||
margin-bottom: 2px;
|
||||
background-color: #ffffff;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
.content .sidebar .pointer .item.active {
|
||||
background-color: #f3974b;
|
||||
}
|
||||
.content .sidebar .pointer .item.active::after {
|
||||
content: attr(data-index);
|
||||
position: absolute;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
color: #f3974b;
|
||||
font-size: 14px;
|
||||
top: 0;
|
||||
left: -21px;
|
||||
}
|
||||
.content .sidebar .arrow {
|
||||
width: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.content .sidebar .arrow .item {
|
||||
width: 12px;
|
||||
height: 7px;
|
||||
}
|
||||
.content .sidebar .arrow .item.orange {
|
||||
cursor: pointer;
|
||||
}
|
||||
.content .sidebar .arrow .item.top.orange {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.content .sidebar .arrow .item:not(:last-of-type) {
|
||||
margin-bottom: 34px;
|
||||
}
|
||||
.content .sidebar .arrow .item.bottom.white {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.content .introduce {
|
||||
width: 100%;
|
||||
}
|
||||
.content .introduce::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 830px;
|
||||
background: linear-gradient(180deg, #1e135e 0%, #5241b0 100%);
|
||||
z-index: -1;
|
||||
}
|
||||
.content .introduce .head {
|
||||
height: 116px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.101961);
|
||||
}
|
||||
.content .introduce .head .logo .icon {
|
||||
width: 139px;
|
||||
height: 28px;
|
||||
}
|
||||
.content .introduce .box {
|
||||
justify-content: space-between;
|
||||
height: 685px;
|
||||
}
|
||||
.content .introduce .box .info {
|
||||
padding-top: 60px;
|
||||
}
|
||||
.content .introduce .box .info .brand {
|
||||
margin-bottom: 175px;
|
||||
}
|
||||
.content .introduce .box .info .brand .fill {
|
||||
width: 16px;
|
||||
height: 33px;
|
||||
background-color: #f3974b;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.content .introduce .box .info .brand .text {
|
||||
font-family: "ArialMT", "Arial", sans-serif;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 33px;
|
||||
}
|
||||
.content .introduce .box .info .award {
|
||||
flex-direction: column;
|
||||
}
|
||||
.content .introduce .box .info .award .title {
|
||||
width: 101px;
|
||||
height: 24px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.content .introduce .box .info .award .name {
|
||||
width: min-content;
|
||||
height: 65px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.content .introduce .box .info .award .explain {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
line-height: 24px;
|
||||
}
|
||||
.content .introduce .box .album {
|
||||
width: 800px;
|
||||
height: 448px;
|
||||
margin-top: 60px;
|
||||
margin-right: 50px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.content .introduce .box .album .bj {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.content .introduce .box .album .bj.bj1 {
|
||||
width: 750px;
|
||||
height: 750px;
|
||||
z-index: -2;
|
||||
}
|
||||
.content .introduce .box .album .bj.bj2 {
|
||||
width: 720px;
|
||||
height: 720px;
|
||||
z-index: -1;
|
||||
}
|
||||
.content .introduce .box .album .bj.bj3 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
.content .introduce .box .album .bj.bj4 {
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
z-index: 2;
|
||||
}
|
||||
.content .introduce .box .album .bj.bj5 {
|
||||
width: 236px;
|
||||
height: 340px;
|
||||
z-index: 3;
|
||||
top: 0;
|
||||
left: 318px;
|
||||
transform: translate(0);
|
||||
}
|
||||
.content .introduce .box .album .img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.content .introduce .box .album .play {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
bottom: 30px;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
.content .introduce .trait {
|
||||
background-color: #ffffff;
|
||||
height: 420px;
|
||||
}
|
||||
.content .introduce .trait .item {
|
||||
padding-top: 98px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.content .introduce .trait .item .icon {
|
||||
width: 48px;
|
||||
margin: 0 auto 22px;
|
||||
}
|
||||
.content .introduce .trait .item .title {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
margin-bottom: 42px;
|
||||
}
|
||||
.content .introduce .trait .item .text {
|
||||
width: 266px;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
line-height: 26px;
|
||||
}
|
||||
.content .works {
|
||||
background: linear-gradient(180deg, #1e135e 0%, #5241b0 100%);
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
.content .works .bj1 {
|
||||
width: 1200px;
|
||||
height: 196px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.content .works .name-box {
|
||||
position: absolute;
|
||||
top: 83px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 402px;
|
||||
height: 64px;
|
||||
z-index: 1;
|
||||
}
|
||||
.content .works .name-box .bj {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: -1;
|
||||
}
|
||||
.content .works .name-box .title {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 208px;
|
||||
height: 49px;
|
||||
}
|
||||
.content .works .name-box .line {
|
||||
position: absolute;
|
||||
height: 3px;
|
||||
}
|
||||
.content .works .name-box .line.line-1 {
|
||||
width: 51px;
|
||||
left: 35px;
|
||||
top: 20px;
|
||||
}
|
||||
.content .works .name-box .line.line-2 {
|
||||
width: 41px;
|
||||
left: 45px;
|
||||
top: 29px;
|
||||
}
|
||||
.content .works .name-box .line.line-3 {
|
||||
width: 31px;
|
||||
left: 55px;
|
||||
top: 38px;
|
||||
}
|
||||
.content .works .name-box .line.line-4 {
|
||||
width: 51px;
|
||||
left: 314px;
|
||||
top: 20px;
|
||||
}
|
||||
.content .works .name-box .line.line-5 {
|
||||
width: 41px;
|
||||
left: 314px;
|
||||
top: 29px;
|
||||
}
|
||||
.content .works .name-box .line.line-6 {
|
||||
width: 31px;
|
||||
left: 314px;
|
||||
top: 38px;
|
||||
}
|
||||
.content .works .mv-box {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
background-color: #ffffff;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.content .works .mv-box .item {
|
||||
height: 500px;
|
||||
flex-direction: column;
|
||||
padding-top: 29px;
|
||||
position: relative;
|
||||
}
|
||||
.content .works .mv-box .item:not(:nth-last-child(-n + 3)) {
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
}
|
||||
.content .works .mv-box .item:not(:nth-child(3n)) {
|
||||
border-right: 1px solid #ebebeb;
|
||||
}
|
||||
.content .works .mv-box .item .serial-icon {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
width: 21px;
|
||||
height: 37px;
|
||||
}
|
||||
.content .works .mv-box .item .serial {
|
||||
height: 44px;
|
||||
font-family: "AlibabaPuHuiTiB", "Alibaba PuHuiTi Bold", "Alibaba PuHuiTi Heavy", "Alibaba PuHuiTi", sans-serif;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
color: #000000;
|
||||
font-size: 32px;
|
||||
margin-left: 40px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.content .works .mv-box .item .title {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 20px;
|
||||
color: #000000;
|
||||
margin-left: 40px;
|
||||
margin-right: 40px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.content .works .mv-box .item .text {
|
||||
height: 96px;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
line-height: 24px;
|
||||
margin-bottom: 10px;
|
||||
white-space: pre-line;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.content .works .mv-box .item .time {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
padding: 0 40px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.content .works .mv-box .item .media {
|
||||
position: relative;
|
||||
width: 340px;
|
||||
height: 191px;
|
||||
margin: 0 auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
.content .works .mv-box .item .media .img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.content .works .mv-box .item .media .play {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
cursor: pointer;
|
||||
filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
|
||||
}
|
||||
.content .works .audio-box {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
background-color: #ffffff;
|
||||
border-radius: 20px;
|
||||
margin-top: 60px;
|
||||
}
|
||||
.content .works .audio-box .item {
|
||||
height: 314px;
|
||||
padding-top: 29px;
|
||||
position: relative;
|
||||
}
|
||||
.content .works .audio-box .item:not(:nth-last-child(-n + 2)) {
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
}
|
||||
.content .works .audio-box .item:not(:nth-child(2n)) {
|
||||
border-right: 1px solid #ebebeb;
|
||||
}
|
||||
.content .works .audio-box .item .serial-icon {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
width: 21px;
|
||||
height: 37px;
|
||||
}
|
||||
.content .works .audio-box .item .serial {
|
||||
height: 44px;
|
||||
font-family: "AlibabaPuHuiTiB", "Alibaba PuHuiTi Bold", "Alibaba PuHuiTi Heavy", "Alibaba PuHuiTi", sans-serif;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
color: #000000;
|
||||
font-size: 32px;
|
||||
margin-left: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.content .works .audio-box .item .content .album {
|
||||
width: 234px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-left: 30px;
|
||||
margin-right: 36px;
|
||||
}
|
||||
.content .works .audio-box .item .content .album .img {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
filter: drop-shadow(5px 5px 2.5px rgba(0, 0, 0, 0.35));
|
||||
}
|
||||
.content .works .audio-box .item .content .album .icon {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
.content .works .audio-box .item .content .info {
|
||||
flex-direction: column;
|
||||
}
|
||||
.content .works .audio-box .item .content .info .name {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 20px;
|
||||
color: #000000;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.content .works .audio-box .item .content .info .subtitle {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.content .works .audio-box .item .content .info .time {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.content .works .audio-box .item .content .info .progress-bar {
|
||||
width: 260px;
|
||||
height: 10px;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
.content .works .audio-box .item .content .info .progress-bar .bar {
|
||||
height: 4px;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
.content .works .audio-box .item .content .info .progress-bar .bar.white {
|
||||
width: 0;
|
||||
border-radius: 10px 0 0 10px;
|
||||
background-color: #5241b0;
|
||||
}
|
||||
.content .works .audio-box .item .content .info .progress-bar .bar.white::before {
|
||||
content: "";
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #f3974b;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: -5px;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
}
|
||||
.content .works .audio-box .item .content .info .progress-bar .bar.black {
|
||||
background-color: #000000;
|
||||
border-radius: 0 10px 10px 0;
|
||||
}
|
||||
.content .works .audio-box .item .content .info .operate .speed {
|
||||
width: 16px;
|
||||
height: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.content .works .audio-box .item .content .info .operate .play {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
margin: 0 30px;
|
||||
}
|
||||
.content .works .bj2 {
|
||||
width: 1200px;
|
||||
height: 196px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.content .custom {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
.content .custom .custom-box {
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
padding-top: 106px;
|
||||
z-index: 1;
|
||||
}
|
||||
.content .custom .title {
|
||||
width: 160px;
|
||||
height: 39px;
|
||||
margin: 0 auto 32px;
|
||||
}
|
||||
.content .custom .subtitle {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #555555;
|
||||
text-align: center;
|
||||
margin-bottom: 131px;
|
||||
}
|
||||
.content .custom .list {
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.content .custom .list .item {
|
||||
width: 560px;
|
||||
height: 160px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.10196078);
|
||||
}
|
||||
.content .custom .list .item:not(:nth-last-child(-n + 2)) {
|
||||
margin-bottom: 140px;
|
||||
}
|
||||
.content .custom .list .item:last-of-type {
|
||||
margin-bottom: 130px;
|
||||
}
|
||||
.content .custom .list .item .info {
|
||||
width: 280px;
|
||||
flex-direction: column;
|
||||
padding-top: 18px;
|
||||
padding-left: 20px;
|
||||
margin-right: 20px;
|
||||
height: 100%;
|
||||
}
|
||||
.content .custom .list .item .info .name {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.content .custom .list .item .info .lyric {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.content .custom .list .item .info .progress-bar {
|
||||
width: 260px;
|
||||
height: 10px;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
.content .custom .list .item .info .progress-bar .bar {
|
||||
height: 4px;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
.content .custom .list .item .info .progress-bar .bar::after {
|
||||
position: absolute;
|
||||
}
|
||||
.content .custom .list .item .info .progress-bar .bar.white {
|
||||
width: 0;
|
||||
border-radius: 10px 0 0 10px;
|
||||
}
|
||||
.content .custom .list .item .info .progress-bar .bar.white::after {
|
||||
content: "";
|
||||
width: calc(100% + 5px);
|
||||
height: 100%;
|
||||
background-color: #5241b0;
|
||||
display: block;
|
||||
border-radius: 10px 0 0 10px;
|
||||
}
|
||||
.content .custom .list .item .info .progress-bar .bar.black::after {
|
||||
content: "";
|
||||
width: calc(100% + 5px);
|
||||
height: 100%;
|
||||
background-color: #000000;
|
||||
display: block;
|
||||
border-radius: 0 10px 10px 0;
|
||||
left: -5px;
|
||||
}
|
||||
.content .custom .list .item .info .progress-bar .circle {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #f3974b;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
}
|
||||
.content .custom .list .item .info .operate .speed {
|
||||
width: 16px;
|
||||
height: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.content .custom .list .item .info .operate .play {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
margin: 0 30px;
|
||||
}
|
||||
.content .custom .list .item .info-img {
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
filter: drop-shadow(5px 5px 2.5px rgba(0, 0, 0, 0.35));
|
||||
}
|
||||
.content .custom .bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
height: 384px;
|
||||
z-index: -1;
|
||||
width: 99vw;
|
||||
overflow: hidden;
|
||||
}
|
||||
.content .custom .bottom .bj {
|
||||
width: 640px;
|
||||
height: 384px;
|
||||
}
|
||||
.content .student .student-box {
|
||||
background: linear-gradient(180deg, #1e135e 0%, #5241b0 100%);
|
||||
padding-top: 105px;
|
||||
padding-bottom: 130px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.content .student .student-box .title {
|
||||
width: 160px;
|
||||
height: 41px;
|
||||
margin-bottom: 93px;
|
||||
}
|
||||
.content .student .student-box .list {
|
||||
position: relative;
|
||||
width: 1200px;
|
||||
height: 320px;
|
||||
margin: 0 auto 69px;
|
||||
}
|
||||
.content .student .student-box .list .img {
|
||||
position: absolute;
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
border-radius: 50%;
|
||||
filter: drop-shadow(5px 5px 2.5px rgba(0, 0, 0, 0.35));
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.content .student .student-box .list .img.img6 {
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
.content .student .student-box .list .img.img4 {
|
||||
left: 149px;
|
||||
z-index: 4;
|
||||
}
|
||||
.content .student .student-box .list .img.img2 {
|
||||
left: 299px;
|
||||
z-index: 6;
|
||||
}
|
||||
.content .student .student-box .list .img.img1 {
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
left: 440px;
|
||||
z-index: 7;
|
||||
}
|
||||
.content .student .student-box .list .img.img3 {
|
||||
left: 654px;
|
||||
z-index: 5;
|
||||
}
|
||||
.content .student .student-box .list .img.img5 {
|
||||
left: 804px;
|
||||
z-index: 3;
|
||||
}
|
||||
.content .student .student-box .list .img.img7 {
|
||||
left: 954px;
|
||||
z-index: 1;
|
||||
}
|
||||
.content .student .student-box .name {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 20px;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.content .student .student-box .info {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
margin-bottom: 62px;
|
||||
}
|
||||
.content .student .student-box .info .icon {
|
||||
width: 12px;
|
||||
height: 14px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.content .student .student-box .progress-bar {
|
||||
height: 10px;
|
||||
width: 500px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.content .student .student-box .progress-bar .bar {
|
||||
height: 4px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.content .student .student-box .progress-bar .circle {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #f3974b;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.content .student .student-box .operate .cut {
|
||||
width: 14px;
|
||||
height: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.content .student .student-box .operate .speed {
|
||||
width: 16px;
|
||||
height: 12px;
|
||||
margin: 0 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.content .student .student-box .operate .play {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.content .student .contact {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: -30px;
|
||||
padding-top: 124px;
|
||||
padding-bottom: 113px;
|
||||
background: #fff;
|
||||
}
|
||||
.content .student .contact .title {
|
||||
width: 144px;
|
||||
height: 38px;
|
||||
margin-bottom: 63px;
|
||||
}
|
||||
.content .student .contact .hint {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.content .student .contact .arrows {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-top: 37px;
|
||||
margin-bottom: 53px;
|
||||
}
|
||||
.content .student .contact .WeChat {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
.content .student .contact .logo {
|
||||
width: 82px;
|
||||
height: 16px;
|
||||
}
|
||||
.content .footer {
|
||||
flex-direction: column;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
color: #f2f2f2;
|
||||
font-size: 13px;
|
||||
height: 180px;
|
||||
background: linear-gradient(180deg, #5241b0 0%, #1e135e 100%);
|
||||
}
|
||||
.content .footer .logo {
|
||||
width: 226px;
|
||||
height: 30px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.content .preview {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #4c4c4c;
|
||||
z-index: 1000;
|
||||
}
|
||||
.content .preview .close {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
cursor: pointer;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.content .preview .artplayer-app {
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
}
|
||||
981
static/css/index.less
Normal file
@@ -0,0 +1,981 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.content {
|
||||
.flexflex {
|
||||
display: flex;
|
||||
}
|
||||
.flexcenter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.flexjcenter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.flexacenter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.flex1 {
|
||||
flex: 1;
|
||||
}
|
||||
.flexcolumn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mar1200 {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 175px;
|
||||
right: 100px;
|
||||
z-index: 10;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.pointer {
|
||||
margin-bottom: 192px;
|
||||
.item {
|
||||
width: 4px;
|
||||
height: 50px;
|
||||
margin-bottom: 2px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
&.active {
|
||||
background-color: rgba(243, 151, 75, 1);
|
||||
&::after {
|
||||
content: attr(data-index);
|
||||
position: absolute;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
color: #f3974b;
|
||||
font-size: 14px;
|
||||
top: 0;
|
||||
left: -21px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.arrow {
|
||||
width: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.item {
|
||||
width: 12px;
|
||||
height: 7px;
|
||||
|
||||
&.orange {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.top.orange {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 34px;
|
||||
}
|
||||
|
||||
&.bottom.white {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.introduce {
|
||||
width: 100%;
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 830px;
|
||||
background: linear-gradient(180deg, rgba(30, 19, 94, 1) 0%, rgba(82, 65, 176, 1) 100%);
|
||||
z-index: -1;
|
||||
}
|
||||
.head {
|
||||
height: 116px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.101961);
|
||||
.logo {
|
||||
.icon {
|
||||
width: 139px;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.box {
|
||||
justify-content: space-between;
|
||||
height: 685px;
|
||||
.info {
|
||||
padding-top: 60px;
|
||||
.brand {
|
||||
margin-bottom: 175px;
|
||||
|
||||
.fill {
|
||||
width: 16px;
|
||||
height: 33px;
|
||||
background-color: rgba(243, 151, 75, 1);
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-family: "ArialMT", "Arial", sans-serif;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
.award {
|
||||
flex-direction: column;
|
||||
.title {
|
||||
width: 101px;
|
||||
height: 24px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: min-content;
|
||||
height: 65px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.explain {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.album {
|
||||
width: 800px;
|
||||
height: 448px;
|
||||
margin-top: 60px;
|
||||
margin-right: 50px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
.bj {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
&.bj1 {
|
||||
width: 750px;
|
||||
height: 750px;
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
&.bj2 {
|
||||
width: 720px;
|
||||
height: 720px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&.bj3 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&.bj4 {
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&.bj5 {
|
||||
width: 236px;
|
||||
height: 340px;
|
||||
z-index: 3;
|
||||
top: 0;
|
||||
left: 318px;
|
||||
transform: translate(0);
|
||||
}
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.play {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
bottom: 30px;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.trait {
|
||||
background-color: #ffffff;
|
||||
height: 420px;
|
||||
|
||||
.item {
|
||||
padding-top: 98px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.icon {
|
||||
width: 48px;
|
||||
margin: 0 auto 22px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
text-align: center;
|
||||
margin-bottom: 42px;
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 266px;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
line-height: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.works {
|
||||
background: linear-gradient(180deg, rgba(30, 19, 94, 1) 0%, rgba(82, 65, 176, 1) 100%);
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
.bj1 {
|
||||
width: 1200px;
|
||||
height: 196px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.name-box {
|
||||
position: absolute;
|
||||
top: 83px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 402px;
|
||||
height: 64px;
|
||||
z-index: 1;
|
||||
|
||||
.bj {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 208px;
|
||||
height: 49px;
|
||||
}
|
||||
|
||||
.line {
|
||||
position: absolute;
|
||||
height: 3px;
|
||||
|
||||
&.line-1 {
|
||||
width: 51px;
|
||||
left: 35px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
&.line-2 {
|
||||
width: 41px;
|
||||
left: 45px;
|
||||
top: 29px;
|
||||
}
|
||||
|
||||
&.line-3 {
|
||||
width: 31px;
|
||||
left: 55px;
|
||||
top: 38px;
|
||||
}
|
||||
|
||||
&.line-4 {
|
||||
width: 51px;
|
||||
left: 314px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
&.line-5 {
|
||||
width: 41px;
|
||||
left: 314px;
|
||||
top: 29px;
|
||||
}
|
||||
|
||||
&.line-6 {
|
||||
width: 31px;
|
||||
left: 314px;
|
||||
top: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mv-box {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
background-color: #ffffff;
|
||||
border-radius: 20px;
|
||||
|
||||
.item {
|
||||
height: 500px;
|
||||
flex-direction: column;
|
||||
padding-top: 29px;
|
||||
position: relative;
|
||||
|
||||
&:not(:nth-last-child(-n + 3)) {
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
}
|
||||
|
||||
&:not(:nth-child(3n)) {
|
||||
border-right: 1px solid #ebebeb;
|
||||
}
|
||||
|
||||
.serial-icon {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
width: 21px;
|
||||
height: 37px;
|
||||
}
|
||||
|
||||
.serial {
|
||||
height: 44px;
|
||||
font-family: "AlibabaPuHuiTiB", "Alibaba PuHuiTi Bold", "Alibaba PuHuiTi Heavy", "Alibaba PuHuiTi", sans-serif;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
color: #000000;
|
||||
font-size: 32px;
|
||||
margin-left: 40px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 20px;
|
||||
color: #000000;
|
||||
margin-left: 40px;
|
||||
margin-right: 40px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.text {
|
||||
height: 96px;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
line-height: 24px;
|
||||
margin-bottom: 10px;
|
||||
white-space: pre-line;
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
padding: 0 40px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.media {
|
||||
position: relative;
|
||||
width: 340px;
|
||||
height: 191px;
|
||||
margin: 0 auto;
|
||||
cursor: pointer;
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.play {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
cursor: pointer;
|
||||
filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.audio-box {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
background-color: #ffffff;
|
||||
border-radius: 20px;
|
||||
margin-top: 60px;
|
||||
.item {
|
||||
height: 314px;
|
||||
padding-top: 29px;
|
||||
position: relative;
|
||||
|
||||
&:not(:nth-last-child(-n + 2)) {
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
}
|
||||
|
||||
&:not(:nth-child(2n)) {
|
||||
border-right: 1px solid #ebebeb;
|
||||
}
|
||||
|
||||
.serial-icon {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
width: 21px;
|
||||
height: 37px;
|
||||
}
|
||||
|
||||
.serial {
|
||||
height: 44px;
|
||||
font-family: "AlibabaPuHuiTiB", "Alibaba PuHuiTi Bold", "Alibaba PuHuiTi Heavy", "Alibaba PuHuiTi", sans-serif;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
color: #000000;
|
||||
font-size: 32px;
|
||||
margin-left: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.content {
|
||||
.album {
|
||||
width: 234px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-left: 30px;
|
||||
margin-right: 36px;
|
||||
.img {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
filter: drop-shadow(5px 5px 2.5px rgba(0, 0, 0, 0.35));
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
flex-direction: column;
|
||||
.name {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 20px;
|
||||
color: #000000;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 260px;
|
||||
height: 10px;
|
||||
margin-bottom: 17px;
|
||||
|
||||
.bar {
|
||||
height: 4px;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
&.white {
|
||||
width: 0;
|
||||
border-radius: 10px 0 0 10px;
|
||||
background-color: #5241b0;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #f3974b;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: -5px;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.black {
|
||||
background-color: rgba(0, 0, 0, 1);
|
||||
border-radius: 0 10px 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.operate {
|
||||
.speed {
|
||||
width: 16px;
|
||||
height: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.play {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
margin: 0 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bj2 {
|
||||
width: 1200px;
|
||||
height: 196px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.custom {
|
||||
background: rgba(249, 249, 249, 1);
|
||||
|
||||
.custom-box {
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
padding-top: 106px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 160px;
|
||||
height: 39px;
|
||||
margin: 0 auto 32px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #555555;
|
||||
text-align: center;
|
||||
margin-bottom: 131px;
|
||||
}
|
||||
|
||||
.list {
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.item {
|
||||
width: 560px;
|
||||
height: 160px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.101960784313725);
|
||||
|
||||
&:not(:nth-last-child(-n + 2)) {
|
||||
margin-bottom: 140px;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 130px;
|
||||
}
|
||||
|
||||
.info {
|
||||
width: 280px;
|
||||
flex-direction: column;
|
||||
padding-top: 18px;
|
||||
padding-left: 20px;
|
||||
margin-right: 20px;
|
||||
height: 100%;
|
||||
.name {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.lyric {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 260px;
|
||||
height: 10px;
|
||||
margin-bottom: 17px;
|
||||
|
||||
.bar {
|
||||
height: 4px;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
}
|
||||
&.white {
|
||||
width: 0;
|
||||
border-radius: 10px 0 0 10px;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
width: calc(100% + 5px);
|
||||
height: 100%;
|
||||
background-color: #5241b0;
|
||||
display: block;
|
||||
border-radius: 10px 0 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&.black {
|
||||
&::after {
|
||||
content: "";
|
||||
width: calc(100% + 5px);
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 1);
|
||||
display: block;
|
||||
border-radius: 0 10px 10px 0;
|
||||
left: -5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.circle {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #f3974b;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.operate {
|
||||
.speed {
|
||||
width: 16px;
|
||||
height: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.play {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
margin: 0 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-img {
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
filter: drop-shadow(5px 5px 2.5px rgba(0, 0, 0, 0.35));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
height: 384px;
|
||||
z-index: -1;
|
||||
width: 99vw;
|
||||
overflow: hidden;
|
||||
|
||||
.bj {
|
||||
width: 640px;
|
||||
height: 384px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.student {
|
||||
.student-box {
|
||||
background: linear-gradient(180deg, rgba(30, 19, 94, 1) 0%, rgba(82, 65, 176, 1) 100%);
|
||||
padding-top: 105px;
|
||||
padding-bottom: 130px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.title {
|
||||
width: 160px;
|
||||
height: 41px;
|
||||
margin-bottom: 93px;
|
||||
}
|
||||
|
||||
.list {
|
||||
position: relative;
|
||||
width: 1200px;
|
||||
height: 320px;
|
||||
margin: 0 auto 69px;
|
||||
.img {
|
||||
position: absolute;
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
border-radius: 50%;
|
||||
filter: drop-shadow(5px 5px 2.5px rgba(0, 0, 0, 0.35));
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease-in-out;
|
||||
|
||||
&.img6 {
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&.img4 {
|
||||
left: 149px;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
&.img2 {
|
||||
left: 299px;
|
||||
z-index: 6;
|
||||
}
|
||||
|
||||
&.img1 {
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
left: 440px;
|
||||
z-index: 7;
|
||||
}
|
||||
|
||||
&.img3 {
|
||||
left: 654px;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
&.img5 {
|
||||
left: 804px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
&.img7 {
|
||||
left: 954px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 20px;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.info {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
margin-bottom: 62px;
|
||||
|
||||
.icon {
|
||||
width: 12px;
|
||||
height: 14px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 10px;
|
||||
width: 500px;
|
||||
margin-bottom: 32px;
|
||||
|
||||
.bar {
|
||||
// width: 500px;
|
||||
height: 4px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.circle {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #f3974b;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.operate {
|
||||
.cut {
|
||||
width: 14px;
|
||||
height: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.speed {
|
||||
width: 16px;
|
||||
height: 12px;
|
||||
margin: 0 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.play {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contact {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: -30px;
|
||||
padding-top: 124px;
|
||||
padding-bottom: 113px;
|
||||
background: #fff;
|
||||
|
||||
.title {
|
||||
width: 144px;
|
||||
height: 38px;
|
||||
margin-bottom: 63px;
|
||||
}
|
||||
|
||||
.hint {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
color: rgb(51, 51, 51);
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.arrows {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-top: 37px;
|
||||
margin-bottom: 53px;
|
||||
}
|
||||
|
||||
.WeChat {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 82px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
flex-direction: column;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
color: #f2f2f2;
|
||||
font-size: 13px;
|
||||
height: 180px;
|
||||
background: linear-gradient(180deg, rgba(82, 65, 176, 1) 0%, rgba(30, 19, 94, 1) 100%);
|
||||
|
||||
.logo {
|
||||
width: 226px;
|
||||
height: 30px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.preview {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #4c4c4c;
|
||||
z-index: 1000;
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
cursor: pointer;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.artplayer-app {
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
static/img/WeChat-img.jpg
Normal file
|
After Width: | Height: | Size: 182 KiB |
BIN
static/img/ai-title.png
Normal file
|
After Width: | Height: | Size: 26 KiB |
22
static/img/album-bj1.svg
Normal file
@@ -0,0 +1,22 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="750px" height="750px" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<radialGradient cx="1110" cy="399" r="360" gradientTransform="matrix(-1 0 0 -1 2220 798 )" gradientUnits="userSpaceOnUse" id="RadialGradient67">
|
||||
<stop id="Stop68" stop-color="#fef5ed" offset="0" />
|
||||
<stop id="Stop69" stop-color="#f3974b" offset="1" />
|
||||
</radialGradient>
|
||||
<filter x="735px" y="24px" width="750px" height="750px" filterUnits="userSpaceOnUse" id="filter70">
|
||||
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetInner" />
|
||||
<feGaussianBlur stdDeviation="7.5" in="shadowOffsetInner" result="shadowGaussian" />
|
||||
<feComposite in2="shadowGaussian" operator="atop" in="SourceAlpha" result="shadowComposite" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.356862745098039 0 0 0 0 0.207843137254902 0 0 0 0 0.0705882352941176 0 0 0 1 0 " in="shadowComposite" />
|
||||
</filter>
|
||||
<g id="widget71">
|
||||
<path d="M 1110 39 C 1311.6 39 1470 197.4 1470 399 C 1470 600.6 1311.6 759 1110 759 C 908.4 759 750 600.6 750 399 C 750 197.4 908.4 39 1110 39 Z " fill-rule="nonzero" fill="url(#RadialGradient67)" stroke="none" />
|
||||
</g>
|
||||
</defs>
|
||||
<g transform="matrix(1 0 0 1 -735 -24 )">
|
||||
<use xlink:href="#widget71" filter="url(#filter70)" />
|
||||
<use xlink:href="#widget71" />
|
||||
</g>
|
||||
</svg>
|
||||
11
static/img/album-bj2.svg
Normal file
6
static/img/album-bj3.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="800px" height="448px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -710 -175 )">
|
||||
<path d="M 784 448 L 16 448 C 7.04000000000002 448 0 440.96 0 432 L 0 16 C 0 7.03999999999996 7.04000000000002 0 16 0 L 784 0 C 792.96 0 800 7.03999999999996 800 16 L 800 432 C 800 440.96 792.96 448 784 448 Z M 280 224 C 280 291.2 332.8 344 400 344 C 467.2 344 520 291.2 520 224 C 520 156.8 467.2 104 400 104 C 332.8 104 280 156.8 280 224 Z " fill-rule="nonzero" fill="#5241b0" stroke="none" fill-opacity="0.596078431372549" transform="matrix(1 0 0 1 710 175 )" />
|
||||
</g>
|
||||
</svg>
|
||||
BIN
static/img/album-bj4.png
Normal file
|
After Width: | Height: | Size: 46 KiB |
18
static/img/album-bj5.svg
Normal file
11
static/img/album-img.svg
Normal file
6
static/img/arrow-orange.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="12px" height="7px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -1548 -616 )">
|
||||
<path d="M 11.8797595190381 0.721649484536082 C 11.9599198396794 0.801832760595645 12 0.894043528064146 12 0.998281786941581 C 12 1.10252004581901 11.9599198396794 1.19473081328751 11.8797595190381 1.27491408934708 L 6.27655310621242 6.87972508591065 C 6.19639278557114 6.95990836197022 6.10420841683367 7 6 7 C 5.89579158316633 7 5.80360721442886 6.95990836197022 5.72344689378757 6.87972508591065 L 0.120240480961924 1.27491408934708 C 0.0400801603206414 1.19473081328751 0 1.10252004581901 0 0.998281786941581 C 0 0.894043528064146 0.0400801603206414 0.801832760595645 0.120240480961924 0.721649484536082 L 0.721442885771543 0.120274914089347 C 0.801603206412826 0.0400916380297814 0.893787575150301 0 0.997995991983968 0 C 1.10220440881764 0 1.19438877755511 0.0400916380297814 1.27454909819639 0.120274914089347 L 6 4.84707903780069 L 10.7254509018036 0.120274914089347 C 10.8056112224449 0.0400916380297814 10.8977955911824 0 11.002004008016 0 C 11.1062124248497 0 11.1983967935872 0.0400916380297814 11.2785571142285 0.120274914089347 L 11.8797595190381 0.721649484536082 Z " fill-rule="nonzero" fill="#f3974b" stroke="none" transform="matrix(1 0 0 1 1548 616 )" />
|
||||
</g>
|
||||
</svg>
|
||||
6
static/img/arrow-white.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="12px" height="7px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -1548 -575 )">
|
||||
<path d="M 11.8797595190381 5.72508591065292 C 11.9599198396794 5.80526918671248 12 5.89747995418098 12 6.00171821305842 C 12 6.10595647193585 11.9599198396794 6.19816723940435 11.8797595190381 6.27835051546392 L 11.2785571142285 6.87972508591065 C 11.1983967935872 6.95990836197022 11.1062124248497 7 11.002004008016 7 C 10.8977955911824 7 10.8056112224449 6.95990836197022 10.7254509018036 6.87972508591065 L 6 2.15292096219931 L 1.27454909819639 6.87972508591065 C 1.19438877755511 6.95990836197022 1.10220440881764 7 0.997995991983968 7 C 0.893787575150301 7 0.801603206412826 6.95990836197022 0.721442885771543 6.87972508591065 L 0.120240480961924 6.27835051546392 C 0.0400801603206414 6.19816723940435 0 6.10595647193585 0 6.00171821305842 C 0 5.89747995418098 0.0400801603206414 5.80526918671248 0.120240480961924 5.72508591065292 L 5.72344689378757 0.120274914089347 C 5.80360721442886 0.0400916380297814 5.89579158316633 0 6 0 C 6.10420841683367 0 6.19639278557114 0.0400916380297814 6.27655310621242 0.120274914089347 L 11.8797595190381 5.72508591065292 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 1548 575 )" />
|
||||
</g>
|
||||
</svg>
|
||||
6
static/img/arrows-yellow.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="14px" height="14px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -953 -5793 )">
|
||||
<path d="M 7 10.8463541666667 C 7.15798611111111 10.8463541666667 7.29470486111111 10.7886284722222 7.41015625 10.6731770833333 L 11.5481770833333 6.53515625 C 11.6636284722222 6.41970486111111 11.7213541666667 6.28298611111111 11.7213541666667 6.125 C 11.7213541666667 5.96701388888889 11.6636284722222 5.83029513888889 11.5481770833333 5.71484375 L 10.6184895833333 4.78515625 C 10.5030381944444 4.66970486111111 10.3663194444444 4.61197916666667 10.2083333333333 4.61197916666667 C 10.0503472222222 4.61197916666667 9.91362847222222 4.66970486111111 9.79817708333333 4.78515625 L 7 7.58333333333333 L 4.20182291666667 4.78515625 C 4.08637152777778 4.66970486111111 3.94965277777778 4.61197916666667 3.79166666666667 4.61197916666667 C 3.63368055555556 4.61197916666667 3.49696180555556 4.66970486111111 3.38151041666667 4.78515625 L 2.45182291666667 5.71484375 C 2.33637152777778 5.83029513888889 2.27864583333333 5.96701388888889 2.27864583333333 6.125 C 2.27864583333333 6.28298611111111 2.33637152777778 6.41970486111111 2.45182291666667 6.53515625 L 6.58984375 10.6731770833333 C 6.70529513888889 10.7886284722222 6.84201388888889 10.8463541666667 7 10.8463541666667 Z M 13.0611979166667 3.486328125 C 13.6870659722222 4.55881076388889 14 5.73003472222222 14 7 C 14 8.26996527777778 13.6870659722222 9.44118923611111 13.0611979166667 10.513671875 C 12.4353298611111 11.5861545138889 11.5861545138889 12.4353298611111 10.513671875 13.0611979166667 C 9.44118923611111 13.6870659722222 8.26996527777778 14 7 14 C 5.73003472222222 14 4.55881076388889 13.6870659722222 3.486328125 13.0611979166667 C 2.41384548611111 12.4353298611111 1.56467013888889 11.5861545138889 0.938802083333333 10.513671875 C 0.312934027777778 9.44118923611111 0 8.26996527777778 0 7 C 0 5.73003472222222 0.312934027777778 4.55881076388889 0.938802083333333 3.486328125 C 1.56467013888889 2.41384548611111 2.41384548611111 1.56467013888889 3.486328125 0.938802083333333 C 4.55881076388889 0.312934027777777 5.73003472222222 0 7 0 C 8.26996527777778 0 9.44118923611111 0.312934027777777 10.513671875 0.938802083333333 C 11.5861545138889 1.56467013888889 12.4353298611111 2.41384548611111 13.0611979166667 3.486328125 Z " fill-rule="nonzero" fill="#f3974b" stroke="none" transform="matrix(1 0 0 1 953 5793 )" />
|
||||
</g>
|
||||
</svg>
|
||||
BIN
static/img/audio-img.png
Normal file
|
After Width: | Height: | Size: 103 KiB |
18
static/img/audio-img.svg
Normal file
BIN
static/img/award-winning-works.png
Normal file
|
After Width: | Height: | Size: 11 KiB |
11
static/img/close.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<filter x="-50.00%" y="-50.00%" width="200.00%" height="200.00%" filterUnits="objectBoundingBox" id="filter248">
|
||||
<feColorMatrix type="matrix" values="1 0 0 0 1 0 1 0 0 1 0 0 1 0 1 0 0 0 1 0 " in="SourceGraphic" />
|
||||
</filter>
|
||||
</defs>
|
||||
<g transform="matrix(1 0 0 1 -1683 -6028 )">
|
||||
<image preserveAspectRatio="none" style="overflow:visible" width="20" height="20" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAgKADAAQAAAABAAAAgAAAAABIjgR3AAAGo0lEQVR4Ae2dTW8bVRSGEydOihDEUSW2ICQ2wBJERSLRDaJlwc8obBI5ShQkVl4SN5aVOEIgfgb9QioqCxcWXSLY0ILKjkWkuBVK4yQO5ygzMHbjyXzcO3PPue9Iluf73vu8z1zPxJnxxAQGEAABEAABEAABEAABEAABEAABEAABEAABEAABEAABEAABEAABEAABEAABEAABEAABEAABPQQmbTVlZWXl9cFg8GalUnk2MzPzYGNjo2erLI37rdfrtZOTk3epbbPE8Ld2u/2HjXYaF2B5efkNqvC3VNkPIhXuT05Ofj03N/d5o9F4FpmP0RECxOdCr9e7TuFfo0Uz4WKavkevT7e3t38P55l4NypAEP7PVLGLYyrXpd7g42az+XTMcq9nr6+vv9Tv928RhMUxIHbpQLpEvcHDMctTz66k3iJmg+DIHxc+b7lIDbzNDY3ZjZeLgvBvM6MYABepF/gmZnnqRcZ6AP7Mp8o9SliD+9QTXEVPcEorEv5CEn5TU1OvtVqtx0nWPW8dYz0An/CdV1hk+QJ6glMaacPnrQ4PD9+KsMw1akwAPttPWRPvJcgSPjPOwHpsNMYE4Es9KqU/tqSzF3grQdbwCeNBwPpsoinnGhOAr/P5Ui9l+by6dxLkCH+CzrO+MnnuZEwATpKv8+mty+MpB28kyBM+Me3Oz89/kZJt7OrGrgLCUtbW1l48Ojq6QdOXw3lJ36kH+Ym2vdrpdJ4k3UbSegGbm1Tn6B/JEjWB2VSr1Ssmj34u2LgAvFNIwBSGBxfD5xpaEYB3DAmYwungavhcO2sC8M4hwX8MnOr2OZtwsCoAF+KzBC4f+YUJ4KsEEsLnbKz3AKFpPvUEUsIvVAAuzAcJJIVfuADaJZAWfikCaJVAYvilCaBNAqnhlyqAFgkkh1+6ANIlkB6+EwJIlUBD+M4IIE0CLeE7JYAUCTSF75wArkugLXwnBXBVAo3hOyuAaxJoDd9pAVyRQHP4zgtQtgTawxchQFkS+BC+GAGKlsCX8EUJUJQEPoUvTgDbEvgWvkgBbEngY/hiBTAtga/hixbAlASzs7PHdDuas/+3z+20ORT2X8G2GpHzZsv7Qb0SPZljpA0qnnIiXgAOJejCM92QOhJqoklbN2omKtzwSioEYCZFSaApfOamRoAiJNAWvjoBbEqgMXyVAtiQQGv4agUwKYHm8FULYEIC7eEzI6MPieIdOjjkOtHd39/Ptb2DPIaqpLZxef68GyXEvYDmB1epFMBU+KEImiVQJ4Dp8LVLoEoAW+FrlkCNALbD1yqBCgGKCl+jBOIvA/nrYDpL/57CSf34VdqGvw4OvxIO8z33nR7Y/D79aMMtLvvclR1fQbQAfOTTD098R4xTf5/PZ/b8qyXT09Mf0fY/ZshpgX644c7S0tLLGbZ1ZhOxHwF5uv3Rv/AF+8r0/wTSLxFFCmAy/PBQ9FUCcQLYCN9nCUQJYDN8XyUQI0AR4fsogQgBigzfNwmcF6CM8H2SwGkBygzfFwmcFcCF8H2QwEkBXApfuwTOCeBi+JolcEoAl8PXKoEzAkgIX6METgggKXxtEpQugMTwNUlQqgCSw9ciQWkCaAhfgwSlCKApfOkSFC6AxvAlS1CoAJrDlypBYQL4EL5ECQoRwKfwpUlgXQAfw5ckgVUBfA5figTWBED4oQL5HmFn+74DKwIg/P/DD8cCJs7dfGJcAIQfRv78u4sSGL03sNFoXKAbNe9Q0zPdqFmtVq80m82nz6PTMWdzc/Mfuh/xE2pN1htSbzJjkzSMCtDr9a5T5RYzVFDFg5eTtJsF55tSad3UEjDbvb29L5OUk3QdYx8B9Xq9RoX+Ta+ZpIUH63kTfpRLjqecHxwfH7/S6XSeRPeXddxYD0Bnq+9QJRB+wiRy9ASz9GwCZm1kMCbAYDBI+9nk5ZEfTS2rBBlYR4sdGjcmAHVLvw7tOX7C+/BDPFkkoJPlNKzDos58NybAzs7On/TolHtnljI8E+EP85hIKcHdVqv1eGQXmSeNCcA1qFQq1+htN6Y2XT4D5gbHrOPloogE3RgAu9TTfhazPPUiowK02+2HdDJ4iV4/jNTkgHqHdq1W+xDhj5CJTDIbZkSztuh1EFnEo3cp/Pfo7P/RyPxck8YuA0drsbq6+ipV+G2av09H/QMEP0oofpofPhWc7b9AB88vW1tbf8VvgaUgAAIgAAIgAAIgAAIgAAIgAAIgAAIgAAIgAAIgAAIgAAIgAAIgAAIgAAIgAAIgAAIgAAIg8C9yNG0zv/zA5QAAAABJRU5ErkJggg==" x="1683px" y="6028px" filter="url(#filter248)" />
|
||||
</g>
|
||||
</svg>
|
||||
BIN
static/img/contact-title.png
Normal file
|
After Width: | Height: | Size: 8.4 KiB |
11
static/img/custom-bj-1.svg
Normal file
11
static/img/custom-bj-2.svg
Normal file
BIN
static/img/custom-img.png
Normal file
|
After Width: | Height: | Size: 50 KiB |
BIN
static/img/custom-title.png
Normal file
|
After Width: | Height: | Size: 2.9 KiB |
6
static/img/cut-left.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="14px" height="12px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -838 -5327 )">
|
||||
<path d="M 8.1015625 5.64935064935065 L 13.6484375 0.116883116883117 C 13.7473958333333 0.0181818181818176 13.8307291666667 -0.0155844155844163 13.8984375 0.0155844155844149 C 13.9661458333333 0.0467532467532461 14 0.129870129870129 14 0.264935064935064 L 14 11.7350649350649 C 14 11.8701298701299 13.9661458333333 11.9532467532468 13.8984375 11.9844155844156 C 13.8307291666667 12.0155844155844 13.7473958333333 11.9818181818182 13.6484375 11.8831168831169 L 8.1015625 6.35064935064935 C 8.0546875 6.3038961038961 8.02083333333333 6.25454545454545 8 6.2025974025974 L 8 11.7350649350649 C 8 11.8701298701299 7.96614583333333 11.9532467532468 7.8984375 11.9844155844156 C 7.83072916666667 12.0155844155844 7.74739583333333 11.9818181818182 7.6484375 11.8831168831169 L 2.1015625 6.35064935064935 C 2.0546875 6.3038961038961 2.02083333333333 6.25454545454545 2 6.2025974025974 L 2 11.4857142857143 C 2 11.6207792207792 1.95052083333333 11.7376623376623 1.8515625 11.8363636363636 C 1.75260416666667 11.9350649350649 1.63541666666667 11.9844155844156 1.5 11.9844155844156 L 0.5 11.9844155844156 C 0.364583333333333 11.9844155844156 0.247395833333333 11.9350649350649 0.1484375 11.8363636363636 C 0.0494791666666667 11.7376623376623 0 11.6207792207792 0 11.4857142857143 L 0 0.514285714285714 C 0 0.379220779220778 0.0494791666666667 0.262337662337662 0.1484375 0.163636363636364 C 0.247395833333333 0.0649350649350637 0.364583333333333 0.0155844155844149 0.5 0.0155844155844149 L 1.5 0.0155844155844149 C 1.63541666666667 0.0155844155844149 1.75260416666667 0.0649350649350637 1.8515625 0.163636363636364 C 1.95052083333333 0.262337662337662 2 0.379220779220778 2 0.514285714285714 L 2 5.7974025974026 C 2.02083333333333 5.74545454545455 2.0546875 5.6961038961039 2.1015625 5.64935064935065 L 7.6484375 0.116883116883117 C 7.74739583333333 0.0181818181818176 7.83072916666667 -0.0155844155844163 7.8984375 0.0155844155844149 C 7.96614583333333 0.0467532467532461 8 0.129870129870129 8 0.264935064935064 L 8 5.7974025974026 C 8.02083333333333 5.74545454545455 8.0546875 5.6961038961039 8.1015625 5.64935064935065 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 838 5327 )" />
|
||||
</g>
|
||||
</svg>
|
||||
6
static/img/cut-right.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="14px" height="12px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -1068 -5327 )">
|
||||
<path d="M 5.8984375 6.35064935064935 L 0.3515625 11.8831168831169 C 0.252604166666667 11.9818181818182 0.169270833333333 12.0155844155844 0.1015625 11.9844155844156 C 0.0338541666666667 11.9532467532468 0 11.8701298701299 0 11.7350649350649 L 0 0.264935064935064 C 0 0.129870129870129 0.0338541666666667 0.0467532467532461 0.1015625 0.0155844155844149 C 0.169270833333333 -0.0155844155844163 0.252604166666667 0.0181818181818176 0.3515625 0.116883116883117 L 5.8984375 5.64935064935065 C 5.9453125 5.6961038961039 5.97916666666667 5.74545454545455 6 5.7974025974026 L 6 0.264935064935064 C 6 0.129870129870129 6.03385416666667 0.0467532467532461 6.1015625 0.0155844155844149 C 6.16927083333333 -0.0155844155844163 6.25260416666667 0.0181818181818176 6.3515625 0.116883116883117 L 11.8984375 5.64935064935065 C 11.9453125 5.6961038961039 11.9791666666667 5.74545454545455 12 5.7974025974026 L 12 0.514285714285714 C 12 0.379220779220778 12.0494791666667 0.262337662337662 12.1484375 0.163636363636364 C 12.2473958333333 0.0649350649350637 12.3645833333333 0.0155844155844149 12.5 0.0155844155844149 L 13.5 0.0155844155844149 C 13.6354166666667 0.0155844155844149 13.7526041666667 0.0649350649350637 13.8515625 0.163636363636364 C 13.9505208333333 0.262337662337662 14 0.379220779220778 14 0.514285714285714 L 14 11.4857142857143 C 14 11.6207792207792 13.9505208333333 11.7376623376623 13.8515625 11.8363636363636 C 13.7526041666667 11.9350649350649 13.6354166666667 11.9844155844156 13.5 11.9844155844156 L 12.5 11.9844155844156 C 12.3645833333333 11.9844155844156 12.2473958333333 11.9350649350649 12.1484375 11.8363636363636 C 12.0494791666667 11.7376623376623 12 11.6207792207792 12 11.4857142857143 L 12 6.2025974025974 C 11.9791666666667 6.25454545454545 11.9453125 6.3038961038961 11.8984375 6.35064935064935 L 6.3515625 11.8831168831169 C 6.25260416666667 11.9818181818182 6.16927083333333 12.0155844155844 6.1015625 11.9844155844156 C 6.03385416666667 11.9532467532468 6 11.8701298701299 6 11.7350649350649 L 6 6.2025974025974 C 5.97916666666667 6.25454545454545 5.9453125 6.3038961038961 5.8984375 6.35064935064935 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 1068 5327 )" />
|
||||
</g>
|
||||
</svg>
|
||||
BIN
static/img/gushi.png
Normal file
|
After Width: | Height: | Size: 4.8 KiB |
BIN
static/img/headset-icon.png
Normal file
|
After Width: | Height: | Size: 45 KiB |
BIN
static/img/logo-black.png
Normal file
|
After Width: | Height: | Size: 49 KiB |
BIN
static/img/logo.png
Normal file
|
After Width: | Height: | Size: 86 KiB |
11
static/img/mv-1.svg
Normal file
BIN
static/img/mv-icon.png
Normal file
|
After Width: | Height: | Size: 28 KiB |
6
static/img/pause-black-icon.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -778 -2726 )">
|
||||
<path d="M 10.859375 16.859375 C 10.953125 16.765625 11 16.6458333333333 11 16.5 L 11 7.5 C 11 7.35416666666667 10.953125 7.234375 10.859375 7.140625 C 10.765625 7.046875 10.6458333333333 7 10.5 7 L 6.5 7 C 6.35416666666667 7 6.234375 7.046875 6.140625 7.140625 C 6.046875 7.234375 6 7.35416666666667 6 7.5 L 6 16.5 C 6 16.6458333333333 6.046875 16.765625 6.140625 16.859375 C 6.234375 16.953125 6.35416666666667 17 6.5 17 L 10.5 17 C 10.6458333333333 17 10.765625 16.953125 10.859375 16.859375 Z M 17.859375 16.859375 C 17.953125 16.765625 18 16.6458333333333 18 16.5 L 18 7.5 C 18 7.35416666666667 17.953125 7.234375 17.859375 7.140625 C 17.765625 7.046875 17.6458333333333 7 17.5 7 L 13.5 7 C 13.3541666666667 7 13.234375 7.046875 13.140625 7.140625 C 13.046875 7.234375 13 7.35416666666667 13 7.5 L 13 16.5 C 13 16.6458333333333 13.046875 16.765625 13.140625 16.859375 C 13.234375 16.953125 13.3541666666667 17 13.5 17 L 17.5 17 C 17.6458333333333 17 17.765625 16.953125 17.859375 16.859375 Z M 22.390625 5.9765625 C 23.4635416666667 7.81510416666666 24 9.82291666666666 24 12 C 24 14.1770833333333 23.4635416666667 16.1848958333333 22.390625 18.0234375 C 21.3177083333333 19.8619791666667 19.8619791666667 21.3177083333333 18.0234375 22.390625 C 16.1848958333333 23.4635416666667 14.1770833333333 24 12 24 C 9.82291666666667 24 7.81510416666667 23.4635416666667 5.9765625 22.390625 C 4.13802083333333 21.3177083333333 2.68229166666667 19.8619791666667 1.609375 18.0234375 C 0.536458333333333 16.1848958333333 0 14.1770833333333 0 12 C 0 9.82291666666666 0.536458333333333 7.81510416666666 1.609375 5.9765625 C 2.68229166666667 4.13802083333333 4.13802083333333 2.68229166666666 5.9765625 1.609375 C 7.81510416666667 0.536458333333331 9.82291666666667 0 12 0 C 14.1770833333333 0 16.1848958333333 0.536458333333331 18.0234375 1.609375 C 19.8619791666667 2.68229166666666 21.3177083333333 4.13802083333333 22.390625 5.9765625 Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 778 2726 )" />
|
||||
</g>
|
||||
</svg>
|
||||
6
static/img/pause-white-icon.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="26px" height="26px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -740 -655 )">
|
||||
<path d="M 11.7643229166667 18.2643229166667 C 11.8658854166667 18.1627604166667 11.9166666666667 18.0329861111111 11.9166666666667 17.875 L 11.9166666666667 8.125 C 11.9166666666667 7.96701388888889 11.8658854166667 7.83723958333333 11.7643229166667 7.73567708333333 C 11.6627604166667 7.63411458333333 11.5329861111111 7.58333333333333 11.375 7.58333333333333 L 7.04166666666667 7.58333333333333 C 6.88368055555556 7.58333333333333 6.75390625 7.63411458333333 6.65234375 7.73567708333333 C 6.55078125 7.83723958333333 6.5 7.96701388888889 6.5 8.125 L 6.5 17.875 C 6.5 18.0329861111111 6.55078125 18.1627604166667 6.65234375 18.2643229166667 C 6.75390625 18.3658854166667 6.88368055555556 18.4166666666667 7.04166666666667 18.4166666666667 L 11.375 18.4166666666667 C 11.5329861111111 18.4166666666667 11.6627604166667 18.3658854166667 11.7643229166667 18.2643229166667 Z M 19.34765625 18.2643229166667 C 19.44921875 18.1627604166667 19.5 18.0329861111111 19.5 17.875 L 19.5 8.125 C 19.5 7.96701388888889 19.44921875 7.83723958333333 19.34765625 7.73567708333333 C 19.24609375 7.63411458333333 19.1163194444444 7.58333333333333 18.9583333333333 7.58333333333333 L 14.625 7.58333333333333 C 14.4670138888889 7.58333333333333 14.3372395833333 7.63411458333333 14.2356770833333 7.73567708333333 C 14.1341145833333 7.83723958333333 14.0833333333333 7.96701388888889 14.0833333333333 8.125 L 14.0833333333333 17.875 C 14.0833333333333 18.0329861111111 14.1341145833333 18.1627604166667 14.2356770833333 18.2643229166667 C 14.3372395833333 18.3658854166667 14.4670138888889 18.4166666666667 14.625 18.4166666666667 L 18.9583333333333 18.4166666666667 C 19.1163194444444 18.4166666666667 19.24609375 18.3658854166667 19.34765625 18.2643229166667 Z M 24.2565104166667 6.474609375 C 25.4188368055556 8.46636284722222 26 10.6414930555556 26 13 C 26 15.3585069444444 25.4188368055556 17.5336371527778 24.2565104166667 19.525390625 C 23.0941840277778 21.5171440972222 21.5171440972222 23.0941840277778 19.525390625 24.2565104166667 C 17.5336371527778 25.4188368055556 15.3585069444444 26 13 26 C 10.6414930555556 26 8.46636284722222 25.4188368055556 6.474609375 24.2565104166667 C 4.48285590277778 23.0941840277778 2.90581597222222 21.5171440972222 1.74348958333333 19.525390625 C 0.581163194444444 17.5336371527778 0 15.3585069444444 0 13 C 0 10.6414930555556 0.581163194444444 8.46636284722222 1.74348958333333 6.474609375 C 2.90581597222222 4.48285590277778 4.48285590277778 2.90581597222222 6.474609375 1.74348958333333 C 8.46636284722222 0.581163194444442 10.6414930555556 0 13 0 C 15.3585069444444 0 17.5336371527778 0.581163194444442 19.525390625 1.74348958333333 C 21.5171440972222 2.90581597222222 23.0941840277778 4.48285590277778 24.2565104166667 6.474609375 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 740 655 )" />
|
||||
</g>
|
||||
</svg>
|
||||
6
static/img/play-black-icon.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -498 -3747 )">
|
||||
<path d="M 5.9765625 1.609375 C 7.81510416666667 0.536458333333331 9.82291666666667 0 12 0 C 14.1770833333333 0 16.1848958333333 0.536458333333331 18.0234375 1.609375 C 19.8619791666667 2.68229166666666 21.3177083333333 4.13802083333333 22.390625 5.9765625 C 23.4635416666667 7.81510416666666 24 9.82291666666666 24 12 C 24 14.1770833333333 23.4635416666667 16.1848958333333 22.390625 18.0234375 C 21.3177083333333 19.8619791666667 19.8619791666667 21.3177083333333 18.0234375 22.390625 C 16.1848958333333 23.4635416666667 14.1770833333333 24 12 24 C 9.82291666666667 24 7.81510416666667 23.4635416666667 5.9765625 22.390625 C 4.13802083333333 21.3177083333333 2.68229166666667 19.8619791666667 1.609375 18.0234375 C 0.536458333333333 16.1848958333333 0 14.1770833333333 0 12 C 0 9.82291666666666 0.536458333333333 7.81510416666666 1.609375 5.9765625 C 2.68229166666667 4.13802083333333 4.13802083333333 2.68229166666666 5.9765625 1.609375 Z M 9.5 17.859375 L 18 12.859375 C 18.3333333333333 12.671875 18.5 12.3854166666667 18.5 12 C 18.5 11.6145833333333 18.3333333333333 11.328125 18 11.140625 L 9.5 6.140625 C 9.17708333333333 5.94270833333333 8.84375 5.9375 8.5 6.125 C 8.16666666666667 6.32291666666667 8 6.61458333333333 8 7 L 8 17 C 8 17.3854166666667 8.16666666666667 17.6770833333333 8.5 17.875 C 8.66666666666667 17.9583333333333 8.83333333333333 18 9 18 C 9.17708333333333 18 9.34375 17.953125 9.5 17.859375 Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 498 3747 )" />
|
||||
</g>
|
||||
</svg>
|
||||
6
static/img/play-white-icon.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="26px" height="26px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -740 -567 )">
|
||||
<path d="M 6.474609375 1.74348958333333 C 8.46636284722222 0.581163194444442 10.6414930555556 0 13 0 C 15.3585069444444 0 17.5336371527778 0.581163194444442 19.525390625 1.74348958333333 C 21.5171440972222 2.90581597222222 23.0941840277778 4.48285590277778 24.2565104166667 6.474609375 C 25.4188368055556 8.46636284722222 26 10.6414930555556 26 13 C 26 15.3585069444444 25.4188368055556 17.5336371527778 24.2565104166667 19.525390625 C 23.0941840277778 21.5171440972222 21.5171440972222 23.0941840277778 19.525390625 24.2565104166667 C 17.5336371527778 25.4188368055556 15.3585069444444 26 13 26 C 10.6414930555556 26 8.46636284722222 25.4188368055556 6.474609375 24.2565104166667 C 4.48285590277778 23.0941840277778 2.90581597222222 21.5171440972222 1.74348958333333 19.525390625 C 0.581163194444444 17.5336371527778 0 15.3585069444444 0 13 C 0 10.6414930555556 0.581163194444444 8.46636284722222 1.74348958333333 6.474609375 C 2.90581597222222 4.48285590277778 4.48285590277778 2.90581597222222 6.474609375 1.74348958333333 Z M 10.2916666666667 19.34765625 L 19.5 13.9309895833333 C 19.8611111111111 13.7278645833333 20.0416666666667 13.4175347222222 20.0416666666667 13 C 20.0416666666667 12.5824652777778 19.8611111111111 12.2721354166667 19.5 12.0690104166667 L 10.2916666666667 6.65234375 C 9.94184027777778 6.43793402777778 9.58072916666667 6.43229166666667 9.20833333333333 6.63541666666667 C 8.84722222222222 6.84982638888889 8.66666666666667 7.16579861111111 9 7.58333333333333 L 9 18.4166666666667 C 8.66666666666667 18.8342013888889 8.84722222222222 19.1501736111111 9.20833333333333 19.3645833333333 C 9.38888888888889 19.4548611111111 9.56944444444444 19.5 9.75 19.5 C 9.94184027777778 19.5 10.1223958333333 19.44921875 10.2916666666667 19.34765625 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 740 567 )" />
|
||||
</g>
|
||||
</svg>
|
||||
BIN
static/img/record-icon.png
Normal file
|
After Width: | Height: | Size: 60 KiB |
BIN
static/img/remake-icon.png
Normal file
|
After Width: | Height: | Size: 60 KiB |
BIN
static/img/serial-icon.png
Normal file
|
After Width: | Height: | Size: 1.5 KiB |
6
static/img/serial-icon.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="37px" height="21px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -352 -1463 )">
|
||||
<path d="M 36 0 L 0 0 L 13.4042985613149 17.8567256581192 C 14.7447284174464 19.6423982239312 16.0034388490519 20 20.0042985613149 20 L 33.8 20 C 34.768 20 36 18.88 36 18 L 36 0 Z " fill-rule="nonzero" fill="#f3974b" stroke="none" transform="matrix(1 0 0 1 352 1463 )" />
|
||||
</g>
|
||||
</svg>
|
||||
BIN
static/img/speed-left.png
Normal file
|
After Width: | Height: | Size: 1.3 KiB |
BIN
static/img/speed-right.png
Normal file
|
After Width: | Height: | Size: 1.3 KiB |
BIN
static/img/speed-white-left.png
Normal file
|
After Width: | Height: | Size: 1.5 KiB |
BIN
static/img/speed-white-right.png
Normal file
|
After Width: | Height: | Size: 1.5 KiB |
6
static/img/student-icon.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="12px" height="14px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -891 -5198 )">
|
||||
<path d="M 11.9203125 10.1217447916667 C 11.9734375 10.5805121527778 12 11.0681423611111 12 11.5846354166667 C 12 12.2469618055556 11.8046875 12.8151041666667 11.4140625 13.2890625 C 11.0234375 13.7630208333333 10.553125 14 10.003125 14 L 1.996875 14 C 1.446875 14 0.9765625 13.7630208333333 0.5859375 13.2890625 C 0.1953125 12.8151041666667 0 12.2469618055556 0 11.5846354166667 C 0 11.0681423611111 0.0265625000000001 10.5805121527778 0.0796875000000001 10.1217447916667 C 0.1328125 9.66297743055555 0.23125 9.201171875 0.375 8.736328125 C 0.51875 8.271484375 0.7015625 7.87348090277778 0.9234375 7.54231770833333 C 1.1453125 7.21115451388889 1.4390625 6.94075520833333 1.8046875 6.73111979166667 C 2.1703125 6.521484375 2.590625 6.41666666666667 3.065625 6.41666666666667 C 3.884375 7.19444444444444 4.8625 7.58333333333333 6 7.58333333333333 C 7.1375 7.58333333333333 8.115625 7.19444444444444 8.934375 6.41666666666667 C 9.409375 6.41666666666667 9.8296875 6.521484375 10.1953125 6.73111979166667 C 10.5609375 6.94075520833333 10.8546875 7.21115451388889 11.0765625 7.54231770833333 C 11.2984375 7.87348090277778 11.48125 8.271484375 11.625 8.736328125 C 11.76875 9.201171875 11.8671875 9.66297743055555 11.9203125 10.1217447916667 Z M 8.5453125 1.025390625 C 9.2484375 1.708984375 9.6 2.53385416666667 9.6 3.5 C 9.6 4.46614583333333 9.2484375 5.291015625 8.5453125 5.974609375 C 7.8421875 6.658203125 6.99375 7 6 7 C 5.00625 7 4.1578125 6.658203125 3.4546875 5.974609375 C 2.7515625 5.291015625 2.4 4.46614583333333 2.4 3.5 C 2.4 2.53385416666667 2.7515625 1.708984375 3.4546875 1.025390625 C 4.1578125 0.341796875 5.00625 0 6 0 C 6.99375 0 7.8421875 0.341796875 8.5453125 1.025390625 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 891 5198 )" />
|
||||
</g>
|
||||
</svg>
|
||||
BIN
static/img/student-img.png
Normal file
|
After Width: | Height: | Size: 180 KiB |
BIN
static/img/student-title.png
Normal file
|
After Width: | Height: | Size: 3.3 KiB |
BIN
static/img/train-icon.png
Normal file
|
After Width: | Height: | Size: 23 KiB |
BIN
static/img/works-bj1.png
Normal file
|
After Width: | Height: | Size: 1.4 MiB |
BIN
static/img/works-bj2.png
Normal file
|
After Width: | Height: | Size: 1.2 MiB |
6
static/img/works-line-1.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="51px" height="3px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -795 -1323 )">
|
||||
<path d="M 50 3 L 50.0999999999999 0 L 0 0 L 1.90000000000009 3 L 50 3 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 795 1323 )" />
|
||||
</g>
|
||||
</svg>
|
||||
6
static/img/works-line-2.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="41px" height="3px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -805 -1332 )">
|
||||
<path d="M 40 3 L 40.0999999999999 0 L 0 0 L 1.90000000000009 3 L 40 3 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 805 1332 )" />
|
||||
</g>
|
||||
</svg>
|
||||
6
static/img/works-line-3.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="31px" height="3px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -815 -1341 )">
|
||||
<path d="M 30 3 L 30.0999999999999 0 L 0 0 L 1.90000000000009 3 L 30 3 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 815 1341 )" />
|
||||
</g>
|
||||
</svg>
|
||||
6
static/img/works-line-4.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="51px" height="3px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -1074 -1323 )">
|
||||
<path d="M 1 3 L 0.900000000000093 0 L 51 0 L 49.0999999999999 3 L 1 3 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 1074 1323 )" />
|
||||
</g>
|
||||
</svg>
|
||||
6
static/img/works-line-5.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="41px" height="3px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -1074 -1332 )">
|
||||
<path d="M 1 3 L 0.900000000000092 0 L 41 0 L 39.0999999999999 3 L 1 3 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 1074 1332 )" />
|
||||
</g>
|
||||
</svg>
|
||||
6
static/img/works-line-6.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="31px" height="3px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -1074 -1341 )">
|
||||
<path d="M 0.999999999999999 3 L 0.90000000000009 0 L 31 0 L 29.0999999999999 3 L 0.999999999999999 3 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 1074 1341 )" />
|
||||
</g>
|
||||
</svg>
|
||||
12
static/img/works-title-bj.svg
Normal file
@@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="403px" height="65px" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient gradientUnits="userSpaceOnUse" x1="201" y1="0" x2="201" y2="64" id="LinearGradient76">
|
||||
<stop id="Stop77" stop-color="#271c6e" stop-opacity="0.6" offset="0" />
|
||||
<stop id="Stop78" stop-color="#5241b0" stop-opacity="0.6" offset="1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="matrix(1 0 0 1 -760 -1303 )">
|
||||
<path d="M 28 64 L 0 0 L 402 0 L 374 64 L 28 64 Z " fill-rule="nonzero" fill="url(#LinearGradient76)" stroke="none" transform="matrix(1 0 0 1 760 1303 )" />
|
||||
</g>
|
||||
</svg>
|
||||
BIN
static/img/works-title.png
Normal file
|
After Width: | Height: | Size: 5.3 KiB |
8
static/js/artplayer.js
Normal file
340
static/js/index.js
Normal file
@@ -0,0 +1,340 @@
|
||||
const { createApp, ref, onMounted, nextTick, onUnmounted, computed } = Vue;
|
||||
const search = createApp({
|
||||
setup() {
|
||||
const trait = [
|
||||
{
|
||||
icon: "./img/headset-icon.png",
|
||||
title: "音乐创作",
|
||||
text: "朴见潮音,2024 年成立于广州,是专注 AI 音乐领域的创新工作室。短短一年便跻身于AI音乐浪潮先锋品牌!",
|
||||
},
|
||||
{
|
||||
icon: "./img/mv-icon.png",
|
||||
title: "MV创作",
|
||||
text: "以 AI 技术为核心,整合音乐创作、MV 制作、教学培训、发行级重制等业务,为创作者和爱好者打造一站式平台。",
|
||||
},
|
||||
{
|
||||
icon: "./img/train-icon.png",
|
||||
title: "教学培训",
|
||||
text: "工作室运用多种 AI 工具,突破传统创作局限,支持流行、摇滚等多元风格创作,满足个性化需求。",
|
||||
},
|
||||
{
|
||||
icon: "./img/remake-icon.png",
|
||||
title: "发行级重制",
|
||||
text: "构建全流程服务体系,从 AI 音乐创作、MV 视觉呈现,到零基础教学,再到发行级重制提升品质,实现作品价值最大化。",
|
||||
},
|
||||
];
|
||||
|
||||
const text = `中国AIGC产业联盟(AIGCxChina)
|
||||
温州市社科联
|
||||
温州市新闻媒体中心
|
||||
第一届AI音乐春晚 正选节目`;
|
||||
|
||||
const audioPlayer = ref(null);
|
||||
|
||||
const progress = ref(20); // 播放进度百分比
|
||||
// 更新进度的函数
|
||||
const getProgress = () => {
|
||||
if (!audioPlayer.value) return;
|
||||
const currentTime = audioPlayer.value.currentTime || 0;
|
||||
const duration = audioPlayer.value.duration || 0;
|
||||
const progress = duration > 0 ? (currentTime / duration) * 100 : 0;
|
||||
setProgress(progress, audioPlayer.value.src);
|
||||
};
|
||||
|
||||
const setProgress = (val, src) => {
|
||||
audioList.value.forEach((item) => {
|
||||
if (item.url === src) item.progress = val;
|
||||
});
|
||||
|
||||
customList.value.forEach((item) => {
|
||||
if (item.src === src) item.progress = val;
|
||||
});
|
||||
};
|
||||
|
||||
const introduceRef = ref(null);
|
||||
const worksRef = ref(null);
|
||||
const customRef = ref(null);
|
||||
const studentRef = ref(null);
|
||||
|
||||
let pointerState = ref("introduce");
|
||||
|
||||
const elements = ref([
|
||||
{
|
||||
isVisible: false,
|
||||
ref: introduceRef,
|
||||
title: "介绍",
|
||||
state: "introduce",
|
||||
},
|
||||
{
|
||||
isVisible: false,
|
||||
ref: worksRef,
|
||||
title: "作品",
|
||||
state: "works",
|
||||
},
|
||||
{
|
||||
isVisible: false,
|
||||
ref: customRef,
|
||||
title: "定制",
|
||||
state: "custom",
|
||||
},
|
||||
{
|
||||
isVisible: false,
|
||||
ref: studentRef,
|
||||
title: "学生",
|
||||
state: "student",
|
||||
},
|
||||
]);
|
||||
|
||||
// 点击侧边栏
|
||||
const changePointer = (state) => {
|
||||
const element = document.querySelector(`.${state}`);
|
||||
|
||||
if (!element) return;
|
||||
element.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
});
|
||||
};
|
||||
|
||||
// 向上滚动到上一页
|
||||
const scrollToPrevious = () => {
|
||||
const currentIndex = ['introduce', 'works', 'custom', 'student'].indexOf(pointerState.value);
|
||||
if (currentIndex > 0) {
|
||||
const prevState = ['introduce', 'works', 'custom', 'student'][currentIndex - 1];
|
||||
changePointer(prevState);
|
||||
}
|
||||
};
|
||||
|
||||
// 向下滚动到下一页
|
||||
const scrollToNext = () => {
|
||||
const currentIndex = ['introduce', 'works', 'custom', 'student'].indexOf(pointerState.value);
|
||||
if (currentIndex < 3) {
|
||||
const nextState = ['introduce', 'works', 'custom', 'student'][currentIndex + 1];
|
||||
changePointer(nextState);
|
||||
}
|
||||
};
|
||||
|
||||
// 获取当前在可视窗口中的元素ref
|
||||
const visibleRef = computed(() => {
|
||||
const visibleElement = elements.value.find((el) => el.isVisible);
|
||||
return visibleElement ? visibleElement.ref : null;
|
||||
});
|
||||
|
||||
const observer = ref(null);
|
||||
|
||||
// 初始化观察器
|
||||
const initObserver = () => {
|
||||
observer.value = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
// 找到对应的元素状态并更新
|
||||
const targetEl = elements.value.find((el) => el.ref === entry.target);
|
||||
if (targetEl) {
|
||||
targetEl.isVisible = entry.isIntersecting;
|
||||
if (entry.isIntersecting) pointerState.value = targetEl.state;
|
||||
}
|
||||
});
|
||||
},
|
||||
{
|
||||
root: null, // 视口作为根元素
|
||||
rootMargin: "0px",
|
||||
threshold: 0.3, // 可见比例达到10%时触发
|
||||
}
|
||||
);
|
||||
|
||||
// 开启监听 - 对所有预定义的元素执行observe
|
||||
elements.value.forEach((element) => {
|
||||
if (element.ref && element.ref) observer.value.observe(element.ref);
|
||||
});
|
||||
|
||||
console.log(observer.value);
|
||||
};
|
||||
|
||||
// 添加元素到监听列表
|
||||
const addElement = (elRef) => {
|
||||
if (elRef.value) {
|
||||
// 存储元素ref和其可见状态
|
||||
elements.value.push({
|
||||
ref: elRef.value,
|
||||
isVisible: false,
|
||||
});
|
||||
// 开始监听
|
||||
observer.value?.observe(elRef.value);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
initObserver();
|
||||
}, 1000);
|
||||
|
||||
// 添加进度更新事件监听器
|
||||
if (audioPlayer.value) {
|
||||
audioPlayer.value.addEventListener("timeupdate", getProgress);
|
||||
audioPlayer.value.addEventListener("loadedmetadata", getProgress);
|
||||
}
|
||||
});
|
||||
|
||||
// 组件卸载时清理事件监听器
|
||||
onUnmounted(() => {
|
||||
observer.value?.disconnect();
|
||||
|
||||
audioPlayer?.value?.removeEventListener("timeupdate", getProgress);
|
||||
audioPlayer?.value?.removeEventListener("loadedmetadata", getProgress);
|
||||
});
|
||||
|
||||
// 头部播放状态
|
||||
let audioHeadState = ref(false);
|
||||
|
||||
// 头部播放 - 开启
|
||||
const playHead = () => {
|
||||
closeAll();
|
||||
nextTick(() => {
|
||||
audioPlayer.value.src = "./static/mp3/1.MP3";
|
||||
audioPlayer.value.play().then(() => (audioHeadState.value = true));
|
||||
});
|
||||
};
|
||||
|
||||
// 头部播放 - 暂停
|
||||
const pauseHead = () => {
|
||||
audioPlayer.value.pause();
|
||||
audioHeadState.value = false;
|
||||
};
|
||||
|
||||
// 播放 组件状态
|
||||
let previewState = ref(false);
|
||||
|
||||
let art = null;
|
||||
// 开启播放 MV
|
||||
const openPreview = () => {
|
||||
previewState.value = true;
|
||||
nextTick(() => {
|
||||
art = new Artplayer({
|
||||
container: ".artplayer-app",
|
||||
url: "https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-JoqdX_qqsgFptxhcq_cQnrlc6Z1CwMUBq_D-81qNDQyOQ~~",
|
||||
autoplay: true,
|
||||
poster: "https://o.x-php.com/thumb/UHkZOgUVDvP9z7rPV2rT1kE22Zf1QEiLggt9OPnf5hC7a-QU5l8VTqiP5awMLv2DMEUiOUl03dK1PW0Yzf8ZPfpa7ZTTgV-PZGNjZQ~~",
|
||||
});
|
||||
art.play();
|
||||
});
|
||||
};
|
||||
|
||||
// 关闭播放 MV
|
||||
const closePreview = () => {
|
||||
previewState.value = false;
|
||||
art?.destroy();
|
||||
art = null;
|
||||
};
|
||||
|
||||
let audioList = ref([
|
||||
{
|
||||
url: "https://app.gter.net/image/miniApp/mp3/1.mp3",
|
||||
},
|
||||
{
|
||||
url: "https://app.gter.net/image/miniApp/mp3/2.mp3",
|
||||
},
|
||||
{
|
||||
url: "https://app.gter.net/image/miniApp/mp3/3.mp3",
|
||||
},
|
||||
{
|
||||
url: "https://app.gter.net/image/miniApp/mp3/4.mp3",
|
||||
},
|
||||
]);
|
||||
|
||||
const playAudio = (index) => {
|
||||
closeAll();
|
||||
nextTick(() => {
|
||||
let target = audioList.value[index];
|
||||
const url = target.url;
|
||||
if (audioPlayer.value?.src != url) audioPlayer.value.src = url;
|
||||
audioPlayer.value.play().then(() => {
|
||||
target["state"] = true;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const pauseAudio = (index) => {
|
||||
let target = audioList.value[index];
|
||||
target["state"] = false;
|
||||
audioPlayer.value.pause();
|
||||
};
|
||||
|
||||
// 快进 和 后退 10秒
|
||||
const fastForward = (type = "fast", src, area) => {
|
||||
if (!audioPlayer.value) return;
|
||||
console.log("src", src, "audioPlayer", audioPlayer.value);
|
||||
if (audioPlayer.value.src != src) {
|
||||
manageAudio(src, area);
|
||||
return;
|
||||
}
|
||||
|
||||
let currentTime = audioPlayer.value.currentTime || 0;
|
||||
const duration = audioPlayer.value.duration || 0;
|
||||
let newTime = 0;
|
||||
if (type == "fast") newTime = Math.min(currentTime + 10, duration);
|
||||
else newTime = Math.max(currentTime - 10, 0);
|
||||
audioPlayer.value.currentTime = newTime;
|
||||
getProgress();
|
||||
};
|
||||
|
||||
const manageAudio = (src, area) => {
|
||||
const audio = audioPlayer.value;
|
||||
closeAll();
|
||||
nextTick(() => {
|
||||
if (area == "head") {
|
||||
if (audio?.src != src) audio.src = src;
|
||||
audio.play().then(() => (audioHeadState.value = true));
|
||||
}
|
||||
|
||||
if (area == "works") {
|
||||
if (audio?.src != src) audio.src = src;
|
||||
audio.play().then(() => {
|
||||
audioList.value.forEach((item) => {
|
||||
if (item.url == src) item["state"] = true;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
console.log("area", area, src);
|
||||
|
||||
if (area == "custom") {
|
||||
if (audio?.src != src) audio.src = src;
|
||||
audio.play().then(() => {
|
||||
customList.value.forEach((item) => {
|
||||
if (item.src == src) item["state"] = true;
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const closeAll = () => {
|
||||
audioPlayer.value.pause();
|
||||
audioHeadState.value = false;
|
||||
audioList.value.forEach((item) => {
|
||||
item["progress"] = 0;
|
||||
item["state"] = false;
|
||||
});
|
||||
customList.value.forEach((item) => {
|
||||
item["progress"] = 0;
|
||||
item["state"] = false;
|
||||
});
|
||||
};
|
||||
|
||||
let customList = ref([
|
||||
{
|
||||
src: "https://app.gter.net/image/miniApp/mp3/1.mp3",
|
||||
},
|
||||
{
|
||||
src: "https://app.gter.net/image/miniApp/mp3/2.mp3",
|
||||
},
|
||||
{
|
||||
src: "https://app.gter.net/image/miniApp/mp3/3.mp3",
|
||||
},
|
||||
{
|
||||
src: "https://app.gter.net/image/miniApp/mp3/4.mp3",
|
||||
},
|
||||
]);
|
||||
|
||||
return { scrollToPrevious, scrollToNext, changePointer, pointerState, visibleRef, studentRef, customRef, worksRef, introduceRef, customList, closeAll, manageAudio, progress, pauseAudio, playAudio, audioList, closePreview, openPreview, previewState, audioHeadState, pauseHead, playHead, audioPlayer, text, trait, fastForward };
|
||||
},
|
||||
}).mount("#appIndex");
|
||||