yichael_zhongchuang_front_2/components/home/simulationLibrary.vue

<template>
	<view class="s_container">
		<image src="../../assets/test/4.png" class="s_logo" mode=""></image>
		<view class="s_content_container">
			<view class="s_search" style="">
				<view class="" style="position: relative;width: 100%;">
					<img src="../../assets/home/search.png" class="s_search_img_input" alt="">
					<input type="text" value="" class="s_search_input" style="width: 96%;" placeholder="请输入搜索内容" />
				</view>
				<button type="warn" size="mini" class="s_btn_search">搜索</button>
			</view>
			<view class="s_search_condition">
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<picker @change="bindPickerChange" :value="index" :range="array">
								<view class="uni-input">{{array[index]}}</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<picker @change="bindPickerChange" :value="index" :range="array">
								<view class="uni-input">{{array[index]}}</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<picker @change="bindPickerChange" :value="index" :range="array">
								<view class="uni-input">{{array[index]}}</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<picker @change="bindPickerChange" :value="index" :range="array">
								<view class="uni-input">{{array[index]}}</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<picker @change="bindPickerChange" :value="index" :range="array">
								<view class="uni-input">{{array[index]}}</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<picker @change="bindPickerChange" :value="index" :range="array">
								<view class="uni-input">{{array[index]}}</view>
							</picker>
						</view>
					</view>
				</view>
			</view>

			<view class="s_search_img">

				<view class="s_img_left">
					<view class="s_top_img">
						<view class="s_top_content" v-for="(item,index) in oneImgList" :key="index">
							<img :src="item.src" class="s_top_image" mode=""></img>
							<view class="s_top_title">
								{{item.name}}
							</view>
						</view>
					</view>
					<view class="s_img s_img_1">
						<view class="s_img_title" v-text="'艺术类'"></view>
						<view class="s_img_image">
							<view class="s_img_content" v-for="(item,index) in twoImgList" :key="index">
								<img :src="item.src" class="s_image" mode="" @click="change1(index)"></img>
								<view class="s_operation" v-show="index==act">
									<text>{{item.name}}</text>
									<view>
										<img src="../../assets/home/find.png" alt="">
										<img src="../../assets/home/dowload.png" alt="">
									</view>

								</view>
							</view>
							<img src="../../assets/home/left.png" class="v-left" alt="">
						</view>
					</view>
					<view class="s_img">
						<view class="s_img_title" v-text="'文化类'"></view>
						<view class="s_img_image">
							<view class="s_img_content" v-for="(item,index) in twoImgList" :key="index">
								<img :src="item.src" class="s_image" mode="" @click="change2(index)"></img>
								<view class="s_operation" v-show="index==act1">
									<text>{{item.name}}</text>
									<view>
										<img src="../../assets/home/find.png" alt="">
										<img src="../../assets/home/dowload.png" alt="">
									</view>

								</view>
							</view>
							<img src="../../assets/home/left.png" class="v-left" alt="">
						</view>
					</view>
				</view>

			</view>
		</view>

		<view class="s_footer" style="text-align: center;padding: 80rpx;">
		</view>
	</view>
</template>

<script>
	export default {
		name: "simulationLibrary",
		data() {
			return {
				act: -1,
				act1: -1,
				array: ['项目类型'],
				index: 0,
				url: '/assets/home/homeBG.png',
				oneImgList: [{
					src: require("../../assets/test/1.png"),
					name: "大标题"
				}, {
					src: require("../../assets/test/2.png"),
					name: "大标题"
				}, {
					src: require("../../assets/test/3.png"),
					name: "大标题"
				}],
				twoImgList: [{
						name: "地球",
						src: require("../../assets/test/3.png")
					},
					{
						name: "地球",
						src: require("../../assets/test/3.png")
					},
					{
						name: "地球",
						src: require("../../assets/test/3.png")
					},
					{
						name: "地球",
						src: require("../../assets/test/3.png")
					},
					{
						name: "地球",
						src: require("../../assets/test/3.png")
					},
					{
						name: "地球",
						src: require("../../assets/test/3.png")
					},
				]
			}
		},
		created() {

		},
		methods: {
			bindPickerChange(e) {
				this.index = e.target.value
			},
			change1(e) {
				if (this.act == e) {
					this.act = -1;
				} else {
					this.act = e;
				}

			},
			change2(e) {
				if (this.act1 == e) {
					this.act1 = -1;
				} else {
					this.act1 = e;
				}
			}
		}
	}
