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

相关推荐
好_快41 分钟前
Lodash源码阅读-memoizeCapped
前端·javascript·源码阅读
好_快42 分钟前
Lodash源码阅读-toString
前端·javascript·源码阅读
好_快44 分钟前
Lodash源码阅读-memoize
前端·javascript·源码阅读
excel1 小时前
webpack 核心编译器 十四 节
前端
excel1 小时前
webpack 核心编译器 十三 节
前端
腾讯TNTWeb前端团队8 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰11 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪11 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪12 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy12 小时前
macOS 命令行 原生挂载 webdav 方法
前端