BJ_web_developers / dyitoc

Commit a390d3776f017040b322a2af7c8c54b9cdac36ed

Authored by liuqimichale
1 parent 237f69eb

泊位

Inline Side-by-side
Showing 2 changed files with 86 additions and 2 deletions
src/views/berthsection.vue 0 → 100644
  View file @a390d37
  1 +<template>
  2 + <div>
  3 + <titlesection title="泊位"></titlesection>
  4 + <totalsection :totalNum="totalVal"></totalsection>
  5 + <ul class="flexfm berth-wrap">
  6 + <li></li>
  7 + <li>
  8 + <div>
  9 + <p><span class="free">{{ free|formatNum }}</span> <span>空余</span></p>
  10 + </div>
  11 + <div>
  12 + <p><span class="nofree">{{ nofree|formatNum }}</span> <span>占有</span></p>
  13 + </div>
  14 +
  15 + </li>
  16 + </ul>
  17 + </div>
  18 +</template>
  19 +
  20 +<script>
  21 +import titlesection from '../components/titlesection'
  22 +import totalsection from '../components/total'
  23 +import { formatNum } from '../filters/filters'
  24 +import {fetchList} from '../api/api'
  25 +
  26 +export default {
  27 + name: 'berthsection',
  28 + components: {
  29 + titlesection,
  30 + totalsection
  31 + },
  32 + data() {
  33 + return {
  34 + totalVal: '21973',
  35 + free: '454123',
  36 + nofree: '5125'
  37 + }
  38 + },
  39 + created() {
  40 + },
  41 + methods: {
  42 + getList() {
  43 + fetchList()
  44 + .then(res => {
  45 + console.log(res);
  46 +
  47 + });
  48 + },
  49 + }
  50 +}
  51 +</script>
  52 +
  53 +<style lang="scss" scoped>
  54 + .berth-wrap {
  55 + display: flex;
  56 + li{
  57 + flex: 1;
  58 + div{
  59 + height: 50%;
  60 + display: flex;
  61 + align-items:center;
  62 + p{
  63 + height: 24px;
  64 + color: #fff;
  65 + font-size: 12px;
  66 + .free{
  67 + @include fonttextStyle(24px);
  68 + background-image: $fontBlue;
  69 + }
  70 + .nofree{
  71 + @include fonttextStyle(24px);
  72 + background-image: $fontOrange;
  73 + }
  74 + span:nth-of-type(1){
  75 + width: 100px;
  76 + display: inline-block;
  77 + }
  78 + }
  79 + }
  80 + }
  81 + }
  82 +</style>
... ...
src/views/mainContainer.vue
  View file @a390d37
... ... @@ -12,7 +12,7 @@
12 12 </li>
13 13 <li>
14 14 <sfysection class="sectionsmall"></sfysection>
15   - <div class="sectionsmall margin12-0"></div>
  15 + <berthsection class="sectionsmall margin12-0"></berthsection>
16 16 <div class="sectionsmall"></div>
17 17 </li>
18 18 </ul>
... ... @@ -26,6 +26,7 @@ import pdasection from &#39;../views/pdasection&#39;
26 26 import dicisection from '../views/dicisection'
27 27 import youdaopingsection from '../views/youdaopingsection'
28 28 import sfysection from '../views/sfysection'
  29 +import berthsection from '../views/berthsection'
29 30  
30 31 export default {
31 32 name: 'mainContainer',
... ... @@ -34,7 +35,8 @@ export default {
34 35 pdasection,
35 36 dicisection,
36 37 youdaopingsection,
37   - sfysection
  38 + sfysection,
  39 + berthsection
38 40 },
39 41 data() {
40 42 return {
... ...