主包体积太大，相关代码迁移
This commit is contained in:
francis-fh
976
packageA/components/md-render/md-render.vue
Normal file
976
packageA/components/md-render/md-render.vue
Normal file
@@ -0,0 +1,976 @@
|
||||
<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.encryptJobId)"
|
||||
>
|
||||
<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 '@/packageA/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 = (encryptJobId) => {
|
||||
console.log('navigateToJobDetail called with encryptJobId:', encryptJobId);
|
||||
if (encryptJobId && encryptJobId !== 'undefined' && encryptJobId !== 'null') {
|
||||
let url = `/packageA/pages/post/post?encryptJobId=${encryptJobId}`
|
||||
uni.navigateTo({
|
||||
url: url,
|
||||
success: (res) => {
|
||||
console.log('navigateTo success:', res);
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('navigateTo failed:', err);
|
||||
uni.redirectTo({
|
||||
url: url,
|
||||
success: (res2) => {
|
||||
console.log('redirectTo success:', res2);
|
||||
},
|
||||
fail: (err2) => {
|
||||
console.error('redirectTo also failed:', err2);
|
||||
uni.showToast({
|
||||
title: '跳转失败，请稍后重试',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.error('Invalid encryptJobId:', encryptJobId);
|
||||
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) {
|
||||
let encryptJobId = cardElement.getAttribute('data-encrypt-job-id');
|
||||
console.log('Found custom-card, data-encrypt-job-id attribute:', encryptJobId);
|
||||
|
||||
if (!encryptJobId) {
|
||||
const onclick = cardElement.getAttribute('onclick');
|
||||
if (onclick) {
|
||||
const match = onclick.match(/encryptJobId=([^'"]+)/);
|
||||
if (match && match[1]) {
|
||||
encryptJobId = match[1];
|
||||
console.log('Extracted encryptJobId from onclick:', encryptJobId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (encryptJobId) {
|
||||
console.log('Final encryptJobId for navigation:', encryptJobId);
|
||||
try {
|
||||
let url = `/packageA/pages/post/post?encryptJobId=${encryptJobId}`
|
||||
uni.navigateTo({
|
||||
url: url,
|
||||
success: (res) => {
|
||||
console.log('navigateTo success:', res);
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('navigateTo failed:', err);
|
||||
uni.redirectTo({
|
||||
url: url,
|
||||
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 encryptJobId found for custom-card');
|
||||
}
|
||||
} else if (moreElement) {
|
||||
let encryptJobId = moreElement.getAttribute('data-encrypt-job-id');
|
||||
console.log('Found custom-more, data-encrypt-job-id attribute:', encryptJobId);
|
||||
|
||||
if (!encryptJobId) {
|
||||
const onclick = moreElement.getAttribute('onclick');
|
||||
if (onclick) {
|
||||
const match = onclick.match(/encryptJobId=([^'"]+)/);
|
||||
if (match && match[1]) {
|
||||
encryptJobId = match[1];
|
||||
console.log('Extracted encryptJobId from onclick:', encryptJobId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (encryptJobId) {
|
||||
console.log('Final encryptJobId for more jobs:', encryptJobId);
|
||||
try {
|
||||
let url = `/packageA/pages/moreJobs/moreJobs?encryptJobId=${encryptJobId}`
|
||||
uni.navigateTo({
|
||||
url: url,
|
||||
success: (res) => {
|
||||
console.log('navigateTo success:', res);
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('navigateTo failed:', err);
|
||||
uni.redirectTo({
|
||||
url: url,
|
||||
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: flex !important;
|
||||
flex-direction: column !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: calc(100% - 0rpx) !important;
|
||||
max-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>
|
||||
Reference in New Issue
Block a user