购物车导航栏开发手册

最新推荐文章于 2024-09-14 17:04:32 发布

淡绿色的东亚唐棣

最新推荐文章于 2024-09-14 17:04:32 发布

阅读量155

点赞数

分类专栏： vue 文章标签： iconfont css 前端开发购物车导航 Vue

本文链接：https://blog.csdn.net/qq_32218557/article/details/119944528

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

购物车tab导航栏开发：

1：注册个人icon账户，选择自己所需要的图标

2：将icon下载到本地后解压，打开iconfont.css，复制：@font-face ，.iconfont 两个css代码到自己的项目，将icon官网生成的css替换掉 @font-face

@font-face {
  font-family: 'iconfont';  /* Project id 2772013 */
  src: url('//at.alicdn.com/t/font_2772013_gtvtlxo61eo.woff2?t=1630019151797') format('woff2'),
       url('//at.alicdn.com/t/font_2772013_gtvtlxo61eo.woff?t=1630019151797') format('woff'),
       url('//at.alicdn.com/t/font_2772013_gtvtlxo61eo.ttf?t=1630019151797') format('truetype');
}

 
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

3：在App.vue 引入这个css文件

4：使用：

<template>
  <div class="docker">
	<span class="docker_item">
		<div class="iconfont">&#xe609;</div>
		首页
		</span>
	<span class="docker_item">
		<div class="iconfont">&#xe62f;</div>
		购物车
		</span>
	<span class="docker_item">
		<div class="iconfont">&#xe61e;</div>
		订单
		</span>
	<span class="docker_item">
		<div class="iconfont">&#xe664;</div>
		我的
		</span>
  </div>
</template>

<style>
  .docker{
	  display: flex;
      position: absolute;
      left: 0;
      bottom:0;
      width:100%;
      height: 40px;
      border-top: 1px solid #1F1F1F;
      background: gold;
    }
.docker_item{
	flex: 1;
	text-align: center;
}
body{
	font-size: 12px;
}
</style>

最终的效果：