hldy_xcx/compontent/public/model.vue

114 lines
2.4 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>