jp-xqjy/pages/index/index.vue

<template>
	<view>
		<view class="home-head">
			<view class="homeTab">
				<u-tabs :list="tabList" :current="current" @change="change" :show-bar="false" active-color="#333" inactive-color="#c4c0c0"></u-tabs>
			</view>
			<view class="homeAdd">
				<u-icon custom-prefix="custom-icon" name="map-pin-2-fill"></u-icon>
				<span>荆州市</span>
			</view>
		</view>
		<view class="homeWrap">
			<u-swiper :list="wrapList" height="300" border-radius="24"></u-swiper>
		</view>
		<view class="homeUser">
			<view class="homeUser-item">
				<view class="homeUser-add">
					<u-icon custom-prefix="custom-icon" name="map-pin-2-fill"></u-icon>
					<span>荆州</span>
				</view>
				<view class="homeUser-text">
					<view class="homeUser-name">
						<span>刘子琪</span>
						<u-icon custom-prefix="custom-icon" name="women-line" color="#FF695B"></u-icon>
					</view>
					<view class="homeUser-info">
						24岁 · 160cm · 51kg
					</view>
				</view>
				<u-image class="homeUser-img" src="/static/img/user1.jpg" height="330" mode="aspectFill"></u-image>
			</view>
			<view class="homeUser-item">
				<view class="homeUser-add">
					<u-icon custom-prefix="custom-icon" name="map-pin-2-fill"></u-icon>
					<span>荆州</span>
				</view>
				<view class="homeUser-text">
					<view class="homeUser-name">
						<span>刘子琪</span>
						<u-icon custom-prefix="custom-icon" name="men-line" color="#1677FF"></u-icon>
					</view>
					<view class="homeUser-info">
						24岁 · 160cm · 51kg
					</view>
				</view>
				<u-image src="/static/img/user2.jpg" height="330" mode="aspectFill"></u-image>
			</view>
			<view class="homeUser-item">
				<view class="homeUser-add">
					<u-icon custom-prefix="custom-icon" name="map-pin-2-fill"></u-icon>
					<span>荆州</span>
				</view>
				<view class="homeUser-text">
					<view class="homeUser-name">
						<span>刘子琪</span>
						<u-icon custom-prefix="custom-icon" name="men-line" color="#1677FF"></u-icon>
					</view>
					<view class="homeUser-info">
						24岁 · 160cm · 51kg
					</view>
				</view>
				<u-image src="/static/img/user3.jpg" height="330" mode="aspectFill"></u-image>
			</view>
			<view class="homeUser-item">
				<view class="homeUser-add">
					<u-icon custom-prefix="custom-icon" name="map-pin-2-fill"></u-icon>
					<span>荆州</span>
				</view>
				<view class="homeUser-text">
					<view class="homeUser-name">
						<span>刘子琪</span>
						<u-icon custom-prefix="custom-icon" name="women-line" color="#FF695B"></u-icon>
					</view>
					<view class="homeUser-info">
						24岁 · 160cm · 51kg
					</view>
				</view>
				<u-image src="/static/img/user4.jpg" height="330" mode="aspectFill"></u-image>
			</view>
			
			<u-divider color="#B6BDC3" style="margin-top:20px;">已经到底了</u-divider>
		</view>
 	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
					name: '最新'
				}, {
					name: '最热'
				}],
				current: 0,
				wrapList: [{
						image: '/static/img/banner.png',
					},
					{
						image: '/static/img/banner.png',
					},
					{
						image: '/static/img/banner.png',
					}
				],
			}
		},
		methods: {
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home-head{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-right: 15px;  
		.homeAdd{
			color: #FF5E5E;
			span{
				margin-left: 3px;
			}
		}
	}
	.homeWrap{
		padding:0 15px;
	}
	.homeUser{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 15px;
		.homeUser-item{
			width: 48%;
			height: 165px;
			margin-bottom: 15px;
			position: relative;
			color: #fff;
			border-radius: 12px;
			overflow: hidden;
			.homeUser-add{
				position: absolute;
				z-index: 9;
				right: 10px;
				top: 10px;
				background: rgba(0,0,0,0.5);
				padding:2px 5px;
				border-radius: 12px;
				span{
					margin-left: 3px;
					font-size: 14px;
				}
			}
			.homeUser-text{
				position: absolute;
				z-index: 9;
				left:0px ;
				bottom: 0px;
				right: 0;
				padding: 10px;
				background: linear-gradient( 180deg,rgba(0,0,0,0),rgba(0,0,0,0.5));
			}
			.homeUser-name{
				display: flex;
				align-items: center;
				span{
					margin-right: 3px;
				}
			}
			.homeUser-info{
				margin-top: 3px;
			}
			.homeUser-img{
				position: relative;
				z-index: 0;
			}
		}
	}
</style>