hldy_xcx/compontent/public/model.vue

114 lines
2.4 KiB
Vue
Raw Permalink Normal View History

2025-07-01 17:29:13 +08:00
<template>
<!-- 通过 v-show 控制显隐并根据 show 添加 is-active 类触发 CSS 过渡 -->
<view :class="['neuro-wrapper', show ? 'is-active' : '']" v-show="show">
<!-- 遮罩层点击触发关闭 -->
<view class="neuro-mask" @click="handleClose"></view>
<!-- 拟态框阻止冒泡点击 -->
<view class="neuro-box" @click.stop>
<view class="tittle-bgc">
<view class="text">提示</view>
</view>
<view class="button" @click="handleClose">确定</view>
<view style="font-size: 35rpx;">{{ content }}</view>
</view>
</view>
</template>
<script setup>
// 接收 show 属性并支持 update:show 事件
const props = defineProps({
show: {
type: Boolean,
default: true
},
content: {
type: String,
default: ''
}
});
const emit = defineEmits(["close"]);
// 关闭方法,通知父组件更新 show
function handleClose() {
emit('close');
}
</script>
<style lang="scss" scoped>
/* 容器默认隐藏,透明度为 0不接受点击 */
.neuro-wrapper {
position: fixed;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
/* 显示时透明度过渡到 1可接受点击 */
.neuro-wrapper.is-active {
opacity: 1;
pointer-events: auto;
}
/* 遮罩层,半透明黑色 */
.neuro-mask {
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.3);
}
/* 拟态框 固定尺寸 + 阴影样式 + 相对定位于 wrapper */
.neuro-box {
position: relative;
width: 550rpx;
height: 600rpx;
border-radius: 20rpx;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
padding: 0 10%;
}
.tittle-bgc {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 300rpx;
background-image: url('https://www.focusnu.com/media/directive/index/modelbgc.png');
background-size: 100% auto;
background-position: top center;
background-repeat: no-repeat;
.text {
color: #47526F;
font-size: 40rpx;
margin: 40rpx 0 0 50rpx;
font-weight: 600;
}
}
.button {
position: absolute;
bottom: 50rpx;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 80rpx;
background: linear-gradient(to right, #00C9FF, #0076FF);
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 35rpx;
border-radius: 35rpx;
}
</style>