feat: 样式调整

This commit is contained in:
2026-06-05 12:14:48 +08:00
parent da8fd5fbff
commit 97eff4d501
4 changed files with 38 additions and 16 deletions

View File

@@ -1,5 +1,5 @@
<template> <template>
<view class="flex flex-col bg-liner h-screen overflow-hidden"> <view class="flex flex-col bg-white h-screen overflow-hidden">
<!-- 顶部固定导航 --> <!-- 顶部固定导航 -->
<view class="flex-shrink-0"> <view class="flex-shrink-0">
<TopNavBar :title="title" background="transparent" /> <TopNavBar :title="title" background="transparent" />

View File

@@ -20,7 +20,7 @@
flex: 1; flex: 1;
min-width: 0; min-width: 0;
color: #111827; color: #111827;
font-size: 20px; font-size: 18px;
font-weight: 600; font-weight: 600;
line-height: 28px; line-height: 28px;
} }

View File

@@ -2,21 +2,21 @@
<view v-if="longTextData?.values" class="w-full bg-white border-box border-ff overflow-hidden rounded-20 flex flex-col"> <view v-if="longTextData?.values" class="w-full bg-white border-box border-ff overflow-hidden rounded-20 flex flex-col">
<!-- 占位撑开 --> <!-- 占位撑开 -->
<view class="w-vw"></view> <view class="w-vw"></view>
<view class="flex flex-col px-16 pt-16 pb-12 border-box"> <view class="flex flex-col px-16 pt-16 pb-12 border-box" @click="lookDetailAction">
<view v-if="tag" class="long-answer-tag" :style="longAnswerTagStyle">{{ tag }}</view> <view v-if="tag" class="long-answer-tag" :style="longAnswerTagStyle">{{ tag }}</view>
<view v-if="title" class="flex flex-row flex-items-start flex-justify-start mb-4"> <view v-if="title" class="flex flex-row flex-items-start flex-justify-start mb-4">
<text class="font-size-16 font-500 text-color-900"> {{ title }}</text> <text class="font-size-16 font-600 text-color-900"> {{ title }}</text>
</view> </view>
<!-- 文字内容最多显示2行 --> <!-- 文字内容最多显示2行 -->
<view v-if="processedContent" class="answer-content font-size-12 font-color-600"> <view v-if="processedContent" class="answer-content font-size-12 font-color-600">
<ChatMarkdown :text="processedContent" /> <ChatMarkdown :text="processedContent" :fontColor="'#94A3B8'" />
</view> </view>
<!-- 超过2行时显示...提示 --> <!-- 超过2行时显示...提示 -->
<view v-if="!finish" class="flex flex-row flex-items-center mt-8"> <view v-if="!finish" class="flex flex-row flex-items-center mt-8">
<text class="font-size-12 font-400 font-color-600">正在生成</text> <text class="font-size-12 font-400 font-color-600">正在生成</text>
<ChatLoading /> <ChatLoading />
</view> </view>
<view v-if="isOverflow" class="flex flex-row flex-items-center flex-justify-between mt-4" @click="lookDetailAction"> <view v-if="isOverflow" class="flex flex-row flex-items-center flex-justify-between mt-12">
<text class="font-size-12 font-800 color-CBD5E1 mr-4">查看完整{{ tag }}</text> <text class="font-size-12 font-800 color-CBD5E1 mr-4">查看完整{{ tag }}</text>
<uni-icons type="right" size="16" color="#CBD5E1"></uni-icons> <uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>
</view> </view>
@@ -189,6 +189,7 @@ const lookDetailAction = () => {
border-radius: 12px; border-radius: 12px;
border: 1px solid transparent; border: 1px solid transparent;
font-size: 12px; font-size: 12px;
font-weight: 600;
line-height: 18px; line-height: 18px;
} }
</style> </style>

View File

