乐意购项目前端开发 #3

一、icon的使用

前往网站挑选要的图标

iconfont-阿里巴巴矢量图标库icon-default.png?t=N7T8https://www.iconfont.cn/?spm=a313x.manage_type_myprojects.i3.2.2f173a81fQSVOU

创建项目添加图标

选择Font Class 下载到本地

解压后会看到这个页面

在asserts目录下创建iconfont目录,然后将最底下的6个文件拉进去

在main.js添加

import "@/assets/iconfont/iconfont.js"
import "@/assets/iconfont/iconfont.css"

基本使用

方法一

<template><div><i class="iconfont">&#xe614;</i></div>
</template>

&#xe614; 是在iconfont页面

方法二

打开iconfont.css文件,修改名称

如何使用

<template><div><i class="iconfont">&#xe614;</i><br><i class="iconfont icon-weibo"></i></div>
</template>

二、对特定颜色进行命名

在styles下创建var.scss

$lygColor: #ffd000;
$helpColor: #e26237;
$sucColor: #f9d11e;
$warnColor: #ff9204;
$priceColor: #d44040;

在vue.config.js中添加配置

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')module.exports = {transpileDependencies: true,lintOnSave: false,//关闭语法检测configureWebpack: {plugins: [AutoImport({resolvers: [ElementPlusResolver({importStyle: "sass"})],}),Components({resolvers: [ElementPlusResolver({importStyle: "sass"})],}),],},css: {loaderOptions: {scss: {// 这里是修改默认样式的scss文件additionalData: `@use "@/styles/element/index.scss" as *;@use "@/styles/var.scss" as *;`,},},}
}

三、搭建首页组件结构

效果预览:

创建三个vue文件

在Layout目录下创建component目录, 然后创建 LayoutNav.vue , LayoutHeader.vue , LayoutFooter.vue 三个文件

LayoutNav.vue

<script setup></script><template><nav class="app-topnav"><div class="container"><ul><template v-if="true"><li><a href="javascript:;"><i class=" iconfont icon-user"></i>林俊杰</a></li><li><el-popconfirm title="确认退出吗?" confirm-button-text="确认" cancel-button-text="取消"><template #reference><a href="javascript:;">退出登录</a></template></el-popconfirm></li><li><a href="javascript:;">我的订单</a></li><li><a href="javascript:;">会员中心</a></li></template><template v-else><li><a href="javascript:;">请先登录</a></li><li><a href="javascript:;">帮助中心</a></li><li><a href="javascript:;">关于我们</a></li></template></ul></div></nav>
</template><style scoped lang="scss">
.app-topnav {background: #333;ul {display: flex;height: 53px;justify-content: flex-end;align-items: center;li {a {padding: 0 15px;color: #cdcdcd;line-height: 1;display: inline-block;i {font-size: 14px;margin-right: 2px;}&:hover {color: $lygColor;}}~li {a {border-left: 2px solid #666;}}}}
}
</style>

LayoutHeader.vue

<script setup></script><template><header class='app-header'><div class="container"><h1 class="logo"><RouterLink to="/">乐意购</RouterLink></h1><ul class="app-header-nav"><li class="home"><RouterLink to="/">首页</RouterLink></li><li><RouterLink to="/">居家</RouterLink></li><li><RouterLink to="/">美食</RouterLink></li><li><RouterLink to="/">服饰</RouterLink></li></ul><div class="search"><i class="iconfont icon-search"></i><input type="text" placeholder="搜一搜"></div><!-- 头部购物车 --></div></header>
</template><style scoped lang='scss'>
.app-header {background: #fff;.container {display: flex;align-items: center;}.logo {width: 200px;a {display: block;height: 132px;width: 100%;text-indent: -9999px;}}.app-header-nav {width: 820px;display: flex;padding-left: 40px;position: relative;z-index: 998;li {margin-right: 40px;width: 38px;text-align: center;a {font-size: 16px;line-height: 32px;height: 32px;display: inline-block;color: #666;&:hover {color: $lygColor;border-bottom: 1px solid $lygColor;}}.active {color: $lygColor;border-bottom: 1px solid $lygColor;}}}.search {width: 170px;height: 32px;position: relative;border-bottom: 1px solid #e7e7e7;line-height: 32px;.icon-search {font-size: 16px;margin-left: 5px;}input {width: 135px;margin-left: 3px;padding-left: 5px;color: #666;}}.cart {width: 50px;.curr {height: 32px;line-height: 32px;text-align: center;position: relative;display: block;.icon-cart {font-size: 22px;}em {font-style: normal;position: absolute;right: 0;top: 0;padding: 1px 6px;line-height: 1;background: $helpColor;color: #fff;font-size: 12px;border-radius: 10px;font-family: Arial;}}}
}</style>

