Skip to content

M
mocp-uniapp
Commit 12bbbe05 by pangchong
Options

feat: 引入字体库

parent 75485e57
Showing with 1247 additions and 110 deletions
src/components/global-empty/global-empty.vue 0 → 100644
<template>
<view class="global-empty" :class="class">
<image :src="getImageSrc" :style="getImageStyle" />
<text :style="getTextStyle">
<slot>暂无内容</slot>
</text>
</view>
</template>
<script setup>
import { computed } from 'vue'
const ps = defineProps({
class: {
type: String,
default: ''
},
size: {
type: Number,
default: 160
},
type: {
type: String,
default: 'default'
},
color: {
type: String,
default: '#86909C'
}
})
const getImageStyle = computed(() => {
return {
width: ps.size + 'rpx',
height: ps.size + 'rpx'
}
})
const getImageSrc = computed(() => {
return `/static/image/empty/${ps.type}.png`
})
const getTextStyle = computed(() => {
return {
color: ps.color
}
})
</script>
<style lang="scss" scoped>
.global-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
image {
margin-bottom: 40rpx;
}
}
</style>
src/components/global-icon/global-icon.vue 0 → 100644
<template>
<!-- iconfont -->
<text class="iconfont" :class="`icon-${icon}`" :style="getIconStyle"></text>
</template>
<script setup>
import { computed } from 'vue'
const ps = defineProps({
icon: {
type: String,
default: ''
},
color: {
type: String,
default: '#4E5969'
},
size: {
type: Number,
default: 32
}
})
const getIconStyle = computed(() => {
return {
color: ps.color,
fontSize: ps.size + 'rpx'
}
})
</script>
<style lang="scss" scoped></style>
src/main.js
import { createSSRApp } from 'vue'
import App from './App.vue'
import pinia from './store'
// 引入字体
import '@/static/font/iconfont.css'
export function createApp() {
const app = createSSRApp(App)
......
src/pages.json
......@@ -72,20 +72,20 @@
{
"pagePath": "pages/chat/index",
"text": "沟通",
"iconPath": "static/menu/chat.png",
"selectedIconPath": "static/menu/chat-select.png"
"iconPath": "static/image/menu/chat.png",
"selectedIconPath": "static/image/menu/chat-select.png"
},
{
"pagePath": "pages/panel/index",
"text": "工作台",
"iconPath": "static/menu/panel.png",
"selectedIconPath": "static/menu/panel-select.png"
"iconPath": "static/image/menu/panel.png",
"selectedIconPath": "static/image/menu/panel-select.png"
},
{
"pagePath": "pages/mine/index",
"text": "个人中心",
"iconPath": "static/menu/mine.png",
"selectedIconPath": "static/menu/mine-select.png"
"iconPath": "static/image/menu/mine.png",
"selectedIconPath": "static/image/menu/mine-select.png"
}
]
},
......
src/pages/login/constants/index.scss
......@@ -2,7 +2,6 @@ page {
background: #fff;
}
.login-wrap {
width: 100%;
padding: 48rpx;
.login-header{
display: flex;
......
src/pages/login/index.vue
......@@ -2,7 +2,7 @@
<custom-page>
<view class="login-wrap">
<view class="login-header">
<image src="/static/login/Vector.png" />
<image src="/static/image/login/Vector.png" />
<view class="title">海航技术</view>
</view>
<view class="login-title">
......@@ -26,6 +26,7 @@
</uni-forms>
<custom-button class="login-btn" size="large" type="primary" @tap="handleLogin">登录</custom-button>
</view>
<global-icon icon="subscribed"></global-icon>
</custom-page>
</template>
......
src/pages/panel/app-center/constants/index.scss
......@@ -28,5 +28,8 @@
box-sizing: border-box;
}
}
.menu-empty{
padding: 48rpx 0 32rpx 0;
}
}
}
\ No newline at end of file
src/pages/panel/app-center/index.vue
......@@ -30,7 +30,7 @@
<view class="card-title">
<view class="card-title-txt">全部应用</view>
</view>
<view class="menu-list">
<view class="menu-list" v-if="menuListNoHome.length > 0">
<menu-item
class="menu-item"
v-for="item in menuListNoHome"
......@@ -41,6 +41,7 @@
@tap="goTo"
></menu-item>
</view>
<global-empty class="menu-empty" v-else></global-empty>
</view>
</view>
</template>
......
src/pages/panel/assessment-records/constants/index.scss 0 → 100644
.list {
padding: 24rpx;
.item {
padding: 24rpx;
margin-bottom: 16rpx;
border-radius: 12rpx;
background: linear-gradient(#e6eeff, #ffffff, #ffffff);
&-title {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 16rpx;
border-bottom: 2rpx solid #f4f4f4;
.desc {
display: flex;
align-items: center;
.type {
color: #f53f3f;
font-size: 34rpx;
}
.txt {
color: #1d2129;
font-size: 34rpx;
margin: 0 16rpx;
}
.place {
font-size: 28rpx;
color: #86909c;
}
}
}
&-content {
padding-top: 16rpx;
font-size: 30rpx;
color: #4e5969;
line-height: 40rpx;
}
}
}
\ No newline at end of file
src/pages/panel/assessment-records/index.vue
......@@ -4,17 +4,25 @@
<z-tabs :list="tabList" @change="tabsChange" bar-width="80rpx" bg-color="#f7f8fa" />
</template>
<view class="list">
<view class="item" v-for="item in 20" :key="item">
<view class="item" v-for="item in 3" :key="item">
<view class="item-title">
<view class="desc">
<view class="type">OPEN</view>
<view class="txt">190机型管控中心</view>
<view class="place">华北基地</view>
</view>
<view class="score">
<text class="tag">扣分</text>
<text class="count">8</text>
<score-details></score-details>
</view>
<view class="item-content">3月31日,天津航空6837/A320飞机执行天津=长春、天津=昆明航班，23:00落地，航后执行52A检工作，利用夜间8小时左右执行飞机检查和维修工</view>
</view>
<view class="item" v-for="item in 2" :key="item">
<view class="item-title">
<view class="desc">
<view class="type">OPEN</view>
<view class="txt">190机型管控中心</view>
<view class="place">华北基地</view>
</view>
<score-details type="warning"></score-details>
</view>
<view class="item-content">3月31日,天津航空6837/A320飞机执行天津=长春、天津=昆明航班，23:00落地，航后执行52A检工作，利用夜间8小时左右执行飞机检查和维修工</view>
</view>
......@@ -24,6 +32,7 @@
<script setup>
import { ref } from 'vue'
import ScoreDetails from '../components/score-details.vue'
const paging = ref()
const tabIndex = ref(0)
......@@ -36,63 +45,5 @@ const tabsChange = (index) => {
}
</script>
<style lang="scss" scoped>
.list {
padding: 24rpx;
.item {
padding: 24rpx;
margin-bottom: 16rpx;
border-radius: 12rpx;
background: linear-gradient(#e6eeff, #ffffff, #ffffff);
&-title {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 16rpx;
border-bottom: 2rpx solid #f4f4f4;
.desc {
display: flex;
align-items: center;
.type {
color: #f53f3f;
font-size: 34rpx;
}
.txt {
color: #1d2129;
font-size: 34rpx;
margin: 0 16rpx;
}
.place {
font-size: 28rpx;
color: #86909c;
}
}
.score {
border-radius: 6rpx;
width: 108rpx;
background: #ffece8;
color: #fff;
font-size: 22rpx;
display: flex;
align-items: center;
.tag {
width: 58rpx;
border-radius: 6rpx;
background: #f53f3f;
text-align: center;
padding: 2px 0;
margin-right: 16rpx;
}
.count {
color: #f53f3f;
}
}
}
&-content {
padding-top: 16rpx;
font-size: 30rpx;
color: #4e5969;
line-height: 40rpx;
}
}
}
@import './constants/index.scss';
</style>
src/pages/panel/components/menu-item.vue
......@@ -36,7 +36,7 @@ const ps = defineProps({
}
})
const getUrl = computed(() => {
return '/static/panel/' + ps.data.icon + '.png'
return '/static/image/panel/' + ps.data.icon + '.png'
})
const getCount = computed(() => {
if (ps.showCount) {
......
src/pages/panel/components/score-details.vue 0 → 100644
<template>
<view class="score" :class="type">
<text class="tag">{{ getTag }}</text>
<text class="count">{{ count }}</text>
</view>
</template>
<script setup>
import { computed } from 'vue'
const ps = defineProps({
type: {
type: String,
default: 'success'
},
count: {
type: Number,
default: 8
}
})
const getTag = computed(() => {
if (ps.type == 'success') {
return '加分'
} else {
return '扣分'
}
})
</script>
<style lang="scss" scoped>
.score {
border-radius: 6rpx;
width: 108rpx;
color: #fff;
font-size: 22rpx;
display: flex;
align-items: center;
.tag {
width: 58rpx;
border-radius: 6rpx;
text-align: center;
padding: 2px 0;
margin-right: 16rpx;
}
&.success {
background: #e8ffea;
.tag {
background: #00b42a;
}
.count {
color: #00b42a;
}
}
&.warning {
background: #ffece8;
.tag {
background: #f53f3f;
}
.count {
color: #f53f3f;
}
}
}
</style>
src/pages/panel/constants/panel-navbar.scss
......@@ -4,7 +4,8 @@
&-box {
display: flex;
align-items: center;
padding: 20rpx 32rpx 32rpx 32rpx;
justify-content: space-between;
padding: 20rpx 32rpx 16rpx 32rpx;
&-info {
display: flex;
flex-direction: column;
......@@ -13,27 +14,27 @@
height: 70rpx;
}
}
}
&-input {
flex: auto;
margin-left: 16rpx;
:deep(.is-input-border) {
border-radius: 12rpx !important;
}
&-right {
color: #165dff;
margin-right: 32rpx;
display: flex;
align-items: center;
font-weight: 900;
.line {
background: rgba(104, 161, 254, 0.4);
margin-right: 32rpx;
width: 1rpx;
height: 32rpx;
&-weather{
color: #1D2129;
text-align: right;
.place{
font-size: 28rpx;
}
.info{
display: flex;
align-items: center;
image{
width: 40rpx;
height: 40rpx;
}
.txt{
margin-left: 8rpx;
font-size: 24rpx;
}
}
}
}
&-bottom-list {
background: #fff;
display: flex;
......
src/pages/panel/index.vue
<template>
<custom-page>
<image class="page-bg" src="/static/panel/page-bg.png" />
<image class="page-bg" src="/static/image/panel/page-bg.png" />
<!-- 导航栏 -->
<panel-navbar></panel-navbar>
<!-- 菜单图标 -->
......
src/pages/panel/panel-menu.vue
......@@ -8,7 +8,7 @@
<scroll-view class="tab-content" scroll-y="true">
<view class="tab-content-item" v-if="activeIndex == 0">
<view class="menu-list">
<menu-item class="menu-item" v-for="item in menuListHome" :data="item" :key="item.id"></menu-item>
<menu-item class="menu-item" v-for="item in menuListHome" :data="item" :key="item.id" @tap="goTo"></menu-item>
<menu-item class="menu-item" :data="allMenuItem" @tap="goAppCenter"></menu-item>
</view>
</view>
......@@ -17,7 +17,7 @@
<view class="menu-content-item" v-for="(value, key) in menuListGroup" :key="key">
<view class="menu-title">{{ key }}</view>
<view class="menu-list">
<menu-item class="menu-item" v-for="item in value" :data="item" :key="item.id"></menu-item>
<menu-item class="menu-item" v-for="item in value" :data="item" :key="item.id" @tap="goTo"></menu-item>
</view>
<view class="menu-line"></view>
</view>
......@@ -35,7 +35,10 @@ import { menuListHome, menuListGroup, allMenuItem } from './constants/index.comp
//分类
const tabNav = ref(['常用', '分组'])
const activeIndex = ref(0)
//跳转
const goTo = () => {
uni.navigateTo({ url: '/pages/panel/assessment-records/index' })
}
//跳转应用中心
const goAppCenter = () => {
uni.navigateTo({ url: '/pages/panel/app-center/index' })
......
src/pages/panel/panel-navbar.vue
......@@ -2,34 +2,31 @@
<view class="navbar">
<view class="navbar-box">
<view class="navbar-box-info">
<image src="/static/panel/logo.png" />
<image src="/static/image/panel/logo.png" />
</view>
<view class="navbar-input">
<uni-easyinput type="text" disabled placeholder="请输入功能名称">
<template #right>
<view class="navbar-input-right">
<text class="line"></text>
<text>搜索</text>
</view>
</template>
</uni-easyinput>
<view class="navbar-box-weather">
<view class="place">武汉-WUH</view>
<view class="info">
<image src="/static/image/panel/weather.png" />
<view class="txt">晴转多云 22°</view>
</view>
</view>
</view>
<view class="navbar-bottom-list">
<view class="list-item">
<image class="list-item-image" src="/static/panel/wdrw.png" />
<image class="list-item-image" src="/static/image/panel/wdrw.png" />
<view class="list-item-title">我的任务</view>
<view class="list-item-txt">24</view>
</view>
<view class="list-item-line"></view>
<view class="list-item">
<image class="list-item-image" src="/static/panel/gjrw.png" />
<image class="list-item-image" src="/static/image/panel/gjrw.png" />
<view class="list-item-title">跟机任务</view>
<view class="list-item-txt">24</view>
</view>
<view class="list-item-line"></view>
<view class="list-item">
<image class="list-item-image" src="/static/panel/AOGrw.png" />
<image class="list-item-image" src="/static/image/panel/AOGrw.png" />
<view class="list-item-title">AOG任务</view>
<view class="list-item-txt">24</view>
</view>
......@@ -37,7 +34,7 @@
</view>
</template>
<script setup></script>
<script setup></script>
<style lang="scss" scoped>
@import './constants/panel-navbar.scss';
</style>
src/static/font/demo.css 0 → 100644
/* 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/static/font/demo_index.html 0 → 100644
<!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=4550048" 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">&#xe6d6;</span>
<div class="name">subscribed</div>
<div class="code-name">&amp;#xe6d6;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6d5;</span>
<div class="name">mind-mapping</div>
<div class="code-name">&amp;#xe6d5;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6d7;</span>
<div class="name">email</div>
<div class="code-name">&amp;#xe6d7;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6d8;</span>
<div class="name">idcard</div>
<div class="code-name">&amp;#xe6d8;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6d9;</span>
<div class="name">calendar</div>
<div class="code-name">&amp;#xe6d9;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6d4;</span>
<div class="name">message</div>
<div class="code-name">&amp;#xe6d4;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6d3;</span>
<div class="name">Vector</div>
<div class="code-name">&amp;#xe6d3;</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=1715851956645') format('woff2'),
url('iconfont.woff?t=1715851956645') format('woff'),
url('iconfont.ttf?t=1715851956645') 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 icon-subscribed"></span>
<div class="name">
subscribed
</div>
<div class="code-name">.icon-subscribed
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-mind-mapping"></span>
<div class="name">
mind-mapping
</div>
<div class="code-name">.icon-mind-mapping
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-email"></span>
<div class="name">
email
</div>
<div class="code-name">.icon-email
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-idcard"></span>
<div class="name">
idcard
</div>
<div class="code-name">.icon-idcard
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-calendar"></span>
<div class="name">
calendar
</div>
<div class="code-name">.icon-calendar
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-message"></span>
<div class="name">
message
</div>
<div class="code-name">.icon-message
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-Vector"></span>
<div class="name">
Vector
</div>
<div class="code-name">.icon-Vector
</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 icon-xxx"&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="#icon-subscribed"></use>
</svg>
<div class="name">subscribed</div>
<div class="code-name">#icon-subscribed</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-mind-mapping"></use>
</svg>
<div class="name">mind-mapping</div>
<div class="code-name">#icon-mind-mapping</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-email"></use>
</svg>
<div class="name">email</div>
<div class="code-name">#icon-email</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-idcard"></use>
</svg>
<div class="name">idcard</div>
<div class="code-name">#icon-idcard</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-calendar"></use>
</svg>
<div class="name">calendar</div>
<div class="code-name">#icon-calendar</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-message"></use>
</svg>
<div class="name">message</div>
<div class="code-name">#icon-message</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-Vector"></use>
</svg>
<div class="name">Vector</div>
<div class="code-name">#icon-Vector</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/static/font/iconfont.css 0 → 100644
@font-face {
font-family: "iconfont"; /* Project id 4550048 */
src: url('iconfont.woff2?t=1715851956645') format('woff2'),
url('iconfont.woff?t=1715851956645') format('woff'),
url('iconfont.ttf?t=1715851956645') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-subscribed:before {
content: "\e6d6";
}
.icon-mind-mapping:before {
content: "\e6d5";
}
.icon-email:before {
content: "\e6d7";
}
.icon-idcard:before {
content: "\e6d8";
}
.icon-calendar:before {
content: "\e6d9";
}
.icon-message:before {
content: "\e6d4";
}
.icon-Vector:before {
content: "\e6d3";
}
src/static/font/iconfont.js 0 → 100644
window._iconfont_svg_string_4550048='<svg><symbol id="icon-subscribed" viewBox="0 0 1024 1024"><path d="M234.688 170.688v654.208L512 676.992l277.312 147.904V170.688H234.688z m-85.376-21.312a64 64 0 0 1 64-64h597.376a64 64 0 0 1 64 64v739.52c0 35.456-37.76 58.112-69.056 41.408L512 773.76l-293.632 156.608a46.912 46.912 0 0 1-69.056-41.408V149.376zM471.36 468.48l165.952-165.952 60.352 60.352-226.304 226.304-135.68-135.744 60.288-60.352L471.36 468.48z" fill="#4E5969" ></path></symbol><symbol id="icon-mind-mapping" viewBox="0 0 1024 1024"><path d="M106.688 213.312a85.312 85.312 0 1 1 128 73.92v182.08h106.624v85.376H234.688V768h106.624v85.312h-192V287.232a85.312 85.312 0 0 1-42.624-73.92zM917.312 256H426.688V170.688h490.624V256z m0 298.688H426.688V469.312h490.624v85.376z m0 298.624H426.688V768h490.624v85.312z" fill="#4E5969" ></path></symbol><symbol id="icon-email" viewBox="0 0 1024 1024"><path d="M149.312 128a64 64 0 0 0-64 64v640a64 64 0 0 0 64 64h725.376a64 64 0 0 0 64-64V192a64 64 0 0 0-64-64H149.312z m21.376 682.688V213.312h682.624v597.376H170.688z m88.32-483.072L512 502.784l253.056-175.168 48.576 70.144-265.216 183.552a64 64 0 0 1-72.832 0L210.368 397.76l48.64-70.144z" fill="#4E5969" ></path></symbol><symbol id="icon-idcard" viewBox="0 0 1024 1024"><path d="M85.312 213.312C85.312 166.208 123.52 128 170.688 128h682.624c47.168 0 85.376 38.208 85.376 85.312v597.376c0 47.104-38.208 85.312-85.376 85.312H170.688a85.312 85.312 0 0 1-85.376-85.312V213.312z m768 0H170.688v597.376h682.624V213.312z m-426.624 192h-192V320h192v85.312z m0 149.376h-192V469.312h192v85.376zM341.312 704H234.688V618.688h106.624V704z m277.376-106.688C559.808 597.312 512 645.12 512 704H426.688a192 192 0 0 1 114.24-175.616 128 128 0 1 1 155.456 0A192 192 0 0 1 810.688 704h-85.376c0-58.88-47.744-106.688-106.624-106.688zM576 426.688a42.688 42.688 0 1 1 85.312 0 42.688 42.688 0 0 1-85.312 0z" fill="#4E5969" ></path></symbol><symbol id="icon-calendar" viewBox="0 0 1024 1024"><path d="M256 149.312v-42.688h85.312v42.688h341.376v-42.688H768v42.688h85.312a64 64 0 0 1 64 64v640a64 64 0 0 1-64 64H170.688a64 64 0 0 1-64-64v-640a64 64 0 0 1 64-64H256z m0 85.312H192v192h640v-192h-64v42.688h-85.312v-42.688H341.312v42.688H256v-42.688zM832 512H192v320h640V512z" fill="#4E5969" ></path></symbol><symbol id="icon-message" viewBox="0 0 1024 1024"><path d="M106.688 512a405.312 405.312 0 1 1 810.624 0v13.44a391.936 391.936 0 0 1-391.872 391.872H106.688V512zM512 192a320 320 0 0 0-320 320v320h333.44A306.56 306.56 0 0 0 832 525.44V512a320 320 0 0 0-320-320z m192 192v85.312H320V384h384z m-192 277.312H320V576h192v85.312z" fill="#4E5969" ></path></symbol><symbol id="icon-Vector" viewBox="0 0 1228 1024"><path d="M285.360264 841.131887c15.870413 7.372063 15.870413 22.013799 23.754425 36.553144 0 22.013799-15.768023 43.925207-47.50885 43.925208-23.754425 7.269673-47.611239-14.641736-55.49525-43.925208 0-21.911409 15.870413-43.822818 47.508849-65.734226a263.960804 263.960804 0 0 1 150.615339 0c95.222478 36.553145 182.356164 116.929107 206.110588 168.123988-47.508849-175.49605-253.619438-321.708629-443.859614-241.332667-71.365663 29.283472-103.106489 87.748025-103.106489 153.584641C71.365663 965.637836 134.744926 1024 221.981002 1024c47.508849 0 87.133687-14.641736 110.990501-43.925207 31.740826-51.194881 15.768023-116.929107-47.611239-138.942906z m657.956604 0c-15.870413 7.372063-23.754425 14.641736-23.754424 36.553144 0 22.013799 15.768023 43.925207 47.508849 43.925208 23.754425 7.269673 47.611239-14.641736 55.49525-43.925208 0-21.911409-15.870413-43.822818-47.508849-65.734226a263.960804 263.960804 0 0 0-150.615338 0c-95.222478 36.553145-182.356164 116.929107-213.994601 168.123988 47.508849-175.49605 261.50345-321.708629 451.743626-241.332667 63.481652 22.013799 103.106489 80.478352 95.222478 146.314968-7.986401 73.106289-63.481652 131.673233-150.717729 131.673233-47.508849 0-87.133687-14.641736-110.990501-43.925208-23.754425-43.925207-15.768023-109.659434 47.611239-131.673232zM610.242976 387.750025C784.817518 387.750025 927.446455 307.271673 927.446455 204.881912c0-80.478352-87.236076-146.314969-206.110589-175.496051 142.731327 29.181082 245.735426 109.659434 245.735427 197.40746C967.071293 336.555144 832.428757 409.661434 713.451855 424.30317c-71.365663 7.269673-79.249675 7.269673-103.10649 29.283471-7.884012-22.013799-23.754425-22.013799-87.133686-29.283471C404.234777 409.661434 269.489851 329.183082 269.489851 226.793321c0-87.748025 103.106489-168.226377 245.735426-197.40746C388.466753 58.464554 301.230677 124.40356 301.230677 204.881912c0 102.389761 142.628937 182.868113 309.217078 182.868113z m0 117.031497c31.740826-22.013799 79.249675-29.283472 118.976902-36.655535C903.692031 431.572843 1014.682532 351.29927 1014.682532 241.435056c0-43.822818-15.870413-80.478352-47.611239-109.659434-63.481652-58.566943-158.49935-102.389761-277.476253-117.031496 213.994601 14.641736 372.69873 124.30117 372.698731 255.974402 0 117.031497-118.976902 204.779522-309.217079 248.60234-79.249675 22.013799-118.874513 36.655534-142.731327 73.208679-15.870413-36.553145-55.49525-43.925207-134.744925-73.208679-190.240176-43.822818-309.217078-131.570843-309.217078-248.60234 0-131.673233 158.70413-234.062994 372.69873-255.974402C427.989201 29.385861 332.971503 73.208679 269.489851 131.775622c-31.740826 29.181082-47.508849 73.106289-47.508849 109.659434 0 109.761824 110.990501 190.137786 285.360264 226.690931 31.740826 7.372063 79.249675 14.641736 103.004099 36.655535z m0 175.49605c39.624838-58.566943 118.976902-87.748025 190.240176-109.761824 23.856814-7.269673 31.740826-14.539346 55.49525-14.539346 150.615338-51.194881 245.735426-146.314969 253.721828-255.974402 0-153.584642-198.226577-277.988201-443.962004-299.89961C975.057694 14.744126 1228.677132 175.59844 1228.677132 358.466553c0 124.30117-95.120088 234.062994-277.476252 299.89961-79.249675 21.911409-285.360264 80.375962-340.855515 292.527548-47.508849-204.779522-253.619438-270.616138-332.869113-292.527548C95.120088 585.157484 0 482.767723 0 358.466553 0 175.59844 253.619438 22.013799 562.836516 0.10239 317.10109 14.744126 118.772123 139.045295 118.772123 292.629937c7.986401 109.761824 103.106489 204.779522 245.735426 255.974403 23.856814 7.372063 31.740826 14.641736 55.495251 14.641735 79.249675 29.283472 158.60174 58.464554 190.240176 117.031497z m-110.990501-511.948805C499.354865 109.659434 546.966103 58.464554 618.434157 58.464554 689.59504 58.566943 737.206279 102.492151 737.206279 168.328767c0 58.464554-47.611239 109.659434-118.874512 109.659434-71.365663 0-118.976902-43.822818-118.976902-109.659434z" fill="#DD4012" ></path></symbol></svg>',function(i){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var n,o,a,c,l,d=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!i.__iconfont__svg__cssinject__){i.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}n=function(){var t,e=document.createElement("div");e.innerHTML=i._iconfont_svg_string_4550048,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?d(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(n,0):(o=function(){document.removeEventListener("DOMContentLoaded",o,!1),n()},document.addEventListener("DOMContentLoaded",o,!1)):document.attachEvent&&(a=n,c=i.document,l=!1,m(),c.onreadystatechange=function(){"complete"==c.readyState&&(c.onreadystatechange=null,s())})}function s(){l||(l=!0,a())}function m(){try{c.documentElement.doScroll("left")}catch(t){return void setTimeout(m,50)}s()}}(window);
\ No newline at end of file
src/static/font/iconfont.json 0 → 100644
{
"id": "4550048",
"name": "移动端",
"font_family": "iconfont",
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "40365218",
"name": "subscribed",
"font_class": "subscribed",
"unicode": "e6d6",
"unicode_decimal": 59094
},
{
"icon_id": "40365217",
"name": "mind-mapping",
"font_class": "mind-mapping",
"unicode": "e6d5",
"unicode_decimal": 59093
},
{
"icon_id": "40365216",
"name": "email",
"font_class": "email",
"unicode": "e6d7",
"unicode_decimal": 59095
},
{
"icon_id": "40365215",
"name": "idcard",
"font_class": "idcard",
"unicode": "e6d8",
"unicode_decimal": 59096
},
{
"icon_id": "40365214",
"name": "calendar",
"font_class": "calendar",
"unicode": "e6d9",
"unicode_decimal": 59097
},
{
"icon_id": "40365212",
"name": "message",
"font_class": "message",
"unicode": "e6d4",
"unicode_decimal": 59092
},
{
"icon_id": "40365209",
"name": "Vector",
"font_class": "Vector",
"unicode": "e6d3",
"unicode_decimal": 59091
}
]
}
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 to comment