main
parent
db72c72d4d
commit
1bf4775e3b
2 changed files with 161 additions and 17 deletions
@ -0,0 +1,138 @@ |
|||||||
|
<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> |
Loading…
Reference in new issue