@@ -105,8 +105,9 @@ export default {
p: ` p: `
margin:4px 0; margin:4px 0;
font-size: 15px; font-size: 15px;
line-height:1.55; line-height:1.85;
font-family: ${fontFamily}; font-family: ${fontFamily};
font-weight:500;
color: ${fontColor}; color: ${fontColor};
`, `,
// 一级标题 // 一级标题
@@ -115,7 +116,7 @@ export default {
font-size: 20px; font-size: 20px;
line-height: 1.6; line-height: 1.6;
text-align: center; text-align: center;
font-weight: bold; font-weight: 900;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily}; font-family: ${fontFamily};
padding:6px 10px 4px; padding:6px 10px 4px;
@@ -127,11 +128,11 @@ export default {
h2: ` h2: `
margin:6px 0; margin:6px 0;
font-size: 18px; font-size: 18px;
line-height: 1.55; line-height: 1.85;
text-align:center; text-align:center;
color:${themeColor}; color:${themeColor};
font-family: ${fontFamily}; font-family: ${fontFamily};
font-weight:bolder; font-weight:800;
padding-left:10px; padding-left:10px;
// border:1px solid ${themeColor}; // border:1px solid ${themeColor};
`, `,
@@ -139,9 +140,10 @@ export default {
h3: ` h3: `
margin:6px 0; margin:6px 0;
font-size: 16px; font-size: 16px;
line-height: 1.5; line-height: 1.85;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily}; font-family: ${fontFamily};
font-weight:700;
padding-left:10px; padding-left:10px;
border-left:3px solid ${themeColor}; border-left:3px solid ${themeColor};
`, `,
@@ -150,6 +152,7 @@ export default {
margin:4px 0; margin:4px 0;
font-size:15px; font-size:15px;
font-family: ${fontFamily}; font-family: ${fontFamily};
font-weight:500;
color: #777777; color: #777777;
border-left: 4px solid #dddddd; border-left: 4px solid #dddddd;
padding: 0 10px; padding: 0 10px;
@@ -157,11 +160,13 @@ export default {
// 列表 // 列表
ul: ` ul: `
font-size: 14px; font-size: 14px;
font-weight:500;
margin: 4px 0; margin: 4px 0;
color: ${fontSubColor}; color: ${fontSubColor};
`, `,
li: ` li: `
font-size: 14px; font-size: 14px;
font-weight:500;
margin: 4px 0; margin: 4px 0;
color: ${fontSubColor}; color: ${fontSubColor};
`, `,
@@ -171,13 +176,14 @@ export default {
`, `,
// 加粗 // 加粗
strong: ` strong: `
font-weight: border; font-weight: bold;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily}; font-family: ${fontFamily};
`, `,
// 斜体 // 斜体
em: ` em: `
font-size: 14px; font-size: 14px;
font-weight:500;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily}; font-family: ${fontFamily};
letter-spacing:0.3em; letter-spacing:0.3em;
@@ -227,8 +233,9 @@ export default {
p: ` p: `
margin:4px 0; margin:4px 0;
font-size: 15px; font-size: 15px;
line-height:1.55; line-height:1.85;
font-family: ${fontFamily}; font-family: ${fontFamily};
font-weight:500;
color: ${fontColor}; color: ${fontColor};
`, `,
// 一级标题 // 一级标题
@@ -238,22 +245,25 @@ export default {
line-height: 1.6; line-height: 1.6;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily}; font-family: ${fontFamily};
font-weight:900;
`, `,
// 二级标题 // 二级标题
h2: ` h2: `
margin:6px 0; margin:6px 0;
font-size: 18px; font-size: 18px;
line-height: 1.55; line-height: 1.85;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily}; font-family: ${fontFamily};
font-weight:800;
`, `,
// 三级标题 // 三级标题
h3: ` h3: `
margin:6px 0; margin:6px 0;
font-size: 16px; font-size: 16px;
line-height: 1.5; line-height: 1.85;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily}; font-family: ${fontFamily};
font-weight:700;
`, `,
// 四级标题 // 四级标题
h4: ` h4: `
@@ -261,6 +271,7 @@ export default {
font-size: 15px; font-size: 15px;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily}; font-family: ${fontFamily};
font-weight:600;
`, `,
// 五级标题 // 五级标题
h5: ` h5: `
@@ -268,6 +279,7 @@ export default {
font-size: 14px; font-size: 14px;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily}; font-family: ${fontFamily};
font-weight:500;
`, `,
// 六级标题 // 六级标题
h6: ` h6: `
@@ -275,6 +287,7 @@ export default {
font-size: 12px; font-size: 12px;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily}; font-family: ${fontFamily};
font-weight:500;
`, `,
// 引用 // 引用
blockquote: ` blockquote: `
@@ -284,16 +297,21 @@ export default {
border-left: 4px solid #dddddd; border-left: 4px solid #dddddd;
padding: 0 10px; padding: 0 10px;
font-family: ${fontFamily}; font-family: ${fontFamily};
font-weight:500;
`, `,
// 列表 // 列表
ul: ` ul: `
margin: 4px 0; margin: 4px 0;
font-size: 14px; font-size: 14px;
font-family: ${fontFamily};
font-weight:500;
color: ${fontSubColor}; color: ${fontSubColor};
`, `,
li: ` li: `
margin: 4px 0; margin: 4px 0;
font-size: 14px; font-size: 14px;
font-family: ${fontFamily};
font-weight:500;
color: ${fontSubColor}; color: ${fontSubColor};
`, `,
// 链接 // 链接
@@ -302,12 +320,15 @@ export default {
`, `,
// 加粗 // 加粗
strong: ` strong: `
font-weight: border; font-weight: bold;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily}; font-family: ${fontFamily};
`, `,
// 斜体 // 斜体
em: ` em: `
font-size: 14px;
font-weight:500;
font-family: ${fontFamily};
color: ${themeColor}; color: ${themeColor};
letter-spacing:0.3em; letter-spacing:0.3em;
`, `,