53·[Vue项目]旺财记账-记账页面样式

• HTML部分

• SCSS部分
• 字体最佳实践
• Money.vue样式
• 备注和收入支出样式
• numPad样式（计算器）
• 计算器背景
• 将空隙放到最上面
• 模块化

-曾老湿, 江湖人称曾老大。

---

-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机，连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。

---

HTML部分

---

先确定HTML

Money.vue

代码语言：javascript复制

<template>
    <div>
        <Layout>
            <div class="tags">
                <ul class="current">
                    <li>衣</li>
                    <li>食</li>
                    <li>住</li>
                    <li>行</li>
                </ul>
                <div class="new">
                    <button>新增标签</button>
                </div>
            </div>
            <div>
                <label class="notes">
                    <span class="name">备注</span>
                    <input type="text" placeholder="在这里添加备注">
                </label>
            </div>
            <div>
                <ul class="types">
                    <li class="selected">支出</li>
                    <li>收入</li>
                </ul>
            </div>
            <div class="numberPad">
                <div class="output">100</div>
                <div class="buttions">
                    <button>1</button>
                    <button>2</button>
                    <button>3</button>
                    <button>删除</button>
                    <button>4</button>
                    <button>5</button>
                    <button>6</button>
                    <button>清空</button>
                    <button>7</button>
                    <button>8</button>
                    <button>9</button>
                    <button>OK</button>
                    <button>0</button>
                    <button>.</button>
                </div>
            </div>
        </Layout>
    </div>
</template>

<script lang="ts">
    export default {
        name: 'Money',
    };
</script>

<style lang="scss" scoped>
</style>

SCSS部分

注意，就算上面HTML定下来了，也不是一定不会改的，所以在写CSS的过程中随时可能修改HTML

---

CSS reset

在assets/style目录下下创建一个reset.scss

代码语言：javascript复制

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: inherit;
}

ul, ol {
  list-style: none;
}

button, input {
  font: inherit;
}

:focus {
  outline: none;
}

App.vue引用

代码语言：javascript复制

<template>
    <div>
        <router-view/>
    </div>
</template>

<style lang="scss">
    @import "~@/assets/style/reset.scss";
    body {
        line-height: 1.5;
    }

    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
    }

    #nav {
        padding: 30px;

        a {
            font-weight: bold;
            color: #2c3e50;

            &.router-link-exact-active {
                color: #42b983;
            }
        }
    }
</style>

字体最佳实践

---

查找font.css

字体解决方案：TP



---

抄

在assets/style目录下创建一个helper.scss文件

然后复制刚才红框中的内容，也就是font-famliy，记住，只需要复制只即可。

代码语言：javascript复制

$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-highlight: #f00;

在App.vue文件中引入字体，优化App.vue并使用

代码语言：javascript复制

<template>
    <div>
        <router-view/>
    </div>
</template>

<style lang="scss">
    @import "~@/assets/style/reset.scss";
    @import "~@/assets/style/helper.scss";

    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #333;
        line-height: 1.5;
        font-family: $font-hei;
        font-size: 16px;
    }
</style>

Money.vue样式

---

第一部分

Money.vue

代码语言：javascript复制

<template>
    <div id="app">
        <Layout>
            <div class="tags">
                <ul class="current">
                    <li>衣</li>
                    <li>食</li>
                    <li>住</li>
                    <li>行</li>
                </ul>
                <div class="new">
                    <button>新增标签</button>
                </div>
            </div>
            <div>
                <label class="notes">
                    <span class="name">备注</span>
                    <input type="text" placeholder="在这里添加备注">
                </label>
            </div>
            <div>
                <ul class="types">
                    <li class="selected">支出</li>
                    <li>收入</li>
                </ul>
            </div>
            <div class="numberPad">
                <div class="output">100</div>
                <div class="buttions">
                    <button>1</button>
                    <button>2</button>
                    <button>3</button>
                    <button>删除</button>
                    <button>4</button>
                    <button>5</button>
                    <button>6</button>
                    <button>清空</button>
                    <button>7</button>
                    <button>8</button>
                    <button>9</button>
                    <button>OK</button>
                    <button>0</button>
                    <button>.</button>
                </div>
            </div>
        </Layout>
    </div>
