Jingde-town-wechat-uniapp/pages_order/service/tellList.vue

<template>
	<!-- 达人和讲述 -->
	<view class="tell">
		<navbar :title="titles[type]" leftClick @leftClick="$utils.navigateBack" />

		<view class="tell-top" v-if="type == 0 ">
			<view>级别</view>
			<view>遗产点</view>
		</view>

		<!-- <view class="card" v-for="(item,index) in 10">
			<view class="card-img">
				<image src="../static/applyRelic/jdz.png" mode="aspectFill"></image>
			</view>
			<view class="card-content">
				<view style="display: flex; align-items: center;">
					<text>刘申林</text>
					<image class="card-content-img" src="../static/tell/goldMedal.png"></image>
				</view>
				<view class="card-content-tag">
					提前一周预约
				</view>
				<view style="font-size: 12px; color: #999;">
					御窑厂、刘家弄、观音阁、陶瓷博物馆御窑博物馆...
				</view>
				<view class="card-content-bottom">
					<view style="color: #FF280C;">
						￥300起
					</view>
					<view class="card-content-bottom-one">
						￥线上预约
					</view>
				</view>
			</view>
		</view> -->
		<cardList />
		<tabber/>
	</view>
</template>

<script>
	import cardList from '../components/list/cardList.vue'
	export default {
		components: {
			cardList
		},
		data() {
			return {
				titles: ['遗产讲述', '达人同游'],
				type: 0,
			}
		},
		onLoad(args) {
			this.type = args.type || 0
		},
		methods: {

		}
	}
</script>


<style scoped lang="scss">
	.tell {
		.tell-top {
			display: flex;
			justify-content: left;
			align-items: center;
			height: 80rpx;
			background-color: #fff;
			border-top: 2rpx solid #D0D0D0;
			border-bottom: 2rpx solid #D0D0D0;

			view {
				flex: 1;
				margin-left: 5%;
			}
		}

		// .card {
		// 	display: flex;
		// 	height: 300rpx;
		// 	width: 94%;
		// 	margin: 40rpx 0 0 3%;
		// 	align-items: center;

		// 	.card-img {
		// 		height: 240rpx;
		// 		width: 420rpx;

		// 		image {
		// 			height: 100%;
		// 			width: 100%;
		// 		}
		// 	}

		// 	.card-content {
		// 		margin-left: 3%;
		// 		font-size: 28rpx;

		// 		.card-content-img {
		// 			display: flex;
		// 			margin-left: 10rpx;
		// 			width: 100rpx;
		// 			height: 40rpx;
		// 		}

		// 		.card-content-tag {
		// 			display: inline-block;
		// 			font-size: 24rpx;
		// 			padding: 2rpx 20rpx;
		// 			border: 2rpx solid #FBA21E;
		// 			background-color: #FFF1D2;
		// 			color: #FBAF35;
		// 			border-radius: 20rpx;
		// 		}

		// 		.card-content-bottom {
		// 			display: flex;
		// 			justify-content: space-between;
		// 			align-items: center;

		// 			.card-content-bottom-one {
		// 				display: inline-block;
		// 				color: #FFFDF6;
		// 				background-color: #C83741;
		// 				margin-right: 4%;
		// 				padding: 8rpx 20rpx;
		// 				border-radius: 40rpx;
		// 			}

		// 		}

		// 		view {
		// 			margin-top: 10rpx;
		// 		}
		// 	}
		// }
	}
</style>