cyzh-SoundOfMusic-H5/components/indexViews/home-view.vue

<template>
	<view>
		<view class="bg-img flex align-center" style="background-image: url('/static/ldt/aolinpike.png');height: 395upx;"></view>
		<view class="car-head">
			<view class="flex">
				<view class="avatar">
					<u-avatar src="/static/avatar.png" size="110"></u-avatar>
				</view>
				<view class="name">赖德福|德芙值得信赖</view>
			</view>
			<view class="flex justify-center text-center align-center">
				<view style="width: 40%;">
					<view class="text-bold" style="color: #ff9447;font-size: 32upx;">2000</view>
					<view class="text-sm text-black text-bold">我的积分</view>
				</view>
				<view style="width: 40%;">
					<view class="text-bold" style="color: #ff0101;font-size: 32upx;">+2000</view>
					<view class="text-sm text-black text-bold">昨日收益</view>
				</view>
			</view>
		</view>
		<view class="padding-left" style="height: 60upx;">
			<text class="cuIcon-locationfill padding-right-xs" style="color: #fbc85e;"></text>
			<text class="text-bold">保利中心</text>
			<text class="cuIcon-triangledownfill" style="font-size: 30upx;"></text>
		</view>
		<view class="flex justify-center align-center padding-bottom-sm">
			<view class="search">
				<text class="cuIcon-search padding-right-xs"></text>
				{{searValue}}
			</view>
		</view>
		<view class="flex justify-around text-center padding-tb">
			<block v-for="(item,index) in icons" :key="index">
				<view @click="navByIcon(item.url)">
					<image :src="item.image" style="width: 80upx;height: 80upx;"></image>
					<view class="margin-top-xs text-sm text-bold">{{item.name}}</view>
				</view>
			</block>
		</view>
		<view class="bg-white">
			<view class="flex justify-between align-center padding-sm">
				<view class="text-bold text-black">附近优惠</view>
				<view class="text-bold text-black">
					<text class="text-sm">更多</text>
					<text class="cuIcon-right"></text>
				</view>
			</view>
		</view>
		<view class="flex bg-white padding-bottom-sm">
			<image src="/static/ldt/starbucks.png" style="width: 234upx;height: 156upx;margin: 0 20upx 20upx 20upx;"></image>
			<view style="width: 60%;">
				<view class="text-bold text-black text-lg">星巴克</view>
				<view class="flex justify-between text-gray text-sm margin-tb-xs">
					<view>据此564米</view>
					<view>B1层</view>
				</view>
				<view class="text-sm text-cut-2 text-gray" style="height: 60upx;">星巴克咖啡公司成立于1971年，致力于商业道德采购并烘焙世界上高品质的阿拉比卡咖啡，在全球82个市场，拥有超过32,000家门店的星巴克是世界上首屈一指的专业咖啡烘焙商和零售商。</view>
			</view>
		</view>
		<view class="flex bg-white padding-bottom-sm">
			<image src="/static/ldt/kfc.png" style="width: 234upx;height: 156upx;margin: 0 20upx 20upx 20upx;"></image>
			<view style="width: 60%;">
				<view class="text-bold text-black text-lg">肯德基</view>
				<view class="flex justify-between text-gray text-sm margin-tb-xs">
					<view>据此564米</view>
					<view>B1层</view>
				</view>
				<view class="text-sm text-cut-2 text-gray" style="height: 60upx;">肯德基与百事可乐结成了战略联盟，固定销售百事公司提供的碳酸饮料。2017年6月，《2017年BrandZ最具价值全球品牌100强》公布，肯德基排名第81位。</view>
			</view>
		</view>
		<view class="flex justify-center padding-xs" style="color: #bebebe;">
			一一我也是有底线的一一
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searValue: '星巴克',
				icons: [
					{image: '/static/ldt/earnPoints.png', name: '赚积分', url: '/pages/activityList/index'},
					{image: '/static/ldt/costPoints.png', name: '花积分', url: ''},
					{image: '/static/ldt/exchangePoints.png', name: '换积分', url: ''},
				],
			}
		},
		methods: {
			navByIcon(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.car-head {
		background-color: #ffffff;
		margin: -60upx 30upx 30upx 30upx;
		height: 180upx;
		border-radius: 100upx;
		box-shadow: 10upx 20upx 60upx #d8d8d8;
		.avatar {
			margin-top: -40upx;
			padding-left: 40upx;
			padding-right: 20upx;
		}
		.name {
			padding-top: 10upx;
			font-size: 26upx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #222222;
		}
	}
	.search {
		width: 90%;
		border-radius: 50upx;
		line-height: 60upx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #9D9D9D;
		font-size: 20upx;
		box-shadow: 10upx 20upx 60upx #d8d8d8;
	}
</style>