</script>

<style scoped>
	.s_container {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}

	.s_logo {
		width: 100%;
		height: 400rpx;
	}




	.m_btn_download {
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 70rpx;
		background: #EA252C;
		color: #fff;
		font-family: MicrosoftYaHei;
	}

	.s_search {
		display: flex;
		justify-content: space-between;
	}

	.s_search_input {
		border: 2rpx solid #DDDDDD;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 60rpx;
		border-radius: 10rpx;
		font-size: 20rpx;
	}

	.s_content_container {
		padding: 40rpx 100rpx;
	}

	.s_btn_search {
		width: 130rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin-left: 20rpx;
	}

	.s_search_condition {
		background-color: #F9F9F9;
		margin-top: 40rpx;
		height: 100rpx;
		width: 100%;
	}

	.m_select {
		width: 300rpx;
		line-height: 80rpx;
	}

	.uni-list-cell-db {
		width: 300rpx;
		// height: 100rpx;
		line-height: 100rpx;
	}


	.uni-selector-select .uni-picker-item.selected {
		color: red;
	}

	.uni-input {
		text-align: center;
	}

	.s_search_condition {
		display: flex;
		justify-items: start;
	}

	.uni-list {
		position: relative;
	}

	.uni-list::after {
		content: url(../../assets/learning/icon_ylrz_arrow.png);
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.s_image_text {
		margin-left: 20rpx;
	}

	.s_top_img {
		display: flex;
		justify-content: space-between;
		padding-bottom: 80rpx;
		border-bottom: 3rpx solid #D7D7D7;
	}

	.s_top_content {
		margin-top: 40rpx;
		width: 30%;
		position: relative;
	}

	.s_top_image {
		width: 100%;
	}

	.s_top_title {
		color: #fff;
		position: absolute;
		bottom: 40rpx;
		font-size: 2.0rem;
		line-height: 100rpx;
		font-weight: 500;
		width: 100%;
		text-align: left;
		margin-left: 50rpx;
	}

	.s_img_title {
		font-size: 36rpx;
		line-height: 200rpx;
		font-weight: bold;
	}

	/* .s_top_image {
		width: 400rpx;
	} */

	.s_img_image {
		display: flex;
		position: relative;
	}

	.s_image {
		margin-right: 40rpx;

		/* height: 550rpx; */
	}

	.s_img_1 {
		padding-bottom: 80rpx;
		border-bottom: 3rpx solid #D7D7D7;
	}

	.s_img_left {
		padding-right: 130rpx;
	}

	.s_img_content {
		position: relative;
		padding: 10rpx;
		/* display: flex; */
		/* justify-content: left; */
		/* 	justify-items: center; */
	}

	.s_image {
		width: 100%;
	}

	/* @media sscreen (min-with:1050px)  and (max-width: 1920px) and {
		
	} */

	.s_operation {
		/* 	position: absolute;
		bottom: -10rpx;
		left: 0;
		width: 100%; */
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
	/* 	margin-right: 40rpx; */
		background-color: #dbd9d9;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
	}

	.s_operation img {
		margin-left: 20rpx;
	}

	.v-left {
		position: absolute;
		width: 25rpx;
		height: 50rpx;
		right: -100rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.s_search_img_input {
		position: absolute;
		left: 20rpx;
		top: 50%;
		width: 30rpx;
		transform: translateY(-50%);
	}
</style>