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.
138 lines
2.7 KiB
138 lines
2.7 KiB
<template> |
|
<!--顶部--> |
|
|
|
<cover-view class="bottom"> |
|
<cover-view class="bottom2"></cover-view> |
|
<cover-view class="bottom1"> |
|
<cover-view class="trapezoidal first" :class="{ primary: firstPrimary }"> |
|
<cover-image src="../../static/map/l.png"></cover-image> |
|
<cover-view class="font" @click="$emit('first')"> |
|
{{ firstText }} |
|
</cover-view> |
|
</cover-view> |
|
<cover-view |
|
v-show="type == 'edit'" |
|
class="trapezoidal min" |
|
:class="{ primary: secondPrimary }" |
|
> |
|
<cover-image src="../../static/map/c2.png"></cover-image> |
|
<cover-view class="font" @click="$emit('second')"> |
|
{{ secondText }} |
|
</cover-view> |
|
</cover-view> |
|
<cover-view class="trapezoidal last" :class="{ primary: thirdPrimary }"> |
|
<cover-image src="../../static/map/r.png"></cover-image> |
|
<cover-view class="font" style="color: #fff" @click="$emit('last')"> |
|
{{ |
|
isSubmit ? (type == "view" ? "关闭" : thirdText) : nextText |
|
}}</cover-view |
|
> |
|
</cover-view> |
|
</cover-view> |
|
</cover-view> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
name: "no-data", |
|
props: { |
|
firstText: { |
|
type: String, |
|
default: "上一步", |
|
}, |
|
secondText: { |
|
type: String, |
|
default: "取消", |
|
}, |
|
nextText: { |
|
type: String, |
|
default: "下一步", |
|
}, |
|
thirdText: { |
|
type: String, |
|
default: "完成", |
|
}, |
|
firstPrimary: Boolean, |
|
secondPrimary: Boolean, |
|
thirdPrimary: { |
|
type: Boolean, |
|
default: true, |
|
}, |
|
isSubmit: { |
|
type: Boolean, |
|
default: false, |
|
}, |
|
type: { |
|
type: String, |
|
default: "edit", |
|
}, |
|
}, |
|
data() { |
|
return { |
|
$: this.$, |
|
}; |
|
}, |
|
mounted() {}, |
|
computed: {}, |
|
methods: {}, |
|
}; |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
.bottom { |
|
position: fixed; |
|
bottom: 0; |
|
width: 100%; |
|
|
|
height: 120rpx; |
|
|
|
background: #ffffff; |
|
} |
|
.bottom2 { |
|
width: 100%; |
|
height: 1px; |
|
background: #cccccc; |
|
} |
|
.bottom1 { |
|
width: calc(100% - 40rpx); |
|
padding: 18rpx 20rpx; |
|
height: 80rpx; |
|
background: #ffffff; |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
} |
|
.Img { |
|
width: 512rpx; |
|
height: 440rpx; |
|
margin: 0 auto; |
|
} |
|
|
|
.trapezoidal { |
|
position: relative; |
|
display: inline-flex; |
|
align-items: center; |
|
justify-content: center; |
|
flex: 1; |
|
width: 100%; |
|
height: 100%; |
|
box-sizing: border-box; |
|
text-align: center; |
|
border-radius: 10rpx; |
|
line-height: 60rpx; |
|
.font { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
z-index: 1; |
|
width: 100%; |
|
height: 100%; |
|
text-align: center; |
|
line-height: 60rpx; |
|
} |
|
// cover-image { |
|
// width: 100%; |
|
// height: 100%; |
|
// } |
|
} |
|
</style> |