uni-app：实现页面效果1

效果

代码

<template>
	<view>
		<view class="add">
			<image :src="add_icon" mode=""></image>
		</view>
		<view class="container_position">
			<view class="container_info">
				<view class="position">
					<view class="circle">
						<img :src="device" class="center-image">
						<view v-for="(item, index) in itemList" :key="index" class="item" :style="getItemStyle(index)">
							<img :src="item.src" />
							<view>{
   
   { item.name }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				device: getApp().globalData.icon + 'look/device.png',
				add_icon: getApp().globalData.icon + 'look/add.png',
				itemList: [{
						name: "车道指示器",
						src: "/static/item2.png"
					},
					{
						name: "车道指示器",
						src: "/static/item3.png"
					},
					{
						name: "车道指示器",
						src: "/static/item4.png"
					},
					{
						name: "车道指示器",
						src: "/static/item5.png"
					},
					{
						name: "车道指示器",
						src: "/static/item6.png"
					},
					{
						name: "车道指示器",
						src: "/static/item7.png"
					},
					{
						name: "车道指示器",
						src: "/static/item8.png"
					},

				],
				circleRadius: 240, // 圆的半径
				itemSize: 120, // 每个view的大小
			}
		},
		methods: {
			// 计算每个 view 的样式
			getItemStyle(index) {
				const {
					itemList,
					circleRadius,
					itemSize
				} = this;
				const angle = (2 * Math.PI) / itemList.length; // 每个 view 的角度间隔
				const centerX = circleRadius + itemSize / 2; // 圆心的 x 坐标
				const centerY = circleRadius + itemSize / 2; // 圆心的 y 坐标
				const radius = circleRadius + itemSize / 2; // view 的圆心距离（圆的半径加上 view 大小的一半）
				const x = Math.round(centerX + radius * Math.cos(angle * index - Math.PI / 2)); // 计算 x 坐标
				const y = Math.round(centerY + radius * Math.sin(angle * index - Math.PI / 2)); // 计算 y 坐标

				return {
					width: itemSize + "rpx",
					height: itemSize + "rpx",
					position: "absolute",
					top: y + "rpx",
					left: x + "rpx",
					transform: `translate(-50%, -50%)`, // 居中显示
				};
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #619fe1;
	}

	.add {
		// border: 1px solid black;
		image {
			width: 60rpx;
			height: 60rpx;
		}
		text-align:right;
		padding:2% 2% 0 0;
	}

	.container_position {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

		.container_info {
			width: 95%;

			/* 整体位置 */
			.position {
				/* border: 1px solid black; */
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			/* 圆的样式 */
			.circle {
				width: 600rpx;
				height: 600rpx;
				border-radius: 50%;
				/* border: 1px solid black; */
			}

			/* 中间图标 */
			.center-image {
				width: 160rpx;
				height: 160rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				border-radius: 50%;
				transform: translate(-50%, -50%);
				box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
			}

			/* 小图标 */
			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				text-align: center;

				// border: 1px solid black;
				view {
					font-size: 90%;
					width: 120%;
					margin-top: 10%;
				}
			}

			/* 小图标的图片信息 */
			.item img {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
			}
		}
	}
</style>