画布icon修复

This commit is contained in:
Aaron
2021-08-23 17:59:41 +08:00
parent fe924dfd00
commit aeba14d544
13 changed files with 2472 additions and 44 deletions

View File

@ -0,0 +1,539 @@
/* Logo 字体 */
@font-face {
font-family: "iconfont logo";
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
}
.logo {
font-family: "iconfont logo";
font-size: 160px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* tabs */
.nav-tabs {
position: relative;
}
.nav-tabs .nav-more {
position: absolute;
right: 0;
bottom: 0;
height: 42px;
line-height: 42px;
color: #666;
}
#tabs {
border-bottom: 1px solid #eee;
}
#tabs li {
cursor: pointer;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 16px;
border-bottom: 2px solid transparent;
position: relative;
z-index: 1;
margin-bottom: -1px;
color: #666;
}
#tabs .active {
border-bottom-color: #f00;
color: #222;
}
.tab-container .content {
display: none;
}
/* 页面布局 */
.main {
padding: 30px 100px;
width: 960px;
margin: 0 auto;
}
.main .logo {
color: #333;
text-align: left;
margin-bottom: 30px;
line-height: 1;
height: 110px;
margin-top: -50px;
overflow: hidden;
*zoom: 1;
}
.main .logo a {
font-size: 160px;
color: #333;
}
.helps {
margin-top: 40px;
}
.helps pre {
padding: 20px;
margin: 10px 0;
border: solid 1px #e7e1cd;
background-color: #fffdef;
overflow: auto;
}
.icon_lists {
width: 100% !important;
overflow: hidden;
*zoom: 1;
}
.icon_lists li {
width: 100px;
margin-bottom: 10px;
margin-right: 20px;
text-align: center;
list-style: none !important;
cursor: default;
}
.icon_lists li .code-name {
line-height: 1.2;
}
.icon_lists .icon {
display: block;
height: 100px;
line-height: 100px;
font-size: 42px;
margin: 10px auto;
color: #333;
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
-moz-transition: font-size 0.25s linear, width 0.25s linear;
transition: font-size 0.25s linear, width 0.25s linear;
}
.icon_lists .icon:hover {
font-size: 100px;
}
.icon_lists .svg-icon {
/* 通过设置 font-size 来改变图标大小 */
width: 1em;
/* 图标和文字相邻时,垂直对齐 */
vertical-align: -0.15em;
/* 通过设置 color 来改变 SVG 的颜色/fill */
fill: currentColor;
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
normalize.css 中也包含这行 */
overflow: hidden;
}
.icon_lists li .name,
.icon_lists li .code-name {
color: #666;
}
/* markdown 样式 */
.markdown {
color: #666;
font-size: 14px;
line-height: 1.8;
}
.highlight {
line-height: 1.5;
}
.markdown img {
vertical-align: middle;
max-width: 100%;
}
.markdown h1 {
color: #404040;
font-weight: 500;
line-height: 40px;
margin-bottom: 24px;
}
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
color: #404040;
margin: 1.6em 0 0.6em 0;
font-weight: 500;
clear: both;
}
.markdown h1 {
font-size: 28px;
}
.markdown h2 {
font-size: 22px;
}
.markdown h3 {
font-size: 16px;
}
.markdown h4 {
font-size: 14px;
}
.markdown h5 {
font-size: 12px;
}
.markdown h6 {
font-size: 12px;
}
.markdown hr {
height: 1px;
border: 0;
background: #e9e9e9;
margin: 16px 0;
clear: both;
}
.markdown p {
margin: 1em 0;
}
.markdown>p,
.markdown>blockquote,
.markdown>.highlight,
.markdown>ol,
.markdown>ul {
width: 80%;
}
.markdown ul>li {
list-style: circle;
}
.markdown>ul li,
.markdown blockquote ul>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown>ul li p,
.markdown>ol li p {
margin: 0.6em 0;
}
.markdown ol>li {
list-style: decimal;
}
.markdown>ol li,
.markdown blockquote ol>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown code {
margin: 0 3px;
padding: 0 5px;
background: #eee;
border-radius: 3px;
}
.markdown strong,
.markdown b {
font-weight: 600;
}
.markdown>table {
border-collapse: collapse;
border-spacing: 0px;
empty-cells: show;
border: 1px solid #e9e9e9;
width: 95%;
margin-bottom: 24px;
}
.markdown>table th {
white-space: nowrap;
color: #333;
font-weight: 600;
}
.markdown>table th,
.markdown>table td {
border: 1px solid #e9e9e9;
padding: 8px 16px;
text-align: left;
}
.markdown>table th {
background: #F7F7F7;
}
.markdown blockquote {
font-size: 90%;
color: #999;
border-left: 4px solid #e9e9e9;
padding-left: 0.8em;
margin: 1em 0;
}
.markdown blockquote p {
margin: 0;
}
.markdown .anchor {
opacity: 0;
transition: opacity 0.3s ease;
margin-left: 8px;
}
.markdown .waiting {
color: #ccc;
}
.markdown h1:hover .anchor,
.markdown h2:hover .anchor,
.markdown h3:hover .anchor,
.markdown h4:hover .anchor,
.markdown h5:hover .anchor,
.markdown h6:hover .anchor {
opacity: 1;
display: inline-block;
}
.markdown>br,
.markdown>p>br {
clear: both;
}
.hljs {
display: block;
background: white;
padding: 0.5em;
color: #333333;
overflow-x: auto;
}
.hljs-comment,
.hljs-meta {
color: #969896;
}
.hljs-string,
.hljs-variable,
.hljs-template-variable,
.hljs-strong,
.hljs-emphasis,
.hljs-quote {
color: #df5000;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-type {
color: #a71d5d;
}
.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-attribute {
color: #0086b3;
}
.hljs-section,
.hljs-name {
color: #63a35c;
}
.hljs-tag {
color: #333333;
}
.hljs-title,
.hljs-attr,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #795da3;
}
.hljs-addition {
color: #55a532;
background-color: #eaffea;
}
.hljs-deletion {
color: #bd2c00;
background-color: #ffecec;
}
.hljs-link {
text-decoration: underline;
}
/* 代码高亮 */
/* PrismJS 1.15.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre)>code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
:not(pre)>code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.function,
.token.class-name {
color: #DD4A68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

Binary file not shown.

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,324 @@
{
"id": "2224733",
"name": "cereshop",
"font_family": "iconfont",
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "16963297",
"name": "close",
"font_class": "close",
"unicode": "e602",
"unicode_decimal": 58882
},
{
"icon_id": "1630982",
"name": "替换图片",
"font_class": "tihuantupian",
"unicode": "e66c",
"unicode_decimal": 58988
},
{
"icon_id": "1472518",
"name": "选择",
"font_class": "xuanze",
"unicode": "e62d",
"unicode_decimal": 58925
},
{
"icon_id": "2570139",
"name": "选择",
"font_class": "xuanze-danxuan",
"unicode": "e661",
"unicode_decimal": 58977
},
{
"icon_id": "16391281",
"name": "选择",
"font_class": "xuanze1",
"unicode": "e618",
"unicode_decimal": 58904
},
{
"icon_id": "15076931",
"name": "警告",
"font_class": "jinggao",
"unicode": "e608",
"unicode_decimal": 58888
},
{
"icon_id": "14404139",
"name": "删 除",
"font_class": "shanchu1",
"unicode": "e651",
"unicode_decimal": 58961
},
{
"icon_id": "8649511",
"name": "查看",
"font_class": "chakan",
"unicode": "e622",
"unicode_decimal": 58914
},
{
"icon_id": "584016",
"name": "问号",
"font_class": "iconfontquestion",
"unicode": "e60a",
"unicode_decimal": 58890
},
{
"icon_id": "1068808",
"name": "优惠券",
"font_class": "weibiaoti2fuzhi02",
"unicode": "e61f",
"unicode_decimal": 58911
},
{
"icon_id": "1069397",
"name": "优惠券",
"font_class": "youhuiquan",
"unicode": "e645",
"unicode_decimal": 58949
},
{
"icon_id": "5727587",
"name": "优惠券",
"font_class": "youhuiquan1",
"unicode": "e66d",
"unicode_decimal": 58989
},
{
"icon_id": "7550240",
"name": "优惠券",
"font_class": "youhuiquan2",
"unicode": "e692",
"unicode_decimal": 59026
},
{
"icon_id": "8361845",
"name": "优惠券",
"font_class": "youhuiquan3",
"unicode": "e6cf",
"unicode_decimal": 59087
},
{
"icon_id": "11125631",
"name": "优惠券",
"font_class": "9",
"unicode": "e624",
"unicode_decimal": 58916
},
{
"icon_id": "12476913",
"name": "优惠券",
"font_class": "youhuiquan4",
"unicode": "e60b",
"unicode_decimal": 58891
},
{
"icon_id": "12504404",
"name": "优惠券",
"font_class": "youhuiquan5",
"unicode": "e625",
"unicode_decimal": 58917
},
{
"icon_id": "14384498",
"name": "方块",
"font_class": "fangkuai",
"unicode": "e73f",
"unicode_decimal": 59199
},
{
"icon_id": "5045075",
"name": "手机",
"font_class": "phone",
"unicode": "e604",
"unicode_decimal": 58884
},
{
"icon_id": "12353088",
"name": "电脑 (1)备份",
"font_class": "pc",
"unicode": "e601",
"unicode_decimal": 58881
},
{
"icon_id": "12534140",
"name": "h5",
"font_class": "h5",
"unicode": "e713",
"unicode_decimal": 59155
},
{
"icon_id": "17711613",
"name": "小程序",
"font_class": "xiaochengxu",
"unicode": "e81e",
"unicode_decimal": 59422
},
{
"icon_id": "690725",
"name": "删除",
"font_class": "shanchu",
"unicode": "e633",
"unicode_decimal": 58931
},
{
"icon_id": "1172721",
"name": "图片",
"font_class": "tupian",
"unicode": "e64a",
"unicode_decimal": 58954
},
{
"icon_id": "6049692",
"name": "图片",
"font_class": "tupian1",
"unicode": "e61e",
"unicode_decimal": 58910
},
{
"icon_id": "15994506",
"name": "拖动位置",
"font_class": "tuodongweizhi",
"unicode": "e703",
"unicode_decimal": 59139
},
{
"icon_id": "12609224",
"name": "add",
"font_class": "add2",
"unicode": "e603",
"unicode_decimal": 58883
},
{
"icon_id": "2404491",
"name": "文本",
"font_class": "wenben",
"unicode": "e649",
"unicode_decimal": 58953
},
{
"icon_id": "9567573",
"name": "A",
"font_class": "A",
"unicode": "e600",
"unicode_decimal": 58880
},
{
"icon_id": "10885439",
"name": "文本",
"font_class": "wenben1",
"unicode": "e8c2",
"unicode_decimal": 59586
},
{
"icon_id": "6337463",
"name": "右对齐",
"font_class": "youduiqi",
"unicode": "ec82",
"unicode_decimal": 60546
},
{
"icon_id": "6337473",
"name": "左对齐",
"font_class": "zuoduiqi",
"unicode": "ec86",
"unicode_decimal": 60550
},
{
"icon_id": "11976280",
"name": "居中",
"font_class": "juzhong",
"unicode": "e619",
"unicode_decimal": 58905
},
{
"icon_id": "15838424",
"name": "add",
"font_class": "add1",
"unicode": "e664",
"unicode_decimal": 58980
},
{
"icon_id": "695192",
"name": "搜索",
"font_class": "sousuo",
"unicode": "e63f",
"unicode_decimal": 58943
},
{
"icon_id": "608218",
"name": "导航",
"font_class": "arrow-up",
"unicode": "e660",
"unicode_decimal": 58976
},
{
"icon_id": "608288",
"name": "加上",
"font_class": "add",
"unicode": "e685",
"unicode_decimal": 59013
},
{
"icon_id": "608290",
"name": "检查",
"font_class": "success",
"unicode": "e687",
"unicode_decimal": 59015
},
{
"icon_id": "608293",
"name": "减去",
"font_class": "subtract",
"unicode": "e68a",
"unicode_decimal": 59018
},
{
"icon_id": "608317",
"name": "箭头",
"font_class": "arrow-down",
"unicode": "e695",
"unicode_decimal": 59029
},
{
"icon_id": "608352",
"name": "箭头",
"font_class": "arrow-right",
"unicode": "e6ab",
"unicode_decimal": 59051
},
{
"icon_id": "609192",
"name": "箭头",
"font_class": "arrow-left",
"unicode": "e6bc",
"unicode_decimal": 59068
},
{
"icon_id": "609891",
"name": "列表",
"font_class": "phone-menu",
"unicode": "e771",
"unicode_decimal": 59249
},
{
"icon_id": "380396",
"name": "user",
"font_class": "user",
"unicode": "e67d",
"unicode_decimal": 59005
},
{
"icon_id": "10554762",
"name": "Shopping cart, finance, business",
"font_class": "shoppingCart",
"unicode": "e623",
"unicode_decimal": 58915
}
]
}

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -28,6 +28,8 @@ import 'quill/dist/quill.bubble.css'
import VueHighlightJS from 'vue-highlightjs'
import 'highlight.js/styles/atom-one-dark.css'
import '@/assets/font_icon/iconfont.css'
import App from './App'
import store from './store'
import router from './router/routers'

View File

@ -15,8 +15,8 @@
</i>
</el-upload>
<div class="overlay" v-if="imageUrl">
<i class="iconfont icon-chakan" @click="showImage"></i>
<i class="iconfont icon-shanchu1" @click="delImage"></i>
<!-- <i class="iconfont icon-chakan" @click="showImage"></i>
<i class="iconfont icon-shanchu1" @click="delImage"></i> -->
</div>
</div>
<el-dialog title="图片展示" :visible.sync="dialogVisible">
@ -26,51 +26,48 @@
</template>
<script>
// import api from '@/api'
// import {listSearchMixin} from '@/config/mixin'
export default {
name: 'tool-single-img',
// mixins: [listSearchMixin],
data () {
return {
dialogVisible: false,
dialogImageUrl: '',
fileUploadURL: ''
}
export default {
name: 'tool-single-img',
data () {
return {
dialogVisible: false,
dialogImageUrl: '',
fileUploadURL: ''
}
},
props: {
imageUrl: {
type: String,
default: ''
},
props: {
imageUrl: {
type: String,
default: ''
},
tip: {
type: String,
default: '建议尺寸: 1080*900px, 小于1MB'
}
tip: {
type: String,
default: '建议尺寸: 1080*900px, 小于1MB'
}
},
mounted () {
this.fileUploadURL = process.env.VUE_APP_BASE_API +'/api/canvas/upload?name=demo&type=console'
},
methods: {
handleAvatarSuccess (res, file) {
this.$emit('update:imageUrl', res.link)
},
mounted () {
this.fileUploadURL = process.env.VUE_APP_BASE_API +'?name=demo&type=console'
},
methods: {
handleAvatarSuccess (res, file) {
this.$emit('update:imageUrl', res.link)
},
beforeAvatarUpload (file) {
const isLt1M = file.size / 1024 / 1024 < 1
if (!isLt1M) {
this.$message.error('上传图片大小不能超过 1MB!')
}
return isLt1M
},
showImage () {
this.dialogImageUrl = this.imageUrl
this.dialogVisible = true
},
delImage () {
this.$emit('update:imageUrl', '')
beforeAvatarUpload (file) {
const isLt1M = file.size / 1024 / 1024 < 1
if (!isLt1M) {
this.$message.error('上传图片大小不能超过 1MB!')
}
return isLt1M
},
showImage () {
this.dialogImageUrl = this.imageUrl
this.dialogVisible = true
},
delImage () {
this.$emit('update:imageUrl', '')
}
}
}
</script>
<style lang="scss" scoped>