forked from fzu102201435/front
parent
9d2b0e22e0
commit
562283d89e
@ -0,0 +1,147 @@
|
||||
<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{
|
||||
name:'my-pop-up',
|
||||
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>
|
||||
|
After Width: | Height: | Size: 835 B |
|
After Width: | Height: | Size: 246 B |
|
After Width: | Height: | Size: 13 KiB |
@ -1,8 +1,8 @@
|
||||
{
|
||||
"hash": "3dcffc29",
|
||||
"configHash": "cc60d382",
|
||||
"hash": "239ea83a",
|
||||
"configHash": "3f4641d2",
|
||||
"lockfileHash": "e3b0c442",
|
||||
"browserHash": "e601f541",
|
||||
"browserHash": "619b4131",
|
||||
"optimized": {},
|
||||
"chunks": {}
|
||||
}
|
||||
Loading…
Reference in new issue