93 lines
2.3 KiB
HTML
93 lines
2.3 KiB
HTML
{extend name="base"/}
|
|
|
|
{block name="resources"}
|
|
<style>
|
|
html,body {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #fff;
|
|
}
|
|
.icon-style-wrap {
|
|
padding: 15px;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.icon-style-wrap .title {
|
|
margin-bottom: 10px;
|
|
}
|
|
.icon-style-wrap .icon-list {
|
|
flex: 1;
|
|
height: 0;
|
|
display: flex;
|
|
overflow-y: scroll;
|
|
flex-wrap: wrap;
|
|
}
|
|
.icon-style-wrap .icon-list::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.icon-style-wrap .icon-list .icon-block {
|
|
width: 56px;
|
|
height: 56px;
|
|
font-size: 60px;
|
|
border: 1px dashed #eee;
|
|
margin: 0 5px 5px 0;
|
|
cursor: pointer;
|
|
}
|
|
.icon-style-wrap .icon-list .icon-block:nth-child(5n+5) {
|
|
margin-right: 0;
|
|
}
|
|
.icon-style-wrap .icon-list .icon-block:hover {
|
|
border-color: var(--base-color);
|
|
}
|
|
.icon-style-wrap .icon-list .custom {
|
|
font-size: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
</style>
|
|
{/block}
|
|
|
|
{block name="body"}
|
|
<div class="icon-style-wrap" id="app">
|
|
<div class="title">图标风格</div>
|
|
<div class="icon-list">
|
|
<div class="icon-block" v-for="(item, index) in styleList" :key="index" @click="selectStyle(index)">
|
|
<iconfont icon="{$icon}" :value="item"></iconfont>
|
|
</div>
|
|
<div class="icon-block custom" @click="custom">
|
|
<p>自定义</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/block}
|
|
|
|
{block name="script"}
|
|
<script src="STATIC_JS/vue.js"></script>
|
|
{include file="diy/iconfont_component"/}
|
|
<script>
|
|
vue = new Vue({
|
|
el: "#app",
|
|
data: {
|
|
styleList: {:json_encode($icon_style)}
|
|
},
|
|
methods: {
|
|
selectStyle(index){
|
|
window.parent.postMessage({
|
|
event: 'selectIconStyle',
|
|
data: this.styleList[index],
|
|
}, location.origin);
|
|
},
|
|
custom(){
|
|
window.parent.postMessage({
|
|
event: 'selectIconStyle',
|
|
data: null,
|
|
}, location.origin);
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
{/block} |