|
|
|
|
@ -327,14 +327,12 @@ function initHotQuestionYTH(callback) { |
|
|
|
|
function initViewState() { |
|
|
|
|
footerMore.value = false |
|
|
|
|
// 当isQA=true时，需要检查第一页是否需要显示展开收起 |
|
|
|
|
if (props.isQA && active.value === 0 && hotList.value.length > 4) { |
|
|
|
|
footerMore.value = true |
|
|
|
|
if (props.isQA && active.value === 0) { |
|
|
|
|
footerMore.value = hotList.value.length > 4 |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function activeChange(e) { |
|
|
|
|
console.log(e) |
|
|
|
|
footerMore.value = true |
|
|
|
|
isExchange.value = false |
|
|
|
|
footerOpen.value = false |
|
|
|
|
numNone.value = 3 |
|
|
|
|
@ -354,16 +352,16 @@ function activeChange(e) { |
|
|
|
|
console.log(`activeChange: active=${active.value}, len=${len}, isQA=${props.isQA}`) |
|
|
|
|
|
|
|
|
|
// 当isQA=true时，第一页也需要显示展开收起功能 |
|
|
|
|
if ((active.value === 0 && !props.isQA) || len <= 4) { |
|
|
|
|
footerMore.value = false |
|
|
|
|
if ((active.value === 0 && !props.isQA)) { |
|
|
|
|
footerMore.value = len > 4 |
|
|
|
|
} |
|
|
|
|
// 当isQA=true且在第一页时，如果数据超过4条也要显示展开收起 |
|
|
|
|
if (props.isQA && active.value === 0 && len > 4) { |
|
|
|
|
footerMore.value = true |
|
|
|
|
if (props.isQA && active.value === 0) { |
|
|
|
|
footerMore.value = len > 4 |
|
|
|
|
} |
|
|
|
|
// 其他页签如果数据超过4条也要显示展开收起 |
|
|
|
|
if (active.value > 0 && len > 4) { |
|
|
|
|
footerMore.value = true |
|
|
|
|
if (active.value > 0) { |
|
|
|
|
footerMore.value = len > 4 |
|
|
|
|
} |
|
|
|
|
updateTabHeight() |
|
|
|
|
} |
|
|
|
|
@ -452,14 +450,14 @@ function updateTabHeight() { |
|
|
|
|
hiddenContent.style.visibility = originalVisibility |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 展开状态且有更多内容时添加25px |
|
|
|
|
// 展开状态且有更多内容时添加25rem |
|
|
|
|
const expandedPadding = footerOpen.value && hasMoreContent ? 25 : 0 |
|
|
|
|
// 折叠状态且有更多内容时添加25px |
|
|
|
|
// 折叠状态且有更多内容时添加25rem |
|
|
|
|
const collapsedPadding = hasMoreContent ? 25 : 0 |
|
|
|
|
const baseHeight = Math.max(totalHeight, 160) // visible content 最小高度 |
|
|
|
|
|
|
|
|
|
tabHeights[tabIndex] = `${baseHeight + hiddenHeight + expandedPadding}px` |
|
|
|
|
collapsedHeights[tabIndex] = `${baseHeight + collapsedPadding}px` |
|
|
|
|
tabHeights[tabIndex] = `${baseHeight + hiddenHeight + expandedPadding}rem` |
|
|
|
|
collapsedHeights[tabIndex] = `${baseHeight + collapsedPadding}rem` |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
console.log( |
|
|
|
|
@ -603,7 +601,7 @@ onMounted(() => { |
|
|
|
|
padding: 0 !important; |
|
|
|
|
|
|
|
|
|
&::before { |
|
|
|
|
right: -5px !important; |
|
|
|
|
right: -5rem !important; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -615,9 +613,9 @@ onMounted(() => { |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.van-tabs__wrap { |
|
|
|
|
padding: 0px 6px; |
|
|
|
|
padding: 0rem 6rem; |
|
|
|
|
position: relative; |
|
|
|
|
height: 39px !important; |
|
|
|
|
height: 39rem !important; |
|
|
|
|
|
|
|
|
|
&::before { |
|
|
|
|
content: ''; |
|
|
|
|
@ -625,9 +623,9 @@ onMounted(() => { |
|
|
|
|
z-index: 3; |
|
|
|
|
right: 0; |
|
|
|
|
top: 0; |
|
|
|
|
width: 1px; |
|
|
|
|
height: 40px; |
|
|
|
|
box-shadow: -8px 0px 10px 10px #fff; |
|
|
|
|
width: 1rem; |
|
|
|
|
height: 40rem; |
|
|
|
|
box-shadow: -8rem 0rem 10rem 10rem #fff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&::after { |
|
|
|
|
@ -645,13 +643,15 @@ onMounted(() => { |
|
|
|
|
|
|
|
|
|
.van-tabs__nav { |
|
|
|
|
.van-tab { |
|
|
|
|
padding: 0px 10px; |
|
|
|
|
padding: 0rem 10rem; |
|
|
|
|
color: #7e849f; |
|
|
|
|
font-size: 13px; |
|
|
|
|
font-size: 13rem; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.van-cell__value { |
|
|
|
|
text-align: left; |
|
|
|
|
color: #025cea; |
|
|
|
|
span { |
|
|
|
|
word-break: break-all; |
|
|
|
|
word-wrap: break-word; |
|
|
|
|
@ -659,18 +659,18 @@ onMounted(() => { |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.van-tab--active { |
|
|
|
|
margin: 0px -2px; |
|
|
|
|
margin: 0rem -2rem; |
|
|
|
|
|
|
|
|
|
span { |
|
|
|
|
font-weight: 700; |
|
|
|
|
font-size: 14px; |
|
|
|
|
font-size: 14rem; |
|
|
|
|
color: #025cea; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
<style scoped lang="scss"> |
|
|
|
|
.hot-question { |
|
|
|
|
padding-top: 10px; |
|
|
|
|
padding-top: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.hot-question-main { |
|
|
|
|
@ -679,18 +679,18 @@ onMounted(() => { |
|
|
|
|
flex-direction: column; |
|
|
|
|
position: relative; |
|
|
|
|
background: #fff; |
|
|
|
|
border-radius: 8px; |
|
|
|
|
border-radius: 8rem; |
|
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
|
|
.content_body { |
|
|
|
|
width: 100%; |
|
|
|
|
min-height: 180px; |
|
|
|
|
min-height: 180rem; |
|
|
|
|
|
|
|
|
|
.van-tabs__nav1 { |
|
|
|
|
font-weight: bold; |
|
|
|
|
|
|
|
|
|
& :deep(.van-tabs__line) { |
|
|
|
|
width: 24px !important; |
|
|
|
|
width: 24rem !important; |
|
|
|
|
background: #025cea; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -703,7 +703,7 @@ onMounted(() => { |
|
|
|
|
.van_cell { |
|
|
|
|
position: relative; |
|
|
|
|
width: 100%; |
|
|
|
|
padding: 4px 16px 4px 35px; |
|
|
|
|
padding: 4rem 16rem 4rem 35rem; |
|
|
|
|
|
|
|
|
|
.van-icon { |
|
|
|
|
color: #7e849f; |
|
|
|
|
@ -711,36 +711,39 @@ onMounted(() => { |
|
|
|
|
|
|
|
|
|
.van_cell span { |
|
|
|
|
color: #17204d; |
|
|
|
|
font-size: 13px; |
|
|
|
|
font-size: 13rem; |
|
|
|
|
font-weight: 400; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&:nth-child(odd)::before { |
|
|
|
|
position: absolute; |
|
|
|
|
left: 15px; |
|
|
|
|
left: 15rem; |
|
|
|
|
top: 50%; |
|
|
|
|
transform: translateY(-50%); |
|
|
|
|
content: ''; |
|
|
|
|
width: 11px; |
|
|
|
|
height: 9px; |
|
|
|
|
width: 11rem; |
|
|
|
|
height: 9rem; |
|
|
|
|
background: url('@/assets/images/qustion_icon.png'); |
|
|
|
|
background-size: cover; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&:nth-child(even)::before { |
|
|
|
|
position: absolute; |
|
|
|
|
left: 15px; |
|
|
|
|
left: 15rem; |
|
|
|
|
top: 50%; |
|
|
|
|
transform: translateY(-50%); |
|
|
|
|
content: ''; |
|
|
|
|
width: 11px; |
|
|
|
|
height: 9px; |
|
|
|
|
width: 11rem; |
|
|
|
|
height: 9rem; |
|
|
|
|
background: url('@/assets/images/qustion_icon2.png'); |
|
|
|
|
background-size: cover; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
& :deep(.van-cell__right-icon) { |
|
|
|
|
font-size: 13px; |
|
|
|
|
line-height: 28rem; |
|
|
|
|
height: 28rem; |
|
|
|
|
font-size: 12rem; |
|
|
|
|
color: #025cea; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -750,7 +753,7 @@ onMounted(() => { |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.change_body { |
|
|
|
|
padding: 0px 16px; |
|
|
|
|
padding: 0rem 16rem; |
|
|
|
|
|
|
|
|
|
.border_div { |
|
|
|
|
display: flex; |
|
|
|
|
@ -762,26 +765,26 @@ onMounted(() => { |
|
|
|
|
content: ''; |
|
|
|
|
position: absolute; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 0.5px; |
|
|
|
|
height: 0.5rem; |
|
|
|
|
background: #e4eaf2; |
|
|
|
|
left: 0; |
|
|
|
|
top: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.refresh-btn-img { |
|
|
|
|
line-height: 17px; |
|
|
|
|
line-height: 17rem; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
padding: 10px 0px; |
|
|
|
|
padding: 10rem 0rem; |
|
|
|
|
|
|
|
|
|
img { |
|
|
|
|
width: 13px; |
|
|
|
|
height: 13px; |
|
|
|
|
margin-right: 4px; |
|
|
|
|
width: 13rem; |
|
|
|
|
height: 13rem; |
|
|
|
|
margin-right: 4rem; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
span { |
|
|
|
|
font-size: 14px; |
|
|
|
|
font-size: 14rem; |
|
|
|
|
color: #17204d; |
|
|
|
|
font-weight: 700; |
|
|
|
|
} |
|
|
|
|
@ -800,15 +803,15 @@ onMounted(() => { |
|
|
|
|
position: absolute; |
|
|
|
|
bottom: 0; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 30px; |
|
|
|
|
height: 30rem; |
|
|
|
|
color: #025cea; |
|
|
|
|
line-height: 30px; |
|
|
|
|
line-height: 30rem; |
|
|
|
|
background: linear-gradient(rgba(255, 255, 255, 0), #fff 70%); |
|
|
|
|
border-radius: 8px; |
|
|
|
|
border-radius: 8rem; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: center; |
|
|
|
|
font-size: 14px; |
|
|
|
|
font-size: 14rem; |
|
|
|
|
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); |
|
|
|
|
cursor: pointer; |
|
|
|
|
z-index: 1; |
|
|
|
|
@ -819,7 +822,7 @@ onMounted(() => { |
|
|
|
|
|
|
|
|
|
&.expanded, |
|
|
|
|
.footerOpen & { |
|
|
|
|
padding-top: 5px; |
|
|
|
|
padding-top: 5rem; |
|
|
|
|
background: #fff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -830,10 +833,10 @@ onMounted(() => { |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
span { |
|
|
|
|
font-size: 15px; |
|
|
|
|
font-size: 15rem; |
|
|
|
|
font-weight: 700; |
|
|
|
|
margin-right: 4px; |
|
|
|
|
line-height: 15px; |
|
|
|
|
margin-right: 4rem; |
|
|
|
|
line-height: 15rem; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.van-icon { |
|
|
|
|
@ -870,8 +873,8 @@ onMounted(() => { |
|
|
|
|
.van_cell { |
|
|
|
|
position: relative; |
|
|
|
|
width: 100%; |
|
|
|
|
padding: 4px 16px 4px 35px; |
|
|
|
|
min-height: 35px; |
|
|
|
|
padding: 4rem 16rem 4rem 35rem; |
|
|
|
|
min-height: 35rem; |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
|
|
.van-cell__value { |
|
|
|
|
@ -884,7 +887,7 @@ onMounted(() => { |
|
|
|
|
/* 所有页签（不只第一个）给最小高度兜底：tab-inner 是绝对定位， |
|
|
|
|
惰性渲染 + 高度未测量时 tab-content 高度为 0，内容会被 overflow:hidden 藏住 */ |
|
|
|
|
.van-tabs__content .tab-content { |
|
|
|
|
min-height: 140px !important; |
|
|
|
|
min-height: 140rem !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* 确保热点页cell内容完全显示 */ |
|
|
|
|
@ -895,7 +898,7 @@ onMounted(() => { |
|
|
|
|
|
|
|
|
|
/* 确保"换一换"按钮触发后内容更新正常显示 */ |
|
|
|
|
.van-tabs__content > :first-child .visible-content { |
|
|
|
|
min-height: 140px; |
|
|
|
|
min-height: 140rem; |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
} |
|
|
|
|
|
wujingling0908
5 days ago