phone_uni/pages/index/components/fortuneInfo.vue

<template>
	<view class="fortune_info_box pt10">
		<view class="fortune_info flx-justify-between  pl30 pr30">
			<view class="fortune_info_left flx-align-center">
				<view class="fortune_info_l_l">
					<view class="fortune_info_l_l_image">
						<up-avatar :src="iconAvatar" size="143.25rpx"></up-avatar>
						<!-- <view class="info_l_l_image_icon"></view> -->
					</view>
					<view class="fortune_info_l_l_but">切换</view>
				</view>
				<view class="ml30 fortune_info_l_r">
					<view class="fortune_info_l_r_t">天秤座</view>
					<view class="fortune_info_l_r_b">9.23 - 10.23</view>
				</view>
			</view>
			<view class="fortune_info_right">
				<view class="fortune_info_r_t">今日运势</view>
				<view class="fortune_info_r_b">76</view>
			</view>
		</view>
		<view class="fortune_info_list pb10">
			<view class="fortune_info_item">
				<view class="fortune_info_item_box">
					<text class="fortune_info_item_box_text">金星</text>
				</view>
				<text class="fortune_info_text">守护星系</text>
			</view>
			<view class="fortune_info_item">
				<view class="fortune_info_item_box">
					<text class="fortune_info_item_box_text">珊瑚<br/>琥珀</text>
				</view>
				<text class="fortune_info_text">适配珠宝</text>
			</view>
			<view class="fortune_info_item">
				<view class="fortune_info_item_box">
					<text class="fortune_info_item_box_text">5</text>
				</view>
				<text class="fortune_info_text">幸运数字</text>
			</view>
			<view class="fortune_info_item">
				<view class="fortune_info_item_box">
					<view class="item_box_icon"></view>
					<text class="fortune_info_item_box_text">红色</text>
				</view>
				<text class="fortune_info_text">幸运颜色</text>
			</view>
			<view class="fortune_info_item">
				<view class="fortune_info_item_box">
					<text class="fortune_info_item_box_text">处女座</text>
				</view>
				<text class="fortune_info_text">速配星座</text>
			</view>
		</view>
</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onShow
	} from "@dcloudio/uni-app";
	// 引入组件

	const iconAvatar = 'https://img.js.design/assets/img/65b211c3cdb6ea326421fd30.png#1f90f33c2d7b53402d0afbebb090d9b4'

	// 定义变量内容

	// 生命中期
	onMounted(() => {
		console.log('onMounted生命周期')
	})
</script>

<style lang="scss" scoped>
	@import '@/static/css/common.scss';
	.fortune_info_box {
		.fortune_info {
			.fortune_info_left {
				.fortune_info_l_l {
					position: relative;

					.fortune_info_l_l_image {
						border-radius: 50%;
						width: 143.25rpx;
						height: 143.01rpx;
						background-color: $active-color;
						position: relative;

						&::before,
						&::after {
							content: '';
							position: absolute;
							border-radius: 50%;
						}

						&::after {
							top: -4rpx;
							left: -4rpx;
							border: 4rpx solid #6BA9FE;
							width: 100%;
							height: 100%;
						}

						&::before {
							top: -8rpx;
							left: -8rpx;
							border: 4rpx solid #973BFE;
							width: calc(100% + 8rpx);
							height: calc(100% + 8rpx);
						}

						.info_l_l_image_icon {
							background-size: 100% 100%;
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
						}
					}

					.fortune_info_l_l_but {
						position: absolute;
						bottom: -15rpx;
						left: 50%;
						transform: translateX(-50%);
						background-color: #000;
						color: #fff;
						border-radius: 50rpx;
						width: 70rpx;
						height: 40rpx;
						line-height: 40rpx;
						font-size: 22rpx;
						text-align: center;
					}
				}

				.fortune_info_l_r {
					.fortune_info_l_r_t {
						font-size: 32rpx;
						font-weight: 600;
						color: rgba(0, 0, 0, 1);
					}

					.fortune_info_l_r_b {
						font-size: 24rpx;
						color: rgba(0, 0, 0, 1);
						margin-top: 10rpx;
					}
				}
			}

			.fortune_info_right {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-right: 30rpx;

				.fortune_info_r_t {
					font-size: 20rpx;
					color: rgba(0, 0, 0, 1);
				}

				.fortune_info_r_b {
					font-size: 48rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 63.64rpx;
					color: rgba(0, 0, 0, 1);
				}
			}
		}
		.fortune_info_list{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 60rpx;
			box-sizing: border-box;
			margin-top: 60rpx;
			.fortune_info_item{
				width: calc(100% / 5);
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				.fortune_info_item_box{
					width: 116rpx;
					height: 116rpx;
					border-radius: 40rpx;
					background: rgba(255, 255, 255, 0.47);
					border: 2rpx solid rgba(175, 242, 253, 1);
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					.item_box_icon{
						width: 60%;
						height: 10rpx;
						border-radius: 50rpx;
						background-color: red;
						margin-bottom: 10rpx;
					}
					.fortune_info_item_box_text{
						font-size: 28rpx;
						font-weight: 500;
						letter-spacing: 0rpx;
						line-height: 37.12rpx;
						color: rgba(122, 221, 230, 1);
					}
				}
				.fortune_info_text{
					width: 100%;
					font-size: 24rpx;
					margin-top: 4rpx;
					text-align: center;
					color: rgba(145, 145, 145, 1);
				}
			}
		}
	}
</style>