sinvo/lifeRestart
1
0
Fork 0
mirror of https://github.com/VickScarlet/lifeRestart.git synced 2026-03-25 08:34:16 +08:00
Code Issues Projects Releases Wiki Activity

style:优化页面布局

Browse Source
This commit is contained in:
wuweihui
2021-09-08 21:24:41 +08:00
parent e420fdf8fd
commit bbb49741cf
5 changed files with 928 additions and 693 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/bundle.js
View File

File diff suppressed because one or more lines are too long

73
src/app.js
View File

@@ -110,7 +110,7 @@ class App{
<ul class="g1"></ul> <ul class="g1"></ul>
<ul class="g2"></ul> <ul class="g2"></ul>
</div> </div>
<button id="sponsor" onclick="window.open('https://afdian.net/@LifeRestart')">打赏作者</button> <button id="sponsor" class="mainBtn" onclick="window.open('https://afdian.net/@LifeRestart')">打赏作者</button>
</div> </div>
`); `);
@@ -122,9 +122,9 @@ class App{
const talentPage = $(` const talentPage = $(`
<div id="main"> <div id="main">
<div class="head" style="font-size: 1.6rem">天赋抽卡</div> <div class="head" style="font-size: 1.6rem">天赋抽卡</div>
<button id="random" class="mainbtn" style="top: 50%;">10连抽！</button> <button id="random" class="mainbtn" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);"">10连抽！</button>
<ul id="talents" class="selectlist"></ul> <ul id="talents" class="selectlist"></ul>
<button id="next" class="mainbtn" style="top:auto; bottom:0.1em">请选择3个</button> <button id="next" class="mainbtn">请选择3个</button>
</div> </div>
`); `);
@@ -175,6 +175,7 @@ class App{
} }
}); });
}); });
talentPage.find('#next').show()
}); });
talentPage talentPage
@@ -184,6 +185,7 @@ class App{
this.hint('请选择3个天赋'); this.hint('请选择3个天赋');
return; return;
} }
talentPage.find('#next').hide()
this.#totalMax = 20 + this.#life.getTalentAllocationAddition(Array.from(this.#talentSelected).map(({id})=>id)); this.#totalMax = 20 + this.#life.getTalentAllocationAddition(Array.from(this.#talentSelected).map(({id})=>id));
this.switch('property'); this.switch('property');
}) })
@@ -193,13 +195,15 @@ class App{
const propertyPage = $(/*html*/` const propertyPage = $(/*html*/`
<div id="main"> <div id="main">
<div class="head" style="font-size: 1.6rem"> <div class="head" style="font-size: 1.6rem">
调整初始属性<br> <div>调整初始属性</div>
<div id="total" style="font-size:1rem; font-weight:normal;">可用属性点：0</div> <div id="total" style="font-size:1rem; font-weight:normal;">可用属性点：0</div>
</div> </div>
<ul id="propertyAllocation" class="propinitial"></ul> <ul id="propertyAllocation" class="propinitial"></ul>
<ul class="selectlist" id="talentSelectedView" style="top:calc(100% - 17rem); bottom:7rem"></ul> <ul class="selectlist" id="talentSelectedView"></ul>
<button id="random" class="mainbtn" style="top:auto; bottom:0.1rem; left:auto; right:50%; transform: translate(-2rem,-50%);">随机分配</button> <div class="btn-area">
<button id="start" class="mainbtn" style="top:auto; bottom:0.1rem; left:50%; right:auto; transform: translate(2rem,-50%);">开始新人生</button> <button id="random" class="mainbtn">随机分配</button>
<button id="start" class="mainbtn">开始新人生</button>
</div>
</div> </div>
`); `);
propertyPage.mounted = ()=>{ propertyPage.mounted = ()=>{
@@ -329,8 +333,10 @@ class App{
<div id="main"> <div id="main">
<ul id="lifeProperty" class="lifeProperty"></ul> <ul id="lifeProperty" class="lifeProperty"></ul>
<ul id="lifeTrajectory" class="lifeTrajectory"></ul> <ul id="lifeTrajectory" class="lifeTrajectory"></ul>
<button id="summary" class="mainbtn" style="top:auto; bottom:0.1rem; left:auto; right:50%; transform: translate(-2rem,-50%);">人生总结</button> <div class="btn-area">
<button id="domToImage" class="mainbtn" style="top:auto; bottom:0.1rem; left:50%; right:auto; transform: translate(2rem,-50%); display: none;">人生回放</button> <button id="summary" class="mainbtn">人生总结</button>
<button id="domToImage" class="mainbtn">人生回放</button>
</div>
<div class="domToImage2wx"> <div class="domToImage2wx">
<img src="" id="endImage" /> <img src="" id="endImage" />
</div> </div>
@@ -343,7 +349,7 @@ class App{
if(this.#isEnd) return; if(this.#isEnd) return;
const trajectory = this.#life.next(); const trajectory = this.#life.next();
const { age, content, isEnd } = trajectory; const { age, content, isEnd } = trajectory;
const li = $(`<li><span>${age}岁：</span>${ const li = $(`<li><span>${age}岁：</span><span>${
content.map( content.map(
({type, description, grade, name, postEvent}) => { ({type, description, grade, name, postEvent}) => {
switch(type) { switch(type) {
@@ -354,7 +360,7 @@ class App{
} }
} }
).join('<br>') ).join('<br>')
}</li>`); }</span></li>`);
li.appendTo('#lifeTrajectory'); li.appendTo('#lifeTrajectory');
$("#lifeTrajectory").scrollTop($("#lifeTrajectory")[0].scrollHeight); $("#lifeTrajectory").scrollTop($("#lifeTrajectory")[0].scrollHeight);
if(isEnd) { if(isEnd) {
@@ -367,11 +373,12 @@ class App{
// Update properties if not die yet // Update properties if not die yet
const property = this.#life.getLastRecord(); const property = this.#life.getLastRecord();
$("#lifeProperty").html(` $("#lifeProperty").html(`
<li>颜值：${property.CHR} </li> <li><span>颜值</span><span>${property.CHR}</span></li>
<li>智力：${property.INT} </li> <li><span>智力</span><span>${property.INT}</span</li>
<li>体质：${property.STR} </li> <li><span>体质</span><span>${property.STR}</span</li>
<li>家境：${property.MNY} </li> <li><span>家境</span><span>${property.MNY}</span</li>
<li>快乐：${property.SPR} </li>`); <li><span>快乐</span><span>${property.SPR}</span</li>
`);
} }
}); });
// html2canvas // html2canvas
@@ -404,19 +411,19 @@ class App{
const summaryPage = $(` const summaryPage = $(`
<div id="main"> <div id="main">
<div class="head">人生总结</div> <div class="head">人生总结</div>
<ul id="judge" class="judge" style="bottom: calc(35% + 2.5rem)"> <ul id="judge" class="judge">
<li class="grade2"><span>颜值：</span>9级 美若天仙</li> <li class="grade2"><span>颜值：</span><span>9级 美若天仙</span></li>
<li><span>智力：</span>4级 智力一般</li> <li class="grade0"><span>智力：</span><span>4级 智力一般</span></li>
<li><span>体质：</span>1级 极度虚弱</li> <li class="grade0"><span>体质：</span><span>1级 极度虚弱</span></li>
<li><span>家境：</span>6级 小康之家</li> <li class="grade0"><span>家境：</span><span>6级 小康之家</span></li>
<li><span>享年：</span>3岁 早夭</li> <li class="grade0"><span>享年：</span><span>3岁 早夭</span></li>
<li><span>快乐：</span>3级 不太幸福的人生</li> <li class="grade0"><span>快乐：</span><span></span>3级 不太幸福的人生</li>
</ul> </ul>
<div class="head" style="top:auto; bottom:35%">天赋，你可以选一个，下辈子还能抽到</div> <div class="head" style="height:auto;">天赋，你可以选一个，下辈子还能抽到</div>
<ul id="talents" class="selectlist" style="top:calc(65% + 0.5rem); bottom:8rem"> <ul id="talents" class="selectlist" style="flex: 0 1 auto;">
<li class="grade2b">黑幕（面试一定成功）</li> <li class="grade2b">黑幕（面试一定成功）</li>
</ul> </ul>
<button id="again" class="mainbtn" style="top:auto; bottom:0.1em"><span class="iconfont">&#xe6a7;</span>再次重开</button> <button id="again" class="mainbtn"><span class="iconfont">&#xe6a7;</span>再次重开</button>
</div> </div>
`); `);
@@ -574,33 +581,33 @@ class App{
judge.append([ judge.append([
(()=>{ (()=>{
const { judge, grade, value } = s('CHR', max); const { judge, grade, value } = s('CHR', max);
return `<li class="grade${grade}"><span>颜值：</span>${value} ${judge}</li>` return `<li class="grade${grade}"><span>颜值：</span><span>${value} ${judge}</span></li>`
})(), })(),
(()=>{ (()=>{
const { judge, grade, value } = s('INT', max); const { judge, grade, value } = s('INT', max);
return `<li class="grade${grade}"><span>智力：</span>${value} ${judge}</li>` return `<li class="grade${grade}"><span>智力：</span><span>${value} ${judge}</span></li>`
})(), })(),
(()=>{ (()=>{
const { judge, grade, value } = s('STR', max); const { judge, grade, value } = s('STR', max);
return `<li class="grade${grade}"><span>体质：</span>${value} ${judge}</li>` return `<li class="grade${grade}"><span>体质：</span><span>${value} ${judge}</span></li>`
})(), })(),
(()=>{ (()=>{
const { judge, grade, value } = s('MNY', max); const { judge, grade, value } = s('MNY', max);
return `<li class="grade${grade}"><span>家境：</span>${value} ${judge}</li>` return `<li class="grade${grade}"><span>家境：</span><span>${value} ${judge}</span></li>`
})(), })(),
(()=>{ (()=>{
const { judge, grade, value } = s('SPR', max); const { judge, grade, value } = s('SPR', max);
return `<li class="grade${grade}"><span>快乐：</span>${value} ${judge}</li>` return `<li class="grade${grade}"><span>快乐：</span><span>${value} ${judge}</span></li>`
})(), })(),
(()=>{ (()=>{
const { judge, grade, value } = s('AGE', max); const { judge, grade, value } = s('AGE', max);
return `<li class="grade${grade}"><span>享年：</span>${value} ${judge}</li>` return `<li class="grade${grade}"><span>享年：</span><span>${value} ${judge}</span></li>`
})(), })(),
(()=>{ (()=>{
const m = type=>max(records.map(({[type]: value})=>value)); const m = type=>max(records.map(({[type]: value})=>value));
const value = Math.floor(sum(m('CHR'), m('INT'), m('STR'), m('MNY'), m('SPR'))*2 + m('AGE')/2); const value = Math.floor(sum(m('CHR'), m('INT'), m('STR'), m('MNY'), m('SPR'))*2 + m('AGE')/2);
const { judge, grade } = summary('SUM', value); const { judge, grade } = summary('SUM', value);
return `<li class="grade${grade}"><span>总评：</span>${value} ${judge}</li>` return `<li class="grade${grade}"><span>总评：</span><span>${value} ${judge}</span></li>`
})(), })(),
].join('')); ].join(''));
} }

386
view/dark.css
View File

@@ -43,6 +43,11 @@
url('iconfont.ttf?t=1628944689555') format('truetype'); url('iconfont.ttf?t=1628944689555') format('truetype');
} }
* {
margin: 0;
padding: 0;
}
html { html {
background-color: #222831; background-color: #222831;
font-family: PingFangSC, 'Noto Sans CJK SC', 'MS Yahei'; font-family: PingFangSC, 'Noto Sans CJK SC', 'MS Yahei';
@@ -53,9 +58,13 @@ body {
} }
#main { #main {
align-content: center; display: flex;
flex-direction: column;
width: 100%; width: 100%;
max-width: 30rem;
height: 100%; height: 100%;
text-align: center;
box-sizing: border-box;
position: relative; position: relative;
} }
@@ -67,24 +76,38 @@ body {
left: 50%; left: 50%;
white-space: nowrap; white-space: nowrap;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
text-align: center;
color: #EEEEEE; color: #EEEEEE;
} }
.mainbtn { #restart {
position: fixed; position: fixed;
top: 65%; top: 65%;
left: 50%; left: 50%;
transform: translate(-50%, -50%);
}
#restart .iconfont {
margin-right: 0.5rem;
}
#next {
display: none;
}
#talentSelectedView {
flex: 0 1 auto;
}
.mainbtn {
margin: 0.5rem 1rem 1rem;
padding: 0.5rem 1.5rem; padding: 0.5rem 1.5rem;
background-color: #393E46;
border: 1px #EEEEEE solid; border: 1px #EEEEEE solid;
border-radius: 0.2rem; border-radius: 0.2rem;
background-color:#393E46; color: #EEEEEE;
font-size: 1.6rem; font-size: 1.6rem;
white-space: nowrap; white-space: nowrap;
transform: translate(-50%,-50%);
cursor: pointer; cursor: pointer;
z-index:2;
color: #EEEEEE;
} }
.mainbtn:hover { .mainbtn:hover {
@@ -93,14 +116,24 @@ body {
transition: all .4s ease 0s; transition: all .4s ease 0s;
} }
.btn-area {
display: flex;
flex-direction: row;
}
.btn-area>.mainbtn {
flex: 1;
}
.iconfont { .iconfont {
display: inline-block;
vertical-align: middle;
font-family: "iconfont" !important; font-family: "iconfont" !important;
font-style: normal; font-style: normal;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
#sponsor,
#specialthanks, #specialthanks,
#rank { #rank {
position: fixed; position: fixed;
@@ -124,10 +157,10 @@ body {
} }
#sponsor { #sponsor {
top: auto; position: fixed;
bottom: 0; bottom: 0;
right: 50%; left: 0;
transform: translate(50%, -50%); right: 0;
} }
#spthx { #spthx {
@@ -186,99 +219,97 @@ body {
} }
#themeToggleBtn { #themeToggleBtn {
position: fixed; padding: 0 0.7rem;
right: 1rem; width: 6.5rem;
bottom: 1rem;
padding: 0.1rem 1rem;
border: none;
border-radius: 0.2rem;
background-color:#EEEEEE; background-color:#EEEEEE;
border: none;
border-radius: 4px;
font-size: 1.4rem; font-size: 1.4rem;
color: #222831; color: #222831;
line-height: 2.5rem;
text-align: center;
vertical-align: middle;
cursor: pointer; cursor: pointer;
position: fixed;
z-index:2; z-index:2;
right: 0.5rem;
bottom: 0.5rem;
} }
.head { .head {
position: fixed; display: flex;
flex-direction: column;
justify-content: center;
height: 5.2rem;
font-size: 1.4rem; font-size: 1.4rem;
top: 1.1rem;
left: 50%;
white-space: nowrap; white-space: nowrap;
transform: translateX(-50%);
text-align: center;
color: #EEEEEE; color: #EEEEEE;
} }
.judge,
.lifeTrajectory,
.propinitial, .propinitial,
.selectlist { .selectlist {
position: fixed; list-style: none;
list-style-type: none; flex: 1;
left: 50%; padding: 1rem;
top: 5rem;
bottom: 8.5rem;
width: 30rem;
max-width: calc(100% - 2rem);
margin: auto;
padding: 0;
overflow: auto; overflow: auto;
transform: translateX(-50%);
text-align: center;
} }
.lifeProperty { .lifeProperty {
position: fixed; list-style: none;
list-style-type: none; padding: 2rem 1rem 0.5rem 4rem;
left: 50%;
top: 2rem;
width: 30rem;
max-width: calc(100% - 2rem);
padding: 0;
overflow: auto;
transform: translateX(-50%);
display: flex; display: flex;
color: white; color: #FFFFFF;
overflow: auto;
} }
.lifeProperty>li { .lifeProperty>li {
width: 100%; flex: 1;
position: relative;
border: 1px #ccc solid;
display: inline-block;
margin: 0.1rem 2px; margin: 0.1rem 2px;
font-size: 1rem; display: flex;
text-align: center; flex-direction: column;
border: 1px #ccc solid;
border-radius: 0.2rem; border-radius: 0.2rem;
font-size: 1rem;
position: relative;
}
.lifeProperty>li>span:last-child {
background: #eee;
color: #666;
} }
.selectlist>li { .selectlist>li {
position: relative; margin-bottom: 0.6rem;
display: block;
border: 1px #EEEEEE solid; border: 1px #EEEEEE solid;
display: inline-block;
width: 95%;
margin: 0.1rem auto;
font-size: 1.4rem;
text-align: center;
border-radius: 0.2rem; border-radius: 0.2rem;
cursor: pointer;
color: #EEEEEE; color: #EEEEEE;
font-size: 1.2rem;
line-height: 1.6;
user-select: none; user-select: none;
position: relative;
cursor: pointer;
}
.selectlist>li:last-child {
margin-bottom: 0;
} }
.grade0b { .grade0b {
background-color: #464646; background-color: #464646;
border: #f8f8f8 2px solid !important; border: #f8f8f8 2px solid !important;
} }
.grade1b { .grade1b {
background-color: #6495ed; background-color: #6495ed;
border: #f8f8f8 2px solid !important; border: #f8f8f8 2px solid !important;
} }
.grade2b { .grade2b {
background-color: #e2a7ff; background-color: #e2a7ff;
border: #f8f8f8 2px solid !important; border: #f8f8f8 2px solid !important;
} }
.grade3b { .grade3b {
background-color: #ffa07a; background-color: #ffa07a;
border: #f8f8f8 2px solid !important; border: #f8f8f8 2px solid !important;
@@ -290,22 +321,26 @@ body {
color: #3b3b3b; color: #3b3b3b;
transition: all .3s ease 0s; transition: all .3s ease 0s;
} }
.grade1b:hover { .grade1b:hover {
background-color: #87cefa; background-color: #87cefa;
color: #3b3b3b; color: #3b3b3b;
transition: all .3s ease 0s; transition: all .3s ease 0s;
} }
.grade2b:hover { .grade2b:hover {
background-color: #e7beff; background-color: #e7beff;
color: #3b3b3b; color: #3b3b3b;
transition: all .3s ease 0s; transition: all .3s ease 0s;
} }
.grade3b:hover { .grade3b:hover {
background-color: #f7a989; background-color: #f7a989;
color: #3b3b3b; color: #3b3b3b;
transition: all .3s ease 0s; transition: all .3s ease 0s;
} }
} }
.grade0b.selected { .grade0b.selected {
background-color: #c0c0c0 !important; background-color: #c0c0c0 !important;
box-shadow: #ccc 0px 0px 10px; box-shadow: #ccc 0px 0px 10px;
@@ -330,22 +365,10 @@ body {
color: #3b3b3b; color: #3b3b3b;
} }
.judge > li.grade1 span,
.judge > li.grade1{
background-color: #87cefa;
}
.judge > li.grade2 span,
.judge > li.grade2{
background-color: #e7beff;
}
.judge > li.grade3 span,
.judge > li.grade3{
background-color: #f7a989;
}
.propinitial { .propinitial {
top: 5rem; display: flex;
bottom: 17rem; flex-direction: column;
justify-content: center;
} }
.propbtn:hover { .propbtn:hover {
@@ -355,14 +378,13 @@ body {
.propinitial>li { .propinitial>li {
position: relative; position: relative;
display: inline-block;
width: 95%;
margin: 0.1rem auto; margin: 0.1rem auto;
font-size: 1.4rem;
text-align: center;
border-radius: 0.2rem;
padding: 0.2rem; padding: 0.2rem;
display: inline-block;
border-radius: 0.2rem;
color: #EEEEEE; color: #EEEEEE;
font-size: 1.6rem;
line-height: 2;
} }
.propinitial>li>input { .propinitial>li>input {
@@ -370,11 +392,11 @@ body {
width: 2.2rem; width: 2.2rem;
margin: 0 0.5rem; margin: 0 0.5rem;
padding: 0; padding: 0;
text-align: center;
font-size: 2rem; font-size: 2rem;
border: 0.1rem #EEEEEE solid; border: 0.1rem #EEEEEE solid;
background-color: #393E46; background-color: #393E46;
color: #EEEEEE; color: #EEEEEE;
text-align: center;
} }
.propbtn { .propbtn {
@@ -384,49 +406,85 @@ body {
color: #EEEEEE; color: #EEEEEE;
} }
.lifeTrajectory { .judge>li>span:nth-child(1),
border: 1px #9b9b9b solid; .lifeTrajectory>li>span:nth-child(1) {
background-color: #393E46; width: 5rem;
border-radius: 10px; text-align: right;
}
.judge>li>span:nth-child(2),
.lifeTrajectory>li>span:nth-child(2) {
flex: 1;
text-align: left;
}
.lifeTrajectory {
flex: 1;
margin: 0.5rem 1rem;
padding: 0;
border: 1px #9b9b9b solid;
background-color: #393E46;
border-radius: 4px;
overflow: auto;
} }
.judge > li,
.lifeTrajectory>li { .lifeTrajectory>li {
position: relative; margin: 10px 0;
width: calc(100% - 7rem); padding: 5px 10px;
margin: 0.5rem 0; display: flex;
padding: 0.5rem 1rem 0.5rem 6rem;
font-size: 1.4rem;
background-color: #4a5361; background-color: #4a5361;
box-shadow: #EEEEEE 0 0 0.4rem; box-shadow: #EEEEEE 0 0 0.4rem;
color: #EEEEEE; color: #EEEEEE;
font-size: 1rem;
position: relative;
} }
.judge > li > span,
.lifeTrajectory > li > span { .judge {
position: absolute; list-style: none;
left: 0; flex: 1;
width: 6rem; margin: 1rem;
text-align: right; display: flex;
flex-direction: column;
border: 1px solid #EEEEEE;
border-radius: 4px;
overflow: hidden;
} }
.judge>li { .judge>li {
box-shadow: #EEEEEE 0 0 0.4rem; flex: 1;
width: calc(100% - 9rem); display: flex;
margin: 0.5rem; align-items: center;
padding: 0.5rem 1rem 0.5rem 7rem; background-color: #4a5361;
border-radius: 10px; border-bottom: 1px solid #EEEEEE;
box-shadow: none;
color: #EEEEEE;
} }
.judge > li > span { .judge>li:last-child {
height: calc(100% - 1rem); border-bottom: 0
padding: 0.5rem 0; }
top: 0;
border-radius: 10px; .judge>li.grade1 span,
.judge>li.grade1 {
background-color: #87cefa;
color: #4a5361;
}
.judge>li.grade2 span,
.judge>li.grade2 {
background-color: #e7beff;
color: #4a5361;
}
.judge>li.grade3 span,
.judge>li.grade3 {
background-color: #f7a989;
color: #4a5361;
} }
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700"); @import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
:root { :root {
font-family: "Montserrat"; font-family: "Montserrat";
} }
@@ -463,12 +521,14 @@ i {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
} }
.banner .banner-message { .banner .banner-message {
flex: 1; flex: 1;
padding: 0 2rem; padding: 0 2rem;
word-break: break-word; word-break: break-word;
overflow: auto; overflow: auto;
} }
.banner .banner-close { .banner .banner-close {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -490,18 +550,23 @@ i {
.banner.success { .banner.success {
background: lightgreen; background: lightgreen;
} }
.banner.success::after { .banner.success::after {
background: lightgreen; background: lightgreen;
} }
.banner.error { .banner.error {
background: #ed1c24; background: #ed1c24;
} }
.banner.error::after { .banner.error::after {
background: #ed1c24; background: #ed1c24;
} }
.banner.info { .banner.info {
background: skyblue; background: skyblue;
} }
.banner.info::after { .banner.info::after {
background: skyblue; background: skyblue;
} }
@@ -534,13 +599,16 @@ i {
0% { 0% {
transform: translateY(-100%); transform: translateY(-100%);
} }
50% { 50% {
transform: translateY(10%); transform: translateY(10%);
} }
100% { 100% {
transform: translateY(0); transform: translateY(0);
} }
} }
.show-banner { .show-banner {
appearance: none; appearance: none;
background: #ededed; background: #ededed;
@@ -559,95 +627,137 @@ i {
*/ */
.eva-animation { .eva-animation {
animation-duration: 1s; animation-duration: 1s;
animation-fill-mode: both; } animation-fill-mode: both;
}
.eva-infinite { .eva-infinite {
animation-iteration-count: infinite; } animation-iteration-count: infinite;
}
.eva-icon-shake { .eva-icon-shake {
animation-name: eva-shake; } animation-name: eva-shake;
}
.eva-icon-zoom { .eva-icon-zoom {
animation-name: eva-zoomIn; } animation-name: eva-zoomIn;
}
.eva-icon-pulse { .eva-icon-pulse {
animation-name: eva-pulse; } animation-name: eva-pulse;
}
.eva-icon-flip { .eva-icon-flip {
animation-name: eva-flipInY; } animation-name: eva-flipInY;
}
.eva-hover { .eva-hover {
display: inline-block; } display: inline-block;
}
.eva-hover:hover .eva-icon-hover-shake, .eva-parent-hover:hover .eva-icon-hover-shake { .eva-hover:hover .eva-icon-hover-shake,
animation-name: eva-shake; } .eva-parent-hover:hover .eva-icon-hover-shake {
animation-name: eva-shake;
}
.eva-hover:hover .eva-icon-hover-zoom, .eva-parent-hover:hover .eva-icon-hover-zoom { .eva-hover:hover .eva-icon-hover-zoom,
animation-name: eva-zoomIn; } .eva-parent-hover:hover .eva-icon-hover-zoom {
animation-name: eva-zoomIn;
}
.eva-hover:hover .eva-icon-hover-pulse, .eva-parent-hover:hover .eva-icon-hover-pulse { .eva-hover:hover .eva-icon-hover-pulse,
animation-name: eva-pulse; } .eva-parent-hover:hover .eva-icon-hover-pulse {
animation-name: eva-pulse;
}
.eva-hover:hover .eva-icon-hover-flip, .eva-parent-hover:hover .eva-icon-hover-flip { .eva-hover:hover .eva-icon-hover-flip,
animation-name: eva-flipInY; } .eva-parent-hover:hover .eva-icon-hover-flip {
animation-name: eva-flipInY;
}
@keyframes eva-flipInY { @keyframes eva-flipInY {
from { from {
transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
animation-timing-function: ease-in; animation-timing-function: ease-in;
opacity: 0; } opacity: 0;
}
40% { 40% {
transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
animation-timing-function: ease-in; } animation-timing-function: ease-in;
}
60% { 60% {
transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1; } opacity: 1;
}
80% { 80% {
transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
to { to {
transform: perspective(400px); } } transform: perspective(400px);
}
}
@keyframes eva-shake { @keyframes eva-shake {
from, from,
to { to {
transform: translate3d(0, 0, 0); } transform: translate3d(0, 0, 0);
}
10%, 10%,
30%, 30%,
50%, 50%,
70%, 70%,
90% { 90% {
transform: translate3d(-3px, 0, 0); } transform: translate3d(-3px, 0, 0);
}
20%, 20%,
40%, 40%,
60%, 60%,
80% { 80% {
transform: translate3d(3px, 0, 0); } } transform: translate3d(3px, 0, 0);
}
}
@keyframes eva-pulse { @keyframes eva-pulse {
from { from {
transform: scale3d(1, 1, 1); } transform: scale3d(1, 1, 1);
}
50% { 50% {
transform: scale3d(1.2, 1.2, 1.2); } transform: scale3d(1.2, 1.2, 1.2);
}
to { to {
transform: scale3d(1, 1, 1); } } transform: scale3d(1, 1, 1);
}
}
@keyframes eva-zoomIn { @keyframes eva-zoomIn {
from { from {
opacity: 1; opacity: 1;
transform: scale3d(0.5, 0.5, 0.5); } transform: scale3d(0.5, 0.5, 0.5);
}
50% { 50% {
opacity: 1; } } opacity: 1;
}
}
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 0 !important width: 0 !important
} }
.deleteFixed { .deleteFixed {
position: relative; margin: 0;
transform: translateX(0); padding: 0.5rem 1rem;
left: 0; border: 0;
top: 0; border-radius: 0;
text-align: left; overflow: visible;
} }
.operateBtn { .operateBtn {

13
view/index.html
View File

@@ -6,14 +6,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="やり直すんだ。そして、次はうまくやる。"/> <meta name="description" content="やり直すんだ。そして、次はうまくやる。"/>
<meta name="keywords" content="人生重开模拟器 liferestart life restart remake 人生重来"/> <meta name="keywords" content="人生重开模拟器 liferestart life restart remake 人生重来"/>
<title>Life Restart</title>
<link id="themeLink" rel="stylesheet" href="light.css"> <link id="themeLink" rel="stylesheet" href="light.css">
<link rel="manifest" href="./manifest.json"> <link rel="manifest" href="./manifest.json">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.js" integrity="sha512-wUa0ktp10dgVVhWdRVfcUO4vHS0ryT42WOEcXjVVF2+2rcYBKTY7Yx7JCEzjWgPV+rj2EDUr8TwsoWF6IoIOPg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="../public/bundle.js"></script>
<title>Life Restart</title>
</head> </head>
<body style="margin: 0; height: 100%"> <body>
<div class="banners-container"> <div class="banners-container">
<div class="banners"> <div class="banners">
<div class="banner error"> <div class="banner error">
@@ -34,7 +31,10 @@
</div> </div>
</div> </div>
<a href="https://github.com/VickScarlet/lifeRestart" class="github-corner" style="z-index: 9999;" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style></a> <a href="https://github.com/VickScarlet/lifeRestart" class="github-corner" style="z-index: 9999;" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style></a>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.js" integrity="sha512-wUa0ktp10dgVVhWdRVfcUO4vHS0ryT42WOEcXjVVF2+2rcYBKTY7Yx7JCEzjWgPV+rj2EDUr8TwsoWF6IoIOPg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="../public/bundle.js"></script>
<script> <script>
if ('serviceWorker' in navigator) { if ('serviceWorker' in navigator) {
window.addEventListener('load', function () { window.addEventListener('load', function () {
@@ -48,4 +48,5 @@
}); });
} }
</script> </script>
</body>
</html> </html>

573
view/light.css
View File

@@ -43,6 +43,11 @@
url('iconfont.ttf?t=1628944689555') format('truetype'); url('iconfont.ttf?t=1628944689555') format('truetype');
} }
* {
margin: 0;
padding: 0;
}
html { html {
font-family: PingFangSC, 'Noto Sans CJK SC', 'MS Yahei'; font-family: PingFangSC, 'Noto Sans CJK SC', 'MS Yahei';
} }
@@ -52,9 +57,13 @@ body {
} }
#main { #main {
align-content: center; display: flex;
flex-direction: column;
width: 100%; width: 100%;
max-width: 30rem;
height: 100%; height: 100%;
text-align: center;
box-sizing: border-box;
position: relative; position: relative;
} }
@@ -66,38 +75,64 @@ body {
left: 50%; left: 50%;
white-space: nowrap; white-space: nowrap;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
text-align: center; color: #000;
} }
.mainbtn { #restart {
position: fixed; position: fixed;
top: 65%; top: 65%;
left: 50%; left: 50%;
transform: translate(-50%, -50%);
}
#restart .iconfont {
margin-right: 0.5rem;
}
#next {
display: none;
}
#talentSelectedView {
flex: 0 1 auto;
}
.mainbtn {
margin: 0.5rem 1rem 1rem;
padding: 0.5rem 1.5rem; padding: 0.5rem 1.5rem;
border: 1px #ccc solid; background-color: #FFFFFF;
border: 1px #CCCCCC solid;
border-radius: 0.2rem; border-radius: 0.2rem;
background-color:white; color: #000000;
font-size: 1.6rem; font-size: 1.6rem;
white-space: nowrap; white-space: nowrap;
transform: translate(-50%,-50%);
cursor: pointer; cursor: pointer;
z-index:2;
} }
.mainbtn:hover { .mainbtn:hover {
background: #ff7878; background: #ff7878;
color: #fff; color: #FFFFFF;
transition: all .4s ease 0s; transition: all .4s ease 0s;
} }
.btn-area {
display: flex;
flex-direction: row;
}
.btn-area>.mainbtn {
flex: 1;
}
.iconfont { .iconfont {
display: inline-block;
vertical-align: middle;
font-family: "iconfont" !important; font-family: "iconfont" !important;
font-style: normal; font-style: normal;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
#sponsor,
#specialthanks, #specialthanks,
#rank { #rank {
position: fixed; position: fixed;
@@ -121,10 +156,10 @@ body {
} }
#sponsor { #sponsor {
top: auto; position: fixed;
bottom: 0; bottom: 0;
right: 50%; left: 0;
transform: translate(50%, -50%); right: 0;
} }
#spthx { #spthx {
@@ -172,6 +207,7 @@ body {
} }
#spthx ul.g2 { #spthx ul.g2 {
color: white;
display: grid; display: grid;
grid-template-columns: 50% 50%; grid-template-columns: 50% 50%;
overflow: scroll; overflow: scroll;
@@ -182,193 +218,87 @@ body {
} }
#themeToggleBtn { #themeToggleBtn {
position: fixed; padding: 0 0.7rem;
right: 1rem; width: 6.5rem;
bottom: 1rem;
padding: 0.1rem 1rem;
border: none;
border-radius: 0.2rem;
background-color:#222831; background-color:#222831;
border: none;
border-radius: 4px;
font-size: 1.4rem; font-size: 1.4rem;
color: #EEEEEE; color: #EEEEEE;
line-height: 2.5rem;
text-align: center;
vertical-align: middle;
cursor: pointer; cursor: pointer;
position: fixed;
z-index:2; z-index:2;
right: 0.5rem;
bottom: 0.5rem;
} }
.head { .head {
position: fixed; display: flex;
flex-direction: column;
justify-content: center;
height: 5.2rem;
font-size: 1.4rem; font-size: 1.4rem;
top: 1.1rem;
left: 50%;
white-space: nowrap; white-space: nowrap;
transform: translateX(-50%); color: #000;
text-align: center;
} }
.judge,
.lifeTrajectory,
.propinitial, .propinitial,
.selectlist { .selectlist {
position: fixed; list-style: none;
list-style-type: none; flex: 1;
left: 50%; padding: 1rem;
top: 5rem;
bottom: 8.5rem;
width: 30rem;
max-width: calc(100% - 2rem);
margin: auto;
padding: 0;
overflow: auto; overflow: auto;
transform: translateX(-50%);
text-align: center;
} }
.lifeProperty { .lifeProperty {
position: fixed; list-style: none;
list-style-type: none; padding: 2rem 1rem 0.5rem 4rem;
left: 50%;
top: 2rem;
width: 30rem;
max-width: calc(100% - 2rem);
padding: 0;
overflow: auto;
transform: translateX(-50%);
display: flex; display: flex;
color: black; color: #FFFFFF;
overflow: auto;
} }
.lifeProperty>li { .lifeProperty>li {
width: 100%; flex: 1;
position: relative;
border: 1px #ccc solid;
display: inline-block;
margin: 0.1rem 2px; margin: 0.1rem 2px;
font-size: 1rem; display: flex;
text-align: center; flex-direction: column;
background-color: #393E46;
border: 1px #ccc solid;
border-radius: 0.2rem; border-radius: 0.2rem;
font-size: 1rem;
position: relative;
}
.lifeProperty>li>span:last-child {
background: #fff;
color: #000;
} }
.selectlist>li { .selectlist>li {
position: relative; margin-bottom: 0.6rem;
border: 1px #ccc solid; display: block;
display: inline-block; border: 1px #EEEEEE solid;
width: 95%;
margin: 0.1rem auto;
font-size: 1.4rem;
text-align: center;
border-radius: 0.2rem; border-radius: 0.2rem;
color: #666;
font-size: 1.2rem;
line-height: 1.6;
user-select: none;
position: relative;
cursor: pointer; cursor: pointer;
} }
.grade0b { .selectlist>li:last-child {
background-color: #ededed; margin-bottom: 0;
border: #c5c5c5 2px solid !important;
}
.grade1b {
background-color: #7ea5ec;
border: #c5c5c5 2px solid !important;
}
.grade2b {
background-color: #e2a7ff;
border: #c5c5c5 2px solid !important;
}
.grade3b {
background-color: #ffa07a;
border: #c5c5c5 2px solid !important;
}
@media (min-width:1080px) {
.grade0b:hover {
background-color: #868686;
transition: all .3s ease 0s;
}
.grade1b:hover {
background-color: #5d90ff;
transition: all .3s ease 0s;
}
.grade2b:hover {
background-color: #bc72ec;
transition: all .3s ease 0s;
}
.grade3b:hover {
background-color: #e09074;
transition: all .3s ease 0s;
}
}
.grade0b.selected {
background-color: #444;
box-shadow: #bbb 0px 0px 10px;
color: #fff;
}
.grade1b.selected {
background-color: #407dec;
box-shadow: #bbb 0px 0px 10px;
color: #fff;
}
.grade2b.selected {
background-color: #b362e7;
box-shadow: #bbb 0px 0px 10px;
color: #fff;
}
.grade3b.selected {
background-color: #ff7f4d;
box-shadow: #bbb 0px 0px 10px;
color: #fff;
}
.judge > li.grade1 span,
.judge > li.grade1{
background-color: #7ea5ec;
}
.judge > li.grade2 span,
.judge > li.grade2{
background-color: #e2a7ff;
}
.judge > li.grade3 span,
.judge > li.grade3{
background-color: #ffa07a;
} }
.propinitial { .propinitial {
top: 5rem; display: flex;
bottom: 17rem; flex-direction: column;
} justify-content: center;
.propinitial > li {
position: relative;
display: inline-block;
width: 95%;
margin: 0.1rem auto;
font-size: 1.4rem;
text-align: center;
border-radius: 0.2rem;
padding: 0.2rem;
}
.propinitial > li > input {
height: 2.2rem;
width: 2.2rem;
margin: 0 0.5rem;
padding: 0;
text-align: center;
font-size: 2rem;
border: 0.1rem #ccc solid;
}
.propbtn {
position: relative;
cursor: pointer;
font-size: 2rem;
user-select: none;
} }
.propbtn:hover { .propbtn:hover {
@@ -376,49 +306,115 @@ body {
transition: all .2s ease 0s; transition: all .2s ease 0s;
} }
.lifeTrajectory { .propinitial>li {
border: 1px #a7a7a7 solid;
border-radius: 10px;
background-color: #ffffff;
}
.judge > li,
.lifeTrajectory > li {
position: relative; position: relative;
width: calc(100% - 7rem); margin: 0.1rem auto;
margin: 0.5rem 0; padding: 0.2rem;
padding: 0.5rem 1rem 0.5rem 6rem; display: inline-block;
font-size: 1.4rem; border-radius: 0.2rem;
background-color: #fff; color: #000;
box-shadow: #a7a7a7 0 0 0.4rem; font-size: 1.6rem;
user-select: none; line-height: 2;
} }
.judge > li > span, .propinitial>li>input {
.lifeTrajectory > li > span { height: 2.2rem;
position: absolute; width: 2.2rem;
left: 0; margin: 0 0.5rem;
width: 6rem; padding: 0;
font-size: 2rem;
border: 0.1rem #000 solid;
background-color: #fff;
color: #000;
text-align: center;
}
.propbtn {
position: relative;
cursor: pointer;
font-size: 2rem;
color: #000;
}
.judge>li>span:nth-child(1),
.lifeTrajectory>li>span:nth-child(1) {
width: 5rem;
text-align: right; text-align: right;
} }
.judge>li>span:nth-child(2),
.lifeTrajectory>li>span:nth-child(2) {
flex: 1;
text-align: left;
}
.lifeTrajectory {
flex: 1;
margin: 0.5rem 1rem;
padding: 0;
border: 1px #9b9b9b solid;
background-color: #393E46;
border-radius: 4px;
overflow: auto;
}
.lifeTrajectory>li {
margin: 10px 0;
padding: 5px 10px;
display: flex;
background-color: #4a5361;
box-shadow: #EEEEEE 0 0 0.4rem;
color: #EEEEEE;
font-size: 1rem;
position: relative;
}
.judge {
list-style: none;
flex: 1;
margin: 1rem;
display: flex;
flex-direction: column;
border: 1px solid #EEEEEE;
border-radius: 4px;
overflow: hidden;
}
.judge>li { .judge>li {
box-shadow: lightgray 0 0 0.4rem; flex: 1;
width: calc(100% - 9rem); display: flex;
margin: 0.5rem; align-items: center;
padding: 0.5rem 1rem 0.5rem 7rem; background-color: #4a5361;
border-radius: 10px; border-bottom: 1px solid #EEEEEE;
box-shadow: none;
color: #EEEEEE;
} }
.judge > li > span { .judge>li:last-child {
height: calc(100% - 1rem); border-bottom: 0
padding: 0.5rem 0; }
top: 0;
border-radius: 10px; .judge>li.grade1 span,
.judge>li.grade1 {
background-color: #87cefa;
color: #4a5361;
}
.judge>li.grade2 span,
.judge>li.grade2 {
background-color: #e7beff;
color: #4a5361;
}
.judge>li.grade3 span,
.judge>li.grade3 {
background-color: #f7a989;
color: #4a5361;
} }
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700"); @import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
:root { :root {
font-family: "Montserrat"; font-family: "Montserrat";
} }
@@ -455,12 +451,14 @@ i {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
} }
.banner .banner-message { .banner .banner-message {
flex: 1; flex: 1;
padding: 0 2rem; padding: 0 2rem;
word-break: break-word; word-break: break-word;
overflow: auto; overflow: auto;
} }
.banner .banner-close { .banner .banner-close {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -482,18 +480,23 @@ i {
.banner.success { .banner.success {
background: lightgreen; background: lightgreen;
} }
.banner.success::after { .banner.success::after {
background: lightgreen; background: lightgreen;
} }
.banner.error { .banner.error {
background: #ed1c24; background: #ed1c24;
} }
.banner.error::after { .banner.error::after {
background: #ed1c24; background: #ed1c24;
} }
.banner.info { .banner.info {
background: skyblue; background: skyblue;
} }
.banner.info::after { .banner.info::after {
background: skyblue; background: skyblue;
} }
@@ -522,17 +525,89 @@ i {
animation-iteration-count: 1; animation-iteration-count: 1;
} }
.grade0b {
background-color: #ededed;
border: #c5c5c5 2px solid !important;
}
.grade1b {
background-color: #7ea5ec;
border: #c5c5c5 2px solid !important;
}
.grade2b {
background-color: #e2a7ff;
border: #c5c5c5 2px solid !important;
}
.grade3b {
background-color: #ffa07a;
border: #c5c5c5 2px solid !important;
}
@media (min-width:1080px) {
.grade0b:hover {
background-color: #868686;
transition: all .3s ease 0s;
}
.grade1b:hover {
background-color: #5d90ff;
color: #3b3b3b;
transition: all .3s ease 0s;
}
.grade2b:hover {
background-color: #bc72ec;
color: #3b3b3b;
transition: all .3s ease 0s;
}
.grade3b:hover {
background-color: #e09074;
color: #3b3b3b;
transition: all .3s ease 0s;
}
}
.grade0b.selected {
background-color: #444 !important;
box-shadow: #bbb 0px 0px 10px;
color: #fff;
}
.grade1b.selected {
background-color: #407dec !important;
box-shadow: #bbb 0px 0px 10px;
color: #fff;
}
.grade2b.selected {
background-color: #b362e7 !important;
box-shadow: #bbb 0px 0px 10px;
color: #fff;
}
.grade3b.selected {
background-color: #ff7f4d !important;
box-shadow: #bbb 0px 0px 10px;
color: #fff;
}
@keyframes banner-in { @keyframes banner-in {
0% { 0% {
transform: translateY(-100%); transform: translateY(-100%);
} }
50% { 50% {
transform: translateY(10%); transform: translateY(10%);
} }
100% { 100% {
transform: translateY(0); transform: translateY(0);
} }
} }
.show-banner { .show-banner {
appearance: none; appearance: none;
background: #ededed; background: #ededed;
@@ -551,95 +626,137 @@ i {
*/ */
.eva-animation { .eva-animation {
animation-duration: 1s; animation-duration: 1s;
animation-fill-mode: both; } animation-fill-mode: both;
}
.eva-infinite { .eva-infinite {
animation-iteration-count: infinite; } animation-iteration-count: infinite;
}
.eva-icon-shake { .eva-icon-shake {
animation-name: eva-shake; } animation-name: eva-shake;
}
.eva-icon-zoom { .eva-icon-zoom {
animation-name: eva-zoomIn; } animation-name: eva-zoomIn;
}
.eva-icon-pulse { .eva-icon-pulse {
animation-name: eva-pulse; } animation-name: eva-pulse;
}
.eva-icon-flip { .eva-icon-flip {
animation-name: eva-flipInY; } animation-name: eva-flipInY;
}
.eva-hover { .eva-hover {
display: inline-block; } display: inline-block;
}
.eva-hover:hover .eva-icon-hover-shake, .eva-parent-hover:hover .eva-icon-hover-shake { .eva-hover:hover .eva-icon-hover-shake,
animation-name: eva-shake; } .eva-parent-hover:hover .eva-icon-hover-shake {
animation-name: eva-shake;
}
.eva-hover:hover .eva-icon-hover-zoom, .eva-parent-hover:hover .eva-icon-hover-zoom { .eva-hover:hover .eva-icon-hover-zoom,
animation-name: eva-zoomIn; } .eva-parent-hover:hover .eva-icon-hover-zoom {
animation-name: eva-zoomIn;
}
.eva-hover:hover .eva-icon-hover-pulse, .eva-parent-hover:hover .eva-icon-hover-pulse { .eva-hover:hover .eva-icon-hover-pulse,
animation-name: eva-pulse; } .eva-parent-hover:hover .eva-icon-hover-pulse {
animation-name: eva-pulse;
}
.eva-hover:hover .eva-icon-hover-flip, .eva-parent-hover:hover .eva-icon-hover-flip { .eva-hover:hover .eva-icon-hover-flip,
animation-name: eva-flipInY; } .eva-parent-hover:hover .eva-icon-hover-flip {
animation-name: eva-flipInY;
}
@keyframes eva-flipInY { @keyframes eva-flipInY {
from { from {
transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
animation-timing-function: ease-in; animation-timing-function: ease-in;
opacity: 0; } opacity: 0;
}
40% { 40% {
transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
animation-timing-function: ease-in; } animation-timing-function: ease-in;
}
60% { 60% {
transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1; } opacity: 1;
}
80% { 80% {
transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
to { to {
transform: perspective(400px); } } transform: perspective(400px);
}
}
@keyframes eva-shake { @keyframes eva-shake {
from, from,
to { to {
transform: translate3d(0, 0, 0); } transform: translate3d(0, 0, 0);
}
10%, 10%,
30%, 30%,
50%, 50%,
70%, 70%,
90% { 90% {
transform: translate3d(-3px, 0, 0); } transform: translate3d(-3px, 0, 0);
}
20%, 20%,
40%, 40%,
60%, 60%,
80% { 80% {
transform: translate3d(3px, 0, 0); } } transform: translate3d(3px, 0, 0);
}
}
@keyframes eva-pulse { @keyframes eva-pulse {
from { from {
transform: scale3d(1, 1, 1); } transform: scale3d(1, 1, 1);
}
50% { 50% {
transform: scale3d(1.2, 1.2, 1.2); } transform: scale3d(1.2, 1.2, 1.2);
}
to { to {
transform: scale3d(1, 1, 1); } } transform: scale3d(1, 1, 1);
}
}
@keyframes eva-zoomIn { @keyframes eva-zoomIn {
from { from {
opacity: 1; opacity: 1;
transform: scale3d(0.5, 0.5, 0.5); } transform: scale3d(0.5, 0.5, 0.5);
}
50% { 50% {
opacity: 1; } } opacity: 1;
}
}
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 0 !important width: 0 !important
} }
.deleteFixed { .deleteFixed {
position: relative; margin: 0;
transform: translateX(0); padding: 0.5rem 1rem;
left: 0; border: 0;
top: 0; border-radius: 0;
text-align: left; overflow: visible;
} }
.operateBtn { .operateBtn {