Commit 07a23b7b by pangchong

feat: 全局组件调整

parent 1b4b82ee
...@@ -10,12 +10,14 @@ declare module 'vue' { ...@@ -10,12 +10,14 @@ declare module 'vue' {
// 全局组件 // 全局组件
GlobalButton: typeof import('./src/components/global-button/global-button.vue')['default'] GlobalButton: typeof import('./src/components/global-button/global-button.vue')['default']
GlobalEmpty: typeof import('./src/components/global-empty/global-empty.vue')['default'] GlobalEmpty: typeof import('./src/components/global-empty/global-empty.vue')['default']
GlobalField: typeof import('./src/components/global-field/global-field.vue')['default']
GlobalIcon: typeof import('./src/components/global-icon/global-icon.vue')['default'] GlobalIcon: typeof import('./src/components/global-icon/global-icon.vue')['default']
GlobalNavbar: typeof import('./src/components/global-navbar/global-navbar.vue')['default'] GlobalNavbar: typeof import('./src/components/global-navbar/global-navbar.vue')['default']
GlobalPage: typeof import('./src/components/global-page/global-page.vue')['default'] GlobalPage: typeof import('./src/components/global-page/global-page.vue')['default']
GlobalPageSwiper: typeof import('./src/components/global-page-swiper/global-page-swiper.vue')['default'] GlobalPageSwiper: typeof import('./src/components/global-page-swiper/global-page-swiper.vue')['default']
GlobalPageSwiperItem: typeof import('./src/components/global-page-swiper-item/global-page-swiper-item.vue')['default'] GlobalPageSwiperItem: typeof import('./src/components/global-page-swiper-item/global-page-swiper-item.vue')['default']
GlobalPicker: typeof import('./src/components/global-picker/global-picker.vue')['default'] GlobalPicker: typeof import('./src/components/global-picker/global-picker.vue')['default']
GlobalPopup: typeof import('./src/components/global-popup/global-popup.vue')['default']
GlobalTabs: typeof import('./src/components/global-tabs/global-tabs.vue')['default'] GlobalTabs: typeof import('./src/components/global-tabs/global-tabs.vue')['default']
GlobalUpload: typeof import('./src/components/global-upload/global-upload.vue')['default'] GlobalUpload: typeof import('./src/components/global-upload/global-upload.vue')['default']
// 自定义组件 // 自定义组件
......
<template>
<!-- 全局标题+内容样式 -->
<text class="txt" :class="class">
<text class="color-text-5" :style="getLabelStyle" v-if="label">{{ label }}</text>
<text class="color-text-4" :style="getValueStyle" v-if="value">{{ value }}</text>
</text>
</template>
<script setup>
import { computed } from 'vue'
const ps = defineProps({
class: {
type: String,
default: ''
},
label: {
type: String,
default: ''
},
labelSize: {
type: Number,
default: 28
},
value: {
type: [String, Number],
default: ''
},
valueSize: {
type: Number,
default: 28
}
})
const getLabelStyle = computed(() => {
return {
fontSize: ps.labelSize + 'rpx'
}
})
const getValueStyle = computed(() => {
return {
fontSize: ps.valueSize + 'rpx'
}
})
</script>
<style lang="scss" scoped></style>
...@@ -96,7 +96,7 @@ watch( ...@@ -96,7 +96,7 @@ watch(
// 这里需要延迟渲染z-paging的原因是为了避免在一些平台上立即渲染可能引发的底层报错问题 // 这里需要延迟渲染z-paging的原因是为了避免在一些平台上立即渲染可能引发的底层报错问题
setTimeout(() => { setTimeout(() => {
isCurrentPage.value = true isCurrentPage.value = true
}, 100) }, 50)
} }
} }
}, },
......
...@@ -15,7 +15,14 @@ ...@@ -15,7 +15,14 @@
<slot name="top"></slot> <slot name="top"></slot>
</template> </template>
<!-- 滚动内容 --> <!-- 滚动内容 -->
<swiper class="swiper" :style="getStyle" :current="current" @transition="swiperTransition" @animationfinish="swiperAnimationfinish"> <swiper
:duration="100"
class="swiper"
:style="getStyle"
:current="current"
@transition="swiperTransition"
@animationfinish="swiperAnimationfinish"
>
<swiper-item v-for="(_, index) in tabList" :key="index"> <swiper-item v-for="(_, index) in tabList" :key="index">
<global-page-swiper-item <global-page-swiper-item
:ref="(vc) => (pagingArr[index] = vc)" :ref="(vc) => (pagingArr[index] = vc)"
......
...@@ -22,16 +22,17 @@ ...@@ -22,16 +22,17 @@
<!-- 自定义导航栏 --> <!-- 自定义导航栏 -->
<global-navbar :title="title" v-if="showNavbar"> <global-navbar :title="title" v-if="showNavbar">
<template #left v-if="pages.length > 1"> <template #left v-if="pages.length > 1">
<uni-icons v-if="getEditMode == 0 || getEditMode == 2" type="left" size="16" @tap="goBack"></uni-icons> <uni-icons v-if="navLeftType == 'icon'" :type="navLeftIcon" size="16" @tap="goBack"></uni-icons>
<view v-if="getEditMode == 1" class="cancel" @tap="handleCancel">取消</view> <view v-if="navLeftType == 'text'" class="cancel" @tap="handleCancel">{{ navLeftText }}</view>
</template> </template>
<template #right> <template #right v-if="showNavRight">
<global-button type="primary" size="small" v-if="getEditMode == 1" style="padding: 0 32rpx" @tap="handleEdit"> <global-button type="text" size="small" v-if="navRightType == 'text'" @tap="handleEdit">
{{ editButtonText }} {{ navRightText }}
</global-button> </global-button>
<global-button type="text" size="small" v-if="getEditMode == 2" @tap="handleEdit"> <global-button type="primary" size="small" v-if="navRightType == 'button'" style="padding: 0 32rpx" @tap="handleEdit">
{{ editText }} {{ navRightText }}
</global-button> </global-button>
<global-icon v-if="navRightType == 'icon'" :icon="navRightIcon" @tap="handleEdit"></global-icon>
</template> </template>
</global-navbar> </global-navbar>
<slot name="top"></slot> <slot name="top"></slot>
...@@ -43,6 +44,9 @@ ...@@ -43,6 +44,9 @@
</view> </view>
<!-- 底部 --> <!-- 底部 -->
<template #bottom> <template #bottom>
<view class="footer-btn" v-if="showFooterBtn">
<global-button type="primary" size="large" @tap="handleFooter">{{ footerBtnText }}</global-button>
</view>
<slot name="bottom"></slot> <slot name="bottom"></slot>
</template> </template>
</z-paging> </z-paging>
...@@ -51,7 +55,7 @@ ...@@ -51,7 +55,7 @@
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
const dataList = ref([]) const dataList = ref([])
const es = defineEmits(['query', 'handleCancel', 'handleEdit']) const es = defineEmits(['query', 'handleCancel', 'handleEdit', 'handleFooter'])
const paging = ref() const paging = ref()
const ps = defineProps({ const ps = defineProps({
padding: { padding: {
...@@ -72,25 +76,50 @@ const ps = defineProps({ ...@@ -72,25 +76,50 @@ const ps = defineProps({
type: Boolean, type: Boolean,
default: true default: true
}, },
//页面是否编辑状态 //nav左边插槽类型:icon,text
showEdit: { navLeftType: {
type: String,
default: 'icon'
},
//nav左边插槽图标
navLeftIcon: {
type: String,
default: 'left'
},
//nav左边插槽文字
navLeftText: {
type: String,
default: '取消'
},
//是否显示nav右边插槽
showNavRight: {
type: Boolean, type: Boolean,
default: false default: false
}, },
//编辑按钮文字内容 //nav右边插槽类型:icon,text,button
editButtonText: { navRightType: {
type: String, type: String,
default: '保存' default: 'text'
},
//nav右边插槽图标
navRightIcon: {
type: String,
default: 'navbarright'
}, },
//编辑文字内容 //nav右边插槽文字
editText: { navRightText: {
type: String, type: String,
default: '编辑' default: '编辑'
}, },
//页面编辑模式0,1,2 //是否显示底部按钮
editMode: { showFooterBtn: {
type: Number, type: Boolean,
default: 0 default: false
},
//底部按钮文字内容
footerBtnText: {
type: String,
default: '保存'
}, },
//是否显示返回 //是否显示返回
showBack: { showBack: {
...@@ -163,8 +192,6 @@ const query = (pageIndex, pageSize) => { ...@@ -163,8 +192,6 @@ const query = (pageIndex, pageSize) => {
complete() complete()
} }
} }
//获取页面状态
const getEditMode = ref(ps.editMode)
//返回 //返回
const goBack = () => { const goBack = () => {
uni.navigateBack() uni.navigateBack()
...@@ -177,18 +204,19 @@ const handleCancel = () => { ...@@ -177,18 +204,19 @@ const handleCancel = () => {
const handleEdit = () => { const handleEdit = () => {
es('handleEdit') es('handleEdit')
} }
//修改编辑状态 //点击底部按钮
const handleChangeEdit = (value) => { const handleFooter = () => {
getEditMode.value = value es('handleFooter')
} }
// 获取页面栈 // 获取页面栈
const pages = getCurrentPages() const pages = getCurrentPages()
defineExpose({
handleChangeEdit
})
</script> </script>
<style scoped> <style scoped>
.cancel { .cancel {
font-size: 28rpx; font-size: 28rpx;
} }
.footer-btn {
padding: 24rpx 32rpx;
background-color: #fff;
}
</style> </style>
<template>
<!-- 全局弹出层 -->
<up-popup
:show="modelValue"
:mode="mode"
:closeable="closeable"
:closeIconPos="closeIconPos"
:closeOnClickOverlay="closeOnClickOverlay"
:customStyle="getCustomStyle"
@close="close"
@open="open"
>
<view class="popup">
<slot name="title" v-if="title">
<view class="title">{{ title }}</view>
</slot>
<view class="content">
<slot></slot>
</view>
</view>
</up-popup>
</template>
<script setup>
import { computed } from 'vue'
const es = defineEmits(['close', 'open'])
const ps = defineProps({
modelValue: {
type: Boolean,
default: false
},
width: {
type: [String, Number],
default: ''
},
title: {
type: String,
default: ''
},
background: {
type: String,
default: '#fff'
},
// top / right / bottom / center
mode: {
type: String,
default: 'bottom'
},
closeable: {
type: Boolean,
default: false
},
// top-left / bottom-left / bottom-right
closeIconPos: {
type: String,
default: 'top-right'
},
closeOnClickOverlay: {
type: Boolean,
default: true
},
round: {
type: [String, Number],
default: 0
},
customStyle: {
type: Object,
default: () => {
return {}
}
}
})
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
const getCustomStyle = computed(() => {
const style = {
...ps.customStyle,
width: ps.width ? ps.width + 'rpx' : 'auto',
background: ps.background
}
if (ps.mode == 'right') {
style.borderTopLeftRadius = ps.round + 'rpx'
style.marginTop = safeAreaInsets?.top + 'px'
}
if (ps.mode == 'left') {
style.borderTopRightRadius = ps.round + 'rpx'
style.marginTop = safeAreaInsets?.top + 'px'
}
return style
})
const close = () => {
es('close', false)
}
const open = () => {
es('open', true)
}
</script>
<style lang="scss">
.popup {
height: 100%;
display: flex;
flex-direction: column;
.title {
color: $uni-text-5;
font-size: 40rpx;
padding: 18rpx 32rpx;
}
.content {
flex: auto;
overflow-y: auto;
}
}
</style>
...@@ -97,6 +97,12 @@ ...@@ -97,6 +97,12 @@
"navigationBarTitleText": "早会工作详情", "navigationBarTitleText": "早会工作详情",
"navigationStyle": "custom" "navigationStyle": "custom"
} }
},
{
"path": "pages/panel/assign-work/editWork",
"style": {
"navigationStyle": "custom"
}
} }
], ],
"globalStyle": { "globalStyle": {
......
<template> <template>
<global-page ref="pageRef" title="应用中心" @handleCancel="handleCancel" @handleEdit="handleEdit" :padding="16"> <global-page
ref="pageRef"
title="应用中心"
@handleCancel="handleCancel"
@handleEdit="handleEdit"
:padding="16"
:navLeftType="navLeftType"
:showNavRight="isEdit"
navRightType="button"
navRightText="保存"
>
<view class="card"> <view class="card">
<view class="card-title"> <view class="card-title">
<view class="card-title-txt">首页应用</view> <view class="card-title-txt">首页应用</view>
...@@ -45,24 +55,24 @@ import { cloneDeep } from 'lodash' ...@@ -45,24 +55,24 @@ import { cloneDeep } from 'lodash'
const userStore = useUserStore() const userStore = useUserStore()
const isEdit = ref(false) const isEdit = ref(false)
const pageRef = ref() const navLeftType = ref('icon')
//取消 //取消
const handleCancel = () => { const handleCancel = () => {
isEdit.value = false isEdit.value = false
pageRef.value?.handleChangeEdit(0) navLeftType.value = 'icon'
homeMenuList.value = cloneDeep(userStore.getHomeMenuList) homeMenuList.value = cloneDeep(userStore.getHomeMenuList)
} }
//保存 //保存
const handleEdit = () => { const handleEdit = () => {
isEdit.value = false isEdit.value = false
pageRef.value?.handleChangeEdit(0) navLeftType.value = 'icon'
userStore.changeHomeMenuList(cloneDeep(homeMenuList.value)) userStore.changeHomeMenuList(cloneDeep(homeMenuList.value))
uni.$message.showToast('保存菜单成功') uni.$message.showToast('保存菜单成功')
} }
//编辑 //编辑
const handleChange = () => { const handleChange = () => {
isEdit.value = true isEdit.value = true
pageRef.value?.handleChangeEdit(1) navLeftType.value = 'text'
} }
//操作菜单 //操作菜单
const homeMenuList = ref([]) const homeMenuList = ref([])
......
<template> <template>
<global-page <global-page
:title="formData.isDuty == 0 ? '添加公司值班信息' : '添加品质中心信息'" :title="formData.isDuty == 0 ? '添加公司值班信息' : '添加品质中心信息'"
showEdit navLeftType="text"
:editMode="1" showNavRight
navRightType="button"
navRightText="保存"
@handleCancel="handleCancel" @handleCancel="handleCancel"
@handleEdit="handleEdit" @handleEdit="handleEdit"
> >
......
...@@ -83,6 +83,7 @@ const handleAdd = () => { ...@@ -83,6 +83,7 @@ const handleAdd = () => {
justify-content: space-between; justify-content: space-between;
border-bottom: 2rpx solid #f4f4f4; border-bottom: 2rpx solid #f4f4f4;
padding-bottom: 16rpx; padding-bottom: 16rpx;
color: $uni-text-5;
.left { .left {
display: flex; display: flex;
align-items: center; align-items: center;
......
...@@ -22,7 +22,3 @@ ...@@ -22,7 +22,3 @@
} }
} }
} }
.submit-btn {
padding: 24rpx 32rpx;
background-color: #fff;
}
<template> <template>
<global-page :padding="24" title="考核记录详情" showEdit :editMode="2" @handleEdit="handleEdit"> <global-page :padding="24" title="考核记录详情" showNavRight @handleEdit="handleEdit">
<template v-if="details"> <template v-if="details">
<view class="details"> <view class="details">
<view class="details-header"> <view class="details-header">
...@@ -23,10 +23,7 @@ ...@@ -23,10 +23,7 @@
<view class="details-body-top"> <view class="details-body-top">
<view class="top"> <view class="top">
<global-icon icon="mind-mapping"></global-icon> <global-icon icon="mind-mapping"></global-icon>
<view class="txt u-line-1"> <global-field class="txt u-line-1" label="事件来源:" :value="details.eventSource || ' -'"></global-field>
<text class="color-text-5">事件来源:</text>
{{ details.eventSource || ' -' }}
</view>
</view> </view>
<view class="bottom" v-if="details.department != '-1' && details.appraisee != '-1'"> <view class="bottom" v-if="details.department != '-1' && details.appraisee != '-1'">
{{ details.department != '-1' ? details.department : '-' }} {{ details.department != '-1' ? details.department : '-' }}
...@@ -46,17 +43,11 @@ ...@@ -46,17 +43,11 @@
<view class="details-footer-bottom"> <view class="details-footer-bottom">
<view class="person-info"> <view class="person-info">
<global-icon icon="idcard"></global-icon> <global-icon icon="idcard"></global-icon>
<view class="txt"> <global-field class="txt" label="当班人员:" :value="details.onDutyUser || '-'"></global-field>
<text class="color-text-5">当班人员:</text>
{{ details.onDutyUser || '-' }}
</view>
</view> </view>
<view class="person-info"> <view class="person-info">
<global-icon icon="idcard"></global-icon> <global-icon icon="idcard"></global-icon>
<view class="txt"> <global-field class="txt" label="值班人员:" :value="details.dmName || '-'"></global-field>
<text class="color-text-5">值班人员:</text>
{{ details.dmName || '-' }}
</view>
</view> </view>
</view> </view>
</view> </view>
......
<template> <template>
<global-page title="考核记录登记"> <global-page title="考核记录登记" showFooterBtn @handleFooter="handleSubmit">
<view class="content"> <view class="content">
<view class="form"> <view class="form">
<up-form labelPosition="left" labelWidth="auto" :model="formData" ref="formRef" :rules="rules"> <up-form labelPosition="left" labelWidth="auto" :model="formData" ref="formRef" :rules="rules">
...@@ -63,10 +63,17 @@ ...@@ -63,10 +63,17 @@
></up-textarea> ></up-textarea>
</up-form-item> </up-form-item>
<up-form-item label="分值" :borderBottom="true"> <up-form-item label="分值" :borderBottom="true">
<up-input border="none" inputAlign="right" placeholder="请输入" v-model.number="formData.score" type="number"></up-input> <up-input
border="none"
inputAlign="right"
placeholder="请输入"
v-model.number="formData.score"
type="number"
clearable
></up-input>
</up-form-item> </up-form-item>
<up-form-item label="当班人员" :borderBottom="true"> <up-form-item label="当班人员" :borderBottom="true">
<up-input border="none" inputAlign="right" placeholder="请输入" v-model="formData.onDutyUser"></up-input> <up-input border="none" inputAlign="right" placeholder="请输入" v-model="formData.onDutyUser" clearable></up-input>
</up-form-item> </up-form-item>
</up-form> </up-form>
</view> </view>
...@@ -114,11 +121,6 @@ ...@@ -114,11 +121,6 @@
</view> </view>
</view> </view>
</view> </view>
<template #bottom>
<view class="submit-btn">
<global-button type="primary" size="large" @tap="handleSubmit">保存</global-button>
</view>
</template>
</global-page> </global-page>
</template> </template>
......
<template>
<view class="card">
<view class="card-title">
<view class="left">
<global-icon :icon="titleIcon"></global-icon>
<text class="txt">{{ title }}</text>
</view>
</view>
<view class="card-content">
<slot></slot>
</view>
</view>
</template>
<script setup>
const ps = defineProps({
title: {
type: String,
default: ''
},
titleIcon: {
type: String,
default: 'email'
}
})
</script>
<style lang="scss" scoped>
.card {
margin-top: 16rpx;
padding: 16rpx 24rpx;
border-radius: 12rpx;
color: $uni-text-4;
background: #ffffff;
&-title {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2rpx solid #f4f4f4;
padding-bottom: 16rpx;
font-size: 34rpx;
color: $uni-text-5;
.left {
display: flex;
align-items: center;
.txt {
margin-left: 8rpx;
color: $uni-text-5;
}
}
}
&-content {
padding: 16rpx 0;
}
}
</style>
<template>
<global-popup v-model="showPopup" mode="right" :width="580" background="#F7F8FA" title="选择责任单位" :round="32" @close="showPopup = false">
<view class="list">
<view class="item" v-for="item in 100" :key="item" @tap="handleClick">中南维修基地</view>
</view>
</global-popup>
</template>
<script setup>
import { ref } from 'vue'
const showPopup = ref(false)
const open = () => {
showPopup.value = true
}
//切换责任公司
const handleClick = () => {
showPopup.value = false
}
defineExpose({
open
})
</script>
<style lang="scss" scoped>
.list {
padding: 18rpx 32rpx;
.item {
color: $uni-text-4;
font-size: 30rpx;
background: #fff;
margin-bottom: 24rpx;
padding: 16rpx 24rpx;
}
}
</style>
.details { .details {
padding: 24rpx; padding: 24rpx;
color: $uni-text-4;
background: #fff;
&-header { &-header {
&-top { &-top {
display: flex; display: flex;
...@@ -17,14 +19,48 @@ ...@@ -17,14 +19,48 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-top: 16rpx;
.left { .left {
color: $uni-text-5; .txt {
margin-left: 8rpx;
}
}
.right {
.txt {
margin-left: 16rpx;
}
} }
} }
&-footer { &-footer {
margin-top: 16rpx;
padding-bottom: 16rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.left {
.txt {
margin-left: 16rpx;
color: $uni-text-5;
}
}
} }
} }
&-body {
&-content {
padding: 16rpx 0;
font-size: 30rpx;
border-top: 2rpx solid #f4f4f4;
border-bottom: 2rpx solid #f4f4f4;
}
&-file {
padding: 16rpx 0;
image {
width: 100%;
}
}
}
&-footer {
display: flex;
justify-content: space-between;
}
} }
<template> <template>
<global-page :padding="24" title="早会工作详情" showEdit :editMode="2" @handleEdit="handleEdit" editText="反馈"> <global-page
:padding="24"
title="早会工作详情"
showNavRight
navRightType="icon"
showFooterBtn
footerBtnText="工作反馈"
:editMode="3"
@handleEdit="handleEdit"
@handleFooter="handleFooter"
>
<view class="details"> <view class="details">
<view class="details-header"> <view class="details-header">
<view class="details-header-top"> <view class="details-header-top">
<view class="left">CLOSE</view> <view class="left">CLOSE</view>
<view class="right">提出人:唐恒山</view> <view class="right">
<global-field label="提出人:" value="唐恒山"></global-field>
</view>
</view> </view>
<view class="details-header-center"> <view class="details-header-center">
<view class="left"> <view class="left">
<global-icon icon="mind-mapping"></global-icon> <global-icon icon="mind-mapping"></global-icon>
<text class="txt">工作台编号:24242424</text> <global-field class="txt" label="工作台编号:" value="24242424"></global-field>
</view> </view>
<view class="right"> <view class="right">
<text>陈朝丽测试</text> <text>陈朝丽测试</text>
<text>早会工作</text> <text class="txt">早会工作</text>
</view> </view>
</view> </view>
<view class="details-header-footer"> <view class="details-header-footer">
<view class="left"> <view class="left">
<global-icon icon="mind-mapping"></global-icon> <global-icon icon="safe"></global-icon>
<text class="txt">反馈情况</text> <text class="txt">反馈情况</text>
</view> </view>
<view class="right"></view> <view class="right"></view>
</view> </view>
</view> </view>
<view class="details-body">
<view class="details-body-content">
针对股份1213飞机1月2日海口过站检查发现副驾驶氧气面罩盒测试电门损坏的情况,要求737机型中心分析原因。
</view>
<view class="details-body-file">
<image src="/static/image/login/upload.png" alt="" mode="widthFix" />
</view>
</view>
<view class="details-footer">
<global-field label="开始日期:" value="2024-01-03"></global-field>
<global-field label="完成日期:" value="2024-01-03"></global-field>
</view>
</view> </view>
<card-details title="工作反馈">
<global-empty></global-empty>
</card-details>
<card-details title="领导批示" titleIcon="drive">
<global-empty></global-empty>
</card-details>
</global-page> </global-page>
<!-- 责任单位弹出层 -->
<company-popup ref="companyPopupRef"></company-popup>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue'
import CardDetails from './components/card-details.vue'
import CompanyPopup from './components/company-popup.vue'
//责任公司弹框
const companyPopupRef = ref()
const handleEdit = () => { const handleEdit = () => {
console.log('点击反馈') companyPopupRef.value?.open()
}
//新增
const handleFooter = () => {
uni.navigateTo({ url: 'editWork' })
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
<template>
<global-page title="添加工作反馈" :editMode="1">
</global-page>
</template>
<script setup></script>
<style lang="scss" scoped></style>
...@@ -85,7 +85,7 @@ const getCount = computed(() => { ...@@ -85,7 +85,7 @@ const getCount = computed(() => {
height: 32rpx; height: 32rpx;
line-height: 32rpx; line-height: 32rpx;
padding: 0 8rpx; padding: 0 8rpx;
background: #ee0a24; background: $uni-danger-6;
position: absolute; position: absolute;
top: 0; top: 0;
right: 40rpx; right: 40rpx;
......
...@@ -55,6 +55,24 @@ ...@@ -55,6 +55,24 @@
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe6dc;</span>
<div class="name">navbarright</div>
<div class="code-name">&amp;#xe6dc;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6db;</span>
<div class="name">drive</div>
<div class="code-name">&amp;#xe6db;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6dd;</span>
<div class="name">safe</div>
<div class="code-name">&amp;#xe6dd;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6d6;</span> <span class="icon iconfont">&#xe6d6;</span>
<div class="name">subscribed</div> <div class="name">subscribed</div>
<div class="code-name">&amp;#xe6d6;</div> <div class="code-name">&amp;#xe6d6;</div>
...@@ -114,9 +132,9 @@ ...@@ -114,9 +132,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=1715851956645') format('woff2'), src: url('iconfont.woff2?t=1716888584997') format('woff2'),
url('iconfont.woff?t=1715851956645') format('woff'), url('iconfont.woff?t=1716888584997') format('woff'),
url('iconfont.ttf?t=1715851956645') format('truetype'); url('iconfont.ttf?t=1716888584997') format('truetype');
} }
</code></pre> </code></pre>
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3> <h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
...@@ -143,6 +161,33 @@ ...@@ -143,6 +161,33 @@
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-navbarright"></span>
<div class="name">
navbarright
</div>
<div class="code-name">.icon-navbarright
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-drive"></span>
<div class="name">
drive
</div>
<div class="code-name">.icon-drive
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-safe"></span>
<div class="name">
safe
</div>
<div class="code-name">.icon-safe
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-subscribed"></span> <span class="icon iconfont icon-subscribed"></span>
<div class="name"> <div class="name">
subscribed subscribed
...@@ -234,6 +279,30 @@ ...@@ -234,6 +279,30 @@
<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-navbarright"></use>
</svg>
<div class="name">navbarright</div>
<div class="code-name">#icon-navbarright</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-drive"></use>
</svg>
<div class="name">drive</div>
<div class="code-name">#icon-drive</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-safe"></use>
</svg>
<div class="name">safe</div>
<div class="code-name">#icon-safe</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-subscribed"></use> <use xlink:href="#icon-subscribed"></use>
</svg> </svg>
<div class="name">subscribed</div> <div class="name">subscribed</div>
......
@font-face { @font-face {
font-family: "iconfont"; /* Project id 4550048 */ font-family: "iconfont"; /* Project id 4550048 */
src: url('iconfont.woff2?t=1715851956645') format('woff2'), src: url('iconfont.woff2?t=1716888584997') format('woff2'),
url('iconfont.woff?t=1715851956645') format('woff'), url('iconfont.woff?t=1716888584997') format('woff'),
url('iconfont.ttf?t=1715851956645') format('truetype'); url('iconfont.ttf?t=1716888584997') format('truetype');
} }
.iconfont { .iconfont {
...@@ -13,6 +13,18 @@ ...@@ -13,6 +13,18 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-navbarright:before {
content: "\e6dc";
}
.icon-drive:before {
content: "\e6db";
}
.icon-safe:before {
content: "\e6dd";
}
.icon-subscribed:before { .icon-subscribed:before {
content: "\e6d6"; content: "\e6d6";
} }
......
...@@ -6,6 +6,27 @@ ...@@ -6,6 +6,27 @@
"description": "", "description": "",
"glyphs": [ "glyphs": [
{ {
"icon_id": "40514045",
"name": "navbarright",
"font_class": "navbarright",
"unicode": "e6dc",
"unicode_decimal": 59100
},
{
"icon_id": "40514044",
"name": "drive",
"font_class": "drive",
"unicode": "e6db",
"unicode_decimal": 59099
},
{
"icon_id": "40514100",
"name": "safe",
"font_class": "safe",
"unicode": "e6dd",
"unicode_decimal": 59101
},
{
"icon_id": "40365218", "icon_id": "40365218",
"name": "subscribed", "name": "subscribed",
"font_class": "subscribed", "font_class": "subscribed",
......
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