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. 效果图

相关推荐
egghead263162 分钟前
trae+react+tailwindcss项目开发
前端·react.js
前端啵啵猪2 分钟前
基于qiankun实现子应用菜单级keep-alive
前端·javascript
徐小夕2 分钟前
写了一款3D可视化编辑器模版,开源!
前端·javascript·github
酱酱子耶5 分钟前
async没有了await会发生什么?实际问题
前端·react.js
windliang11 分钟前
Cursor 写一个网页标题重命名的浏览器插件
前端·浏览器
JavaDog程序狗14 分钟前
【前端】前端 CSS 原子化,代码乐高随便搭
前端·css
只可远观15 分钟前
Mac搭建Flutter IOS环境详细指南
前端·flutter·macos·ios
程序员马晓博16 分钟前
还是聊聊吧:"大龄"程序员失业的一年
前端·程序员
忧郁的蛋~32 分钟前
开发vue项目所需要安装的依赖包
前端·javascript·vue.js