szgb-book-wx/pages/exhibit/index.vue

<template>
	<view>
		<view>
			<img class="exhibit_bg" src="../../static/img/exhibitBg.png" alt="">
		</view>
		<view class='content'>
			<view class="exhibit" @click='toExhibitList'>
				<view>
					<view>
						<span></span>
						<span>当前展览</span>
					</view>
					<u-icon name="arrow-right" color="#fff"></u-icon>
				</view>
			</view>
			<view class="exhibit_list">
				<view v-for="item in exhibitList" class="exhibit_item" @click='todetail(item.id)'>
					<img :src="item.head_upload.url" alt="">
					<view>
						<view>{{item.name}}</view>
						<view>时间：{{cancelTime(item.start_time)}}起</view>
					</view>
				</view>
			</view>
			<view class="exhibit relic" @click='torelic'>
				<view>
					<view>
						<span></span>
						<span>文物</span>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="relic_list">
				<view v-for="item in relicList" class="relic_item" @click='toRelicDetail(item.id)'>
					<img :src="item.head_upload.url" alt="">
					<view>
						<view>{{item.name}}</view>
						<view>{{item.contain}}</view>
					</view>
				</view>
			</view>
		</view>
		



		<tabbar :current-page="3"></tabbar>
	</view>
</template>

<script>
	import tabbar from "../../components/tabbar/tabbar.vue"
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				exhibitList: [],
				relicList:[]
			}
		},
		onLoad() {
			this.getExhibit()
			this.getRelic()
		},
		methods:{
			cancelTime(str){
				return str?str.substring(0,10):''
			},
			toExhibitList(){
				uni.navigateTo({
					url: "/pages/exhibit/list"
				});
			},
			todetail(id){
				uni.navigateTo({
					url: "/pages/exhibit/detail?id="+id
				});
			},
			toRelicDetail(id){
				uni.navigateTo({
					url: "/pages/relic/detail?id="+id
				});
			},
			torelic(){
				uni.navigateTo({
					url: "/pages/relic/list"
				});
			},
			getExhibit(){
				var that = this;
				this.util.request({
					api: '/api/mobile/exhibit-hall/index',
					data:{
						page:1,
						page_size:6,
						// state:1
						sort_name:'state',
						sort_type:'DESC'
					},
					utilSuccess: function(res) {
						that.exhibitList = res.data
					},
					utilFail: function(res) {
						
					}
				})
			},
			getRelic(){
				var that = this;
				this.util.request({
					api: '/api/mobile/cultural-relic/index',
					data:{
						page:1,
						page_size:6
					},
					utilSuccess: function(res) {
						that.relicList = res.data
					},
					utilFail: function(res) {
						
					}
				})
			},
		}
	}
</script>

<style>
	.box-top {
		width: 100%;
	}

	.exhibit_bg {
		width: 100%;
		height: 627rpx;
	}

	.content {
		margin-top: -450rpx;
		padding-bottom:140rpx
	}

	.exhibit {
		color: #fff;
		padding: 0 30rpx
	}

	.exhibit>view:first-child {
		display: flex;
		justify-content: space-between;
	}

	.exhibit>view:first-child span:first-child {
		background-color: #fff;
		width: 5rpx;
		height: 40rpx;
		margin-right: 22rpx;
		display: inline-block;
		vertical-align: text-top;
	}

	.exhibit_list {
		display: flex;
		justify-content: space-between;
		overflow-x: scroll;
		margin: 15rpx 10rpx;
		margin-right: 0;
		padding: 20rpx;
	}

	.exhibit_item {
		width: 520rpx;
		border-radius: 20rpx;
		background-color: #fff;
		box-shadow: 0rpx 0rpx 25rpx 0rpx rgba(33,22,19,0.1);
		margin-right: 30rpx;
		font-size: 0;
	}

	.exhibit_item img {
		width: 520rpx;
		height: 310rpx;
		display: block;
		border-radius: 20rpx 20rpx 0 0;
	}

	.exhibit_item>view {
		background-color: #fff;
		border-radius: 0 0 20rpx 20rpx;
		padding: 35rpx;
		font-size: 32rpx;
		line-height: 48rpx;
	}

	.exhibit_item>view view:first-child {
		width: 100%;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		/* 这里是超出几行省略 */
		overflow: hidden;
	}

	.exhibit_item>view view:last-child {
		color: #6E6E6E;
		font-size: 28rpx;
		margin-top: 20rpx
	}
	.relic{
		color:black;
	}
	.relic>view:first-child span:first-child {
		background-color: #DEA166;
	}
	.relic_list{
		
	}
	.relic_item{
		margin:35rpx 30rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		background: linear-gradient(to bottom, #cf995a, #d8b487);
		
	}
	.relic_item img{
		width:380rpx;
		height:270rpx;
		border-radius: 20rpx 0 0 20rpx;
	}
	.relic_item>view{
		display: inline-block;
		width:300rpx;
		padding:24rpx;
		color:#fff;
		padding-bottom: 10rpx;
	}
	.relic_item>view view:first-child{
		width: 100%;
		/* height:100rpx; */
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		/* 这里是超出几行省略 */
		overflow: hidden;
	}
	.relic_item>view view:last-child{
		width: 100%;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		/* 这里是超出几行省略 */
		overflow: hidden;
		font-size: 26rpx;
		margin-top:20rpx;
	}
</style>