amass/md
1
0
Fork 0
mirror of https://github.com/doocs/md.git synced 2024-10-31 00:07:50 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: update index style

Browse Source
This commit is contained in:
yanglbme 2019-11-06 17:13:48 +08:00
parent ea290176ad
commit 84b2a52214
3 changed files with 22 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
assets/scripts/editor.js
View File

@ -27,9 +27,9 @@ let app = new Vue({
{ label: '16px', value: '16px', desc: '稍大' },
],
colorOption: [
{ label: '橘红', value: 'rgba(255, 95, 46, 0.9)', author: '#FF5F2E' },
{ label: '淡绿', value: 'rgba(66, 185, 131, 0.9)', author: '#42B983'},
{ label: '暗青', value: 'rgba(0, 139, 139, 0.9)', author: '#008B8B'}
{ label: '橘红', value: 'rgba(255, 95, 46, 0.9)', hex: '#FF5F2E' },
{ label: '淡绿', value: 'rgba(66, 185, 131, 0.9)', hex: '#42B983'},
{ label: '暗青', value: 'rgba(0, 139, 139, 0.9)', hex: '#008B8B'}
],
aboutDialogVisible: false
};

14
assets/scripts/themes/default-theme.js
View File

@ -8,6 +8,7 @@ let default_theme = {
'margin': '1em 8px'
},
block: {
// 一级标题样式
h1: {
'font-size': '1.2em',
'text-align': 'center',
@ -17,6 +18,8 @@ let default_theme = {
'padding': '0 1em',
'border-bottom': '2px solid rgba(255, 95, 46, 0.9)'
},
// 二级标题样式
h2: {
'font-size': '1.1em',
'text-align': 'center',
@ -27,6 +30,8 @@ let default_theme = {
'background': 'rgba(255, 95, 46, 0.9)',
'color': '#fff'
},
// 三级标题样式
h3: {
'font-weight': 'bold',
'font-size': '1.1em',
@ -35,15 +40,21 @@ let default_theme = {
'padding-left': '8px',
'border-left': '3px solid rgba(255, 95, 46, 0.9)'
},
// 四级标题样式
h4: {
'font-weight': 'bold',
'font-size': '1em',
'margin': '2em 8px 0.5em',
},
// 段落样式
p: {
'margin': '1.5em 8px',
'letter-spacing': '0.1em'
},
// 引用样式
blockquote: {
'font-style': 'normal',
'border-left': 'none',
@ -118,6 +129,8 @@ let default_theme = {
'color': '#576b95',
'text-decoration': 'none',
},
// 字体加粗样式
strong: {
'color': 'rgba(255, 95, 46, 0.9)',
'font-weight': 'bold',
@ -145,4 +158,3 @@ let default_theme = {
}
}
};

10
index.html
View File

@ -33,14 +33,14 @@
<el-header class="top">
<el-form size="mini" class="ctrl" :inline=true>
<el-form-item label="编辑器主题">
<el-select v-model="currentEditorTheme" size="mini" placeholder="选择字体" @change="editorThemeChanged">
<el-select v-model="currentEditorTheme" size="mini" placeholder="选择编辑器主题" clearable @change="editorThemeChanged">
<el-option v-for="editorTheme in editorThemes" :key="editorTheme.value" :label="editorTheme.label"
:value="editorTheme.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="字体">
<el-select v-model="currentFont" size="mini" placeholder="选择字体" @change="fontChanged">
<el-select v-model="currentFont" size="mini" placeholder="选择字体" clearable @change="fontChanged">
<el-option v-for="font in builtinFonts" :style="{fontFamily: font.value}" :key="font.value"
:label="font.label" :value="font.value">
<span class="select-item-left">{{ font.label }}</span>
@ -49,7 +49,7 @@
</el-select>
</el-form-item>
<el-form-item label="字号">
<el-select v-model="currentSize" size="mini" placeholder="选择段落字体大小" @change="sizeChanged">
<el-select v-model="currentSize" size="mini" placeholder="选择段落字号" clearable @change="sizeChanged">
<el-option v-for="size in sizeOption" :key="size.value" :label="size.label" :value="size.value">
<span class="select-item-left">{{ size.label }}</span>
<span class="select-item-right">{{ size.desc }}</span>
@ -57,10 +57,10 @@
</el-select>
</el-form-item>
<el-form-item label="颜色">
<el-select v-model="currentColor" size="mini" placeholder="选择颜色" @change="colorChanged">
<el-select v-model="currentColor" size="mini" placeholder="选择颜色" clearable @change="colorChanged">
<el-option v-for="color in colorOption" :key="color.value" :label="color.label" :value="color.value">
<span class="select-item-left">{{ color.label }}</span>
<span class="select-item-right">{{ color.author }}</span>
<span class="select-item-right">{{ color.hex }}</span>
</el-option>
</el-select>
</el-form-item>