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

add summary

Browse Source
This commit is contained in:
Vick Scarlet
2021-08-18 15:41:58 +08:00
parent 3eff53a5aa
commit ee1ef21efd
8 changed files with 214 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
view/index.html
View File

@@ -14,8 +14,6 @@
<script type="module">
import App from '../src/app.js';
const app = new App();
app
.initial()
.then(()=>app.main());
app.initial();
</script>
</html>

32
view/style.css
View File

@@ -125,6 +125,7 @@ html {
text-align: center;
}
.judge,
.lifeTrajectory,
.propinitial,
.selectlist {
@@ -166,16 +167,19 @@ html {
content: "　";
}
.sprcial_blue::before {
background-color: rgb(116, 191, 255);
.grade1,
.grade1b::before {
background-color: rgb(116, 191, 255) !important;
}
.sprcial_purple::before {
background-color: rgb(226, 167, 255);
.grade2,
.grade2b::before {
background-color: rgb(226, 167, 255) !important;
}
.sprcial_orange::before {
background-color: lightsalmon;
.grade3,
.grade3b::before {
background-color: lightsalmon !important;
}
.selected {
@@ -220,6 +224,7 @@ html {
background-color: aliceblue;
}
.judge > li,
.lifeTrajectory > li {
position: relative;
width: calc(100% - 7rem);
@@ -230,9 +235,24 @@ html {
box-shadow: lightblue 0 0 0.4rem;
}
.judge > li > span,
.lifeTrajectory > li > span {
position: absolute;
left: 0;
width: 6rem;
text-align: right;
}
.judge > li {
box-shadow: lightgray 0 0 0.4rem;
width: calc(100% - 9rem);
margin: 0.5rem;
padding: 0.5rem 1rem 0.5rem 7rem;
}
.judge > li > span {
background-color: white;
height: calc(100% - 1rem);
padding: 0.5rem 0;
top: 0;
}

34
view/test.html
View File

@@ -12,20 +12,28 @@
</head>
<body style="margin: 0; height: 100%">
<div id="main">
<ul id="lifeTrajectory" class="lifeTrajectory">
<li><span>0岁：</span>你出生了，你是女孩</li>
<li><span>0岁：</span>你出生了你出生了你出生了你出生了你出生了你出生了你出生了你出生了你出生了你出生了你出生了你出生了你出生了</li>
<li><span>0岁：</span>你出生了，你是女孩</li>
<li><span>0岁：</span>你出生了，你是女孩</li>
<li><span>0岁：</span>你出生了，你是女孩</li>
<li><span>0岁：</span>你出生了，你是女孩</li>
<li><span>0岁：</span>你出生了，你是女孩</li>
<li><span>0岁：</span>你出生了，你是女孩</li>
<li><span>0岁：</span>你出生了，你是女孩</li>
<li><span>0岁：</span>你出生了，你是女孩</li>
<li><span>0岁：</span>你出生了，你是女孩</li>
<div class="head">人生总结</div>
<ul id="judge" class="judge" style="bottom: calc(35% + 2.5rem)">
<li class="grade2"><span>颜值：</span>9级 美若天仙</li>
<li><span>智力：</span>4级 智力一般</li>
<li><span>体质：</span>1级 极度虚弱</li>
<li><span>家境：</span>6级 小康之家</li>
<li><span>享年：</span>3岁 早夭</li>
<li><span>快乐：</span>3级 不太幸福的人生</li>
<li><span>快乐：</span>3级 不太幸福的人生</li>
<li><span>快乐：</span>3级 不太幸福的人生</li>
<li><span>快乐：</span>3级 不太幸福的人生</li>
<li><span>快乐：</span>3级 不太幸福的人生</li>
<li><span>快乐：</span>3级 不太幸福的人生</li>
<li><span>快乐：</span>3级 不太幸福的人生</li>
<li><span>快乐：</span>3级 不太幸福的人生</li>
<li><span>快乐：</span>3级 不太幸福的人生</li>
</ul>
<button id="summary" class="mainbtn" style="top:auto; bottom:0.1rem">人生总结</button>
<div class="head" style="top:auto; bottom:35%">天赋，你可以选一个，下辈子还能抽到</div>
<ul id="talents" class="selectlist" style="top:calc(65% + 0.5rem); bottom:8rem">
<li class="grade2b">黑幕（面试一定成功）</li>
</ul>
<button id="again" class="mainbtn" style="top:auto; bottom:0.1em"><span class="iconfont">&#xe6a7;</span>再次重开</button>
</div>
</body>
</html>