sdz/ks-app-employment-service
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
07e0f3083b8f206436ec04b9d2b27ce88c615086
ks-app-employment-service/components/md-render/md-render.vue

932 lines
29 KiB
Vue
Raw Normal View History

flat:AI+
2025-03-28 15:19:42 +08:00
<template>
<view class="markdown-body">
AI小程序端样式修复
2026-01-22 14:05:22 +08:00
<!-- 根据不同平台使用不同的渲染方式 -->
<!-- #ifdef MP-WEIXIN -->
AI回复内容，岗位卡片的点击事件绑定问题解决
2026-01-24 16:47:11 +08:00
<!-- 微信小程序端：使用v-for遍历岗位卡片列表，每个卡片单独渲染，支持点击事件 -->
<scroll-view class="markdownRich" id="markdown-content">
<!-- 渲染普通markdown内容 -->
<rich-text :nodes="renderedHtml" />
<!-- 单独渲染岗位卡片，支持点击事件 -->
<view v-if="localJobCardsList.length > 0" class="job-cards-container">
<view
v-for="(card, index) in localJobCardsList"
:key="index"
class="custom-card"
@tap="navigateToJobDetail(card.jobId)"
>
<view class="card-title">
<text class="title-text">{{ card.jobTitle }}</text>
<view class="card-salary">{{ card.salary }}</view>
</view>
<view class="card-company">{{ card.location }}·{{ card.companyName }}</view>
<view class="card-info">
<view class="info-item">
<view class="card-tag">{{ card.education }}</view>
<view class="card-tag">{{ card.experience }}</view>
</view>
<view class="info-item">查看详情<view class="position-nav"></view></view>
</view>
</view>
</view>
</scroll-view>
AI小程序端样式修复
2026-01-22 14:05:22 +08:00
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
AI回复内容，岗位卡片的点击事件绑定问题解决
2026-01-24 16:47:11 +08:00
<view class="markdown-body" v-html="renderedHtml" @click="handleH5Click"></view>
AI小程序端样式修复
2026-01-22 14:05:22 +08:00
<!-- #endif -->
flat:AI+
2025-03-28 15:19:42 +08:00
</view>
</template>
<script setup>
AI回复内容，岗位卡片的点击事件绑定问题解决
2026-01-24 16:47:11 +08:00
import { computed, onMounted, inject, ref, watch, nextTick } from 'vue';
import { parseMarkdown, codeDataList, jobCardsList } from '@/utils/markdownParser';
flat: 暂存
2025-04-10 10:59:25 +08:00
const { navTo } = inject('globalFunction');
flat:AI+
2025-03-28 15:19:42 +08:00
const props = defineProps({
content: {
type: String,
default: '',
},
flat: 暂存
2025-04-10 10:59:25 +08:00
typing: {
type: Boolean,
default: false,
},
flat:AI+
2025-03-28 15:19:42 +08:00
});
const renderedHtml = computed(() => parseMarkdown(props.content));
AI回复内容，岗位卡片的点击事件绑定问题解决
2026-01-24 16:47:11 +08:00
const markdownContainer = ref(null);
// 响应式岗位卡片列表，用于微信小程序端单独渲染
const localJobCardsList = ref([]);
// 监听content的变化，当内容更新时，解析岗位卡片
watch(() => props.content, (newContent) => {
if (newContent) {
// 直接调用parseMarkdown来触发jobCardsList的更新
parseMarkdown(newContent);
// 将解析器生成的岗位卡片列表赋值给响应式数据
localJobCardsList.value = [...jobCardsList];
console.log('Content changed, jobCardsList updated:', localJobCardsList.value);
}
}, { immediate: true });
// 同时监听renderedHtml的变化作为备份
watch(() => renderedHtml.value, (newVal) => {
console.log('renderedHtml changed, jobCardsList from parser:', jobCardsList);
// 将解析器生成的岗位卡片列表赋值给响应式数据
localJobCardsList.value = [...jobCardsList];
});
// 微信小程序端导航到岗位详情页面
const navigateToJobDetail = (jobId) => {
console.log('navigateToJobDetail called with jobId:', jobId);
if (jobId && jobId !== 'undefined' && jobId !== 'null') {
// 跳转到岗位详情页面
uni.navigateTo({
url: `/packageA/pages/post/post?jobId=${jobId}`,
success: (res) => {
console.log('navigateTo success:', res);
},
fail: (err) => {
console.error('navigateTo failed:', err);
// 如果navigateTo失败，尝试redirectTo
uni.redirectTo({
url: `/packageA/pages/post/post?jobId=${jobId}`,
success: (res2) => {
console.log('redirectTo success:', res2);
},
fail: (err2) => {
console.error('redirectTo also failed:', err2);
// 如果还是失败，显示错误提示
uni.showToast({
title: '跳转失败，请稍后重试',
icon: 'none'
});
}
});
}
});
} else {
console.error('Invalid jobId:', jobId);
uni.showToast({
title: '岗位信息不完整',
icon: 'none'
});
}
};
flat:AI+
2025-03-28 15:19:42 +08:00
AI回复内容，岗位卡片的点击事件绑定问题解决
2026-01-24 16:47:11 +08:00
// 微信小程序端点击事件处理已移除，改用v-for遍历岗位卡片列表，每个卡片单独渲染，支持点击事件
// 微信小程序端和H5端的jobId取值方式一致，都是从JSON数据的appJobUrl字段提取
// 不同的是，微信小程序端现在使用v-for遍历渲染，而H5端使用v-html渲染
// H5平台点击事件处理
// 微信小程序端和H5端的jobId取值方式一致，都是从JSON数据的appJobUrl字段提取
// 不同的是，H5端可以直接从DOM属性获取，而微信小程序端使用v-for遍历渲染
const handleH5Click = (e) => {
console.log('H5 click event triggered:', e.target);
let target = e.target;
// 查找最接近的带有class的元素
while (target && target.tagName !== 'BODY') {
console.log('Checking target:', target, 'className:', target.className, 'tagName:', target.tagName);
// 直接使用closest方法查找，不依赖className
const cardElement = target.closest('.custom-card');
const moreElement = target.closest('.custom-more');
console.log('Found elements:', { cardElement, moreElement });
if (cardElement) {
// 尝试多种方式获取jobId
let jobId = cardElement.getAttribute('data-job-id');
console.log('Found custom-card, data-job-id attribute:', jobId);
// 如果data-job-id为空，尝试从onclick事件中提取jobId
if (!jobId) {
const onclick = cardElement.getAttribute('onclick');
if (onclick) {
const match = onclick.match(/jobId=(\w+)/);
if (match && match[1]) {
jobId = match[1];
console.log('Extracted jobId from onclick:', jobId);
}
}
}
if (jobId) {
console.log('Final jobId for navigation:', jobId);
try {
// 直接使用uni.navigateTo，避免navTo函数的潜在问题
uni.navigateTo({
url: `/packageA/pages/post/post?jobId=${jobId}`,
success: (res) => {
console.log('navigateTo success:', res);
},
fail: (err) => {
console.error('navigateTo failed:', err);
// 如果navigateTo失败，尝试redirectTo
uni.redirectTo({
url: `/packageA/pages/post/post?jobId=${jobId}`,
success: (res2) => {
console.log('redirectTo success:', res2);
},
fail: (err2) => {
console.error('redirectTo also failed:', err2);
}
});
}
flat: 暂存
2025-04-10 10:59:25 +08:00
});
AI回复内容，岗位卡片的点击事件绑定问题解决
2026-01-24 16:47:11 +08:00
} catch (error) {
console.error('Navigation error:', error);
}
return;
} else {
console.error('No jobId found for custom-card');
}
} else if (moreElement) {
// 尝试多种方式获取jobId
let jobId = moreElement.getAttribute('data-job-id');
console.log('Found custom-more, data-job-id attribute:', jobId);
// 如果data-job-id为空，尝试从onclick事件中提取jobId
if (!jobId) {
const onclick = moreElement.getAttribute('onclick');
if (onclick) {
const match = onclick.match(/jobId=(\w+)/);
if (match && match[1]) {
jobId = match[1];
console.log('Extracted jobId from onclick:', jobId);
}
}
}
if (jobId) {
console.log('Final jobId for more jobs:', jobId);
try {
// 直接使用uni.navigateTo，避免navTo函数的潜在问题
uni.navigateTo({
url: `/packageA/pages/moreJobs/moreJobs?jobId=${jobId}`,
success: (res) => {
console.log('navigateTo success:', res);
},
fail: (err) => {
console.error('navigateTo failed:', err);
// 如果navigateTo失败，尝试redirectTo
uni.redirectTo({
url: `/packageA/pages/moreJobs/moreJobs?jobId=${jobId}`,
success: (res2) => {
console.log('redirectTo success:', res2);
},
fail: (err2) => {
console.error('redirectTo also failed:', err2);
}
});
}
});
} catch (error) {
console.error('Navigation error:', error);
}
return;
} else {
console.error('No jobId found for custom-more');
}
}
target = target.parentElement;
flat:AI+
2025-03-28 15:19:42 +08:00
}
};
AI回复内容，岗位卡片的点击事件绑定问题解决
2026-01-24 16:47:11 +08:00
// 移除旧的事件监听逻辑，改用全局点击处理
onMounted(() => {
console.log('onMounted called');
});
flat:AI+
2025-03-28 15:19:42 +08:00
</script>
<style lang="scss">
flat: 暂存
2025-04-10 10:59:25 +08:00
.cursor-blink {
display: inline-block;
width: 8px;
height: 1.2em;
background-color: black;
animation: blink 1s step-start infinite;
margin-left: 2px;
vertical-align: bottom;
}
@keyframes blink {
50% {
opacity: 0;
}
}
flat:AI+
2025-03-28 15:19:42 +08:00
.markdown-body {
h2,
h3,
h4,
h5,
h6 {
// line-height: 1;
}
ul {
// display: block;
padding-inline-start: 40rpx;
li {
margin-bottom: -30rpx;
flat: 优化语音
2025-04-16 14:24:06 +08:00
display: list-item;
list-style-position: outside; /* 确保数字/点在左侧 */
word-break: break-word;
p {
display: inline;
margin: 0;
padding: 0;
}
}
li:nth-child(1) {
margin-top: -20rpx;
}
}
ol {
li {
display: list-item;
list-style-position: outside; /* 确保数字/点在左侧 */
word-break: break-word;
p {
display: inline;
margin: 0;
padding: 0;
}
flat:AI+
2025-03-28 15:19:42 +08:00
}
li:nth-child(1) {
flat: 优化语音
2025-04-16 14:24:06 +08:00
margin-top: -20rpx;
flat:AI+
2025-03-28 15:19:42 +08:00
}
}
flat:4.7暂存
2025-04-07 09:10:55 +08:00
p {
font-weight: 500;
flat: 优化语音
2025-04-16 14:24:06 +08:00
line-height: 1.5;
flat:4.7暂存
2025-04-07 09:10:55 +08:00
}
flat:AI+
2025-03-28 15:19:42 +08:00
}
.markdown-body {
user-select: text;
-webkit-user-select: text;
white-space: pre-wrap;
}
/* 表格 */
企业信息补全页面开发
2025-10-21 22:58:47 +08:00
/* #ifndef MP-WEIXIN */
flat:AI+
2025-03-28 15:19:42 +08:00
table {
// display: block; /* 让表格可滚动 */
// width: 100%;
// overflow-x: auto;
// white-space: nowrap; /* 防止单元格内容换行 */
border-collapse: collapse;
}
th,
td {
padding: 16rpx;
border: 2rpx solid #ddd;
font-size: 24rpx;
}
th {
background-color: #007bff;
color: white;
font-weight: bold;
}
/* 隔行变色 */
tr:nth-child(even) {
background-color: #f9f9f9;
}
/* 鼠标悬停效果 */
tr:hover {
background-color: #f1f1f1;
transition: 0.3s;
}
企业信息补全页面开发
2025-10-21 22:58:47 +08:00
/* #endif */
flat:AI+
2025-03-28 15:19:42 +08:00
/* 代码块 */
pre,
code {
user-select: text;
flat: 暂存
2025-04-10 10:59:25 +08:00
display: flex;
flex-direction: column;
margin-top: 0;
margin-bottom: 0;
}
pre code {
padding: 0;
margin: 0;
min-height: 0;
line-height: 1;
}
pre code {
white-space: pre-wrap; /* 保证换行处理 */
flat:AI+
2025-03-28 15:19:42 +08:00
}
flat: 暂存
2025-04-10 10:59:25 +08:00
flat: 兼容
2025-05-13 11:42:17 +08:00
/* #ifndef MP-WEIXIN */
flat: 暂存
2025-04-10 10:59:25 +08:00
pre code:empty,
pre code:not(:has(*)):not(:has(text)) {
display: none;
}
flat: 兼容
2025-05-13 11:42:17 +08:00
/* #endif */
/* #ifdef MP-WEIXIN */
pre code:empty {
display: none;
}
/* #endif */
flat: 暂存
2025-04-10 10:59:25 +08:00
flat:AI+
2025-03-28 15:19:42 +08:00
.code-container {
position: relative;
border-radius: 10rpx;
overflow: hidden;
font-size: 28rpx;
height: fit-content;
}
.code-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10rpx 20rpx;
background: #161b22;
color: #888;
font-size: 24rpx;
border-radius: 10rpx 10rpx 0 0;
}
.copy-btn {
background: rgba(255, 255, 255, 0.1);
color: #ddd;
border: none;
padding: 6rpx 16rpx;
font-size: 24rpx;
cursor: pointer;
border-radius: 6rpx;
}
企业信息补全页面开发
2025-10-21 22:58:47 +08:00
/* #ifndef MP-WEIXIN */
flat:AI+
2025-03-28 15:19:42 +08:00
.copy-btn:hover {
background: rgba(255, 255, 255, 0.2);
color: #259939;
text-decoration: underline;
}
企业信息补全页面开发
2025-10-21 22:58:47 +08:00
/* #endif */
flat:AI+
2025-03-28 15:19:42 +08:00
pre.hljs {
padding: 0 24rpx;
margin: 0;
border-radius: 0 0 16rpx 16rpx;
flat: 暂存
2025-04-10 10:59:25 +08:00
background-color: #ffffff;
flat:AI+
2025-03-28 15:19:42 +08:00
padding: 20rpx;
overflow-x: auto;
font-size: 24rpx;
margin-top: 10rpx;
margin-top: -66rpx;
}
pre code {
margin: 0;
padding: 0;
display: block;
white-space: pre-wrap; /* 允许自动换行 */
word-break: break-word;
}
ol {
list-style: decimal-leading-zero;
padding-left: 60rpx;
}
.line-num {
display: inline-block;
text-align: right;
color: #666;
margin-right: 20rpx;
display: inline-block;
text-align: right;
}
flat: 暂存
2025-04-10 10:59:25 +08:00
企业信息补全页面开发
2025-10-21 22:58:47 +08:00
/* #ifndef MP-WEIXIN */
flat: 暂存
2025-04-10 10:59:25 +08:00
#markdown-content ::v-deep div > pre:first-of-type {
margin-top: 20rpx;
}
#markdown-content ::v-deep > div {
display: flex;
flex-direction: column;
}
企业信息补全页面开发
2025-10-21 22:58:47 +08:00
/* #endif */
flat: 暂存
2025-04-10 10:59:25 +08:00
.markdownRich > div {
display: flex;
flex-direction: column;
}
</style>
<style lang="stylus">
AI小程序端样式修复
2026-01-22 14:05:22 +08:00
.custom-more
flat: 修改
2025-08-20 13:38:47 +08:00
display: flex
app添加工作经历开发
2025-10-13 16:01:49 +08:00
justify-content: center
align-items: center
color: #FFFFFF
background: linear-gradient(135deg, #256BFA 0%, #9E74FD 100%)
border-radius: 50rpx
padding: 20rpx 32rpx
margin: 20rpx 0
font-size: 28rpx
font-weight: 600
box-shadow: 0rpx 8rpx 24rpx rgba(37, 107, 250, 0.3)
transition: all 0.3s ease
position: relative
overflow: hidden
AI小程序端样式修复
2026-01-22 14:05:22 +08:00
.more-icon
width: 32rpx
height: 32rpx
background: url('@/static/svg/seemore.svg') center center no-repeat
flat: 修改
2025-08-20 13:38:47 +08:00
background-size: 100% 100%
app添加工作经历开发
2025-10-13 16:01:49 +08:00
margin-left: 12rpx
filter: brightness(0) invert(1)
AI小程序端样式修复
2026-01-22 14:05:22 +08:00
&::before
app添加工作经历开发
2025-10-13 16:01:49 +08:00
content: ''
position: absolute
top: 0
left: -100%
width: 100%
height: 100%
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent)
transition: left 0.5s ease
AI小程序端样式修复
2026-01-22 14:05:22 +08:00
&:active
app添加工作经历开发
2025-10-13 16:01:49 +08:00
transform: translateY(2rpx)
box-shadow: 0rpx 4rpx 16rpx rgba(37, 107, 250, 0.4)
AI小程序端样式修复
2026-01-22 14:05:22 +08:00
&:active::before
app添加工作经历开发
2025-10-13 16:01:49 +08:00
left: 100%
AI小程序端样式修复
2026-01-22 14:05:22 +08:00
/* 为小程序专门优化的样式 */
/* #ifdef MP-WEIXIN */
.rich-text-container
padding: 0 20rpx
.markdownRich
padding: 0
/* #endif */
AI回复内容，岗位卡片的点击事件绑定问题解决
2026-01-24 16:47:11 +08:00
/* H5端和小程序端样式优化 */
flat: 暂存
2025-04-10 10:59:25 +08:00
.custom-card
AI回复内容，岗位卡片的点击事件绑定问题解决
2026-01-24 16:47:11 +08:00
background: #FFFFFF !important
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04) !important
border-radius: 20rpx !important
padding: 28rpx 24rpx !important
font-weight: 400 !important
font-size: 28rpx !important
color: #333333 !important
margin-bottom: 22rpx !important
position: relative !important
display: block !important
flex-direction: column !important
/* 确保在所有平台中边距正确应用 */
margin-left: auto !important
margin-right: auto !important
width: 100% !important
box-sizing: border-box !important
text-decoration: none !important
overflow: hidden !important
.custom-card .card-title
font-weight: 600 !important
display: flex !important
align-items: center !important
justify-content: space-between !important
margin-bottom: 16rpx !important
.custom-card .card-title .title-text
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif !important
max-width: calc(100% - 160rpx) !important
overflow: hidden !important
text-overflow: ellipsis !important
font-size: 32rpx !important
line-height: 1.4 !important
white-space: nowrap !important
margin-bottom: 0 !important
.custom-card .card-title .card-salary
font-family: DIN-Medium !important
font-size: 32rpx !important
color: #4C6EFB !important
line-height: 1.4 !important
font-weight: 500 !important
margin-bottom: 0 !important
.custom-card .card-company
margin-bottom: 18rpx !important
max-width: 100% !important
overflow: hidden !important
text-overflow: ellipsis !important
color: #6C7282 !important
line-height: 1.4 !important
white-space: nowrap !important
font-size: 28rpx !important
margin-top: 0 !important
display: block !important
.custom-card .card-tags
display: flex !important
flex-wrap: wrap !important
margin-bottom: 24rpx !important
.custom-card .card-tag
font-weight: 400 !important
font-size: 24rpx !important
color: #6C7282 !important
width: fit-content !important
background: #F4F4F4 !important
border-radius: 4rpx !important
padding: 6rpx 20rpx !important
margin-right: 20rpx !important
margin-bottom: 14rpx !important
display: inline-flex !important
align-items: center !important
justify-content: center !important
height: 30rpx !important
line-height: 30rpx !important
.custom-card .card-bottom
display: flex !important
justify-content: space-between !important
font-size: 24rpx !important
color: #6C7282 !important
margin-top: 0 !important
margin-bottom: 0 !important
.custom-card .card-bottom .info-item
display: flex !important
align-items: center !important
justify-content: center !important
margin-bottom: 0 !important
.custom-card .card-info
display: flex !important
align-items: center !important
justify-content: space-between !important
padding-right: 40rpx !important
.custom-card .card-info .info-item
display: flex !important
position: relative !important
align-items: center !important
.custom-card .card-info .info-item:last-child
color: #256BFA !important
font-size: 28rpx !important
padding-right: 10rpx !important
.custom-card .position-nav
position: absolute !important
right: -10rpx !important
top: 50% !important
transform: translateY(-50%) !important
.custom-card .position-nav::before
position: absolute !important
left: 0 !important
top: -4rpx !important
content: '' !important
width: 4rpx !important
height: 16rpx !important
border-radius: 2rpx !important
background: #256BFA !important
transform: translate(0, -50%) rotate(-45deg) !important
.custom-card .position-nav::after
position: absolute !important
left: 0 !important
top: -4rpx !important
content: '' !important
width: 4rpx !important
height: 16rpx !important
border-radius: 2rpx !important
background: #256BFA !important
transform: rotate(45deg) !important
/* 为微信小程序专门优化的样式选择器 */
/* #ifdef MP-WEIXIN */
.job-cards-container .custom-card
background: #FFFFFF !important
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04) !important
border-radius: 20rpx !important
padding: 28rpx 24rpx !important
font-weight: 400 !important
font-size: 28rpx !important
color: #333333 !important
margin-bottom: 22rpx !important
position: relative !important
display: block !important
flex-direction: column !important
margin-left: auto !important
margin-right: auto !important
width: 100% !important
box-sizing: border-box !important
text-decoration: none !important
overflow: hidden !important
.job-cards-container .custom-card .card-title
font-weight: 600 !important
display: flex !important
align-items: center !important
justify-content: space-between !important
margin-bottom: 16rpx !important
.job-cards-container .custom-card .card-title .title-text
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif !important
max-width: calc(100% - 160rpx) !important
overflow: hidden !important
text-overflow: ellipsis !important
font-size: 32rpx !important
line-height: 1.4 !important
white-space: nowrap !important
margin-bottom: 0 !important
.job-cards-container .custom-card .card-title .card-salary
font-family: DIN-Medium !important
font-size: 32rpx !important
color: #4C6EFB !important
line-height: 1.4 !important
font-weight: 500 !important
margin-bottom: 0 !important
.job-cards-container .custom-card .card-company
margin-bottom: 18rpx !important
max-width: 100% !important
overflow: hidden !important
text-overflow: ellipsis !important
color: #6C7282 !important
line-height: 1.4 !important
white-space: nowrap !important
font-size: 28rpx !important
margin-top: 0 !important
display: block !important
.job-cards-container .custom-card .card-info
display: flex !important
align-items: center !important
justify-content: space-between !important
padding-right: 40rpx !important
.job-cards-container .custom-card .card-info .info-item
display: flex !important
position: relative !important
align-items: center !important
.job-cards-container .custom-card .card-info .info-item:last-child
color: #256BFA !important
font-size: 28rpx !important
padding-right: 10rpx !important
.job-cards-container .custom-card .card-info .info-item .card-tag
font-weight: 400 !important
font-size: 24rpx !important
color: #6C7282 !important
width: fit-content !important
background: #F4F4F4 !important
border-radius: 4rpx !important
padding: 6rpx 20rpx !important
margin-right: 20rpx !important
margin-bottom: 14rpx !important
display: inline-flex !important
align-items: center !important
justify-content: center !important
height: 30rpx !important
line-height: 30rpx !important
.job-cards-container .custom-card .position-nav
position: absolute !important
right: -10rpx !important
top: 50% !important
transform: translateY(-50%) !important
.job-cards-container .custom-card .position-nav::before
position: absolute !important
left: 0 !important
top: -4rpx !important
content: '' !important
width: 4rpx !important
height: 16rpx !important
border-radius: 2rpx !important
background: #256BFA !important
transform: translate(0, -50%) rotate(-45deg) !important
.job-cards-container .custom-card .position-nav::after
position: absolute !important
left: 0 !important
top: -4rpx !important
content: '' !important
width: 4rpx !important
height: 16rpx !important
border-radius: 2rpx !important
background: #256BFA !important
transform: rotate(45deg) !important
/* #endif */
/* 额外的H5端样式优化 */
/* #ifndef MP-WEIXIN */
/* 确保样式能正确应用到v-html生成的内容，使用深度选择器 */
.markdown-body {
/* 确保样式能正确应用到v-html生成的内容 */
& > div {
display: flex !important;
flex-direction: column !important;
}
AI小程序端样式修复
2026-01-22 14:05:22 +08:00
AI回复内容，岗位卡片的点击事件绑定问题解决
2026-01-24 16:47:11 +08:00
/* 为v-html生成的a标签添加样式，使用!important确保优先级 */
& > div > a.custom-card,
& > a.custom-card,
& * > a.custom-card,
& * * > a.custom-card {
display: block !important;
margin-bottom: 22rpx !important;
background: #FFFFFF !important;
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04) !important;
border-radius: 20rpx !important;
padding: 28rpx 24rpx !important;
font-weight: 400 !important;
font-size: 28rpx !important;
color: #333333 !important;
text-decoration: none !important;
overflow: hidden !important;
}
AI小程序端样式修复
2026-01-22 14:05:22 +08:00
AI回复内容，岗位卡片的点击事件绑定问题解决
2026-01-24 16:47:11 +08:00
/* 为v-html生成的内容添加样式 */
& > div > a.custom-card .card-title,
& > a.custom-card .card-title,
& * > a.custom-card .card-title,
& * * > a.custom-card .card-title {
font-weight: 600 !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin-bottom: 16rpx !important;
}
AI小程序端样式修复
2026-01-22 14:05:22 +08:00
AI回复内容，岗位卡片的点击事件绑定问题解决
2026-01-24 16:47:11 +08:00
& > div > a.custom-card .card-title .title-text,
& > a.custom-card .card-title .title-text,
& * > a.custom-card .card-title .title-text,
& * * > a.custom-card .card-title .title-text {
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif !important;
font-size: 32rpx !important;
line-height: 1.4 !important;
color: #333333 !important;
max-width: calc(100% - 160rpx) !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
margin-bottom: 0 !important;
}
AI小程序端样式修复
2026-01-22 14:05:22 +08:00
AI回复内容，岗位卡片的点击事件绑定问题解决
2026-01-24 16:47:11 +08:00
& > div > a.custom-card .card-title .card-salary,
& > a.custom-card .card-title .card-salary,
& * > a.custom-card .card-title .card-salary,
& * * > a.custom-card .card-title .card-salary {
font-family: DIN-Medium !important;
font-size: 32rpx !important;
color: #4C6EFB !important;
line-height: 1.4 !important;
font-weight: 500 !important;
margin-bottom: 0 !important;
}
AI小程序端样式修复
2026-01-22 14:05:22 +08:00
AI回复内容，岗位卡片的点击事件绑定问题解决
2026-01-24 16:47:11 +08:00
& > div > a.custom-card .card-company,
& > a.custom-card .card-company,
& * > a.custom-card .card-company,
& * * > a.custom-card .card-company {
margin-bottom: 18rpx !important;
font-size: 28rpx !important;
color: #6C7282 !important;
line-height: 1.4 !important;
max-width: 100% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
margin-top: 0 !important;
display: block !important;
}
& > div > a.custom-card .card-tags,
& > a.custom-card .card-tags,
& * > a.custom-card .card-tags,
& * * > a.custom-card .card-tags {
display: flex !important;
flex-wrap: wrap !important;
margin-bottom: 24rpx !important;
}
& > div > a.custom-card .card-tag,
& > a.custom-card .card-tag,
& * > a.custom-card .card-tag,
& * * > a.custom-card .card-tag {
font-weight: 400 !important;
font-size: 24rpx !important;
color: #6C7282 !important;
width: fit-content !important;
background: #F4F4F4 !important;
border-radius: 4rpx !important;
padding: 6rpx 20rpx !important;
margin-right: 20rpx !important;
margin-bottom: 14rpx !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 30rpx !important;
line-height: 30rpx !important;
}
AI小程序端样式修复
2026-01-22 14:05:22 +08:00
AI回复内容，岗位卡片的点击事件绑定问题解决
2026-01-24 16:47:11 +08:00
& > div > a.custom-card .card-bottom,
& > a.custom-card .card-bottom,
& * > a.custom-card .card-bottom,
& * * > a.custom-card .card-bottom {
display: flex !important;
justify-content: space-between !important;
font-size: 24rpx !important;
color: #6C7282 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
& > div > a.custom-card .card-bottom .info-item,
& > a.custom-card .card-bottom .info-item,
& * > a.custom-card .card-bottom .info-item,
& * * > a.custom-card .card-bottom .info-item {
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-bottom: 0 !important;
}
& > div > a.custom-card .card-info,
& > a.custom-card .card-info,
& * > a.custom-card .card-info,
& * * > a.custom-card .card-info {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding-right: 40rpx !important;
}
& > div > a.custom-card .card-info .info-item,
& > a.custom-card .card-info .info-item,
& * > a.custom-card .card-info .info-item,
& * * > a.custom-card .card-info .info-item {
display: flex !important;
align-items: center !important;
}
& > div > a.custom-card .card-info .info-item:last-child,
& > a.custom-card .card-info .info-item:last-child,
& * > a.custom-card .card-info .info-item:last-child,
& * * > a.custom-card .card-info .info-item:last-child {
color: #256BFA !important;
font-size: 28rpx !important;
padding-right: 10rpx !important;
}
}
/* #endif */
flat:AI+
2025-03-28 15:19:42 +08:00
</style>
Reference in New Issue Copy Permalink