18.菜单logo制作

菜单logo制作

2. layout下新建MenuLogo.vue组件

MenuLofo.vue

vue 复制代码
<template>
    <div class="logo">
        <img :src="MenuLogo" alt="">
        <span class="logo-title">{{  title  }}</span>
    </div>
</template>

<script setup lang="ts">
import MenuLogo from '@/assets/logo.jpg'
import { ref } from 'vue';

const title = ref('校园二手交易平台')
</script>

<style scoped lang="scss">
.logo{
    display: flex;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: rgb(255, 255, 255);
    align-items: center;
    img{
        width: 50px;
        height: 50px;
    }
    .logo-title{
        color: black;
        font-weight: 600;
        font-size: 22px;
        font-family: FangSong;
    }
}

</style>

3. 效果图

相关推荐
西西木科技丨Shopify开发机构3 分钟前
如何在 Shopify 中建立重定向
前端·html
汪子熙10 分钟前
深入探析 header facets:定位与应用
前端·javascript
你听得到1111 分钟前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
江城开朗的豌豆15 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
小磊哥er20 分钟前
【前端工程化】如何制定前端项目中的页面模版?
前端
Liudef0623 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html
2401_8812444026 分钟前
javaweb———html
前端·javascript·html
江城开朗的豌豆26 分钟前
玩转Vue Router:这些实用组件让你的SPA如虎添翼!
前端·javascript·vue.js
前端小巷子30 分钟前
Web开发中的文件下载
前端·javascript·面试
peakmain937 分钟前
Gradle 8.11.1的升级之旅
前端