update:前命题UI修改
This commit is contained in:
du.meimei
6
components.d.ts
vendored
6
components.d.ts
vendored
@@ -2,7 +2,7 @@
|
|||||||
// @ts-nocheck
|
// @ts-nocheck
|
||||||
// Generated by unplugin-vue-components
|
// Generated by unplugin-vue-components
|
||||||
// Read more: https://github.com/vuejs/core/pull/3399
|
// Read more: https://github.com/vuejs/core/pull/3399
|
||||||
export {}
|
export {};
|
||||||
|
|
||||||
/* prettier-ignore */
|
/* prettier-ignore */
|
||||||
declare module 'vue' {
|
declare module 'vue' {
|
||||||
@@ -23,6 +23,8 @@ declare module 'vue' {
|
|||||||
VanCol: typeof import('vant/es')['Col']
|
VanCol: typeof import('vant/es')['Col']
|
||||||
VanDivider: typeof import('vant/es')['Divider']
|
VanDivider: typeof import('vant/es')['Divider']
|
||||||
VanField: typeof import('vant/es')['Field']
|
VanField: typeof import('vant/es')['Field']
|
||||||
|
VanGrid: typeof import('vant/es')['Grid']
|
||||||
|
VanGridItem: typeof import('vant/es')['GridItem']
|
||||||
VanIcon: typeof import('vant/es')['Icon']
|
VanIcon: typeof import('vant/es')['Icon']
|
||||||
VanNavBar: typeof import('vant/es')['NavBar']
|
VanNavBar: typeof import('vant/es')['NavBar']
|
||||||
VanPicker: typeof import('vant/es')['Picker']
|
VanPicker: typeof import('vant/es')['Picker']
|
||||||
@@ -32,8 +34,6 @@ declare module 'vue' {
|
|||||||
VanRow: typeof import('vant/es')['Row']
|
VanRow: typeof import('vant/es')['Row']
|
||||||
VanStepper: typeof import('vant/es')['Stepper']
|
VanStepper: typeof import('vant/es')['Stepper']
|
||||||
VanSwitch: typeof import('vant/es')['Switch']
|
VanSwitch: typeof import('vant/es')['Switch']
|
||||||
VanTab: typeof import('vant/es')['Tab']
|
|
||||||
VanTabs: typeof import('vant/es')['Tabs']
|
|
||||||
YLCascader: typeof import('./src/components/YLCascader.vue')['default']
|
YLCascader: typeof import('./src/components/YLCascader.vue')['default']
|
||||||
YLInput: typeof import('./src/components/YLInput.vue')['default']
|
YLInput: typeof import('./src/components/YLInput.vue')['default']
|
||||||
YLPicker: typeof import('./src/components/YLPicker.vue')['default']
|
YLPicker: typeof import('./src/components/YLPicker.vue')['default']
|
||||||
|
|||||||
@@ -170,8 +170,8 @@ const getMaxDateLimit = computed(() => {
|
|||||||
props.format
|
props.format
|
||||||
);
|
);
|
||||||
const tempStr = '0000-12-31 23:59:59';
|
const tempStr = '0000-12-31 23:59:59';
|
||||||
const result
|
const result =
|
||||||
= props.maxDate.length !== 0 && thisMax.length > props.maxDate.length
|
props.maxDate.length !== 0 && thisMax.length > props.maxDate.length
|
||||||
? thisMax.slice(0, props.maxDate.length) + tempStr.slice(props.maxDate.length)
|
? thisMax.slice(0, props.maxDate.length) + tempStr.slice(props.maxDate.length)
|
||||||
: thisMax;
|
: thisMax;
|
||||||
return result.slice(0, props.format.length);
|
return result.slice(0, props.format.length);
|
||||||
@@ -194,8 +194,8 @@ function onChange({ selectedValues, columnIndex }) {
|
|||||||
renderMinuteColumns,
|
renderMinuteColumns,
|
||||||
renderSecondColumns
|
renderSecondColumns
|
||||||
];
|
];
|
||||||
updateColumns[columnIndex]
|
updateColumns[columnIndex] &&
|
||||||
&& updateColumns[columnIndex](changeValue, getMinDateLimit.value, getMaxDateLimit.value, false);
|
updateColumns[columnIndex](changeValue, getMinDateLimit.value, getMaxDateLimit.value, false);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 渲染全部列
|
// 渲染全部列
|
||||||
|
|||||||
@@ -4,25 +4,17 @@
|
|||||||
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');
|
||||||
src:
|
src:
|
||||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix')
|
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix')
|
||||||
format('embedded-opentype'),
|
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.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.ttf?t=1545807318834') format('truetype'),
|
||||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont')
|
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont')
|
||||||
format('svg');
|
format('svg');
|
||||||
src:
|
|
||||||
url('//at.alicdn.com/t/c/font_4841764_vat2jbvw3q.woff2?t=1741575060989') format('woff2'),
|
|
||||||
url('//at.alicdn.com/t/c/font_4841764_vat2jbvw3q.woff?t=1741575060989') format('woff'),
|
|
||||||
url('//at.alicdn.com/t/c/font_4841764_vat2jbvw3q.ttf?t=1741575060989') format('truetype');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: '';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
font-style: normal;
|
|
||||||
font-size: 160px;
|
|
||||||
font-family: 'iconfont logo';
|
font-family: 'iconfont logo';
|
||||||
|
font-size: 160px;
|
||||||
|
font-style: normal;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
@@ -37,8 +29,8 @@
|
|||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
height: 42px;
|
height: 42px;
|
||||||
color: #666;
|
|
||||||
line-height: 42px;
|
line-height: 42px;
|
||||||
|
color: #666;
|
||||||
}
|
}
|
||||||
|
|
||||||
#tabs {
|
#tabs {
|
||||||
@@ -46,17 +38,17 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
#tabs li {
|
#tabs li {
|
||||||
position: relative;
|
cursor: pointer;
|
||||||
z-index: 1;
|
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
margin-bottom: -1px;
|
|
||||||
border-bottom: 2px solid transparent;
|
|
||||||
color: #666;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
font-size: 16px;
|
||||||
|
border-bottom: 2px solid transparent;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
margin-bottom: -1px;
|
||||||
|
color: #666;
|
||||||
}
|
}
|
||||||
|
|
||||||
#tabs .active {
|
#tabs .active {
|
||||||
@@ -70,25 +62,25 @@
|
|||||||
|
|
||||||
/* 页面布局 */
|
/* 页面布局 */
|
||||||
.main {
|
.main {
|
||||||
|
padding: 30px 100px;
|
||||||
width: 960px;
|
width: 960px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 30px 100px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.main .logo {
|
.main .logo {
|
||||||
overflow: hidden;
|
color: #333;
|
||||||
|
text-align: left;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
line-height: 1;
|
||||||
height: 110px;
|
height: 110px;
|
||||||
margin-top: -50px;
|
margin-top: -50px;
|
||||||
margin-bottom: 30px;
|
overflow: hidden;
|
||||||
color: #333;
|
|
||||||
line-height: 1;
|
|
||||||
text-align: left;
|
|
||||||
*zoom: 1;
|
*zoom: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main .logo a {
|
.main .logo a {
|
||||||
color: #333;
|
|
||||||
font-size: 160px;
|
font-size: 160px;
|
||||||
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.helps {
|
.helps {
|
||||||
@@ -96,25 +88,25 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.helps pre {
|
.helps pre {
|
||||||
overflow: auto;
|
|
||||||
margin: 10px 0;
|
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
|
margin: 10px 0;
|
||||||
border: solid 1px #e7e1cd;
|
border: solid 1px #e7e1cd;
|
||||||
background-color: #fffdef;
|
background-color: #fffdef;
|
||||||
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon_lists {
|
.icon_lists {
|
||||||
overflow: hidden;
|
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
|
overflow: hidden;
|
||||||
*zoom: 1;
|
*zoom: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon_lists li {
|
.icon_lists li {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
margin-right: 20px;
|
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
list-style: none !important;
|
margin-right: 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
list-style: none !important;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -125,10 +117,10 @@
|
|||||||
.icon_lists .icon {
|
.icon_lists .icon {
|
||||||
display: block;
|
display: block;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
|
line-height: 100px;
|
||||||
|
font-size: 42px;
|
||||||
margin: 10px auto;
|
margin: 10px auto;
|
||||||
color: #333;
|
color: #333;
|
||||||
font-size: 42px;
|
|
||||||
line-height: 100px;
|
|
||||||
-webkit-transition:
|
-webkit-transition:
|
||||||
font-size 0.25s linear,
|
font-size 0.25s linear,
|
||||||
width 0.25s linear;
|
width 0.25s linear;
|
||||||
@@ -145,18 +137,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.icon_lists .svg-icon {
|
.icon_lists .svg-icon {
|
||||||
|
/* 通过设置 font-size 来改变图标大小 */
|
||||||
|
width: 1em;
|
||||||
/* 图标和文字相邻时，垂直对齐 */
|
/* 图标和文字相邻时，垂直对齐 */
|
||||||
vertical-align: -0.15em;
|
vertical-align: -0.15em;
|
||||||
|
/* 通过设置 color 来改变 SVG 的颜色/fill */
|
||||||
|
fill: currentColor;
|
||||||
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
|
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
|
||||||
normalize.css 中也包含这行 */
|
normalize.css 中也包含这行 */
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
/* 通过设置 font-size 来改变图标大小 */
|
|
||||||
width: 1em;
|
|
||||||
|
|
||||||
/* 通过设置 color 来改变 SVG 的颜色/fill */
|
|
||||||
fill: currentcolor;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon_lists li .name,
|
.icon_lists li .name,
|
||||||
@@ -181,10 +170,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.markdown h1 {
|
.markdown h1 {
|
||||||
margin-bottom: 24px;
|
|
||||||
color: #404040;
|
color: #404040;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown h2,
|
.markdown h2,
|
||||||
@@ -192,10 +181,10 @@
|
|||||||
.markdown h4,
|
.markdown h4,
|
||||||
.markdown h5,
|
.markdown h5,
|
||||||
.markdown h6 {
|
.markdown h6 {
|
||||||
clear: both;
|
|
||||||
margin: 1.6em 0 0.6em;
|
|
||||||
color: #404040;
|
color: #404040;
|
||||||
|
margin: 1.6em 0 0.6em 0;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown h1 {
|
.markdown h1 {
|
||||||
@@ -223,11 +212,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.markdown hr {
|
.markdown hr {
|
||||||
clear: both;
|
|
||||||
height: 1px;
|
height: 1px;
|
||||||
margin: 16px 0;
|
|
||||||
border: 0;
|
border: 0;
|
||||||
background: #e9e9e9;
|
background: #e9e9e9;
|
||||||
|
margin: 16px 0;
|
||||||
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown p {
|
.markdown p {
|
||||||
@@ -270,8 +259,8 @@
|
|||||||
.markdown code {
|
.markdown code {
|
||||||
margin: 0 3px;
|
margin: 0 3px;
|
||||||
padding: 0 5px;
|
padding: 0 5px;
|
||||||
border-radius: 3px;
|
|
||||||
background: #eee;
|
background: #eee;
|
||||||
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown strong,
|
.markdown strong,
|
||||||
@@ -280,24 +269,24 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.markdown > table {
|
.markdown > table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0px;
|
||||||
|
empty-cells: show;
|
||||||
|
border: 1px solid #e9e9e9;
|
||||||
width: 95%;
|
width: 95%;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
border: 1px solid #e9e9e9;
|
|
||||||
border-spacing: 0;
|
|
||||||
border-collapse: collapse;
|
|
||||||
empty-cells: show;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown > table th {
|
.markdown > table th {
|
||||||
|
white-space: nowrap;
|
||||||
color: #333;
|
color: #333;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
white-space: nowrap;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown > table th,
|
.markdown > table th,
|
||||||
.markdown > table td {
|
.markdown > table td {
|
||||||
padding: 8px 16px;
|
|
||||||
border: 1px solid #e9e9e9;
|
border: 1px solid #e9e9e9;
|
||||||
|
padding: 8px 16px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -306,11 +295,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.markdown blockquote {
|
.markdown blockquote {
|
||||||
margin: 1em 0;
|
|
||||||
padding-left: 0.8em;
|
|
||||||
border-left: 4px solid #e9e9e9;
|
|
||||||
color: #999;
|
|
||||||
font-size: 90%;
|
font-size: 90%;
|
||||||
|
color: #999;
|
||||||
|
border-left: 4px solid #e9e9e9;
|
||||||
|
padding-left: 0.8em;
|
||||||
|
margin: 1em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown blockquote p {
|
.markdown blockquote p {
|
||||||
@@ -318,9 +307,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.markdown .anchor {
|
.markdown .anchor {
|
||||||
margin-left: 8px;
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 0.3s ease;
|
transition: opacity 0.3s ease;
|
||||||
|
margin-left: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown .waiting {
|
.markdown .waiting {
|
||||||
@@ -333,8 +322,8 @@
|
|||||||
.markdown h4:hover .anchor,
|
.markdown h4:hover .anchor,
|
||||||
.markdown h5:hover .anchor,
|
.markdown h5:hover .anchor,
|
||||||
.markdown h6:hover .anchor {
|
.markdown h6:hover .anchor {
|
||||||
display: inline-block;
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown > br,
|
.markdown > br,
|
||||||
@@ -344,10 +333,10 @@
|
|||||||
|
|
||||||
.hljs {
|
.hljs {
|
||||||
display: block;
|
display: block;
|
||||||
overflow-x: auto;
|
|
||||||
padding: 0.5em;
|
|
||||||
background: white;
|
background: white;
|
||||||
color: #333;
|
padding: 0.5em;
|
||||||
|
color: #333333;
|
||||||
|
overflow-x: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hljs-comment,
|
.hljs-comment,
|
||||||
@@ -383,7 +372,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.hljs-tag {
|
.hljs-tag {
|
||||||
color: #333;
|
color: #333333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hljs-title,
|
.hljs-title,
|
||||||
@@ -396,13 +385,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.hljs-addition {
|
.hljs-addition {
|
||||||
background-color: #eaffea;
|
|
||||||
color: #55a532;
|
color: #55a532;
|
||||||
|
background-color: #eaffea;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hljs-deletion {
|
.hljs-deletion {
|
||||||
background-color: #ffecec;
|
|
||||||
color: #bd2c00;
|
color: #bd2c00;
|
||||||
|
background-color: #ffecec;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hljs-link {
|
.hljs-link {
|
||||||
@@ -410,10 +399,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* 代码高亮 */
|
/* 代码高亮 */
|
||||||
|
|
||||||
/* PrismJS 1.15.0
|
/* PrismJS 1.15.0
|
||||||
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
|
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* prism.js default theme for JavaScript, CSS and HTML
|
* prism.js default theme for JavaScript, CSS and HTML
|
||||||
* Based on dabblet (http://dabblet.com)
|
* Based on dabblet (http://dabblet.com)
|
||||||
@@ -421,19 +408,21 @@ https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javasc
|
|||||||
*/
|
*/
|
||||||
code[class*='language-'],
|
code[class*='language-'],
|
||||||
pre[class*='language-'] {
|
pre[class*='language-'] {
|
||||||
background: none;
|
|
||||||
color: black;
|
color: black;
|
||||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
background: none;
|
||||||
line-height: 1.5;
|
|
||||||
text-align: left;
|
|
||||||
text-shadow: 0 1px white;
|
text-shadow: 0 1px white;
|
||||||
|
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||||
|
text-align: left;
|
||||||
white-space: pre;
|
white-space: pre;
|
||||||
word-spacing: normal;
|
word-spacing: normal;
|
||||||
word-wrap: normal;
|
|
||||||
word-break: normal;
|
word-break: normal;
|
||||||
|
word-wrap: normal;
|
||||||
|
line-height: 1.5;
|
||||||
|
|
||||||
-moz-tab-size: 4;
|
-moz-tab-size: 4;
|
||||||
-o-tab-size: 4;
|
-o-tab-size: 4;
|
||||||
tab-size: 4;
|
tab-size: 4;
|
||||||
|
|
||||||
-webkit-hyphens: none;
|
-webkit-hyphens: none;
|
||||||
-moz-hyphens: none;
|
-moz-hyphens: none;
|
||||||
-ms-hyphens: none;
|
-ms-hyphens: none;
|
||||||
@@ -444,16 +433,16 @@ pre[class*='language-']::-moz-selection,
|
|||||||
pre[class*='language-'] ::-moz-selection,
|
pre[class*='language-'] ::-moz-selection,
|
||||||
code[class*='language-']::-moz-selection,
|
code[class*='language-']::-moz-selection,
|
||||||
code[class*='language-'] ::-moz-selection {
|
code[class*='language-'] ::-moz-selection {
|
||||||
background: #b3d4fc;
|
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
|
background: #b3d4fc;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre[class*='language-']::selection,
|
pre[class*='language-']::selection,
|
||||||
pre[class*='language-'] ::selection,
|
pre[class*='language-'] ::selection,
|
||||||
code[class*='language-']::selection,
|
code[class*='language-']::selection,
|
||||||
code[class*='language-'] ::selection {
|
code[class*='language-'] ::selection {
|
||||||
background: #b3d4fc;
|
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
|
background: #b3d4fc;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media print {
|
@media print {
|
||||||
@@ -465,9 +454,9 @@ code[class*='language-'] ::selection {
|
|||||||
|
|
||||||
/* Code blocks */
|
/* Code blocks */
|
||||||
pre[class*='language-'] {
|
pre[class*='language-'] {
|
||||||
overflow: auto;
|
|
||||||
margin: 0.5em 0;
|
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
|
margin: 0.5em 0;
|
||||||
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
:not(pre) > code[class*='language-'],
|
:not(pre) > code[class*='language-'],
|
||||||
@@ -521,8 +510,8 @@ pre[class*='language-'] {
|
|||||||
.token.url,
|
.token.url,
|
||||||
.language-css .token.string,
|
.language-css .token.string,
|
||||||
.style .token.string {
|
.style .token.string {
|
||||||
background: hsla(0deg, 0%, 100%, 0.5);
|
|
||||||
color: #9a6e3a;
|
color: #9a6e3a;
|
||||||
|
background: hsla(0, 0%, 100%, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.token.atrule,
|
.token.atrule,
|
||||||
|
|||||||
837
src/fonts/demo_index.html
Normal file
837
src/fonts/demo_index.html
Normal file
@@ -0,0 +1,837 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>iconfont Demo</title>
|
||||||
|
<link
|
||||||
|
rel="shortcut icon"
|
||||||
|
href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"
|
||||||
|
type="image/x-icon"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/svg+xml"
|
||||||
|
href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"
|
||||||
|
/>
|
||||||
|
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css" />
|
||||||
|
<link rel="stylesheet" href="demo.css" />
|
||||||
|
<link rel="stylesheet" href="iconfont.css" />
|
||||||
|
<script src="iconfont.js"></script>
|
||||||
|
<!-- jQuery -->
|
||||||
|
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
|
||||||
|
<!-- 代码高亮 -->
|
||||||
|
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
|
||||||
|
<style>
|
||||||
|
.main .logo {
|
||||||
|
margin-top: 0;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main .logo a {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main .logo .sub-title {
|
||||||
|
margin-left: 0.5em;
|
||||||
|
font-size: 22px;
|
||||||
|
color: #fff;
|
||||||
|
background: linear-gradient(-45deg, #3967ff, #b500fe);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="main">
|
||||||
|
<h1 class="logo">
|
||||||
|
<a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
|
||||||
|
<img
|
||||||
|
width="200"
|
||||||
|
src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</h1>
|
||||||
|
<div class="nav-tabs">
|
||||||
|
<ul id="tabs" class="dib-box">
|
||||||
|
<li class="dib active"><span>Unicode</span></li>
|
||||||
|
<li class="dib"><span>Font class</span></li>
|
||||||
|
<li class="dib"><span>Symbol</span></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4841764"
|
||||||
|
target="_blank"
|
||||||
|
class="nav-more"
|
||||||
|
>查看项目</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="tab-container">
|
||||||
|
<div class="content unicode" style="display: block">
|
||||||
|
<ul class="icon_lists dib-box">
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont"></span>
|
||||||
|
<div class="name">橡皮,擦除,橡皮擦</div>
|
||||||
|
<div class="code-name">&#xea15;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont"></span>
|
||||||
|
<div class="name">画笔</div>
|
||||||
|
<div class="code-name">&#xe61f;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont"></span>
|
||||||
|
<div class="name">撤销</div>
|
||||||
|
<div class="code-name">&#xe6e2;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont"></span>
|
||||||
|
<div class="name">上传</div>
|
||||||
|
<div class="code-name">&#xe613;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont"></span>
|
||||||
|
<div class="name">清空</div>
|
||||||
|
<div class="code-name">&#xe6dc;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont"></span>
|
||||||
|
<div class="name">blod</div>
|
||||||
|
<div class="code-name">&#xe71d;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont"></span>
|
||||||
|
<div class="name">qingxie</div>
|
||||||
|
<div class="code-name">&#xe71e;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont"></span>
|
||||||
|
<div class="name">undline</div>
|
||||||
|
<div class="code-name">&#xe720;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont"></span>
|
||||||
|
<div class="name">image</div>
|
||||||
|
<div class="code-name">&#xe730;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont"></span>
|
||||||
|
<div class="name">del</div>
|
||||||
|
<div class="code-name">&#xe637;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont"></span>
|
||||||
|
<div class="name">more</div>
|
||||||
|
<div class="code-name">&#xe600;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont"></span>
|
||||||
|
<div class="name">delete</div>
|
||||||
|
<div class="code-name">&#xe66d;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont"></span>
|
||||||
|
<div class="name">del</div>
|
||||||
|
<div class="code-name">&#xe6f5;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont"></span>
|
||||||
|
<div class="name">option</div>
|
||||||
|
<div class="code-name">&#xe6ff;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont"></span>
|
||||||
|
<div class="name">setting</div>
|
||||||
|
<div class="code-name">&#xe633;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont"></span>
|
||||||
|
<div class="name">add</div>
|
||||||
|
<div class="code-name">&#xe686;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont"></span>
|
||||||
|
<div class="name">radio_box</div>
|
||||||
|
<div class="code-name">&#xe75b;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont"></span>
|
||||||
|
<div class="name">矩阵打分</div>
|
||||||
|
<div class="code-name">&#xe641;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont"></span>
|
||||||
|
<div class="name">checkbox-checked</div>
|
||||||
|
<div class="code-name">&#xe6c3;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont"></span>
|
||||||
|
<div class="name">nps</div>
|
||||||
|
<div class="code-name">&#xe6b0;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont"></span>
|
||||||
|
<div class="name">input</div>
|
||||||
|
<div class="code-name">&#xe6fd;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont"></span>
|
||||||
|
<div class="name">矩阵填空</div>
|
||||||
|
<div class="code-name">&#xe62e;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont"></span>
|
||||||
|
<div class="name">文件上传</div>
|
||||||
|
<div class="code-name">&#xe631;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont"></span>
|
||||||
|
<div class="name">签名</div>
|
||||||
|
<div class="code-name">&#xe661;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont"></span>
|
||||||
|
<div class="name">图文</div>
|
||||||
|
<div class="code-name">&#xe62c;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont"></span>
|
||||||
|
<div class="name">矩阵多选</div>
|
||||||
|
<div class="code-name">&#xe818;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont">𓱿</span>
|
||||||
|
<div class="name">矩阵单选</div>
|
||||||
|
<div class="code-name">&#x13c7f;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont"></span>
|
||||||
|
<div class="name">edit-2</div>
|
||||||
|
<div class="code-name">&#xe630;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont"></span>
|
||||||
|
<div class="name">copy</div>
|
||||||
|
<div class="code-name">&#xe632;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont"></span>
|
||||||
|
<div class="name">delete</div>
|
||||||
|
<div class="code-name">&#xe63f;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont"></span>
|
||||||
|
<div class="name">sort</div>
|
||||||
|
<div class="code-name">&#xe6a0;</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="article markdown">
|
||||||
|
<h2 id="unicode-">Unicode 引用</h2>
|
||||||
|
<hr />
|
||||||
|
|
||||||
|
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
|
||||||
|
<ul>
|
||||||
|
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
|
||||||
|
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
|
||||||
|
</ul>
|
||||||
|
<blockquote>
|
||||||
|
<p>
|
||||||
|
注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol
|
||||||
|
引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）
|
||||||
|
</p>
|
||||||
|
</blockquote>
|
||||||
|
<p>Unicode 使用步骤如下：</p>
|
||||||
|
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
|
||||||
|
<pre><code class="language-css"
|
||||||
|
>@font-face {
|
||||||
|
font-family: 'mobilefont';
|
||||||
|
src: url('iconfont.woff2?t=1742102742566') format('woff2'),
|
||||||
|
url('iconfont.woff?t=1742102742566') format('woff'),
|
||||||
|
url('iconfont.ttf?t=1742102742566') format('truetype');
|
||||||
|
}
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
||||||
|
<pre><code class="language-css"
|
||||||
|
>.mobilefont {
|
||||||
|
font-family: "mobilefont" !important;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
|
||||||
|
<pre>
|
||||||
|
<code class="language-html"
|
||||||
|
><span class="mobilefont">&#x33;</span>
|
||||||
|
</code></pre>
|
||||||
|
<blockquote>
|
||||||
|
<p>
|
||||||
|
"mobilefont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。
|
||||||
|
</p>
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content font-class">
|
||||||
|
<ul class="icon_lists dib-box">
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont mobilefont-rubber"></span>
|
||||||
|
<div class="name">橡皮,擦除,橡皮擦</div>
|
||||||
|
<div class="code-name">.mobilefont-rubber</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont mobilefont-huabi"></span>
|
||||||
|
<div class="name">画笔</div>
|
||||||
|
<div class="code-name">.mobilefont-huabi</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont mobilefont-chexiao"></span>
|
||||||
|
<div class="name">撤销</div>
|
||||||
|
<div class="code-name">.mobilefont-chexiao</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont mobilefont-shangchuan"></span>
|
||||||
|
<div class="name">上传</div>
|
||||||
|
<div class="code-name">.mobilefont-shangchuan</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont mobilefont-qingkong"></span>
|
||||||
|
<div class="name">清空</div>
|
||||||
|
<div class="code-name">.mobilefont-qingkong</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont mobilefont-jiacu"></span>
|
||||||
|
<div class="name">blod</div>
|
||||||
|
<div class="code-name">.mobilefont-jiacu</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont mobilefont-qingxie"></span>
|
||||||
|
<div class="name">qingxie</div>
|
||||||
|
<div class="code-name">.mobilefont-qingxie</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont mobilefont-xiahuaxian"></span>
|
||||||
|
<div class="name">undline</div>
|
||||||
|
<div class="code-name">.mobilefont-xiahuaxian</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont mobilefont-tupian"></span>
|
||||||
|
<div class="name">image</div>
|
||||||
|
<div class="code-name">.mobilefont-tupian</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont mobilefont-del1"></span>
|
||||||
|
<div class="name">del</div>
|
||||||
|
<div class="code-name">.mobilefont-del1</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont mobilefont-gengduo"></span>
|
||||||
|
<div class="name">more</div>
|
||||||
|
<div class="code-name">.mobilefont-gengduo</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont mobilefont-delete1"></span>
|
||||||
|
<div class="name">delete</div>
|
||||||
|
<div class="code-name">.mobilefont-delete1</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont mobilefont-del"></span>
|
||||||
|
<div class="name">del</div>
|
||||||
|
<div class="code-name">.mobilefont-del</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont mobilefont-option"></span>
|
||||||
|
<div class="name">option</div>
|
||||||
|
<div class="code-name">.mobilefont-option</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont mobilefont-setting"></span>
|
||||||
|
<div class="name">setting</div>
|
||||||
|
<div class="code-name">.mobilefont-setting</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont mobilefont-add"></span>
|
||||||
|
<div class="name">add</div>
|
||||||
|
<div class="code-name">.mobilefont-add</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont mobilefont-radiobox"></span>
|
||||||
|
<div class="name">radio_box</div>
|
||||||
|
<div class="code-name">.mobilefont-radiobox</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont mobilefont-juzhendafen"></span>
|
||||||
|
<div class="name">矩阵打分</div>
|
||||||
|
<div class="code-name">.mobilefont-juzhendafen</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont mobilefont-checkbox-checked"></span>
|
||||||
|
<div class="name">checkbox-checked</div>
|
||||||
|
<div class="code-name">.mobilefont-checkbox-checked</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont mobilefont-nps"></span>
|
||||||
|
<div class="name">nps</div>
|
||||||
|
<div class="code-name">.mobilefont-nps</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont mobilefont-input"></span>
|
||||||
|
<div class="name">input</div>
|
||||||
|
<div class="code-name">.mobilefont-input</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont mobilefont-juzhentiankong"></span>
|
||||||
|
<div class="name">矩阵填空</div>
|
||||||
|
<div class="code-name">.mobilefont-juzhentiankong</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont mobilefont-wenjianshangchuan"></span>
|
||||||
|
<div class="name">文件上传</div>
|
||||||
|
<div class="code-name">.mobilefont-wenjianshangchuan</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont mobilefont-qianming"></span>
|
||||||
|
<div class="name">签名</div>
|
||||||
|
<div class="code-name">.mobilefont-qianming</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont mobilefont-tuwen"></span>
|
||||||
|
<div class="name">图文</div>
|
||||||
|
<div class="code-name">.mobilefont-tuwen</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont mobilefont-juzhenduoxuan"></span>
|
||||||
|
<div class="name">矩阵多选</div>
|
||||||
|
<div class="code-name">.mobilefont-juzhenduoxuan</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont mobilefont-juzhendanxuan"></span>
|
||||||
|
<div class="name">矩阵单选</div>
|
||||||
|
<div class="code-name">.mobilefont-juzhendanxuan</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont mobilefont-edit2"></span>
|
||||||
|
<div class="name">edit-2</div>
|
||||||
|
<div class="code-name">.mobilefont-edit2</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont mobilefont-copy"></span>
|
||||||
|
<div class="name">copy</div>
|
||||||
|
<div class="code-name">.mobilefont-copy</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont mobilefont-delete"></span>
|
||||||
|
<div class="name">delete</div>
|
||||||
|
<div class="code-name">.mobilefont-delete</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon mobilefont mobilefont-sort"></span>
|
||||||
|
<div class="name">sort</div>
|
||||||
|
<div class="code-name">.mobilefont-sort</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="article markdown">
|
||||||
|
<h2 id="font-class-">font-class 引用</h2>
|
||||||
|
<hr />
|
||||||
|
|
||||||
|
<p>
|
||||||
|
font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode
|
||||||
|
书写不直观，语意不明确的问题。
|
||||||
|
</p>
|
||||||
|
<p>与 Unicode 使用方式相比，具有如下特点：</p>
|
||||||
|
<ul>
|
||||||
|
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
|
||||||
|
<li>
|
||||||
|
因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode
|
||||||
|
引用。
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p>使用步骤如下：</p>
|
||||||
|
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
|
||||||
|
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css">
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||||
|
<pre><code class="language-html"><span class="mobilefont mobilefont-xxx"></span>
|
||||||
|
</code></pre>
|
||||||
|
<blockquote>
|
||||||
|
<p>
|
||||||
|
" mobilefont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。
|
||||||
|
</p>
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content symbol">
|
||||||
|
<ul class="icon_lists dib-box">
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#mobilefont-rubber"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">橡皮,擦除,橡皮擦</div>
|
||||||
|
<div class="code-name">#mobilefont-rubber</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#mobilefont-huabi"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">画笔</div>
|
||||||
|
<div class="code-name">#mobilefont-huabi</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#mobilefont-chexiao"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">撤销</div>
|
||||||
|
<div class="code-name">#mobilefont-chexiao</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#mobilefont-shangchuan"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">上传</div>
|
||||||
|
<div class="code-name">#mobilefont-shangchuan</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#mobilefont-qingkong"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">清空</div>
|
||||||
|
<div class="code-name">#mobilefont-qingkong</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#mobilefont-jiacu"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">blod</div>
|
||||||
|
<div class="code-name">#mobilefont-jiacu</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#mobilefont-qingxie"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">qingxie</div>
|
||||||
|
<div class="code-name">#mobilefont-qingxie</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#mobilefont-xiahuaxian"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">undline</div>
|
||||||
|
<div class="code-name">#mobilefont-xiahuaxian</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#mobilefont-tupian"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">image</div>
|
||||||
|
<div class="code-name">#mobilefont-tupian</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#mobilefont-del1"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">del</div>
|
||||||
|
<div class="code-name">#mobilefont-del1</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#mobilefont-gengduo"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">more</div>
|
||||||
|
<div class="code-name">#mobilefont-gengduo</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#mobilefont-delete1"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">delete</div>
|
||||||
|
<div class="code-name">#mobilefont-delete1</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#mobilefont-del"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">del</div>
|
||||||
|
<div class="code-name">#mobilefont-del</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#mobilefont-option"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">option</div>
|
||||||
|
<div class="code-name">#mobilefont-option</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#mobilefont-setting"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">setting</div>
|
||||||
|
<div class="code-name">#mobilefont-setting</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#mobilefont-add"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">add</div>
|
||||||
|
<div class="code-name">#mobilefont-add</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#mobilefont-radiobox"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">radio_box</div>
|
||||||
|
<div class="code-name">#mobilefont-radiobox</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#mobilefont-juzhendafen"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">矩阵打分</div>
|
||||||
|
<div class="code-name">#mobilefont-juzhendafen</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#mobilefont-checkbox-checked"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">checkbox-checked</div>
|
||||||
|
<div class="code-name">#mobilefont-checkbox-checked</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#mobilefont-nps"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">nps</div>
|
||||||
|
<div class="code-name">#mobilefont-nps</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#mobilefont-input"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">input</div>
|
||||||
|
<div class="code-name">#mobilefont-input</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#mobilefont-juzhentiankong"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">矩阵填空</div>
|
||||||
|
<div class="code-name">#mobilefont-juzhentiankong</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#mobilefont-wenjianshangchuan"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">文件上传</div>
|
||||||
|
<div class="code-name">#mobilefont-wenjianshangchuan</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#mobilefont-qianming"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">签名</div>
|
||||||
|
<div class="code-name">#mobilefont-qianming</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#mobilefont-tuwen"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">图文</div>
|
||||||
|
<div class="code-name">#mobilefont-tuwen</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#mobilefont-juzhenduoxuan"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">矩阵多选</div>
|
||||||
|
<div class="code-name">#mobilefont-juzhenduoxuan</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#mobilefont-juzhendanxuan"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">矩阵单选</div>
|
||||||
|
<div class="code-name">#mobilefont-juzhendanxuan</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#mobilefont-edit2"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">edit-2</div>
|
||||||
|
<div class="code-name">#mobilefont-edit2</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#mobilefont-copy"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">copy</div>
|
||||||
|
<div class="code-name">#mobilefont-copy</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#mobilefont-delete"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">delete</div>
|
||||||
|
<div class="code-name">#mobilefont-delete</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#mobilefont-sort"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">sort</div>
|
||||||
|
<div class="code-name">#mobilefont-sort</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="article markdown">
|
||||||
|
<h2 id="symbol-">Symbol 引用</h2>
|
||||||
|
<hr />
|
||||||
|
|
||||||
|
<p>
|
||||||
|
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a
|
||||||
|
href=""
|
||||||
|
>文章</a
|
||||||
|
>
|
||||||
|
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li>支持多色图标了，不再受单色限制。</li>
|
||||||
|
<li>
|
||||||
|
通过一些技巧，支持像字体那样，通过 <code>font-size</code>,
|
||||||
|
<code>color</code> 来调整样式。
|
||||||
|
</li>
|
||||||
|
<li>兼容性较差，支持 IE9+，及现代浏览器。</li>
|
||||||
|
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
|
||||||
|
</ul>
|
||||||
|
<p>使用步骤如下：</p>
|
||||||
|
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
|
||||||
|
<pre><code class="language-html"><script src="./iconfont.js"></script>
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
|
||||||
|
<pre><code class="language-html"><style>
|
||||||
|
.icon {
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
vertical-align: -0.15em;
|
||||||
|
fill: currentColor;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||||
|
<pre><code class="language-html"><svg class="icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-xxx"></use>
|
||||||
|
</svg>
|
||||||
|
</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
$(document).ready(function () {
|
||||||
|
$('.tab-container .content:first').show();
|
||||||
|
|
||||||
|
$('#tabs li').click(function (e) {
|
||||||
|
var tabContent = $('.tab-container .content');
|
||||||
|
var index = $(this).index();
|
||||||
|
|
||||||
|
if ($(this).hasClass('active')) {
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
$('#tabs li').removeClass('active');
|
||||||
|
$(this).addClass('active');
|
||||||
|
|
||||||
|
tabContent.hide().eq(index).fadeIn();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -2,10 +2,13 @@
|
|||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'iconfont logo';
|
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');
|
||||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
|
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.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.ttf?t=1545807318834') format('truetype'),
|
||||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
|
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont')
|
||||||
|
format('svg');
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
@@ -48,7 +51,6 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#tabs .active {
|
#tabs .active {
|
||||||
border-bottom-color: #f00;
|
border-bottom-color: #f00;
|
||||||
color: #222;
|
color: #222;
|
||||||
@@ -119,9 +121,15 @@
|
|||||||
color: #333;
|
color: #333;
|
||||||
font-size: 42px;
|
font-size: 42px;
|
||||||
line-height: 100px;
|
line-height: 100px;
|
||||||
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
|
-webkit-transition:
|
||||||
-moz-transition: font-size 0.25s linear, width 0.25s linear;
|
font-size 0.25s linear,
|
||||||
transition: font-size 0.25s linear, width 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 {
|
.icon_lists .icon:hover {
|
||||||
@@ -218,35 +226,35 @@
|
|||||||
margin: 1em 0;
|
margin: 1em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown>p,
|
.markdown > p,
|
||||||
.markdown>blockquote,
|
.markdown > blockquote,
|
||||||
.markdown>.highlight,
|
.markdown > .highlight,
|
||||||
.markdown>ol,
|
.markdown > ol,
|
||||||
.markdown>ul {
|
.markdown > ul {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown ul>li {
|
.markdown ul > li {
|
||||||
list-style: circle;
|
list-style: circle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown>ul li,
|
.markdown > ul li,
|
||||||
.markdown blockquote ul>li {
|
.markdown blockquote ul > li {
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
padding-left: 4px;
|
padding-left: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown>ul li p,
|
.markdown > ul li p,
|
||||||
.markdown>ol li p {
|
.markdown > ol li p {
|
||||||
margin: 0.6em 0;
|
margin: 0.6em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown ol>li {
|
.markdown ol > li {
|
||||||
list-style: decimal;
|
list-style: decimal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown>ol li,
|
.markdown > ol li,
|
||||||
.markdown blockquote ol>li {
|
.markdown blockquote ol > li {
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
padding-left: 4px;
|
padding-left: 4px;
|
||||||
}
|
}
|
||||||
@@ -263,7 +271,7 @@
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown>table {
|
.markdown > table {
|
||||||
width: 95%;
|
width: 95%;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
border: 1px solid #e9e9e9;
|
border: 1px solid #e9e9e9;
|
||||||
@@ -272,21 +280,21 @@
|
|||||||
empty-cells: show;
|
empty-cells: show;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown>table th {
|
.markdown > table th {
|
||||||
color: #333;
|
color: #333;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown>table th,
|
.markdown > table th,
|
||||||
.markdown>table td {
|
.markdown > table td {
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
border: 1px solid #e9e9e9;
|
border: 1px solid #e9e9e9;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown>table th {
|
.markdown > table th {
|
||||||
background: #F7F7F7;
|
background: #f7f7f7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown blockquote {
|
.markdown blockquote {
|
||||||
@@ -321,12 +329,11 @@
|
|||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.markdown>br,
|
.markdown > br,
|
||||||
.markdown>p>br {
|
.markdown > p > br {
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.hljs {
|
.hljs {
|
||||||
display: block;
|
display: block;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
@@ -451,19 +458,19 @@ code[class*='language-'] ::selection {
|
|||||||
/* Code blocks */
|
/* Code blocks */
|
||||||
pre[class*='language-'] {
|
pre[class*='language-'] {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
margin: .5em 0;
|
margin: 0.5em 0;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
:not(pre)>code[class*='language-'],
|
:not(pre) > code[class*='language-'],
|
||||||
pre[class*='language-'] {
|
pre[class*='language-'] {
|
||||||
background: #f5f2f0;
|
background: #f5f2f0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Inline code */
|
/* Inline code */
|
||||||
:not(pre)>code[class*='language-'] {
|
:not(pre) > code[class*='language-'] {
|
||||||
padding: .1em;
|
padding: 0.1em;
|
||||||
border-radius: .3em;
|
border-radius: 0.3em;
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -479,7 +486,7 @@ pre[class*='language-'] {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.namespace {
|
.namespace {
|
||||||
opacity: .7;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.token.property,
|
.token.property,
|
||||||
@@ -506,7 +513,7 @@ pre[class*='language-'] {
|
|||||||
.token.url,
|
.token.url,
|
||||||
.language-css .token.string,
|
.language-css .token.string,
|
||||||
.style .token.string {
|
.style .token.string {
|
||||||
background: hsla(0deg, 0%, 100%, .5);
|
background: hsla(0deg, 0%, 100%, 0.5);
|
||||||
color: #9a6e3a;
|
color: #9a6e3a;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -518,7 +525,7 @@ pre[class*='language-'] {
|
|||||||
|
|
||||||
.token.function,
|
.token.function,
|
||||||
.token.class-name {
|
.token.class-name {
|
||||||
color: #DD4A68;
|
color: #dd4a68;
|
||||||
}
|
}
|
||||||
|
|
||||||
.token.regex,
|
.token.regex,
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
@font-face {
|
@font-face {
|
||||||
font-family: mobilefont; /* Project id 4841764 */
|
font-family: mobilefont; /* Project id 4841764 */
|
||||||
src: url('iconfont.woff2?t=1742025232194') format('woff2'),
|
src:
|
||||||
|
url('iconfont.woff2?t=1742025232194') format('woff2'),
|
||||||
url('iconfont.woff?t=1742025232194') format('woff'),
|
url('iconfont.woff?t=1742025232194') format('woff'),
|
||||||
url('iconfont.ttf?t=1742025232194') format('truetype');
|
url('iconfont.ttf?t=1742025232194') format('truetype');
|
||||||
}
|
}
|
||||||
@@ -100,4 +101,3 @@
|
|||||||
.mobilefont-sort::before {
|
.mobilefont-sort::before {
|
||||||
content: '\e6a0';
|
content: '\e6a0';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@@ -21,7 +21,6 @@ const router = useRouter();
|
|||||||
function goBack() {
|
function goBack() {
|
||||||
appBridge.h5RouterBack(router);
|
appBridge.h5RouterBack(router);
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|||||||
@@ -196,7 +196,9 @@ export function generateQuestionPages({ questions, logics, isPerPage, addon }) {
|
|||||||
// const isAdv = advancedTypes.includes(item?.question_type); // 当前题是高级题型
|
// const isAdv = advancedTypes.includes(item?.question_type); // 当前题是高级题型
|
||||||
|
|
||||||
// 前一道题配置了跳转逻辑
|
// 前一道题配置了跳转逻辑
|
||||||
const isPrevLogic = !!logics.find((logic) => logic.question_index === arr[index - 1]?.question_index);
|
const isPrevLogic = !!logics.find(
|
||||||
|
(logic) => logic.question_index === arr[index - 1]?.question_index
|
||||||
|
);
|
||||||
// 当前题配置了跳转逻辑
|
// 当前题配置了跳转逻辑
|
||||||
const isLogic = !!logics.find((logic) => logic.question_index === item.question_index);
|
const isLogic = !!logics.find((logic) => logic.question_index === item.question_index);
|
||||||
|
|
||||||
@@ -359,41 +361,46 @@ export function isCross(range1, range2) {
|
|||||||
// 逻辑在循环之前
|
// 逻辑在循环之前
|
||||||
const isLeft = isNullish(start2) ? end1 < end2 : end1 < start2;
|
const isLeft = isNullish(start2) ? end1 < end2 : end1 < start2;
|
||||||
// 逻辑在循环之后
|
// 逻辑在循环之后
|
||||||
const isRight = isNullish(end2) ? start2 < start1 && start2 < judge : end2 < start1 && end2 < judge;
|
const isRight = isNullish(end2)
|
||||||
|
? start2 < start1 && start2 < judge
|
||||||
|
: end2 < start1 && end2 < judge;
|
||||||
// 不相交也不包含
|
// 不相交也不包含
|
||||||
const isSibling = isLeft || isRight;
|
const isSibling = isLeft || isRight;
|
||||||
|
|
||||||
// 逻辑包含循环
|
// 逻辑包含循环
|
||||||
const contain = (isPlainSequence
|
const contain =
|
||||||
&& (((isNullish(start2) || isSequence(judge, start2, start1))
|
(isPlainSequence &&
|
||||||
&& (isNullish(end2) || isSequence(judge, end2, start1)))
|
(((isNullish(start2) || isSequence(judge, start2, start1)) &&
|
||||||
|| ((isNullish(start2) || isSequence(start1, start2, end1))
|
(isNullish(end2) || isSequence(judge, end2, start1))) ||
|
||||||
&& (isNullish(end2) || isSequence(start1, end2, end1)))))
|
((isNullish(start2) || isSequence(start1, start2, end1)) &&
|
||||||
|| (!isPlainSequence
|
(isNullish(end2) || isSequence(start1, end2, end1))))) ||
|
||||||
&& (judge < start1
|
(!isPlainSequence &&
|
||||||
? ((isNullish(start2) || isSequence(judge, start2, start1))
|
(judge < start1
|
||||||
&& (isNullish(end2) || isSequence(judge, end2, start1)))
|
? ((isNullish(start2) || isSequence(judge, start2, start1)) &&
|
||||||
|| ((isNullish(start2) || isSequence(start1, start2, end1))
|
(isNullish(end2) || isSequence(judge, end2, start1))) ||
|
||||||
&& (isNullish(end2) || isSequence(start1, end2, end1)))
|
((isNullish(start2) || isSequence(start1, start2, end1)) &&
|
||||||
: ((isNullish(start2) || isSequence(start1, start2, judge))
|
(isNullish(end2) || isSequence(start1, end2, end1)))
|
||||||
&& (isNullish(end2) || isSequence(start1, end2, judge)))
|
: ((isNullish(start2) || isSequence(start1, start2, judge)) &&
|
||||||
|| ((isNullish(start2) || isSequence(judge, start2, end1))
|
(isNullish(end2) || isSequence(start1, end2, judge))) ||
|
||||||
&& (isNullish(end2) || isSequence(judge, end2, end1)))));
|
((isNullish(start2) || isSequence(judge, start2, end1)) &&
|
||||||
|
(isNullish(end2) || isSequence(judge, end2, end1)))));
|
||||||
// 循环存在封闭区间，并且循环包含逻辑
|
// 循环存在封闭区间，并且循环包含逻辑
|
||||||
const contained = !isNullish(start2)
|
const contained =
|
||||||
&& !isNullish(end2)
|
!isNullish(start2) &&
|
||||||
|
!isNullish(end2) &&
|
||||||
// [judge, start1, end1];
|
// [judge, start1, end1];
|
||||||
&& ((isPlainSequence && start2 <= judge && end1 <= end2)
|
((isPlainSequence && start2 <= judge && end1 <= end2) ||
|
||||||
// [judge, start1, end1];
|
// [judge, start1, end1];
|
||||||
// [start1, judge, end1];
|
// [start1, judge, end1];
|
||||||
|| (!isPlainSequence && start2 <= start1 && start2 <= judge && end1 <= end2));
|
(!isPlainSequence && start2 <= start1 && start2 <= judge && end1 <= end2));
|
||||||
// 循环不存在封闭区间
|
// 循环不存在封闭区间
|
||||||
const unCircled = (!isNullish(start2)
|
const unCircled =
|
||||||
&& isNullish(end2)
|
(!isNullish(start2) &&
|
||||||
&& ((isPlainSequence && start2 === judge) || (!isPlainSequence && judge < start1)
|
isNullish(end2) &&
|
||||||
|
((isPlainSequence && start2 === judge) || (!isPlainSequence && judge < start1)
|
||||||
? start2 === judge
|
? start2 === judge
|
||||||
: start2 === start1))
|
: start2 === start1)) ||
|
||||||
|| (isNullish(start2) && !isNullish(end2) && end2 === end1);
|
(isNullish(start2) && !isNullish(end2) && end2 === end1);
|
||||||
|
|
||||||
return !(isSibling || contain || contained || unCircled);
|
return !(isSibling || contain || contained || unCircled);
|
||||||
}
|
}
|
||||||
@@ -413,7 +420,8 @@ function isSequence(s1, s2, s3, equal) {
|
|||||||
* @param store
|
* @param store
|
||||||
*/
|
*/
|
||||||
export function updateNewQuestionsByLoopingEffect(quesSaveParam, store) {
|
export function updateNewQuestionsByLoopingEffect(quesSaveParam, store) {
|
||||||
const { questionInfoBeforeModified = {}, questionInfo = {} } = JSON.parse(JSON.stringify(store.state.common)) || {};
|
const { questionInfoBeforeModified = {}, questionInfo = {} } =
|
||||||
|
JSON.parse(JSON.stringify(store.state.common)) || {};
|
||||||
|
|
||||||
const oldPages = questionInfoBeforeModified.survey.pages;
|
const oldPages = questionInfoBeforeModified.survey.pages;
|
||||||
const newQuestions = questionInfo.questions;
|
const newQuestions = questionInfo.questions;
|
||||||
@@ -442,7 +450,9 @@ export function updateNewQuestionsByLoopingEffect(quesSaveParam, store) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
const movedOutOfCycleQuestions = newQuestions.filter((i) => moveOutOfCycleQuestionIndex.includes(i.question_index));
|
const movedOutOfCycleQuestions = newQuestions.filter((i) =>
|
||||||
|
moveOutOfCycleQuestionIndex.includes(i.question_index)
|
||||||
|
);
|
||||||
|
|
||||||
if (movedOutOfCycleQuestions.length) {
|
if (movedOutOfCycleQuestions.length) {
|
||||||
if (!quesSaveParam.newQuestion) {
|
if (!quesSaveParam.newQuestion) {
|
||||||
|
|||||||
@@ -1,2 +1,2 @@
|
|||||||
export const surveyQuestion
|
export const surveyQuestion =
|
||||||
= 'https://yls-api-uat.dctest.digitalyili.com/api/console/surveys/RWNK9BYp/questions';
|
'https://yls-api-uat.dctest.digitalyili.com/api/console/surveys/RWNK9BYp/questions';
|
||||||
|
|||||||
@@ -38,10 +38,10 @@ service.interceptors.request.use(
|
|||||||
service.interceptors.response.use(
|
service.interceptors.response.use(
|
||||||
(response) => {
|
(response) => {
|
||||||
if (
|
if (
|
||||||
response.status === 200
|
response.status === 200 ||
|
||||||
|| response.status === 201
|
response.status === 201 ||
|
||||||
|| response.status === 202
|
response.status === 202 ||
|
||||||
|| response.status === 204
|
response.status === 204
|
||||||
) {
|
) {
|
||||||
if (response.config.method === 'put') {
|
if (response.config.method === 'put') {
|
||||||
// message.success('保存中...');
|
// message.success('保存中...');
|
||||||
|
|||||||
@@ -44,10 +44,10 @@ service.interceptors.request.use(
|
|||||||
service.interceptors.response.use(
|
service.interceptors.response.use(
|
||||||
(response) => {
|
(response) => {
|
||||||
if (
|
if (
|
||||||
response.status === 200
|
response.status === 200 ||
|
||||||
|| response.status === 201
|
response.status === 201 ||
|
||||||
|| response.status === 202
|
response.status === 202 ||
|
||||||
|| response.status === 204
|
response.status === 204
|
||||||
) {
|
) {
|
||||||
if (response.config.method === 'put') {
|
if (response.config.method === 'put') {
|
||||||
// message.success('保存中...');
|
// message.success('保存中...');
|
||||||
|
|||||||
@@ -144,8 +144,8 @@
|
|||||||
<BeforeRate
|
<BeforeRate
|
||||||
v-if="
|
v-if="
|
||||||
log.logic !== 'always' &&
|
log.logic !== 'always' &&
|
||||||
log.is_answer !== 0 &&
|
log.is_answer !== 0 &&
|
||||||
[5, 106].includes(log.question_type)
|
[5, 106].includes(log.question_type)
|
||||||
"
|
"
|
||||||
:activeQuestion="activeQuestion"
|
:activeQuestion="activeQuestion"
|
||||||
:logic="log"
|
:logic="log"
|
||||||
|
|||||||
@@ -108,9 +108,9 @@ function isSurplus() {
|
|||||||
return false;
|
return false;
|
||||||
} else {
|
} else {
|
||||||
return (
|
return (
|
||||||
parseFloat(((localConfig.value.max - localConfig.value.min) * 1000).toFixed(4, 10))
|
parseFloat(((localConfig.value.max - localConfig.value.min) * 1000).toFixed(4, 10)) %
|
||||||
% parseFloat((localConfig.value.score_interval * 1000).toFixed(4, 10))
|
parseFloat((localConfig.value.score_interval * 1000).toFixed(4, 10)) ===
|
||||||
=== 0
|
0
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -65,9 +65,10 @@ const emitValue = () => {
|
|||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.other_input::placeholder {
|
.other_input::placeholder {
|
||||||
font-size: 14px;
|
|
||||||
color: #d7d7d7;
|
color: #d7d7d7;
|
||||||
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -21,14 +21,14 @@ const { element } = toRefs(props);
|
|||||||
*/
|
*/
|
||||||
const tableInputTypeMapping = (/** regx?: any */) => {
|
const tableInputTypeMapping = (/** regx?: any */) => {
|
||||||
switch (element.value.question_type) {
|
switch (element.value.question_type) {
|
||||||
case 8:
|
case 8:
|
||||||
return 'text';
|
return 'text';
|
||||||
case 9:
|
case 9:
|
||||||
return 'radio';
|
return 'radio';
|
||||||
case 10:
|
case 10:
|
||||||
return 'checkbox';
|
return 'checkbox';
|
||||||
default:
|
default:
|
||||||
return 'radio';
|
return 'radio';
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -42,7 +42,7 @@ const props = defineProps<{
|
|||||||
columns: { option: string; editor?: boolean }[];
|
columns: { option: string; editor?: boolean }[];
|
||||||
questionType: number;
|
questionType: number;
|
||||||
matrixAnswer: { [key: string]: any };
|
matrixAnswer: { [key: string]: any };
|
||||||
rowRecord:(number | string)[];
|
rowRecord: (number | string)[];
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
/* const emits = */ defineEmits(['update:matrixAnswer', 'update:rowRecord']);
|
/* const emits = */ defineEmits(['update:matrixAnswer', 'update:rowRecord']);
|
||||||
|
|||||||
@@ -23,14 +23,14 @@ const matrixAnswer = ref({
|
|||||||
*/
|
*/
|
||||||
const tableInputTypeMapping = (/** regx?: any */) => {
|
const tableInputTypeMapping = (/** regx?: any */) => {
|
||||||
switch (element.question_type) {
|
switch (element.question_type) {
|
||||||
case 8:
|
case 8:
|
||||||
return 'text';
|
return 'text';
|
||||||
case 9:
|
case 9:
|
||||||
return 'radio';
|
return 'radio';
|
||||||
case 10:
|
case 10:
|
||||||
return 'checkbox';
|
return 'checkbox';
|
||||||
default:
|
default:
|
||||||
return 'radio';
|
return 'radio';
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -67,55 +67,55 @@ function handleColNameChange(rowOption: string, colOption: string, e: any) {
|
|||||||
|
|
||||||
// 不同的 question_type 的 matrix 问卷处理不同的结果
|
// 不同的 question_type 的 matrix 问卷处理不同的结果
|
||||||
switch (element.question_type) {
|
switch (element.question_type) {
|
||||||
case 8: {
|
case 8: {
|
||||||
// 获取输入框元素
|
// 获取输入框元素
|
||||||
const inputElement = e.target as HTMLInputElement;
|
const inputElement = e.target as HTMLInputElement;
|
||||||
// 如果没有获取到输入框元素，则直接返回
|
// 如果没有获取到输入框元素，则直接返回
|
||||||
if (!inputElement) return;
|
if (!inputElement) return;
|
||||||
// 将输入框的值保存到 rowRecord 对应位置
|
// 将输入框的值保存到 rowRecord 对应位置
|
||||||
rowRecord[col] = e!.target!.value;
|
rowRecord[col] = e!.target!.value;
|
||||||
// 清空 matrixAnswer 的 answer 属性
|
// 清空 matrixAnswer 的 answer 属性
|
||||||
matrixAnswer.value.answer = {};
|
matrixAnswer.value.answer = {};
|
||||||
// 遍历所有行选项
|
// 遍历所有行选项
|
||||||
element.options[0].forEach((_, rowIndex) => {
|
element.options[0].forEach((_, rowIndex) => {
|
||||||
// 获取当前行记录
|
// 获取当前行记录
|
||||||
const colOptions = rowRecord[rowIndex];
|
const colOptions = rowRecord[rowIndex];
|
||||||
// 如果当前行有记录，则更新 matrixAnswer 的 answer 属性
|
// 如果当前行有记录，则更新 matrixAnswer 的 answer 属性
|
||||||
if (colOptions) {
|
if (colOptions) {
|
||||||
matrixAnswer.value.answer[`R${rowIndex + 1}_C${col + 1}`] = colOptions;
|
matrixAnswer.value.answer[`R${rowIndex + 1}_C${col + 1}`] = colOptions;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case 9:
|
case 9:
|
||||||
// 将选择的行索引加1后保存到 rowRecord 对应位置
|
// 将选择的行索引加1后保存到 rowRecord 对应位置
|
||||||
rowRecord[col] = row + 1;
|
rowRecord[col] = row + 1;
|
||||||
// 清空 matrixAnswer 的 answer 属性
|
// 清空 matrixAnswer 的 answer 属性
|
||||||
matrixAnswer.value.answer = {};
|
matrixAnswer.value.answer = {};
|
||||||
// 遍历 rowRecord，更新 matrixAnswer 的 answer 属性
|
// 遍历 rowRecord，更新 matrixAnswer 的 answer 属性
|
||||||
rowRecord.forEach((row, index) => {
|
rowRecord.forEach((row, index) => {
|
||||||
matrixAnswer.value.answer[`${index + 1}_${row}`] = 1;
|
matrixAnswer.value.answer[`${index + 1}_${row}`] = 1;
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
case 10:
|
case 10:
|
||||||
// 将选择的行索引加1后添加到 rowRecord 对应位置的数组中
|
// 将选择的行索引加1后添加到 rowRecord 对应位置的数组中
|
||||||
rowRecord[col] = (rowRecord[col] || []).concat(row + 1);
|
rowRecord[col] = (rowRecord[col] || []).concat(row + 1);
|
||||||
// 清空 matrixAnswer 的 answer 属性
|
// 清空 matrixAnswer 的 answer 属性
|
||||||
matrixAnswer.value.answer = {};
|
matrixAnswer.value.answer = {};
|
||||||
// 遍历所有行选项
|
// 遍历所有行选项
|
||||||
element.options[0].forEach((rowOption, rowIndex) => {
|
element.options[0].forEach((rowOption, rowIndex) => {
|
||||||
// 获取当前行记录
|
// 获取当前行记录
|
||||||
const colOptions = rowRecord[rowIndex];
|
const colOptions = rowRecord[rowIndex];
|
||||||
// 如果当前行有记录，则更新 matrixAnswer 的 answer 属性
|
// 如果当前行有记录，则更新 matrixAnswer 的 answer 属性
|
||||||
if (colOptions) {
|
if (colOptions) {
|
||||||
colOptions.forEach((col: any) => {
|
colOptions.forEach((col: any) => {
|
||||||
matrixAnswer.value.answer[`R${rowIndex + 1}_C${col}`] = true;
|
matrixAnswer.value.answer[`R${rowIndex + 1}_C${col}`] = true;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -43,7 +43,7 @@ const props = defineProps<{
|
|||||||
columns: { option: string; editor?: boolean }[];
|
columns: { option: string; editor?: boolean }[];
|
||||||
questionType: number;
|
questionType: number;
|
||||||
matrixAnswer: { [key: string]: any };
|
matrixAnswer: { [key: string]: any };
|
||||||
rowRecord:(number | string)[];
|
rowRecord: (number | string)[];
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
/* const emits = */ defineEmits(['update:matrixAnswer', 'update:rowRecord']);
|
/* const emits = */ defineEmits(['update:matrixAnswer', 'update:rowRecord']);
|
||||||
|
|||||||
@@ -12,7 +12,7 @@ const { element, active } = toRefs(props);
|
|||||||
const signatureCanvas = useTemplateRef('signatureCanvas');
|
const signatureCanvas = useTemplateRef('signatureCanvas');
|
||||||
|
|
||||||
const canvasWidth = ref(100);
|
const canvasWidth = ref(100);
|
||||||
const canvasHeight = computed(() => canvasWidth.value / 2.5);
|
const canvasHeight = computed(() => canvasWidth.value / 1.5);
|
||||||
const showSignText = ref(true);
|
const showSignText = ref(true);
|
||||||
const isEraser = ref(false);
|
const isEraser = ref(false);
|
||||||
|
|
||||||
@@ -60,7 +60,7 @@ const togglePen = () => {
|
|||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
if (!signatureCanvas.value) return;
|
if (!signatureCanvas.value) return;
|
||||||
// 将 canvas 宽度和窗口的宽度保持一致
|
// 将 canvas 宽度和窗口的宽度保持一致
|
||||||
canvasWidth.value = window.innerWidth - 50;
|
canvasWidth.value = window.innerWidth - 60;
|
||||||
|
|
||||||
// 获取 canvas 上下文
|
// 获取 canvas 上下文
|
||||||
ctx = signatureCanvas.value.getContext('2d')!;
|
ctx = signatureCanvas.value.getContext('2d')!;
|
||||||
@@ -170,44 +170,48 @@ const emitValue = () => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<van-cell>
|
<!-- <van-cell>-->
|
||||||
<van-field
|
<van-field
|
||||||
:label="element.stem"
|
:label="element.stem"
|
||||||
:required="element.config.is_required === 1"
|
:required="element.config.is_required === 1"
|
||||||
label-align="top"
|
label-align="top"
|
||||||
:border="false"
|
:border="false"
|
||||||
readonly
|
readonly
|
||||||
class="base-select"
|
>
|
||||||
>
|
<template #left-icon>
|
||||||
<template #left-icon>
|
{{ index + 1 }}
|
||||||
{{ index + 1 }}
|
</template>
|
||||||
</template>
|
<template #label>
|
||||||
<template #label>
|
<contenteditable v-model="element.stem" :active="active" @blur="emitValue"></contenteditable>
|
||||||
<contenteditable
|
</template>
|
||||||
v-model="element.stem"
|
<template #input>
|
||||||
:active="active"
|
<div class="sign-question">
|
||||||
@blur="emitValue"
|
<canvas
|
||||||
></contenteditable>
|
ref="signatureCanvas"
|
||||||
</template>
|
:width="canvasWidth"
|
||||||
<template #input>
|
:height="canvasHeight"
|
||||||
<div class="sign-question">
|
style="border: 1px dashed #ccc; border-radius: 4px"
|
||||||
<canvas
|
>
|
||||||
ref="signatureCanvas"
|
</canvas>
|
||||||
:width="canvasWidth"
|
<div class="sign-text" v-if="active" :class="{ show: active }">
|
||||||
:height="canvasHeight"
|
<span
|
||||||
style="border: 1px solid #ccc; border-radius: 4px"
|
class="icon mobilefont mobilefont-qingkong"
|
||||||
>
|
title="清空"
|
||||||
</canvas>
|
@click="clearCanvas"
|
||||||
<div class="sign-text" :class="{ show: showSignText }">
|
></span>
|
||||||
<span @click="clearCanvas">清空</span>
|
<span class="icon mobilefont mobilefont-chexiao" @click="undo"></span>
|
||||||
<span @click="undo">撤销</span>
|
<span
|
||||||
<span @click="togglePen">{{ isEraser ? '画笔' : '橡皮擦' }}</span>
|
class="icon mobilefont"
|
||||||
<span @click="saveCanvas">完成并上传</span>
|
:class="isEraser ? 'mobilefont-huabi' : 'mobilefont-rubber'"
|
||||||
</div>
|
@click="togglePen"
|
||||||
|
></span>
|
||||||
|
<span class="icon mobilefont mobilefont-shangchuan" @click="saveCanvas"></span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
<div class="sign-tips" v-else>请在空白区域书写您的签名</div>
|
||||||
</van-field>
|
</div>
|
||||||
</van-cell>
|
</template>
|
||||||
|
</van-field>
|
||||||
|
<!-- </van-cell>-->
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@@ -255,5 +259,13 @@ const emitValue = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.sign-tips {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
width: max-content;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
color: #cdcdcd;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -11,7 +11,8 @@
|
|||||||
class="iconfont active-icon"
|
class="iconfont active-icon"
|
||||||
:style="{ marginRight: isLastPage ? '0' : '16px' }"
|
:style="{ marginRight: isLastPage ? '0' : '16px' }"
|
||||||
@click="activePage"
|
@click="activePage"
|
||||||
></i>
|
></i
|
||||||
|
>
|
||||||
<template v-if="!isLastPage">
|
<template v-if="!isLastPage">
|
||||||
<i class="iconfont moverQues" style="margin-right: 16px"></i>
|
<i class="iconfont moverQues" style="margin-right: 16px"></i>
|
||||||
<i class="iconfont" @click="deleteHandle"></i>
|
<i class="iconfont" @click="deleteHandle"></i>
|
||||||
|
|||||||
@@ -29,9 +29,8 @@ onMounted(async () => {
|
|||||||
// contentShow.value = true;
|
// contentShow.value = true;
|
||||||
// }
|
// }
|
||||||
});
|
});
|
||||||
function create () {
|
function create() {
|
||||||
show.value = true;
|
show.value = true;
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -58,13 +57,13 @@ function create () {
|
|||||||
padding: 30px 10px 80px;
|
padding: 30px 10px 80px;
|
||||||
background: linear-gradient(0deg, #f5f5f5 0%, #f5f5f5 84%, #a5d380 100%);
|
background: linear-gradient(0deg, #f5f5f5 0%, #f5f5f5 84%, #a5d380 100%);
|
||||||
|
|
||||||
&> :first-child {
|
& > :first-child {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
|
|
||||||
&>div {
|
& > div {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
|
|||||||
@@ -20,11 +20,11 @@
|
|||||||
<div class="survey_con_label flex">
|
<div class="survey_con_label flex">
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<img src="" alt="" />
|
<img src="" alt="" />
|
||||||
{{ survey.scene_name }}
|
{{ survey.scene_name }} |
|
||||||
</div>
|
</div>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<img src="" alt="" />
|
<img src="" alt="" />
|
||||||
{{ survey.source === 1 ? '移动端' : 'PC端' }}
|
{{ survey.source === 1 ? '移动端' : 'PC端' }} |
|
||||||
</div>
|
</div>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<img src="" alt="" />
|
<img src="" alt="" />
|
||||||
@@ -46,7 +46,7 @@ import { consoleSurveys } from '@/api/home/index.js';
|
|||||||
const survey = ref({
|
const survey = ref({
|
||||||
project_name: ''
|
project_name: ''
|
||||||
});
|
});
|
||||||
const fetchSurveys = async() => {
|
const fetchSurveys = async () => {
|
||||||
const params = {
|
const params = {
|
||||||
page: 1,
|
page: 1,
|
||||||
per_page: 10,
|
per_page: 10,
|
||||||
@@ -117,18 +117,22 @@ onMounted(() => {
|
|||||||
.survey_con_label {
|
.survey_con_label {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
color: #666;
|
color: #666;
|
||||||
font-size: 12px;
|
font-size: 10px !important;
|
||||||
|
|
||||||
|
div {
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.survey_remark {
|
.survey_remark {
|
||||||
|
box-sizing: border-box;
|
||||||
margin: 10px 0 0 10px;
|
margin: 10px 0 0 10px;
|
||||||
padding-bottom: 10px;
|
padding: 10px 5px;
|
||||||
|
border-radius: 10px;
|
||||||
color: #828282;
|
color: #828282;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 16px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,7 +3,9 @@
|
|||||||
<div v-for="item in 10" :key="item" class="template">
|
<div v-for="item in 10" :key="item" class="template">
|
||||||
<img src="https://picsum.photos/131/128" width="110" height="100" alt="" />
|
<img src="https://picsum.photos/131/128" width="110" height="100" alt="" />
|
||||||
<span>报名/签到模板</span>
|
<span>报名/签到模板</span>
|
||||||
<span style="color: rgb(127, 127, 127)">报名签到 | 引用 {{ item }} 次 | 创建人: {{ '张三' }}</span>
|
<span style="color: rgb(127, 127, 127)"
|
||||||
|
>报名签到 | 引用 {{ item }} 次 | 创建人: {{ '张三' }}</span
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -227,8 +227,8 @@ export default defineComponent({
|
|||||||
.map((option) => {
|
.map((option) => {
|
||||||
return this.wares.find(
|
return this.wares.find(
|
||||||
(ware) =>
|
(ware) =>
|
||||||
ware.question_index === option.question_index
|
ware.question_index === option.question_index &&
|
||||||
&& ware.option_index === option.option_index
|
ware.option_index === option.option_index
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
wares = wares.filter((x) => x);
|
wares = wares.filter((x) => x);
|
||||||
|
|||||||
@@ -144,7 +144,7 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
debounce(func, wait) {
|
debounce(func, wait) {
|
||||||
let timeout;
|
let timeout;
|
||||||
return function(...args) {
|
return function (...args) {
|
||||||
clearTimeout(timeout);
|
clearTimeout(timeout);
|
||||||
timeout = setTimeout(() => func.apply(this, args), wait);
|
timeout = setTimeout(() => func.apply(this, args), wait);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -102,37 +102,37 @@ export default defineComponent({
|
|||||||
const isEndUrl = computed(() => {
|
const isEndUrl = computed(() => {
|
||||||
const code = props.action ? props.action.code : props.code;
|
const code = props.action ? props.action.code : props.code;
|
||||||
return (
|
return (
|
||||||
(code === 20004
|
(code === 20004 &&
|
||||||
&& props.survey.screening_end_url_select
|
props.survey.screening_end_url_select &&
|
||||||
&& props.survey.screening_end_url)
|
props.survey.screening_end_url) ||
|
||||||
|| (code === 20011 && props.survey.success_end_url_select && props.survey.success_end_url)
|
(code === 20011 && props.survey.success_end_url_select && props.survey.success_end_url) ||
|
||||||
|| (code === 20016 && props.survey.quota_end_url_select && props.survey.quota_end_url)
|
(code === 20016 && props.survey.quota_end_url_select && props.survey.quota_end_url)
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
// 跳转
|
// 跳转
|
||||||
function toEndUrl() {
|
function toEndUrl() {
|
||||||
switch (props.action.code) {
|
switch (props.action.code) {
|
||||||
case 20004: // 被甄别
|
case 20004: // 被甄别
|
||||||
if (props.survey.screening_end_url_select && props.survey.screening_end_url) {
|
if (props.survey.screening_end_url_select && props.survey.screening_end_url) {
|
||||||
const url = props.survey.screening_end_url;
|
const url = props.survey.screening_end_url;
|
||||||
toUrl(url);
|
toUrl(url);
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case 20011: // 成功
|
case 20011: // 成功
|
||||||
if (props.survey.success_end_url_select && props.survey.success_end_url) {
|
if (props.survey.success_end_url_select && props.survey.success_end_url) {
|
||||||
const url = props.survey.success_end_url;
|
const url = props.survey.success_end_url;
|
||||||
toUrl(url);
|
toUrl(url);
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case 20016: // 配额超限
|
case 20016: // 配额超限
|
||||||
if (props.survey.quota_end_url_select && props.survey.quota_end_url) {
|
if (props.survey.quota_end_url_select && props.survey.quota_end_url) {
|
||||||
const url = props.survey.quota_end_url;
|
const url = props.survey.quota_end_url;
|
||||||
toUrl(url);
|
toUrl(url);
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -264,16 +264,16 @@ export default defineComponent({
|
|||||||
});
|
});
|
||||||
|
|
||||||
if (
|
if (
|
||||||
!compareArrayByField(options.value, newOptions, 'option_key')
|
!compareArrayByField(options.value, newOptions, 'option_key') ||
|
||||||
|| !compareArrayByField(options.value, newOptions, 'option')
|
!compareArrayByField(options.value, newOptions, 'option')
|
||||||
) {
|
) {
|
||||||
options.value = newOptions;
|
options.value = newOptions;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 清空值和答案
|
// 清空值和答案
|
||||||
if (
|
if (
|
||||||
value.value
|
value.value &&
|
||||||
&& options.value.findIndex((option) => option.option_key === value.value) === -1
|
options.value.findIndex((option) => option.option_key === value.value) === -1
|
||||||
) {
|
) {
|
||||||
// 清空值
|
// 清空值
|
||||||
value.value = '';
|
value.value = '';
|
||||||
@@ -291,8 +291,8 @@ export default defineComponent({
|
|||||||
() => options.value,
|
() => options.value,
|
||||||
(val, oldVal) => {
|
(val, oldVal) => {
|
||||||
if (
|
if (
|
||||||
compareArrayByField(val, oldVal || [], 'option_key')
|
compareArrayByField(val, oldVal || [], 'option_key') &&
|
||||||
&& compareArrayByField(val, oldVal || [], 'option')
|
compareArrayByField(val, oldVal || [], 'option')
|
||||||
) {
|
) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -132,8 +132,8 @@ export default defineComponent({
|
|||||||
const value = matchValue.replace('[%cite(', '').replace(')%]', '');
|
const value = matchValue.replace('[%cite(', '').replace(')%]', '');
|
||||||
let replacement = ''; // 替换文本
|
let replacement = ''; // 替换文本
|
||||||
// 查找引用问题
|
// 查找引用问题
|
||||||
const question
|
const question =
|
||||||
= props.questions.find((question) => {
|
props.questions.find((question) => {
|
||||||
// 矩阵题
|
// 矩阵题
|
||||||
if (question.question_type >= 8 && question.question_type <= 11) {
|
if (question.question_type >= 8 && question.question_type <= 11) {
|
||||||
return question.title === value.split('_R')[0].split('_C')[0];
|
return question.title === value.split('_R')[0].split('_C')[0];
|
||||||
@@ -143,8 +143,8 @@ export default defineComponent({
|
|||||||
return question.title === value.split('_A')[0];
|
return question.title === value.split('_A')[0];
|
||||||
}
|
}
|
||||||
return question.title === value;
|
return question.title === value;
|
||||||
})
|
}) ||
|
||||||
|| props.questions.find((question) => {
|
props.questions.find((question) => {
|
||||||
// 矩阵题
|
// 矩阵题
|
||||||
if (question.question_type >= 8 && question.question_type <= 11) {
|
if (question.question_type >= 8 && question.question_type <= 11) {
|
||||||
return question.title === (value + cycleIndexStr).split('_R')[0].split('_C')[0];
|
return question.title === (value + cycleIndexStr).split('_R')[0].split('_C')[0];
|
||||||
@@ -171,8 +171,8 @@ export default defineComponent({
|
|||||||
replacement = answer[option.option_key];
|
replacement = answer[option.option_key];
|
||||||
}
|
}
|
||||||
} else if (
|
} else if (
|
||||||
question.question_type === 2
|
question.question_type === 2 &&
|
||||||
&& Object.keys(answer).length >= question.config.min_select
|
Object.keys(answer).length >= question.config.min_select
|
||||||
) {
|
) {
|
||||||
// 查找引用选项(多选)
|
// 查找引用选项(多选)
|
||||||
options.forEach((option) => {
|
options.forEach((option) => {
|
||||||
|
|||||||
@@ -350,7 +350,7 @@ export const language = {
|
|||||||
zh: '请点击查看图片'
|
zh: '请点击查看图片'
|
||||||
},
|
},
|
||||||
NoteCantViewAfterTimeLimit: {
|
NoteCantViewAfterTimeLimit: {
|
||||||
en: 'Note: Can\'t view after time limit',
|
en: "Note: Can't view after time limit",
|
||||||
zh: '注意：超过显示时间限制后将无法再次查看'
|
zh: '注意：超过显示时间限制后将无法再次查看'
|
||||||
},
|
},
|
||||||
DisplayTimeLimitExceeded: {
|
DisplayTimeLimitExceeded: {
|
||||||
|
|||||||
@@ -250,10 +250,10 @@ function quesHandle(answer, logChild) {
|
|||||||
const matrixRateHandle = () => {
|
const matrixRateHandle = () => {
|
||||||
// 如果配置的逻辑中参数为空,则代表没有配置逻辑匹配值，此时不做校验
|
// 如果配置的逻辑中参数为空,则代表没有配置逻辑匹配值，此时不做校验
|
||||||
if (
|
if (
|
||||||
logChild.cell_index === 0
|
logChild.cell_index === 0 ||
|
||||||
|| logChild.row_index === 0
|
logChild.row_index === 0 ||
|
||||||
|| !logChild.operator
|
!logChild.operator ||
|
||||||
|| !logChild.value
|
!logChild.value
|
||||||
) {
|
) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
@@ -265,10 +265,10 @@ function quesHandle(answer, logChild) {
|
|||||||
const matrixInputHandle = () => {
|
const matrixInputHandle = () => {
|
||||||
// 如果配置的逻辑中参数为空,则代表没有配置逻辑匹配值，此时不做校验
|
// 如果配置的逻辑中参数为空,则代表没有配置逻辑匹配值，此时不做校验
|
||||||
if (
|
if (
|
||||||
logChild.cell_index === 0
|
logChild.cell_index === 0 ||
|
||||||
|| logChild.row_index === 0
|
logChild.row_index === 0 ||
|
||||||
|| !logChild.operator
|
!logChild.operator ||
|
||||||
|| !logChild.value
|
!logChild.value
|
||||||
) {
|
) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
@@ -428,59 +428,59 @@ function getConditionStatus(logChild) {
|
|||||||
if (answer) {
|
if (answer) {
|
||||||
try {
|
try {
|
||||||
switch (logChild.question_type) {
|
switch (logChild.question_type) {
|
||||||
case 1:
|
case 1:
|
||||||
quesStatus = quesHandles.choiceHandle(config);
|
quesStatus = quesHandles.choiceHandle(config);
|
||||||
break;
|
break;
|
||||||
case 2:
|
case 2:
|
||||||
quesStatus = quesHandles.choiceCheckBoxHandle(config);
|
quesStatus = quesHandles.choiceCheckBoxHandle(config);
|
||||||
break;
|
break;
|
||||||
case 3:
|
case 3:
|
||||||
quesStatus = quesHandles.cascaderHandle();
|
quesStatus = quesHandles.cascaderHandle();
|
||||||
break;
|
break;
|
||||||
case 4:
|
case 4:
|
||||||
quesStatus = quesHandles.inputHandle();
|
quesStatus = quesHandles.inputHandle();
|
||||||
break;
|
break;
|
||||||
case 5:
|
case 5:
|
||||||
quesStatus = quesHandles.rateHandle();
|
quesStatus = quesHandles.rateHandle();
|
||||||
break;
|
break;
|
||||||
case 7:
|
case 7:
|
||||||
quesStatus = quesHandles.dateTimeHandle();
|
quesStatus = quesHandles.dateTimeHandle();
|
||||||
break;
|
break;
|
||||||
case 8:
|
case 8:
|
||||||
quesStatus = quesHandles.matrixInputHandle();
|
quesStatus = quesHandles.matrixInputHandle();
|
||||||
break;
|
break;
|
||||||
case 9:
|
case 9:
|
||||||
quesStatus = quesHandles.matrixRadioHandle(config);
|
quesStatus = quesHandles.matrixRadioHandle(config);
|
||||||
break;
|
break;
|
||||||
case 10:
|
case 10:
|
||||||
quesStatus = quesHandles.matrixCheckboxHandle(config);
|
quesStatus = quesHandles.matrixCheckboxHandle(config);
|
||||||
break;
|
break;
|
||||||
case 11:
|
case 11:
|
||||||
quesStatus = quesHandles.matrixRateHandle();
|
quesStatus = quesHandles.matrixRateHandle();
|
||||||
break;
|
break;
|
||||||
case 13:
|
case 13:
|
||||||
quesStatus = quesHandles.imgRadioHandle();
|
quesStatus = quesHandles.imgRadioHandle();
|
||||||
break;
|
break;
|
||||||
case 14:
|
case 14:
|
||||||
quesStatus = quesHandles.imgCheckBoxHandle();
|
quesStatus = quesHandles.imgCheckBoxHandle();
|
||||||
break;
|
break;
|
||||||
case 15:
|
case 15:
|
||||||
quesStatus = quesHandles.classifyHandle();
|
quesStatus = quesHandles.classifyHandle();
|
||||||
break;
|
break;
|
||||||
case 16:
|
case 16:
|
||||||
quesStatus = quesHandles.sortHandle();
|
quesStatus = quesHandles.sortHandle();
|
||||||
break;
|
break;
|
||||||
case 17:
|
case 17:
|
||||||
quesStatus = quesHandles.constantSumHandle();
|
quesStatus = quesHandles.constantSumHandle();
|
||||||
break;
|
break;
|
||||||
case 23:
|
case 23:
|
||||||
quesStatus = quesHandles.agreementHandle();
|
quesStatus = quesHandles.agreementHandle();
|
||||||
break;
|
break;
|
||||||
case 101:
|
case 101:
|
||||||
quesStatus = quesHandles.psmHandle(config);
|
quesStatus = quesHandles.psmHandle(config);
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
// console.log(error);
|
// console.log(error);
|
||||||
@@ -519,10 +519,10 @@ function getlogicStatus(questionData) {
|
|||||||
// } else {
|
// } else {
|
||||||
// statusStr = statusStr + conditionStatus;
|
// statusStr = statusStr + conditionStatus;
|
||||||
// }
|
// }
|
||||||
statusStr
|
statusStr =
|
||||||
= statusStr
|
statusStr +
|
||||||
+ (logChild.logic === 'and' ? '&&' : logChild.logic === 'or' ? '||' : '')
|
(logChild.logic === 'and' ? '&&' : logChild.logic === 'or' ? '||' : '') +
|
||||||
+ conditionStatus;
|
conditionStatus;
|
||||||
});
|
});
|
||||||
// eslint-disable-next-line no-eval
|
// eslint-disable-next-line no-eval
|
||||||
logs.logicStatus = eval(statusStr);
|
logs.logicStatus = eval(statusStr);
|
||||||
|
|||||||
@@ -105,8 +105,8 @@ export default function answerMock(questionsData, page) {
|
|||||||
} else if (logic.skip_type === 4) {
|
} else if (logic.skip_type === 4) {
|
||||||
// 只计算跳转后所在页面的隐藏逻辑，否则会出现只返回最后一道隐藏选项题目的情况，导致失效
|
// 只计算跳转后所在页面的隐藏逻辑，否则会出现只返回最后一道隐藏选项题目的情况，导致失效
|
||||||
const toPage = page + 1;
|
const toPage = page + 1;
|
||||||
const hasHiddenLogicQuizPage
|
const hasHiddenLogicQuizPage =
|
||||||
= data.pages.findIndex((page) => page.includes(logic.question_index)) + 1;
|
data.pages.findIndex((page) => page.includes(logic.question_index)) + 1;
|
||||||
if (hasHiddenLogicQuizPage === toPage) {
|
if (hasHiddenLogicQuizPage === toPage) {
|
||||||
// 选项隐藏逻辑
|
// 选项隐藏逻辑
|
||||||
updateOptionHidden(data.hide_options, logic);
|
updateOptionHidden(data.hide_options, logic);
|
||||||
|
|||||||
@@ -154,9 +154,9 @@ export default defineComponent({
|
|||||||
question.error = translatedText.value.ThisIsARequiredQuestion;
|
question.error = translatedText.value.ThisIsARequiredQuestion;
|
||||||
}
|
}
|
||||||
} else if (
|
} else if (
|
||||||
answer
|
answer &&
|
||||||
&& questionType === 1
|
questionType === 1 &&
|
||||||
&& Object.keys(answer).findIndex((value) => !answer[value]) !== -1
|
Object.keys(answer).findIndex((value) => !answer[value]) !== -1
|
||||||
) {
|
) {
|
||||||
// 单选题
|
// 单选题
|
||||||
isError = true;
|
isError = true;
|
||||||
@@ -302,9 +302,9 @@ export default defineComponent({
|
|||||||
} else if (answer && questionType === 12) {
|
} else if (answer && questionType === 12) {
|
||||||
question.error = '';
|
question.error = '';
|
||||||
} else if (
|
} else if (
|
||||||
answer
|
answer &&
|
||||||
&& questionType === 14
|
questionType === 14 &&
|
||||||
&& Object.keys(answer).length < config.min_select
|
Object.keys(answer).length < config.min_select
|
||||||
) {
|
) {
|
||||||
// 图片多选题
|
// 图片多选题
|
||||||
isError = true;
|
isError = true;
|
||||||
@@ -340,46 +340,46 @@ export default defineComponent({
|
|||||||
const { value } = answer;
|
const { value } = answer;
|
||||||
const newValue = value.replace(/\n|\r|\r\n/g, '');
|
const newValue = value.replace(/\n|\r|\r\n/g, '');
|
||||||
switch (config.text_type) {
|
switch (config.text_type) {
|
||||||
case 3: // 字母
|
case 3: // 字母
|
||||||
isError
|
isError =
|
||||||
= config.include_mark === 1
|
config.include_mark === 1
|
||||||
? !/^[a-zA-Z·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]]+$/.test(
|
? !/^[a-zA-Z·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]]+$/.test(
|
||||||
newValue
|
newValue
|
||||||
) || !newValue.length
|
) || !newValue.length
|
||||||
: !/^[a-zA-Z]+$/.test(newValue) || !newValue.length;
|
: !/^[a-zA-Z]+$/.test(newValue) || !newValue.length;
|
||||||
question.error = isError ? translatedText.value.PleaseEnterEnglishLetters : '';
|
question.error = isError ? translatedText.value.PleaseEnterEnglishLetters : '';
|
||||||
break;
|
break;
|
||||||
case 4: // 中文
|
case 4: // 中文
|
||||||
isError
|
isError =
|
||||||
= config.include_mark === 1
|
config.include_mark === 1
|
||||||
? !/^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0]|[·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]])+$/.test(
|
? !/^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0]|[·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]])+$/.test(
|
||||||
newValue
|
newValue
|
||||||
) || !newValue.length
|
) || !newValue.length
|
||||||
: !/^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0])+$/.test(
|
: !/^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0])+$/.test(
|
||||||
newValue
|
newValue
|
||||||
) || !newValue.length;
|
) || !newValue.length;
|
||||||
question.error = isError ? translatedText.value.PleaseEnterChineseWords : '';
|
question.error = isError ? translatedText.value.PleaseEnterChineseWords : '';
|
||||||
break;
|
break;
|
||||||
case 5: // 邮箱
|
case 5: // 邮箱
|
||||||
isError
|
isError =
|
||||||
= !/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
|
!/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
|
||||||
value
|
value
|
||||||
);
|
);
|
||||||
question.error = isError ? translatedText.value.PleaseEnterACorrectEmail : '';
|
question.error = isError ? translatedText.value.PleaseEnterACorrectEmail : '';
|
||||||
break;
|
break;
|
||||||
case 6: // 手机号
|
case 6: // 手机号
|
||||||
isError = !/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(value);
|
isError = !/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(value);
|
||||||
question.error = isError ? translatedText.value.PleaseEnterACorrectPhone : '';
|
question.error = isError ? translatedText.value.PleaseEnterACorrectPhone : '';
|
||||||
break;
|
break;
|
||||||
case 7: // 身份证号
|
case 7: // 身份证号
|
||||||
isError
|
isError =
|
||||||
= !/^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/.test(
|
!/^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/.test(
|
||||||
value
|
value
|
||||||
);
|
);
|
||||||
question.error = isError ? translatedText.value.PleaseEnterACorrectID : '';
|
question.error = isError ? translatedText.value.PleaseEnterACorrectID : '';
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
if (!isError && value.length < config.min && ![1, 2].includes(config.text_type)) {
|
if (!isError && value.length < config.min && ![1, 2].includes(config.text_type)) {
|
||||||
isError = true;
|
isError = true;
|
||||||
@@ -391,54 +391,54 @@ export default defineComponent({
|
|||||||
Object.keys(answer).forEach((key) => {
|
Object.keys(answer).forEach((key) => {
|
||||||
const value = answer[key];
|
const value = answer[key];
|
||||||
switch (config.text_type) {
|
switch (config.text_type) {
|
||||||
case 3: // 字母
|
case 3: // 字母
|
||||||
if (
|
if (
|
||||||
!/^[a-zA-Z·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]]+$/.test(
|
!/^[a-zA-Z·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]]+$/.test(
|
||||||
value
|
value
|
||||||
)
|
)
|
||||||
) {
|
) {
|
||||||
question.error = translatedText.value.PleaseEnterEnglishLetters;
|
question.error = translatedText.value.PleaseEnterEnglishLetters;
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case 4: // 中文
|
case 4: // 中文
|
||||||
if (
|
if (
|
||||||
!/^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0]|[·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]])+$/.test(
|
!/^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0]|[·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]])+$/.test(
|
||||||
value
|
value
|
||||||
)
|
)
|
||||||
) {
|
) {
|
||||||
question.error = translatedText.value.PleaseEnterChineseWords;
|
question.error = translatedText.value.PleaseEnterChineseWords;
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case 5: // 邮箱
|
case 5: // 邮箱
|
||||||
if (
|
if (
|
||||||
!/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
|
!/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
|
||||||
value
|
value
|
||||||
)
|
)
|
||||||
) {
|
) {
|
||||||
question.error = translatedText.value.PleaseEnterACorrectEmail;
|
question.error = translatedText.value.PleaseEnterACorrectEmail;
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case 6: // 手机号
|
case 6: // 手机号
|
||||||
if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(value)) {
|
if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(value)) {
|
||||||
question.error = translatedText.value.PleaseEnterACorrectPhone;
|
question.error = translatedText.value.PleaseEnterACorrectPhone;
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case 7: // 身份证号
|
case 7: // 身份证号
|
||||||
if (
|
if (
|
||||||
!/^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/.test(
|
!/^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/.test(
|
||||||
value
|
value
|
||||||
)
|
)
|
||||||
) {
|
) {
|
||||||
question.error = translatedText.value.PleaseEnterACorrectID;
|
question.error = translatedText.value.PleaseEnterACorrectID;
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
if (
|
if (
|
||||||
!question.error
|
!question.error &&
|
||||||
&& value.length < config.min
|
value.length < config.min &&
|
||||||
&& ![1, 2].includes(config.text_type)
|
![1, 2].includes(config.text_type)
|
||||||
) {
|
) {
|
||||||
question.error = translatedText.value.PleaseEnterMoreThanOneCharacters(config.min);
|
question.error = translatedText.value.PleaseEnterMoreThanOneCharacters(config.min);
|
||||||
}
|
}
|
||||||
@@ -814,8 +814,8 @@ export default defineComponent({
|
|||||||
const evt1 = {};
|
const evt1 = {};
|
||||||
|
|
||||||
if ([1].includes(question.question_type)) {
|
if ([1].includes(question.question_type)) {
|
||||||
evt1.value
|
evt1.value =
|
||||||
= Object.keys(question.answer)
|
Object.keys(question.answer)
|
||||||
.map((key) => (question.answer[key] ? key : undefined))
|
.map((key) => (question.answer[key] ? key : undefined))
|
||||||
.filter((i) => !!i)?.[0] || undefined;
|
.filter((i) => !!i)?.[0] || undefined;
|
||||||
evt1.options = question.list.flatMap((i) => i.options);
|
evt1.options = question.list.flatMap((i) => i.options);
|
||||||
|
|||||||
@@ -6,8 +6,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
const successImg
|
const successImg =
|
||||||
= 'https://files.axshare.com/gsc/DR6075/c7/5a/53/c75a534148d349f1bb8e185629f784ac/images/%E9%A2%84%E8%A7%88/u123.png?pageId=18fb9d8a-b9b7-465f-9bd7-625b1b78f72e';
|
'https://files.axshare.com/gsc/DR6075/c7/5a/53/c75a534148d349f1bb8e185629f784ac/images/%E9%A2%84%E8%A7%88/u123.png?pageId=18fb9d8a-b9b7-465f-9bd7-625b1b78f72e';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
Reference in New Issue
Block a user