让canvas在弹窗底部-第一次尝试-defeated

This commit is contained in:
WindowBird 2025-09-19 18:01:16 +08:00
parent 188daa961d
commit f8ac704956
3 changed files with 14 additions and 6 deletions

View File

@ -11,11 +11,14 @@
:style="{ width: canvasSize + 'px', height: canvasSize + 'px' }" :style="{ width: canvasSize + 'px', height: canvasSize + 'px' }"
class="progress-container" class="progress-container"
> >
<canvas <cover-view z-index="0">
:style="{ width: canvasSize + 'px', height: canvasSize + 'px' }" <canvas
canvas-id="progressCanvas" :style="{ width: canvasSize + 'px', height: canvasSize + 'px' }"
class="progress-canvas" canvas-id="progressCanvas"
></canvas> class="progress-canvas"
></canvas>
</cover-view>
<view class="progress-text"> <view class="progress-text">
<text class="percent">{{ progress }}%</text> <text class="percent">{{ progress }}%</text>
<text class="label">{{ content }}</text> <text class="label">{{ content }}</text>
@ -105,9 +108,12 @@ export default {
<style scoped> <style scoped>
.progress-container { .progress-container {
position: relative; position: relative;
z-index: 0;
} }
.progress-canvas { .progress-canvas {
z-index: 0;
position: relative;
border-radius: 50%; border-radius: 50%;
box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.1); box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.1);
} }

View File

@ -754,6 +754,7 @@ button {
.donation { .donation {
background: #ffffff; background: #ffffff;
padding: 32rpx; padding: 32rpx;
z-index: 9999;
} }
.title-row { .title-row {

View File

@ -1,6 +1,6 @@
<template> <template>
<view class="page"> <view class="page">
<custom-navbar title="捐款记录" /> <custom-navbar ref="customNavbar" title="捐款记录" />
<tile-grid /> <tile-grid />
<view :style="{ backgroundColor: CommonEnum.BASE_COLOR }" class="header"> <view :style="{ backgroundColor: CommonEnum.BASE_COLOR }" class="header">
<view class="search-filter-row"> <view class="search-filter-row">
@ -45,6 +45,7 @@
height="880rpx" height="880rpx"
mode="bottom" mode="bottom"
width="750rpx" width="750rpx"
z-index="9999"
> >
<view class="filterBox"> <view class="filterBox">
<view class="filterAll">全部筛选</view> <view class="filterAll">全部筛选</view>