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.
67 lines
1.3 KiB
67 lines
1.3 KiB
<template>
|
|
<view class="decorative-box" :class="{'padding-tb': isPadding}" @click="onClick">
|
|
<view class="decorative-liner"></view>
|
|
<view class="lf-flex decorative-content">
|
|
<view class="rhombus lf-m-r-23" v-if="isRhombus"></view>
|
|
<view class="lf-font-32 lf-font-bold title">{{ title }}</view>
|
|
<view class="rhombus lf-m-l-23" v-if="isRhombus"></view>
|
|
</view>
|
|
<view class="decorative-liner"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
title: {
|
|
type: [String, Number], // 标题
|
|
default: '猜你喜欢'
|
|
},
|
|
isRhombus: {
|
|
type: Boolean, // 是否显示菱形，默认显示
|
|
default: true
|
|
},
|
|
isPadding: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
methods: {
|
|
onClick(event){
|
|
this.$emit('click', event);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped="scoped">
|
|
.decorative-box {
|
|
width: 100%;
|
|
height: max-content;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-content: center;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
.decorative-liner{
|
|
width: 110rpx;
|
|
height: 1rpx;
|
|
border: 1rpx solid #DCDCDC;
|
|
}
|
|
.decorative-content{
|
|
padding: 0 30rpx;
|
|
.rhombus{
|
|
width: 16rpx;
|
|
height: 16rpx;
|
|
transform: rotateZ(45deg);
|
|
background: #222;
|
|
}
|
|
.title{
|
|
max-width: 340rpx;
|
|
}
|
|
}
|
|
}
|
|
.padding-tb{
|
|
padding: 25rpx 0;
|
|
}
|
|
</style>
|