🐛 修复改头像群权限判断，fix #54
This commit is contained in:
yeyang
3
.gitignore
vendored
3
.gitignore
vendored
@@ -5,4 +5,5 @@ test.*
|
||||
*.log
|
||||
.vscode/
|
||||
.eslintignore
|
||||
temp/
|
||||
temp/
|
||||
*.css.map
|
||||
@@ -244,7 +244,7 @@ export class Assistant extends plugin {
|
||||
return logger.mark(`${e.logFnc}该群员权限不足`)
|
||||
}
|
||||
let groupObj = this.Bot.pickGroup(e.group_id)
|
||||
if (groupObj.is_admin && groupObj.is_owner) {
|
||||
if (!groupObj.is_admin && !groupObj.is_owner) {
|
||||
return e.reply('❎ 没有管理员人家做不到啦~>_<')
|
||||
}
|
||||
if (!e.img) {
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
.font-ys {
|
||||
font-family: Number, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif;
|
||||
}
|
||||
.font-nzbz {
|
||||
font-family: Number, "印品南征北战NZBZ体", NZBZ, PingFangSC-Medium, "PingFang SC", sans-serif;
|
||||
}
|
||||
/*# sourceMappingURL=base.css.map */
|
||||
@@ -1,7 +0,0 @@
|
||||
.font-YS {
|
||||
font-family: Number, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif;
|
||||
}
|
||||
|
||||
.font-NZBZ {
|
||||
font-family: Number, "印品南征北战NZBZ体", NZBZ, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif;
|
||||
}
|
||||
@@ -1,390 +0,0 @@
|
||||
.font(@name, @file) {
|
||||
@font-face {
|
||||
font-family: @name;
|
||||
src: url("./font/@{file}.woff") format('woff'), url("./font/@{file}.ttf") format('truetype');
|
||||
}
|
||||
}
|
||||
|
||||
.font('Number', 'tttgbnumber');
|
||||
.font('NZBZ', 'NZBZ');
|
||||
.font('YS', 'HYWH-65W');
|
||||
|
||||
@import "base.less";
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 18px;
|
||||
color: #1e1f20;
|
||||
font-family: Number, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif;
|
||||
transform: scale(1.4);
|
||||
transform-origin: 0 0;
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 600px;
|
||||
padding: 20px 15px 10px 15px;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
|
||||
.head-box {
|
||||
border-radius: 15px;
|
||||
padding: 10px 20px;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
margin-top: 30px;
|
||||
|
||||
.title {
|
||||
.font-NZBZ;
|
||||
font-size: 36px;
|
||||
text-shadow: 0 0 1px #000, 1px 1px 3px rgba(0, 0, 0, .9);
|
||||
|
||||
.label {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.genshin_logo {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 15px;
|
||||
width: 97px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 16px;
|
||||
text-shadow: 0 0 1px #000, 1px 1px 3px rgba(0, 0, 0, .9);
|
||||
|
||||
span {
|
||||
color: #d3bc8e;
|
||||
padding: 0 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.notice {
|
||||
color: #888;
|
||||
font-size: 12px;
|
||||
text-align: right;
|
||||
padding: 12px 5px 5px;
|
||||
}
|
||||
|
||||
.notice-center {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
text-shadow: 1px 1px 1px #333;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
text-shadow: 1px 1px 1px #000;
|
||||
margin: 10px 0;
|
||||
|
||||
.version {
|
||||
color: #d3bc8e;
|
||||
display: inline-block;
|
||||
padding: 0 3px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* */
|
||||
|
||||
.cons {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding: 0 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
||||
.cons(@idx, @bg, @color:#fff) {
|
||||
.cons-@{idx} {
|
||||
background: @bg;
|
||||
color: @color;
|
||||
}
|
||||
}
|
||||
|
||||
.cons(0, #666);
|
||||
.cons(n0, #404949);
|
||||
.cons(1, #5cbac2);
|
||||
.cons(2, #339d61);
|
||||
.cons(3, #3e95b9);
|
||||
.cons(4, #3955b7);
|
||||
.cons(5, #531ba9cf);
|
||||
.cons(6, #ff5722);
|
||||
|
||||
.cons2(@idx, @bg, @color:#fff) {
|
||||
.cons2-@{idx} {
|
||||
border-radius: 4px;
|
||||
background: @bg;
|
||||
color: @color;
|
||||
}
|
||||
}
|
||||
|
||||
.cons2(0, #666);
|
||||
.cons2(1, #71b1b7);
|
||||
.cons2(2, #369961);
|
||||
.cons2(3, #4596b9);
|
||||
.cons2(4, #4560b9);
|
||||
.cons2(5, #531ba9cf);
|
||||
.cons2(6, #ff5722);
|
||||
|
||||
/******** Fetter ********/
|
||||
|
||||
.fetter {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: inline-block;
|
||||
background: url('./item/fetter.png');
|
||||
background-size: auto 100%;
|
||||
@fetters: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
|
||||
each(@fetters, {
|
||||
&.fetter@{value} {
|
||||
background-position: (-100%/9)+(100%/9)*@value 0;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/******** ELEM ********/
|
||||
|
||||
@elems: hydro, anemo, cryo, electro, geo, pyro, dendro;
|
||||
|
||||
each(@elems, {
|
||||
.elem-@{value} .talent-icon {
|
||||
background-image: url("./bg/talent-@{value}.png");
|
||||
}
|
||||
|
||||
.elem-@{value} .elem-bg,
|
||||
.@{value}-bg {
|
||||
background-image: url("./bg/bg-@{value}.jpg");
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
/* cont */
|
||||
|
||||
.cont {
|
||||
border-radius: 10px;
|
||||
background: url("../common/cont/card-bg.png") top left repeat-x;
|
||||
background-size: auto 100%;
|
||||
// backdrop-filter: blur(3px);
|
||||
margin: 5px 15px 5px 10px;
|
||||
position: relative;
|
||||
box-shadow: 0 0 1px 0 #ccc, 2px 2px 4px 0 rgba(50, 50, 50, .8);
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
|
||||
.cont-title {
|
||||
background: rgba(0, 0, 0, .4);
|
||||
box-shadow: 0 0 1px 0 #fff;
|
||||
color: #d3bc8e;
|
||||
padding: 10px 20px;
|
||||
text-align: left;
|
||||
border-radius: 10px 10px 0 0;
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
margin-left: 10px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
&.border-less {
|
||||
background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
|
||||
box-shadow: none;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.cont-body {
|
||||
padding: 10px 15px;
|
||||
font-size: 12px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 0 0 1px 0 #fff;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
||||
.cont-footer {
|
||||
padding: 10px 15px;
|
||||
font-size: 12px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.cont > ul.cont-msg {
|
||||
display: block;
|
||||
padding: 5px 10px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
ul.cont-msg, .cont-footer ul {
|
||||
padding-left: 15px;
|
||||
|
||||
li {
|
||||
margin: 5px 0;
|
||||
margin-left: 15px;
|
||||
|
||||
strong {
|
||||
font-weight: normal;
|
||||
margin: 0 2px;
|
||||
color: #d3bc8e;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cont-table {
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cont-table .tr {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
.cont-table .tr:nth-child(even) {
|
||||
background: rgba(0, 0, 0, .4);
|
||||
}
|
||||
|
||||
.cont-table .tr:nth-child(odd) {
|
||||
background: rgba(50, 50, 50, .4);
|
||||
}
|
||||
|
||||
.cont-table .tr > div,
|
||||
.cont-table .tr > td {
|
||||
display: table-cell;
|
||||
box-shadow: 0 0 1px 0 #fff;
|
||||
}
|
||||
|
||||
.cont-table .tr > div.value-full {
|
||||
display: table;
|
||||
width: 200%;
|
||||
}
|
||||
|
||||
.cont-table .tr > div.value-none {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.cont-table .thead {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cont-table .thead > div,
|
||||
.cont-table .thead > td {
|
||||
color: #d3bc8e;
|
||||
background: rgba(0, 0, 0, .4);
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
|
||||
.cont-table .title,
|
||||
.cont-table .th {
|
||||
color: #d3bc8e;
|
||||
padding-right: 15px;
|
||||
text-align: right;
|
||||
background: rgba(0, 0, 0, .4);
|
||||
min-width: 100px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
margin: 20px 0 10px 0;
|
||||
}
|
||||
|
||||
/* item-icon */
|
||||
.item-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
&.artis {
|
||||
.img {
|
||||
width: 84%;
|
||||
height: 84%;
|
||||
margin: 8%;
|
||||
}
|
||||
}
|
||||
|
||||
@stars: 1, 2, 3, 4, 5;
|
||||
each(@stars, {
|
||||
&.star@{value} {
|
||||
background-image: url("../common/item/bg@{value}.png");
|
||||
}
|
||||
&.opacity-bg.star@{value} {
|
||||
background-image: url("../common/item/bg@{value}-o.png");
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
.item-list {
|
||||
display: flex;
|
||||
|
||||
.item-card {
|
||||
width: 70px;
|
||||
background: #e7e5d9;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 12px;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
color: #222;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
padding: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
height: initial;
|
||||
}
|
||||
|
||||
.item-badge {
|
||||
position: absolute;
|
||||
display: block;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
padding: 4px 5px 3px;
|
||||
border-radius: 0 0 6px 0;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB |
@@ -1,332 +0,0 @@
|
||||
.item-card {
|
||||
width: 66px;
|
||||
margin: 4px;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.item-card .badge {
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
position: absolute;
|
||||
right: -4px;
|
||||
top: -4px;
|
||||
background: #e9e5dc;
|
||||
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.8), 2px 2px 2px rgba(50, 50, 50, 0.5);
|
||||
z-index: 10;
|
||||
}
|
||||
.item-card .badge img {
|
||||
width: 140%;
|
||||
left: -27%;
|
||||
top: -45%;
|
||||
overflow: hidden;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
}
|
||||
.item-card .item-bg {
|
||||
width: 100%;
|
||||
padding: 100% 0 0;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
margin: 0;
|
||||
}
|
||||
.item-card .bg1 {
|
||||
background-image: url("./item/bg1.png");
|
||||
border-radius: 5px 5px 15px 0;
|
||||
}
|
||||
.item-card .bg-1 {
|
||||
background-image: url("./item/bg1.png");
|
||||
border-radius: 5px 5px 15px 0;
|
||||
}
|
||||
.item-card .bg2 {
|
||||
background-image: url("./item/bg2.png");
|
||||
border-radius: 5px 5px 15px 0;
|
||||
}
|
||||
.item-card .bg-2 {
|
||||
background-image: url("./item/bg2.png");
|
||||
border-radius: 5px 5px 15px 0;
|
||||
}
|
||||
.item-card .bg3 {
|
||||
background-image: url("./item/bg3.png");
|
||||
border-radius: 5px 5px 15px 0;
|
||||
}
|
||||
.item-card .bg-3 {
|
||||
background-image: url("./item/bg3.png");
|
||||
border-radius: 5px 5px 15px 0;
|
||||
}
|
||||
.item-card .bg4 {
|
||||
background-image: url("./item/bg4.png");
|
||||
border-radius: 5px 5px 15px 0;
|
||||
}
|
||||
.item-card .bg-4 {
|
||||
background-image: url("./item/bg4.png");
|
||||
border-radius: 5px 5px 15px 0;
|
||||
}
|
||||
.item-card .bg5 {
|
||||
background-image: url("./item/bg5.png");
|
||||
border-radius: 5px 5px 15px 0;
|
||||
}
|
||||
.item-card .bg-5 {
|
||||
background-image: url("./item/bg5.png");
|
||||
border-radius: 5px 5px 15px 0;
|
||||
}
|
||||
.item-card .box {
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
background: #e9e5dc;
|
||||
}
|
||||
.item-card .box .item-desc {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
bottom: 0;
|
||||
background: #e9e5dc;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
padding: 0 3px;
|
||||
}
|
||||
.item-card .box .item-desc:last-child {
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
.item-card .box .name {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin-top: 5px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
.item-card .box .item-img {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
.item-card .item-life {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.item-card .life1 {
|
||||
background-color: #62a8ea;
|
||||
}
|
||||
.item-card .life2 {
|
||||
background-color: #62a8ea;
|
||||
}
|
||||
.item-card .life3 {
|
||||
background-color: #62a8ea;
|
||||
}
|
||||
.item-card .life4 {
|
||||
background-color: #ff5722;
|
||||
}
|
||||
.item-card .life5 {
|
||||
background-color: #ff5722;
|
||||
}
|
||||
.avatar-card {
|
||||
margin: 3px;
|
||||
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.8);
|
||||
font-size: 13px;
|
||||
}
|
||||
.avatar-card .card {
|
||||
border-radius: 7px;
|
||||
box-shadow: 0 2px 6px 0 rgba(132, 93, 90, 0.3);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #e7e5d9;
|
||||
width: 70px;
|
||||
}
|
||||
.avatar-card .avatar-face {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 7px 7px 15px 0;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.avatar-card .avatar-face .img {
|
||||
background-position: center bottom;
|
||||
}
|
||||
.avatar-card .avatar-face .avatar-level {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
left: 0;
|
||||
padding: 2px 5px 2px 3px;
|
||||
border-radius: 0 4px 0 0;
|
||||
color: #fff;
|
||||
}
|
||||
.avatar-card .cons {
|
||||
border-radius: 0 0 0 5px;
|
||||
padding: 2px 5px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.avatar-card .avatar-talent {
|
||||
height: 21px;
|
||||
padding: 3px 5px 2px;
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
color: #222;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
}
|
||||
.avatar-card .avatar-talent .talent-item {
|
||||
width: 20px;
|
||||
height: 16px;
|
||||
line-height: 17px;
|
||||
margin: 0 2px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
background-size: contain;
|
||||
opacity: 0.8;
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.avatar-card .avatar-talent .talent-item.talent-plus {
|
||||
font-weight: bold;
|
||||
color: #0284b9;
|
||||
}
|
||||
.avatar-card .avatar-talent .talent-item.talent-crown {
|
||||
background: #d3bc8e;
|
||||
color: #3a2702;
|
||||
box-shadow: 0 0 2px 0 #000;
|
||||
}
|
||||
.avatar-card .avatar-talent.no-talent {
|
||||
font-size: 12px;
|
||||
color: rgba(100, 100, 100, 0.5);
|
||||
text-align: center;
|
||||
padding: 3px 0 2px;
|
||||
}
|
||||
.avatar-card .avatar-talent.no-talent span {
|
||||
transform: scale(0.75);
|
||||
white-space: nowrap;
|
||||
margin-left: -1px;
|
||||
}
|
||||
.avatar-card.card-mini .wide,
|
||||
.avatar-card.card-mini .line {
|
||||
display: none;
|
||||
}
|
||||
.avatar-card .avatar-name {
|
||||
padding: 8px 0 0 5px;
|
||||
color: #333;
|
||||
}
|
||||
.avatar-card .avatar-name strong {
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
height: 23px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.avatar-card .avatar-name .cons {
|
||||
position: initial;
|
||||
border-radius: 4px;
|
||||
padding: 1px 3px;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
.avatar-card.card-wide .mini {
|
||||
display: none;
|
||||
}
|
||||
.avatar-card.card-wide .card {
|
||||
width: 146px;
|
||||
display: flex;
|
||||
}
|
||||
.avatar-card.card-wide .avatar-face {
|
||||
height: 126px;
|
||||
width: 76px;
|
||||
border-radius: 7px 0 0 7px;
|
||||
}
|
||||
.avatar-card.card-wide .img {
|
||||
background-size: 100% auto;
|
||||
background-position: 0 10%;
|
||||
height: 135px;
|
||||
margin-top: -9px;
|
||||
}
|
||||
.avatar-card.card-wide .avatar-info {
|
||||
width: 70px;
|
||||
}
|
||||
.avatar-card.card-wide .line {
|
||||
display: block;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
margin: 5px 0;
|
||||
background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(100, 100, 100, 0.5) 20%, rgba(100, 100, 100, 0.5) 80%, rgba(0, 0, 0, 0));
|
||||
transform: scale(0.8);
|
||||
}
|
||||
.avatar-card.wide2 .card {
|
||||
width: 298px;
|
||||
}
|
||||
.avatar-card.wide2 .avatar-face {
|
||||
width: 146px;
|
||||
}
|
||||
.avatar-card.wide2 .avatar-face .img {
|
||||
margin-top: -50px;
|
||||
height: 176px;
|
||||
}
|
||||
.avatar-card.wide2 .avatar-info {
|
||||
width: 146px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
.avatar-detail {
|
||||
display: flex;
|
||||
padding: 0 1px 2px;
|
||||
}
|
||||
.avatar-detail .item {
|
||||
width: 31px;
|
||||
height: 31px;
|
||||
border-radius: 4px;
|
||||
margin: 1px;
|
||||
}
|
||||
.avatar-weapon .icon {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.avatar-weapon .cons {
|
||||
top: initial;
|
||||
bottom: 0;
|
||||
padding: 1px 3px;
|
||||
border-radius: 3px 0 0 0;
|
||||
}
|
||||
.avatar-artis {
|
||||
position: relative;
|
||||
}
|
||||
.avatar-artis .artis {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.avatar-artis.artis2 .img {
|
||||
position: absolute;
|
||||
transform: scale(0.7);
|
||||
width: 92%;
|
||||
height: 92%;
|
||||
margin: 4%;
|
||||
}
|
||||
.avatar-artis.artis2 .img:first-child {
|
||||
transform-origin: left top;
|
||||
}
|
||||
.avatar-artis.artis2 .img:last-child {
|
||||
transform-origin: right bottom;
|
||||
}
|
||||
.item-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
.item-list .item {
|
||||
width: 65px;
|
||||
}
|
||||
/*# sourceMappingURL=tpl.css.map */
|
||||
@@ -1,12 +0,0 @@
|
||||
@import url('tpl/item-card');
|
||||
@import url('tpl/avatar-card');
|
||||
|
||||
.item-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
.item-list .item {
|
||||
width: 65px;
|
||||
}
|
||||
@@ -1,116 +0,0 @@
|
||||
.arti-detail {
|
||||
width: 185px;
|
||||
border-radius: 10px;
|
||||
background: url("../cont/card-bg.png") top left repeat-x;
|
||||
background-size: auto 100%;
|
||||
margin: 5px;
|
||||
position: relative;
|
||||
box-shadow: 0 0 1px 0 #ccc, 2px 2px 4px 0 rgba(50, 50, 50, 0.8);
|
||||
height: 205px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.arti-detail .arti-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: 3px;
|
||||
}
|
||||
.arti-detail .arti-icon span {
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
bottom: 0;
|
||||
margin-left: 5px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 5px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
padding: 0 3px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
}
|
||||
.arti-detail .arti-icon img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
.arti-detail .head {
|
||||
color: #fff;
|
||||
padding: 12px 0 8px 68px;
|
||||
}
|
||||
.arti-detail .head strong {
|
||||
font-size: 15px;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
font-font: YS;
|
||||
}
|
||||
.arti-detail .head span {
|
||||
font-size: 14px;
|
||||
}
|
||||
.arti-detail .head .mark {
|
||||
font-family: Number, YS;
|
||||
}
|
||||
.arti-detail ul.detail {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
position: initial;
|
||||
font-family: YS;
|
||||
}
|
||||
.arti-detail ul.detail li {
|
||||
padding: 0 3px;
|
||||
font-size: 14px;
|
||||
position: initial;
|
||||
width: 100%;
|
||||
display: table;
|
||||
line-height: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
.arti-detail ul.detail li.nouse span {
|
||||
color: #888;
|
||||
}
|
||||
.arti-detail ul.detail li.arti-main {
|
||||
font-size: 16px;
|
||||
padding: 3px 3px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.arti-detail ul.detail li span {
|
||||
position: initial;
|
||||
display: table-cell;
|
||||
color: #fff;
|
||||
font-family: YS;
|
||||
}
|
||||
.arti-detail ul.detail li.title {
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.arti-detail ul.detail li.val {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
font-family: Number;
|
||||
}
|
||||
.arti-detail ul.detail:nth-child(even) {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.arti-detail ul.detail:nth-child(odd) {
|
||||
background: rgba(50, 50, 50, 0.4);
|
||||
}
|
||||
.arti-detail .avatar {
|
||||
position: absolute;
|
||||
left: 32px;
|
||||
top: 26px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
z-index: 3;
|
||||
}
|
||||
.arti-detail .avatar img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
.arti-detail .arti-icon img {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
}
|
||||
/*# sourceMappingURL=artis-detail.less.map */
|
||||
@@ -1,57 +0,0 @@
|
||||
.avatar-card {
|
||||
margin: 0 0 10px 10px;
|
||||
border-radius: 7px;
|
||||
box-shadow: 0 2px 6px 0 rgba(132, 93, 90, 0.3);
|
||||
height: 88px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #e7e5d9;
|
||||
}
|
||||
.avatar-card img {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 7px 7px 20px 0;
|
||||
}
|
||||
.avatar-card.star5 img {
|
||||
background-image: url(../common/item/bg5.png);
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
/*filter: brightness(1.1);*/
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.avatar-card.star4 img {
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
background-image: url(../common/item/bg4.png);
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.avatar-card .num {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 9;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding: 1px 5px;
|
||||
border-radius: 4px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.avatar-card .name,
|
||||
.avatar-card .num_name {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
line-height: 18px;
|
||||
}
|
||||
.avatar-card .num_name {
|
||||
font-size: 16px;
|
||||
}
|
||||
/*# sourceMappingURL=avatar-card.css.map */
|
||||
@@ -1,53 +0,0 @@
|
||||
{{set avatar = $data[0] || false }}
|
||||
{{set {_res_path, cardType} = $data[1]}}
|
||||
{{set weapon = avatar.weapon || {} }}
|
||||
{{set talentMap = ['a','e','q'] }}
|
||||
|
||||
<div class="avatar-card elem-{{avatar.elem}} avatar-{{avatar.name}} card-{{cardType||'mini'}}">
|
||||
<div class="card">
|
||||
{{if avatar}}
|
||||
<div class="avatar-face item-icon star{{avatar.star==4?4:5}}">
|
||||
<div class="img mini" style="background-image:url({{_res_path}}{{avatar.face}})"></div>
|
||||
<div class="img wide avatar-{{avatar.name}}" style="background-image:url({{_res_path}}{{avatar.gacha}})"></div>
|
||||
<span class="cons cons-{{avatar.cons}} mini">{{avatar.cons}}</span>
|
||||
<div class="avatar-level">Lv{{avatar.level}}</div>
|
||||
</div>
|
||||
<div class="avatar-info">
|
||||
{{set talent = avatar.talent || {} }}
|
||||
{{if talent.a && talent.a.level }}
|
||||
<div class="avatar-name wide">
|
||||
<strong>{{avatar.abbr}}</strong>
|
||||
<span class="cons cons-{{avatar.cons}}">{{avatar.cons}}</span>
|
||||
<span class="avatar-level">Lv{{avatar.level}}</span>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="avatar-talent">
|
||||
{{each talentMap k}}
|
||||
{{set t = talent[k] || {} }} <span
|
||||
class="talent-item talent-{{k}} talent-{{t.original===10?'crown':'none'}} talent-{{t.level>t.original?'plus':'none'}}">{{t.level}}</span>
|
||||
{{/each}}
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="avatar-talent no-talent"><span>暂无天赋数据</span></div>
|
||||
{{/if}}
|
||||
<div class="line"></div>
|
||||
<div class="avatar-detail">
|
||||
<div class="item avatar-weapon">
|
||||
<div class="item-icon star{{weapon.star}}">
|
||||
<span class="img" style="background-image:url({{_res_path}}{{weapon.img}})"></span>
|
||||
<span class="cons cons-{{weapon.affix}}">{{weapon.affix}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item avatar-artis artis{{avatar.artisSet?.names?.length}}">
|
||||
<div class="artis item-icon">
|
||||
{{each avatar.artisSet?.imgs img}}
|
||||
<div class="img" style="background-image:url({{_res_path}}{{img}})"></div>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class="item-info wide"></div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,237 +0,0 @@
|
||||
.avatar-card {
|
||||
margin: 3px;
|
||||
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.8);
|
||||
font-size: 13px;
|
||||
|
||||
|
||||
.card {
|
||||
border-radius: 7px;
|
||||
box-shadow: 0 2px 6px 0 rgb(132 93 90 / 30%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #e7e5d9;
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.avatar-face {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 7px 7px 15px 0;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
box-shadow: 0 0 2px 0 rgba(0, 0, 0, .5);
|
||||
|
||||
.img {
|
||||
background-position: center bottom;
|
||||
}
|
||||
|
||||
|
||||
.avatar-level {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
left: 0;
|
||||
padding: 2px 5px 2px 3px;
|
||||
border-radius: 0 4px 0 0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.cons {
|
||||
border-radius: 0 0 0 5px;
|
||||
padding: 2px 5px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.avatar-talent {
|
||||
height: 21px;
|
||||
padding: 3px 5px 2px;
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
color: #222;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
|
||||
.talent-item {
|
||||
width: 20px;
|
||||
height: 16px;
|
||||
line-height: 17px;
|
||||
margin: 0 2px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
background-size: contain;
|
||||
opacity: 0.8;
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5);
|
||||
|
||||
&.talent-plus {
|
||||
font-weight: bold;
|
||||
color: #0284b9;
|
||||
}
|
||||
|
||||
&.talent-crown {
|
||||
background: #d3bc8e;
|
||||
color: #3a2702;
|
||||
box-shadow: 0 0 2px 0 #000;
|
||||
}
|
||||
}
|
||||
|
||||
&.no-talent {
|
||||
font-size: 12px;
|
||||
color: rgba(100, 100, 100, .5);
|
||||
text-align: center;
|
||||
padding: 3px 0 2px;
|
||||
|
||||
span {
|
||||
transform: scale(.75);
|
||||
white-space: nowrap;
|
||||
margin-left: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.card-mini {
|
||||
.wide, .line {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-name {
|
||||
padding: 8px 0 0 5px;
|
||||
color: #333;
|
||||
|
||||
strong {
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
height: 23px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.cons {
|
||||
position: initial;
|
||||
border-radius: 4px;
|
||||
padding: 1px 3px;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
|
||||
&.card-wide {
|
||||
.mini {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 146px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.avatar-face {
|
||||
height: 126px;
|
||||
width: 76px;
|
||||
border-radius: 7px 0 0 7px;
|
||||
}
|
||||
|
||||
.img {
|
||||
background-size: 100% auto;
|
||||
background-position: 0 10%;
|
||||
height: 135px;
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
.avatar-info {
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.line {
|
||||
display: block;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
margin: 5px 0;
|
||||
background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(100, 100, 100, .5) 20%, rgba(100, 100, 100, .5) 80%, rgba(0, 0, 0, 0));
|
||||
transform: scale(.8)
|
||||
}
|
||||
}
|
||||
|
||||
&.wide2 {
|
||||
.card {
|
||||
width: 298px;
|
||||
}
|
||||
|
||||
.avatar-face {
|
||||
width: 146px;
|
||||
|
||||
.img {
|
||||
margin-top: -50px;
|
||||
height: 176px;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-info {
|
||||
width: 146px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.avatar-detail {
|
||||
display: flex;
|
||||
padding: 0 1px 2px;
|
||||
|
||||
.item {
|
||||
width: 31px;
|
||||
height: 31px;
|
||||
border-radius: 4px;
|
||||
margin: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-weapon {
|
||||
.icon {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.cons {
|
||||
top: initial;
|
||||
bottom: 0;
|
||||
padding: 1px 3px;
|
||||
border-radius: 3px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-artis {
|
||||
position: relative;
|
||||
|
||||
.artis {
|
||||
background: rgba(0, 0, 0, 0.5)
|
||||
}
|
||||
|
||||
&.artis2 {
|
||||
.img {
|
||||
position: absolute;
|
||||
transform: scale(.7);
|
||||
width: 92%;
|
||||
height: 92%;
|
||||
margin: 4%;
|
||||
|
||||
&:first-child {
|
||||
transform-origin: left top;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
transform-origin: right bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -1,204 +0,0 @@
|
||||
.profile {
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.profile:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
top: 115px;
|
||||
bottom: 0;
|
||||
right: 8px;
|
||||
box-shadow: 0 0 2px 0 #fff;
|
||||
border-radius: 5px;
|
||||
z-index: 1;
|
||||
}
|
||||
.profile .main-pic {
|
||||
width: 800px;
|
||||
height: 500px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
margin-left: -260px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.profile .detail {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
color: #fff;
|
||||
z-index: 3;
|
||||
}
|
||||
.profile .char-name {
|
||||
font-size: 50px;
|
||||
font-family: NZBZ;
|
||||
text-shadow: 0 0 3px #000, 2px 2px 4px rgba(0, 0, 0, 0.7);
|
||||
text-align: right;
|
||||
}
|
||||
.profile .char-lv {
|
||||
font-family: Number;
|
||||
margin-bottom: 20px;
|
||||
text-shadow: 0 0 3px #000, 2px 2px 4px rgba(0, 0, 0, 0.7);
|
||||
text-align: right;
|
||||
}
|
||||
.profile .attr {
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.profile .detail li {
|
||||
width: 300px;
|
||||
font-size: 17px;
|
||||
list-style: none;
|
||||
padding: 0 100px 0 35px;
|
||||
position: relative;
|
||||
font-family: YS;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.profile .attr li i {
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background-image: url("../../character/icon.png");
|
||||
background-size: auto 20px;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 8px;
|
||||
opacity: 0.9;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
.profile .i-hp {
|
||||
background-position: -20px 0;
|
||||
}
|
||||
.profile .i-atk {
|
||||
background-position: -40px 0;
|
||||
}
|
||||
.profile .i-def {
|
||||
background-position: -60px 0;
|
||||
}
|
||||
.profile .i-mastery {
|
||||
background-position: -80px 0;
|
||||
}
|
||||
.profile .i-cr {
|
||||
background-position: -100px 0;
|
||||
}
|
||||
.profile .i-cd {
|
||||
background-position: -140px 0;
|
||||
}
|
||||
.profile .i-re {
|
||||
background-position: -120px 0;
|
||||
}
|
||||
.profile .i-dmg {
|
||||
background-position: -160px 0;
|
||||
}
|
||||
.profile .detail li:nth-child(even) {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.profile .detail li:nth-child(odd) {
|
||||
background: rgba(50, 50, 50, 0.4);
|
||||
}
|
||||
.profile .detail li strong {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
right: 85px;
|
||||
text-align: right;
|
||||
font-family: Number, sans-serif;
|
||||
font-weight: normal;
|
||||
}
|
||||
.profile .detail li span {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
text-align: left;
|
||||
width: 75px;
|
||||
display: inline-block;
|
||||
font-family: Number, sans-serif;
|
||||
color: #90e800;
|
||||
font-size: 15px;
|
||||
}
|
||||
.profile .talent-icon {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 5px;
|
||||
display: table;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
z-index: 90;
|
||||
}
|
||||
.profile .talent-icon img,
|
||||
.profile .talent-icon .profile .talent-icon-img {
|
||||
width: 46%;
|
||||
height: 46%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -22% 0 0 -23%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
.profile .talent-icon span {
|
||||
background: #fff;
|
||||
width: 34px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
font-size: 17px;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
left: 50%;
|
||||
margin-left: -15px;
|
||||
color: #000;
|
||||
box-shadow: 0 0 5px 0 #000;
|
||||
font-family: Number;
|
||||
}
|
||||
.profile .talent-icon.talent-plus span {
|
||||
background: #2e353e;
|
||||
color: #ffdfa0;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 0 1px 0 #d3bc8e, 1px 1px 2px 0 rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.profile .talent-icon.talent-crown:after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: url("../character/imgs/crown.png") no-repeat;
|
||||
background-size: contain;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
margin-left: -14px;
|
||||
}
|
||||
.profile .char-talents {
|
||||
display: flex;
|
||||
width: 300px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.profile .char-cons .talent-item,
|
||||
.profile .char-talents .talent-item {
|
||||
flex: 1;
|
||||
}
|
||||
.profile .char-cons {
|
||||
display: flex;
|
||||
width: 250px;
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
left: 20px;
|
||||
}
|
||||
.profile .char-cons .talent-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 0 -5px;
|
||||
}
|
||||
.profile .char-cons .talent-icon.off {
|
||||
filter: grayscale(100%);
|
||||
opacity: 0.4;
|
||||
}
|
||||
/*# sourceMappingURL=avatar-profile-source.css.map */
|
||||
@@ -1,113 +0,0 @@
|
||||
.item-card {
|
||||
width: 52px;
|
||||
margin: 0px 0 5px 7px;
|
||||
position: relative;
|
||||
}
|
||||
.item-card .badge {
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
background: #e9e5dc;
|
||||
box-shadow: 0 2px 6px 0 rgba(132, 93, 90, 0.3);
|
||||
}
|
||||
.item-card .badge img {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
/*filter: contrast(95%);*/
|
||||
}
|
||||
.item-card .bg1 {
|
||||
background-image: url("imgs/bg1.png");
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.item-card .bg2 {
|
||||
background-image: url("imgs/bg2.png");
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.item-card .bg3 {
|
||||
background-image: url("imgs/bg3.png");
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.item-card .bg4 {
|
||||
background-image: url("imgs/bg4.png");
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.item-card .bg5 {
|
||||
background-image: url("imgs/bg5.png");
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.item-card .box:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 15px;
|
||||
right: 0;
|
||||
bottom: 15px;
|
||||
}
|
||||
.item-card .box .desc {
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
background: #e9e5dc;
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
font-family: Number;
|
||||
}
|
||||
.item-card .box .name {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin-top: 5px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
.item-card .life {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 9;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
border-radius: 2px;
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
font-family: "tttgbnumber";
|
||||
}
|
||||
.item-card .life1 {
|
||||
background-color: #62a8ea;
|
||||
}
|
||||
.item-card .life2 {
|
||||
background-color: #62a8ea;
|
||||
}
|
||||
.item-card .life3 {
|
||||
background-color: #62a8ea;
|
||||
}
|
||||
.item-card .life4 {
|
||||
background-color: #ff5722;
|
||||
}
|
||||
.item-card .life5 {
|
||||
background-color: #ff5722;
|
||||
}
|
||||
/*# sourceMappingURL=item-card.less.map */
|
||||
@@ -1,120 +0,0 @@
|
||||
|
||||
.item-card {
|
||||
width: 66px;
|
||||
margin: 4px;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
|
||||
|
||||
.badge {
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
position: absolute;
|
||||
right: -4px;
|
||||
top: -4px;
|
||||
background: #e9e5dc;
|
||||
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.8), 2px 2px 2px rgba(50, 50, 50, .5);
|
||||
z-index: 10;
|
||||
|
||||
|
||||
img {
|
||||
width: 140%;
|
||||
left: -27%;
|
||||
top: -45%;
|
||||
overflow: hidden;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.item-bg {
|
||||
width: 100%;
|
||||
padding: 100% 0 0;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
each(range(5), {
|
||||
.bg@{value} {
|
||||
background-image: url("./item/bg@{value}.png");
|
||||
border-radius: 5px 5px 15px 0;
|
||||
}
|
||||
.bg-@{value} {
|
||||
background-image: url("./item/bg@{value}.png");
|
||||
border-radius: 5px 5px 15px 0;
|
||||
}
|
||||
})
|
||||
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
background: #e9e5dc;
|
||||
|
||||
.item-desc {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
bottom: 0;
|
||||
background: #e9e5dc;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
padding: 0 3px;
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin-top: 5px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.item-img {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.item-life {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding: 1px 4px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.life(@idx, @color) {
|
||||
.life@{idx} {
|
||||
background-color: @color;
|
||||
}
|
||||
}
|
||||
|
||||
.life(1, #62a8ea);
|
||||
.life(2, #62a8ea);
|
||||
.life(3, #62a8ea);
|
||||
.life(4, #ff5722);
|
||||
.life(5, #ff5722);
|
||||
}
|
||||
|
||||
@@ -1,61 +0,0 @@
|
||||
{{set ds = $data[0] || false }}
|
||||
{{set {_res_path, icon,lvs,type} = $data[1]}}
|
||||
|
||||
<div class="talent-line">
|
||||
<div class="talent-icon">
|
||||
<img src="{{_res_path}}{{icon}}"/>
|
||||
</div>
|
||||
<div class="talent-info">
|
||||
<div class="talent-name">{{ds.name}}</div>
|
||||
<div class="talent-desc">
|
||||
{{each ds.desc d}}
|
||||
{{ if d[0] === "<" }}
|
||||
{{@d}}
|
||||
{{else if d!=""}}
|
||||
<p>{{d}}</p>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{if ds.tables && ds.tables.length > 0}}
|
||||
<div class="talent-common-info">
|
||||
{{each ds.tables tr}}
|
||||
{{if tr.isSame}}
|
||||
<div>
|
||||
<strong>{{tr.name}}{{if tr.unit}}({{tr.unit}}){{/if}}</strong>
|
||||
<span>{{tr.values[0]}}</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
</div>
|
||||
<table class="talent-table cont-table">
|
||||
<tr class="tr">
|
||||
<td class="th"></td>
|
||||
{{each lvs lv idx}}
|
||||
{{if (type=="a" && idx>4 && idx<11) || (type!="a" && idx>4 && idx < 13)}}
|
||||
<td class="th lv">{{lv}}</td>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
</tr>
|
||||
{{each ds.tables tr}}
|
||||
{{if !tr.isSame}}
|
||||
<tr class="tr">
|
||||
<td class="th talent-name">
|
||||
{{tr.name}}
|
||||
{{if tr.unit}}
|
||||
<span class="unit">({{tr.unit}})</span>
|
||||
{{/if}}
|
||||
</td>
|
||||
|
||||
{{each tr.values v idx}}
|
||||
{{if (type=="a" && idx>4 && idx<11) || (type!="a" && idx>4 && idx < 13)}}
|
||||
<td class="td">{{v}}</td>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
</tr>
|
||||
{{/each}}
|
||||
</table>
|
||||
{{/if}}
|
||||
</div>
|
||||
@@ -1,264 +1,239 @@
|
||||
:root {
|
||||
--high-color: #d73403;
|
||||
--medium-color: #ffa500;
|
||||
--low-color: #90ee90;
|
||||
--high-color: #d73403;
|
||||
--medium-color: #ffa500;
|
||||
--low-color: #90ee90;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: url("https://api.ghser.com/random/pe.php") white center top no-repeat;
|
||||
background-size: cover;
|
||||
background-image: url("https://api.ghser.com/random/pe.php");
|
||||
background-color: white;
|
||||
background-position: center top;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
/* width: 500px !important; */
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.box {
|
||||
margin: 20px;
|
||||
padding: 10px;
|
||||
background: rgba(255, 255, 255, 0.45);
|
||||
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
font-weight: 700;
|
||||
margin: 20px;
|
||||
padding: 10px;
|
||||
background: rgba(255, 255, 255, 0.45);
|
||||
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.tb {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tb .avatar {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
border-radius: 50%;
|
||||
margin-right: 20px;
|
||||
/* box-shadow: 1px 1px 3px 0 #000; */
|
||||
position: relative;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
border-radius: 50%;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.tb .avatar img {
|
||||
width: 100%;
|
||||
border-radius: 50%;
|
||||
width: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.tb .avatar::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
margin: -3px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 1px 1px 3px 0 #000;
|
||||
background: linear-gradient(135deg, #fff1eb, #ace0f9);
|
||||
/* background-size: 120%; */
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
margin: -3px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 1px 1px 3px 0 #000;
|
||||
background: linear-gradient(135deg, #fff1eb, #ace0f9);
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
height: 2px;
|
||||
background-image: linear-gradient(135deg, #bdc3c7 10%, #2c3e50);
|
||||
border-radius: 10px;
|
||||
border: 0;
|
||||
height: 2px;
|
||||
background-image: linear-gradient(135deg, #bdc3c7 10%, #2c3e50);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.header {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header hr {
|
||||
margin: 5px 0px;
|
||||
margin: 5px 0px;
|
||||
}
|
||||
|
||||
.header p {
|
||||
font-size: 12px;
|
||||
color: #2f4f4f;
|
||||
font-size: 12px;
|
||||
color: #2f4f4f;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
background-image: linear-gradient(271.14deg,
|
||||
#001BFF 0.98%,
|
||||
#00F0FF 25.79%,
|
||||
#FCE84A 47.33%,
|
||||
#F34628 65.77%,
|
||||
#B275FF 91.4%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
background-image: linear-gradient(271.14deg, #001bff 0.98%, #00f0ff 25.79%, #fce84a 47.33%, #f34628 65.77%, #b275ff 91.4%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.info {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
font-weight: 700;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
font-weight: 700;
|
||||
}
|
||||
.info .li article {
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
.info .li article summary {
|
||||
font-size: 20px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.info .li article p {
|
||||
font-size: 12px;
|
||||
color: #2f4f4f;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cpu {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #eee;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #eee;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left,
|
||||
.right {
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
/* background: black; */
|
||||
overflow: hidden;
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.right {
|
||||
right: 0;
|
||||
right: 0;
|
||||
}
|
||||
.right .right-circle {
|
||||
border-top-right-radius: 100px;
|
||||
border-bottom-right-radius: 100px;
|
||||
transform: rotate(180deg);
|
||||
transform-origin: left center;
|
||||
}
|
||||
|
||||
.left .left-circle,
|
||||
.right .right-circle {
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
background: #90ee90;
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
background: #90ee90;
|
||||
}
|
||||
|
||||
.left .left-circle {
|
||||
border-top-left-radius: 100px;
|
||||
border-bottom-left-radius: 100px;
|
||||
transform: rotate(-180deg);
|
||||
transform-origin: right center;
|
||||
}
|
||||
|
||||
.right .right-circle {
|
||||
border-top-right-radius: 100px;
|
||||
border-bottom-right-radius: 100px;
|
||||
transform: rotate(180deg);
|
||||
transform-origin: left center;
|
||||
border-top-left-radius: 100px;
|
||||
border-bottom-left-radius: 100px;
|
||||
transform: rotate(-180deg);
|
||||
transform-origin: right center;
|
||||
}
|
||||
|
||||
.inner {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: 75px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #999;
|
||||
font-size: 20px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.info .li article {
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.info .li article summary {
|
||||
font-size: 20px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.info .li article p {
|
||||
font-size: 12px;
|
||||
color: #2f4f4f;
|
||||
white-space: nowrap;
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: 75px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #999;
|
||||
font-size: 20px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.memory li {
|
||||
margin: 10px;
|
||||
display: flex;
|
||||
margin: 10px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.memory hr {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.memory .progress {
|
||||
flex: 1;
|
||||
/* width: 100%; */
|
||||
height: 25px;
|
||||
background: #c1c1c1;
|
||||
margin: 0 5px;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
flex: 1;
|
||||
height: 25px;
|
||||
background: #c1c1c1;
|
||||
margin: 0 5px;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.progress .current {
|
||||
background: #90ee90;
|
||||
height: 25px;
|
||||
border-radius: 5px;
|
||||
background: #90ee90;
|
||||
height: 25px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.progress .word {
|
||||
position: absolute;
|
||||
line-height: 25px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
line-height: 25px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.HardDisk_li .mount {
|
||||
min-width: 15px;
|
||||
max-width: 3em;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
line-height: 25px;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-width: 15px;
|
||||
max-width: 3em;
|
||||
line-height: 25px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.HardDisk_li .percentage {
|
||||
min-width: 2em;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
min-width: 2em;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.speed {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.speed p {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.speed p:first-child {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
max-width: 50%;
|
||||
text-align: left;
|
||||
margin-right: 20px;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
max-width: 50%;
|
||||
text-align: left;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.speed p:last-child {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
margin-left: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
margin-left: 20px;
|
||||
text-align: right;
|
||||
}/*# sourceMappingURL=state.css.map */
|
||||
271
resources/state/state.scss
Normal file
271
resources/state/state.scss
Normal file
@@ -0,0 +1,271 @@
|
||||
@mixin text-overflow-mission {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
:root {
|
||||
--high-color: #d73403;
|
||||
--medium-color: #ffa500;
|
||||
--low-color: #90ee90;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: {
|
||||
image: url('https://api.ghser.com/random/pe.php');
|
||||
color: white;
|
||||
position: center top;
|
||||
repeat: no-repeat;
|
||||
size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.box {
|
||||
margin: 20px;
|
||||
padding: 10px;
|
||||
background: rgba(255, 255, 255, 0.45);
|
||||
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.tb {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.avatar {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
border-radius: 50%;
|
||||
margin-right: 20px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
margin: -3px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 1px 1px 3px 0 #000;
|
||||
background: linear-gradient(135deg, #fff1eb, #ace0f9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
height: 2px;
|
||||
background-image: linear-gradient(135deg, #bdc3c7 10%, #2c3e50);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.header {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
hr {
|
||||
margin: 5px 0px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
color: #2f4f4f;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@include text-overflow-mission();
|
||||
display: inline-block;
|
||||
background-image: linear-gradient(271.14deg,
|
||||
#001bff 0.98%,
|
||||
#00f0ff 25.79%,
|
||||
#fce84a 47.33%,
|
||||
#f34628 65.77%,
|
||||
#b275ff 91.4%);
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
font-weight: 700;
|
||||
|
||||
.li {
|
||||
article {
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
|
||||
summary {
|
||||
font-size: 20px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
color: #2f4f4f;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cpu {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #eee;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left,
|
||||
.right {
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.right {
|
||||
right: 0;
|
||||
|
||||
.right-circle {
|
||||
border-top-right-radius: 100px;
|
||||
border-bottom-right-radius: 100px;
|
||||
transform: rotate(180deg);
|
||||
transform-origin: left center;
|
||||
}
|
||||
}
|
||||
|
||||
.left .left-circle,
|
||||
.right .right-circle {
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
background: #90ee90;
|
||||
}
|
||||
|
||||
.left {
|
||||
.left-circle {
|
||||
border-top-left-radius: 100px;
|
||||
border-bottom-left-radius: 100px;
|
||||
transform: rotate(-180deg);
|
||||
transform-origin: right center;
|
||||
}
|
||||
}
|
||||
|
||||
.inner {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: 75px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #999;
|
||||
font-size: 20px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.memory {
|
||||
li {
|
||||
margin: 10px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.progress {
|
||||
flex: 1;
|
||||
height: 25px;
|
||||
background: #c1c1c1;
|
||||
margin: 0 5px;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
.current {
|
||||
background: #90ee90;
|
||||
height: 25px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.word {
|
||||
position: absolute;
|
||||
line-height: 25px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.HardDisk_li {
|
||||
.mount {
|
||||
@include text-overflow-mission();
|
||||
min-width: 15px;
|
||||
max-width: 3em;
|
||||
line-height: 25px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.percentage {
|
||||
min-width: 2em;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.speed {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
|
||||
p {
|
||||
@include text-overflow-mission();
|
||||
|
||||
&:first-child {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
max-width: 50%;
|
||||
text-align: left;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
margin-left: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user