style:优化页面布局

src/app.js

@@ -110,7 +110,7 @@ class App{
                 <ul class="g1"></ul>
                 <ul class="g2"></ul>
             </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>
         `);
 
@@ -122,9 +122,9 @@ class App{
         const talentPage = $(`
         <div id="main">
             <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>
-            <button id="next" class="mainbtn" style="top:auto; bottom:0.1em">请选择3个</button>
+            <button id="next" class="mainbtn">请选择3个</button>
         </div>
         `);
 
@@ -175,6 +175,7 @@ class App{
                             }
                         });
                     });
+                talentPage.find('#next').show()
             });
 
         talentPage
@@ -184,6 +185,7 @@ class App{
                     this.hint('请选择3个天赋');
                     return;
                 }
+                talentPage.find('#next').hide()
                 this.#totalMax = 20 + this.#life.getTalentAllocationAddition(Array.from(this.#talentSelected).map(({id})=>id));
                 this.switch('property');
             })
@@ -193,13 +195,15 @@ class App{
         const propertyPage = $(/*html*/`
         <div id="main">
             <div class="head" style="font-size: 1.6rem">
-                调整初始属性<br>
+                <div>调整初始属性</div>
                 <div id="total" style="font-size:1rem; font-weight:normal;">可用属性点：0</div>
             </div>
             <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>
         `);
         propertyPage.mounted = ()=>{
@@ -329,8 +333,10 @@ class App{
         <div id="main">
             <ul id="lifeProperty" class="lifeProperty"></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">
                 <img src="" id="endImage" />
             </div>
@@ -343,7 +349,7 @@ class App{
                 if(this.#isEnd) return;
                 const trajectory = this.#life.next();
                 const { age, content, isEnd } = trajectory;
-                const li = $(`<li><span>${age}岁：</span>${
+                const li = $(`<li><span>${age}岁：</span><span>${
                     content.map(
                         ({type, description, grade, name, postEvent}) => {
                             switch(type) {
@@ -354,7 +360,7 @@ class App{
                             }
                         }
                     ).join('<br>')
-                }</li>`);
+                }</span></li>`);
                 li.appendTo('#lifeTrajectory');
                 $("#lifeTrajectory").scrollTop($("#lifeTrajectory")[0].scrollHeight);
                 if(isEnd) {
@@ -367,11 +373,12 @@ class App{
                     // Update properties if not die yet
                     const property = this.#life.getLastRecord();
                     $("#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
@@ -404,19 +411,19 @@ class App{
         const summaryPage = $(`
         <div id="main">
             <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>
-            <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>
             </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>
         `);
 
@@ -574,33 +581,33 @@ class App{
                     judge.append([
                         (()=>{
                             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);
-                            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);
-                            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);
-                            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);
-                            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);
-                            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 value = Math.floor(sum(m('CHR'), m('INT'), m('STR'), m('MNY'), m('SPR'))*2 + m('AGE')/2);
                             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(''));
                 }

view/dark.css

@@ -37,108 +37,141 @@
 @media (max-width:328px){html{font-size:12px;}}
 
 @font-face {
-    font-family: 'iconfont';
+  font-family: 'iconfont';
-    src: url('iconfont.woff2?t=1628944689555') format('woff2'),
+  src: url('iconfont.woff2?t=1628944689555') format('woff2'),
-            url('iconfont.woff?t=1628944689555') format('woff'),
+    url('iconfont.woff?t=1628944689555') format('woff'),
-            url('iconfont.ttf?t=1628944689555') format('truetype');
+    url('iconfont.ttf?t=1628944689555') format('truetype');
+}
+
+* {
+  margin: 0;
+  padding: 0;
 }
 
 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';
 }
 
 body {
-	user-select: none;
+  user-select: none;
 }
 
 #main {
-    align-content: center;
+  display: flex;
-    width: 100%;
+  flex-direction: column;
-    height: 100%;
+  width: 100%;
-    position: relative;
+  max-width: 30rem;
+  height: 100%;
+  text-align: center;
+  box-sizing: border-box;
+  position: relative;
 }
 
 #title {
-    position: fixed;
+  position: fixed;
-    font-size: 3rem;
+  font-size: 3rem;
-    font-weight: 700;
+  font-weight: 700;
-    top: 35%;
+  top: 35%;
-    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;
+}
+
+#restart {
+  position: fixed;
+  top: 65%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+#restart .iconfont {
+  margin-right: 0.5rem;
+}
+
+#next {
+  display: none;
+}
+
+#talentSelectedView {
+  flex: 0 1 auto;
 }
 
 .mainbtn {
-    position: fixed;
+  margin: 0.5rem 1rem 1rem;
-    top: 65%;
+  padding: 0.5rem 1.5rem;
-    left: 50%;
+  background-color: #393E46;
-    padding: 0.5rem 1.5rem;
+  border: 1px #EEEEEE solid;
-    border: 1px #EEEEEE solid;
+  border-radius: 0.2rem;
-    border-radius: 0.2rem;
+  color: #EEEEEE;
-    background-color:#393E46;
+  font-size: 1.6rem;
-    font-size: 1.6rem;
+  white-space: nowrap;
-    white-space: nowrap;
+  cursor: pointer;
-    transform: translate(-50%,-50%);
-    cursor: pointer;
-    z-index:2;
-    color: #EEEEEE;
 }
 
 .mainbtn:hover {
-	background: #ff7878;
+  background: #ff7878;
-	color: #fff;
+  color: #fff;
-	transition: all .4s ease 0s;
+  transition: all .4s ease 0s;
+}
+
+.btn-area {
+  display: flex;
+  flex-direction: row;
+}
+
+.btn-area>.mainbtn {
+  flex: 1;
 }
 
 .iconfont {
-    font-family: "iconfont" !important;
+  display: inline-block;
-    font-style: normal;
+  vertical-align: middle;
-    -webkit-font-smoothing: antialiased;
+  font-family: "iconfont" !important;
-    -moz-osx-font-smoothing: grayscale;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-#sponsor,
 #specialthanks,
 #rank {
-    position: fixed;
+  position: fixed;
-    top: 4rem;
+  top: 4rem;
-    right: 1rem;
+  right: 1rem;
-    padding: 0.1rem;
+  padding: 0.1rem;
-    width: 6rem;
+  width: 6rem;
-    border: none;
+  border: none;
-    border-radius: 0.2rem;
+  border-radius: 0.2rem;
-    background-color:lightsteelblue;
+  background-color:lightsteelblue;
-    font-size: 1.4rem;
+  font-size: 1.4rem;
-    color: #EEEEEE;
+  color: #EEEEEE;
-    cursor: pointer;
+  cursor: pointer;
-    z-index:2;
+  z-index:2;
-    word-wrap: none;
+  word-wrap: none;
 }
 
 #specialthanks {
-    background-color: #5865F2;
+  background-color: #5865F2;
-    top: 1rem;
+  top: 1rem;
 }
 
 #sponsor {
-  top: auto;
+  position: fixed;
   bottom: 0;
-  right: 50%;
+  left: 0;
-  transform: translate(50%, -50%);
+  right: 0;
 }
 
 #spthx {
-    position: fixed;
+  position: fixed;
-    display: grid;
+  display: grid;
-    top: 4rem;
+  top: 4rem;
-    bottom: 5rem;
+  bottom: 5rem;
-    left: 50%;
+  left: 50%;
-    width: 30rem;
+  width: 30rem;
-    max-width: calc(100% - 2rem);
+  max-width: calc(100% - 2rem);
-    transform: translateX(-50%);
+  transform: translateX(-50%);
 }
 
 #spthx ul {
@@ -186,247 +219,272 @@ body {
 }
 
 #themeToggleBtn {
-    position: fixed;
+  padding: 0 0.7rem;
-    right: 1rem;
+  width: 6.5rem;
-    bottom: 1rem;
+  background-color:#EEEEEE;
-    padding: 0.1rem 1rem;
+  border: none;
-    border: none;
+  border-radius: 4px;
-    border-radius: 0.2rem;
+  font-size: 1.4rem;
-    background-color:#EEEEEE;
+  color: #222831;
-    font-size: 1.4rem;
+  line-height: 2.5rem;
-    color: #222831;
+  text-align: center;
-    cursor: pointer;
+  vertical-align: middle;
-    z-index:2;
+  cursor: pointer;
+  position: fixed;
+  z-index:2;
+  right: 0.5rem;
+  bottom: 0.5rem;
 }
 
 .head {
-    position: fixed;
+  display: flex;
-    font-size: 1.4rem;
+  flex-direction: column;
-    top: 1.1rem;
+  justify-content: center;
-    left: 50%;
+  height: 5.2rem;
-    white-space: nowrap;
+  font-size: 1.4rem;
-    transform: translateX(-50%);
+  white-space: nowrap;
-    text-align: center;
+  color: #EEEEEE;
-    color: #EEEEEE;
 }
 
-.judge,
-.lifeTrajectory,
 .propinitial,
 .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;
-    transform: translateX(-50%);
-    text-align: center;
-}
-
-.lifeProperty{
-  position: fixed;
-  list-style-type: none;
-  left: 50%;
-  top: 2rem;
-  width: 30rem;
-  max-width: calc(100% - 2rem);
-  padding: 0;
   overflow: auto;
-  transform: translateX(-50%);
+}
+
+.lifeProperty {
+  list-style: none;
+  padding: 2rem 1rem 0.5rem 4rem;
   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;
-  font-size: 1rem;
+  display: flex;
-  text-align: center;
+  flex-direction: column;
+  border: 1px #ccc solid;
   border-radius: 0.2rem;
+  font-size: 1rem;
+  position: relative;
 }
 
-.selectlist > li {
+.lifeProperty>li>span:last-child {
-    position: relative;
+  background: #eee;
-    border: 1px #EEEEEE solid;
+  color: #666;
-    display: inline-block;
+}
-    width: 95%;
+
-    margin: 0.1rem auto;
+.selectlist>li {
-    font-size: 1.4rem;
+  margin-bottom: 0.6rem;
-    text-align: center;
+  display: block;
-    border-radius: 0.2rem;
+  border: 1px #EEEEEE solid;
-    cursor: pointer;
+  border-radius: 0.2rem;
-    color: #EEEEEE;
+  color: #EEEEEE;
-    user-select: none;
+  font-size: 1.2rem;
+  line-height: 1.6;
+  user-select: none;
+  position: relative;
+  cursor: pointer;
+}
+
+.selectlist>li:last-child {
+  margin-bottom: 0;
 }
 
 .grade0b {
-	background-color: #464646;
+  background-color: #464646;
-	border: #f8f8f8 2px solid !important;
+  border: #f8f8f8 2px solid !important;
 }
+
 .grade1b {
-	background-color: #6495ed;
+  background-color: #6495ed;
-	border: #f8f8f8 2px solid !important;
+  border: #f8f8f8 2px solid !important;
 }
+
 .grade2b {
-	background-color: #e2a7ff;
+  background-color: #e2a7ff;
-	border: #f8f8f8 2px solid !important;
+  border: #f8f8f8 2px solid !important;
 }
+
 .grade3b {
-	background-color: #ffa07a;
+  background-color: #ffa07a;
-	border: #f8f8f8 2px solid !important;
+  border: #f8f8f8 2px solid !important;
 }
 
 @media (min-width:1080px) {
-    .grade0b:hover {
+  .grade0b:hover {
-    	background-color: #c0c0c0;
+    background-color: #c0c0c0;
-        color: #3b3b3b;
-    	transition: all .3s ease 0s;
-    }
-    .grade1b:hover {
-    	background-color: #87cefa;
-        color: #3b3b3b;
-    	transition: all .3s ease 0s;
-    }
-    .grade2b:hover {
-    	background-color: #e7beff;
-        color: #3b3b3b;
-    	transition: all .3s ease 0s;
-    }
-    .grade3b:hover {
-    	background-color: #f7a989;
-        color: #3b3b3b;
-    	transition: all .3s ease 0s;
-    }
-}
-.grade0b.selected {
-    background-color: #c0c0c0 !important;
-    box-shadow: #ccc 0px 0px 10px;
     color: #3b3b3b;
+    transition: all .3s ease 0s;
+  }
+
+  .grade1b:hover {
+    background-color: #87cefa;
+    color: #3b3b3b;
+    transition: all .3s ease 0s;
+  }
+
+  .grade2b:hover {
+    background-color: #e7beff;
+    color: #3b3b3b;
+    transition: all .3s ease 0s;
+  }
+
+  .grade3b:hover {
+    background-color: #f7a989;
+    color: #3b3b3b;
+    transition: all .3s ease 0s;
+  }
+}
+
+.grade0b.selected {
+  background-color: #c0c0c0 !important;
+  box-shadow: #ccc 0px 0px 10px;
+  color: #3b3b3b;
 }
 
 .grade1b.selected {
-    background-color: #87cefa !important;
+  background-color: #87cefa !important;
-    box-shadow: #ccc 0px 0px 10px;
+  box-shadow: #ccc 0px 0px 10px;
-    color: #3b3b3b;
+  color: #3b3b3b;
 }
 
 .grade2b.selected {
-	background-color: #e7beff !important;
+  background-color: #e7beff !important;
-    box-shadow: #ccc 0px 0px 10px;
+  box-shadow: #ccc 0px 0px 10px;
-    color: #3b3b3b;
+  color: #3b3b3b;
 }
 
 .grade3b.selected {
-    background-color: #f1bfac !important;
+  background-color: #f1bfac !important;
-    box-shadow: #ccc 0px 0px 10px;
+  box-shadow: #ccc 0px 0px 10px;
-    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 {
-    top: 5rem;
+  display: flex;
-    bottom: 17rem;
+  flex-direction: column;
+  justify-content: center;
 }
 
-.propbtn:hover{
+.propbtn:hover {
-	color: #5c5c5c;
+  color: #5c5c5c;
-	transition: all .2s ease 0s;
+  transition: all .2s ease 0s;
 }
 
-.propinitial > li {
+.propinitial>li {
-    position: relative;
+  position: relative;
-    display: inline-block;
+  margin: 0.1rem auto;
-    width: 95%;
+  padding: 0.2rem;
-    margin: 0.1rem auto;
+  display: inline-block;
-    font-size: 1.4rem;
+  border-radius: 0.2rem;
-    text-align: center;
+  color: #EEEEEE;
-    border-radius: 0.2rem;
+  font-size: 1.6rem;
-    padding: 0.2rem;
+  line-height: 2;
-    color: #EEEEEE;
 }
 
-.propinitial > li > input {
+.propinitial>li>input {
-    height: 2.2rem;
+  height: 2.2rem;
-    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 {
-    position: relative;
+  position: relative;
-    cursor: pointer;
+  cursor: pointer;
-    font-size: 2rem;
+  font-size: 2rem;
-    color: #EEEEEE;
+  color: #EEEEEE;
+}
+
+.judge>li>span:nth-child(1),
+.lifeTrajectory>li>span:nth-child(1) {
+  width: 5rem;
+  text-align: right;
+}
+.judge>li>span:nth-child(2),
+.lifeTrajectory>li>span:nth-child(2) {
+  flex: 1;
+  text-align: left;
 }
 
 .lifeTrajectory {
-	border: 1px #9b9b9b solid;
+  flex: 1;
-    background-color: #393E46;
+  margin: 0.5rem 1rem;
-	border-radius: 10px;
+  padding: 0;
+  border: 1px #9b9b9b solid;
+  background-color: #393E46;
+  border-radius: 4px;
+  overflow: auto;
 }
 
-.judge > li,
+.lifeTrajectory>li {
-.lifeTrajectory > li {
+  margin: 10px 0;
-    position: relative;
+  padding: 5px 10px;
-    width: calc(100% - 7rem);
+  display: flex;
-    margin: 0.5rem 0;
+  background-color: #4a5361;
-    padding: 0.5rem 1rem 0.5rem 6rem;
+  box-shadow: #EEEEEE 0 0 0.4rem;
-    font-size: 1.4rem;
+  color: #EEEEEE;
-    background-color: #4a5361;
+  font-size: 1rem;
-    box-shadow: #EEEEEE 0 0 0.4rem;
+  position: relative;
-    color: #EEEEEE;
 }
 
-.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");
+
 :root {
   font-family: "Montserrat";
 }
@@ -463,12 +521,14 @@ i {
   flex-direction: row;
   align-items: center;
 }
+
 .banner .banner-message {
   flex: 1;
   padding: 0 2rem;
   word-break: break-word;
   overflow: auto;
 }
+
 .banner .banner-close {
   display: flex;
   align-items: center;
@@ -490,18 +550,23 @@ i {
 .banner.success {
   background: lightgreen;
 }
+
 .banner.success::after {
   background: lightgreen;
 }
+
 .banner.error {
   background: #ed1c24;
 }
+
 .banner.error::after {
   background: #ed1c24;
 }
+
 .banner.info {
   background: skyblue;
 }
+
 .banner.info::after {
   background: skyblue;
 }
@@ -534,13 +599,16 @@ i {
   0% {
     transform: translateY(-100%);
   }
+
   50% {
     transform: translateY(10%);
   }
+
   100% {
     transform: translateY(0);
   }
 }
+
 .show-banner {
   appearance: none;
   background: #ededed;
@@ -557,97 +625,139 @@ i {
  * Copyright Akveo. All Rights Reserved.
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
- .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% {
+  }
-      transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-      animation-timing-function: ease-in; }
-    60% {
-      transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
-      opacity: 1; }
-    80% {
-      transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
-    to {
-      transform: perspective(400px); } }
 
-  @keyframes eva-shake {
+  40% {
-    from,
+    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-    to {
+    animation-timing-function: ease-in;
-      transform: translate3d(0, 0, 0); }
+  }
-    10%,
-    30%,
-    50%,
-    70%,
-    90% {
-      transform: translate3d(-3px, 0, 0); }
-    20%,
-    40%,
-    60%,
-    80% {
-      transform: translate3d(3px, 0, 0); } }
 
-  @keyframes eva-pulse {
+  60% {
-    from {
+    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
-      transform: scale3d(1, 1, 1); }
+    opacity: 1;
-    50% {
+  }
-      transform: scale3d(1.2, 1.2, 1.2); }
-    to {
-      transform: scale3d(1, 1, 1); } }
 
-  @keyframes eva-zoomIn {
+  80% {
-    from {
+    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
-      opacity: 1;
+  }
-      transform: scale3d(0.5, 0.5, 0.5); }
+
-    50% {
+  to {
-      opacity: 1; } }
+    transform: perspective(400px);
+  }
+}
+
+@keyframes eva-shake {
+
+  from,
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: translate3d(-3px, 0, 0);
+  }
+
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: translate3d(3px, 0, 0);
+  }
+}
+
+@keyframes eva-pulse {
+  from {
+    transform: scale3d(1, 1, 1);
+  }
+
+  50% {
+    transform: scale3d(1.2, 1.2, 1.2);
+  }
+
+  to {
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes eva-zoomIn {
+  from {
+    opacity: 1;
+    transform: scale3d(0.5, 0.5, 0.5);
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
 
 ::-webkit-scrollbar {
-    width: 0 !important
+  width: 0 !important
 }
 
 .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 {

view/index.html

@@ -6,14 +6,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="やり直すんだ。そして、次はうまくやる。"/>
     <meta name="keywords" content="人生重开模拟器 liferestart life restart remake 人生重来"/>
+    <title>Life Restart</title>
     <link id="themeLink" rel="stylesheet" href="light.css">
     <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>
-<body style="margin: 0; height: 100%">
+<body>
   <div class="banners-container">
     <div class="banners">
       <div class="banner error">
@@ -34,18 +31,22 @@
     </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>
-</body>
+
-<script>
+  <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>
-  if ('serviceWorker' in navigator) {
+  <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>
+    if ('serviceWorker' in navigator) {
       window.addEventListener('load', function () {
-          navigator.serviceWorker.register('./sw.js', {scope: '.'})
+        navigator.serviceWorker.register('./sw.js', {scope: '.'})
-              .then(function (registration) {
+          .then(function (registration) {
-                  console.log('ServiceWorker registration successful');
+            console.log('ServiceWorker registration successful');
-              })
+          })
-              .catch(function (err) {
+          .catch(function (err) {
-                  console.log('ServiceWorker registration failed');
+            console.log('ServiceWorker registration failed');
-              });
+          });
       });
-  }
+    }
   </script>
+</body>
 </html>

view/light.css

@@ -37,105 +37,140 @@
 @media (max-width:328px){html{font-size:12px;}}
 
 @font-face {
-    font-family: 'iconfont';
+  font-family: 'iconfont';
-    src: url('iconfont.woff2?t=1628944689555') format('woff2'),
+  src: url('iconfont.woff2?t=1628944689555') format('woff2'),
-            url('iconfont.woff?t=1628944689555') format('woff'),
+    url('iconfont.woff?t=1628944689555') format('woff'),
-            url('iconfont.ttf?t=1628944689555') format('truetype');
+    url('iconfont.ttf?t=1628944689555') format('truetype');
+}
+
+* {
+  margin: 0;
+  padding: 0;
 }
 
 html {
-    font-family: PingFangSC, 'Noto Sans CJK SC', 'MS Yahei';
+  font-family: PingFangSC, 'Noto Sans CJK SC', 'MS Yahei';
 }
 
 body {
-	user-select: none;
+  user-select: none;
 }
 
 #main {
-    align-content: center;
+  display: flex;
-    width: 100%;
+  flex-direction: column;
-    height: 100%;
+  width: 100%;
-    position: relative;
+  max-width: 30rem;
+  height: 100%;
+  text-align: center;
+  box-sizing: border-box;
+  position: relative;
 }
 
 #title {
-    position: fixed;
+  position: fixed;
-    font-size: 3rem;
+  font-size: 3rem;
-    font-weight: 700;
+  font-weight: 700;
-    top: 35%;
+  top: 35%;
-    left: 50%;
+  left: 50%;
-    white-space: nowrap;
+  white-space: nowrap;
-    transform: translate(-50%,-50%);
+  transform: translate(-50%, -50%);
-    text-align: center;
+  color: #000;
+}
+
+#restart {
+  position: fixed;
+  top: 65%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+#restart .iconfont {
+  margin-right: 0.5rem;
+}
+
+#next {
+  display: none;
+}
+
+#talentSelectedView {
+  flex: 0 1 auto;
 }
 
 .mainbtn {
-    position: fixed;
+  margin: 0.5rem 1rem 1rem;
-    top: 65%;
+  padding: 0.5rem 1.5rem;
-    left: 50%;
+  background-color: #FFFFFF;
-	padding: 0.5rem 1.5rem;
+  border: 1px #CCCCCC solid;
-    border: 1px #ccc solid;
+  border-radius: 0.2rem;
-    border-radius: 0.2rem;
+  color: #000000;
-    background-color:white;
+  font-size: 1.6rem;
-    font-size: 1.6rem;
+  white-space: nowrap;
-    white-space: nowrap;
+  cursor: pointer;
-    transform: translate(-50%,-50%);
-    cursor: pointer;
-    z-index:2;
 }
 
 .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 {
-    font-family: "iconfont" !important;
+  display: inline-block;
-    font-style: normal;
+  vertical-align: middle;
-    -webkit-font-smoothing: antialiased;
+  font-family: "iconfont" !important;
-    -moz-osx-font-smoothing: grayscale;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-#sponsor,
 #specialthanks,
 #rank {
-    position: fixed;
+  position: fixed;
-    top: 4rem;
+  top: 4rem;
-    right: 1rem;
+  right: 1rem;
-    padding: 0.1rem;
+  padding: 0.1rem;
-    width: 6rem;
+  width: 6rem;
-    border: none;
+  border: none;
-    border-radius: 0.2rem;
+  border-radius: 0.2rem;
-    background-color:lightsteelblue;
+  background-color:lightsteelblue;
-    font-size: 1.4rem;
+  font-size: 1.4rem;
-    color: #EEEEEE;
+  color: #EEEEEE;
-    cursor: pointer;
+  cursor: pointer;
-    z-index:2;
+  z-index:2;
-    word-wrap: none;
+  word-wrap: none;
 }
 
 #specialthanks {
-    background-color: #5865F2;
+  background-color: #5865F2;
-    top: 1rem;
+  top: 1rem;
 }
 
 #sponsor {
-  top: auto;
+  position: fixed;
   bottom: 0;
-  right: 50%;
+  left: 0;
-  transform: translate(50%, -50%);
+  right: 0;
 }
 
 #spthx {
-    position: fixed;
+  position: fixed;
-    display: grid;
+  display: grid;
-    top: 4rem;
+  top: 4rem;
-    bottom: 5rem;
+  bottom: 5rem;
-    left: 50%;
+  left: 50%;
-    width: 30rem;
+  width: 30rem;
-    max-width: calc(100% - 2rem);
+  max-width: calc(100% - 2rem);
-    transform: translateX(-50%);
+  transform: translateX(-50%);
 }
 
 #spthx ul {
@@ -172,6 +207,7 @@ body {
 }
 
 #spthx ul.g2 {
+  color: white;
   display: grid;
   grid-template-columns: 50% 50%;
   overflow: scroll;
@@ -182,243 +218,203 @@ body {
 }
 
 #themeToggleBtn {
-    position: fixed;
+  padding: 0 0.7rem;
-    right: 1rem;
+  width: 6.5rem;
-    bottom: 1rem;
+  background-color:#222831;
-    padding: 0.1rem 1rem;
+  border: none;
-    border: none;
+  border-radius: 4px;
-    border-radius: 0.2rem;
+  font-size: 1.4rem;
-    background-color:#222831;
+  color: #EEEEEE;
-    font-size: 1.4rem;
+  line-height: 2.5rem;
-    color: #EEEEEE;
+  text-align: center;
-    cursor: pointer;
+  vertical-align: middle;
-    z-index:2;
+  cursor: pointer;
+  position: fixed;
+  z-index:2;
+  right: 0.5rem;
+  bottom: 0.5rem;
 }
 
 .head {
-    position: fixed;
+  display: flex;
-    font-size: 1.4rem;
+  flex-direction: column;
-    top: 1.1rem;
+  justify-content: center;
-    left: 50%;
+  height: 5.2rem;
-    white-space: nowrap;
+  font-size: 1.4rem;
-    transform: translateX(-50%);
+  white-space: nowrap;
-    text-align: center;
+  color: #000;
 }
 
-.judge,
-.lifeTrajectory,
 .propinitial,
 .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;
-    transform: translateX(-50%);
-    text-align: center;
-}
-
-.lifeProperty{
-  position: fixed;
-  list-style-type: none;
-  left: 50%;
-  top: 2rem;
-  width: 30rem;
-  max-width: calc(100% - 2rem);
-  padding: 0;
   overflow: auto;
-  transform: translateX(-50%);
+}
+
+.lifeProperty {
+  list-style: none;
+  padding: 2rem 1rem 0.5rem 4rem;
   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;
-  font-size: 1rem;
+  display: flex;
-  text-align: center;
+  flex-direction: column;
+  background-color: #393E46;
+  border: 1px #ccc solid;
   border-radius: 0.2rem;
+  font-size: 1rem;
+  position: relative;
 }
 
-.selectlist > li {
+.lifeProperty>li>span:last-child {
-    position: relative;
+  background: #fff;
-    border: 1px #ccc solid;
+  color: #000;
-    display: inline-block;
-    width: 95%;
-    margin: 0.1rem auto;
-    font-size: 1.4rem;
-    text-align: center;
-    border-radius: 0.2rem;
-    cursor: pointer;
 }
 
-.grade0b {
+.selectlist>li {
-	background-color: #ededed;
+  margin-bottom: 0.6rem;
-	border: #c5c5c5 2px solid !important;
+  display: block;
+  border: 1px #EEEEEE solid;
+  border-radius: 0.2rem;
+  color: #666;
+  font-size: 1.2rem;
+  line-height: 1.6;
+  user-select: none;
+  position: relative;
+  cursor: pointer;
 }
 
-.grade1b {
+.selectlist>li:last-child {
-	background-color: #7ea5ec;
+  margin-bottom: 0;
-	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 {
-    top: 5rem;
+  display: flex;
-    bottom: 17rem;
+  flex-direction: column;
+  justify-content: center;
 }
 
-.propinitial > li {
+.propbtn:hover {
-    position: relative;
+  color: #5c5c5c;
-    display: inline-block;
+  transition: all .2s ease 0s;
-    width: 95%;
-    margin: 0.1rem auto;
-    font-size: 1.4rem;
-    text-align: center;
-    border-radius: 0.2rem;
-    padding: 0.2rem;
 }
 
-.propinitial > li > input {
+.propinitial>li {
-    height: 2.2rem;
+  position: relative;
-    width: 2.2rem;
+  margin: 0.1rem auto;
-    margin: 0 0.5rem;
+  padding: 0.2rem;
-    padding: 0;
+  display: inline-block;
-    text-align: center;
+  border-radius: 0.2rem;
-    font-size: 2rem;
+  color: #000;
-    border: 0.1rem #ccc solid;
+  font-size: 1.6rem;
+  line-height: 2;
+}
+
+.propinitial>li>input {
+  height: 2.2rem;
+  width: 2.2rem;
+  margin: 0 0.5rem;
+  padding: 0;
+  font-size: 2rem;
+  border: 0.1rem #000 solid;
+  background-color: #fff;
+  color: #000;
+  text-align: center;
 }
 
 .propbtn {
-    position: relative;
+  position: relative;
-    cursor: pointer;
+  cursor: pointer;
-    font-size: 2rem;
+  font-size: 2rem;
-    user-select: none;
+  color: #000;
 }
 
-.propbtn:hover{
+.judge>li>span:nth-child(1),
-	color: #5c5c5c;
+.lifeTrajectory>li>span:nth-child(1) {
-	transition: all .2s ease 0s;
+  width: 5rem;
+  text-align: right;
+}
+.judge>li>span:nth-child(2),
+.lifeTrajectory>li>span:nth-child(2) {
+  flex: 1;
+  text-align: left;
 }
 
 .lifeTrajectory {
-    border: 1px #a7a7a7 solid;
+  flex: 1;
-    border-radius: 10px;
+  margin: 0.5rem 1rem;
-    background-color: #ffffff;
+  padding: 0;
+  border: 1px #9b9b9b solid;
+  background-color: #393E46;
+  border-radius: 4px;
+  overflow: auto;
 }
 
-.judge > li,
+.lifeTrajectory>li {
-.lifeTrajectory > li {
+  margin: 10px 0;
-    position: relative;
+  padding: 5px 10px;
-    width: calc(100% - 7rem);
+  display: flex;
-    margin: 0.5rem 0;
+  background-color: #4a5361;
-    padding: 0.5rem 1rem 0.5rem 6rem;
+  box-shadow: #EEEEEE 0 0 0.4rem;
-    font-size: 1.4rem;
+  color: #EEEEEE;
-    background-color: #fff;
+  font-size: 1rem;
-    box-shadow: #a7a7a7 0 0 0.4rem;
+  position: relative;
-    user-select: none;
 }
 
-.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: 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");
+
 :root {
   font-family: "Montserrat";
 }
@@ -455,12 +451,14 @@ i {
   flex-direction: row;
   align-items: center;
 }
+
 .banner .banner-message {
   flex: 1;
   padding: 0 2rem;
   word-break: break-word;
   overflow: auto;
 }
+
 .banner .banner-close {
   display: flex;
   align-items: center;
@@ -482,18 +480,23 @@ i {
 .banner.success {
   background: lightgreen;
 }
+
 .banner.success::after {
   background: lightgreen;
 }
+
 .banner.error {
   background: #ed1c24;
 }
+
 .banner.error::after {
   background: #ed1c24;
 }
+
 .banner.info {
   background: skyblue;
 }
+
 .banner.info::after {
   background: skyblue;
 }
@@ -522,17 +525,89 @@ i {
   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 {
   0% {
     transform: translateY(-100%);
   }
+
   50% {
     transform: translateY(10%);
   }
+
   100% {
     transform: translateY(0);
   }
 }
+
 .show-banner {
   appearance: none;
   background: #ededed;
@@ -549,97 +624,139 @@ i {
  * Copyright Akveo. All Rights Reserved.
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
-  .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% {
+  }
-      transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-      animation-timing-function: ease-in; }
-    60% {
-      transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
-      opacity: 1; }
-    80% {
-      transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
-    to {
-      transform: perspective(400px); } }
 
-  @keyframes eva-shake {
+  40% {
-    from,
+    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-    to {
+    animation-timing-function: ease-in;
-      transform: translate3d(0, 0, 0); }
+  }
-    10%,
-    30%,
-    50%,
-    70%,
-    90% {
-      transform: translate3d(-3px, 0, 0); }
-    20%,
-    40%,
-    60%,
-    80% {
-      transform: translate3d(3px, 0, 0); } }
 
-  @keyframes eva-pulse {
+  60% {
-    from {
+    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
-      transform: scale3d(1, 1, 1); }
+    opacity: 1;
-    50% {
+  }
-      transform: scale3d(1.2, 1.2, 1.2); }
-    to {
-      transform: scale3d(1, 1, 1); } }
 
-  @keyframes eva-zoomIn {
+  80% {
-    from {
+    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
-      opacity: 1;
+  }
-      transform: scale3d(0.5, 0.5, 0.5); }
+
-    50% {
+  to {
-      opacity: 1; } }
+    transform: perspective(400px);
+  }
+}
+
+@keyframes eva-shake {
+
+  from,
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: translate3d(-3px, 0, 0);
+  }
+
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: translate3d(3px, 0, 0);
+  }
+}
+
+@keyframes eva-pulse {
+  from {
+    transform: scale3d(1, 1, 1);
+  }
+
+  50% {
+    transform: scale3d(1.2, 1.2, 1.2);
+  }
+
+  to {
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes eva-zoomIn {
+  from {
+    opacity: 1;
+    transform: scale3d(0.5, 0.5, 0.5);
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
 
 ::-webkit-scrollbar {
-	width: 0 !important
+  width: 0 !important
 }
 
 .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 {