bc_wx_applet/pages/diningList/diningList.vue

<template>
	<view class="mt20px">
		<view class="contain">
			<view class="box" style="height: 80px;">
				<view class="container">
					<view class="text-container">
						<view>当前餐车名称</view>
					</view>
					<view class="icon-container">
						<u-icon name="plus-circle" size="24"></u-icon>
						<u-icon name="info-circle" size="24" @click="btnIC"></u-icon>
					</view>
				</view>
				<view style="width: 50px;">
					<u-tag plain text="营业中" type="success" size="mini"></u-tag>
				</view>
			</view>
		</view>
	</view>
</template>

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

			}
		},
		methods: {
			btnIC() {
				uni.navigateTo({
					url: `/pages/diningCar/diningCar`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.box {
		padding: 20rpx 20rpx 0;
		// background-image: linear-gradient(#00a551 10%, #fff 30%);
		border-bottom-left-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
		background-position: top;
		box-shadow: 0 0 5px 2px #ebebeb;
		background-repeat: no-repeat;
		border-radius: 20rpx;
		background-color: #fff;
	}

	.box:hover {
	  border: 1px solid #2979ff; /* 鼠标悬停时显示边框 */
	}
	
	.box:active {
	  border: 1px solid #0056b3; /* 鼠标按下时显示另一种边框颜色 */
	}

	.container {
		display: flex;
		/* 使用 Flexbox 布局 */
		justify-content: space-between;
		/* 子元素之间留有空白 */
	}

	.text-container {
		flex: 1;
		/* 文本占满剩余空间 */
	}

	.icon-container {
		display: flex;
		/* 使用 Flexbox 布局 */
		flex-direction: row;
		/* 水平排列子元素 */
		justify-content: flex-end;
		/* 子元素右对齐 */

	}

	.icon-container u-icon {
		margin-right: 15px;
		/* 设置图标之间的间距 */
	}
</style>