Skip to content

肖康 / cloudSystem

Go to a project
Commit 4bd448f7 by LJM
Options

css

parent 57201723
Expand all
Inline Side-by-side
Showing with 57 additions and 19 deletions
src/App.vue
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'app' name: 'app'
} }
</script> </script>
\ No newline at end of file
src/assets/css/font/demo_index.html
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<title>iconfont Demo</title> <title>iconfont Demo</title>
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/> <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/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/> <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="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
<link rel="stylesheet" href="demo.css"> <link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="iconfont.css"> <link rel="stylesheet" href="iconfont.css">
...@@ -55,6 +55,12 @@ ...@@ -55,6 +55,12 @@
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe625;</span>
<div class="name">指标追踪</div>
<div class="code-name">&amp;#xe625;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe73a;</span> <span class="icon iconfont">&#xe73a;</span>
<div class="name">文档管理</div> <div class="name">文档管理</div>
<div class="code-name">&amp;#xe73a;</div> <div class="code-name">&amp;#xe73a;</div>
...@@ -198,9 +204,9 @@ ...@@ -198,9 +204,9 @@
<pre><code class="language-css" <pre><code class="language-css"
>@font-face { >@font-face {
font-family: 'iconfont'; font-family: 'iconfont';
src: url('iconfont.woff2?t=1623223469753') format('woff2'), src: url('iconfont.woff2?t=1664261089386') format('woff2'),
url('iconfont.woff?t=1623223469753') format('woff'), url('iconfont.woff?t=1664261089386') format('woff'),
url('iconfont.ttf?t=1623223469753') format('truetype'); url('iconfont.ttf?t=1664261089386') format('truetype');
} }
</code></pre> </code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
...@@ -227,6 +233,15 @@ ...@@ -227,6 +233,15 @@
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib"> <li class="dib">
<span class="icon iconfont iconzhibiaozhuizong"></span>
<div class="name">
指标追踪
</div>
<div class="code-name">.iconzhibiaozhuizong
</div>
</li>
<li class="dib">
<span class="icon iconfont iconwendangguanli"></span> <span class="icon iconfont iconwendangguanli"></span>
<div class="name"> <div class="name">
文档管理 文档管理
...@@ -444,6 +459,14 @@ ...@@ -444,6 +459,14 @@
<li class="dib"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconzhibiaozhuizong"></use>
</svg>
<div class="name">指标追踪</div>
<div class="code-name">#iconzhibiaozhuizong</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconwendangguanli"></use> <use xlink:href="#iconwendangguanli"></use>
</svg> </svg>
<div class="name">文档管理</div> <div class="name">文档管理</div>
......
src/assets/css/font/iconfont.css
@font-face { @font-face {
font-family: "iconfont"; /* Project id 2537242 */ font-family: "iconfont"; /* Project id 2537242 */
src: url('iconfont.woff2?t=1623223469753') format('woff2'), src: url('iconfont.woff2?t=1664261089386') format('woff2'),
url('iconfont.woff?t=1623223469753') format('woff'), url('iconfont.woff?t=1664261089386') format('woff'),
url('iconfont.ttf?t=1623223469753') format('truetype'); url('iconfont.ttf?t=1664261089386') format('truetype');
} }
.iconfont { .iconfont {
...@@ -13,6 +13,10 @@ ...@@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.iconzhibiaozhuizong:before {
content: "\e625";
}
.iconwendangguanli:before { .iconwendangguanli:before {
content: "\e73a"; content: "\e73a";
} }
......
src/assets/css/font/iconfont.json
...@@ -6,6 +6,13 @@ ...@@ -6,6 +6,13 @@
"description": "猎芯云芯系统前端", "description": "猎芯云芯系统前端",
"glyphs": [ "glyphs": [
{ {
"icon_id": "7884841",
"name": "指标追踪",
"font_class": "zhibiaozhuizong",
"unicode": "e625",
"unicode_decimal": 58917
},
{
"icon_id": "22154515", "icon_id": "22154515",
"name": "文档管理", "name": "文档管理",
"font_class": "wendangguanli", "font_class": "wendangguanli",
......
src/components/menu.vue
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
</el-menu-item> </el-menu-item>
<el-submenu index="2"> <el-submenu index="2">
<template slot="title"> <template slot="title">
<span class="icon iconfont"></span> <span class="icon iconfont iconbj"></span>
<span slot="title">询报价管理</span> <span slot="title">询报价管理</span>
</template> </template>
<el-menu-item-group> <el-menu-item-group>
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
</el-submenu> </el-submenu>
<el-submenu index="3"> <el-submenu index="3">
<template slot="title"> <template slot="title">
<span class="icon iconfont"></span> <span class="icon iconfont iconzhibiaozhuizong"></span>
<span slot="title">订单追踪</span> <span slot="title">订单追踪</span>
</template> </template>
<el-menu-item-group> <el-menu-item-group>
...@@ -71,7 +71,7 @@ ...@@ -71,7 +71,7 @@
</el-submenu> </el-submenu>
<el-submenu index="4"> <el-submenu index="4">
<template slot="title"> <template slot="title">
<span class="icon iconfont"></span> <span class="icon iconfont iconstore"></span>
<span slot="title">库存管理</span> <span slot="title">库存管理</span>
</template> </template>
<el-menu-item-group> <el-menu-item-group>
...@@ -83,7 +83,7 @@ ...@@ -83,7 +83,7 @@
</el-submenu> </el-submenu>
<el-submenu index="5"> <el-submenu index="5">
<template slot="title"> <template slot="title">
<span class="icon iconfont"></span> <span class="icon iconfont icongoods"></span>
<span slot="title">商品管理</span> <span slot="title">商品管理</span>
</template> </template>
<el-menu-item-group> <el-menu-item-group>
...@@ -93,7 +93,7 @@ ...@@ -93,7 +93,7 @@
</el-submenu> </el-submenu>
<el-submenu index="6"> <el-submenu index="6">
<template slot="title"> <template slot="title">
<span class="icon iconfont"></span> <span class="icon iconfont iconuser"></span>
<span slot="title">用户中心</span> <span slot="title">用户中心</span>
</template> </template>
<el-menu-item-group> <el-menu-item-group>
...@@ -108,7 +108,7 @@ ...@@ -108,7 +108,7 @@
<div class="zankai"> <div class="zankai">
<span class="icon iconfont fr" @click="zk"></span> <span class="icon iconfont fr" @click="zk"></span>
</div> </div>
<div class="item " :class="{'act':tabSure==1}"> <div class="item" :class="{'act':tabSure==1}">
<span class="icon iconfont"></span> <span class="icon iconfont"></span>
</div> </div>
<div class="item" :class="{'act':tabSure==2}"> <div class="item" :class="{'act':tabSure==2}">
...@@ -771,10 +771,10 @@ export default { ...@@ -771,10 +771,10 @@ export default {
} }
.el-submenu { .el-submenu {
transition: all 0.4s ease;
position: relative; position: relative;
}
.el-submenu:hover { &:hover {
&::after { &::after {
content: ""; content: "";
position: absolute; position: absolute;
...@@ -785,6 +785,8 @@ export default { ...@@ -785,6 +785,8 @@ export default {
background: #1969F9; background: #1969F9;
} }
} }
}
.el-menu-item:focus, .el-menu-item:focus,
.el-menu-item:hover, .el-menu-item:hover,
...@@ -838,7 +840,8 @@ export default { ...@@ -838,7 +840,8 @@ export default {
.el-submenu__title { .el-submenu__title {
height: 46px; height: 46px;
line-height: 42px; line-height: 42px;
padding-left: 37px !important; padding-left: 37px;
transition: all 0.4s ease;
.iconfont { .iconfont {
font-size: 20px; font-size: 20px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment