需求清单 查询页
xce
parent
b275f706c3
commit
991fdc11e7
|
|
@ -1,7 +1,91 @@
|
||||||
<template>
|
<template>
|
||||||
<view>
|
<view class="container">
|
||||||
|
<view class="form-container">
|
||||||
|
<uni-section title="基础卡片" type="line" >
|
||||||
|
<!-- 基础表单校验：缩小字体+一行两列布局 -->
|
||||||
|
<uni-forms
|
||||||
|
ref="valiForm"
|
||||||
|
label-width="50px"
|
||||||
|
label-position="left"
|
||||||
|
:modelValue="form"
|
||||||
|
style="font-size: 10px;"
|
||||||
|
>
|
||||||
|
<!-- 一行两列布局容器 -->
|
||||||
|
<view class="form-row">
|
||||||
|
<uni-forms-item label="标题:" name="name" class="form-item">
|
||||||
|
<uni-easyinput
|
||||||
|
v-model="form.title"
|
||||||
|
placeholder="请输入标题搜索"
|
||||||
|
|
||||||
|
/>
|
||||||
|
</uni-forms-item>
|
||||||
|
<uni-forms-item label="详情:" label-width="35px" name="age" class="form-item">
|
||||||
|
<uni-easyinput
|
||||||
|
v-model="form.detail"
|
||||||
|
placeholder="请输入详情搜索"
|
||||||
|
|
||||||
|
/>
|
||||||
|
</uni-forms-item>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 第二行两列 -->
|
||||||
|
<view class="form-row">
|
||||||
|
<uni-forms-item label="优先级:" name="priority" class="form-item">
|
||||||
|
<uni-data-select
|
||||||
|
v-model="form.priority"
|
||||||
|
:localdata="range"
|
||||||
|
|
||||||
|
/>
|
||||||
|
</uni-forms-item>
|
||||||
|
<uni-forms-item label="进度:" label-width="35px" name="progress" class="form-item">
|
||||||
|
<uni-data-select
|
||||||
|
v-model="form.progress"
|
||||||
|
:localdata="range"
|
||||||
|
|
||||||
|
/>
|
||||||
|
</uni-forms-item>
|
||||||
|
</view>
|
||||||
|
</uni-forms>
|
||||||
|
|
||||||
|
<view class="btn-group">
|
||||||
|
<view class="btn-left">
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="iconfont icon-add mini-btn add-btn"
|
||||||
|
@click="submit('form')"
|
||||||
|
hover-class="is-hover"
|
||||||
|
type="default"
|
||||||
|
size="mini"
|
||||||
|
> 新增</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="iconfont icon-ashbin mini-btn del-btn"
|
||||||
|
hover-class="is-hover"
|
||||||
|
type="default"
|
||||||
|
size="mini"
|
||||||
|
> 删除</button>
|
||||||
|
<button
|
||||||
|
class="iconfont icon-edit mini-btn edit-btn"
|
||||||
|
hover-class="is-hover"
|
||||||
|
type="default"
|
||||||
|
size="mini"
|
||||||
|
> 编辑</button>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="btn-right">
|
||||||
|
<button
|
||||||
|
class="iconfont icon-search mini-btn"
|
||||||
|
hover-class="is-hover"
|
||||||
|
type="default"
|
||||||
|
size="mini"
|
||||||
|
> 查询</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</uni-section>
|
||||||
|
</view>
|
||||||
|
|
||||||
<view class="uni-container">
|
<view class="uni-container">
|
||||||
<!-- 1. 给table加宽度100%，关闭默认固定列宽 -->
|
<!-- 表格区域：保持原有紧凑样式并优化 -->
|
||||||
<uni-table
|
<uni-table
|
||||||
ref="table"
|
ref="table"
|
||||||
:loading="loading"
|
:loading="loading"
|
||||||
|
|
@ -10,50 +94,47 @@
|
||||||
type="selection"
|
type="selection"
|
||||||
emptyText="暂无更多数据"
|
emptyText="暂无更多数据"
|
||||||
@selection-change="selectionChange"
|
@selection-change="selectionChange"
|
||||||
style="width: 100%;"
|
style="width: 100%; font-size: 11px;"
|
||||||
:border-width="1"
|
:border-width="1"
|
||||||
>
|
>
|
||||||
<uni-tr>
|
<uni-tr>
|
||||||
<!-- 2. 列宽设为auto（自适应），调整表头行高 -->
|
<uni-th align="center" style="width: auto; height: 18px; line-height: 18px; font-size: 11px;">选择</uni-th>
|
||||||
<uni-th align="center" style="width: auto; height: 30px; line-height: 30px;">选择</uni-th>
|
<uni-th align="center" style="width: auto; height: 18px; line-height: 18px; font-size: 11px;">需求标题</uni-th>
|
||||||
<uni-th align="center" style="width: auto; height: 30px; line-height: 30px;">需求标题</uni-th>
|
<uni-th align="center" style="width: auto; height: 18px; line-height: 18px; font-size: 11px;">需求详情</uni-th>
|
||||||
<uni-th align="center" style="width: auto; height: 30px; line-height: 30px;">需求详情</uni-th>
|
<uni-th align="center" style="width: auto; height: 18px; line-height: 18px; font-size: 11px;">优先级</uni-th>
|
||||||
<uni-th align="center" style="width: auto; height: 30px; line-height: 30px;">优先级</uni-th>
|
<uni-th align="center" style="width: auto; height: 18px; line-height: 18px; font-size: 11px;">进度</uni-th>
|
||||||
<uni-th align="center" style="width: auto; height: 30px; line-height: 30px;">进度</uni-th>
|
<uni-th align="center" style="width: auto; height: 18px; line-height: 18px; font-size: 11px;">需求类型</uni-th>
|
||||||
<uni-th align="center" style="width: auto; height: 30px; line-height: 30px;">需求类型</uni-th>
|
<uni-th align="center" style="width: auto; height: 18px; line-height: 18px; font-size: 11px;">经办人名称</uni-th>
|
||||||
<uni-th align="center" style="width: auto; height: 30px; line-height: 30px;">经办人名称</uni-th>
|
<uni-th align="center" style="width: auto; height: 18px; line-height: 18px; font-size: 11px;">操作</uni-th>
|
||||||
<uni-th align="center" style="width: auto; height: 30px; line-height: 30px;">操作</uni-th>
|
|
||||||
</uni-tr>
|
</uni-tr>
|
||||||
<!-- 3. 缩小表格行高 -->
|
<uni-tr v-for="(item, index) in tableData" :key="index" style="height: 30px; line-height: 30px;">
|
||||||
<uni-tr v-for="(item, index) in tableData" :key="index" style="height: 35px; line-height: 35px;">
|
<uni-td style="width: auto; padding: 1px 0; font-size: 11px;">
|
||||||
<uni-td style="width: auto; padding: 2px 0;">
|
<uni-checkbox :value="index" @change="(e) => handleCheckboxChange(e, index)"></uni-checkbox>
|
||||||
<uni-checkbox :value="index" @change="handleCheckboxChange"></uni-checkbox>
|
|
||||||
</uni-td>
|
</uni-td>
|
||||||
<uni-td style="width: auto; padding: 2px 0;">{{ item.title }}</uni-td>
|
<uni-td style="width: auto; padding: 1px 0; font-size: 11px;">{{ item.title }}</uni-td>
|
||||||
<uni-td style="width: auto; padding: 2px 0;">
|
<uni-td style="width: auto; padding: 1px 0; font-size: 11px;">
|
||||||
<view class="name">{{ item.detail }}</view>
|
<view class="name">{{ item.detail }}</view>
|
||||||
</uni-td>
|
</uni-td>
|
||||||
<uni-td align="center" style="width: auto; padding: 2px 0;">{{ item.priority }}</uni-td>
|
<uni-td align="center" style="width: auto; padding: 1px 0; font-size: 11px;">{{ item.priority }}</uni-td>
|
||||||
<uni-td align="center" style="width: auto; padding: 2px 0;">{{ item.progress }}</uni-td>
|
<uni-td align="center" style="width: auto; padding: 1px 0; font-size: 11px;">{{ item.progress }}</uni-td>
|
||||||
<uni-td align="center" style="width: auto; padding: 2px 0;">{{ item.reqType }}</uni-td>
|
<uni-td align="center" style="width: auto; padding: 1px 0; font-size: 11px;">{{ item.reqType }}</uni-td>
|
||||||
<uni-td align="center" style="width: auto; padding: 2px 0;">{{ item.assigneeName }}</uni-td>
|
<uni-td align="center" style="width: auto; padding: 1px 0; font-size: 11px;">{{ item.assigneeName }}</uni-td>
|
||||||
<uni-td style="width: auto; padding: 2px 0;">
|
<uni-td style="width: auto; padding: 1px 0; font-size: 11px;">
|
||||||
<view class="uni-group">
|
<view class="uni-group">
|
||||||
<!-- 4. 缩小按钮尺寸 -->
|
<button class="uni-button" size="mini" type="primary" style="padding: 1px 6px; font-size: 10px;">修改</button>
|
||||||
<button class="uni-button" size="mini" type="primary" style="padding: 2px 8px; font-size: 12px;">修改</button>
|
<button class="uni-button" size="mini" type="warn" style="padding: 1px 6px; font-size: 10px; margin-left: 3px;">删除</button>
|
||||||
<button class="uni-button" size="mini" type="warn" style="padding: 2px 8px; font-size: 12px; margin-left: 5px;">删除</button>
|
|
||||||
</view>
|
</view>
|
||||||
</uni-td>
|
</uni-td>
|
||||||
</uni-tr>
|
</uni-tr>
|
||||||
</uni-table>
|
</uni-table>
|
||||||
<view class="uni-pagination-box" style="margin-top: 10px;">
|
<view class="uni-pagination-box" style="margin-top: 8px;">
|
||||||
<uni-pagination
|
<uni-pagination
|
||||||
show-icon
|
show-icon
|
||||||
:page-size="pageSize"
|
:page-size="pageSize"
|
||||||
:current="pageCurrent"
|
:current="pageCurrent"
|
||||||
:total="total"
|
:total="total"
|
||||||
@change="change"
|
@change="change"
|
||||||
style="font-size: 12px;"
|
style="font-size: 11px;"
|
||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -77,6 +158,13 @@ export default {
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
pageCurrent: 1,
|
pageCurrent: 1,
|
||||||
total: 0,
|
total: 0,
|
||||||
|
range:[],
|
||||||
|
form: {
|
||||||
|
title:null,
|
||||||
|
detail:null,
|
||||||
|
priority:null,
|
||||||
|
progress: null
|
||||||
|
},
|
||||||
loading: false,
|
loading: false,
|
||||||
selectedIndexs: [] // 已选择的行索引
|
selectedIndexs: [] // 已选择的行索引
|
||||||
}
|
}
|
||||||
|
|
@ -89,10 +177,13 @@ export default {
|
||||||
selectedItems() {
|
selectedItems() {
|
||||||
return this.selectedIndexs.map(i => this.tableData[i])
|
return this.selectedIndexs.map(i => this.tableData[i])
|
||||||
},
|
},
|
||||||
// 多选（替换原selection-change，适配自定义checkbox）
|
// 多选（修复参数传递）
|
||||||
handleCheckboxChange(e, index) {
|
handleCheckboxChange(e, index) {
|
||||||
if (e.detail.value) {
|
if (e.detail.value) {
|
||||||
|
// 去重处理
|
||||||
|
if (!this.selectedIndexs.includes(index)) {
|
||||||
this.selectedIndexs.push(index)
|
this.selectedIndexs.push(index)
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
this.selectedIndexs = this.selectedIndexs.filter(item => item !== index)
|
this.selectedIndexs = this.selectedIndexs.filter(item => item !== index)
|
||||||
}
|
}
|
||||||
|
|
@ -110,6 +201,9 @@ export default {
|
||||||
search() {
|
search() {
|
||||||
this.getData()
|
this.getData()
|
||||||
},
|
},
|
||||||
|
submit(form) {
|
||||||
|
console.info(form)
|
||||||
|
},
|
||||||
// 获取数据
|
// 获取数据
|
||||||
getData(pageCurrent) {
|
getData(pageCurrent) {
|
||||||
this.loading = true
|
this.loading = true
|
||||||
|
|
@ -125,21 +219,76 @@ export default {
|
||||||
this.total = response.total
|
this.total = response.total
|
||||||
}
|
}
|
||||||
this.loading = false
|
this.loading = false
|
||||||
|
}).catch(error => {
|
||||||
|
console.error('获取数据失败:', error)
|
||||||
|
this.loading = false
|
||||||
})
|
})
|
||||||
|
},
|
||||||
|
// 补充selection-change事件
|
||||||
|
selectionChange(e) {
|
||||||
|
console.log('表格选中项:', e)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
/* 适配微信小程序，取消页面默认padding */
|
/* 页面基础样式重置 */
|
||||||
page {
|
page {
|
||||||
padding-top: 0 !important;
|
padding-top: 0 !important;
|
||||||
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 整体容器样式 */
|
||||||
|
.container {
|
||||||
|
margin: 20rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
background: #fff;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container {
|
||||||
|
margin: 20rpx 0 0 0;
|
||||||
|
padding: 15rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 表单一行两列布局核心样式 */
|
||||||
|
.form-row {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 0 10rpx 10rpx 10rpx;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 核心：父容器flex布局，通过justify-content: space-between实现左右分布 */
|
||||||
|
.btn-group {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between; /* 关键：左右元素分别靠两端 */
|
||||||
|
align-items: center; /* 垂直居中，保证按钮对齐 */
|
||||||
|
width: 100%; /* 占满父容器宽度，确保分布效果 */
|
||||||
|
padding: 20rpx 10rpx 0; /* 左右留间距，避免贴边 */
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 左侧按钮容器：横向排列，靠左 */
|
||||||
|
.btn-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 右侧按钮容器：横向排列，靠右 */
|
||||||
|
.btn-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 表格容器样式 */
|
||||||
.uni-container {
|
.uni-container {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
box-sizing: border-box; /* 保证padding不超出屏幕 */
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uni-group {
|
.uni-group {
|
||||||
|
|
@ -148,9 +297,37 @@ page {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 缩小需求详情的行高 */
|
/* 需求详情文字样式 */
|
||||||
.name {
|
.name {
|
||||||
line-height: 20px;
|
line-height: 18px;
|
||||||
font-size: 12px;
|
font-size: 11px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 分页区域样式 */
|
||||||
|
.uni-pagination-box {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .uni-forms-item__label {
|
||||||
|
font-size: 12px !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
/deep/ .uni-select, /deep/.uni-easyinput__content-input {
|
||||||
|
font-size: 12px !important;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.form-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 48%; /* 每个表单项占48%宽度，留间距 */
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0 !important; /* 清除默认间距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,368 @@
|
||||||
|
<!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>
|
||||||
|
|
||||||
|
</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"></span>
|
||||||
|
<div class="name">add</div>
|
||||||
|
<div class="code-name">&#xe664;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">ashbin</div>
|
||||||
|
<div class="code-name">&#xe665;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">close</div>
|
||||||
|
<div class="code-name">&#xe668;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">close-bold</div>
|
||||||
|
<div class="code-name">&#xe685;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">edit</div>
|
||||||
|
<div class="code-name">&#xe654;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">search</div>
|
||||||
|
<div class="code-name">&#xea56;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">查询</div>
|
||||||
|
<div class="code-name">&#xe615;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">蜡烛</div>
|
||||||
|
<div class="code-name">&#xe65b;</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.ttf?t=1768306553008') 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"
|
||||||
|
><span class="iconfont">&#x33;</span>
|
||||||
|
</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-add"></span>
|
||||||
|
<div class="name">
|
||||||
|
add
|
||||||
|
</div>
|
||||||
|
<div class="code-name">.icon-add
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont icon-ashbin"></span>
|
||||||
|
<div class="name">
|
||||||
|
ashbin
|
||||||
|
</div>
|
||||||
|
<div class="code-name">.icon-ashbin
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont icon-close"></span>
|
||||||
|
<div class="name">
|
||||||
|
close
|
||||||
|
</div>
|
||||||
|
<div class="code-name">.icon-close
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont icon-close-bold"></span>
|
||||||
|
<div class="name">
|
||||||
|
close-bold
|
||||||
|
</div>
|
||||||
|
<div class="code-name">.icon-close-bold
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont icon-edit"></span>
|
||||||
|
<div class="name">
|
||||||
|
edit
|
||||||
|
</div>
|
||||||
|
<div class="code-name">.icon-edit
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont icon-search"></span>
|
||||||
|
<div class="name">
|
||||||
|
search
|
||||||
|
</div>
|
||||||
|
<div class="code-name">.icon-search
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont icon-search1"></span>
|
||||||
|
<div class="name">
|
||||||
|
查询
|
||||||
|
</div>
|
||||||
|
<div class="code-name">.icon-search1
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont icon-lazhu"></span>
|
||||||
|
<div class="name">
|
||||||
|
蜡烛
|
||||||
|
</div>
|
||||||
|
<div class="code-name">.icon-lazhu
|
||||||
|
</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"><link rel="stylesheet" href="./iconfont.css">
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||||
|
<pre><code class="language-html"><span class="iconfont icon-xxx"></span>
|
||||||
|
</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-add"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">add</div>
|
||||||
|
<div class="code-name">#icon-add</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-ashbin"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">ashbin</div>
|
||||||
|
<div class="code-name">#icon-ashbin</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-close"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">close</div>
|
||||||
|
<div class="code-name">#icon-close</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-close-bold"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">close-bold</div>
|
||||||
|
<div class="code-name">#icon-close-bold</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-edit"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">edit</div>
|
||||||
|
<div class="code-name">#icon-edit</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-search"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">search</div>
|
||||||
|
<div class="code-name">#icon-search</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-search1"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">查询</div>
|
||||||
|
<div class="code-name">#icon-search1</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-lazhu"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">蜡烛</div>
|
||||||
|
<div class="code-name">#icon-lazhu</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"><script src="./iconfont.js"></script>
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
|
||||||
|
<pre><code class="language-html"><style>
|
||||||
|
.icon {
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
vertical-align: -0.15em;
|
||||||
|
fill: currentColor;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||||
|
<pre><code class="language-html"><svg class="icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-xxx"></use>
|
||||||
|
</svg>
|
||||||
|
</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>
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: "iconfont"; /* Project id */
|
||||||
|
src: url('@/static/font_ve87r6kfq3/iconfont.ttf?t=1768306553008') format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
font-family: "iconfont" !important;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-add:before {
|
||||||
|
content: "\e664";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-ashbin:before {
|
||||||
|
content: "\e665";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-close:before {
|
||||||
|
content: "\e668";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-close-bold:before {
|
||||||
|
content: "\e685";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-edit:before {
|
||||||
|
content: "\e654";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-search:before {
|
||||||
|
content: "\ea56";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-search1:before {
|
||||||
|
content: "\e615";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-lazhu:before {
|
||||||
|
content: "\e65b";
|
||||||
|
}
|
||||||
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,65 @@
|
||||||
|
{
|
||||||
|
"id": "",
|
||||||
|
"name": "",
|
||||||
|
"font_family": "iconfont",
|
||||||
|
"css_prefix_text": "icon-",
|
||||||
|
"description": "",
|
||||||
|
"glyphs": [
|
||||||
|
{
|
||||||
|
"icon_id": "15838424",
|
||||||
|
"name": "add",
|
||||||
|
"font_class": "add",
|
||||||
|
"unicode": "e664",
|
||||||
|
"unicode_decimal": 58980
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "15838430",
|
||||||
|
"name": "ashbin",
|
||||||
|
"font_class": "ashbin",
|
||||||
|
"unicode": "e665",
|
||||||
|
"unicode_decimal": 58981
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "15838444",
|
||||||
|
"name": "close",
|
||||||
|
"font_class": "close",
|
||||||
|
"unicode": "e668",
|
||||||
|
"unicode_decimal": 58984
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "15838563",
|
||||||
|
"name": "close-bold",
|
||||||
|
"font_class": "close-bold",
|
||||||
|
"unicode": "e685",
|
||||||
|
"unicode_decimal": 59013
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "33215995",
|
||||||
|
"name": "edit",
|
||||||
|
"font_class": "edit",
|
||||||
|
"unicode": "e654",
|
||||||
|
"unicode_decimal": 58964
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "44063702",
|
||||||
|
"name": "search",
|
||||||
|
"font_class": "search",
|
||||||
|
"unicode": "ea56",
|
||||||
|
"unicode_decimal": 59990
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "44849862",
|
||||||
|
"name": "查询",
|
||||||
|
"font_class": "search1",
|
||||||
|
"unicode": "e615",
|
||||||
|
"unicode_decimal": 58901
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "46589632",
|
||||||
|
"name": "蜡烛",
|
||||||
|
"font_class": "lazhu",
|
||||||
|
"unicode": "e65b",
|
||||||
|
"unicode_decimal": 58971
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
Binary file not shown.
|
|
@ -88,3 +88,37 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* 极简版（无CSS变量） */
|
||||||
|
.mini-btn {
|
||||||
|
margin-left: 10rpx !important;
|
||||||
|
font-size: 12px !important;
|
||||||
|
padding: 5rpx 15rpx !important;
|
||||||
|
border-width: 1px !important;
|
||||||
|
border-style: solid !important;
|
||||||
|
}
|
||||||
|
.btn-left .mini-btn:first-child {
|
||||||
|
margin-left: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 默认按钮 */
|
||||||
|
.mini-btn { color: #fff !important; background: #1890ff !important; border-color: #1890ff !important; }
|
||||||
|
/* 新增按钮 */
|
||||||
|
.add-btn { color: #1890ff !important; background: #e8f4ff !important; border-color: #a3d3ff !important; }
|
||||||
|
/* 删除按钮 */
|
||||||
|
.del-btn { color: #71e2a3 !important; background: #e7faf0 !important; border-color: #d0f5e0 !important; }
|
||||||
|
/* 编辑按钮 */
|
||||||
|
.edit-btn { color: #ff9292 !important; background: #ffeded !important; border-color: #ffdbdb !important; }
|
||||||
|
|
||||||
|
/* hover统一样式 */
|
||||||
|
.is-hover {
|
||||||
|
color: #fff !important;
|
||||||
|
/* 按按钮类型匹配背景色 */
|
||||||
|
&.add-btn { background: #1890ff !important; border-color: #1890ff !important; }
|
||||||
|
&.del-btn { background: #71e2a3 !important; border-color: #71e2a3 !important; }
|
||||||
|
&.edit-btn { background: #ff9292 !important; border-color: #ff9292 !important; }
|
||||||
|
&:not(.add-btn):not(.del-btn):not(.edit-btn) { background: #1682e6 !important; border-color: #1682e6 !important; }
|
||||||
|
}
|
||||||
|
|
@ -4,3 +4,4 @@
|
||||||
@import "@/static/scss/colorui.css";
|
@import "@/static/scss/colorui.css";
|
||||||
// iconfont
|
// iconfont
|
||||||
@import "@/static/font/iconfont.css";
|
@import "@/static/font/iconfont.css";
|
||||||
|
@import "@/static/font_ve87r6kfq3/iconfont.css";
|
||||||
Loading…
Reference in New Issue