From 4e6c619abb97936fe17b3664c46c4222fdfd8846 Mon Sep 17 00:00:00 2001
From: EddieMa <machaoxue@yeah.net>
Date: Wed, 20 May 2020 11:55:37 +0800
Subject: [PATCH] =?UTF-8?q?=E6=90=9E=E5=AE=9A=20Account=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E7=9A=84=20HTML=20=E5=92=8C=20CSS=EF=BC=8C=20?=
 =?UTF-8?q?=E5=B9=B6=E9=A2=9D=E5=A4=96=E5=86=99=E4=BA=86=20reset.css,=20he?=
 =?UTF-8?q?lper.css=20body=20=E5=85=A8=E5=B1=80=E5=B1=9E=E6=80=A7=EF=BC=8C?=
 =?UTF-8?q?=20=E2=80=9C=E9=80=8F=E4=BC=A0=E2=80=9D=20CSS=20=E7=9A=84=20cla?=
 =?UTF-8?q?ss?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                       |  7 ++-
 src/assets/helper.scss            | 16 +++++++
 src/assets/reset.scss             | 11 ++++-
 src/components/Account/Choice.vue | 61 +++++++++++++++++++++++++
 src/components/Account/Note.vue   | 38 ++++++++++++++++
 src/components/Account/Show.vue   | 37 +++++++++++++++
 src/components/Account/Write.vue  | 76 +++++++++++++++++++++++++++++++
 src/components/Icon.vue           | 29 ++++++------
 src/components/Layout.vue         | 10 ++--
 src/components/Top.vue            | 41 ++++++++++-------
 src/components/Type.vue           | 47 +++++++++++++++++++
 src/views/Account.vue             | 27 ++++++++---
 src/views/Label.vue               |  7 ++-
 src/views/Statistics.vue          |  7 ++-
 14 files changed, 364 insertions(+), 50 deletions(-)
 create mode 100644 src/assets/helper.scss
 create mode 100644 src/components/Account/Choice.vue
 create mode 100644 src/components/Account/Note.vue
 create mode 100644 src/components/Account/Show.vue
 create mode 100644 src/components/Account/Write.vue
 create mode 100644 src/components/Type.vue

diff --git a/src/App.vue b/src/App.vue
index 7edaacb..18d8061 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,10 +10,13 @@
 </script>
 <style lang="scss">
   @import "~@/assets/reset.scss";
-
+  @import "~@/assets/helper.scss";
   body{
     background: #eeeeee;
     line-height: 1.5em;
-    font-family: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
+    font-family: $font-hei;
+    font-size:16px;
+    color: #333333;
+
   }
 </style>
diff --git a/src/assets/helper.scss b/src/assets/helper.scss
new file mode 100644
index 0000000..5e09ab7
--- /dev/null
+++ b/src/assets/helper.scss
@@ -0,0 +1,16 @@
+$font-hei: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
+$font-kai: Baskerville, Georgia, "Liberation Serif", "Kaiti SC", STKaiti, "AR PL UKai CN", "AR PL UKai HK", "AR PL UKai TW", "AR PL UKai TW MBE", "AR PL KaitiM GB", KaiTi, KaiTi_GB2312, DFKai-SB, "TW\-Kai", serif;
+$font-song: Georgia, "Nimbus Roman No9 L", "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif CN", STSong, "AR PL New Sung", "AR PL SungtiL GB", NSimSun, SimSun, "TW\-Sung", "WenQuanYi Bitmap Song", "AR PL UMing CN", "AR PL UMing HK", "AR PL UMing TW", "AR PL UMing TW MBE", PMingLiU, MingLiU, serif;
+$color-sky-blue:#0066cc;
+
+%clear-fix {
+  &::after {
+    content: '';
+    clear: both;
+    display: none;
+  }
+}
+
+
+
+
diff --git a/src/assets/reset.scss b/src/assets/reset.scss
index 5c4d647..05e1235 100644
--- a/src/assets/reset.scss
+++ b/src/assets/reset.scss
@@ -1,5 +1,14 @@
 *{margin:0;border:0;box-sizing:border-box}
+
 ul,ol{
   list-style: none;
 }
