no message
This commit is contained in:
DESKTOP-RQ919RC\Pc
303
css/index.css
Normal file
303
css/index.css
Normal file
@@ -0,0 +1,303 @@
|
|||||||
|
* {
|
||||||
|
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 .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;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.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-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;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.content .works .bj2 {
|
||||||
|
width: 1200px;
|
||||||
|
height: 196px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
345
css/index.less
Normal file
345
css/index.less
Normal file
@@ -0,0 +1,345 @@
|
|||||||
|
* {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
|
||||||
|
.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-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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #555555;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bj2 {
|
||||||
|
width: 1200px;
|
||||||
|
height: 196px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
22
img/album-bj1.svg
Normal file
22
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
img/album-bj2.svg
Normal file
11
img/album-bj2.svg
Normal file
File diff suppressed because one or more lines are too long
6
img/album-bj3.svg
Normal file
6
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
img/album-bj4.png
Normal file
BIN
img/album-bj4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
18
img/album-bj5.svg
Normal file
18
img/album-bj5.svg
Normal file
File diff suppressed because one or more lines are too long
11
img/album-img.svg
Normal file
11
img/album-img.svg
Normal file
File diff suppressed because one or more lines are too long
BIN
img/award-winning-works.png
Normal file
BIN
img/award-winning-works.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
img/gushi.png
Normal file
BIN
img/gushi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
BIN
img/headset-icon.png
Normal file
BIN
img/headset-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
BIN
img/logo.png
Normal file
BIN
img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
BIN
img/mv-icon.png
Normal file
BIN
img/mv-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
6
img/play-white-icon.svg
Normal file
6
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
img/remake-icon.png
Normal file
BIN
img/remake-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
BIN
img/train-icon.png
Normal file
BIN
img/train-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
img/works-bj1.png
Normal file
BIN
img/works-bj1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
img/works-bj2.png
Normal file
BIN
img/works-bj2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
6
img/works-line-1.svg
Normal file
6
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
img/works-line-2.svg
Normal file
6
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
img/works-line-3.svg
Normal file
6
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
img/works-line-4.svg
Normal file
6
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
img/works-line-5.svg
Normal file
6
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
img/works-line-6.svg
Normal file
6
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
img/works-title-bj.svg
Normal file
12
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
img/works-title.png
Normal file
BIN
img/works-title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
87
index.html
Normal file
87
index.html
Normal file
@@ -0,0 +1,87 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>朴见潮音官网</title>
|
||||||
|
<script src="./js/vue.global.js"></script>
|
||||||
|
<link rel="stylesheet" href="./css/index.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="content" id="appIndex">
|
||||||
|
<div class="introduce">
|
||||||
|
<div class="head flexacenter">
|
||||||
|
<div class="logo mar1200">
|
||||||
|
<img class="icon" src="./img/logo.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="box flexflex mar1200">
|
||||||
|
<div class="info">
|
||||||
|
<div class="brand flexacenter">
|
||||||
|
<div class="fill"></div>
|
||||||
|
<div class="text flexflex">
|
||||||
|
<span>AI music</span>
|
||||||
|
<span>Pioneering brand</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="award flexflex">
|
||||||
|
<img class="title" src="./img/award-winning-works.png" />
|
||||||
|
<img class="name" src="./img/gushi.png" />
|
||||||
|
<div class="explain">
|
||||||
|
<div>中国AIGC产业联盟（AIGCxChina）</div>
|
||||||
|
<div>温州市社科联</div>
|
||||||
|
<div>温州市新闻媒体中心</div>
|
||||||
|
<div>第一届AI音乐春晚 正选节目</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="album">
|
||||||
|
<img class="bj bj1" src="./img/album-bj1.svg" />
|
||||||
|
<img class="bj bj2" src="./img/album-bj2.svg" />
|
||||||
|
<img class="img" src="./img/album-img.svg" />
|
||||||
|
<img class="bj bj3" src="./img/album-bj3.svg" />
|
||||||
|
<img class="bj bj4" src="./img/album-bj4.png" />
|
||||||
|
<img class="bj bj5" src="./img/album-bj5.svg" />
|
||||||
|
<img class="play" src="./img/play-white-icon.svg" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="trait flexflex mar1200">
|
||||||
|
<div class="item flexflex flex1" v-for="(item, index) in trait" :key="index">
|
||||||
|
<img class="icon" :src="item.icon" />
|
||||||
|
<div class="title">{{ item.title }}</div>
|
||||||
|
<div class="text">{{ item.text }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="works flexacenter">
|
||||||
|
<img class="bj1" src="./img/works-bj1.png" />
|
||||||
|
<div class="name-box">
|
||||||
|
<img class="bj" src="./img/works-title-bj.svg" />
|
||||||
|
<img class="title" src="./img/works-title.png" />
|
||||||
|
<img class="line line-1" src="./img/works-line-1.svg" />
|
||||||
|
<img class="line line-2" src="./img/works-line-2.svg" />
|
||||||
|
<img class="line line-3" src="./img/works-line-3.svg" />
|
||||||
|
<img class="line line-4" src="./img/works-line-4.svg" />
|
||||||
|
<img class="line line-5" src="./img/works-line-5.svg" />
|
||||||
|
<img class="line line-6" src="./img/works-line-6.svg" />
|
||||||
|
</div>
|
||||||
|
<div class="mv-box mar1200">
|
||||||
|
<div class="item flexflex">
|
||||||
|
<div class="serial">01</div>
|
||||||
|
<div class="title">深港双城故事</div>
|
||||||
|
|
||||||
|
<div class="text">中国AIGC产业联盟（AIGCxChina）
|
||||||
|
温州市社科联
|
||||||
|
温州市新闻媒体中心
|
||||||
|
第一届AI音乐春晚 正选节目</div>
|
||||||
|
<div class="time">2024.12</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img class="bj2" src="./img/works-bj2.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="./js/index.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
33
js/index.js
Normal file
33
js/index.js
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
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 视觉呈现，到零基础教学，再到发行级重制提升品质，实现作品价值最大化。",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
console.log("4444");
|
||||||
|
});
|
||||||
|
|
||||||
|
return { trait };
|
||||||
|
},
|
||||||
|
}).mount("#appIndex");
|
||||||
18039
js/vue.global.js
Normal file
18039
js/vue.global.js
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user