添加bar组件
This commit is contained in:
21
QXTfront/uni_modules/lime-icon/components/l-icon/icon.scss
Normal file
21
QXTfront/uni_modules/lime-icon/components/l-icon/icon.scss
Normal file
@@ -0,0 +1,21 @@
|
||||
// $prefix: l !default;
|
||||
/* #ifndef APP-NVUE || UNI-APP-X && APP */
|
||||
@font-face {
|
||||
font-family: $prefix;
|
||||
src: url('https://tdesign.gtimg.com/icon/0.3.0/fonts/t.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
/* #ifdef UNI-APP-X && APP */
|
||||
@font-face {
|
||||
font-family: $prefix;
|
||||
/* #ifdef APP-HARMONY */
|
||||
src: url('/uni_modules/lime-icon/hybrid/html/t3.ttf');
|
||||
/* #endif */
|
||||
/* #ifndef APP-HARMONY */
|
||||
src: url('uni_modules/lime-icon/hybrid/html/t3.ttf');
|
||||
/* #endif */
|
||||
}
|
||||
/* #endif */
|
||||
27
QXTfront/uni_modules/lime-icon/components/l-icon/icons.uts
Normal file
27
QXTfront/uni_modules/lime-icon/components/l-icon/icons.uts
Normal file
@@ -0,0 +1,27 @@
|
||||
// #ifndef APP-ANDROID || APP-HARMONY
|
||||
import iconList from '../../static/icons.json';
|
||||
export const icons = ref<Map<string, any | null>>((iconList as UTSJSONObject).toMap())
|
||||
// #endif
|
||||
// #ifdef APP-ANDROID || APP-HARMONY
|
||||
export const icons = ref<Map<string, any | null>>(new Map<string, any | null>())
|
||||
|
||||
if (icons.value.size == 0) {
|
||||
uni.getFileSystemManager().readFile({
|
||||
// #ifdef APP-HARMONY
|
||||
filePath: '/uni_modules/lime-icon/static/icons.json',
|
||||
// #endif
|
||||
// #ifndef APP-HARMONY
|
||||
filePath: 'uni_modules/lime-icon/static/icons.json',
|
||||
// #endif
|
||||
encoding: 'utf-8',
|
||||
success: (res) => {
|
||||
const obj = JSON.parseObject(res.data as string)
|
||||
if (obj == null) return
|
||||
icons.value = obj!.toMap();
|
||||
},
|
||||
fail(err) {
|
||||
console.log('[lime-icon getFileSystemManager]', err)
|
||||
}
|
||||
} as ReadFileOptions);
|
||||
}
|
||||
// #endif
|
||||
63
QXTfront/uni_modules/lime-icon/components/l-icon/index.scss
Normal file
63
QXTfront/uni_modules/lime-icon/components/l-icon/index.scss
Normal file
@@ -0,0 +1,63 @@
|
||||
// 公共前缀
|
||||
@import '@/uni_modules/lime-style/index.scss';
|
||||
@import './icon';
|
||||
|
||||
$use-css-var: true;
|
||||
|
||||
$prefix: l !default;
|
||||
$icon: #{$prefix}-icon;
|
||||
|
||||
/* #ifdef APP-NVUE || UNI-APP-X && APP */
|
||||
$icon-size: create-var(icon-size, 16px);
|
||||
$icon-color: create-var(icon-color, $text-color-1);
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef APP-NVUE || UNI-APP-X && APP */
|
||||
$icon-size: create-var(icon-size, 1em);
|
||||
$icon-color: create-var(icon-color, currentColor);
|
||||
:host {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
|
||||
.#{$icon} {
|
||||
/* #ifndef APP-NVUE || UNI-APP-X && APP */
|
||||
font-family: $prefix;
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
/* #endif */
|
||||
|
||||
&--font {
|
||||
font-family: $prefix;
|
||||
text-align: center;
|
||||
// font-size: $icon-size;
|
||||
// color: $icon-color;
|
||||
/* #ifndef APP-NVUE || UNI-APP-X && APP */
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
// -webkit-background-clip: text;
|
||||
// background-clip: text;
|
||||
/* #endif */
|
||||
}
|
||||
&--image {
|
||||
width: $icon-size;
|
||||
height: $icon-size;
|
||||
// background: red;
|
||||
/* #ifndef APP-NVUE || UNI-APP-X && APP */
|
||||
display: block;
|
||||
/* #endif */
|
||||
/* #ifdef WEB */
|
||||
position: relative;
|
||||
// ::deep(img) {
|
||||
// z-index: -1;
|
||||
// }
|
||||
/* #endif */
|
||||
}
|
||||
}
|
||||
189
QXTfront/uni_modules/lime-icon/components/l-icon/l-icon.uvue
Normal file
189
QXTfront/uni_modules/lime-icon/components/l-icon/l-icon.uvue
Normal file
@@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<text :key="iconCode" class="l-icon" :class="[classes, lClass]" :style="[styles, lStyle]" v-if="!isImage && !isIconify && !isSVG">{{iconCode}}</text>
|
||||
<image class="l-icon" :class="[classes, lClass]" :style="[styles, lStyle]" v-else-if="(!isSVG && !hasIconify) && isImage" :src="iconUrl"></image>
|
||||
<l-svg class="l-icon" :class="[classes, lClass]" :style="[styles, lStyle]" :color="color" :src="iconUrl" v-else :web="web" @error="imageError" @load="imageload"></l-svg>
|
||||
</template>
|
||||
<script lang="uts" setup>
|
||||
/**
|
||||
* LimeIcon 图标
|
||||
* @description ICON集
|
||||
* <br> 插件类型：LIconComponentPublicInstance
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=14057
|
||||
* @property {String} name 图标名称
|
||||
* @property {String} color 颜色
|
||||
* @property {String} size 尺寸
|
||||
* @property {String} prefix 字体图标前缀
|
||||
* @property {Boolean} inherit 是否继承颜色
|
||||
* @property {Boolean} web 原生 app(nvue,uvue) 是否使用web渲染
|
||||
* @event {Function} click 点击事件
|
||||
*/
|
||||
|
||||
import { addUnit } from '@/uni_modules/lime-shared/addUnit';
|
||||
import { IconCollection } from './types';
|
||||
import { icons } from './icons'
|
||||
// defineOptions({
|
||||
// name: 'l-icon'
|
||||
// })
|
||||
const name = 'l-icon'
|
||||
const IconifyURL : string = 'https://api.iconify.design/';
|
||||
const $iconsHost : string | null = uni.getStorageSync('$limeIconsHost') as string | null
|
||||
|
||||
const props = defineProps({
|
||||
name: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: true,
|
||||
// validator: (value: string) : boolean => {
|
||||
// // 确保是字符串类型且不为空
|
||||
// return typeof value == 'string' && value.trim().length > 0
|
||||
// }
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
// default: ''
|
||||
},
|
||||
size: {
|
||||
type: [String, Number],
|
||||
},
|
||||
prefix: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
lClass: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 对安卓IOS无效
|
||||
inherit: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
web: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
lStyle: {
|
||||
type: [String, Object, Array],
|
||||
default: ''
|
||||
},
|
||||
})
|
||||
|
||||
// const emits = defineEmits(['click'])
|
||||
const $iconCollection = inject<IconCollection>('$iconCollection', {has: false, icons: new Map<string, any|null>()} as IconCollection)
|
||||
// #ifndef APP-ANDROID
|
||||
const innerName = computed(():string => props.name ?? '')
|
||||
// #endif
|
||||
// #ifdef APP-ANDROID
|
||||
const innerName = computed(():string => props.name)
|
||||
// #endif
|
||||
const collectionIcon = computed(():string|null => {
|
||||
return $iconCollection.icons.get(innerName.value) as string | null
|
||||
})
|
||||
const webviewRef = ref<UniWebViewElement | null>(null)
|
||||
const hasHost = computed<boolean>(() : boolean => innerName.value.indexOf('/') != -1)
|
||||
const isIconify = computed<boolean>(() : boolean => {
|
||||
return !hasHost.value && innerName.value.includes(':')
|
||||
})
|
||||
|
||||
const hasIconify = computed<boolean>(() : boolean => {
|
||||
// #ifdef APP && uniVersion >= 4.82
|
||||
return isIconify.value //&& props.color != null
|
||||
// #endif
|
||||
// #ifndef APP && uniVersion >= 4.82
|
||||
return isIconify.value
|
||||
// #endif
|
||||
})
|
||||
|
||||
const isImage = computed<boolean>(() : boolean => {
|
||||
// #ifdef APP && uniVersion >= 4.82
|
||||
return /\.(jpe?g|png|gif|bmp|webp|tiff|svg?)$/i.test(innerName.value) || /^data:image\/(jpeg|png|gif|bmp|webp|tiff|svg)/.test(innerName.value) || isIconify.value
|
||||
// #endif
|
||||
// #ifndef APP && uniVersion >= 4.82
|
||||
return /\.(jpe?g|png|gif|bmp|webp|tiff?)$/i.test(innerName.value) || /^data:image\/(jpeg|png|gif|bmp|webp|tiff);base64,/.test(innerName.value)
|
||||
// #endif
|
||||
})
|
||||
const isSVG = computed<boolean>(():boolean => {
|
||||
// #ifdef APP && uniVersion >= 4.82
|
||||
// 由于base64 安卓image尺寸不对
|
||||
if(innerName.value.startsWith('data:image/svg+xml')) return true
|
||||
// if(props.color == null) return false
|
||||
return (/\.svg$/i.test(innerName.value) || innerName.value.startsWith('data:image/svg+xml') || innerName.value.startsWith('<svg'))
|
||||
// #endif
|
||||
// #ifndef APP && uniVersion >= 4.82
|
||||
return /\.svg$/i.test(innerName.value) || innerName.value.startsWith('data:image/svg+xml') || innerName.value.startsWith('<svg')
|
||||
// #endif
|
||||
})
|
||||
const classes = computed<Map<string, any>>(() : Map<string, any> => {
|
||||
const cls = new Map<string, any>()
|
||||
cls.set(`${name}--font`, !isImage.value && !isIconify.value && !isSVG.value)
|
||||
cls.set(`${name}--image`, isImage.value || isIconify.value || isSVG.value)
|
||||
cls.set(props.prefix, props.prefix.length > 0)
|
||||
cls.set(props.lClass, props.lClass.length > 0)
|
||||
// #ifndef UNI-APP-X && APP
|
||||
cls.set(`is-inherit`, (isIconify.value) && (props.color && props.color.length > 0 || props.inherit))
|
||||
// #endif
|
||||
return cls
|
||||
})
|
||||
const styles = computed<Map<string, any>>(() : Map<string, any> => {
|
||||
const style = new Map<string, any>();
|
||||
const size = addUnit(props.size)
|
||||
// #ifdef APP
|
||||
if ((props.color != '' && props.color != null) && !isImage.value && !isIconify.value) {
|
||||
style.set('color', props.color!)
|
||||
}
|
||||
// #endif
|
||||
// #ifndef APP
|
||||
if(props.color) {
|
||||
style.set('color', props.color!)
|
||||
}
|
||||
// #endif
|
||||
if (size != null) {
|
||||
if (isImage.value || isIconify.value || isSVG.value) {
|
||||
style.set('height', size)
|
||||
style.set('width', size)
|
||||
} else {
|
||||
style.set('font-size', size)
|
||||
}
|
||||
|
||||
}
|
||||
return style
|
||||
})
|
||||
const iconCode = computed<string>(() : string => {
|
||||
return icons.value.get(innerName.value) as string | null ?? (/[^\x00-\x7F]/.test(innerName.value) ? innerName.value : '')
|
||||
})
|
||||
const isError = ref(false)
|
||||
const cacheMap = new Map<string, string>()
|
||||
const iconUrl = computed(():string => {
|
||||
const hasIconsHost = $iconsHost != null && $iconsHost != ''
|
||||
// const hasIconCollection = $iconCollection.has
|
||||
if(isImage.value && !isIconify.value) {
|
||||
return hasHost.value ? innerName.value : ($iconsHost ?? '') + innerName.value
|
||||
} else if(isIconify.value) {
|
||||
// 防止重绘
|
||||
if(cacheMap.has(innerName.value) && !isError.value) {
|
||||
return cacheMap.get(innerName.value)!
|
||||
}
|
||||
// 如果存在collectionIcon则使用
|
||||
// 如果设置的路径加载失败 就使用网络地址 就使用iconify api
|
||||
const _host = `${hasIconsHost ? $iconsHost : IconifyURL}`
|
||||
const _icon =collectionIcon.value ?? _host + `${innerName.value}.svg`.replace(/:/g, '/')
|
||||
cacheMap.set(innerName.value, _icon)
|
||||
return _icon
|
||||
} else if(isSVG.value) {
|
||||
return (/\.svg$/i.test(innerName.value) && $iconsHost != null && !hasHost.value ? $iconsHost : '') + innerName.value.replace(/'/g, '"')
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
})
|
||||
|
||||
const imageError = () => {
|
||||
isError.value = true
|
||||
}
|
||||
const imageload = () => {
|
||||
isError.value = false
|
||||
}
|
||||
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import './index.scss';
|
||||
</style>
|
||||
151
QXTfront/uni_modules/lime-icon/components/l-icon/l-icon.vue
Normal file
151
QXTfront/uni_modules/lime-icon/components/l-icon/l-icon.vue
Normal file
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<text class="l-icon" :class="[classes]" :style="[styles, lStyle]" v-if="!isImage && !isIconify && !isSVG" @click="$emit('click')">{{iconCode}}</text>
|
||||
<image class="l-icon" :class="[classes]" :style="[styles, lStyle]" v-else-if="(!isSVG && !isIconify) && isImage" :src="iconUrl" @click="$emit('click')"></image>
|
||||
<l-svg class="l-icon" :class="[classes]" :style="[styles, lStyle]" v-else :web="web" :color="color" :src="iconUrl" @error="imageError" @load="imageLoad" @click="$emit('click')"></l-svg>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
// @ts-nocheck
|
||||
/**
|
||||
* LimeIcon 图标
|
||||
* @description ICON集
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=14057
|
||||
* @property {String} name 图标名称
|
||||
* @property {String} color 颜色
|
||||
* @property {String} size 尺寸
|
||||
* @property {String} prefix 字体图标前缀
|
||||
* @property {Boolean} inherit 是否继承颜色
|
||||
* @property {Boolean} web 原生 app(nvue,uvue) 是否使用web渲染
|
||||
* @event {Function} click 点击事件
|
||||
*/
|
||||
// @ts-nocheck
|
||||
import { computed, defineComponent, ref, inject } from '@/uni_modules/lime-shared/vue';
|
||||
import icons from '../../static/icons.json';
|
||||
import { addUnit } from '@/uni_modules/lime-shared/addUnit';
|
||||
|
||||
import { isObject } from '@/uni_modules/lime-shared/isObject';
|
||||
import IconProps from './props';
|
||||
|
||||
// #ifdef VUE2 && MP
|
||||
import { getClassStr } from '@/uni_modules/lime-shared/getClassStr';
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-NVUE
|
||||
import iconSrc from '@/uni_modules/lime-icon/hybrid/html/t3.ttf';
|
||||
var domModule = weex.requireModule('dom');
|
||||
domModule.addRule('fontFace', {
|
||||
'fontFamily': "uniicons",
|
||||
'src': "url('" + iconSrc + "')"
|
||||
});
|
||||
// #endif
|
||||
|
||||
const name = 'l-icon';
|
||||
export default defineComponent({
|
||||
name,
|
||||
externalClasses: ['l-class'],
|
||||
options: {
|
||||
addGlobalClass: true,
|
||||
virtualHost: true,
|
||||
},
|
||||
props: IconProps,
|
||||
emits: ['click'],
|
||||
setup(props, { emit }) {
|
||||
const $iconCollection = inject('$iconCollection', null)
|
||||
const { $limeIconsHost: $iconsHost } = uni as any
|
||||
const IconifyURL = 'https://api.iconify.design/'
|
||||
// const isAPP = uni.getSystemInfoSync().uniPlatform == 'app'
|
||||
const innerName = computed(():string => props.name || '')
|
||||
const hasHost = computed(() => `${innerName.value}`.indexOf('/') !== -1);
|
||||
const isIconify = computed(() => !hasHost.value && `${innerName.value}`.includes(':'))
|
||||
const collectionIcon = computed(() => isObject($iconCollection) && $iconCollection.icons[innerName.value])
|
||||
const isImage = computed<boolean>(() : boolean => {
|
||||
return /\.(jpe?g|png|gif|bmp|webp|tiff?)$/i.test(innerName.value) || /^data:image\/(jpeg|png|gif|bmp|webp|tiff);base64,/.test(innerName.value)
|
||||
})
|
||||
const isSVG = computed<boolean>(() : boolean => {
|
||||
return /\.svg$/i.test(innerName.value) || innerName.value.startsWith('data:image/svg+xml') || innerName.value.startsWith('<svg')
|
||||
})
|
||||
const classes = computed(() => {
|
||||
const { prefix } = props
|
||||
const iconPrefix = prefix || name
|
||||
const iconName = `${iconPrefix}-${innerName.value}`
|
||||
const isFont = !isImage.value && !isIconify.value && !isSVG.value
|
||||
const isImages = isImage.value || isIconify.value || isSVG.value
|
||||
const cls = {
|
||||
[iconPrefix]: !isImages && prefix,
|
||||
[iconName]: !isImages,
|
||||
[`${name}--image`]: isImages,
|
||||
[`${name}--font`]: isFont,
|
||||
// [`is-inherit`]: isIconify.value && (props.color || props.inherit)
|
||||
}
|
||||
|
||||
// #ifdef VUE2 && MP
|
||||
return getClassStr(cls)
|
||||
// #endif
|
||||
|
||||
return cls
|
||||
})
|
||||
const iconCode = computed(() => {
|
||||
const isImages = isImage.value || isIconify.value || isSVG.value
|
||||
return (!isImages && icons[innerName.value]) || (/[^\x00-\x7F]/.test(innerName.value) ? innerName.value : '')
|
||||
})
|
||||
const isError = ref(false)
|
||||
const cacheMap = new Map<string, string>()
|
||||
const iconUrl = computed(() => {
|
||||
const hasIconsHost = $iconsHost != null && $iconsHost != ''
|
||||
// const hasIconCollection = $iconCollectiont != null
|
||||
if (isImage.value) {
|
||||
return hasHost.value ? innerName.value : ($iconsHost || '') + innerName.value
|
||||
} else if (isIconify.value) {
|
||||
// 防止重绘
|
||||
if(cacheMap.has(innerName.value) && !isError.value) {
|
||||
return cacheMap.get(innerName.value)!
|
||||
}
|
||||
// 如果存在collectionIcon则使用
|
||||
// 如果设置的路径加载失败 就使用网络地址 就使用iconify api
|
||||
// !isError.value &&
|
||||
const _host = `${hasIconsHost ? $iconsHost : IconifyURL}`
|
||||
const _icon = collectionIcon.value || _host + `${innerName.value}.svg`.replace(/:/g, '/')
|
||||
cacheMap.set(innerName.value, _icon)
|
||||
return _icon
|
||||
} else if (isSVG.value) {
|
||||
return (/\.svg$/i.test(innerName.value) && hasIconsHost && !hasHost.value ? $iconsHost : '') + innerName.value.replace(/'/g, '"')
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
})
|
||||
const styles = computed(() => {
|
||||
const style : Record<string, any> = {
|
||||
'color': props.color,
|
||||
}
|
||||
if (typeof props.size == 'number' || props.size) {
|
||||
style['font-size'] = addUnit(props.size)
|
||||
}
|
||||
//#ifdef VUE2
|
||||
// VUE2小程序最后一个值莫名的出现undefined
|
||||
style['undefined'] = ''
|
||||
// #endif
|
||||
return style
|
||||
})
|
||||
const imageLoad = () => {
|
||||
isError.value = false
|
||||
}
|
||||
const imageError = () => {
|
||||
isError.value = true
|
||||
}
|
||||
|
||||
return {
|
||||
iconCode,
|
||||
classes,
|
||||
styles,
|
||||
isImage,
|
||||
isSVG,
|
||||
isIconify,
|
||||
iconUrl,
|
||||
imageLoad,
|
||||
imageError
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import './index.scss';
|
||||
</style>
|
||||
31
QXTfront/uni_modules/lime-icon/components/l-icon/props.ts
Normal file
31
QXTfront/uni_modules/lime-icon/components/l-icon/props.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
export const ariaProps = {
|
||||
ariaHidden: Boolean,
|
||||
ariaRole: String,
|
||||
ariaLabel: String,
|
||||
ariaLabelledby: String,
|
||||
ariaDescribedby: String,
|
||||
ariaBusy: Boolean,
|
||||
// lStyle: String
|
||||
}
|
||||
|
||||
export default {
|
||||
...ariaProps,
|
||||
lClass: String,
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
color: String,
|
||||
size: [String, Number],
|
||||
prefix: String,
|
||||
// type: String,
|
||||
inherit: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
web: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
lStyle:[String, Object, Array],
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
export type IconCollection = {
|
||||
has: boolean,
|
||||
icons: Map<string, any|null>
|
||||
}
|
||||
@@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<view class="demo-block">
|
||||
<text class="demo-block__title-text ultra">Icon 图标</text>
|
||||
<text class="demo-block__desc-text">iconify图标集，超过15,0000个开源矢量图标</text>
|
||||
<view class="demo-block__body">
|
||||
<view class="demo-block card">
|
||||
<text class="demo-block__title-text large">基础使用</text>
|
||||
<view class="demo-block__body">
|
||||
<view class="grid">
|
||||
<view class="grid-item">
|
||||
<l-icon class="dome-icon" name="earth" size="30px"></l-icon>
|
||||
</view>
|
||||
<view class="grid-item">
|
||||
<l-icon class="dome-icon" name="animation-1" size="30px"></l-icon>
|
||||
</view>
|
||||
<view class="grid-item">
|
||||
<l-icon class="dome-icon" name="object-storage" size="30px"></l-icon>
|
||||
</view>
|
||||
<view class="grid-item">
|
||||
<l-icon class="dome-icon" name="animation" size="30px"></l-icon>
|
||||
</view>
|
||||
<view class="grid-item">
|
||||
<l-icon class="dome-icon" name="brightness-1" size="30px"></l-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="demo-block card">
|
||||
<text class="demo-block__title-text large">使用图片</text>
|
||||
<view class="demo-block__body">
|
||||
<view class="grid">
|
||||
<view class="grid-item" v-for="item in imageList" :key="item">
|
||||
<l-icon class="dome-icon" :key="item" :name="item" size="30px"></l-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="demo-block card">
|
||||
<text class="demo-block__title-text large">iconify</text>
|
||||
<view class="demo-block__body">
|
||||
<view class="grid">
|
||||
<view class="grid-item">
|
||||
<l-icon class="dome-icon" size="30px" name="uil:12-plus" color="blue"></l-icon>
|
||||
</view>
|
||||
<view class="grid-item">
|
||||
<l-icon class="dome-icon" size="30px" name="icon-park-outline:abdominal"></l-icon>
|
||||
</view>
|
||||
<view class="grid-item">
|
||||
<l-icon class="dome-icon" size="30px" name="icon-park-outline:acoustic"></l-icon>
|
||||
</view>
|
||||
<view class="grid-item">
|
||||
<l-icon class="dome-icon" size="30px" name="ph:tabs-bold"></l-icon>
|
||||
</view>
|
||||
<view class="grid-item">
|
||||
<l-icon class="dome-icon" size="30px" name="ri:aliens-fill"></l-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="demo-block card">
|
||||
<text class="demo-block__title-text large">自定义图标</text>
|
||||
<view class="demo-block__body">
|
||||
<view class="grid">
|
||||
<view class="grid-item" style="--l-icon-color: rgba(255,25,0,1)">
|
||||
<l-icon size="30px" prefix="keyicon" :name="`\uE6EF`"></l-icon>
|
||||
</view>
|
||||
<view class="grid-item">
|
||||
<l-icon class="dome-icon" size="30px" :name="`\uE6EF`"></l-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="demo-block card">
|
||||
<text class="demo-block__title-text large">内置图标</text>
|
||||
<view class="demo-block__body">
|
||||
<view style="height: 800rpx;">
|
||||
<list-view style="flex:1; height: 800rpx;" v-if="iconsData.length > 0">
|
||||
<list-item v-for="(group) in iconsData" :type="group">
|
||||
<view class="grid">
|
||||
<view class="grid-item" v-for="item in group" :key="item">
|
||||
<l-icon class="dome-icon" :key="item" :name="item" @click="onClick(item)" size="30px"></l-icon>
|
||||
</view>
|
||||
</view>
|
||||
</list-item>
|
||||
</list-view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script lang="uts">
|
||||
// @ts-nocheck
|
||||
// #ifndef UNI-APP-X && APP
|
||||
// import iconList from '../../static/icons.json';
|
||||
// #endif
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
page: 0,
|
||||
pageSize: 10,
|
||||
iconsData: [] as string[][],
|
||||
icons: [] as string[][],
|
||||
customList: [
|
||||
'add-circle',
|
||||
// 'image-fill',
|
||||
// 'image-fail-fill',
|
||||
// 'close-circle-fill',
|
||||
// 'close',
|
||||
],
|
||||
imageList: [
|
||||
'https://fastly.jsdelivr.net/npm/@vant/assets/icon-demo.png',
|
||||
"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.999 2.999h12v-1h-12v1zM3.377 10.23l4.11-4.035v8.649h1.01V6.19l4.18 4.077.715-.7-5.05-4.926a.5.5 0 0 0-.7.001L2.66 9.532l.716.697z' fill='%23000' fill-opacity='.9'/%3E%3C/svg%3E",
|
||||
"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjk3OTc4MjQzMDMyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE3NzgiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTUxOC40IDE0OS4yOTA2NjdjMTEyLjU5NzMzMy04MC43ODkzMzMgMjY3Ljg4MjY2Ny02OS4zOTczMzMgMzY4LjEyOCAzMiA1My44NjY2NjcgNTQuNTI4IDg0LjEzODY2NyAxMjguODUzMzMzIDg0LjEzODY2NyAyMDYuMzc4NjY2IDAgNzcuNTI1MzMzLTMwLjI5MzMzMyAxNTEuODUwNjY3LTg0LjA5NiAyMDYuMzM2bC0yOTQuNDIxMzM0IDI5OS41MmExMTAuOTc2IDExMC45NzYgMCAwIDEtODAuMjEzMzMzIDM0LjQ3NDY2NyAxMTAuNzIgMTEwLjcyIDAgMCAxLTc5LjkxNDY2Ny0zNC4xNzZMMTM3LjMyMjY2NyA1OTMuNzcwNjY3QzgzLjU2MjY2NyA1MzkuMjQyNjY3IDUzLjMzMzMzMyA0NjQuOTgxMzMzIDUzLjMzMzMzMyAzODcuNTQxMzMzczMwLjIyOTMzMy0xNTEuNzIyNjY3IDg0LjAxMDY2Ny0yMDYuMjcyYzEwMC4yMjQtMTAxLjM3NiAyNTUuNTMwNjY3LTExMi43NjggMzY4LjEyOC0zMS45Nzg2NjZsNi40NDI2NjcgNC43Nzg2NjYgNi40ODUzMzMtNC43Nzg2NjZ6IG0zMjIuNjAyNjY3IDc2Ljk3MDY2NmMtODQuNjI5MzMzLTg1LjU4OTMzMy0yMTkuMTU3MzMzLTg4LjY0LTMwNy4zMjgtNi45NTQ2NjZsLTIxLjc2IDIwLjEzODY2Ni0yMS43MTczMzQtMjAuMTM4NjY2Yy04OC4xOTItODEuNjg1MzMzLTIyMi43Mi03OC42MzQ2NjctMzA3LjMwNjY2NiA2LjkzMzMzMy00MS45MiA0Mi40OTYtNjUuNTU3MzMzIDEwMC42MDgtNjUuNTU3MzM0IDE2MS4yOCAwIDYwLjY5MzMzMyAyMy42MzczMzMgMTE4LjgwNTMzMyA2NS42IDE2MS4zNDRsMjk1LjA0IDMwMC40MTZjOS4wNDUzMzMgOS40NTA2NjcgMjEuMjY5MzMzIDE0LjcyIDMzLjk2MjY2NyAxNC43MiAxMi42OTMzMzMgMCAyNC45MTczMzMtNS4yNjkzMzMgMzQuMjYxMzMzLTE1LjA0TDg0MC45NiA1NDkuMDc3MzMzYzQyLjAwNTMzMy00Mi40OTYgNjUuNjg1MzMzLTEwMC42NTA2NjcgNjUuNjg1MzMzLTE2MS40MDggMC02MC43MzYtMjMuNjgtMTE4LjkxMi02NS42NjQtMTYxLjQwOHoiIGZpbGw9IiMxMTExMTEiIHAtaWQ9IjE3NzkiPjwvcGF0aD48L3N2Zz4="
|
||||
],
|
||||
color: 'blue'
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
$card-bg-color: var(--doc-card-bg-color, white);
|
||||
// $page-bg-color: var(--doc-page-bg-color, #f5f5f5);
|
||||
$title-color: var(--doc-title-color, #000000E6);
|
||||
$summary-color: var(--doc-summary-color, #00000099);
|
||||
@font-face {
|
||||
font-family: keyicon;
|
||||
src: url('https://at.alicdn.com/t/c/font_4741157_ul7wcp52yys.ttf');
|
||||
}
|
||||
.keyicon {
|
||||
font-family: keyicon;
|
||||
}
|
||||
.alt {
|
||||
// background-color: aqua;
|
||||
color: blue
|
||||
}
|
||||
.dome-icon {
|
||||
color: $title-color;
|
||||
}
|
||||
.grid {
|
||||
display: flex;
|
||||
// flex: 1;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
// flex-direction: column;
|
||||
flex-basis: 20%;
|
||||
align-items: center;
|
||||
padding-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
|
||||
&-text {
|
||||
padding-top: 10rpx;
|
||||
font-size: 22rpx;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.demo-block {
|
||||
margin: 32px 10px 0;
|
||||
overflow: visible;
|
||||
|
||||
&.card {
|
||||
padding: 20rpx 20rpx;
|
||||
background-color: $card-bg-color;
|
||||
transition-property: background-color;
|
||||
// transition-duration: 300ms;
|
||||
margin-bottom: 20rpx !important;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
margin-top: 8px;
|
||||
|
||||
&-text {
|
||||
color: $summary-color;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
|
||||
&.large {
|
||||
color: $title-color;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
&.ultra {
|
||||
color: $title-color;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__desc-text {
|
||||
color: $summary-color;
|
||||
margin: 8px 16px 0 0;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
&__body {
|
||||
margin: 16px 0;
|
||||
overflow: visible;
|
||||
|
||||
.demo-block {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,254 @@
|
||||
<template>
|
||||
<view class="demo-block">
|
||||
<text class="demo-block__title-text ultra">Icon 图标</text>
|
||||
<text class="demo-block__desc-text">iconify图标集，超过15,0000个开源矢量图标</text>
|
||||
<view class="demo-block__body">
|
||||
<view class="demo-block card">
|
||||
<text class="demo-block__title-text large">基础使用</text>
|
||||
<view class="demo-block__body">
|
||||
<view class="grid">
|
||||
<view class="grid-item">
|
||||
<l-icon name="earth" size="30px"></l-icon>
|
||||
</view>
|
||||
<view class="grid-item">
|
||||
<l-icon name="animation-1" size="30px"></l-icon>
|
||||
</view>
|
||||
<view class="grid-item">
|
||||
<l-icon name="object-storage" size="30px"></l-icon>
|
||||
</view>
|
||||
<view class="grid-item">
|
||||
<l-icon name="animation" size="30px"></l-icon>
|
||||
</view>
|
||||
<view class="grid-item">
|
||||
<l-icon name="brightness-1" size="30px"></l-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="demo-block card">
|
||||
<text class="demo-block__title-text large">使用图片</text>
|
||||
<view class="demo-block__body">
|
||||
<view class="grid">
|
||||
<view class="grid-item" v-for="item in imageList" :key="item">
|
||||
<l-icon :key="item" :name="item" size="30px"></l-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="demo-block card">
|
||||
<text class="demo-block__title-text large">iconify</text>
|
||||
<view class="demo-block__body">
|
||||
<view class="grid">
|
||||
<view class="grid-item">
|
||||
<l-icon size="30px" name="uil:12-plus" color="blue"></l-icon>
|
||||
</view>
|
||||
<view class="grid-item">
|
||||
<l-icon size="30px" name="icon-park-outline:abdominal"></l-icon>
|
||||
</view>
|
||||
<view class="grid-item">
|
||||
<l-icon size="30px" name="icon-park-outline:acoustic"></l-icon>
|
||||
</view>
|
||||
<view class="grid-item">
|
||||
<l-icon size="30px" name="ph:tabs-bold"></l-icon>
|
||||
</view>
|
||||
<view class="grid-item">
|
||||
<l-icon size="30px" name="ri:aliens-fill"></l-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="demo-block card">
|
||||
<text class="demo-block__title-text large">自定义图标</text>
|
||||
<view class="demo-block__body">
|
||||
<view class="grid">
|
||||
<view class="grid-item">
|
||||
<l-icon size="30px" prefix="keyicon" :name="`\uE6EF`"></l-icon>
|
||||
</view>
|
||||
<view class="grid-item">
|
||||
<l-icon size="30px" :name="`\uE6EF`"></l-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="demo-block card">
|
||||
<text class="demo-block__title-text large">内置图标</text>
|
||||
<view class="demo-block__body">
|
||||
<view style="height: 800rpx;">
|
||||
<list-view style="flex:1; height: 800rpx;" v-if="iconsData.length > 0">
|
||||
<list-item v-for="(group) in iconsData" :type="group">
|
||||
<view class="grid">
|
||||
<view class="grid-item" v-for="item in group" :key="item">
|
||||
<l-icon :key="item" :name="item" @click="onClick(item)" size="30px"></l-icon>
|
||||
</view>
|
||||
</view>
|
||||
</list-item>
|
||||
</list-view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
page: 0,
|
||||
pageSize: 10,
|
||||
iconsData: [],
|
||||
icons: [],
|
||||
customList: [
|
||||
'add-circle',
|
||||
// 'image-fill',
|
||||
// 'image-fail-fill',
|
||||
// 'close-circle-fill',
|
||||
// 'close',
|
||||
],
|
||||
imageList: [
|
||||
'https://fastly.jsdelivr.net/npm/@vant/assets/icon-demo.png',
|
||||
"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.999 2.999h12v-1h-12v1zM3.377 10.23l4.11-4.035v8.649h1.01V6.19l4.18 4.077.715-.7-5.05-4.926a.5.5 0 0 0-.7.001L2.66 9.532l.716.697z' fill='%23000' fill-opacity='.9'/%3E%3C/svg%3E",
|
||||
"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjk3OTc4MjQzMDMyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE3NzgiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTUxOC40IDE0OS4yOTA2NjdjMTEyLjU5NzMzMy04MC43ODkzMzMgMjY3Ljg4MjY2Ny02OS4zOTczMzMgMzY4LjEyOCAzMiA1My44NjY2NjcgNTQuNTI4IDg0LjEzODY2NyAxMjguODUzMzMzIDg0LjEzODY2NyAyMDYuMzc4NjY2IDAgNzcuNTI1MzMzLTMwLjI5MzMzMyAxNTEuODUwNjY3LTg0LjA5NiAyMDYuMzM2bC0yOTQuNDIxMzM0IDI5OS41MmExMTAuOTc2IDExMC45NzYgMCAwIDEtODAuMjEzMzMzIDM0LjQ3NDY2NyAxMTAuNzIgMTEwLjcyIDAgMCAxLTc5LjkxNDY2Ny0zNC4xNzZMMTM3LjMyMjY2NyA1OTMuNzcwNjY3QzgzLjU2MjY2NyA1MzkuMjQyNjY3IDUzLjMzMzMzMyA0NjQuOTgxMzMzIDUzLjMzMzMzMyAzODcuNTQxMzMzczMwLjIyOTMzMy0xNTEuNzIyNjY3IDg0LjAxMDY2Ny0yMDYuMjcyYzEwMC4yMjQtMTAxLjM3NiAyNTUuNTMwNjY3LTExMi43NjggMzY4LjEyOC0zMS45Nzg2NjZsNi40NDI2NjcgNC43Nzg2NjYgNi40ODUzMzMtNC43Nzg2NjZ6IG0zMjIuNjAyNjY3IDc2Ljk3MDY2NmMtODQuNjI5MzMzLTg1LjU4OTMzMy0yMTkuMTU3MzMzLTg4LjY0LTMwNy4zMjgtNi45NTQ2NjZsLTIxLjc2IDIwLjEzODY2Ni0yMS43MTczMzQtMjAuMTM4NjY2Yy04OC4xOTItODEuNjg1MzMzLTIyMi43Mi03OC42MzQ2NjctMzA3LjMwNjY2NiA2LjkzMzMzMy00MS45MiA0Mi40OTYtNjUuNTU3MzMzIDEwMC42MDgtNjUuNTU3MzM0IDE2MS4yOCAwIDYwLjY5MzMzMyAyMy42MzczMzMgMTE4LjgwNTMzMyA2NS42IDE2MS4zNDRsMjk1LjA0IDMwMC40MTZjOS4wNDUzMzMgOS40NTA2NjcgMjEuMjY5MzMzIDE0LjcyIDMzLjk2MjY2NyAxNC43MiAxMi42OTMzMzMgMCAyNC45MTczMzMtNS4yNjkzMzMgMzQuMjYxMzMzLTE1LjA0TDg0MC45NiA1NDkuMDc3MzMzYzQyLjAwNTMzMy00Mi40OTYgNjUuNjg1MzMzLTEwMC42NTA2NjcgNjUuNjg1MzMzLTE2MS40MDggMC02MC43MzYtMjMuNjgtMTE4LjkxMi02NS42NjQtMTYxLjQwOHoiIGZpbGw9IiMxMTExMTEiIHAtaWQ9IjE3NzkiPjwvcGF0aD48L3N2Zz4="
|
||||
],
|
||||
color: 'blue'
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// #ifdef UNI-APP-X && APP
|
||||
// const manager = uni.getFileSystemManager();
|
||||
// manager.readFile({
|
||||
// filePath: '/uni_modules/lime-icon/static/icons.json',
|
||||
// encoding: 'utf-8',
|
||||
// success: (res) => {
|
||||
// const obj = JSON.parse(res.data as string)
|
||||
// if(obj == null) return
|
||||
|
||||
// }
|
||||
// } as ReadFileOptions);
|
||||
// #endif
|
||||
|
||||
|
||||
// let group : string[] = []
|
||||
// let groups : string[][] = []
|
||||
// let index : number = 0;
|
||||
|
||||
// const _icons = UTSJSONObject.assign({}, icons)
|
||||
// _icons.toMap().forEach((_, key) => {
|
||||
// if (index % 5 == 0) {
|
||||
// group = []
|
||||
// group.push(key)
|
||||
// } else if (index % 5 == 2) {
|
||||
// group.push(key)
|
||||
// groups.push(group)
|
||||
// } else {
|
||||
// group.push(key)
|
||||
// }
|
||||
// // this.icons.push(key)
|
||||
// index++
|
||||
// })
|
||||
|
||||
// this.icons = groups
|
||||
// this.loadData()
|
||||
// console.log(`this.icons:::`, index, this.icons)
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@font-face {
|
||||
font-family: keyicon;
|
||||
src: url('https://at.alicdn.com/t/c/font_4741157_ul7wcp52yys.ttf');
|
||||
}
|
||||
.keyicon {
|
||||
font-family: keyicon;
|
||||
}
|
||||
.alt {
|
||||
// background-color: aqua;
|
||||
color: blue
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: flex;
|
||||
// flex: 1;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
// flex-direction: column;
|
||||
flex-basis: 20%;
|
||||
align-items: center;
|
||||
padding-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
|
||||
&-text {
|
||||
padding-top: 10rpx;
|
||||
font-size: 22rpx;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.demo-block {
|
||||
margin: 32px 10px 0;
|
||||
overflow: visible;
|
||||
|
||||
&.card {
|
||||
padding: 20rpx 20rpx;
|
||||
background-color: white;
|
||||
margin-bottom: 20rpx !important;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
margin-top: 8px;
|
||||
|
||||
&-text {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
|
||||
&.large {
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
&.ultra {
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__desc-text {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
margin: 8px 16px 0 0;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
&__body {
|
||||
margin: 16px 0;
|
||||
overflow: visible;
|
||||
|
||||
.demo-block {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user