diff --git a/components/md-render/md-render.vue b/components/md-render/md-render.vue index 6a1bd41..22fdd96 100644 --- a/components/md-render/md-render.vue +++ b/components/md-render/md-render.vue @@ -768,19 +768,13 @@ ol { /* 额外的H5端样式优化 */ /* #ifndef MP-WEIXIN */ -/* 确保样式能正确应用到v-html生成的内容,使用深度选择器 */ +/* 确保样式能正确应用到v-html生成的内容 */ .markdown-body { - /* 确保样式能正确应用到v-html生成的内容 */ - & > div { - display: flex !important; - flex-direction: column !important; - } + /* 重置v-html容器样式 */ + display: block !important; - /* 为v-html生成的a标签添加样式,使用!important确保优先级 */ - & > div > a.custom-card, - & > a.custom-card, - & * > a.custom-card, - & * * > a.custom-card { + /* 为v-html生成的a.custom-card标签添加基础样式 */ + a.custom-card { display: block !important; margin-bottom: 22rpx !important; background: #FFFFFF !important; @@ -792,13 +786,12 @@ ol { color: #333333 !important; text-decoration: none !important; overflow: hidden !important; + box-sizing: border-box !important; + width: 100% !important; } - /* 为v-html生成的内容添加样式 */ - & > div > a.custom-card .card-title, - & > 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; @@ -806,10 +799,7 @@ ol { margin-bottom: 16rpx !important; } - & > 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 { + 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; @@ -821,10 +811,7 @@ ol { margin-bottom: 0 !important; } - & > 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 { + a.custom-card .card-title .card-salary { font-family: DIN-Medium !important; font-size: 32rpx !important; color: #4C6EFB !important; @@ -833,10 +820,8 @@ ol { margin-bottom: 0 !important; } - & > div > a.custom-card .card-company, - & > 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; @@ -849,19 +834,15 @@ ol { display: block !important; } - & > div > a.custom-card .card-tags, - & > 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 { + /* 单个标签样式 */ + a.custom-card .card-tag { font-weight: 400 !important; font-size: 24rpx !important; color: #6C7282 !important; @@ -878,10 +859,8 @@ ol { line-height: 30rpx !important; } - & > div > a.custom-card .card-bottom, - & > 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; @@ -890,41 +869,113 @@ ol { 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 { + 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 { + /* 卡片信息区域样式 */ + 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 { + 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 { + 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 */