<!-- 商品头部标题 -->
<template>
	<view class="containar-title t-c dis-flex flex-x-center m-btm60">
		<view class="containar-title-left lace-style p-r">
			<view class="lace-1"></view>
			<view class="lace-2"></view>
		</view>
		<view class="contar-titleBox f-30 col-3">{{titleName}}</view>
		<view class="containar-title-right lace-style p-r">
			<view class="lace-1"></view>
			<view class="lace-2"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		props: {
			titleName: {
				type: String,
				default: function(){
					return '暂无标题'
				}
			}
		}
	}
</script>

<style scoped>
	/* 标题花边样式 */
	uni-view{
		overflow: inherit;
	}
	.containar-title-right,.containar-title-left{
		flex: 1;
	}
	.lace-style .lace-1 {
		position: absolute;
		/* 	left: 35%; */
		top: 14upx;
		width: 14upx;
		height: 14upx;
		background: rgba(255, 68, 68, 1);
		border-radius: 50%;
	}

	.lace-style .lace-2 {
		position: absolute;
		/* 	left: 34%; */
		top: 18upx;
		width: 14upx;
		height: 14upx;
		background: rgba(255, 68, 68, 1);
		opacity: 0.2;
		border-radius: 50%;
	}

	.containar-title-left .lace-1 {
		right: 7%;
	}

	.containar-title-right .lace-1 {
		left: 7%;
	}

	.containar-title-left .lace-2 {
		right: 28upx;
	}

	.containar-title-right .lace-2 {
		left: 28upx;
	}
</style>
