sdz/ks-app-employment-service
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

AI小程序端样式修复

Browse Source
This commit is contained in:
francis_fh
2026-01-22 14:05:22 +08:00
parent 96c89e0210
commit 80bd1ee181
6 changed files with 246 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
components/md-render/md-render.vue
View File

@@ -1,7 +1,12 @@
<template>
<view class="markdown-body">
<!-- 根据不同平台使用不同的渲染方式 -->
<!-- #ifdef MP-WEIXIN -->
<rich-text class="markdownRich" id="markdown-content" :nodes="renderedHtml" @itemclick="handleItemClick" />
<!-- <view class="markdown-body" v-html="renderedHtml"></view> -->
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<view class="markdown-body" v-html="renderedHtml"></view>
<!-- #endif -->
</view>
</template>
@@ -267,7 +272,7 @@ ol {
</style>
<style lang="stylus">
.custom-more{
.custom-more
display: flex
justify-content: center
align-items: center
@@ -282,15 +287,16 @@ ol {
transition: all 0.3s ease
position: relative
overflow: hidden
.more-icon{
width: 32rpx;
height: 32rpx;
background: url('@/static/svg/seemore.svg') center center no-repeat;
.more-icon
width: 32rpx
height: 32rpx
background: url('@/static/svg/seemore.svg') center center no-repeat
background-size: 100% 100%
margin-left: 12rpx
filter: brightness(0) invert(1)
}
&::before {
&::before
content: ''
position: absolute
top: 0
@@ -299,93 +305,124 @@ ol {
height: 100%
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent)
transition: left 0.5s ease
}
&:active {
&:active
transform: translateY(2rpx)
box-shadow: 0rpx 4rpx 16rpx rgba(37, 107, 250, 0.4)
}
&:active::before {
&:active::before
left: 100%
}
}
/* 为小程序专门优化的样式 */
/* #ifdef MP-WEIXIN */
.rich-text-container
padding: 0 20rpx
.markdownRich
padding: 0
/* #endif */
.custom-card
background: #FFFFFF;
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);
border-radius: 20rpx 20rpx 20rpx 20rpx;
padding: 28rpx 24rpx;
font-weight: 400;
font-size: 28rpx;
color: #333333;
margin-bottom: 20rpx;
position: relative;
display: flex;
background: #FFFFFF
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04)
border-radius: 20rpx
padding: 28rpx 24rpx
font-weight: 400
font-size: 28rpx
color: #333333
margin-bottom: 20rpx
position: relative
display: flex
flex-direction: column
/* 确保在小程序中边距正确应用 */
/* #ifdef MP-WEIXIN */
margin-left: auto
margin-right: auto
width: 100%
box-sizing: border-box
/* #endif */
.card-title
font-weight: 600;
display: flex;
align-items: center;
font-weight: 600
display: flex
align-items: center
justify-content: space-between
margin-bottom: 16rpx
.title-text
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
max-width: calc(100% - 160rpx);
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif
max-width: calc(100% - 160rpx)
overflow: hidden
text-overflow: ellipsis
font-size: 30rpx
line-height: 1.4
.card-salary
font-family: DIN-Medium;
font-size: 28rpx;
color: #FF6E1C;
font-family: DIN-Medium
font-size: 28rpx
color: #FF6E1C
line-height: 1.4
.card-company
margin-top: 16rpx;
max-width: calc(100%);
overflow: hidden;
margin-bottom: 22rpx
max-width: 100%
overflow: hidden
text-overflow: ellipsis
color: #6C7282;
color: #6C7282
line-height: 1.4
.card-info
margin-top: 22rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 40rpx;
display: flex
align-items: center
justify-content: space-between
padding-right: 40rpx
.info-item
display: flex;
position: relative;
align-items: center;
color: #256BFA;
font-size: 28rpx;
padding-right: 10rpx
display: flex
position: relative
align-items: center
&:last-child
color: #256BFA
font-size: 28rpx
padding-right: 10rpx
.position-nav
position: absolute;
right: -10rpx;
top: 50%;
position: absolute
right: -10rpx
top: 50%
transform: translateY(-50%)
.position-nav::before
position: absolute;
left: 0;
top: -4rpx;
content: '';
width: 4rpx;
height: 16rpx;
position: absolute
left: 0
top: -4rpx
content: ''
width: 4rpx
height: 16rpx
border-radius: 2rpx
background: #256BFA;
transform: translate(0, -50%) rotate(-45deg) ;
background: #256BFA
transform: translate(0, -50%) rotate(-45deg)
.position-nav::after
position: absolute;
left: 0;
top: -4rpx;
content: '';
width: 4rpx;
height: 16rpx;
position: absolute
left: 0
top: -4rpx
content: ''
width: 4rpx
height: 16rpx
border-radius: 2rpx
background: #256BFA;
background: #256BFA
transform: rotate(45deg)
.card-tag
font-weight: 500;
font-size: 24rpx;
color: #333333;
width: fit-content;
background: #F4F4F4;
border-radius: 4rpx 4rpx 4rpx 4rpx;
padding: 4rpx 20rpx;
margin-right: 16rpx;
font-weight: 500
font-size: 24rpx
color: #333333
width: fit-content
background: #F4F4F4
border-radius: 4rpx
padding: 4rpx 20rpx
margin-right: 16rpx
margin-bottom: 0
</style>