feat: layout

tianqing617 · Nov 7, 2021 · 4a4c53d · 4a4c53d
1 parent 6d16028
commit 4a4c53d
Show file tree

Hide file tree

Showing 8 changed files with 147 additions and 73 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,27 +1,35 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
-  <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
+  <div class="app-wrapper">
+    <play-ground />
+    <info-panel />
+  </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import HelloWorld from './components/HelloWorld.vue'
+import { PlayGround, InfoPanel } from './components'
 
 export default defineComponent({
   name: 'App',
   components: {
-    HelloWorld
-  }
+    PlayGround,
+    InfoPanel,
+  },
 })
 </script>
 
 <style lang="scss">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+.app-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 360px;
+  height: 420px;
+  border: 10px solid #000;
+  border-radius: 20px;
+  margin: auto;
+  margin-top: 40px;
+  background-color: #BDD4AB;
 }
 </style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -0,0 +1,7 @@
+import PlayGround from './playGround/index.vue'
+import InfoPanel from './infoPanel/index.vue'
+
+export {
+  PlayGround,
+  InfoPanel,
+}
diff --git a/src/components/infoPanel/index.vue b/src/components/infoPanel/index.vue
@@ -0,0 +1,34 @@
+<template>
+  <ul class="info-panel">
+    <li>
+      <span class="title">SCORE: </span>
+      <span class="num">3</span>
+    </li>
+    <li>
+      <span class="title">LEVEL: </span>
+      <span class="num">1</span>
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  name: 'InfoPanel',
+}
+</script>
+
+<style scoped>
+.info-panel {
+  outline: 1px solid;
+  margin-top: 20px;
+  display: flex;
+  justify-content: space-around;
+  font-size: 20px;
+  width: 100%;
+  height: 40px;
+  line-height: 40px;
+  .title {
+    font-weight: 800;
+  }
+}
+</style>
diff --git a/src/components/playGround/index.vue b/src/components/playGround/index.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="play-ground">
+    <div class="snake">
+      <i></i>
+      <i></i>
+      <i></i>
+    </div>
+    <div class="food"></div>
+
+    <div class="test-button"
+      @click="test"
+    >
+      test
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'PlayGround',
+  // eslint-disable-next-line
+  setup () {
+    function test (): void {
+      console.log('test')
+    }
+
+    return {
+      test,
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.play-ground {
+  width: 304px;
+  height: 304px;
+  border: 2px solid #000;
+  position: relative;
+}
+.snake {
+  display: inline-block;
+  position: absolute;
+  top: 20px;
+  left: 30px;
+  height: 10px;
+  line-height: 10px;
+  > i {
+    width: 10px;
+    height: 10px;
+    background-color: #000;
+    display: inline-block;
+    border: 1px solid #BDD4AB;
+  }
+}
+.food {
+  height: 10px;
+  width: 10px;
+  background-color: green;
+  top: 40px;
+  left: 100px;
+  position: absolute;
+}
+.test-button {
+  width: 60px;
+  height: 20px;
+  border: 1px solid;
+  top: 280px;
+  left: 240px;
+  position: absolute;
+  cursor: pointer;
+}
+</style>
diff --git a/src/main.ts b/src/main.ts
@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import './styles/index.css'
 
 createApp(App).mount('#app')
diff --git a/src/styles/index.css b/src/styles/index.css
@@ -0,0 +1 @@
+@import './normalize.css'
diff --git a/src/styles/normalize.css b/src/styles/normalize.css
@@ -0,0 +1,11 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+ul {
+  margin: 0px;
+  padding: 0px;
+  list-style: none;
+}