75 lines
1.4 KiB
Vue
75 lines
1.4 KiB
Vue
<template>
|
|
<view class="content-wrapper bdR16" :style="{ backgroundColor: bgColor, margin, color }" @tap="taps">
|
|
<view class="content-left">
|
|
<image :src="leftImg" mode="scaleToFill" />
|
|
<view class="content-title"><slot /></view>
|
|
</view>
|
|
<view class="content-right">
|
|
<image src="/static/iconImg/right-arrow.svg" mode="scaleToFill" />
|
|
</view>
|
|
</view>
|
|
<view :style="{ height }" v-if="height != ''"> </view>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
bgColor: {
|
|
type: String,
|
|
default: '#f7f7f7'
|
|
},
|
|
margin: {
|
|
type: String,
|
|
default: '30rpx 0 0 0'
|
|
},
|
|
leftImg: {
|
|
type: String,
|
|
default: '/static/iconImg/notice-img.svg'
|
|
},
|
|
height: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
rightImg: {
|
|
type: String,
|
|
default: '/static/iconImg/right-arrow.svg'
|
|
},
|
|
color: {
|
|
type: String,
|
|
default: '#000'
|
|
}
|
|
})
|
|
const emits = defineEmits(['HandleTouch'])
|
|
const taps = () => {
|
|
emits('HandleTouch')
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content-wrapper {
|
|
padding: 40rpx 32rpx 40rpx 38rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.content-left {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 33rpx;
|
|
color: #666;
|
|
image {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
.content-title {
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
.content-right {
|
|
image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|