tianyan/tra-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 样式调整

Browse Source
This commit is contained in:
杨航
2025-12-01 15:43:12 +08:00
parent ee00080d1c
commit de08f14fcf
1 changed files with 46 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/sparring/detail.vue
+46 -30
View File
@@ -1,14 +1,15 @@
<template>
<view class="sparring-detail max_page">
<view class="sparring-detail-body">
<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="704" height="350" />
<view class="sparring-detail-scroll">
<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="704" height="350" />
</view>
<view class="sparring-detail-body">
<view class="body-top">
<view class="body-top-title">
@@ -70,6 +71,7 @@
</view>
</view>
</view>
</view>
</template>
<script setup>
@@ -136,43 +138,44 @@
</script>
<style lang="scss" scoped>
$body-top-height: 220rpx;
$top-height: 436rpx - $body-top-height;
.sparring-detail {
position: relative;
overflow-x: hidden;
overflow-y: auto;
.sparring-detail-body {
position: absolute;
overflow-y: hidden;
padding-top: $top-height;
position: relative;
.sparring-detail-scroll{
height: calc(100vh - 436rpx + $top-height);
width: 100vw;
overflow-x: hidden;
overflow-y: hidden;
left: 0;
top: 0;
min-height: 100%;
width: 100%;
box-sizing: border-box;
background-color: #f6f8ff;
z-index: 1;
padding: calc(var(--status-bar-height) + 336rpx) 23rpx 180rpx;
overflow-y: auto;
bottom: 0;
position: absolute;
}
.top-box {
background-image: url(@/static/images/sparring/top-bg.png);
background-repeat: no-repeat;
background-size: cover;
height: calc(var(--status-bar-height) + 436rpx);
clip-path: ellipse(650rpx 327rpx at 375rpx calc(var(--status-bar-height) + 109rpx));
// clip-path: ellipse(650rpx 327rpx at 375rpx calc(var(--status-bar-height) + 109rpx));
width: 100%;
position: fixed;
padding-top: var(--status-bar-height);
top: 0;
left: 0;
z-index: 2;
z-index:3;
.img-box {
width: 704rpx;
height: 350rpx;
width: 100%;
height: 100%;
margin: 0 auto;
border-radius: 23rpx;
// border-radius: 23rpx;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
z-index: 3;
}
.top-title {
@@ -186,7 +189,7 @@
font-weight: 500;
color: #fff;
position: relative;
z-index: 10;
// margin-bottom: 23rpx;
.arrow-icon {
position: absolute;
@@ -224,10 +227,23 @@
}
}
.sparring-detail-body {
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
left: 0;
top: 20rpx;
min-height: 100%;
width: 100%;
box-sizing: border-box;
background: linear-gradient(180deg, #ffffff00 0%, #ffffff00 calc($top-height - 20rpx), #f6f8ff calc($top-height - 20rpx), #f6f8ff 100% );
z-index: 5;
padding: $top-height 23rpx 180rpx;
.body-top {
background-color: #fff;
border-radius: 23rpx;
padding: 120rpx 28rpx 20rpx;
padding: 20rpx 28rpx 20rpx;
margin-bottom: 30rpx;
&-title {