mirror of
https://github.com/ZZZure/ZZZ-Plugin.git
synced 2025-12-16 21:27:47 +00:00
initial upload
This commit is contained in:
bietiaop
commit
1c65f10e24
58 changed files with 2533 additions and 0 deletions
BIN
resources/common/fonts/ExQteFeverNum.ttf
Normal file
BIN
resources/common/fonts/ExQteFeverNum.ttf
Normal file
Binary file not shown.
BIN
resources/common/fonts/FC_Sound.ttf
Normal file
BIN
resources/common/fonts/FC_Sound.ttf
Normal file
Binary file not shown.
BIN
resources/common/fonts/Mont_FF-Heavy.otf
Normal file
BIN
resources/common/fonts/Mont_FF-Heavy.otf
Normal file
Binary file not shown.
BIN
resources/common/fonts/REEJI-CloudChaoCuHeiGBT.ttf
Normal file
BIN
resources/common/fonts/REEJI-CloudChaoCuHeiGBT.ttf
Normal file
Binary file not shown.
BIN
resources/common/fonts/RoGSanSrfStd-Bd.otf
Normal file
BIN
resources/common/fonts/RoGSanSrfStd-Bd.otf
Normal file
Binary file not shown.
BIN
resources/common/fonts/SCDream9.otf
Normal file
BIN
resources/common/fonts/SCDream9.otf
Normal file
Binary file not shown.
BIN
resources/common/fonts/SourceHanSerifCN-Heavy.otf
Normal file
BIN
resources/common/fonts/SourceHanSerifCN-Heavy.otf
Normal file
Binary file not shown.
BIN
resources/common/fonts/TiltWarp-Regular.ttf
Normal file
BIN
resources/common/fonts/TiltWarp-Regular.ttf
Normal file
Binary file not shown.
BIN
resources/common/fonts/impact.ttf
Normal file
BIN
resources/common/fonts/impact.ttf
Normal file
Binary file not shown.
BIN
resources/common/fonts/inpinhongmengti.ttf
Normal file
BIN
resources/common/fonts/inpinhongmengti.ttf
Normal file
Binary file not shown.
BIN
resources/common/images/bg.jpg
Normal file
BIN
resources/common/images/bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 219 KiB |
30
resources/common/layout/index.css
Normal file
30
resources/common/layout/index.css
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "zzz", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
transform-origin: 0 0;
|
||||
font-size: 24px;
|
||||
width: 840px;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: url("../images/bg.jpg") no-repeat center center;
|
||||
background-size: cover;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
text-align: center;
|
||||
font-size: 0.7em;
|
||||
color: #797979;
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
.copyright .highlight {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=index.css.map */
|
||||
22
resources/common/layout/index.html
Normal file
22
resources/common/layout/index.html
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ZZZ-Plugin</title>
|
||||
<link rel="stylesheet" type="text/css" href="{{@sys.resourcesPath}}/common/style/index.css">
|
||||
<link rel="stylesheet" type="text/css" href="{{@sys.resourcesPath}}/common/layout/index.css" />
|
||||
{{block 'css'}}
|
||||
{{/block}}
|
||||
</head>
|
||||
|
||||
<body {{@sys.scale}}>
|
||||
<div class="container" id="container">
|
||||
{{block 'main'}}{{/block}}
|
||||
<div class="copyright">{{@sys.createdby}}</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
31
resources/common/layout/index.scss
Normal file
31
resources/common/layout/index.scss
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'zzz', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
|
||||
Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
transform-origin: 0 0;
|
||||
font-size: 24px;
|
||||
width: 840px;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: url('../images/bg.jpg') no-repeat center center;
|
||||
background-size: cover;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
text-align: center;
|
||||
font-size: 0.7em;
|
||||
color: #797979;
|
||||
padding-bottom: 2em;
|
||||
.highlight {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
21
resources/common/style/index.css
Normal file
21
resources/common/style/index.css
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
@font-face {
|
||||
font-family: "zzz";
|
||||
src: url("../fonts/inpinhongmengti.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Source Han Serif";
|
||||
src: url("../fonts/SourceHanSerifCN-Heavy.otf");
|
||||
}
|
||||
.zzz-font {
|
||||
font-family: "zzz", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
.no-zzz-font {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
.zzz-serif {
|
||||
font-family: "Source Han Serif", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=index.css.map */
|
||||
41
resources/common/style/index.scss
Normal file
41
resources/common/style/index.scss
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
@font-face {
|
||||
font-family: 'zzz';
|
||||
// src: url('../fonts/RoGSanSrfStd-Bd.otf');
|
||||
src: url('../fonts/inpinhongmengti.ttf');
|
||||
// font-weight: 400;
|
||||
}
|
||||
|
||||
// @font-face {
|
||||
// font-family: 'zzz';
|
||||
// src: url('../fonts/REEJI-CloudChaoCuHeiGBT.ttf');
|
||||
// font-weight: 900;
|
||||
// }
|
||||
|
||||
@font-face {
|
||||
font-family: 'Source Han Serif';
|
||||
src: url('../fonts/SourceHanSerifCN-Heavy.otf');
|
||||
}
|
||||
|
||||
.zzz-font {
|
||||
font-family: 'zzz', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
|
||||
Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
||||
.no-zzz-font {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
||||
Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
||||
// .zzz-title {
|
||||
// font-family: 'zzz', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
|
||||
// Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
// font-weight: 900;
|
||||
// }
|
||||
|
||||
.zzz-serif {
|
||||
font-family: 'Source Han Serif', system-ui, -apple-system, BlinkMacSystemFont,
|
||||
'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
}
|
||||
BIN
resources/note/images/ActivityGeneralBtnBg02.png
Normal file
BIN
resources/note/images/ActivityGeneralBtnBg02.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
resources/note/images/BgFrame.png
Normal file
BIN
resources/note/images/BgFrame.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 597 KiB |
BIN
resources/note/images/IconStamina.png
Normal file
BIN
resources/note/images/IconStamina.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
resources/note/images/PetSelectBG.png
Normal file
BIN
resources/note/images/PetSelectBG.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
resources/note/images/SuitBg.png
Normal file
BIN
resources/note/images/SuitBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
resources/note/images/UIDBg.png
Normal file
BIN
resources/note/images/UIDBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
resources/note/images/batteryBg.png
Normal file
BIN
resources/note/images/batteryBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 546 KiB |
BIN
resources/note/images/no.png
Normal file
BIN
resources/note/images/no.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
resources/note/images/yes.png
Normal file
BIN
resources/note/images/yes.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
253
resources/note/index.css
Normal file
253
resources/note/index.css
Normal file
|
|
@ -0,0 +1,253 @@
|
|||
.container {
|
||||
padding-top: 3em;
|
||||
}
|
||||
|
||||
.card {
|
||||
border-image: url("./images/BgFrame.png");
|
||||
border-image-slice: 325 0 162.5 0 fill;
|
||||
border-image-width: 10em 0em 5em 0em;
|
||||
border-image-repeat: round stretch;
|
||||
min-height: 30em;
|
||||
overflow: hidden;
|
||||
padding: 5em 2.2em 2.2em 2.2em;
|
||||
}
|
||||
.card .user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1em;
|
||||
margin-top: 1.7em;
|
||||
gap: 1em;
|
||||
padding: 0 1em;
|
||||
}
|
||||
.card .user-info .avatar {
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
border-radius: 50%;
|
||||
border-image: url("./images/SuitBg.png");
|
||||
border-image-width: 0;
|
||||
border-image-outset: 0.4em;
|
||||
border-image-repeat: round;
|
||||
border-image-slice: 1 fill;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card .user-info .avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
.card .user-info .info-bar {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
flex: 1;
|
||||
gap: 0.2em;
|
||||
}
|
||||
.card .user-info .info-bar .info {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
gap: 0.5em;
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
.card .user-info .info-bar .info .nickname {
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.card .user-info .info-bar .info .label {
|
||||
-webkit-clip-path: polygon(0.2em 0%, calc(100% - 0.2em) 0%, 100% 0.2em, 100% calc(100% - 0.2em), calc(100% - 0.2em) 100%, 0.2em 100%, 0% calc(100% - 0.2em), 0% 0.2em);
|
||||
clip-path: polygon(0.2em 0%, calc(100% - 0.2em) 0%, 100% 0.2em, 100% calc(100% - 0.2em), calc(100% - 0.2em) 100%, 0.2em 100%, 0% calc(100% - 0.2em), 0% 0.2em);
|
||||
padding: 0 0.4em;
|
||||
font-size: 0.9em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: rgb(43, 38, 40);
|
||||
margin: 0.1em 0;
|
||||
}
|
||||
.card .user-info .info-bar .info .label.level {
|
||||
background-color: rgb(243, 203, 69);
|
||||
}
|
||||
.card .user-info .info-bar .info .label.server {
|
||||
background-color: rgb(81, 177, 253);
|
||||
}
|
||||
.card .user-info .info-bar .uid {
|
||||
border-image: url("./images/UIDBg.png");
|
||||
border-image-slice: 0 100 0 100 fill;
|
||||
border-image-width: 0em 1.6em 0em 1.6em;
|
||||
border-image-outset: 0;
|
||||
border-image-repeat: stretch stretch;
|
||||
padding: 0.3em 1.6em;
|
||||
font-size: 0.9em;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.card > .title {
|
||||
width: 100%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
padding: 0 0.4em;
|
||||
position: relative;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
.card > .title .parallelograms {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: flex-end;
|
||||
position: inherit;
|
||||
padding-bottom: 0.4em;
|
||||
z-index: 1;
|
||||
}
|
||||
.card > .title .parallelograms span {
|
||||
width: 1.3em;
|
||||
height: 80%;
|
||||
background-color: rgb(246, 202, 69);
|
||||
margin-right: -0.2em;
|
||||
-webkit-clip-path: polygon(0.7em 0%, 100% 0%, calc(100% - 0.7em) 100%, 0% 100%);
|
||||
clip-path: polygon(0.7em 0%, 100% 0%, calc(100% - 0.7em) 100%, 0% 100%);
|
||||
}
|
||||
.card > .title .bg-content {
|
||||
position: absolute;
|
||||
bottom: -0.1em;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0) skewX(-8deg);
|
||||
color: rgba(255, 255, 255, 0.1);
|
||||
font-size: 2.7em;
|
||||
}
|
||||
.card > .title .content {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
font-size: 1.5em;
|
||||
text-align: center;
|
||||
position: inherit;
|
||||
z-index: 1;
|
||||
}
|
||||
.card .battery {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5em;
|
||||
padding: 0.5em;
|
||||
border: solid 0.2em rgb(174, 174, 174);
|
||||
border-radius: 0.7em;
|
||||
color: rgb(167, 167, 167);
|
||||
background: url("./images/batteryBg.png") no-repeat center center;
|
||||
background-size: cover;
|
||||
margin: 1.5em 0;
|
||||
}
|
||||
.card .battery .icon {
|
||||
width: 7em;
|
||||
height: 7em;
|
||||
border-radius: 50%;
|
||||
border-image: url("./images/PetSelectBG.png");
|
||||
border-image-width: 0;
|
||||
border-image-outset: 0em;
|
||||
border-image-repeat: round;
|
||||
border-image-slice: 1 fill;
|
||||
overflow: hidden;
|
||||
padding: 1.4em;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.card .battery .icon img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
.card .battery .info {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
margin-right: 1em;
|
||||
}
|
||||
.card .battery .info .bvalue {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.card .battery .info .bvalue .title {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.card .battery .info .bvalue .value .big {
|
||||
font-size: 1.5em;
|
||||
color: rgb(253, 209, 73);
|
||||
margin: 0 0.7em;
|
||||
}
|
||||
.card .battery .info .bleft {
|
||||
display: flex;
|
||||
gap: 0.2em;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
.card .battery .info .bleft .value {
|
||||
color: white;
|
||||
}
|
||||
.card .battery .info .texture {
|
||||
width: 100%;
|
||||
border-image: url("./images/ActivityGeneralBtnBg02.png");
|
||||
border-image-slice: 30 40 30 24 fill;
|
||||
border-image-width: 1em 1.5em 1em 0.9em;
|
||||
border-image-repeat: stretch stretch;
|
||||
padding: 1.1em 1.23em 1.1em 0.6em;
|
||||
margin-top: 0.7em;
|
||||
}
|
||||
.card .battery .info .texture .progress {
|
||||
height: 0.5em;
|
||||
border-radius: 0.3em;
|
||||
background-color: rgb(244, 198, 68);
|
||||
}
|
||||
.card .active-list {
|
||||
font-size: 1.2em;
|
||||
padding: 0 1em;
|
||||
margin-top: -0.5em;
|
||||
}
|
||||
.card .active-list .active {
|
||||
display: flex;
|
||||
border-bottom: solid 0.07em rgba(255, 255, 255, 0.3);
|
||||
align-items: center;
|
||||
color: rgb(216, 216, 216);
|
||||
gap: 0.5em;
|
||||
padding-right: 1em;
|
||||
padding-top: 1em;
|
||||
padding-bottom: 0.2em;
|
||||
}
|
||||
.card .active-list .active .status {
|
||||
width: 1.8em;
|
||||
height: 1.8em;
|
||||
border-radius: 50%;
|
||||
background-color: rgb(34, 39, 37);
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
background: url("./images/no.png") no-repeat center center;
|
||||
background-size: contain;
|
||||
}
|
||||
.card .active-list .active .status.finish {
|
||||
background: url("./images/yes.png") no-repeat center center;
|
||||
background-size: contain;
|
||||
}
|
||||
.card .active-list .active .title {
|
||||
flex-grow: 1;
|
||||
padding: 0;
|
||||
font-size: 1.1em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.card .active-list .active .value {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
font-size: 1.2em;
|
||||
color: rgb(253, 209, 73);
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.card .active-list .active .value .sub {
|
||||
font-size: 0.8em;
|
||||
color: rgb(255, 255, 255);
|
||||
margin-left: 0.2em;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=index.css.map */
|
||||
98
resources/note/index.html
Normal file
98
resources/note/index.html
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
{{extend defaultLayout}}
|
||||
|
||||
{{block 'css'}}
|
||||
<link rel="stylesheet" href="{{@sys.currentPath}}/index.css">
|
||||
{{/block}}
|
||||
|
||||
{{block 'main'}}
|
||||
<div class="card">
|
||||
<div class="user-info">
|
||||
<div class="avatar">
|
||||
<img src="{{avatar}}" alt="Avatar">
|
||||
</div>
|
||||
<div class="info-bar">
|
||||
<div class="info">
|
||||
<div class="nickname">{{player.nickname}}</div>
|
||||
<div class="label level">Lv{{player.level}}</div>
|
||||
<div class="label server">{{player.region_name}}</div>
|
||||
</div>
|
||||
<div class="uid">UID {{player.game_uid}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title">
|
||||
<div class="bg-content">
|
||||
STAMINA
|
||||
</div>
|
||||
<div class="parallelograms">
|
||||
<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
|
||||
</div>
|
||||
<div class="content">
|
||||
电池电量
|
||||
</div>
|
||||
<div class="parallelograms">
|
||||
<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="battery">
|
||||
<div class="icon">
|
||||
<img src="{{@sys.currentPath}}/images/IconStamina.png" alt="">
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="bvalue">
|
||||
<div class="title">电量</div>
|
||||
<div class="value"><span class="big">{{note.energy.progress.current}}</span>/{{note.energy.progress.max}}</div>
|
||||
</div>
|
||||
<div class="bleft">
|
||||
<div class="title">剩余</div>
|
||||
<div class="value">{{note.energy.progress.rest}}</div>
|
||||
</div>
|
||||
<div class="texture">
|
||||
<div class="bar">
|
||||
<div class="progress" style="width: {{note.energy.progress.percent}}%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="title">
|
||||
<div class="bg-content">
|
||||
ACTIVE
|
||||
</div>
|
||||
<div class="parallelograms">
|
||||
<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
|
||||
</div>
|
||||
<div class="content">
|
||||
每日情况
|
||||
</div>
|
||||
<div class="parallelograms">
|
||||
<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="active-list">
|
||||
<div class="active">
|
||||
<div class="status {{note.vitality.finish && 'finish'}}"></div>
|
||||
<div class="title">今日活跃度</div>
|
||||
<div class="value">
|
||||
{{note.vitality.current}}
|
||||
<span class="sub">/{{note.vitality.max}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="active">
|
||||
<div class="status {{note.vhs_sale.state && 'finish'}}"></div>
|
||||
<div class="title">录像店经营</div>
|
||||
<div class="value">
|
||||
{{note.vhs_sale.state_label}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="active">
|
||||
<div class="status {{note.sign && 'finish'}}"></div>
|
||||
<div class="title">刮刮卡</div>
|
||||
<div class="value">
|
||||
{{note.sign_label}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/block}}
|
||||
284
resources/note/index.scss
Normal file
284
resources/note/index.scss
Normal file
|
|
@ -0,0 +1,284 @@
|
|||
.container {
|
||||
padding-top: 3em;
|
||||
}
|
||||
.card {
|
||||
border-image: url('./images/BgFrame.png');
|
||||
border-image-slice: 325 0 162.5 0 fill;
|
||||
border-image-width: 10em 0em 5em 0em;
|
||||
border-image-repeat: round stretch;
|
||||
min-height: 30em;
|
||||
overflow: hidden;
|
||||
padding: 5em 2.2em 2.2em 2.2em;
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1em;
|
||||
margin-top: 1.7em;
|
||||
gap: 1em;
|
||||
padding: 0 1em;
|
||||
.avatar {
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
border-radius: 50%;
|
||||
border-image: url('./images/SuitBg.png');
|
||||
border-image-width: 0;
|
||||
border-image-outset: 0.4em;
|
||||
border-image-repeat: round;
|
||||
border-image-slice: 1 fill;
|
||||
overflow: hidden;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.info-bar {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
flex: 1;
|
||||
gap: 0.2em;
|
||||
.info {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
gap: 0.5em;
|
||||
padding-left: 0.5em;
|
||||
.nickname {
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.label {
|
||||
$label-width: 0.2em;
|
||||
-webkit-clip-path: polygon(
|
||||
$label-width 0%,
|
||||
calc(100% - $label-width) 0%,
|
||||
100% $label-width,
|
||||
100% calc(100% - $label-width),
|
||||
calc(100% - $label-width) 100%,
|
||||
$label-width 100%,
|
||||
0% calc(100% - $label-width),
|
||||
0% $label-width
|
||||
);
|
||||
clip-path: polygon(
|
||||
$label-width 0%,
|
||||
calc(100% - $label-width) 0%,
|
||||
100% $label-width,
|
||||
100% calc(100% - $label-width),
|
||||
calc(100% - $label-width) 100%,
|
||||
$label-width 100%,
|
||||
0% calc(100% - $label-width),
|
||||
0% $label-width
|
||||
);
|
||||
padding: 0 0.4em;
|
||||
font-size: 0.9em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: rgb(43, 38, 40);
|
||||
margin: 0.1em 0;
|
||||
|
||||
&.level {
|
||||
background-color: rgb(243, 203, 69);
|
||||
}
|
||||
|
||||
&.server {
|
||||
background-color: rgb(81, 177, 253);
|
||||
}
|
||||
}
|
||||
}
|
||||
.uid {
|
||||
border-image: url('./images/UIDBg.png');
|
||||
border-image-slice: 0 100 0 100 fill;
|
||||
border-image-width: 0em 1.6em 0em 1.6em;
|
||||
border-image-outset: 0;
|
||||
border-image-repeat: stretch stretch;
|
||||
padding: 0.3em 1.6em;
|
||||
font-size: 0.9em;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
> .title {
|
||||
width: 100%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
padding: 0 0.4em;
|
||||
position: relative;
|
||||
margin: 0.5em 0;
|
||||
.parallelograms {
|
||||
$pwidth: 0.7em;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: flex-end;
|
||||
position: inherit;
|
||||
padding-bottom: 0.4em;
|
||||
z-index: 1;
|
||||
span {
|
||||
width: 1.3em;
|
||||
height: 80%;
|
||||
background-color: rgb(246, 202, 69);
|
||||
margin-right: -0.2em;
|
||||
-webkit-clip-path: polygon(
|
||||
$pwidth 0%,
|
||||
100% 0%,
|
||||
calc(100% - $pwidth) 100%,
|
||||
0% 100%
|
||||
);
|
||||
clip-path: polygon(
|
||||
$pwidth 0%,
|
||||
100% 0%,
|
||||
calc(100% - $pwidth) 100%,
|
||||
0% 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
.bg-content {
|
||||
position: absolute;
|
||||
bottom: -0.1em;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0) skewX(-8deg);
|
||||
color: rgba(255, 255, 255, 0.1);
|
||||
font-size: 2.7em;
|
||||
}
|
||||
.content {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
font-size: 1.5em;
|
||||
text-align: center;
|
||||
position: inherit;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
.battery {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5em;
|
||||
padding: 0.5em;
|
||||
border: solid 0.2em rgb(174, 174, 174);
|
||||
border-radius: 0.7em;
|
||||
color: rgb(167, 167, 167);
|
||||
background: url('./images/batteryBg.png') no-repeat center center;
|
||||
background-size: cover;
|
||||
margin: 1.5em 0;
|
||||
.icon {
|
||||
width: 7em;
|
||||
height: 7em;
|
||||
border-radius: 50%;
|
||||
border-image: url('./images/PetSelectBG.png');
|
||||
border-image-width: 0;
|
||||
border-image-outset: 0em;
|
||||
border-image-repeat: round;
|
||||
border-image-slice: 1 fill;
|
||||
overflow: hidden;
|
||||
padding: 1.4em;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.info {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
margin-right: 1em;
|
||||
.bvalue {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
.title {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.value {
|
||||
.big {
|
||||
font-size: 1.5em;
|
||||
color: rgb(253, 209, 73);
|
||||
margin: 0 0.7em;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bleft {
|
||||
display: flex;
|
||||
gap: 0.2em;
|
||||
font-size: 0.8em;
|
||||
.value {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.texture {
|
||||
width: 100%;
|
||||
border-image: url('./images/ActivityGeneralBtnBg02.png');
|
||||
border-image-slice: 30 40 30 24 fill;
|
||||
border-image-width: 1em 1.5em 1em 0.9em;
|
||||
border-image-repeat: stretch stretch;
|
||||
padding: 1.1em 1.23em 1.1em 0.6em;
|
||||
margin-top: 0.7em;
|
||||
.progress {
|
||||
height: 0.5em;
|
||||
border-radius: 0.3em;
|
||||
background-color: rgb(244, 198, 68);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.active-list {
|
||||
font-size: 1.2em;
|
||||
padding: 0 1em;
|
||||
margin-top: -0.5em;
|
||||
.active {
|
||||
display: flex;
|
||||
border-bottom: solid 0.07em rgba(255, 255, 255, 0.3);
|
||||
align-items: center;
|
||||
color: rgb(216, 216, 216);
|
||||
gap: 0.5em;
|
||||
padding-right: 1em;
|
||||
padding-top: 1em;
|
||||
padding-bottom: 0.2em;
|
||||
.status {
|
||||
width: 1.8em;
|
||||
height: 1.8em;
|
||||
border-radius: 50%;
|
||||
background-color: rgb(34, 39, 37);
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
background: url('./images/no.png') no-repeat center center;
|
||||
background-size: contain;
|
||||
&.finish {
|
||||
background: url('./images/yes.png') no-repeat center center;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
flex-grow: 1;
|
||||
padding: 0;
|
||||
font-size: 1.1em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.value {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
font-size: 1.2em;
|
||||
color: rgb(253, 209, 73);
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
.sub {
|
||||
font-size: 0.8em;
|
||||
color: rgb(255, 255, 255);
|
||||
margin-left: 0.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue