style: 标签排版
This commit is contained in:
@@ -52,8 +52,22 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div> -->
|
||||||
<div class="message-txt markdown-body flex flex-col">
|
<div class="message-txt markdown-body">
|
||||||
|
<span
|
||||||
|
v-if="parameterTags.length > 0"
|
||||||
|
class="message-parameter-tags"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
v-for="tag in parameterTags"
|
||||||
|
:key="`${tag.kind}-${tag.label}`"
|
||||||
|
class="message-parameter-tag"
|
||||||
|
>
|
||||||
|
<img :src="getParameterTagIcon(tag.kind)" class="parameter-tag-icon" />
|
||||||
|
<span>{{ tag.label }}</span>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
<VueMarkdown
|
<VueMarkdown
|
||||||
|
class="message-markdown"
|
||||||
:custom-attrs="customAttrs"
|
:custom-attrs="customAttrs"
|
||||||
:markdown="content.text"
|
:markdown="content.text"
|
||||||
:rehype-plugins="[rehypeRaw]"
|
:rehype-plugins="[rehypeRaw]"
|
||||||
@@ -68,19 +82,6 @@
|
|||||||
<Sketch @click="handleClickSketch" />
|
<Sketch @click="handleClickSketch" />
|
||||||
</template>
|
</template>
|
||||||
</VueMarkdown>
|
</VueMarkdown>
|
||||||
<div
|
|
||||||
v-if="parameterTags.length > 0"
|
|
||||||
class="message-parameter-tags flex align-center"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-for="tag in parameterTags"
|
|
||||||
:key="`${tag.kind}-${tag.label}`"
|
|
||||||
class="message-parameter-tag flex align-center"
|
|
||||||
>
|
|
||||||
<img :src="getParameterTagIcon(tag.kind)" class="parameter-tag-icon" />
|
|
||||||
<span>{{ tag.label }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
<div
|
||||||
class="web-address flex align-center"
|
class="web-address flex align-center"
|
||||||
v-show="content.webAddress?.length > 0"
|
v-show="content.webAddress?.length > 0"
|
||||||
@@ -382,15 +383,16 @@
|
|||||||
max-width: 82%;
|
max-width: 82%;
|
||||||
}
|
}
|
||||||
.message-parameter-tags {
|
.message-parameter-tags {
|
||||||
flex-wrap: wrap;
|
display: inline;
|
||||||
justify-content: flex-start;
|
|
||||||
gap: 0.8rem;
|
|
||||||
margin-top: 0.8rem;
|
|
||||||
}
|
}
|
||||||
.message-parameter-tag {
|
.message-parameter-tag {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
vertical-align: middle;
|
||||||
height: 3rem;
|
height: 3rem;
|
||||||
max-width: 24rem;
|
max-width: 24rem;
|
||||||
padding: 0 1rem;
|
padding: 0 1rem;
|
||||||
|
margin: 0 0.8rem 0.4rem 0;
|
||||||
border: 0.1rem solid #0000001a;
|
border: 0.1rem solid #0000001a;
|
||||||
border-radius: 2.2rem;
|
border-radius: 2.2rem;
|
||||||
column-gap: 0.8rem;
|
column-gap: 0.8rem;
|
||||||
@@ -509,6 +511,17 @@
|
|||||||
.message-txt {
|
.message-txt {
|
||||||
user-select: text;
|
user-select: text;
|
||||||
|
|
||||||
|
.message-markdown,
|
||||||
|
> div:not(.web-address) {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-markdown > p:first-child,
|
||||||
|
> div:not(.web-address) > p:first-child {
|
||||||
|
display: inline;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
list-style-position: inside;
|
list-style-position: inside;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user