983 lines
30 KiB
Vue
983 lines
30 KiB
Vue
<template>
|
||
<view class="markdown-body">
|
||
<!-- 根据不同平台使用不同的渲染方式 -->
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<!-- 微信小程序端：使用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>
|
||
<!-- #endif -->
|
||
<!-- #ifndef MP-WEIXIN -->
|
||
<view class="markdown-body" v-html="renderedHtml" @click="handleH5Click"></view>
|
||
<!-- #endif -->
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, onMounted, inject, ref, watch, nextTick } from 'vue';
|
||
import { parseMarkdown, codeDataList, jobCardsList } from '@/utils/markdownParser';
|
||
const { navTo } = inject('globalFunction');
|
||
const props = defineProps({
|
||
content: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
typing: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
});
|
||
|
||
const renderedHtml = computed(() => parseMarkdown(props.content));
|
||
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'
|
||
});
|
||
}
|
||
};
|
||
|
||
// 微信小程序端点击事件处理已移除，改用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);
|
||
}
|
||
});
|
||
}
|
||
});
|
||
} 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;
|
||
}
|
||
};
|
||
|
||
// 移除旧的事件监听逻辑，改用全局点击处理
|
||
|
||
onMounted(() => {
|
||
console.log('onMounted called');
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.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;
|
||
}
|
||
}
|
||
.markdown-body {
|
||
h2,
|
||
h3,
|
||
h4,
|
||
h5,
|
||
h6 {
|
||
// line-height: 1;
|
||
}
|
||
ul {
|
||
// display: block;
|
||
padding-inline-start: 40rpx;
|
||
li {
|
||
margin-bottom: -30rpx;
|
||
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;
|
||
}
|
||
}
|
||
li:nth-child(1) {
|
||
margin-top: -20rpx;
|
||
}
|
||
}
|
||
p {
|
||
font-weight: 500;
|
||
line-height: 1.5;
|
||
}
|
||
}
|
||
.markdown-body {
|
||
user-select: text;
|
||
-webkit-user-select: text;
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
/* 表格 */
|
||
/* #ifndef MP-WEIXIN */
|
||
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;
|
||
}
|
||
/* #endif */
|
||
|
||
/* 代码块 */
|
||
pre,
|
||
code {
|
||
user-select: text;
|
||
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; /* 保证换行处理 */
|
||
}
|
||
|
||
/* #ifndef MP-WEIXIN */
|
||
pre code:empty,
|
||
pre code:not(:has(*)):not(:has(text)) {
|
||
display: none;
|
||
}
|
||
/* #endif */
|
||
/* #ifdef MP-WEIXIN */
|
||
pre code:empty {
|
||
display: none;
|
||
}
|
||
/* #endif */
|
||
|
||
.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;
|
||
}
|
||
/* #ifndef MP-WEIXIN */
|
||
.copy-btn:hover {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
color: #259939;
|
||
text-decoration: underline;
|
||
}
|
||
/* #endif */
|
||
|
||
pre.hljs {
|
||
padding: 0 24rpx;
|
||
margin: 0;
|
||
border-radius: 0 0 16rpx 16rpx;
|
||
background-color: #ffffff;
|
||
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;
|
||
}
|
||
|
||
/* #ifndef MP-WEIXIN */
|
||
#markdown-content ::v-deep div > pre:first-of-type {
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
#markdown-content ::v-deep > div {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
/* #endif */
|
||
.markdownRich > div {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
</style>
|
||
|
||
<style lang="stylus">
|
||
.custom-more
|
||
display: flex
|
||
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
|
||
|
||
.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
|
||
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
|
||
|
||
&:active
|
||
transform: translateY(2rpx)
|
||
box-shadow: 0rpx 4rpx 16rpx rgba(37, 107, 250, 0.4)
|
||
|
||
&:active::before
|
||
left: 100%
|
||
|
||
/* 为小程序专门优化的样式 */
|
||
/* #ifdef MP-WEIXIN */
|
||
.rich-text-container
|
||
padding: 0 20rpx
|
||
|
||
.markdownRich
|
||
padding: 0
|
||
/* #endif */
|
||
|
||
/* H5端和小程序端样式优化 */
|
||
.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
|
||
|
||
.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容器样式 */
|
||
display: block !important;
|
||
|
||
/* 为v-html生成的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;
|
||
box-sizing: border-box !important;
|
||
width: 100% !important;
|
||
}
|
||
|
||
/* 卡片标题样式 */
|
||
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;
|
||
}
|
||
|
||
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;
|
||
}
|
||
|
||
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;
|
||
}
|
||
|
||
/* 公司信息样式 */
|
||
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;
|
||
}
|
||
|
||
/* 标签容器样式 */
|
||
a.custom-card .card-tags {
|
||
display: flex !important;
|
||
flex-wrap: wrap !important;
|
||
margin-bottom: 24rpx !important;
|
||
}
|
||
|
||
/* 单个标签样式 */
|
||
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;
|
||
}
|
||
|
||
/* 卡片底部样式 */
|
||
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;
|
||
}
|
||
|
||
a.custom-card .card-bottom .info-item {
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
margin-bottom: 0 !important;
|
||
}
|
||
|
||
/* 卡片信息区域样式 */
|
||
a.custom-card .card-info {
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
justify-content: space-between !important;
|
||
padding-right: 40rpx !important;
|
||
}
|
||
|
||
a.custom-card .card-info .info-item {
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
}
|
||
|
||
a.custom-card .card-info .info-item:last-child {
|
||
color: #256BFA !important;
|
||
font-size: 28rpx !important;
|
||
padding-right: 10rpx !important;
|
||
position: relative !important;
|
||
}
|
||
|
||
/* 查看详情箭头样式 */
|
||
a.custom-card .position-nav {
|
||
position: absolute !important;
|
||
right: -10rpx !important;
|
||
top: 50% !important;
|
||
transform: translateY(-50%) !important;
|
||
}
|
||
|
||
a.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;
|
||
}
|
||
|
||
a.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;
|
||
}
|
||
|
||
/* 查看更多按钮样式 */
|
||
a.custom-more {
|
||
display: flex !important;
|
||
justify-content: center !important;
|
||
align-items: center !important;
|
||
color: #FFFFFF !important;
|
||
background: linear-gradient(135deg, #256BFA 0%, #9E74FD 100%) !important;
|
||
border-radius: 50rpx !important;
|
||
padding: 20rpx 32rpx !important;
|
||
margin: 20rpx 0 !important;
|
||
font-size: 28rpx !important;
|
||
font-weight: 600 !important;
|
||
box-shadow: 0rpx 8rpx 24rpx rgba(37, 107, 250, 0.3) !important;
|
||
transition: all 0.3s ease !important;
|
||
position: relative !important;
|
||
overflow: hidden !important;
|
||
text-decoration: none !important;
|
||
box-sizing: border-box !important;
|
||
width: 100% !important;
|
||
}
|
||
|
||
a.custom-more .more-icon {
|
||
width: 32rpx !important;
|
||
height: 32rpx !important;
|
||
background: url('@/static/svg/seemore.svg') center center no-repeat !important;
|
||
background-size: 100% 100% !important;
|
||
margin-left: 12rpx !important;
|
||
filter: brightness(0) invert(1) !important;
|
||
}
|
||
|
||
a.custom-more::before {
|
||
content: '' !important;
|
||
position: absolute !important;
|
||
top: 0 !important;
|
||
left: -100% !important;
|
||
width: 100% !important;
|
||
height: 100% !important;
|
||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
|
||
transition: left 0.5s ease !important;
|
||
}
|
||
|
||
a.custom-more:active {
|
||
transform: translateY(2rpx) !important;
|
||
box-shadow: 0rpx 4rpx 16rpx rgba(37, 107, 250, 0.4) !important;
|
||
}
|
||
|
||
a.custom-more:active::before {
|
||
left: 100% !important;
|
||
}
|
||
}
|
||
/* #endif */
|
||
</style>
|