You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
147 lines
2.8 KiB
147 lines
2.8 KiB
1 month ago
|
<template>
|
||
|
|
<view class="pop_up_componnet" v-if="isOpened">
|
||
|
|
<!-- 遮罩层 -->
|
||
|
|
<view class="background_blur"></view>
|
||
|
|
<!-- 弹窗 -->
|
||
|
|
<view class="pop_up_box" >
|
||
|
|
<!-- 背景飞机 -->
|
||
|
|
<image class="plane_image" src="../../static/components/my_pop_up/plane.png"></image>
|
||
|
|
<!-- 关闭图标 -->
|
||
|
|
<image class="close_image" @click="onClose" src="../../static/components/my_pop_up/close_icon.png"></image>
|
||
|
|
<!-- 标题 -->
|
||
|
|
<view class="title">{{title}}</view>
|
||
|
|
<!-- 内容 -->
|
||
|
|
<view class="content">{{content}}</view>
|
||
|
|
<!-- 横线 -->
|
||
|
|
<image class="line" src="../../static/components/my_pop_up/line.png"></image>
|
||
|
|
<!-- 按钮 -->
|
||
|
|
<button class="button" @click="onButtonClick">确认</button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { ref } from 'vue'
|
||
|
|
export default{
|
||
1 month ago
|
name:'my_pop_up',
|
||
|
1 month ago
|
props:{
|
||
|
|
title:{
|
||
|
|
default:'提示',
|
||
|
|
},
|
||
|
|
content:{
|
||
|
|
default:'',
|
||
|
|
},
|
||
|
|
isOpened:{
|
||
|
|
default:true,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data(){
|
||
|
|
return{
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
onButtonClick(){
|
||
|
|
this.$emit('onClick','onButtonclick');
|
||
|
|
},
|
||
|
|
onClose(){
|
||
|
|
this.$emit('onClose');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.pop_up_componnet{
|
||
|
|
height: 100vh;
|
||
|
|
width: 100vw;
|
||
|
|
position: relative;
|
||
|
|
.background_blur{
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
float: left;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background: #ffffff;
|
||
|
|
background-position: center;
|
||
|
|
background-size: cover;
|
||
|
|
opacity: 70%;
|
||
|
|
}
|
||
|
|
.pop_up_box{
|
||
|
|
background-color: #EAF5FF;
|
||
|
|
height: 13vh;
|
||
|
|
width: 50vw;
|
||
|
|
border-radius: 12px;
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%) translateY(-50%);
|
||
|
|
.plane_image{
|
||
|
|
position: absolute;
|
||
|
|
left: 0%;
|
||
|
|
top: 0%;
|
||
|
|
width: 15.3vw;
|
||
|
|
height: 5vh;
|
||
|
|
}
|
||
|
|
.close_image{
|
||
|
|
position: absolute;
|
||
|
|
right: 10%;
|
||
|
|
top: 10%;
|
||
|
|
width: 0.7rem;
|
||
|
|
height: 0.7rem;
|
||
|
|
}
|
||
|
|
.title{
|
||
|
|
/* 错误 */
|
||
|
|
position: absolute;
|
||
|
|
left: 50%;
|
||
|
|
top: 10.74%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
font-family: 'PingFang SC';
|
||
|
|
font-style: normal;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 1rem;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
color: #000364;
|
||
|
|
}
|
||
|
|
.content{
|
||
|
|
position: absolute;
|
||
|
|
left: 50%;
|
||
|
|
top: 41.32%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
font-family: 'PingFang SC';
|
||
|
|
font-style: normal;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 0.8rem;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
color: #5FA0D1;
|
||
|
|
}
|
||
|
|
.line{
|
||
|
|
position: absolute;
|
||
|
|
left: 4.93%;
|
||
|
|
top: 63.64%;
|
||
|
|
height: 0.1rem;
|
||
|
|
width: 90.14%;
|
||
|
|
opacity: 0.35;
|
||
|
|
}
|
||
|
|
.button{
|
||
|
|
position: absolute;
|
||
|
|
left: 50%;
|
||
|
|
top: 71.07%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
background: #7BC0FE;
|
||
|
|
border-radius: 8px;
|
||
|
|
color: #ffffff;
|
||
|
|
height: 3vh;
|
||
|
|
width: 37vw;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 1rem;
|
||
|
|
}
|
||
|
|
.button:active{
|
||
|
|
color: #4A69F7;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|