hwnc/components/ui-component/U_suspendbutton/m/index.vue

<template>
	<view :class="className">
		<!-- style -->
		<!--<view v-html="css"></view>-->
		<template v-if="datas.list && datas.list.choose_style ==1">
			<view class="fixed-box" v-for="(item, index) in datas.list.list" :key="index"
				:style="{top : `${(datas.over_top + 30)*2}rpx`}">
				<!--悬浮按钮静态-->
				<view class="btn" :style="button_style">
					<u--image radius="25px" :style="{'width': datas.button_size+'px', 'height': datas.button_size+'px'}" :showLoading="true" :src="item.image || emptyImage" width="50px"
						height="50px"></u--image>
				</view>
			</view>
		</template>

		<template v-if="datas.list && datas.list.choose_style ==2">
			<view class="fixed-box2" :style="{top : `${(datas.over_top-15)*2}rpx`}" v-if="datas.list.show_style ==1">
				<u--image radius="25px" :style="button_style" :showLoading="true" :src="datas.list.unfold_button || openImage" width="50px"
					height="50px"></u--image>
				<view class="btn" v-for="(item, index) in datas.list.list" :key="index"
					:style="{top : `${-70*(index+1)}px`,left: `${datas.position_location =='left'?((datas.button_size-50)/2)+10: 315-((datas.button_size-50)/2)}px`}">
					<u--image radius="25px" :showLoading="true" :src="item.image || emptyImage" width="50px"
						height="50px"></u--image>
				</view>
			</view>

			<view class="fixed-box2" :style="{top : `${(datas.over_top-15 )*2}rpx`}" v-if="datas.list.show_style ==2">
				<u--image radius="25px" :style="button_style" :showLoading="true" :src="datas.list.unfold_button || openImage" width="50px"
					height="50px"></u--image>
				<view class="btn" style="top:-70px;" :style="btn_1_style" v-if="datas.list.list[0]">
					<u--image radius="25px" :showLoading="true" :src="datas.list.list[0].image" width="50px"
						height="50px"></u--image>
				</view>
				<view class="btn" :style="btn_3_style" v-if="datas.list.list[1]">
					<u--image radius="25px" :showLoading="true" :src="datas.list.list[1].image" width="50px"
						height="50px"></u--image>
				</view>
				<view class="btn" :style="btn_4_style" v-if="datas.list.list[2]">
					<u--image radius="25px" :showLoading="true" :src="datas.list.list[2].image" width="50px"
						height="50px"></u--image>
				</view>
				<view class="btn" style="top: 70px;" :style="btn_2_style" v-if="datas.list.list[3]">
					<u--image radius="25px" :showLoading="true" :src="datas.list.list[3].image" width="50px"
						height="50px"></u--image>
				</view>
			</view>
		</template>

	</view>
</template>

<script>
	export default {
		props: ['datas', 'styles'],
		data() {
			let siteinfo = getApp().globalData.siteinfo;
			let data = {
				settingFile: siteinfo,
				emptyImage: siteinfo.root_img + '/static/app/image.png',
				openImage: siteinfo.root_img + '/static/app/open.png',
			}

			return data;
		},
		computed: {
			button_style() {
				const {
					button_size,
					position_location,
				} = this.datas;

				return `
                width: ${button_size}px;
                height: ${button_size}px;
                margin-left: ${position_location =='left'?25:630}rpx;
            `;
			},
			btn_1_style() {
				const {
					position_location,
				} = this.datas;

				return `
				        left: ${position_location =='left'?'10':315}px;
            `;
			},
			btn_2_style() {
				const {
					button_size,
					position_location,
				} = this.datas;

				return `
				        top: ${20+button_size}px;
				        left: ${position_location =='left'?'10':315}px;
            `;
			},
			btn_3_style() {
				const {
					button_size,
					position_location,
				} = this.datas;

				return `
				        top: ${15-button_size}px;
				        left: ${position_location =='left' ? 20+button_size:310-button_size}px;
            `;
			},
			btn_4_style() {
				const {
					button_size,
					position_location,
				} = this.datas;

				return `
				        top: ${button_size-15}px;
				        left: ${position_location =='left' ? 20+button_size:310-button_size}px;
            `;
			},
			className() {
				const name = ['component-wrapper', `component-${this.id}`];
				return name;
			},
		},

		methods: {},

	};
</script>

<style lang="less" scoped>
	// 默认
	.component-wrapper {
		width: 750rpx;
	}

	.fixed-box {
		width: 750rpx;
		position: fixed;
		top: 114px;
		z-index: 2;

		.btn {
			width: 50px;
			height: 50px;
			border-radius: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			flex-direction: column;
			font-size: 13px;

			img {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
	}

	.fixed-box2 {
		width: 750rpx;
		top: 114px;
		z-index: 2;
		position: fixed;

		.imgs {
			width: 60px;
			height: 60px;
			border-radius: 50%;
			z-index: 2;
			position: relative;
		}

		.btn {
			width: 50px;
			height: 50px;
			border-radius: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			flex-direction: column;
			font-size: 13px;

			img {
				width: 50px;
				height: 50px;
				border-radius: 50%;
			}
		}
	}
</style>