feat: 聊天的样式调整
This commit is contained in:
@@ -39,7 +39,7 @@
|
|||||||
),
|
),
|
||||||
radial-gradient(75% 60% at center, var(--bg-color) 50%, transparent 50%);
|
radial-gradient(75% 60% at center, var(--bg-color) 50%, transparent 50%);
|
||||||
padding: var(--p);
|
padding: var(--p);
|
||||||
margin-right: 8px;
|
margin-right: 6px;
|
||||||
display: grid;
|
display: grid;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|||||||
@@ -36,6 +36,10 @@ export default {
|
|||||||
type: String,
|
type: String,
|
||||||
default: '#2d2d2d'
|
default: '#2d2d2d'
|
||||||
},
|
},
|
||||||
|
fontFamily: {
|
||||||
|
type: String,
|
||||||
|
default: 'PingFang SC, PingFang SC'
|
||||||
|
},
|
||||||
aiMode: {
|
aiMode: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
@@ -87,13 +91,13 @@ export default {
|
|||||||
initTagStyle() {
|
initTagStyle() {
|
||||||
const themeColor = this.themeColor
|
const themeColor = this.themeColor
|
||||||
const codeBgColor = this.codeBgColor
|
const codeBgColor = this.codeBgColor
|
||||||
|
const fontFamily = this.fontFamily
|
||||||
let zeroStyle = {
|
let zeroStyle = {
|
||||||
p: `
|
p: `
|
||||||
margin:6px;
|
margin:6px 0;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
line-height:1.75;
|
line-height:1.65;
|
||||||
letter-spacing:0.2em;
|
font-family: ${fontFamily};
|
||||||
word-spacing:0.1em;
|
|
||||||
`,
|
`,
|
||||||
// 一级标题
|
// 一级标题
|
||||||
h1: `
|
h1: `
|
||||||
@@ -102,10 +106,12 @@ export default {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: ${themeColor};
|
color: ${themeColor};
|
||||||
|
font-family: ${fontFamily};
|
||||||
padding:3px 10px 1px;
|
padding:3px 10px 1px;
|
||||||
border-bottom: 2px solid ${themeColor};
|
border-bottom: 2px solid ${themeColor};
|
||||||
border-top-right-radius:3px;
|
border-top-right-radius:3px;
|
||||||
border-top-left-radius:3px;
|
border-top-left-radius:3px;
|
||||||
|
|
||||||
`,
|
`,
|
||||||
// 二级标题
|
// 二级标题
|
||||||
h2: `
|
h2: `
|
||||||
@@ -113,6 +119,7 @@ export default {
|
|||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
text-align:center;
|
text-align:center;
|
||||||
color:${themeColor};
|
color:${themeColor};
|
||||||
|
font-family: ${fontFamily};
|
||||||
font-weight:bolder;
|
font-weight:bolder;
|
||||||
padding-left:10px;
|
padding-left:10px;
|
||||||
// border:1px solid ${themeColor};
|
// border:1px solid ${themeColor};
|
||||||
@@ -122,6 +129,7 @@ export default {
|
|||||||
margin:6px 0;
|
margin:6px 0;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color: ${themeColor};
|
color: ${themeColor};
|
||||||
|
font-family: ${fontFamily};
|
||||||
padding-left:10px;
|
padding-left:10px;
|
||||||
border-left:3px solid ${themeColor};
|
border-left:3px solid ${themeColor};
|
||||||
`,
|
`,
|
||||||
@@ -129,6 +137,7 @@ export default {
|
|||||||
blockquote: `
|
blockquote: `
|
||||||
margin:6px 0;
|
margin:6px 0;
|
||||||
font-size:15px;
|
font-size:15px;
|
||||||
|
font-family: ${fontFamily};
|
||||||
color: #777777;
|
color: #777777;
|
||||||
border-left: 4px solid #dddddd;
|
border-left: 4px solid #dddddd;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
@@ -150,10 +159,12 @@ export default {
|
|||||||
strong: `
|
strong: `
|
||||||
font-weight: border;
|
font-weight: border;
|
||||||
color: ${themeColor};
|
color: ${themeColor};
|
||||||
|
font-family: ${fontFamily};
|
||||||
`,
|
`,
|
||||||
// 斜体
|
// 斜体
|
||||||
em: `
|
em: `
|
||||||
color: ${themeColor};
|
color: ${themeColor};
|
||||||
|
font-family: ${fontFamily};
|
||||||
letter-spacing:0.3em;
|
letter-spacing:0.3em;
|
||||||
`,
|
`,
|
||||||
// 分割线
|
// 分割线
|
||||||
@@ -194,57 +205,68 @@ export default {
|
|||||||
initTagStyleForAi() {
|
initTagStyleForAi() {
|
||||||
const themeColor = this.themeColor
|
const themeColor = this.themeColor
|
||||||
const codeBgColor = this.codeBgColor
|
const codeBgColor = this.codeBgColor
|
||||||
|
const fontFamily = this.fontFamily
|
||||||
let zeroStyle = {
|
let zeroStyle = {
|
||||||
p: `
|
p: `
|
||||||
font-size: 16px;
|
margin:6px 0;
|
||||||
|
font-size: 15px;
|
||||||
|
line-height:1.55;
|
||||||
|
font-family: ${fontFamily};
|
||||||
`,
|
`,
|
||||||
// 一级标题
|
// 一级标题
|
||||||
h1: `
|
h1: `
|
||||||
margin:6px 0;
|
margin:4px 0;
|
||||||
font-size: 22px;
|
font-size: 20px;
|
||||||
color: ${themeColor};
|
color: ${themeColor};
|
||||||
|
font-family: ${fontFamily};
|
||||||
`,
|
`,
|
||||||
// 二级标题
|
// 二级标题
|
||||||
h2: `
|
h2: `
|
||||||
margin:6px 0;
|
margin:4px 0;
|
||||||
font-size: 20px;
|
font-size: 18px;
|
||||||
color: ${themeColor};
|
color: ${themeColor};
|
||||||
|
font-family: ${fontFamily};
|
||||||
`,
|
`,
|
||||||
// 三级标题
|
// 三级标题
|
||||||
h3: `
|
h3: `
|
||||||
margin:6x 0;
|
margin:4x 0;
|
||||||
font-size: 18px;
|
font-size: 16px;
|
||||||
color: ${themeColor};
|
color: ${themeColor};
|
||||||
|
font-family: ${fontFamily};
|
||||||
`,
|
`,
|
||||||
// 四级标题
|
// 四级标题
|
||||||
h4: `
|
h4: `
|
||||||
margin:6px 0;
|
margin:4px 0;
|
||||||
font-size: 16px;
|
font-size: 15px;
|
||||||
color: ${themeColor};
|
color: ${themeColor};
|
||||||
|
font-family: ${fontFamily};
|
||||||
`,
|
`,
|
||||||
// 五级标题
|
// 五级标题
|
||||||
h5: `
|
h5: `
|
||||||
margin:6px 0;
|
margin:4px 0;
|
||||||
font-size: 16px;
|
font-size: 14px;
|
||||||
color: ${themeColor};
|
color: ${themeColor};
|
||||||
|
font-family: ${fontFamily};
|
||||||
`,
|
`,
|
||||||
// 六级标题
|
// 六级标题
|
||||||
h6: `
|
h6: `
|
||||||
margin:6px 0;
|
margin:4px 0;
|
||||||
font-size: 16px;
|
font-size: 12px;
|
||||||
color: ${themeColor}
|
color: ${themeColor};
|
||||||
|
font-family: ${fontFamily};
|
||||||
`,
|
`,
|
||||||
// 引用
|
// 引用
|
||||||
blockquote: `
|
blockquote: `
|
||||||
margin:6px 0;
|
margin:4px 0;
|
||||||
font-size:14px;
|
font-size:14px;
|
||||||
color: #777777;
|
color: #777777;
|
||||||
border-left: 4px solid #dddddd;
|
border-left: 4px solid #dddddd;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
|
font-family: ${fontFamily};
|
||||||
`,
|
`,
|
||||||
// 列表
|
// 列表
|
||||||
ul: `
|
ul: `
|
||||||
margin: 6px 0;
|
margin: 4px 0;
|
||||||
color: #555;
|
color: #555;
|
||||||
`,
|
`,
|
||||||
li: `
|
li: `
|
||||||
@@ -259,6 +281,7 @@ export default {
|
|||||||
strong: `
|
strong: `
|
||||||
font-weight: border;
|
font-weight: border;
|
||||||
color: ${themeColor};
|
color: ${themeColor};
|
||||||
|
font-family: ${fontFamily};
|
||||||
`,
|
`,
|
||||||
// 斜体
|
// 斜体
|
||||||
em: `
|
em: `
|
||||||
@@ -272,14 +295,14 @@ export default {
|
|||||||
border:none;
|
border:none;
|
||||||
text-align:center;
|
text-align:center;
|
||||||
background-image:linear-gradient(to right,rgba(248,57,41,0),${themeColor},rgba(248,57,41,0));
|
background-image:linear-gradient(to right,rgba(248,57,41,0),${themeColor},rgba(248,57,41,0));
|
||||||
margin:8px 0;
|
margin:4px 0;
|
||||||
`,
|
`,
|
||||||
// 表格
|
// 表格
|
||||||
table: `
|
table: `
|
||||||
border-spacing:0;
|
border-spacing:0;
|
||||||
overflow:auto;
|
overflow:auto;
|
||||||
min-width:100%;
|
min-width:100%;
|
||||||
margin:8px 0;
|
margin:4px 0;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
`,
|
`,
|
||||||
th: `
|
th: `
|
||||||
@@ -296,6 +319,7 @@ export default {
|
|||||||
background: ${codeBgColor};
|
background: ${codeBgColor};
|
||||||
font-size:12px;
|
font-size:12px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
font-family: ${fontFamily};
|
||||||
`,
|
`,
|
||||||
}
|
}
|
||||||
this.tagStyle = zeroStyle
|
this.tagStyle = zeroStyle
|
||||||
|
|||||||
Reference in New Issue
Block a user