uniapp 仿喜茶小程序前端模板（支持小程序、网页、app）

uniapp仿喜茶小程序前端模板

兼容：网页、app、小程序

部分截图

 部分代码

<template>
	<view class="">
		<uy-swiper :list="slideshowList" :height="275" :isIndicatorLight="false">uy-swiper>
		
		<view class="uy-m-l-30 uy-m-r-30 uy-m--t-30">
			<view class="uy-rel uy-bg-ffffff z-index1 uy-b-r-20 uy-flex uy-h-370 uy-flex-around uy-bs-000000">
				<view class="" v-for="(item,index) in $mConstDataConfig.indexList1" :key="index" @tap="$openPage({name: item.url, query: item.params})">
					<view class="uy-w-m uy-m-a">
						<uy-image width="120" height="120" :src="item.icon">uy-image>
					view>
					<view class="uy-text-c uy-m-10 uy-font-36 uy-font-w-600">{{item.name || ''}}view>
					<view class="uy-text-c uy-font-24 uy-m-10">{{item.desc || ''}}view>
				view>
				<view class="uy-abs uy-l-0 uy-r-0 uy-m-a uy-w-1 uy-height-280 uy-bg-F2F2F2">view>
			view>
			
			<view class="uy-flex uy-flex-between uy-m-t-30 uy-h-146">
				<view class="uy-flex-1 uy-h-i  uy-m-r-20 uy-bg-EAEBEC uy-b-r-20 uy-flex uy-flex-center uy-m-l-r" v-for="(item,index) in $mConstDataConfig.indexList2" :key="index">
					<view class="">
						<view class="uy-flex uy-flex-center">
							<uy-image width="48" height="48" :src="item.icon">uy-image>
							<view class="uy-m-l-10">{{item.name || ''}}view>
						view>
						<view class="uy-color-AAAAAA uy-font-24 uy-m-t-10 uy-text-c">{{item.desc || ''}}view>
					view>
				view>
			view>
			
			<view class="uy-flex uy-flex-between uy-h-130 uy-m-t-30">
				<view class="uy-w-p-78" @tap="$openPage('integralMall')">
					<view>我的积分 22view>
					<view class="uy-font-24 uy-m-t-16 uy-color-7F7F7F">可兑换喜茶券和丰富灵感周边view>
				view>
				<view class="uy-w-p-22 uy-text-c uy-br-F2F2F2-l" @tap="$openPage('userCode')">
					<view class="uy-w-m uy-m-a">
						<uy-image width="48" height="48" :src="$mAssetsPath.index5">uy-image>
					view>
					<view class="uy-font-24 uy-m-t-10 uy-color-7F7F7F">会员码view>
				view>
			view>
		view>
	view>
template>
 
<script>
	export default {
		data() {
			return {
				slideshowList: [{
					image: '/static/img/banner1.png'
				}, {
					image: '/static/img/banner2.png'
				}, {
					image: '/static/img/banner3.png'
				}]
			}
		},
		onLoad() {
 
		},
		methods: {
 
		}
	}
script>
 
<style>
	
style>

可二开，可扩展，可学习

需要的可扫码微信小程序下载即可

或微信搜索【源空间】