前端Vue项目：旅游App-NavBar：结构与样式

Posted 2023-01-06 karshey

文章目录

• • 目标
  • 总代码
  • 参考

目标

做出这个即可。

总代码

写在home.vue中。都是html和css。

<template>
    <div class="home">
        <div class="nav-bar">
            <div class="title">旅游App</div>
            <div class="banner">
                <img src="@/assets/img/home/banner.webp" alt="">
            </div>
            <div class="location">
                <div class="city">广州</div>
                <div class="position">
                    <div class="text">我的位置</div>
                    <img src="@/assets/img/home/icon_location.png" alt="">
                </div>
            </div>
        </div>

    </div>
</template>

<script setup>

</script>

<style lang="less" scoped>
.home 
    .nav-bar 
        .title 
            height: 46px;

            // flex居中,以后左右有东西可以直接加
            display: flex;
            align-items: center;
            justify-content: center;

            color: var(--primary-color);
            font-size: 16px;
            font-weight: 700;
        

        .banner 

            // 图片本身大很多,让它大小刚好
            img 
                width: 100%;
            
        

        .location 
            height: 44px;

            display: flex;
            align-items: center;
            padding: 0 20px;
            color: #53565c;

            .city 
                // flex:1 === flex:1 1 auto 除了position之外的剩余部分都属于city
                flex: 1;
            

            .position 
                width: 74px;

                display: flex;
                align-items: center;

                .text 
                    font-size: 12px;
                

                img 
                    width: 20px;
                    margin-left: 5px;
                
            
        
    

</style>

参考

解析flex属性：flex：1究竟是什么