</template>

<script lang="ts">
    export default {
        name: 'Money',
    };
</script>

<style lang="scss" scoped>
    @import "~@/assets/style/helper.scss";

    .tags {
        font-size: 14px;
        padding: 16px;

        > .current {
            display: flex;

            > li {
                background: #d9d9d9;
                /* 只有一行内容的时候可以让line-height=height让字体居中 */
                $h: 24px;
                height: $h;
                line-height: $h;
                border-radius: $h/2;
                padding: 0 16px;
                margin-right: 12px;
            }
        }

        > .new {
            padding-top: 16px;

            button {
                background: transparent;
                border: none;
                color: #999;
                border-bottom: 1px solid;
                padding: 0 4px;
            }
        }
    }
</style>



红框部分的样式搞定了。

备注和收入支出样式

代码语言：javascript复制

<template>
    <div id="app">
        <Layout>
            <div class="tags">
                <ul class="current">
                    <li>衣</li>
                    <li>食</li>
                    <li>住</li>
                    <li>行</li>
                </ul>
                <div class="new">
                    <button>新增标签</button>
                </div>
            </div>
            <div>
                <label class="notes">
                    <span class="name">备注</span>
                    <input type="text" placeholder="在这里添加备注">
                </label>
            </div>
            <div>
                <ul class="types">
                    <li class="selected">支出</li>
                    <li>收入</li>
                </ul>
            </div>
            <div class="numberPad">
                <div class="output">100</div>
                <div class="buttions">
                    <button>1</button>
                    <button>2</button>
                    <button>3</button>
                    <button>删除</button>
                    <button>4</button>
                    <button>5</button>
                    <button>6</button>
                    <button>清空</button>
                    <button>7</button>
                    <button>8</button>
                    <button>9</button>
                    <button>OK</button>
                    <button>0</button>
                    <button>.</button>
                </div>
            </div>
        </Layout>
    </div>
</template>

<script lang="ts">
    export default {
        name: 'Money',
    };
</script>

<style lang="scss" scoped>
    @import "~@/assets/style/helper.scss";

    .types {
        background: #c4c4c4;
        display: flex;
        text-align: center;
        font-size: 24px;

        > li {
            width: 50%;
            height: 64px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            /*当前li被选中使用 &，如果直接写.selected代表li里面的selected*/
            &.selected::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 4px;
                background: #333;
            }
        }
    }

    .notes {
        font-size: 14px;
        background: #f5f5f5;
        display: block;
        padding-left: 16px;
        display: flex;
        align-items: center;

        .name {
            padding-right: 16px;
        }

        input {
            height: 64px;
            flex-grow: 1;
            background: transparent;
            border: none;
            padding-right: 16px;
        }
    }

    .tags {
        font-size: 14px;
        padding: 16px;

        > .current {
            display: flex;

            > li {
                background: #d9d9d9;
                /* 只有一行内容的时候可以让line-height=height让字体居中 */
                $h: 24px;
                height: $h;
                line-height: $h;
                border-radius: $h/2;
                padding: 0 16px;
                margin-right: 12px;
            }
        }

        > .new {
            padding-top: 16px;

            button {
                background: transparent;
                border: none;
                color: #999;
                border-bottom: 1px solid;
                padding: 0 4px;
            }
        }
    }
</style>



numPad样式（计算器）

Money.vue

代码语言：javascript复制

