增加首页导航排版组件

Tevin

2023-11-14 63e7870f4e38fb1652ba336e460b6b238b03ba46

增加首页导航排版组件

 layout/homeNav/CHomeItem.vue

New file
@@ -0,0 +1,39 @@
/**
 * CHomeItem
 * @author Tevin
 */

<template>
    <CAnchor
        class="c-home-item"
        :href="href"
    >
        <image
            class="c-home-item-icon"
            :src="icon"
            mode="aspectFit"
        />
        <view class="c-home-item-label">{{label}}</view>
    </CAnchor>
</template>

<script>
import Taro from '@tarojs/taro';
import { CAnchor } from '@components/layout/anchor';

export default {
    name: 'CHomeItem',
    components: {
        CAnchor,
    },
    props: {
        // 名称
        label: String,
        // 图标地址
        icon: String,
        // 链接地址
        href: String,
    },
    methods: {},
};
</script>

 layout/homeNav/CHomeNav.vue

New file
@@ -0,0 +1,27 @@
/**
 * CHomeNav
 * @author Tevin
 */

<template>
    <view :class="['c-home-nav', 'col-'+layout]">
        <slot />
    </view>
</template>

<script>
import Taro from '@tarojs/taro';
import './cHomeNav.scss';

export default {
    name: 'CHomeNav',
    props: {
        // 排版方式，two/three
        layout: {
            type: String,
            default: 'two',
        },
    },
    methods: {},
};
</script>

 layout/homeNav/cHomeNav.scss

New file
@@ -0,0 +1,79 @@
/**
 * CHomeNav
 * @author Tevin
 */

@import "../../common/sassMixin";

.c-home-nav {
    margin-bottom: 20px;
    &.col-two {
        @include clearfix;
        .c-home-item {
            float: left;
            width: 50%;
            height: 200px;
            @include flexbox(flex, space-between center);
            background-color: #fff;
            box-sizing: border-box;
            border-bottom: #e2e2e2 1PX solid;
            &:nth-child(1) {
                border-top: #e2e2e2 1PX solid;
            }
            &:nth-child(2) {
                border-top: #e2e2e2 1PX solid;
            }
            &:nth-child(2n+1) {
                border-right: #e2e2e2 1PX solid;
            }
            &:active {
                background-color: #f2f2f2;
            }
        }
        .c-home-item-icon {
            width: 100px;
            height: 100px;
            margin: 0 20px 0 40px;
        }
        .c-home-item-label {
            max-width: calc(100% - 160px - 40px);
            padding-right: 40px;
            line-height: 46px;
            vertical-align: middle;
            white-space: pre-wrap;
        }
        @at-root .super & {
            .c-home-item-label {
                max-width: calc(100% - 160px - 20px);
                padding-right: 20px;
            }
        }
    }
    &.col-three {
        width: 100%;
        @include flexbox(flex, flex-start center, n wrap);
        .c-home-item {
            width: 33.3%;
            height: 246px;
            padding: 36px 0 0;
            text-align: center;
            box-sizing: border-box;
            border-right: 1px solid #e2e2e2;
            border-bottom: 1px solid #e2e2e2;
            box-sizing: border-box;
            background-color: #fff;
            &:active {
                background-color: #f2f2f2;
            }
            &:nth-child(3n+3) {
                border-right: none;
            }
        }
        .c-home-item-icon {
            display: block;
            width: 120px;
            height: 120px;
            margin: 0 auto 8px;
        }
    }
}

 layout/homeNav/index.js

New file
@@ -0,0 +1,12 @@
/**
 * layout
 * @author Tevin
 */

import CHomeNav from '@components/layout/homeNav/CHomeNav.vue';
import CHomeItem from '@components/layout/homeNav/CHomeItem.vue';

export {
    CHomeNav,
    CHomeItem,
}