LayoutFooter.vue

<template><footer class="app_footer"><!-- 联系我们 --><div class="contact"><div class="container"><dl><dt>客户服务</dt><dd><i class="iconfont icon-kefu"></i> 在线客服</dd><dd><i class="iconfont icon-question"></i> 问题反馈</dd></dl><dl><dt>关注我们</dt><dd><i class="iconfont icon-weixin"></i> 公众号</dd><dd><i class="iconfont icon-weibo"></i> 微博</dd></dl><dl><dt>下载APP</dt><dd class="qrcode"></dd><dd class="download"><span>扫描二维码</span><span>立马下载APP</span><a href="javascript:;">下载页面</a></dd></dl><dl><dt>服务热线</dt><dd class="hotline">400-0000-000 <small>周一至周日 8:00-18:00</small></dd></dl></div></div><!-- 其它 --><div class="extra"><div class="container"><div class="slogan"><a href="javascript:;"><i class="iconfont icon-jiage"></i><span>价格评估</span></a><a href="javascript:;"><i class="iconfont icon-wuliu"></i><span>物流快捷</span></a><a href="javascript:;"><i class="iconfont icon-quality"></i><span>品质保证</span></a></div><!-- 版权信息 --><div class="copyright"><p><a href="javascript:;">关于我们</a><a href="javascript:;">帮助中心</a><a href="javascript:;">售后服务</a><a href="javascript:;">配送与验收</a><a href="javascript:;">商务合作</a><a href="javascript:;">搜索推荐</a><a href="javascript:;">友情链接</a></p><p>CopyRight © 乐意购</p></div></div></div></footer>
</template><style scoped lang='scss'>
.app_footer {overflow: hidden;background-color: #f5f5f5;padding-top: 20px;.contact {background: #fff;.container {padding: 60px 0 40px 25px;display: flex;}dl {height: 190px;text-align: center;padding: 0 72px;border-right: 1px solid #f2f2f2;color: #999;&:first-child {padding-left: 0;}&:last-child {border-right: none;padding-right: 0;}}dt {line-height: 1;font-size: 18px;}dd {margin: 36px 12px 0 0;float: left;width: 92px;height: 92px;padding-top: 10px;border: 1px solid #ededed;.iconfont {font-size: 36px;display: block;color: #666;}&:hover {.iconfont {color: $lygColor;}}&:last-child {margin-right: 0;}}.qrcode {width: 92px;height: 92px;padding: 7px;border: 1px solid #ededed;}.download {padding-top: 5px;font-size: 14px;width: auto;height: auto;border: none;span {display: block;}a {display: block;line-height: 1;padding: 10px 25px;margin-top: 5px;color: #fff;border-radius: 2px;background-color: $lygColor;}}.hotline {padding-top: 20px;font-size: 22px;color: #666;width: auto;height: auto;border: none;small {display: block;font-size: 15px;color: #999;}}}.extra {background-color: #333;}.slogan {height: 178px;line-height: 58px;padding: 60px 100px;border-bottom: 1px solid #434343;display: flex;justify-content: space-between;a {height: 58px;line-height: 58px;color: #fff;font-size: 28px;i {font-size: 50px;vertical-align: middle;margin-right: 10px;font-weight: 100;}span {vertical-align: middle;text-shadow: 0 0 1px #333;}}}.copyright {height: 170px;padding-top: 40px;text-align: center;color: #999;font-size: 15px;p {line-height: 1;margin-bottom: 20px;}a {color: #999;line-height: 1;padding: 0 10px;border-right: 1px solid #999;&:last-child {border-right: none;}}}
}
</style>

修改 Layout/index.vue 文件

