搞定 Account 组件的 HTML 和 CSS，

并额外写了 reset.css, helper.css body 全局属性， “透传” CSS 的 class
mcxue · May 20, 2020 · 4e6c619 · 4e6c619
1 parent 9aba5c6
commit 4e6c619
Show file tree

Hide file tree

Showing 14 changed files with 364 additions and 50 deletions.
diff --git 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
@@ -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
@@ -1,5 +1,14 @@
 *{margin:0;border:0;box-sizing:border-box}
+
 ul,ol{
   list-style: none;
 }
-a{text-decoration: none;color:inherit}
+a{text-decoration: none;color:inherit}
+
+:focus{
+  outline: none;
+}
+
+button,input{
+  font: inherit;
+}
diff --git a/src/components/Account/Choice.vue 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>
diff --git a/src/components/Account/Note.vue 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>
diff --git a/src/components/Account/Show.vue 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>
diff --git a/src/components/Account/Write.vue 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>
diff --git 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>
diff --git 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>