HelloGithub/hellogithub-vue
7
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

首页标签基本框架搭建

Browse Source
This commit is contained in:
landaiqing committed 2023-07-01 02:05:54 +08:00
1 parent 226632509a
commit d79c4fec0a
11 files changed
+1726 -11
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/assets/icon/demo.css
+539
View File
@@ -0,0 +1,539 @@
/* Logo 字体 */
@font-face {
font-family: "iconfont logo";
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
}
.logo {
font-family: "iconfont logo";
font-size: 160px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* tabs */
.nav-tabs {
position: relative;
}
.nav-tabs .nav-more {
position: absolute;
right: 0;
bottom: 0;
height: 42px;
line-height: 42px;
color: #666;
}
#tabs {
border-bottom: 1px solid #eee;
}
#tabs li {
cursor: pointer;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 16px;
border-bottom: 2px solid transparent;
position: relative;
z-index: 1;
margin-bottom: -1px;
color: #666;
}
#tabs .active {
border-bottom-color: #f00;
color: #222;
}
.tab-container .content {
display: none;
}
/* 页面布局 */
.main {
padding: 30px 100px;
width: 960px;
margin: 0 auto;
}
.main .logo {
color: #333;
text-align: left;
margin-bottom: 30px;
line-height: 1;
height: 110px;
margin-top: -50px;
overflow: hidden;
*zoom: 1;
}
.main .logo a {
font-size: 160px;
color: #333;
}
.helps {
margin-top: 40px;
}
.helps pre {
padding: 20px;
margin: 10px 0;
border: solid 1px #e7e1cd;
background-color: #fffdef;
overflow: auto;
}
.icon_lists {
width: 100% !important;
overflow: hidden;
*zoom: 1;
}
.icon_lists li {
width: 100px;
margin-bottom: 10px;
margin-right: 20px;
text-align: center;
list-style: none !important;
cursor: default;
}
.icon_lists li .code-name {
line-height: 1.2;
}
.icon_lists .icon {
display: block;
height: 100px;
line-height: 100px;
font-size: 42px;
margin: 10px auto;
color: #333;
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
-moz-transition: font-size 0.25s linear, width 0.25s linear;
transition: font-size 0.25s linear, width 0.25s linear;
}
.icon_lists .icon:hover {
font-size: 100px;
}
.icon_lists .svg-icon {
/* 通过设置 font-size 来改变图标大小 */
width: 1em;
/* 图标和文字相邻时，垂直对齐 */
vertical-align: -0.15em;
/* 通过设置 color 来改变 SVG 的颜色/fill */
fill: currentColor;
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
normalize.css 中也包含这行 */
overflow: hidden;
}
.icon_lists li .name,
.icon_lists li .code-name {
color: #666;
}
/* markdown 样式 */
.markdown {
color: #666;
font-size: 14px;
line-height: 1.8;
}
.highlight {
line-height: 1.5;
}
.markdown img {
vertical-align: middle;
max-width: 100%;
}
.markdown h1 {
color: #404040;
font-weight: 500;
line-height: 40px;
margin-bottom: 24px;
}
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
color: #404040;
margin: 1.6em 0 0.6em 0;
font-weight: 500;
clear: both;
}
.markdown h1 {
font-size: 28px;
}
.markdown h2 {
font-size: 22px;
}
.markdown h3 {
font-size: 16px;
}
.markdown h4 {
font-size: 14px;
}
.markdown h5 {
font-size: 12px;
}
.markdown h6 {
font-size: 12px;
}
.markdown hr {
height: 1px;
border: 0;
background: #e9e9e9;
margin: 16px 0;
clear: both;
}
.markdown p {
margin: 1em 0;
}
.markdown>p,
.markdown>blockquote,
.markdown>.highlight,
.markdown>ol,
.markdown>ul {
width: 80%;
}
.markdown ul>li {
list-style: circle;
}
.markdown>ul li,
.markdown blockquote ul>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown>ul li p,
.markdown>ol li p {
margin: 0.6em 0;
}
.markdown ol>li {
list-style: decimal;
}
.markdown>ol li,
.markdown blockquote ol>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown code {
margin: 0 3px;
padding: 0 5px;
background: #eee;
border-radius: 3px;
}
.markdown strong,
.markdown b {
font-weight: 600;
}
.markdown>table {
border-collapse: collapse;
border-spacing: 0px;
empty-cells: show;
border: 1px solid #e9e9e9;
width: 95%;
margin-bottom: 24px;
}
.markdown>table th {
white-space: nowrap;
color: #333;
font-weight: 600;
}
.markdown>table th,
.markdown>table td {
border: 1px solid #e9e9e9;
padding: 8px 16px;
text-align: left;
}
.markdown>table th {
background: #F7F7F7;
}
.markdown blockquote {
font-size: 90%;
color: #999;
border-left: 4px solid #e9e9e9;
padding-left: 0.8em;
margin: 1em 0;
}
.markdown blockquote p {
margin: 0;
}
.markdown .anchor {
opacity: 0;
transition: opacity 0.3s ease;
margin-left: 8px;
}
.markdown .waiting {
color: #ccc;
}
.markdown h1:hover .anchor,
.markdown h2:hover .anchor,
.markdown h3:hover .anchor,
.markdown h4:hover .anchor,
.markdown h5:hover .anchor,
.markdown h6:hover .anchor {
opacity: 1;
display: inline-block;
}
.markdown>br,
.markdown>p>br {
clear: both;
}
.hljs {
display: block;
background: white;
padding: 0.5em;
color: #333333;
overflow-x: auto;
}
.hljs-comment,
.hljs-meta {
color: #969896;
}
.hljs-string,
.hljs-variable,
.hljs-template-variable,
.hljs-strong,
.hljs-emphasis,
.hljs-quote {
color: #df5000;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-type {
color: #a71d5d;
}
.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-attribute {
color: #0086b3;
}
.hljs-section,
.hljs-name {
color: #63a35c;
}
.hljs-tag {
color: #333333;
}
.hljs-title,
.hljs-attr,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #795da3;
}
.hljs-addition {
color: #55a532;
background-color: #eaffea;
}
.hljs-deletion {
color: #bd2c00;
background-color: #ffecec;
}
.hljs-link {
text-decoration: underline;
}
/* 代码高亮 */
/* PrismJS 1.15.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre)>code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
:not(pre)>code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.function,
.token.class-name {
color: #DD4A68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
src/assets/icon/demo_index.html
+786
View File
@@ -0,0 +1,786 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>iconfont Demo</title>
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="iconfont.css">
<script src="iconfont.js"></script>
<!-- jQuery -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
<!-- 代码高亮 -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
<style>
.main .logo {
margin-top: 0;
height: auto;
}
.main .logo a {
display: flex;
align-items: center;
}
.main .logo .sub-title {
margin-left: 0.5em;
font-size: 22px;
color: #fff;
background: linear-gradient(-45deg, #3967FF, #B500FE);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<div class="main">
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
</a></h1>
<div class="nav-tabs">
<ul id="tabs" class="dib-box">
<li class="dib active"><span>Unicode</span></li>
<li class="dib"><span>Font class</span></li>
<li class="dib"><span>Symbol</span></li>
</ul>
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4146468" target="_blank" class="nav-more">查看项目</a>
</div>
<div class="tab-container">
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xec1c;</span>
<div class="name">rust</div>
<div class="code-name">&amp;#xec1c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe704;</span>
<div class="name">outline-java-script</div>
<div class="code-name">&amp;#xe704;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe600;</span>
<div class="name">图书</div>
<div class="code-name">&amp;#xe600;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xeb39;</span>
<div class="name">linux</div>
<div class="code-name">&amp;#xeb39;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61e;</span>
<div class="name">游戏，游戏机</div>
<div class="code-name">&amp;#xe61e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6a5;</span>
<div class="name">集合</div>
<div class="code-name">&amp;#xe6a5;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6c8;</span>
<div class="name">web</div>
<div class="code-name">&amp;#xe6c8;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe64d;</span>
<div class="name">安卓</div>
<div class="code-name">&amp;#xe64d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6da;</span>
<div class="name">符号-测试</div>
<div class="code-name">&amp;#xe6da;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe607;</span>
<div class="name">工具</div>
<div class="code-name">&amp;#xe607;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xec5f;</span>
<div class="name">AI</div>
<div class="code-name">&amp;#xec5f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xec63;</span>
<div class="name">bug</div>
<div class="code-name">&amp;#xec63;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62b;</span>
<div class="name">教程</div>
<div class="code-name">&amp;#xe62b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe603;</span>
<div class="name">桌面应用设置</div>
<div class="code-name">&amp;#xe603;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe8ab;</span>
<div class="name">安全</div>
<div class="code-name">&amp;#xe8ab;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe639;</span>
<div class="name">java</div>
<div class="code-name">&amp;#xe639;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe657;</span>
<div class="name">代码</div>
<div class="code-name">&amp;#xe657;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xebed;</span>
<div class="name">kotlin</div>
<div class="code-name">&amp;#xebed;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xecd2;</span>
<div class="name">swift</div>
<div class="code-name">&amp;#xecd2;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xecef;</span>
<div class="name">typescript</div>
<div class="code-name">&amp;#xecef;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe76e;</span>
<div class="name">算法</div>
<div class="code-name">&amp;#xe76e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe940;</span>
<div class="name">数据库,数据</div>
<div class="code-name">&amp;#xe940;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61a;</span>
<div class="name">C#语言</div>
<div class="code-name">&amp;#xe61a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61b;</span>
<div class="name">c++语言</div>
<div class="code-name">&amp;#xe61b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61c;</span>
<div class="name">Go语言</div>
<div class="code-name">&amp;#xe61c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe891;</span>
<div class="name">Python</div>
<div class="code-name">&amp;#xe891;</div>
</li>
</ul>
<div class="article markdown">
<h2 id="unicode-">Unicode 引用</h2>
<hr>
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
<ul>
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
</ul>
<blockquote>
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
</blockquote>
<p>Unicode 使用步骤如下：</p>
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1688142699712') format('woff2'),
url('iconfont.woff?t=1688142699712') format('woff'),
url('iconfont.ttf?t=1688142699712') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont el-ico-alirust"></span>
<div class="name">
rust
</div>
<div class="code-name">.el-ico-alirust
</div>
</li>
<li class="dib">
<span class="icon iconfont el-ico-alioutline-java-script"></span>
<div class="name">
outline-java-script
</div>
<div class="code-name">.el-ico-alioutline-java-script
</div>
</li>
<li class="dib">
<span class="icon iconfont el-ico-alitushu"></span>
<div class="name">
图书
</div>
<div class="code-name">.el-ico-alitushu
</div>
</li>
<li class="dib">
<span class="icon iconfont el-ico-alilinux"></span>
<div class="name">
linux
</div>
<div class="code-name">.el-ico-alilinux
</div>
</li>
<li class="dib">
<span class="icon iconfont el-ico-aliyouxiyouxiji"></span>
<div class="name">
游戏，游戏机
</div>
<div class="code-name">.el-ico-aliyouxiyouxiji
</div>
</li>
<li class="dib">
<span class="icon iconfont el-ico-alijihe"></span>
<div class="name">
集合
</div>
<div class="code-name">.el-ico-alijihe
</div>
</li>
<li class="dib">
<span class="icon iconfont el-ico-aliweb"></span>
<div class="name">
web
</div>
<div class="code-name">.el-ico-aliweb
</div>
</li>
<li class="dib">
<span class="icon iconfont el-ico-alianzhuo"></span>
<div class="name">
安卓
</div>
<div class="code-name">.el-ico-alianzhuo
</div>
</li>
<li class="dib">
<span class="icon iconfont el-ico-aliceshi"></span>
<div class="name">
符号-测试
</div>
<div class="code-name">.el-ico-aliceshi
</div>
</li>
<li class="dib">
<span class="icon iconfont el-ico-aligongju"></span>
<div class="name">
工具
</div>
<div class="code-name">.el-ico-aligongju
</div>
</li>
<li class="dib">
<span class="icon iconfont el-ico-aliwuguan"></span>
<div class="name">
AI
</div>
<div class="code-name">.el-ico-aliwuguan
</div>
</li>
<li class="dib">
<span class="icon iconfont el-ico-alibug"></span>
<div class="name">
bug
</div>
<div class="code-name">.el-ico-alibug
</div>
</li>
<li class="dib">
<span class="icon iconfont el-ico-alicaishichang-"></span>
<div class="name">
教程
</div>
<div class="code-name">.el-ico-alicaishichang-
</div>
</li>
<li class="dib">
<span class="icon iconfont el-ico-alizhuomianyingyongshezhi"></span>
<div class="name">
桌面应用设置
</div>
<div class="code-name">.el-ico-alizhuomianyingyongshezhi
</div>
</li>
<li class="dib">
<span class="icon iconfont el-ico-alianquan"></span>
<div class="name">
安全
</div>
<div class="code-name">.el-ico-alianquan
</div>
</li>
<li class="dib">
<span class="icon iconfont el-ico-alijava"></span>
<div class="name">
java
</div>
<div class="code-name">.el-ico-alijava
</div>
</li>
<li class="dib">
<span class="icon iconfont el-ico-alidaima"></span>
<div class="name">
代码
</div>
<div class="code-name">.el-ico-alidaima
</div>
</li>
<li class="dib">
<span class="icon iconfont el-ico-alikotlin"></span>
<div class="name">
kotlin
</div>
<div class="code-name">.el-ico-alikotlin
</div>
</li>
<li class="dib">
<span class="icon iconfont el-ico-aliswift"></span>
<div class="name">
swift
</div>
<div class="code-name">.el-ico-aliswift
</div>
</li>
<li class="dib">
<span class="icon iconfont el-ico-alitypescript"></span>
<div class="name">
typescript
</div>
<div class="code-name">.el-ico-alitypescript
</div>
</li>
<li class="dib">
<span class="icon iconfont el-ico-alisuanfa2"></span>
<div class="name">
算法
</div>
<div class="code-name">.el-ico-alisuanfa2
</div>
</li>
<li class="dib">
<span class="icon iconfont el-ico-alidatabase-full"></span>
<div class="name">
数据库,数据
</div>
<div class="code-name">.el-ico-alidatabase-full
</div>
</li>
<li class="dib">
<span class="icon iconfont el-ico-aliCyuyan"></span>
<div class="name">
C#语言
</div>
<div class="code-name">.el-ico-aliCyuyan
</div>
</li>
<li class="dib">
<span class="icon iconfont el-ico-alicyuyan"></span>
<div class="name">
c++语言
</div>
<div class="code-name">.el-ico-alicyuyan
</div>
</li>
<li class="dib">
<span class="icon iconfont el-ico-aliGoyuyan"></span>
<div class="name">
Go语言
</div>
<div class="code-name">.el-ico-aliGoyuyan
</div>
</li>
<li class="dib">
<span class="icon iconfont el-ico-aliPython"></span>
<div class="name">
Python
</div>
<div class="code-name">.el-ico-aliPython
</div>
</li>
</ul>
<div class="article markdown">
<h2 id="font-class-">font-class 引用</h2>
<hr>
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
<p>与 Unicode 使用方式相比，具有如下特点：</p>
<ul>
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
</ul>
<p>使用步骤如下：</p>
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont el-ico-alixxx"&gt;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#el-ico-alirust"></use>
</svg>
<div class="name">rust</div>
<div class="code-name">#el-ico-alirust</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#el-ico-alioutline-java-script"></use>
</svg>
<div class="name">outline-java-script</div>
<div class="code-name">#el-ico-alioutline-java-script</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#el-ico-alitushu"></use>
</svg>
<div class="name">图书</div>
<div class="code-name">#el-ico-alitushu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#el-ico-alilinux"></use>
</svg>
<div class="name">linux</div>
<div class="code-name">#el-ico-alilinux</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#el-ico-aliyouxiyouxiji"></use>
</svg>
<div class="name">游戏，游戏机</div>
<div class="code-name">#el-ico-aliyouxiyouxiji</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#el-ico-alijihe"></use>
</svg>
<div class="name">集合</div>
<div class="code-name">#el-ico-alijihe</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#el-ico-aliweb"></use>
</svg>
<div class="name">web</div>
<div class="code-name">#el-ico-aliweb</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#el-ico-alianzhuo"></use>
</svg>
<div class="name">安卓</div>
<div class="code-name">#el-ico-alianzhuo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#el-ico-aliceshi"></use>
</svg>
<div class="name">符号-测试</div>
<div class="code-name">#el-ico-aliceshi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#el-ico-aligongju"></use>
</svg>
<div class="name">工具</div>
<div class="code-name">#el-ico-aligongju</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#el-ico-aliwuguan"></use>
</svg>
<div class="name">AI</div>
<div class="code-name">#el-ico-aliwuguan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#el-ico-alibug"></use>
</svg>
<div class="name">bug</div>
<div class="code-name">#el-ico-alibug</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#el-ico-alicaishichang-"></use>
</svg>
<div class="name">教程</div>
<div class="code-name">#el-ico-alicaishichang-</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#el-ico-alizhuomianyingyongshezhi"></use>
</svg>
<div class="name">桌面应用设置</div>
<div class="code-name">#el-ico-alizhuomianyingyongshezhi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#el-ico-alianquan"></use>
</svg>
<div class="name">安全</div>
<div class="code-name">#el-ico-alianquan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#el-ico-alijava"></use>
</svg>
<div class="name">java</div>
<div class="code-name">#el-ico-alijava</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#el-ico-alidaima"></use>
</svg>
<div class="name">代码</div>
<div class="code-name">#el-ico-alidaima</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#el-ico-alikotlin"></use>
</svg>
<div class="name">kotlin</div>
<div class="code-name">#el-ico-alikotlin</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#el-ico-aliswift"></use>
</svg>
<div class="name">swift</div>
<div class="code-name">#el-ico-aliswift</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#el-ico-alitypescript"></use>
</svg>
<div class="name">typescript</div>
<div class="code-name">#el-ico-alitypescript</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#el-ico-alisuanfa2"></use>
</svg>
<div class="name">算法</div>
<div class="code-name">#el-ico-alisuanfa2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#el-ico-alidatabase-full"></use>
</svg>
<div class="name">数据库,数据</div>
<div class="code-name">#el-ico-alidatabase-full</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#el-ico-aliCyuyan"></use>
</svg>
<div class="name">C#语言</div>
<div class="code-name">#el-ico-aliCyuyan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#el-ico-alicyuyan"></use>
</svg>
<div class="name">c++语言</div>
<div class="code-name">#el-ico-alicyuyan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#el-ico-aliGoyuyan"></use>
</svg>
<div class="name">Go语言</div>
<div class="code-name">#el-ico-aliGoyuyan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#el-ico-aliPython"></use>
</svg>
<div class="name">Python</div>
<div class="code-name">#el-ico-aliPython</div>
</li>
</ul>
<div class="article markdown">
<h2 id="symbol-">Symbol 引用</h2>
<hr>
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
<ul>
<li>支持多色图标了，不再受单色限制。</li>
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
<li>兼容性较差，支持 IE9+，及现代浏览器。</li>
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
</ul>
<p>使用步骤如下：</p>
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
&lt;/style&gt;
</code></pre>
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
&lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('.tab-container .content:first').show()
$('#tabs li').click(function (e) {
var tabContent = $('.tab-container .content')
var index = $(this).index()
if ($(this).hasClass('active')) {
return
} else {
$('#tabs li').removeClass('active')
$(this).addClass('active')
tabContent.hide().eq(index).fadeIn()
}
})
})
</script>
</body>
</html>
src/assets/icon/iconfont.css
+128
View File
@@ -0,0 +1,128 @@
@font-face {
font-family: "iconfont"; /* Project id 4146468 */
src: url('iconfont.woff2?t=1688142699712') format('woff2'),
url('iconfont.woff?t=1688142699712') format('woff'),
url('iconfont.ttf?t=1688142699712') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[class^="el-ico-ali"], [class*=" el-ico-ali"]/*这里有空格*/
{
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.el-ico-alirust:before {
content: "\ec1c";
}
.el-ico-alioutline-java-script:before {
content: "\e704";
}
.el-ico-alitushu:before {
content: "\e600";
}
.el-ico-alilinux:before {
content: "\eb39";
}
.el-ico-aliyouxiyouxiji:before {
content: "\e61e";
}
.el-ico-alijihe:before {
content: "\e6a5";
}
.el-ico-aliweb:before {
content: "\e6c8";
}
.el-ico-alianzhuo:before {
content: "\e64d";
}
.el-ico-aliceshi:before {
content: "\e6da";
}
.el-ico-aligongju:before {
content: "\e607";
}
.el-ico-aliwuguan:before {
content: "\ec5f";
}
.el-ico-alibug:before {
content: "\ec63";
}
.el-ico-alicaishichang-:before {
content: "\e62b";
}
.el-ico-alizhuomianyingyongshezhi:before {
content: "\e603";
}
.el-ico-alianquan:before {
content: "\e8ab";
}
.el-ico-alijava:before {
content: "\e639";
}
.el-ico-alidaima:before {
content: "\e657";
}
.el-ico-alikotlin:before {
content: "\ebed";
}
.el-ico-aliswift:before {
content: "\ecd2";
}
.el-ico-alitypescript:before {
content: "\ecef";
}
.el-ico-alisuanfa2:before {
content: "\e76e";
}
.el-ico-alidatabase-full:before {
content: "\e940";
}
.el-ico-aliCyuyan:before {
content: "\e61a";
}
.el-ico-alicyuyan:before {
content: "\e61b";
}
.el-ico-aliGoyuyan:before {
content: "\e61c";
}
.el-ico-aliPython:before {
content: "\e891";
}
src/assets/icon/iconfont.js
+1
View File
@@ -0,0 +1 @@
window._iconfont_svg_string_4146468='<svg><symbol id="el-ico-alirust" viewBox="0 0 1024 1024"><path d="M1017.04003 499.502233l-43.639815-27.019885c-0.339999-3.999983-0.679997-7.859967-1.099995-11.75995l37.439841-34.999851a14.699937 14.699937 0 0 0-4.879979-24.499895l-47.999796-17.999924c-1.079995-3.759984-2.159991-7.559968-3.339986-11.279952l29.999872-41.659822a14.699937 14.699937 0 0 0-9.579959-23.079902l-50.839783-8.299965c-1.799992-3.459985-3.579985-6.899971-5.459977-10.299956l21.359909-46.8398a14.699937 14.699937 0 0 0-13.899941-20.779912l-51.63978 1.819992q-3.579985-4.439981-7.219969-8.799962L878.000622 163.683663a14.719937 14.719937 0 0 0-17.679925-17.679925L810.000911 157.863688q-4.339982-3.659984-8.799962-7.219969l1.819992-51.639781a14.699937 14.699937 0 0 0-20.779912-13.99994L735.401229 106.463907c-3.399986-1.879992-6.859971-3.679984-10.299956-5.459977l-8.299965-50.839784a14.699937 14.699937 0 0 0-23.079902-9.579959L652.001584 70.52406c-3.719984-1.179995-7.499968-2.25999-11.279952-3.339986l-17.999923-47.999796a14.699937 14.699937 0 0 0-24.499896-4.879979l-34.999851 37.439841c-3.899983-0.419998-7.819967-0.759997-11.75995-1.099996L524.502127 6.96433a14.699937 14.699937 0 0 0-24.999894 0L472.482348 50.604145c-3.999983 0.339999-7.859967 0.679997-11.75995 1.099995l-34.999851-37.439841a14.699937 14.699937 0 0 0-24.499895 4.879979l-17.999924 47.999796c-3.779984 1.099995-7.579968 2.159991-11.319951 3.359986l-41.639823-29.999872a14.699937 14.699937 0 0 0-23.079902 9.579959l-8.299965 50.819783c-3.459985 1.799992-6.899971 3.579985-10.319956 5.459977l-46.7998-21.259909a14.699937 14.699937 0 0 0-20.779912 13.99994l1.839992 51.61978c-2.979987 2.37999-5.999974 4.77998-8.839962 7.21997L163.683663 146.003738A14.719937 14.719937 0 0 0 146.003738 163.683663L157.863688 214.003449c-2.45999 2.899988-4.859979 5.859975-7.239969 8.819962l-51.619781-1.819992a14.839937 14.839937 0 0 0-12.739945 6.519972 14.699937 14.699937 0 0 0-1.139995 14.25994l21.319909 46.8198c-1.879992 3.399986-3.659984 6.859971-5.459977 10.319956l-50.819784 8.279965a14.699937 14.699937 0 0 0-9.579959 23.079902l29.999872 41.639822c-1.179995 3.739984-2.25999 7.539968-3.359985 11.319952l-47.999796 17.999924a14.699937 14.699937 0 0 0-4.879979 24.499895l37.439841 34.999851c-0.419998 3.899983-0.759997 7.819967-1.099996 11.75995l-43.719814 26.999885a14.699937 14.699937 0 0 0 0 24.999894l43.639815 27.019885c0.339999 3.999983 0.679997 7.839967 1.099995 11.73995l-37.439841 34.999851a14.699937 14.699937 0 0 0 4.87998 24.499895l47.999795 17.999924c1.099995 3.779984 2.159991 7.559968 3.359986 11.299952l-29.999872 41.659822a14.699937 14.699937 0 0 0 9.579959 23.079902l50.839783 8.299965c1.799992 3.439985 3.579985 6.899971 5.459977 10.279956l-21.259909 46.8598a14.699937 14.699937 0 0 0 1.139995 14.25994 14.259939 14.259939 0 0 0 12.739945 6.519972l51.659781-1.819992q3.539985 4.439981 7.199969 8.799962L146.003738 860.320697a14.719937 14.719937 0 0 0 17.679925 17.679925l50.319786-11.85995q4.359981 3.659984 8.819962 7.219969l-1.839992 51.639781a14.699937 14.699937 0 0 0 20.779912 13.89994l46.8598-21.359909c3.379986 1.879992 6.839971 3.659984 10.279956 5.459977l8.299965 50.839784a14.679937 14.679937 0 0 0 23.079902 9.559959l41.659822-29.999872c3.719984 1.199995 7.519968 2.25999 11.299952 3.359985l17.999924 47.999796a14.719937 14.719937 0 0 0 24.499895 4.879979l34.999851-37.43984c3.899983 0.419998 7.839967 0.759997 11.75995 1.099995l27.019885 43.639814a14.699937 14.699937 0 0 0 24.999894 0l27.019885-43.639814c3.999983-0.339999 7.859967-0.679997 11.75995-1.119995l34.999851 37.45984a14.719937 14.719937 0 0 0 24.499895-4.879979l17.999924-47.999796c3.779984-1.099995 7.559968-2.159991 11.299951-3.359985l41.639823 29.999872a14.679937 14.679937 0 0 0 23.079902-9.559959l8.299965-50.839784c3.439985-1.799992 6.899971-3.579985 10.299956-5.459977l46.8398 21.359909a14.699937 14.699937 0 0 0 20.779912-13.89994l-1.819992-51.639781q4.439981-3.579985 8.799962-7.219969l50.299786 11.85995a14.719937 14.719937 0 0 0 17.679925-17.679925L866.140672 810.000911q3.659984-4.339982 7.219969-8.799962l51.639781 1.819992a14.459938 14.459938 0 0 0 12.739945-6.519972 14.699937 14.699937 0 0 0 1.159995-14.25994l-21.359909-46.8398c1.879992-3.399986 3.659984-6.859971 5.459977-10.299956l50.839784-8.299965a14.699937 14.699937 0 0 0 9.579959-23.079902l-29.999872-41.659822c1.179995-3.739984 2.25999-7.519968 3.339985-11.299952l47.999796-17.999924a14.699937 14.699937 0 0 0 4.879979-24.499895l-37.43984-34.999851c0.419998-3.899983 0.759997-7.819967 1.099995-11.73995l43.639814-27.019885a14.699937 14.699937 0 0 0 0-24.999894z m-301.998714 258.158901A27.819882 27.819882 0 0 0 682.001456 779.021043l-15.279935 71.339696a375.018403 375.018403 0 0 1-312.718668-1.479993l-15.279935-71.319697a27.739882 27.739882 0 0 0-32.91986-21.359909l-63.019732 13.519943a374.758404 374.758404 0 0 1-32.519861-38.419837H516.60216c3.439985 0 5.779975-0.579998 5.779976-3.819983v-108.379539c0-3.139987-2.33999-3.819984-5.779976-3.819984h-89.65Line truncated
src/assets/icon/iconfont.json
+191
View File
@@ -0,0 +1,191 @@
{
"id": "4146468",
"name": "Element_Ico",
"font_family": "iconfont",
"css_prefix_text": "el-ico-ali",
"description": "",
"glyphs": [
{
"icon_id": "27365258",
"name": "rust",
"font_class": "rust",
"unicode": "ec1c",
"unicode_decimal": 60444
},
{
"icon_id": "29371899",
"name": "outline-java-script",
"font_class": "outline-java-script",
"unicode": "e704",
"unicode_decimal": 59140
},
{
"icon_id": "1090",
"name": "图书",
"font_class": "tushu",
"unicode": "e600",
"unicode_decimal": 58880
},
{
"icon_id": "348601",
"name": "linux",
"font_class": "linux",
"unicode": "eb39",
"unicode_decimal": 60217
},
{
"icon_id": "397919",
"name": "游戏，游戏机",
"font_class": "youxiyouxiji",
"unicode": "e61e",
"unicode_decimal": 58910
},
{
"icon_id": "1788967",
"name": "集合",
"font_class": "jihe",
"unicode": "e6a5",
"unicode_decimal": 59045
},
{
"icon_id": "2142892",
"name": "web",
"font_class": "web",
"unicode": "e6c8",
"unicode_decimal": 59080
},
{
"icon_id": "2325971",
"name": "安卓",
"font_class": "anzhuo",
"unicode": "e64d",
"unicode_decimal": 58957
},
{
"icon_id": "2334449",
"name": "符号-测试",
"font_class": "ceshi",
"unicode": "e6da",
"unicode_decimal": 59098
},
{
"icon_id": "2571131",
"name": "工具",
"font_class": "gongju",
"unicode": "e607",
"unicode_decimal": 58887
},
{
"icon_id": "5961321",
"name": "AI",
"font_class": "wuguan",
"unicode": "ec5f",
"unicode_decimal": 60511
},
{
"icon_id": "5961325",
"name": "bug",
"font_class": "bug",
"unicode": "ec63",
"unicode_decimal": 60515
},
{
"icon_id": "8157644",
"name": "教程",
"font_class": "caishichang-",
"unicode": "e62b",
"unicode_decimal": 58923
},
{
"icon_id": "10359993",
"name": "桌面应用设置",
"font_class": "zhuomianyingyongshezhi",
"unicode": "e603",
"unicode_decimal": 58883
},
{
"icon_id": "11372643",
"name": "安全",
"font_class": "anquan",
"unicode": "e8ab",
"unicode_decimal": 59563
},
{
"icon_id": "12600749",
"name": "java",
"font_class": "java",
"unicode": "e639",
"unicode_decimal": 58937
},
{
"icon_id": "13638701",
"name": "代码",
"font_class": "daima",
"unicode": "e657",
"unicode_decimal": 58967
},
{
"icon_id": "15378527",
"name": "kotlin",
"font_class": "kotlin",
"unicode": "ebed",
"unicode_decimal": 60397
},
{
"icon_id": "15378859",
"name": "swift",
"font_class": "swift",
"unicode": "ecd2",
"unicode_decimal": 60626
},
{
"icon_id": "15378906",
"name": "typescript",
"font_class": "typescript",
"unicode": "ecef",
"unicode_decimal": 60655
},
{
"icon_id": "16931038",
"name": "算法",
"font_class": "suanfa2",
"unicode": "e76e",
"unicode_decimal": 59246
},
{
"icon_id": "18169760",
"name": "数据库,数据",
"font_class": "database-full",
"unicode": "e940",
"unicode_decimal": 59712
},
{
"icon_id": "20784472",
"name": "C#语言",
"font_class": "Cyuyan",
"unicode": "e61a",
"unicode_decimal": 58906
},
{
"icon_id": "20784474",
"name": "c++语言",
"font_class": "cyuyan",
"unicode": "e61b",
"unicode_decimal": 58907
},
{
"icon_id": "20784482",
"name": "Go语言",
"font_class": "Goyuyan",
"unicode": "e61c",
"unicode_decimal": 58908
},
{
"icon_id": "20834553",
"name": "Python",
"font_class": "Python",
"unicode": "e891",
"unicode_decimal": 59537
}
]
}
src/assets/icon/iconfont.ttf
BIN
View File
Binary file not shown.
src/assets/icon/iconfont.woff
BIN
View File
Binary file not shown.
src/assets/icon/iconfont.woff2
BIN
View File
Binary file not shown.
src/components/Home/Home.vue
+78 -9
View File
@@ -4,14 +4,19 @@
style=" height: calc(80vh - 60px); display: flex;flex-direction: row;justify-content: flex-end;margin-top: 5vh;">
<template>
<el-card class="box-card"
style="position: fixed;width: 10vw;height: 50vh;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
style="position: fixed;width: 10vw;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
<div slot="header" class="clearfix">
<span><i class="el-icon-menu"></i> 热门标签</span>
</div>
<div class="bottom clearfix">
<div v-for="o in 4" :key="o" class="text item">
<el-tag style="margin-top: 10px" type="success">{{ '标签 ' + o }}</el-tag>
</div>
<el-tabs tab-position="left" v-model="activeIndex" @tab-click="handleClick">
<el-tab-pane v-for="(tag,index) in tags" :key="index" :index="index">
<span slot="label" style="text-align: center" :name="tag.name" v-html="tag.icon"></span>
</el-tab-pane>
</el-tabs>
<!-- <div v-for="(tag,index) in tags" :key="index" class="text item">-->
<!--&lt;!&ndash; <el-tag style="margin-top: 10px" type="success" v-html="tag"></el-tag>&ndash;&gt;-->
<!-- </div>-->
<div style="margin-top: 10px;width: 100%;height: 0;border-top: 1px solid #eee;"></div>
<div>
<i class="el-icon-setting"></i>
@@ -31,8 +36,9 @@
v-infinite-scroll="load"
infinite-scroll-disabled="disabled">
<ol v-for="(project,index) in projectLists" :key="index" class="list-item"
style="display: flex;flex-direction: row;margin-left: -80px">
style="display: flex;flex-direction: column;margin-left: -80px;" >
<ProjectList :project-lists="project"></ProjectList>
<el-divider></el-divider>
</ol>
</ul>
<p v-if="loading">加载中...</p>
@@ -47,8 +53,9 @@
v-infinite-scroll="load"
infinite-scroll-disabled="disabled">
<ol v-for="(project,index) in projectLists" :key="index" class="list-item"
style="display: flex;flex-direction: row;margin-left: -80px">
style="display: flex;flex-direction: column;margin-left: -80px">
<ProjectList :project-lists="project"></ProjectList>
<el-divider></el-divider>
</ol>
</ul>
<p v-if="loading">加载中...</p>
@@ -209,6 +216,7 @@ export default {
data() {
return {
activeName: 'first',
activeIndex:'综合',
projectLists:[],
count: 10,
loading: false,
@@ -237,6 +245,28 @@ export default {
password: [{required: true, message: "请输入密码", trigger: "blur"}],
code: [{required: true, message: "请输入验证码", trigger: "blur"}],
},
// tags:['<i class="el-icon-discover"></i> 综 合',
// '<i class="el-ico-alicyuyan"></i> C++',
// '<i class="el-ico-aliPython"></i> python',
// `<i class="el-ico-alijava"></i> java`,
// `<i class="el-ico-alicyuyan"></i> C`,
// `<i class="el-ico-alioutline-java-script"></i> javaScript`,
// `<i class="el-ico-alicaishichang-"></i> 教 程`,
// ],
tags:[
{
icon: `<i class="el-icon-discover"></i> 综 合`,
name:"综合"
},
{
icon: `<i class="el-ico-alicyuyan"></i> C++`,
name:"C++"
},
{
icon: `<i class="el-ico-aliPython"></i> python`,
name:"python"
},
],
};
},
@@ -244,15 +274,33 @@ export default {
this.account(); //获取cookie的方法
this.ProjectLists();
},
created() {
if (sessionStorage.getItem('current_name') == null){
this.activeIndex = '综合'
}else{
this.activeIndex = sessionStorage.getItem('current_name')
}
},
beforeRouteLeave(to, from, next){
// 在离开此路由之后清除保存的状态（我的需求是只需要在当前tab页操作刷新保存状态，路由切换之后不需要保存）
// 根据个人需求决定清除的时间
sessionStorage.removeItem('currentTab')
next()
},
computed: {
noMore() {
return this.count >= 20
return this.count >= 10
},
disabled() {
return this.loading || this.noMore
}
},
methods: {
handleClick(tab, event) {
// location.search:获取路由上的参数
sessionStorage.setItem('current_name', this.activeIndex)
},
openLogin() {
this.loginDialogVisible = true;
},
@@ -470,8 +518,7 @@ export default {
if (tab.name == "second") {
}
}
},
}
}
@@ -481,4 +528,26 @@ export default {
.el-scrollbar__wrap {
overflow-x: hidden;
}
/*去掉切换时el-tab-pane底部的蓝色下划线*/
.el-tabs__active-bar {
background-color: transparent !important;
}
/*去掉tabs底部的下划线*/
.el-tabs__nav-wrap::after {
position: static !important;
}
.el-tabs__item:hover{
background-color: #eeeeee;
}
.el-tabs__item{
text-align: center;
}
.el-tabs__nav{
/*margin-left: 7px;*/
}
.el-tabs__item.is-active {
background-color: #eeeeee;
}
</style>
src/components/ProjectList.vue
+2 -2
View File
@@ -18,7 +18,7 @@
<div>
<div style="margin-left: 10px;width: 10px;height: 10px;border-radius: 50%;background-color: #ffba00"></div>
</div>
<el-tag size="mini" style="margin-left: 5px">C++</el-tag><span style="color: rgb(156 163 175);margin-left: 5px"> • </span>
<el-tag size="mini" style="margin-left: 5px">{{projectLists.categoryName}}</el-tag><span style="color: rgb(156 163 175);margin-left: 5px"> • </span>
<div style="margin-left: 10px">
<span style="color: rgb(156 163 175); ">{{ formatTime }}</span>
</div>
@@ -54,7 +54,7 @@ export default {
},
// 截取文章内容的前 35 个字，并加上省略号
brief: function() {
return this.projectLists.projectDescription.substr(0, 35) + '...';
return this.projectLists.projectDescription.substr(0, 33) + '...';
}
}
}
src/main.js
+1
View File
@@ -4,6 +4,7 @@ import router from './router'
import Element from 'element-ui'
import './assets/styles/element-variables.scss'
import axios from "axios";
import './assets/icon/iconfont.css'
axios.defaults.withCredentials=true;
Vue.config.productionTip = false