feat: genshin Character

modal, css grid, Teleport
DrAugus · Jul 12, 2022 · cb517cc · cb517cc
1 parent 372af50
commit cb517cc
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 22 deletions.
diff --git a/src/.vuepress/components/genshin/Characters.vue b/src/.vuepress/components/genshin/Characters.vue
@@ -1,20 +1,18 @@
 <template>
 
-  <div class="character-info" v-for="(value, key, index) in info">
+  <div class="character-info">
 
-    <Modal :info="{
-      header: value.name,
-      img:'https://github.com/DrAugus/data/blob/master/game/genshin/characters/half/' + value.id +'.png?raw=true',
-      body: value.intro,
-      footer:'todo',
-     }"></Modal>
+    <div v-for="(value, key, index) in info">
+
+      <Modal :info="{
+        name:value.name,
+        prefix:value.prefix,
+        id:value.id,
+        intro:value.intro,
+        }"></Modal>
 
-    <div class="character-avatar">
-      <img :src="'https://github.com/DrAugus/data/blob/master/game/genshin/characters/' + value.id +'.png?raw=true'">
     </div>
-    <blockquote>
-      {{ value.intro }}
-    </blockquote>
+
   </div>
 
 </template>
@@ -41,9 +39,10 @@ export default {
 </script>
 
 <style scoped>
-.character-avatar {
-  background-repeat: no-repeat;
-  background-position: center;
-  border-radius: 10px;
+
+.character-info {
+  display: grid;
+  grid-template-columns: auto auto auto auto;
 }
+
 </style>
diff --git a/src/.vuepress/components/genshin/Modal.vue b/src/.vuepress/components/genshin/Modal.vue
@@ -5,7 +5,8 @@ export default {
   props: {
     info: {
       type: Object,
-      default: () => {}
+      default: () => {
+      }
     }
   },
   components: {
@@ -20,22 +21,27 @@ export default {
 </script>
 
 <template>
-  <a id="show-modal" @click="showModal = true">{{info.header}}</a>
+
+  <div class="character" id="show-modal" @click="showModal = true">
+    <img :src="'https://github.com/DrAugus/data/blob/master/game/genshin/characters/' + info.id +'.png?raw=true'">
+    <p>{{ info.name }}</p>
+  </div>
 
   <Teleport to="body">
     <!-- use the modal component, pass in the prop -->
     <modal :show="showModal" @close="showModal = false">
       <template #header>
-        <h3>{{ info.header }}</h3>
+        <h3>{{ info.prefix + " · " + info.name }}</h3>
       </template>
       <template #body>
         <div class="img-half">
-          <img :src="info.img">
+          <img
+              :src="'https://github.com/DrAugus/data/blob/master/game/genshin/characters/half/' + info.id +'.png?raw=true'">
         </div>
-        <span>{{ info.body }}</span>
+        <span>{{ info.intro }}</span>
       </template>
       <template #footer>
-        <span>{{ info.footer }}</span>
+        <span>todo</span>
       </template>
     </modal>
   </Teleport>
@@ -56,4 +62,68 @@ export default {
   bottom: 0;
   width: 100%
 }
+
+.character:hover {
+  background-position: 0 -150px;
+}
+
+.character {
+  width: 110px !important;
+  height: 150px;
+  background: transparent url(data:image/png;base64,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) no-repeat 0 0;
+  font-size: 0;
+  cursor: pointer;
+  margin-right: 34px;
+}
+
+.character {
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  position: relative;
+  -webkit-transition-property: -webkit-transform;
+  transition-property: -webkit-transform;
+  -o-transition-property: transform;
+  transition-property: transform;
+  transition-property: transform, -webkit-transform;
+  transition-property: transform, -webkit-transform;
+}
+
+.character img {
+  display: block;
+  margin: 2px auto 0;
+  width: 106px;
+  height: 106px;
+}
+
+.character:hover p {
+  color: #121212;
+}
+
+.character p {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  line-height: 18px;
+  color: #fff;
+  text-shadow: 0 2px 6px rgb(0 0 0 / 20%);
+  text-align: center;
+}
+
+.img-half {
+  position: relative
+}
+
+.img-half img {
+  display: block;
+  border-radius: 5px;
+  position: relative;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%
+}
+
 </style>