This commit is contained in:
杨航
2025-12-03 13:46:00 +08:00
parent 6fa695ece0
commit 2a7bd6caeb
2 changed files with 74 additions and 73 deletions
+72 -71
View File
@@ -1,17 +1,16 @@
<template>
<view class="sparring-detail max_page">
<!-- <view class="sparring-detail-scroll"> -->
<view class="nav-bar" :style="'background-color:' + bgOpacity"></view>
<view class="top-box">
<view class="top-title">
<view class="back-icon" @click="common.navigateBack()"></view>
<!-- <uv-icon class="arrow-icon" name="arrow-left" @click="common.switchTab('/pages/index/index')" /> -->
<!-- 陪练详情 -->
</view>
<ImagePreview class="img-box" :src="detailInfo.ossAddr" :isCache="true" width="750" height="422" />
</view>
<scroll-view :scroll-y="true" class="sparring-detail-scroll" @scroll="scroll_fun"
:show-scrollbar="false">
<view class="nav-bar" :style="'background-color:' + bgOpacity"></view>
<view class="top-title">
<view class="back-icon" @click="common.navigateBack()"></view>
<!-- <uv-icon class="arrow-icon" name="arrow-left" @click="common.switchTab('/pages/index/index')" /> -->
<!-- 陪练详情 -->
</view>
<view class="top-box">
<ImagePreview class="img-box" :src="detailInfo.ossAddr" :isCache="true" width="750" height="422" />
</view>
<scroll-view :scroll-y="true" class="sparring-detail-scroll" @scroll="scroll_fun" :show-scrollbar="false">
<view class="sparring-detail-body">
<view class="body-top">
<view class="body-top-title">
@@ -134,13 +133,13 @@
const opacity = Math.min(1, (scrollTop.value - 90) / 90);
return `rgba(255,255,255,${opacity})`;
});
const scroll_fun = (e) => {
console.log(e.detail.scrollTop)
scrollTop.value = e.detail.scrollTop;
};
onLoad(params => {
traId.value = params.traId
isPreview.value = params.isPreview === '1'
@@ -174,15 +173,66 @@
z-index: 4;
}
.nav-bar{
position: fixed;
width: 100vw;
top: 0;
left: 0;
z-index: 10;
height: var(--status-bar-height);
overflow: hidden;
.nav-bar {
position: fixed;
width: 100vw;
top: 0;
left: 0;
z-index: 10;
height: var(--status-bar-height);
overflow: hidden;
}
.top-title {
height: 90rpx;
text-align: center;
font-size: 33rpx;
padding-top: 10rpx;
line-height: 46rpx;
box-sizing: border-box;
font-weight: 500;
color: #fff;
top:0;
position: fixed;
z-index: 10;
.arrow-icon {
position: absolute;
left: 36rpx;
top: 20rpx;
color: #fff !important;
z-index: 10;
}
.back-icon {
position: absolute;
width: 40rpx;
height: 40rpx;
cursor: pointer;
left: 50rpx;
top: 33rpx;
transform: translateY(-50%);
z-index: 10;
}
.back-icon::before,
.back-icon::after {
content: '';
position: absolute;
transition: all 0.3s ease;
}
.back-icon::after {
top: 25%;
left: 25%;
width: 40%;
height: 40%;
border-top: 4rpx solid #ffffff;
border-left: 4rpx solid #ffffff;
transform: rotate(-45deg);
}
}
.top-box {
background-image: url(@/static/images/sparring/top-bg.png);
background-repeat: no-repeat;
@@ -207,55 +257,6 @@
overflow: hidden;
z-index: 3;
}
.top-title {
height: 90rpx;
// background-color: red;
text-align: center;
font-size: 33rpx;
padding-top: 10rpx;
line-height: 46rpx;
box-sizing: border-box;
font-weight: 500;
color: #fff;
position: relative;
z-index: 10;
// margin-bottom: 23rpx;
.arrow-icon {
position: absolute;
left: 36rpx;
top: 20rpx;
color: #fff !important;
}
.back-icon {
position: absolute;
width: 40rpx;
height: 40rpx;
cursor: pointer;
left: 50rpx;
top: 33rpx;
transform: translateY(-50%);
}
.back-icon::before,
.back-icon::after {
content: '';
position: absolute;
transition: all 0.3s ease;
}
.back-icon::after {
top: 25%;
left: 25%;
width: 40%;
height: 40%;
border-top: 4rpx solid #ffffff;
border-left: 4rpx solid #ffffff;
transform: rotate(-45deg);
}
}
}
.sparring-detail-body {