hldy_xcx/compontent/public/tanchuang.vue

121 lines
2.0 KiB
Vue

<template>
<view>
<view class="addall" v-if="show">
<view>温馨提示</view>
<view>
<image src="https://www.focusnu.com/media/directive/ddj.png" mode="aspectFill"></image>
</view>
<view>
<slot name="font"></slot>
</view>
<view>
<view @click="$emit('back')">{{closetext}}</view>
<view class="qd" @click="$emit('right')">{{righttext}}</view>
</view>
</view>
<view class="mengban" v-if="show" @click="$emit('back')"></view>
</view>
</template>
<script>
export default {
props: {
show: {
type: Boolean,
default: false
},
closetext: {
type: String,
default: '取消'
},
righttext: {
type: String,
default: '确认'
},
close: true
},
methods: {
}
}
</script>
<style scoped lang="less">
.addall {
width: 80%;
// min-height: 43%;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 1.3vw 0rpx rgba(163, 167, 182, 0.16);
border-radius: 50rpx;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
// padding: 2.8vw;
padding: 2.8vw 55rpx;
z-index: 9999;
>view {
&:nth-child(4) {
height: 170rpx;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
view {
width: 200rpx;
height: 80rpx;
background: #E2EFFA;
border-radius: 30rpx;
font-weight: 400;
font-size: 40rpx;
color: #5F676F;
display: flex;
justify-content: center;
align-items: center;
margin: 0 15rpx;
}
.qd {
background: #57A8FA;
color: #FFFFFF;
}
}
&:nth-child(3) {}
&:nth-child(2) {
width: 150rpx;
height: 150rpx;
margin: 2vw auto 0;
margin-bottom: 20rpx;
image {
width: 100%;
height: 100%;
}
}
&:nth-child(1) {
font-weight: 600;
font-size: 38rpx;
color: #333333;
text-align: center;
margin-top: 40rpx;
}
}
}
.mengban {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 9100;
background: rgba(93, 94, 95, 0.5);
}
</style>