Skip to content

M
mocp-uniapp
Commit 9f2a4fd3 by pangchong
Options

feat: 工作任务开发收尾

parent 541150e3
Showing with 446 additions and 35 deletions
components.d.ts
...@@ -27,6 +27,7 @@ declare module 'vue' { ...@@ -27,6 +27,7 @@ declare module 'vue' {
GlobalPopup: typeof import('./src/mocp/components/global-popup/global-popup.vue')['default'] GlobalPopup: typeof import('./src/mocp/components/global-popup/global-popup.vue')['default']
GlobalRadio: typeof import('./src/mocp/components/global-radio/global-radio.vue')['default'] GlobalRadio: typeof import('./src/mocp/components/global-radio/global-radio.vue')['default']
GlobalTabs: typeof import('./src/mocp/components/global-tabs/global-tabs.vue')['default'] GlobalTabs: typeof import('./src/mocp/components/global-tabs/global-tabs.vue')['default']
GlobalTag: typeof import('./src/mocp/components/global-tag/global-tag.vue')['default']
GlobalUpload: typeof import('./src/mocp/components/global-upload/global-upload.vue')['default'] GlobalUpload: typeof import('./src/mocp/components/global-upload/global-upload.vue')['default']
GlobalUploadImage: typeof import('./src/mocp/components/global-upload-image/global-upload-image.vue')['default'] GlobalUploadImage: typeof import('./src/mocp/components/global-upload-image/global-upload-image.vue')['default']
// 自定义组件 // 自定义组件
......
src/mocp/api/work-assignment.js
...@@ -8,5 +8,11 @@ export const getWorkTaskListApi = (data, config) => { ...@@ -8,5 +8,11 @@ export const getWorkTaskListApi = (data, config) => {
config config
}) })
} }
export const WorkTaskIsSuccessApi = (data, config) => {
return http({
\ No newline at end of file method: 'POST',
url: '/workbench/WorkTaskIsSuccess',
data,
config
})
}
src/mocp/components/global-button/global-button.scss
@mixin global-button-light { //primary
@mixin global-button-primary-plain {
color: $mocp-primary-6; color: $mocp-primary-6;
background-color: $mocp-primary-1; background-color: $mocp-primary-1;
} }
@mixin global-button-light-active { @mixin global-button-primary-plain-active {
color: darken($mocp-primary-6, 10%); color: darken($mocp-primary-6, 10%);
background-color: darken($mocp-primary-1, 5%); background-color: darken($mocp-primary-1, 5%);
border-color: darken($mocp-primary-1, 5%); border-color: darken($mocp-primary-1, 5%);
...@@ -16,6 +17,16 @@ ...@@ -16,6 +17,16 @@
background-color: darken($mocp-primary-7, 5%); background-color: darken($mocp-primary-7, 5%);
border-color: darken($mocp-primary-7, 5%); border-color: darken($mocp-primary-7, 5%);
} }
//success
@mixin global-button-success-plain {
color: $mocp-success-6;
background-color: $mocp-success-1;
}
@mixin global-button-success-plain-active {
color: darken($mocp-success-6, 10%);
background-color: darken($mocp-success-1, 5%);
border-color: darken($mocp-success-1, 5%);
}
@mixin global-button-success { @mixin global-button-success {
color: #fff; color: #fff;
background-color: $mocp-success-6; background-color: $mocp-success-6;
...@@ -25,6 +36,16 @@ ...@@ -25,6 +36,16 @@
background-color: darken($mocp-success-7, 5%); background-color: darken($mocp-success-7, 5%);
border-color: darken($mocp-success-7, 5%); border-color: darken($mocp-success-7, 5%);
} }
//warning
@mixin global-button-warning-plain {
color: $mocp-warning-6;
background-color: $mocp-warning-1;
}
@mixin global-button-warning-plain-active {
color: darken($mocp-warning-6, 10%);
background-color: darken($mocp-warning-1, 5%);
border-color: darken($mocp-warning-1, 5%);
}
@mixin global-button-warning { @mixin global-button-warning {
color: #fff; color: #fff;
background-color: $mocp-warning-6; background-color: $mocp-warning-6;
...@@ -34,6 +55,16 @@ ...@@ -34,6 +55,16 @@
background-color: darken($mocp-warning-7, 5%); background-color: darken($mocp-warning-7, 5%);
border-color: darken($mocp-warning-7, 5%); border-color: darken($mocp-warning-7, 5%);
} }
//danger
@mixin global-button-danger-plain {
color: $mocp-danger-6;
background-color: $mocp-danger-1;
}
@mixin global-button-danger-plain-active {
color: darken($mocp-danger-6, 10%);
background-color: darken($mocp-danger-1, 5%);
border-color: darken($mocp-danger-1, 5%);
}
@mixin global-button-danger { @mixin global-button-danger {
color: #fff; color: #fff;
background-color: $mocp-danger-6; background-color: $mocp-danger-6;
...@@ -47,10 +78,10 @@ ...@@ -47,10 +78,10 @@
padding: 0 20rpx; padding: 0 20rpx;
margin: 0; margin: 0;
font-size: 28rpx; font-size: 28rpx;
&.light { &.primary-plain {
@include global-button-light; @include global-button-primary-plain;
&:active { &:active {
@include global-button-light-active; @include global-button-primary-plain-active;
} }
&::after { &::after {
border: none; border: none;
...@@ -62,18 +93,45 @@ ...@@ -62,18 +93,45 @@
@include global-button-primary-active; @include global-button-primary-active;
} }
} }
&.success-plain {
@include global-button-success-plain;
&:active {
@include global-button-success-plain-active;
}
&::after {
border: none;
}
}
&.success { &.success {
@include global-button-success; @include global-button-success;
&:active { &:active {
@include global-button-success-active; @include global-button-success-active;
} }
} }
&.warning-plain {
@include global-button-warning-plain;
&:active {
@include global-button-warning-plain-active;
}
&::after {
border: none;
}
}
&.warning { &.warning {
@include global-button-warning; @include global-button-warning;
&:active { &:active {
@include global-button-warning-active; @include global-button-warning-active;
} }
} }
&.danger-plain {
@include global-button-danger-plain;
&:active {
@include global-button-danger-plain-active;
}
&::after {
border: none;
}
}
&.danger { &.danger {
@include global-button-danger; @include global-button-danger;
&:active { &:active {
......
src/mocp/components/global-button/global-button.vue
<template> <template>
<!-- 全局button --> <!-- 全局button -->
<button :class="getClass" :style="style" :loading="loading" :disabled="disabled"> <button :class="getClass" :style="style" :loading="loading" :disabled="disabled">
<global-icon class="icon" :icon="icon" v-if="icon"></global-icon>
<slot></slot> <slot></slot>
</button> </button>
</template> </template>
...@@ -22,7 +23,12 @@ const ps = defineProps({ ...@@ -22,7 +23,12 @@ const ps = defineProps({
return {} return {}
} }
}, },
//default,light,primary,success,warning,danger,text //图标
icon: {
type: String,
default: ''
},
//default,primary,success,warning,danger,text
type: { type: {
type: String, type: String,
default: 'default' default: 'default'
...@@ -32,6 +38,11 @@ const ps = defineProps({ ...@@ -32,6 +38,11 @@ const ps = defineProps({
type: String, type: String,
default: 'default' default: 'default'
}, },
//是否镂空
plain: {
type: Boolean,
default: false
},
loading: { loading: {
type: Boolean, type: Boolean,
default: false default: false
...@@ -46,9 +57,12 @@ const getClass = computed(() => { ...@@ -46,9 +57,12 @@ const getClass = computed(() => {
if (ps.class) { if (ps.class) {
_class.push(ps.class) _class.push(ps.class)
} }
if (ps.type) { if (ps.plain) {
_class.push(ps.type + '-plain')
} else {
_class.push(ps.type) _class.push(ps.type)
} }
return _class return _class
}) })
const getSize = computed(() => { const getSize = computed(() => {
...@@ -75,5 +89,8 @@ const getRadius = computed(() => { ...@@ -75,5 +89,8 @@ const getRadius = computed(() => {
border-radius: v-bind(getRadius); border-radius: v-bind(getRadius);
height: v-bind(getSize); height: v-bind(getSize);
line-height: v-bind(getSize); line-height: v-bind(getSize);
.icon {
margin-right: 8rpx;
}
} }
</style> </style>
src/mocp/components/global-icon/global-icon.vue
...@@ -11,7 +11,7 @@ const ps = defineProps({ ...@@ -11,7 +11,7 @@ const ps = defineProps({
}, },
color: { color: {
type: String, type: String,
default: '#4E5969' default: 'currentColor'
}, },
size: { size: {
type: [Number, String], type: [Number, String],
......
src/mocp/components/global-tag/global-tag.vue 0 → 100644
<template>
<text class="global-tag" :class="getClass">
<slot></slot>
</text>
</template>
<script setup>
import { computed } from 'vue'
const ps = defineProps({
//primary / success / warning / danger
type: {
type: String,
default: 'primary'
},
class: {
type: String,
default: ''
},
radious: {
type: [String, Number],
default: 6
}
})
//获取class
const getClass = computed(() => {
const _class = []
if (ps.class) {
_class.push(ps.class)
}
if (ps.type == 'primary') {
_class.push('mocp-bg-primary-2')
_class.push('mocp-color-primary-6')
}
if (ps.type == 'success') {
_class.push('mocp-bg-success-2')
_class.push('mocp-color-success-6')
}
if (ps.type == 'warning') {
_class.push('mocp-bg-warning-2')
_class.push('mocp-color-warning-6')
}
if (ps.type == 'danger') {
_class.push('mocp-bg-danger-2')
_class.push('mocp-color-danger-6')
}
return _class
})
//获取圆角
const getRadious = computed(() => {
if (typeof ps.radious == 'string') {
return ps.radious
} else {
return ps.radious + 'rpx'
}
})
</script>
<style lang="scss" scoped>
.global-tag {
font-size: 24rpx;
padding: 4rpx 8rpx;
border-radius: v-bind(getRadious);
}
</style>
src/mocp/components/global-upload/global-upload.vue
...@@ -72,7 +72,7 @@ const ps = defineProps({ ...@@ -72,7 +72,7 @@ const ps = defineProps({
} }
}, },
fileList: { fileList: {
type: Array, type: [Array, String],
default: () => { default: () => {
return [] return []
} }
...@@ -102,7 +102,13 @@ const fileList = ref([]) ...@@ -102,7 +102,13 @@ const fileList = ref([])
watch( watch(
() => ps.fileList, () => ps.fileList,
(value) => { (value) => {
fileList.value = cloneDeep(value) if (value) {
if (Array.isArray(value)) {
fileList.value = cloneDeep(value)
} else {
fileList.value = JSON.parse(value)
}
}
}, },
{ immediate: true } { immediate: true }
) )
......
src/mocp/hooks/use-dict/dict-data/work-assignment.js
...@@ -3,3 +3,13 @@ export const wa_state = [ ...@@ -3,3 +3,13 @@ export const wa_state = [
{ label: 'OPEN', value: '1' }, { label: 'OPEN', value: '1' },
{ label: 'CLOSE', value: '2' } { label: 'CLOSE', value: '2' }
] ]
export const wa_isSuccess = [
{ label: '已拒绝', value: '1' },
{ label: '待接收', value: '2' },
{ label: '已接收', value: '3' }
]
export const wa_isSuccessType = [
{ label: 'danger', value: '1' },
{ label: 'primary', value: '2' },
{ label: 'success', value: '3' }
]
src/mocp/store/work-assignment.js
...@@ -33,6 +33,16 @@ const useWorkAssignmentStore = defineStore('workAssignment', { ...@@ -33,6 +33,16 @@ const useWorkAssignmentStore = defineStore('workAssignment', {
} }
}, },
// 配置持久化 // 配置持久化
persist: false persist: {
// 调整为兼容多端的API
storage: {
setItem(key, value) {
uni.setStorageSync(key, value)
},
getItem(key) {
return uni.getStorageSync(key)
}
}
}
}) })
export default useWorkAssignmentStore export default useWorkAssignmentStore
src/pages/modules/mocp/panel/appraisal-record/search.vue
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
<view class="footer-btn"> <view class="footer-btn">
<up-row gutter="10"> <up-row gutter="10">
<up-col span="6"> <up-col span="6">
<global-button type="light" size="large" :radius="5" @tap="handleReset">重置</global-button> <global-button type="primary" plain size="large" :radius="5" @tap="handleReset">重置</global-button>
</up-col> </up-col>
<up-col span="6"><global-button type="primary" size="large" :radius="5" @tap="handleConfirm">确定</global-button></up-col> <up-col span="6"><global-button type="primary" size="large" :radius="5" @tap="handleConfirm">确定</global-button></up-col>
</up-row> </up-row>
......
src/pages/modules/mocp/panel/assign-work/search.vue
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
<view class="footer-btn"> <view class="footer-btn">
<up-row gutter="10"> <up-row gutter="10">
<up-col span="6"> <up-col span="6">
<global-button type="light" size="large" :radius="5" @tap="handleReset">重置</global-button> <global-button type="primary" plain size="large" :radius="5" @tap="handleReset">重置</global-button>
</up-col> </up-col>
<up-col span="6"><global-button type="primary" size="large" :radius="5" @tap="handleConfirm">确定</global-button></up-col> <up-col span="6"><global-button type="primary" size="large" :radius="5" @tap="handleConfirm">确定</global-button></up-col>
</up-row> </up-row>
......
src/pages/modules/mocp/panel/move-decision/search.vue
...@@ -62,7 +62,7 @@ ...@@ -62,7 +62,7 @@
<view class="footer-btn"> <view class="footer-btn">
<up-row gutter="10"> <up-row gutter="10">
<up-col span="6"> <up-col span="6">
<global-button type="light" size="large" :radius="5" @tap="handleReset">重置</global-button> <global-button type="primary" plain size="large" :radius="5" @tap="handleReset">重置</global-button>
</up-col> </up-col>
<up-col span="6"><global-button type="primary" size="large" :radius="5" @tap="handleConfirm">确定</global-button></up-col> <up-col span="6"><global-button type="primary" size="large" :radius="5" @tap="handleConfirm">确定</global-button></up-col>
</up-row> </up-row>
......
src/pages/modules/mocp/panel/technology-evaluation/search.vue
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
<view class="footer-btn"> <view class="footer-btn">
<up-row gutter="10"> <up-row gutter="10">
<up-col span="6"> <up-col span="6">
<global-button type="light" size="large" :radius="5" @tap="handleReset">重置</global-button> <global-button type="primary" plain size="large" :radius="5" @tap="handleReset">重置</global-button>
</up-col> </up-col>
<up-col span="6"><global-button type="primary" size="large" :radius="5" @tap="handleConfirm">确定</global-button></up-col> <up-col span="6"><global-button type="primary" size="large" :radius="5" @tap="handleConfirm">确定</global-button></up-col>
</up-row> </up-row>
......
src/pages/modules/mocp/panel/work-assignment/constants/details.scss 0 → 100644
.details {
padding: 16rpx 24rpx;
border-radius: 12rpx;
background: #ffffff;
color: $mocp-text-4;
&-header {
&-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16rpx;
}
&-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 16rpx;
.left {
display: flex;
align-items: center;
.left-icon {
margin-right: 16rpx;
}
}
}
}
&-body {
&-content {
padding: 16rpx 0;
font-size: 30rpx;
border-top: 2rpx solid #f4f4f4;
border-bottom: 2rpx solid #f4f4f4;
}
&-file {
padding-top: 16rpx;
image {
width: 100%;
}
}
}
&-footer {
padding-top: 16rpx;
border-top: 2rpx solid #f4f4f4;
.row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16rpx;
&:last-child {
margin-bottom: 0;
}
}
}
}
src/pages/modules/mocp/panel/work-assignment/details.vue
<template> <template>
<global-page :padding="24" title="工作任务指令详情"></global-page> <global-page :padding="24" title="工作任务指令详情">
<template v-if="details">
<view class="details">
<view class="details-header">
<view class="details-header-top">
<view class="left">
<custom-state :value="useGetDictByValue('wa_state', details.state)" :size="32"></custom-state>
</view>
<view class="right">
<global-tag :type="useGetDictByValue('wa_isSuccessType', details.isSuccess)">
{{ useGetDictByValue('wa_isSuccess', details.isSuccess) }}
</global-tag>
</view>
</view>
<view class="details-header-bottom">
<view class="left">
<global-icon class="left-icon" icon="Vector" size="24" color="#DD4012"></global-icon>
<view class="txt">{{ details.aviation }} {{ details.machineNumber }} {{ details.model }}</view>
</view>
<view class="right">
<view class="txt">{{ details.terminal }}</view>
</view>
</view>
</view>
<view class="details-body">
<view class="details-body-content">
{{ details.taskDescription || '无' }}
</view>
<view class="details-body-file">
<global-upload :fileList="details.taskFile" :showUpload="false"></global-upload>
</view>
</view>
<view class="details-footer">
<view class="row">
<global-field label="反馈时限:" :value="timeStampFormat(details.feedbackTime, { format: 'YYYY/MM/DD' })"></global-field>
</view>
<view class="row">
<global-field label="发起人:" :value="details.sponsor || '-'"></global-field>
<global-field label="发起时间:" :value="timeStampFormat(details.creationTime, { format: 'YYYY/MM/DD' })"></global-field>
</view>
<view class="row">
<global-field label="接收人:" :value="details.recipient || '-'"></global-field>
<global-field label="接收时间:" :value="timeStampFormat(details.recipientTime, { format: 'YYYY/MM/DD' })"></global-field>
</view>
</view>
</view>
</template>
<template #bottom>
<view class="footer-btn">
<template
v-if="
details.sponsorId == userStore.userInfo?.realUserInfo.id ||
details.recipientId == userStore.userInfo?.realUserInfo.id ||
details.isSuccess != '2'
"
>
<global-button type="success" plain size="large" :radius="5" icon="check-circle-filled" v-if="details.isSuccess == '3'">
已接收
</global-button>
<global-button type="danger" plain size="large" :radius="5" icon="close-circle-filled" v-if="details.isSuccess == '1'">
已拒绝
</global-button>
</template>
<template v-else>
<up-row gutter="10">
<up-col span="6">
<global-button type="primary" plain size="large" :radius="5" @tap="confirm('1')">拒绝</global-button>
</up-col>
<up-col span="6">
<global-button type="primary" size="large" :radius="5" @tap="confirm('3')">接收</global-button>
</up-col>
</up-row>
</template>
</view>
</template>
<up-modal
:width="250"
:content="isSuccessValue == '1' ? '确认拒绝吗?' : '确认接收吗?'"
:show="show"
showCancelButton
closeOnClickOverlay
@confirm="handleWorkTaskIsSuccess"
@cancel="show = false"
@close="show = false"
></up-modal>
</global-page>
</template> </template>
<script setup> <script setup>
import useWorkAssignmentStore from 'mocp/store/work-assignment' import useWorkAssignmentStore from 'mocp/store/work-assignment'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
import useBaseStore from 'mocp/store/base' import useUserStore from 'mocp/store/user'
import { timeStampFormat } from 'mocp/utils/tool'
import { useGetDictByValue } from 'mocp/hooks/use-dict/useDict'
import { ref } from 'vue'
import { WorkTaskIsSuccessApi } from 'mocp/api/work-assignment'
const workAssignmentStore = useWorkAssignmentStore() const workAssignmentStore = useWorkAssignmentStore()
const { details } = storeToRefs(workAssignmentStore) const { details } = storeToRefs(workAssignmentStore)
console.log(details.value) const userStore = useUserStore()
const baseStore = useBaseStore() //接收或者拒绝
const show = ref(false)
const isSuccessValue = ref('')
const confirm = (isSuccess) => {
show.value = true
isSuccessValue.value = isSuccess
}
const handleWorkTaskIsSuccess = async () => {
const params = {
id: details.value.id,
isSuccess: isSuccessValue.value
}
const res = await WorkTaskIsSuccessApi(params, { loading: true })
if ((res.code = 200)) {
show.value = false
uni.$mocpMessage.success(res.message)
//更新详情
workAssignmentStore.setState('details', res.data)
} else {
uni.$mocpMessage.error(res.message)
}
}
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped>
@import './constants/details.scss';
.footer-btn {
padding: 24rpx 32rpx;
background-color: #fff;
}
</style>
src/pages/modules/mocp/panel/work-assignment/list.vue
...@@ -19,10 +19,12 @@ ...@@ -19,10 +19,12 @@
<view class="item-title"> <view class="item-title">
<view class="left"> <view class="left">
<custom-state :value="useGetDictByValue('wa_state', item.state)"></custom-state> <custom-state :value="useGetDictByValue('wa_state', item.state)"></custom-state>
<text class="txt u-line-1" v-if="item.machineNumber">{{ item.machineNumber }}</text>
</view> </view>
<view class="right"> <view class="right">
<text class="txt u-line-1" v-if="item.machineNumber">{{ item.machineNumber }}</text> <global-tag :type="useGetDictByValue('wa_isSuccessType', item.isSuccess)">
<text class="txt u-line-1" v-if="item.aviation">{{ item.aviation }}</text> {{ useGetDictByValue('wa_isSuccess', item.isSuccess) }}
</global-tag>
</view> </view>
</view> </view>
<view class="item-content u-line-3"> <view class="item-content u-line-3">
......
src/pages/modules/mocp/panel/work-assignment/search.vue
...@@ -29,19 +29,19 @@ ...@@ -29,19 +29,19 @@
filter filter
></global-picker> ></global-picker>
</up-form-item> </up-form-item>
<up-form-item label="反馈时限" prop="feedbackTime" :borderBottom="true">
<global-date v-model="formData.feedbackTime" pickAlign="right" clearable></global-date>
</up-form-item>
<up-form-item label="发起人" prop="sponsor" :borderBottom="true"> <up-form-item label="发起人" prop="sponsor" :borderBottom="true">
<up-input v-model="formData.sponsor" inputAlign="right" border="none" placeholder="请输入" clearable></up-input> <up-input v-model="formData.sponsor" inputAlign="right" border="none" placeholder="请输入" clearable></up-input>
</up-form-item> </up-form-item>
<up-form-item label="反馈时限" prop="feedbackTime" :borderBottom="true">
<global-date v-model="formData.feedbackTime" pickAlign="right" clearable></global-date>
</up-form-item>
</up-form> </up-form>
</view> </view>
<template #bottom> <template #bottom>
<view class="footer-btn"> <view class="footer-btn">
<up-row gutter="10"> <up-row gutter="10">
<up-col span="6"> <up-col span="6">
<global-button type="light" size="large" :radius="5" @tap="handleReset">重置</global-button> <global-button type="primary" plain size="large" :radius="5" @tap="handleReset">重置</global-button>
</up-col> </up-col>
<up-col span="6"><global-button type="primary" size="large" :radius="5" @tap="handleConfirm">确定</global-button></up-col> <up-col span="6"><global-button type="primary" size="large" :radius="5" @tap="handleConfirm">确定</global-button></up-col>
</up-row> </up-row>
......
src/static/mocp/font/demo_index.html
...@@ -55,6 +55,18 @@ ...@@ -55,6 +55,18 @@
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe6e4;</span>
<div class="name">close-circle-filled</div>
<div class="code-name">&amp;#xe6e4;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6e5;</span>
<div class="name">check-circle-filled</div>
<div class="code-name">&amp;#xe6e5;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6e3;</span> <span class="icon iconfont">&#xe6e3;</span>
<div class="name">fly</div> <div class="name">fly</div>
<div class="code-name">&amp;#xe6e3;</div> <div class="code-name">&amp;#xe6e3;</div>
...@@ -168,9 +180,9 @@ ...@@ -168,9 +180,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=1720593389064') format('woff2'), src: url('iconfont.woff2?t=1721199173027') format('woff2'),
url('iconfont.woff?t=1720593389064') format('woff'), url('iconfont.woff?t=1721199173027') format('woff'),
url('iconfont.ttf?t=1720593389064') format('truetype'); url('iconfont.ttf?t=1721199173027') format('truetype');
} }
</code></pre> </code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
...@@ -197,6 +209,24 @@ ...@@ -197,6 +209,24 @@
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-close-circle-filled"></span>
<div class="name">
close-circle-filled
</div>
<div class="code-name">.icon-close-circle-filled
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-check-circle-filled"></span>
<div class="name">
check-circle-filled
</div>
<div class="code-name">.icon-check-circle-filled
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fly"></span> <span class="icon iconfont icon-fly"></span>
<div class="name"> <div class="name">
fly fly
...@@ -369,6 +399,22 @@ ...@@ -369,6 +399,22 @@
<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="#icon-close-circle-filled"></use>
</svg>
<div class="name">close-circle-filled</div>
<div class="code-name">#icon-close-circle-filled</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-check-circle-filled"></use>
</svg>
<div class="name">check-circle-filled</div>
<div class="code-name">#icon-check-circle-filled</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fly"></use> <use xlink:href="#icon-fly"></use>
</svg> </svg>
<div class="name">fly</div> <div class="name">fly</div>
......
src/static/mocp/font/iconfont.css
@font-face { @font-face {
font-family: "iconfont"; /* Project id 4550048 */ font-family: "iconfont"; /* Project id 4550048 */
src: url('iconfont.woff2?t=1720593389064') format('woff2'), src: url('iconfont.woff2?t=1721199173027') format('woff2'),
url('iconfont.woff?t=1720593389064') format('woff'), url('iconfont.woff?t=1721199173027') format('woff'),
url('iconfont.ttf?t=1720593389064') format('truetype'); url('iconfont.ttf?t=1721199173027') format('truetype');
} }
.iconfont { .iconfont {
...@@ -13,6 +13,14 @@ ...@@ -13,6 +13,14 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-close-circle-filled:before {
content: "\e6e4";
}
.icon-check-circle-filled:before {
content: "\e6e5";
}
.icon-fly:before { .icon-fly:before {
content: "\e6e3"; content: "\e6e3";
} }
......
src/static/mocp/font/iconfont.json
...@@ -6,6 +6,20 @@ ...@@ -6,6 +6,20 @@
"description": "", "description": "",
"glyphs": [ "glyphs": [
{ {
"icon_id": "41114520",
"name": "close-circle-filled",
"font_class": "close-circle-filled",
"unicode": "e6e4",
"unicode_decimal": 59108
},
{
"icon_id": "41114519",
"name": "check-circle-filled",
"font_class": "check-circle-filled",
"unicode": "e6e5",
"unicode_decimal": 59109
},
{
"icon_id": "41020181", "icon_id": "41020181",
"name": "fly", "name": "fly",
"font_class": "fly", "font_class": "fly",
......
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