<template>
    <div id="app">
        <Layout>
            <div class="tags">
                <ul class="current">
                    <li>衣</li>
                    <li>食</li>
                    <li>住</li>
                    <li>行</li>
                </ul>
                <div class="new">
                    <button>新增标签</button>
                </div>
            </div>
            <div>
                <label class="notes">
                    <span class="name">备注</span>
                    <input type="text" placeholder="在这里添加备注">
                </label>
            </div>
            <div>
                <ul class="types">
                    <li class="selected">支出</li>
                    <li>收入</li>
                </ul>
            </div>
            <div class="numberPad">
                <div class="output">100</div>
                <div class="buttions clearfix">
                    <button>1</button>
                    <button>2</button>
                    <button>3</button>
                    <button>删除</button>
                    <button>4</button>
                    <button>5</button>
                    <button>6</button>
                    <button>清空</button>
                    <button>7</button>
                    <button>8</button>
                    <button>9</button>
                    <button class="ok">OK</button>
                    <button class="zero">0</button>
                    <button>.</button>
                </div>
            </div>
        </Layout>
    </div>
</template>

<script lang="ts">
    export default {
        name: 'Money',
    };
</script>

<style lang="scss" scoped>
    @import "~@/assets/style/helper.scss";

    .numberPad {
        .output {
            font-size: 36px;
            font-family: Consolas, monospace; // 等宽字体，Consolas是windows的，monospace是编程字体
            padding: 9px 16px;
            text-align: right;
        }

        .buttions {
            > button {
                width: 25%;
                height: 64px;
                float: left;

                &.ok {
                    height: 64*2px;
                    float: right;
                }

                &.zero {
                    width: 25*2%;
                }
            }
        }
    }

    .types {
        background: #c4c4c4;
        display: flex;
        text-align: center;
        font-size: 24px;

        > li {
            width: 50%;
            height: 64px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            /*当前li被选中使用 &，如果直接写.selected代表li里面的selected*/
            &.selected::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 4px;
                background: #333;
            }
        }
    }

    .notes {
        font-size: 14px;
        background: #f5f5f5;
        display: block;
        padding-left: 16px;
        display: flex;
        align-items: center;

        .name {
            padding-right: 16px;
        }

        input {
            height: 64px;
            flex-grow: 1;
            background: transparent;
            border: none;
            padding-right: 16px;
        }
    }

    .tags {
        font-size: 14px;
        padding: 16px;

        > .current {
            display: flex;

            > li {
                background: #d9d9d9;
                /* 只有一行内容的时候可以让line-height=height让字体居中 */
                $h: 24px;
                height: $h;
                line-height: $h;
                border-radius: $h/2;
                padding: 0 16px;
                margin-right: 12px;
            }
        }

        > .new {
            padding-top: 16px;

            button {
                background: transparent;
                border: none;
                color: #999;
                border-bottom: 1px solid;
                padding: 0 4px;
            }
        }
    }
</style>

App.vue

这里为什么会有App.vue呢？因为我们用到了float布局，在他的父级元素上必须加一个clearfix，肌肉记忆

代码语言：javascript复制

<template>
    <div>
        <router-view/>
    </div>
</template>

<style lang="scss">
    @import "~@/assets/style/reset.scss";
    @import "~@/assets/style/helper.scss";

    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #333;
        line-height: 1.5;
        font-family: $font-hei;
        font-size: 16px;
    }
    .clearfix::after{
        content: '';
        display: block;
        clear: both;
    }
</style>



不过一直这么写，没有什么新鲜感，每次都用clearfix，今天我们来用个新方法，既然用了scss语法，那么我们 就直接在buttons里面写

在helper.scss中定义变量

helper.scss

代码语言：javascript复制

%x {
  &::after {
    content: '';
    clear: both;
    display: block;
  }
}

然后在Money.vue中引用变量

代码语言：javascript复制

