greenPro/pages/tabBar/component/component.nvue

<template>
	<view class="uni-container">
		<view class="head">
			<view class="personClass">
				<uni-icons type="person" size="30" color="#fff"></uni-icons>
			</view>
			<view class="inputClass">
				<input class="uni-input" v-model="changeValue" placeholder="请输入查询的内容" />
			</view>
			<view class="head-right">
				<text class="headtext">积分</text>
				<text class="headtext">我的</text>
			</view>
		</view>
		
		<view class="contentBox">
			<view class="constList">
				<view class="constList-left">
					<view class="imgbox">
						<view>图片</view>
					</view>
					<view class="constList-left-con">
						文案
					</view>
				</view>
				<view class="constList-right">
					<view class="constList-right-con">文案</view>
					<view class="constList-right-con">文案</view>
				</view>
			</view>
			<view class="constList-bottom">
				<uni-icons type="heart-filled" size="30" color="#fd0505" style="color: red;"></uni-icons>
				<uni-icons type="chatboxes-filled" size="30"></uni-icons>
				<uni-icons type="images-filled" size="30"></uni-icons>
			</view>
		</view>
		<view class="contentBox">
			<view class="constList">
				<view class="constList-left">
					<view class="imgbox">
						<view>图片</view>
					</view>
					<view class="constList-left-con">
						文案
					</view>
				</view>
				<view class="constList-right">
					<view class="constList-right-con">文案</view>
					<view class="constList-right-con">文案</view>
				</view>
			</view>
			<view class="constList-bottom">
				<uni-icons type="heart-filled" size="30" color="#fd0505" style="color: red;"></uni-icons>
				<uni-icons type="chatboxes-filled" size="30"></uni-icons>
				<uni-icons type="images-filled" size="30"></uni-icons>
			</view>
		</view>
	</view>
</template>
<script>
	// TODO 修复Android v3 加载过慢问题
	// #ifdef APP-PLUS
	var domModule = weex.requireModule('dom');
	domModule.addRule('fontFace', {
		'fontFamily': "uniicons",
		'src': "url('/static/uni.ttf')"
	});
	// #endif
	export default {
		props: {
			hasLeftWin: {
				type: Boolean
			},
			leftWinActive: {
				type: String
			}
		},
		data() {
			return {
				changeValue: ""
			}
		},
		onShareAppMessage() {
			return {
				title: '欢迎体验uni-app',
				path: '/pages/tabBar/component/component'
			}
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: '/pages/about/about'
			});
		},
		// #ifdef H5
		watch: {
			$route: {
				immediate: true,
				handler(newRoute) {
					if (newRoute.matched.length) {
						let path = newRoute.path.split('/')[3]
						for (const item of this.list) {
							if (Array.isArray(item.pages)) {
								for (const page of item.pages) {
									if (page === path || page.url && page.url === newRoute.path) {
										item.open = true
									}
								}
							}
						}
					}
				}
			}
		},
		// #endif
		methods: {
			triggerCollapse(e, id) {
				if (!this.list[e].pages) {
					this.goDetailPage('', this.list[e].url);
					return;
				}
				for (var i = 0; i < this.list.length; ++i) {
					if (e === i) {
						this.list[i].open = !this.list[i].open;
					} else {
						this.list[i].open = false;
					}
				}
			},
			goDetailPage(panel, e) {
				if (typeof e === 'string') {
					const url = '/pages/component/' + e + '/' + e
					if (this.hasLeftWin) {
						uni.reLaunch({
							url: url
						})
					} else {
						uni.navigateTo({
							url: url
						})
					}
				} else {
					if (this.hasLeftWin) {
						uni.reLaunch({
							url: e.url
						})
					} else {
						uni.navigateTo({
							url: e.url
						})
					}
				}
			}
		}
	}
</script>

<style>
	
	@import '../../../common/uni-nvue.css';
	.head{
		display: flex;
		flex-direction: row;
		margin-bottom: 20px;
	}
	.personClass{
		width: 50px;
		height: 50px;
		background-color: #c9cdd4;
		border-radius: 50%;
		text-align: center;
		line-height: 50px;
		margin-right: 10px;
	}
	.uni-input{
		height: 30px;
	}
	.head-right{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}
	.headtext{
		margin: 0 10px;
	}
	.constList{
		width: 100%;
		margin: 10px 0;
		height: 200px;
		background-color: #ecb2b2;
		border-radius: 15px;
		display: flex;
		flex-direction: row;
	}
	.constList-left{
		display: flex;
		flex-direction: column;
		padding-left: 30px;
	}
	.constList-right{
		display: flex;
		flex-direction: column;
	}
	.constList-left-con{
		font-size: 20px;
		text-align: center;
	}
	.imgbox{
		width: 200px;
		height: 100px;
		color: black;
		margin: 5px 20px 10px 0px;
		background-color: #fff;
	}
	.constList-right-con{
		font-size: 20px;
		text-align: center;
		height: 100px;
		line-height: 100px;
	}
	uni-icons[type="heart-filled"] {
	  color: red !important;
	}
	.constList-bottom{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}
</style>