引入图标
This commit is contained in:
parent
f5f311ec67
commit
981f4ae4ed
30
components/me-icon/me-icon.css
Normal file
30
components/me-icon/me-icon.css
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
.icon-info:before {
|
||||||
|
content: "\e900";
|
||||||
|
}
|
||||||
|
.icon-call:before {
|
||||||
|
content: "\e901";
|
||||||
|
}
|
||||||
|
.icon-user:before {
|
||||||
|
content: "\e902";
|
||||||
|
}
|
||||||
|
.icon-logout:before {
|
||||||
|
content: "\e903";
|
||||||
|
}
|
||||||
|
.icon-navigation:before {
|
||||||
|
content: "\e904";
|
||||||
|
}
|
||||||
|
.icon-flashlight:before {
|
||||||
|
content: "\e905";
|
||||||
|
}
|
||||||
|
.icon-time:before {
|
||||||
|
content: "\e906";
|
||||||
|
}
|
||||||
|
.icon-arrow-right-circle:before {
|
||||||
|
content: "\e907";
|
||||||
|
}
|
||||||
|
.icon-checkbox-circle:before {
|
||||||
|
content: "\e908";
|
||||||
|
}
|
||||||
|
.icon-checkbox-blank-circle:before {
|
||||||
|
content: "\e909";
|
||||||
|
}
|
||||||
BIN
components/me-icon/me-icon.ttf
Normal file
BIN
components/me-icon/me-icon.ttf
Normal file
Binary file not shown.
48
components/me-icon/me-icon.vue
Normal file
48
components/me-icon/me-icon.vue
Normal file
|
|
@ -0,0 +1,48 @@
|
||||||
|
<template>
|
||||||
|
<view class="flex-c">
|
||||||
|
<text :style="styleObj()" class="me-icon" :class="[type]" @click="_onClick">
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
const emit = defineEmits(["click"]);
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
default: 'var(--contentColor50)'
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: '48rpx'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const _onClick = () => {
|
||||||
|
emit("click");
|
||||||
|
};
|
||||||
|
|
||||||
|
const styleObj = () => {
|
||||||
|
return `color: ${props.color}; font-size: ${props.size}; line-height: ${props.size};`
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import './me-icon.css';
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: me-icon;
|
||||||
|
src: url('./me-icon.ttf');
|
||||||
|
}
|
||||||
|
|
||||||
|
.me-icon {
|
||||||
|
font-family: me-icon;
|
||||||
|
text-decoration: none;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
16
pages.json
16
pages.json
|
|
@ -1,5 +1,13 @@
|
||||||
{
|
{
|
||||||
"pages": [
|
"pages": [
|
||||||
|
{
|
||||||
|
"path" : "pages/user/login",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText" : "",
|
||||||
|
"disableScroll": true
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path" : "pages/index/index",
|
"path" : "pages/index/index",
|
||||||
"style" :
|
"style" :
|
||||||
|
|
@ -20,14 +28,6 @@
|
||||||
{
|
{
|
||||||
"navigationBarTitleText" : "我的"
|
"navigationBarTitleText" : "我的"
|
||||||
}
|
}
|
||||||
},
|
|
||||||
{
|
|
||||||
"path" : "pages/user/login",
|
|
||||||
"style" :
|
|
||||||
{
|
|
||||||
"navigationBarTitleText" : "",
|
|
||||||
"disableScroll": true
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"globalStyle": {
|
"globalStyle": {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
测试
|
<view class="">
|
||||||
|
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user