<template>
    <div id="app">
        <Layout>
            <div class="tags">
                <ul class="current">
                    <li>衣</li>
                    <li>食</li>
                    <li>住</li>
                    <li>行</li>
                </ul>
                <div class="new">
                    <button>新增标签</button>
                </div>
            </div>
            <div>
                <label class="notes">
                    <span class="name">备注</span>
                    <input type="text" placeholder="在这里添加备注">
                </label>
            </div>
            <div>
                <ul class="types">
                    <li class="selected">支出</li>
                    <li>收入</li>
                </ul>
            </div>
            <div class="numberPad">
                <div class="output">100</div>
                <div class="buttions">
                    <button>1</button>
                    <button>2</button>
                    <button>3</button>
                    <button>删除</button>
                    <button>4</button>
                    <button>5</button>
                    <button>6</button>
                    <button>清空</button>
                    <button>7</button>
                    <button>8</button>
                    <button>9</button>
                    <button class="ok">OK</button>
                    <button class="zero">0</button>
                    <button>.</button>
                </div>
            </div>
        </Layout>
    </div>
</template>

<script lang="ts">
    export default {
        name: "Money",
    };
</script>

<style lang="scss" scoped>
    @import "~@/assets/style/helper.scss";

    .numberPad {
        .output {
            font-size: 36px;
            font-family: Consolas, monospace; // 等宽字体，Consolas是windows的，monospace是编程字体
            padding: 9px 16px;
            text-align: right;
        }

        .buttions {
            // 代替clearfix,但是如果写在这里就会很重复，那么我们就使用变量的方式，我与重复不共戴天。
            /*&::after{*/
            /*    content: '';*/
            /*    display: block;*/
            /*    clear: both;*/
            /*}*/
            // 此处引用helper.scss的变量
            @extend %x;

            > button {
                width: 25%;
                height: 64px;
                float: left;

                &.ok {
                    height: 64*2px;
                    float: right;
                }

                &.zero {
                    width: 25*2%;
                }
            }
        }
    }

    .types {
        background: #c4c4c4;
        display: flex;
        text-align: center;
        font-size: 24px;

        > li {
            width: 50%;
            height: 64px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            /*当前li被选中使用 &，如果直接写.selected代表li里面的selected*/
            &.selected::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 4px;
                background: #333;
            }
        }
    }

    .notes {
        font-size: 14px;
        background: #f5f5f5;
        display: block;
        padding-left: 16px;
        display: flex;
        align-items: center;

        .name {
            padding-right: 16px;
        }

        input {
            height: 64px;
            flex-grow: 1;
            background: transparent;
            border: none;
            padding-right: 16px;
        }
    }

    .tags {
        font-size: 14px;
        padding: 16px;

        > .current {
            display: flex;

            > li {
                background: #d9d9d9;
                /* 只有一行内容的时候可以让line-height=height让字体居中 */
                $h: 24px;
                height: $h;
                line-height: $h;
                border-radius: $h/2;
                padding: 0 16px;
                margin-right: 12px;
            }
        }

        > .new {
            padding-top: 16px;

            button {
                background: transparent;
                border: none;
                color: #999;
                border-bottom: 1px solid;
                padding: 0 4px;
            }
        }
    }
</style>

计算器背景

Money.vue

代码语言：javascript复制

<template>
    <div id="app">
        <Layout>
            <div class="tags">
                <ul class="current">
                    <li>衣</li>
                    <li>食</li>
                    <li>住</li>
                    <li>行</li>
                </ul>
                <div class="new">
                    <button>新增标签</button>
                </div>
            </div>
            <div>
                <label class="notes">
                    <span class="name">备注</span>
                    <input type="text" placeholder="在这里添加备注">
                </label>
            </div>
            <div>
                <ul class="types">
                    <li class="selected">支出</li>
                    <li>收入</li>
                </ul>
            </div>
            <div class="numberPad">
                <div class="output">100</div>
                <div class="buttions">
                    <button>1</button>
                    <button>2</button>
                    <button>3</button>
                    <button>删除</button>
                    <button>4</button>
                    <button>5</button>
                    <button>6</button>
                    <button>清空</button>
                    <button>7</button>
                    <button>8</button>
                    <button>9</button>
                    <button class="ok">OK</button>
                    <button class="zero">0</button>
                    <button>.</button>
                </div>
            </div>
        </Layout>
    </div>
</template>

