diff --git a/.gitignore b/.gitignore
new file mode 100644
index 00000000..ac7b2b54
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+*.psd
\ No newline at end of file
diff --git a/apps/character.js b/apps/character.js
index 025e86b1..2935650d 100644
--- a/apps/character.js
+++ b/apps/character.js
@@ -67,13 +67,15 @@ export async function character(e, { render, MysApi, User }) {
   avatars = lodash.keyBy(avatars, "id");
 
   if (roleId == 20000000) {
+
     if (avatars["10000005"]) {
-      roleId = "10000005";
+      roleId = 10000005;
     }
     if (avatars["10000007"]) {
-      roleId = "10000007";
+      roleId = 10000007;
     }
   }
+  char.roleId = roleId;
 
   if (!avatars[roleId]) {
     let name = lodash.truncate(e.sender.card, { length: 8 });
diff --git a/components/models/Character.js b/components/models/Character.js
index 0dfbff8d..788a0bce 100644
--- a/components/models/Character.js
+++ b/components/models/Character.js
@@ -26,10 +26,25 @@ const elemName = {
 class Character extends Base {
   constructor(name) {
     super();
-    this.name = name;
+    this._name = name;
     this.sName = this.name;
     this.id = YunzaiApps.mysInfo['roleIdToName'](name);
-    lodash.extend(this, getMetaData(name))
+    lodash.extend(this, getMetaData(name));
+  }
+
+  get name() {
+    if (this.roleId) {
+      if (this.roleId * 1 === 10000005) {
+        this._name = "空";
+      } else if (this.roleId * 1 === 10000007) {
+        this._name = "荧";
+      }
+    }
+    return this._name;
+  }
+
+  set name(name) {
+    this._name = name;
   }
 
   async checkImgCache(resDir) {
diff --git a/resources/character/character.css b/resources/character/character.css
index 625f58e6..514dc6cf 100644
--- a/resources/character/character.css
+++ b/resources/character/character.css
@@ -30,7 +30,7 @@
 body {
   font-size: 16px;
   color: #fff;
-  transform: scale(1.40);
+  transform: scale(1);
   transform-origin: 0 0;
 }
 
@@ -53,7 +53,7 @@ body {
   left: 0px;
   right: 0px;
   box-shadow: 0 -5px 10px 0 #000;
-  padding: 35px 10px 10px 35px;
+  padding: 10px 10px 10px 150px;
   text-shadow: 0 0 1px #000, 1px 1px 3px #000;
   font-family: tttgbnumber;
 
@@ -69,18 +69,20 @@ body {
   font-size: 36px;
 }
 
+
 .char_name {
   font-family: "NZBZ";
-  font-size: 80px;
+  font-size: 60px;
   letter-spacing: 5px;
   line-height: 90px;
-  height: 100px;
-  text-shadow: 0 0 3px #000, 3px 3px 5px #000;
   display: inline-block;
-  position: absolute;
-  top: -60px;
-  left: 20px;
   white-space: nowrap;
+  position: absolute;
+  top: 10px;
+  padding-left: 20px;
+  left: 0;
+  height: 85px;
+  text-shadow: 0 0 3px #000, 3px 3px 5px #000;
 }
 
 .char_name:after {
@@ -95,6 +97,8 @@ body {
   left: -50px;
   opacity: 1;
   transition: width 0.3s 0.1s, opacity 0.3s 0.1s;
+  box-shadow: 0 0 2px 0 #000;
+  bottom: 1px;
 }
 
 .char_name .uid {
@@ -105,9 +109,10 @@ body {
   top: -25px;
   left: 15px;
   letter-spacing: 0;
+  top: 90px;
 }
 
-.char_name .cons {
+.cons {
   display: inline-block;
   width: 55px;
   height: 35px;
@@ -120,6 +125,7 @@ body {
   font-family: tttgbnumber;
   box-shadow: 0px 0px 3px 0px #000;
   text-shadow: 0 0 3px #000;
+  margin-right: 15px;
 }
 
 .cons_0 {
@@ -152,8 +158,7 @@ body {
 
 .crown {
   width: 35px;
-  height: 35px;
-  margin-top: -3px;
+  height: 30px;
   margin-left: 15px;
   display: inline-block;
   background-size: contain;
@@ -170,11 +175,11 @@ body {
 }
 
 .crown.crown_2 {
-  width: 70px;
+  width: 60px;
 }
 
 .crown.crown_3 {
-  width: 105px;
+  width: 90px;
 }
 
 .detail {
@@ -395,24 +400,11 @@ body.bottom_mode {
   width: 500px;
 }
 
-.bottom_mode .cons {
-  position: absolute;
-  left: 5px;
-  top: -30px;
-}
-
-.bottom_mode .uid {
-  left: 70px;
-}
-
-.bottom_mode .info {
-  padding-left: 150px;
-}
 
 .bottom_mode .weapon {
   left: 0;
   bottom: 0;
-  top: 40px;
+  top: 0px;
   padding-top: 120px;
   width: 140px;
 }
@@ -468,7 +460,6 @@ body.bottom_mode {
 .left_mode {
   width: 800px;
   transform: scale(1);
-
 }
 
 .left_mode .info {
@@ -478,27 +469,6 @@ body.bottom_mode {
   border-radius: 0 20px 0 0;
 }
 
-.left_mode .char_name {
-  position: fixed;
-  top: 10px;
-  font-size: 60px;
-  padding-left: 20px;
-  left: 0;
-  height: 85px;
-  text-shadow: 0 0 3px #000, 3px 3px 5px #000;
-}
-
-.left_mode .char_name:after {
-  box-shadow: 0 0 2px 0 #000;
-}
-
-.left_mode .char_name:after {
-  bottom: 1px;
-}
-
-.left_mode .char_name .uid {
-  top: 90px;
-}
 
 .left_mode .weapon {
   top: -170px;
diff --git a/resources/character/character.html b/resources/character/character.html
index 7f461f8b..c04dd928 100644
--- a/resources/character/character.html
+++ b/resources/character/character.html
@@ -7,23 +7,26 @@
 </head>
 <body class="{{bg.mode}}_mode">
 <div class="container" id="container">
+  <div class="char_name">
+    <div class="uid">ID:{{uid}}</div>
+    <span>{{ds.name}}</span>
+    <span
+        class="cons cons_{{actived_constellation_num}}">{{actived_constellation_num}}命</span>
+  </div>
   <div class="info">
-    <div class="char_name">
-      <div class="uid">ID:{{uid}}</div>
-      <span>{{ds.name}} <span
-          class="cons cons_{{actived_constellation_num}}">{{actived_constellation_num}}命</span></span>
-    </div>
-    <div class="detail"> Lv.{{level}} ❤{{fetter}}
+    <div class="detail">  Lv.{{level}} ❤{{fetter}}
       <span class="crown crown_{{crownNum}}"></span>
     </div>
 
     <div class="weapon">
       <div class="weapon_cont">
         <img title="{{weapon.name}}" src="{{_res_path}}/genshin/logo/weapon/{{weapon.name}}.png"/>
+
         <p class="weapon_lv">Lv.{{weapon.level}}</p>
         <p class="weapon_affix">{{weapon.affix_level}}</p>
       </div>
       <p class="weapon_name">
+
         <span class="for_left">Lv.{{weapon.level}} 精{{weapon.affix_level}}</span>
         <span class="for_bottom">精{{weapon.affix_level}} </span>
         {{weapon.name}}