ProAdvanced/pages/friend-page/search/search.vue

<template>
	<view>
		<view class="cu-bar search bg-white">
			<view class=" flex align-center margin-left" @click="onBack()">
				<image class="p-left-arrow" src="/static/p-left-arrow.png"></image>
			</view>
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text"
					placeholder="搜索图片、文章、视频" confirm-type="search"></input>
			</view>
			<view class="action">
				<view class="text-16px make-text-bPurple" style="line-height: 32rpx;">搜索</view>
			</view>
		</view>

		<view class="cu-list menu-avatar margin-top">
			<view class="cu-item card-view" style="height: 180rpx;" v-for="(item, index) in 5" :key="index">
				<view class="cu-avatar round lg"
					style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);">
					<view class="cu-tag badge">99+</view>
				</view>
				<view class="content" style="width: 360rpx;">
					<view class="text-grey">凯尔</view>
					<view class="text-gray text-sm flex">
						<view class="text-cut">
							<text class="cuIcon-infofill text-red  margin-right-xs"></text>
							我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
						</view>

					</view>
					<view class="text-gray text-sm flex">
						<view class="text-cut">
							<text class="cuIcon-infofill text-red  margin-right-xs"></text>
							我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
						</view>

					</view>
				</view>
				<view class="action" style="width: 160rpx; ">
					<button v-if="index%2==0" class="cu-btn round make-lines-bPurple"
						style="width: 146rpx; right: 30rpx;">
						添加</button>
					<button v-else class="cu-btn round bg-grey" style="width: 146rpx; right: 30rpx;">
						已关注</button>
				</view>
			</view>

		</view>
	</view>
</template>

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

			}
		},
		methods: {
			onBack() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style>

</style>