<script lang="ts">
    export default {
        name: "Money",
    };
</script>

<style lang="scss" scoped>
    @import "~@/assets/style/helper.scss";

    .numberPad {
        .output {
            font-size: 36px;
            font-family: Consolas, monospace; // 等宽字体，Consolas是windows的，monospace是编程字体
            padding: 9px 16px;
            text-align: right;
            @extend %innerShadow;
        }

        .buttions {
            // 代替clearfix,但是如果写在这里就会很重复，那么我们就使用变量的方式，我与重复不共戴天。
            /*&::after{*/
            /*    content: '';*/
            /*    display: block;*/
            /*    clear: both;*/
            /*}*/
            // 此处引用helper.scss的变量
            @extend %clearFix;

            > button {
                width: 25%;
                height: 64px;
                float: left;
                background: transparent;
                border: none;


                &.ok {
                    height: 64*2px;
                    float: right;
                }

                &.zero {
                    width: 25*2%;
                }

                $bg: lightgreen;

                &: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%);
                }
            }
        }
    }

    .types {
        background: #c4c4c4;
        display: flex;
        text-align: center;
        font-size: 24px;

        > li {
            width: 50%;
            height: 64px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            /*当前li被选中使用 &，如果直接写.selected代表li里面的selected*/
            &.selected::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 4px;
                background: #333;
            }
        }
    }

    .notes {
        font-size: 14px;
        background: #f5f5f5;
        display: block;
        padding-left: 16px;
        display: flex;
        align-items: center;

        .name {
            padding-right: 16px;
        }

        input {
            height: 64px;
            flex-grow: 1;
            background: transparent;
            border: none;
            padding-right: 16px;
        }
    }

    .tags {
        font-size: 14px;
        padding: 16px;

        > .current {
            display: flex;

            > li {
                background: #d9d9d9;
                /* 只有一行内容的时候可以让line-height=height让字体居中 */
                $h: 24px;
                height: $h;
                line-height: $h;
                border-radius: $h/2;
                padding: 0 16px;
                margin-right: 12px;
            }
        }

        > .new {
            padding-top: 16px;

            button {
                background: transparent;
                border: none;
                color: #999;
                border-bottom: 1px solid;
                padding: 0 4px;
            }
        }
    }
</style>

helper.scss

代码语言：javascript复制

$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-highlight: #f00;

%clearFix {
  &::after {
    content: '';
    clear: both;
    display: block;
  }
}

$color-shadow: rgba(0, 0, 0, 0.25);
%outerShadow {
  box-shadow: 0 0 3px $color-shadow;
}

%innerShadow {
  box-shadow: inset 0 -5px 5px -5px $color-shadow,
  inset 0 5px 5px -5px $color-shadow;
}

将空隙放到最上面

Money.vue

代码语言：javascript复制

<template>
    <div id="app">
        <Layout class-prefix="layout">
            <div class="numberPad">
                <div class="output">100</div>
                <div class="buttions">
                    <button>1</button>
                    <button>2</button>
                    <button>3</button>
                    <button>删除</button>
                    <button>4</button>
                    <button>5</button>
                    <button>6</button>
                    <button>清空</button>
                    <button>7</button>
                    <button>8</button>
                    <button>9</button>
                    <button class="ok">OK</button>
                    <button class="zero">0</button>
                    <button>.</button>
                </div>
            </div>
            <div>
                <ul class="types">
                    <li class="selected">支出</li>
                    <li>收入</li>
                </ul>
            </div>
            <div>
                <label class="notes">
                    <span class="name">备注</span>
                    <input type="text" placeholder="在这里添加备注">
                </label>
            </div>
            <div class="tags">
                <div class="new">
                    <button>新增标签</button>
                </div>
                <ul class="current">
                    <li>衣</li>
                    <li>食</li>
                    <li>住</li>
                    <li>行</li>
                </ul>
            </div>
        </Layout>
    </div>
</template>

<script lang="ts">
    export default {
        name: "Money",
    };
