CommunityApp/pages/demo/demo2.vue

<template>
	<view style="min-height: 100vh;">
		<view class="" >
			<view class="flex  justify-center" style="position: relative;bottom: -80rpx;">
				<view  class="cu-btn cuIcon  bg-gradual-blue" style="width: 160rpx;height: 160rpx;">
					<view class="flex " style="flex-direction: column;">
						<view class="cuIcon-unlock text-white" style="font-size: 60rpx;"></view>
						<view class="text-sm margin-top-20">
							点我开门
						</view>
					</view>
				</view>
			</view>
			<view style="padding: 40rpx 10rpx 0rpx;" class="cu-list grid col-5 no-border" >
				<view  class="cu-item"  v-for="(item,index) in gridList" :key="index">
					<block >
						<view class="grid-icon" >
							<image style="width: 45rpx;height: 45rpx;"  :src="item.icon"/>
						</view>
						<view class="cu-tag bg-orange badge" v-if="item.badge>0">{{item.badge}}</view>
						<text  style="color: #333333;font-size: 26rpx;">{{item.title}}</text>
					</block>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
export default {
	name: '',
	data() {
		return {
			gridList:[
				{
					icon:'../../static/grid1/kaisuo.png',
					title:"A区",
					badge:0,
					index:1
				},
				{
					icon:'../../static/grid1/kaisuo.png',
					title:"D区",
					badge:0,
					index:1
				},
			],
		};
	},
	onLoad() {
		
	},
	methods:{
		
	}
};
</script>

<style lang="scss" scoped>
	.bg-gradual-blue {
		background-image: linear-gradient(45deg, rgba(31, 117, 203, 0.8), rgba(34, 126, 217, 0.5));
		color: #ffffff;
	}
</style>