46 lines
1.1 KiB
Vue
46 lines
1.1 KiB
Vue
|
<script setup>
|
||
|
|
import { ref } from 'vue'
|
||
|
|
const props = defineProps(['bgcolor','type','showType','invalid'])
|
||
|
|
// const type = ref(1) // 1-底部大按钮;2-局部按钮
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<view class="buttonBox">
|
||
|
|
<view class="add-btn-part" :class="{normalCss:type==2,plainCss:showType=='plain'}">
|
||
|
|
<view class="add-btn" :style="{ background: bgcolor?bgcolor:'#7cc4e8'}" :class="{plainCss:showType=='plain',invalidCssBtn:invalid}">
|
||
|
|
<slot></slot>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<style scoped lang="scss">
|
||
|
|
|
||
|
|
.normalCss{
|
||
|
|
position: unset !important;
|
||
|
|
bottom: unset !important;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.plainCss{
|
||
|
|
background: white !important;
|
||
|
|
color: #7cc4e8 !important;
|
||
|
|
}
|
||
|
|
.invalidCssBtn{
|
||
|
|
color: white !important;
|
||
|
|
background-color: #d7d7d7 !important;
|
||
|
|
border: 2rpx solid #d7d7d7 !important;
|
||
|
|
}
|
||
|
|
.add-btn-part{
|
||
|
|
position: fixed;
|
||
|
|
bottom: 40rpx;
|
||
|
|
width: 100%;
|
||
|
|
.add-btn{
|
||
|
|
margin: 0 auto;
|
||
|
|
width: 80%;
|
||
|
|
text-align: center;
|
||
|
|
background: #7cc4e8;
|
||
|
|
border: 1px solid #7cc4e8;
|
||
|
|
color: white;
|
||
|
|
padding: 10px 0;
|
||
|
|
border-radius: 40rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|