style(css): 添加禁用状态样式并优化图标字体

- 为 primary-button 添加禁用状态样式- 更新 iconfont 字体文件和样式
- 优化 demo.css 文件中的样式规则
This commit is contained in:
陈昱达
2025-03-19 13:45:36 +08:00
parent e117ea8f7a
commit 969ea078bb
13 changed files with 177 additions and 140 deletions

8
components.d.ts vendored
View File

@@ -8,9 +8,15 @@ export {}
declare module 'vue' { declare module 'vue' {
export interface GlobalComponents { export interface GlobalComponents {
Contenteditable: typeof import('./src/components/contenteditable.vue')['default'] Contenteditable: typeof import('./src/components/contenteditable.vue')['default']
ElButton: typeof import('element-plus/es')['ElButton']
ElDropdown: typeof import('element-plus/es')['ElDropdown']
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
ElInput: typeof import('element-plus/es')['ElInput'] ElInput: typeof import('element-plus/es')['ElInput']
ElOption: typeof import('element-plus/es')['ElOption'] ElOption: typeof import('element-plus/es')['ElOption']
ElSelect: typeof import('element-plus/es')['ElSelect'] ElSelect: typeof import('element-plus/es')['ElSelect']
ElSpace: typeof import('element-plus/es')['ElSpace']
ElText: typeof import('element-plus/es')['ElText']
RichText: typeof import('./src/components/RichText.vue')['default'] RichText: typeof import('./src/components/RichText.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink'] RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView'] RouterView: typeof import('vue-router')['RouterView']
@@ -26,12 +32,14 @@ declare module 'vue' {
VanGrid: typeof import('vant/es')['Grid'] VanGrid: typeof import('vant/es')['Grid']
VanGridItem: typeof import('vant/es')['GridItem'] VanGridItem: typeof import('vant/es')['GridItem']
VanIcon: typeof import('vant/es')['Icon'] VanIcon: typeof import('vant/es')['Icon']
VanList: typeof import('vant/es')['List']
VanNavBar: typeof import('vant/es')['NavBar'] VanNavBar: typeof import('vant/es')['NavBar']
VanPicker: typeof import('vant/es')['Picker'] VanPicker: typeof import('vant/es')['Picker']
VanPopup: typeof import('vant/es')['Popup'] VanPopup: typeof import('vant/es')['Popup']
VanRadio: typeof import('vant/es')['Radio'] VanRadio: typeof import('vant/es')['Radio']
VanRadioGroup: typeof import('vant/es')['RadioGroup'] VanRadioGroup: typeof import('vant/es')['RadioGroup']
VanRow: typeof import('vant/es')['Row'] VanRow: typeof import('vant/es')['Row']
VanSearch: typeof import('vant/es')['Search']
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'] VanTab: typeof import('vant/es')['Tab']

View File

@@ -248,3 +248,10 @@ input {
background-color: #fff !important; background-color: #fff !important;
color: #2dc26b !important; color: #2dc26b !important;
} }
.primary-button.van-button--disabled {
background-color: #d8d8d8 !important;
border: 1px solid #979797 !important;
color: #4b4b59 !important;
font-weight: unset !important;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 319 B

View File

@@ -12,9 +12,9 @@
} }
.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;
} }
@@ -29,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 {
@@ -38,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 {
@@ -62,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 {
@@ -88,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;
} }
@@ -117,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;
@@ -137,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,
@@ -173,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,
@@ -184,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 {
@@ -215,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 {
@@ -262,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,
@@ -272,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;
} }
@@ -298,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 {
@@ -310,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 {
@@ -325,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,
@@ -336,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,
@@ -375,7 +372,7 @@
} }
.hljs-tag { .hljs-tag {
color: #333; color: #333333;
} }
.hljs-title, .hljs-title,
@@ -388,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 {
@@ -402,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)
@@ -413,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;
@@ -436,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 {
@@ -457,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-'],
@@ -513,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,

View File

@@ -1,155 +1,163 @@
@font-face { @font-face {
font-family: mobilefont; /* Project id 4841764 */ font-family: 'mobilefont'; /* Project id 4841764 */
src: src:
url('iconfont.woff2?t=1742213166999') format('woff2'), url('iconfont.woff2?t=1742362531320') format('woff2'),
url('iconfont.woff?t=1742213166999') format('woff'), url('iconfont.woff?t=1742362531320') format('woff'),
url('iconfont.ttf?t=1742213166999') format('truetype'); url('iconfont.ttf?t=1742362531320') format('truetype');
} }
.mobilefont { .mobilefont {
font-style: normal; font-family: 'mobilefont' !important;
font-size: 16px; font-size: 16px;
font-family: mobilefont !important; font-style: normal;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.mobilefont-xiala::before { .mobilefont-send:before {
content: '\e8a6';
}
.mobilefont-fasong:before {
content: '\e647';
}
.mobilefont-xiala:before {
content: '\e65b'; content: '\e65b';
} }
.mobilefont-upload::before { .mobilefont-upload:before {
content: '\e682'; content: '\e682';
} }
.mobilefont-shanchu1::before { .mobilefont-shanchu1:before {
content: '\ed1b'; content: '\ed1b';
} }
.mobilefont-left-long::before { .mobilefont-left-long:before {
content: '\e601'; content: '\e601';
} }
.mobilefont-rubber::before { .mobilefont-rubber:before {
content: '\ea15'; content: '\ea15';
} }
.mobilefont-huabi::before { .mobilefont-huabi:before {
content: '\e61f'; content: '\e61f';
} }
.mobilefont-chexiao::before { .mobilefont-chexiao:before {
content: '\e6e2'; content: '\e6e2';
} }
.mobilefont-shangchuan::before { .mobilefont-shangchuan:before {
content: '\e613'; content: '\e613';
} }
.mobilefont-qingkong::before { .mobilefont-qingkong:before {
content: '\e6dc'; content: '\e6dc';
} }
.mobilefont-jiacu::before { .mobilefont-jiacu:before {
content: '\e71d'; content: '\e71d';
} }
.mobilefont-qingxie::before { .mobilefont-qingxie:before {
content: '\e71e'; content: '\e71e';
} }
.mobilefont-xiahuaxian::before { .mobilefont-xiahuaxian:before {
content: '\e720'; content: '\e720';
} }
.mobilefont-tupian::before { .mobilefont-tupian:before {
content: '\e730'; content: '\e730';
} }
.mobilefont-del1::before { .mobilefont-del1:before {
content: '\e637'; content: '\e637';
} }
.mobilefont-gengduo::before { .mobilefont-gengduo:before {
content: '\e600'; content: '\e600';
} }
.mobilefont-delete1::before { .mobilefont-delete1:before {
content: '\e66d'; content: '\e66d';
} }
.mobilefont-del::before { .mobilefont-del:before {
content: '\e6f5'; content: '\e6f5';
} }
.mobilefont-option::before { .mobilefont-option:before {
content: '\e6ff'; content: '\e6ff';
} }
.mobilefont-setting::before { .mobilefont-setting:before {
content: '\e633'; content: '\e633';
} }
.mobilefont-add::before { .mobilefont-add:before {
content: '\e686'; content: '\e686';
} }
.mobilefont-radiobox::before { .mobilefont-radiobox:before {
content: '\e75b'; content: '\e75b';
} }
.mobilefont-juzhendafen::before { .mobilefont-juzhendafen:before {
content: '\e641'; content: '\e641';
} }
.mobilefont-checkbox-checked::before { .mobilefont-checkbox-checked:before {
content: '\e6c3'; content: '\e6c3';
} }
.mobilefont-nps::before { .mobilefont-nps:before {
content: '\e6b0'; content: '\e6b0';
} }
.mobilefont-input::before { .mobilefont-input:before {
content: '\e6fd'; content: '\e6fd';
} }
.mobilefont-juzhentiankong::before { .mobilefont-juzhentiankong:before {
content: '\e62e'; content: '\e62e';
} }
.mobilefont-wenjianshangchuan::before { .mobilefont-wenjianshangchuan:before {
content: '\e631'; content: '\e631';
} }
.mobilefont-qianming::before { .mobilefont-qianming:before {
content: '\e661'; content: '\e661';
} }
.mobilefont-tuwen::before { .mobilefont-tuwen:before {
content: '\e62c'; content: '\e62c';
} }
.mobilefont-juzhenduoxuan::before { .mobilefont-juzhenduoxuan:before {
content: '\e818'; content: '\e818';
} }
.mobilefont-juzhendanxuan::before { .mobilefont-juzhendanxuan:before {
content: '\13c7f'; content: '\13c7f';
} }
.mobilefont-edit2::before { .mobilefont-edit2:before {
content: '\e630'; content: '\e630';
} }
.mobilefont-copy::before { .mobilefont-copy:before {
content: '\e632'; content: '\e632';
} }
.mobilefont-delete::before { .mobilefont-delete:before {
content: '\e63f'; content: '\e63f';
} }
.mobilefont-sort::before { .mobilefont-sort:before {
content: '\e6a0'; content: '\e6a0';
} }

File diff suppressed because one or more lines are too long

View File

@@ -5,6 +5,20 @@
"css_prefix_text": "mobilefont-", "css_prefix_text": "mobilefont-",
"description": "", "description": "",
"glyphs": [ "glyphs": [
{
"icon_id": "1665033",
"name": "send",
"font_class": "send",
"unicode": "e8a6",
"unicode_decimal": 59558
},
{
"icon_id": "6268305",
"name": "发送",
"font_class": "fasong",
"unicode": "e647",
"unicode_decimal": 58951
},
{ {
"icon_id": "6548548", "icon_id": "6548548",
"name": "下拉", "name": "下拉",

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@@ -30,7 +30,7 @@
src="../../../../assets/img/publish/phone.png" src="../../../../assets/img/publish/phone.png"
alt="" alt=""
/> />
<img v-else src="../../../../assets/img/publish/phone.png" alt="" /> <img v-else src="../../../../assets/img/publish/pc.png" alt="" />
{{ survey.source === 1 ? '移动端' : 'PC端' }} | {{ survey.source === 1 ? '移动端' : 'PC端' }} |
</div> </div>
<div class="flex align-center"> <div class="flex align-center">

View File

@@ -36,7 +36,7 @@
<!-- 问卷来源 --> <!-- 问卷来源 -->
<div class="flex align-center"> <div class="flex align-center">
<img v-if="item.source === 1" src="../../assets/img/publish/phone.png" alt="" /> <img v-if="item.source === 1" src="../../assets/img/publish/phone.png" alt="" />
<img v-else src="../../assets/img/publish/phone.png" alt="" /> <img v-else src="../../assets/img/publish/pc.png" alt="" />
<el-text size="small">{{ item.source === 1 ? '移动端' : 'PC端' }}</el-text> <el-text size="small">{{ item.source === 1 ? '移动端' : 'PC端' }}</el-text>
</div> </div>
<!-- 问卷时间 --> <!-- 问卷时间 -->

View File

@@ -112,6 +112,7 @@
<van-button <van-button
:key="1" :key="1"
size="small" size="small"
class="primary-button"
plain plain
type="primary" type="primary"
:disabled="activeActionButton" :disabled="activeActionButton"
@@ -123,6 +124,7 @@
size="small" size="small"
plain plain
type="primary" type="primary"
class="primary-button"
:disabled="activeActionButton" :disabled="activeActionButton"
@click="previewQuestion" @click="previewQuestion"
> >
@@ -133,7 +135,8 @@
</van-button> </van-button>
<van-button <van-button
size="small" size="small"
icon="guide-o" icon="send"
icon-prefix="mobilefont"
:disabled="activeActionButton" :disabled="activeActionButton"
@click="publishQuestion" @click="publishQuestion"
> >
@@ -644,7 +647,7 @@ onMounted(async() => {
border-radius: 10px; border-radius: 10px;
background-color: #70b937; background-color: #70b937;
color: #fff; color: #fff;
font-weight: bold; //font-weight: bold;
} }
} }