<template><LayoutNav></LayoutNav><LayoutHeader></LayoutHeader><!-- 二级路由出口 --><router-view></router-view><LayoutFooter></LayoutFooter>
</template><script>
import LayoutHeader from './component/LayoutHeader.vue'
import LayoutNav from './component/LayoutNav.vue'
import LayoutFooter from './component/LayoutFooter.vue'
export default {// name: 'Layout',components:{LayoutNav,LayoutHeader,LayoutFooter}
}
</script><style></style>

最后运行项目, 如果页面上没有图标, 应该是iconfont.css文件没有修改

.icon-search:before {content: "\e752";
}.icon-weibo:before {content: "\e600";
}.icon-weixin:before {content: "\e601";
}.icon-quality:before {content: "\e602";
}.icon-jiage:before {content: "\e603";
}.icon-kefu:before {content: "\e67a";
}.icon-question:before {content: "\e613";
}.icon-wuliu:before {content: "\e614";
}.icon-user:before {content: "\e678";
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/623381.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据库第一次作业

1.创建一个英雄表 create table t_hero ( id int primary key auto_increment, name varchar(10) unique not null, gender char(5) check (gender in (男,女)), grade char(5) default 5星, groups char(5) check (groups in (毁灭,巡猎,智识,存护,…

GPT与文心一言大模型的比较与展望

目录 前言1 GPT和文心一言简介2 GPT和文心一言的技术原理和基础架构3 GPT和文心一言的模型规模和参数数量4 GPT和文心一言的语言理解表现5 展望GPT和文心一言未来的发展5.1 技术改进5.2 应用扩展 结语 前言 随着人工智能技术的飞速发展&#xff0c;自然语言处理领域的两个引领…

linux报错bash: ./configure:/bin/sh^M:

bash: ./configure&#xff1a;/bin/sh^M&#xff1a;解释器错误: 没有那个文件或目录 用cat -A urfile时你可以看到这个\r字符被显示为^M&#xff0c;这时候只需要删除这个字符就可以了。可以使用命令sed -i s/\r$// urfile 。

swing快速入门(四十四)拖动、编辑JTree结点

注释很详细&#xff0c;直接上代码 新增内容&#xff08;源码细节知识点巨多&#xff0c;建议细看&#xff09; 1.设置JTree可编辑 2.使用JTree关联的数据模型实现节点的增删改 3.鼠标拖动节点事件设计及处理方法 4.手动刷新视图与自动刷新的方法区别 5.自定位节点视图方法 源码…

linux环境中一次启动多个jar包,并且设置脚本开机自启

1、编写启动脚本 我们在通过jar启动项目时&#xff0c;有时候会比较多&#xff0c;启动会比较麻烦&#xff0c;需要编写shell脚本启动&#xff0c;将启动脚本存放在需要启动的jar包路径下。&#xff08;文档存放在 /home/process_parent &#xff09; vim start.sh#! /bin/sh…

【python】11.文件和异常

文件和异常 实际开发中常常会遇到对数据进行持久化操作的场景&#xff0c;而实现数据持久化最直接简单的方式就是将数据保存到文件中。说到“文件”这个词&#xff0c;可能需要先科普一下关于文件系统的知识&#xff0c;但是这里我们并不浪费笔墨介绍这个概念&#xff0c;请大…

动态规划算法的应用

动态规划算法的应用 LeetCode&#xff1a;一只青蛙一次可以跳上1级台阶&#xff0c;也可以跳上2级台阶。求该青蛙跳上一个 10 级的台阶总共有多少种跳法。 思考&#xff1a; /*** 一只青蛙一次可以跳上1级台阶&#xff0c;也可以跳上2级台阶。求该青蛙跳上一个 10 级的台阶总…

为什么会被诊断为发作性睡病?

发作性睡病的诊断主要基于患者的症状和相关医学检查的结果。具体来说&#xff0c;医生会根据患者是否出现白天发作性嗜睡、猝倒、睡眠瘫痪和入睡前幻觉等症状来做出初步诊断。这些症状可能在不同的患者身上表现程度不同&#xff0c;但它们通常是发作性睡病的典型特征。 为了进…

Vue报错 Cannot find module ‘../../modules/es6.symbol‘解决办法

在进行webpack打包的时候&#xff0c;会出现Cannot find module XXX’的错误&#xff0c;找不到某个模块的错误&#xff0c;今天给出解决方法&#xff1a; 直接进行npm install重新打包&#xff1b;如果npm install重新打包之后&#xff0c;仍然出现这个问题&#xff0c;可以进…

NLP论文阅读记录 - 2021 | WOS 智能树提取文本摘要深度学习

文章目录 前言0、论文摘要一、Introduction1.1目标问题1.2相关的尝试1.3本文贡献 二.前提三.本文方法四 实验效果4.1数据集4.2 对比模型4.3实施细节4.4评估指标4.5 实验结果4.6 细粒度分析 五 总结思考 前言 An Intelligent Tree Extractive Text Summarization Deep Learning …

迁移mysql8.x数据到monggodb数据库

因流量逐步增加随即数据库要从mysql换成monggodb&#xff0c;所以有了数据迁移的需求 首先需要导出mysql的数据&#xff0c;导出格式为.CSV的文件 使用navicat链接mysql数据库注意&#xff0c;需要使用拥有所有权限的用户 登录mysql mysql -u root -pZxcvbnm2024 CREATE USER …

vue3-类与样式绑定

Class 与 Style 绑定 class 和 style 都是 attribute&#xff0c;我们可以和其他 attribute 一样使用 v-bind 将它们和动态的字符串绑定。 Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强。除了字符串外&#xff0c;表达式的值也可以是对象或数组。 绑定cla…

工智能基础知识总结--朴素贝叶斯

什么是朴素贝叶斯 朴素贝叶斯是基于贝叶斯定理与特征条件独立假设的分类方法。 给定训练集 T = ( x 1 , y 1 ) , ( x 2 , y 2 ) ,

Python 点云处理总目录

一、点云滤波 原始点云包含过多噪点和冗余点&#xff0c;滤波和采样往往是点云预处理的必要步骤 1.滤波 直通滤波 统计滤波 半径滤波 2.采样 下采样抽稀 二、邻近搜索 如何组织点云快速获取当前点邻域范围&#xff0c;是面对海量点云保证处理速度的重要前提 3.KD树与八…

linux如何创建文件教程分享

在Linux中创建文件通常通过使用命令行完成。这里有几种不同的方法来创建一个新文件&#xff1a; 1. 使用 touch 命令 touch 命令是最简单的创建空文件的方式。这个命令将更新文件的访问和修改时间戳。如果指定的文件不存在&#xff0c;它将创建一个空文件。 touch newfile.t…

Python实现读取超100G的数据文件

前言 本文是该专栏的第42篇,后面会持续分享python的各种干货知识,值得关注。 在项目工作中,难免会遇到需要你通过python去读取100G甚至超过100G的数据文件。对于小数据的文件来说,相信很多同学都可以轻松解决。但对于大数据文件,类似读取100G的数据文件甚至会对电脑的性能…

实战指南:如何在Spring Boot中无缝整合Dubbo【四】

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 实战指南&#xff1a;如何在Spring Boot中无缝整合Dubbo【四】 前言项目结构主项目(作为主pom)接口服务提供者properties文件实现类 服务消费者properties接口层 实现效果图 前言 微服务架构已经成为…

BUUCTFMisc (我flag呢???)

刚好&#xff0c;更完密码学&#xff0c;然后就到下一个对新手还算 “友好” 的地方了--->Misc&#xff08;但他还是比密码学难&#xff09; 找不出flag belike &#xff1a; 看了别人的找法以后be like&#xff1a; 这里我就来讲几道我觉得比较有意思的题目吧&…

python 字符串的详细处理方法

当前版本&#xff1a; Python 3.8.4 简介 字符串是由字符组成的序列&#xff0c;可以用单引号、双引号或三引号&#xff08;单引号或双引号的连续使用&#xff09;括起来。一般用来表示和处理文本信息&#xff0c;可以是字母、数字、标点符号以及其他特殊字符&#xff0c;用于…

CAN/CANFD数据记录仪汽车电子售后神器

CAN数据记录仪是一种用于采集和存储CAN总线数据的工具&#xff0c;广泛应用于汽车、轨道车辆、工业控制等大数据量且不易排查故障的系统中。它可以实时存储总线上的数据&#xff0c;方便后续的研究和分析。解决工程师售后难点。 在选择CAN数据记录仪时&#xff0c;需要根据实…