1. 程式人生 > >h5移動端常見title樣式

h5移動端常見title樣式


<template>
    <div>
        <header>
            <div class="h-item">
                <i class="iconfont icon-interactive"></i>
            </div>
            <div class="h-item">
                <span class="actived">理財</span>
            </div>
            <div class="h-item">
                <span>支付</span>
            </div>
            <div class="h-item">
                <span>借款</span>
            </div>
            <div class="h-item">
               <span>保險</span> 
            </div>
            <div class="h-item">
                <i class="iconfont icon-add"></i>
            </div>
        </header>
    </div>
</template>
<style type="text/css">
    header{
        display: flex;height: 58px;
    }
    header .h-item{
        flex:1;
        display:flex; justify-content:center;align-items: center;
        /*text-align:center;line-height: 58px;*/
                
    }
    header .h-item i{
        font-size: 26px;
    }
    header .h-item span{
        font-size: 20px;font-weight: 500;border-bottom: none;

    }
    .actived{
        color:red !important;
        border-bottom: 2px solid red !important;

    }
</style>
<script>
    export default{}
</script>