</script>

<style lang="scss">
    .layout-content {
        /*border: 3px solid red;*/
        display: flex;
        flex-direction: column-reverse;
    }
</style>

<style lang="scss" scoped>
    @import "~@/assets/style/helper.scss";

    .numberPad {
        .output {
            font-size: 36px;
            font-family: Consolas, monospace; // 等宽字体，Consolas是windows的，monospace是编程字体
            padding: 9px 16px;
            text-align: right;
            @extend %innerShadow;
        }

        .buttions {
            // 代替clearfix,但是如果写在这里就会很重复，那么我们就使用变量的方式，我与重复不共戴天。
            /*&::after{*/
            /*    content: '';*/
            /*    display: block;*/
            /*    clear: both;*/
            /*}*/
            // 此处引用helper.scss的变量
            @extend %clearFix;

            > button {
                width: 25%;
                height: 64px;
                float: left;
                background: transparent;
                border: none;


                &.ok {
                    height: 64*2px;
                    float: right;
                }

                &.zero {
                    width: 25*2%;
                }

                $bg: lightgreen;

                &: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%);
                }
            }
        }
    }

    .types {
        background: #c4c4c4;
        display: flex;
        text-align: center;
        font-size: 24px;

        > li {
            width: 50%;
            height: 64px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            /*当前li被选中使用 &，如果直接写.selected代表li里面的selected*/
            &.selected::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 4px;
                background: #333;
            }
        }
    }

    .notes {
        font-size: 14px;
        background: #f5f5f5;
        display: block;
        padding-left: 16px;
        display: flex;
        align-items: center;

        .name {
            padding-right: 16px;
        }

        input {
            height: 64px;
            flex-grow: 1;
            background: transparent;
            border: none;
            padding-right: 16px;
        }
    }

    .tags {
        font-size: 14px;
        padding: 16px;
        flex-grow: 1;
        display: flex;
        flex-direction: column-reverse;

        > .current {
            display: flex;

            > li {
                background: #d9d9d9;
                /* 只有一行内容的时候可以让line-height=height让字体居中 */
                $h: 24px;
                height: $h;
                line-height: $h;
                border-radius: $h/2;
                padding: 0 16px;
                margin-right: 12px;
            }
        }

        > .new {
            padding-top: 16px;

            button {
                background: transparent;
                border: none;
                color: #999;
                border-bottom: 1px solid;
                padding: 0 4px;
            }
        }
    }
</style>

Layout.vue

代码语言：javascript复制

<template>
    <div class="nav-wrapper">
        <div class="content" :class="classPrefix && `${classPrefix}-content`">
            <slot/> <!--此处就是插槽，可以传递引用的内容-->
        </div>
        <Nav/>
    </div>
</template>

<script lang="ts">
    export default {
        props: ["classPrefix"],
        name: "Layout"
    };
</script>

<style lang="scss" scoped>
    .nav-wrapper {
        border: 1px solid green;
        display: flex;
        flex-direction: column;
        height: 100vh;
    }

    .content {
        flex-grow: 1;
        overflow: auto;
    }
</style>



模块化

现在看来，Money.vue里面的内容太多了，还没写typescript就已经200多行了。

为了避免组件冲突 ，我们可以在components目录下创建一个Money目录，然后把所有组件放入

---

Tags组件

代码语言：javascript复制

<template>
    <div class="tags">
        <div class="new">
            <button>新增标签</button>
        </div>
        <ul class="current">
            <li>衣</li>
            <li>食</li>
            <li>住</li>
            <li>行</li>
        </ul>
    </div>
</template>

<script lang="ts">
    export default {
        name: "Tags"
    };
</script>