-a{text-decoration: none;color:inherit}
\ No newline at end of file
+a{text-decoration: none;color:inherit}
+
+:focus{
+  outline: none;
+}
+
+button,input{
+  font: inherit;
+}
\ No newline at end of file
diff --git a/src/components/Account/Choice.vue b/src/components/Account/Choice.vue
new file mode 100644
index 0000000..333aa55
--- /dev/null
+++ b/src/components/Account/Choice.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="choice-wrapper">
+    <div>类别</div>
+    <ul>
+      <li class="selected">默认</li>
+      <li>衣</li>
+      <li>食</li>
+      <li>住</li>
+      <li>行</li>
+    </ul>
+  </div>
+
+</template>
+
+<script lang="ts">
+  import Vue from 'vue';
+  import {Component} from 'vue-property-decorator';
+  
+  @Component
+  export default class Choice extends Vue {
+    
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "~@/assets/helper.scss";
+  .choice-wrapper{
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #ffffff;
+    padding:20px 0;
+    >div{
+      margin: 0 20px;
+      font-weight: bold;
+      white-space: nowrap;
+    }
+    >ul{
+      flex-grow:1;
+      display:flex;
+      justify-content: left;
+      align-items: center;
+      flex-wrap: wrap;
+      padding-left:0;
+      >li{
+        min-width: 52px;
+        text-align: center;
+        padding:5px 10px;
+        margin:5px 10px;
+        background: #ddd;
+        border-radius: 15px;
+        &.selected{
+          background: $color-sky-blue;
+          color: #ffffff;
+        }
+      }
+    }
+  }
+
+</style>
\ No newline at end of file
diff --git a/src/components/Account/Note.vue b/src/components/Account/Note.vue
new file mode 100644
index 0000000..a646aaa
--- /dev/null
+++ b/src/components/Account/Note.vue
@@ -0,0 +1,38 @@
+<template>
+    <label>
+      <span>备注</span>
+      <input type="text" placeholder="在这里添加备注">
+    </label>
+</template>
+
+<script lang="ts">
+  import Vue from 'vue';
+  import {Component} from 'vue-property-decorator';
+  
+  @Component
+  export default class Note extends Vue {
+    
+  }
+</script>
+
+<style lang="scss" scoped>
+  label{
+    display: flex;
+    justify-content: center;
+    background: #ffffff;
+    align-items: center;
+    >span{
+      margin: 5px 20px;
+      text-align: center;
+      line-height: 46px;
+      font-weight: bold;
+    }
+    >input{
+      flex-grow:1;
+      text-align: right;
+      margin-right: 25px;
+      line-height: 46px;
+      text-decoration: none;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/Account/Show.vue b/src/components/Account/Show.vue
new file mode 100644
index 0000000..bdc27ab
--- /dev/null
+++ b/src/components/Account/Show.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="show">
+    <div class="text">金额</div>
+    <div class="number">100.12</div>
+  </div>
+</template>
+
+<script lang="ts">
+  import Vue from 'vue';
+  import {Component} from 'vue-property-decorator';
+  
+  @Component
+  export default class Show extends Vue {
+    
+  }
+</script>
+
+<style lang="scss" scoped>
+  .show {
+    background: #ffffff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width:100vw;
+    > .text {
+      margin: 10px 20px;
+      font-weight: bold;
+      white-space: nowrap;
+    }
+    >.number{
+      flex-grow:1;
+      text-align: right;
+      margin-right: 25px;
+      font-family: Consolas, monospace;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/Account/Write.vue b/src/components/Account/Write.vue
new file mode 100644
index 0000000..6590111
--- /dev/null
+++ b/src/components/Account/Write.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="buttons">
+    <button>1</button>
+    <button>2</button>
+    <button>3</button>
+    <button>删除</button>
+    <button>4</button>
+    <button>5</button>
+    <button>6</button>
+    <button class="clear">清空</button>
+    <button>7</button>
+    <button>8</button>
+    <button>9</button>
+    <button class="ok">确认</button>
+    <button class="zero">0</button>
+    <button>.</button>
+  </div>
+</template>
+
+<script lang="ts">
+  import Vue from 'vue';
+  import {Component} from 'vue-property-decorator';
+  
+  @Component
+  export default class Write extends Vue {
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "~@/assets/helper.scss";
+  .buttons{
+    @extend %clear-fix;
+    padding-left: 0;
+    width:100vw;
+    >button{
+      float:left;
+      $height:64px;
+      width:25%;
+      height:$height;
+      text-align: center;
+      line-height: $height;
+      &.ok{
+        height:$height*2;
+        line-height: $height*2;
+        float:right;
+      }
+      &.zero{
+        width:50%;
+      }
+      $bg: #f2f2f2;
+      &:nth-child(1) {
+        background: $bg;
+      }
+      &:nth-child(2), &:nth-child(5) {
+        background: darken($bg, 4%);
+      }
+      &:nth-child(3), &:nth-child(6), &:nth-child(9) {
+        background: darken($bg, 4*2%);
+      }
+      &:nth-child(4), &:nth-child(7), &:nth-child(10) {
+        background: darken($bg, 4*3%);
+      }
+      &:nth-child(8), &:nth-child(11), &:nth-child(13) {
+        background: darken($bg, 4*4%);
+      }
+      &:nth-child(14) {
+        background: darken($bg, 4*5%);
+      }
+      &:nth-child(12) {
+        background: darken($bg, 4*6%);
+      }
+    }
+  }
+
+</style>
\ No newline at end of file
diff --git a/src/components/Icon.vue b/src/components/Icon.vue
index a658829..6f0b9f7 100644
--- a/src/components/Icon.vue
+++ b/src/components/Icon.vue
@@ -1,29 +1,28 @@
 <template>
-  <div>
-    <svg class="icon" :class='name'>
-      <use :xlink:href="'#'+name"></use>
-    </svg>
-  </div>
+  <svg class="icon">
+    <use :xlink:href="'#'+name"></use>
+  </svg>
 </template>
 
 <script lang="ts">
   const importAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext);
-  try {importAll(require.context('../assets/icons', true, /\.svg$/));} catch (error) {console.log(error);}
-
-  export default{
-    props:['name']
+  try {
+    importAll(require.context('../assets/icons', true, /\.svg$/));
+  } catch (error) {
+    console.log(error);
   }
+
+  export default {
+    props: ['name']
+  };
 </script>
 
 <style lang="scss" scoped>
   .icon {
-    width: 32px; height: 32px;
+    width: 32px;
+    height: 32px;
     vertical-align: -0.15em;
     fill: currentColor;
-    overflow: hidden;
-    &.person{
-      width:25px;
-      height:25px;
-    }
+    overflow: hidden
   }
 </style>
\ No newline at end of file
diff --git a/src/components/Layout.vue b/src/components/Layout.vue
index 9814704..6a0e78a 100644
--- a/src/components/Layout.vue
+++ b/src/components/Layout.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="layout-wrapper">
     <Top :name="name"/>
-    <div class="content">
-      <slot/>
+    <div class="content" :class="classPrefix && `${classPrefix}-content`">
+      <slot />
     </div>
-    <Nav class="nav"/>
+    <Nav/>
   </div>
 </template>
 
 <script lang="ts">
   export default {
     name:'Layout',
-    props: ['name']
+    props: ['name','classPrefix']
   }
 </script>
 
@@ -22,7 +22,7 @@
     flex-direction:column;
     .content{
       flex-grow:1;
+      overflow: auto;
     }
   }
-
 </style>
\ No newline at end of file
diff --git a/src/components/Top.vue b/src/components/Top.vue
index 2c68980..4c3242f 100644
--- a/src/components/Top.vue
+++ b/src/components/Top.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="wrapper">
+  <div class="top-wrapper">
     <Icon name="person"/>
     <header>浪浪记账</header>
     <p>{{name}}</p>
@@ -8,29 +8,38 @@
 
 <script lang="ts">
   import Icon from '@/components/Icon.vue';
-  export default{
-    name:'Top',
+
+  export default {
+    name: 'Top',
     components: {Icon},
-    props:['name']
-  }
+    props: ['name']
+  };
 </script>
 
 <style lang="scss" scoped>
+  @import "~@/assets/helper.scss";
   .wrapper{
-    display:flex;
-    flex-direction:row;
+    background: red;
+  }
+  .top-wrapper {
+    display: flex;
+    flex-direction: row;
     justify-content: space-between;
-    align-items:center;
-    padding:20px 20px;
-    color:#fff;
-    background: #0066CC;
-    box-shadow: 0 0 5px rgba(0,0,0,0.5);
-    header{
-      font-size: 25px;
+    align-items: center;
+    padding: 18px 20px;
+    color: #fff;
+    background: $color-sky-blue;
+    border-bottom: 1px solid white;
+    .icon{
+      width:25px;
+      height:25px;
+    }
+    header {
+      font-size: 22px;
       color: #ffffff;
     }
-    p{
-      font-size:15px;
+    p {
+      font-size: 15px;
     }
   }
 </style>
\ No newline at end of file
diff --git a/src/components/Type.vue b/src/components/Type.vue
new file mode 100644
index 0000000..5b98242
--- /dev/null
+++ b/src/components/Type.vue
@@ -0,0 +1,47 @@
+<template>
+  <ul>
+    <li class="selected">支出</li>
+    <li>收入</li>
+  </ul>
+</template>
+
+<script lang="ts">
+  import Vue from 'vue';
+  import {Component} from 'vue-property-decorator';
+  
+  @Component
+  export default class Top2 extends Vue {
+    
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "~@/assets/helper.scss";
+  ul {
+    background: $color-sky-blue;
+    display: flex;
+    padding-left: 0;
+    padding-right:0;
+    > li {
+      text-align: center;
+      width: 50%;
+      color: #ffffff;
+      padding: 13px 0;
+
+      &.selected {
+        position: relative;
+        &::after{
+          $width:32px;
+          content:'';
+          position: absolute;
+          left:50%;
+          bottom: 5px;
+          background: #ffffff;
+          height:3px;
+          width:$width;
+          margin-left: -$width/2;
+        }
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/views/Account.vue b/src/views/Account.vue
index d202657..a27650b 100644
--- a/src/views/Account.vue
+++ b/src/views/Account.vue
@@ -1,20 +1,33 @@
 <template>
-  <div>
-    <Layout name="记账">
-      <div>Account</div>
+    <Layout name="记账" class-prefix="layout">
+      <Type/>
+      <Choice/>
+      <Note/>
+      <Show/>
+      <Write/>
     </Layout>
-  </div>
 </template>
 
 <script lang="ts">
   import Vue from 'vue';
   import {Component} from 'vue-property-decorator';
-  @Component
+  import Type from '@/components/Type.vue';
+  import Choice from '@/components/Account/Choice.vue';
+  import Note from '@/components/Account/Note.vue';
+  import Write from '@/components/Account/Write.vue';
+  import Show from '@/components/Account/Show.vue';
+
+  @Component({
+    components: {Show, Write, Note, Choice, Type}
+  })
   export default class Account extends Vue {
     
   }
 </script>
 
-<style lang="scss" scoped>
-
+<style lang="scss">
+  .layout-content {
+    display: flex;
+    flex-direction: column;
+  }
 </style>
\ No newline at end of file
diff --git a/src/views/Label.vue b/src/views/Label.vue
index c5e496c..cee0f6b 100644
--- a/src/views/Label.vue
+++ b/src/views/Label.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <Layout name="标签">
+      <Type />
     <div>Label</div>
     </Layout>
   </div>
@@ -9,8 +10,10 @@
 <script lang="ts">
   import Vue from 'vue';
   import {Component} from 'vue-property-decorator';
-  
-  @Component
+  import Type from '@/components/Type.vue';
+  @Component({
+    components: {Type}
+  })
   export default class Label extends Vue {
     
   }
diff --git a/src/views/Statistics.vue b/src/views/Statistics.vue
index 222cb76..f909bd9 100644
--- a/src/views/Statistics.vue
+++ b/src/views/Statistics.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
   <Layout name="统计">
+    <Type/>
     <div>Statistics</div>
   </Layout>
   </div>
@@ -9,8 +10,10 @@
 <script lang="ts">
   import Vue from 'vue';
   import {Component} from 'vue-property-decorator';
-  
-  @Component
+  import Type from '@/components/Type.vue';
+  @Component({
+    components: {Type}
+  })
   export default class Statistics extends Vue {
     
   }