<style lang="scss" scoped>
    .tags {
        font-size: 14px;
        padding: 16px;
        flex-grow: 1;
        display: flex;
        flex-direction: column-reverse;

        > .current {
            display: flex;

            > li {
                background: #d9d9d9;
                /* 只有一行内容的时候可以让line-height=height让字体居中 */
                $h: 24px;
                height: $h;
                line-height: $h;
                border-radius: $h/2;
                padding: 0 16px;
                margin-right: 12px;
            }
        }

        > .new {
            padding-top: 16px;

            button {
                background: transparent;
                border: none;
                color: #999;
                border-bottom: 1px solid;
                padding: 0 4px;
            }
        }
    }
</style>

---

Types组件

代码语言：javascript复制

<template>
    <ul class="types">
        <li class="selected">支出</li>
        <li>收入</li>
    </ul>
</template>

<script lang="ts">
    export default {
        name: "Types"
    };
</script>

<style lang="scss" scoped>
    .types {
        background: #c4c4c4;
        display: flex;
        text-align: center;
        font-size: 24px;

        > li {
            width: 50%;
            height: 64px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            /*当前li被选中使用 &，如果直接写.selected代表li里面的selected*/
            &.selected::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 4px;
                background: #333;
            }
        }
    }
</style>

---

Notes组件

代码语言：javascript复制

<template>
    <label class="notes">
        <span class="name">备注</span>
        <input type="text" placeholder="在这里添加备注">
    </label>
</template>

<script lang="ts">
    export default {
        name: "Notes"
    };
</script>

<style lang="scss" scoped>
    .notes {
        font-size: 14px;
        background: #f5f5f5;
        padding-left: 16px;
        display: flex;
        align-items: center;

        .name {
            padding-right: 16px;
        }

        input {
            height: 64px;
            flex-grow: 1;
            background: transparent;
            border: none;
            padding-right: 16px;
        }
    }
</style>

---

NumberPad组件

代码语言：javascript复制

<template>
    <div class="numberPad">
        <div class="output">100</div>
        <div class="buttions">
            <button>1</button>
            <button>2</button>
            <button>3</button>
            <button>删除</button>
            <button>4</button>
            <button>5</button>
            <button>6</button>
            <button>清空</button>
            <button>7</button>
            <button>8</button>
            <button>9</button>
            <button class="ok">OK</button>
            <button class="zero">0</button>
            <button>.</button>
        </div>
    </div>
</template>

<script lang="ts">
    export default {
        name: "NumberPad"
    };
</script>

<style lang="scss" scoped>
    @import "~@/assets/style/helper.scss";

    .numberPad {
        .output {
            font-size: 36px;
            font-family: Consolas, monospace; // 等宽字体，Consolas是windows的，monospace是编程字体
            padding: 9px 16px;
            text-align: right;
            @extend %innerShadow;
        }

        .buttions {
            // 代替clearfix,但是如果写在这里就会很重复，那么我们就使用变量的方式，我与重复不共戴天。
            /*&::after{*/
            /*    content: '';*/
            /*    display: block;*/
            /*    clear: both;*/
            /*}*/
            // 此处引用helper.scss的变量
            @extend %clearFix;

            > button {
                width: 25%;
                height: 64px;
                float: left;
                background: transparent;
                border: none;


                &.ok {
                    height: 64*2px;
                    float: right;
                }

                &.zero {
                    width: 25*2%;
                }

                $bg: lightgreen;

                &: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>

---

Money.vue

代码语言：javascript复制

<template>
    <div id="app">
        <Layout class-prefix="layout">
            <NumberPad/>
            <Types/>
            <Notes/>
            <Tags/>
        </Layout>
    </div>
</template>

<script lang="ts">
    import NumberPad from "@/components/Money/NumberPad.vue";
    import Types from "@/components/Money/Types.vue";
    import Notes from "@/components/Money/Notes.vue";
    import Tags from "@/components/Money/Tags.vue";

    export default {
        name: "Money",
        components: {Tags, Notes, Types, NumberPad},
    };
</script>

<style lang="scss">
    .layout-content {
        /*border: 3px solid red;*/
        display: flex;
        flex-direction: column-reverse;
    }
</style>

vue.js 运维 html 自动化 css

0 人点赞