Retired/pages/home/home.vue

<template>
	<view>
		<u-sticky>
			<u-swiper :list="topicList.swiper" keyName="image" circular height="470rpx" bgColor="#ffffff"></u-swiper>
			<view class="search-input">
				<u-search searchIconColor='#e6e6e6' placeholderColor='#e6e6e6' color='#FFFFFF' placeholder="搜索招聘/课程/技能"
					v-model="keyword" :showAction="false"></u-search>
			</view>
			<view class="tabs-list">
				<view class="left">
					<view class="item" @click="btntabs(index)" v-for="(item,index) in tabsList" :key="index">
						<image class="images" :src="currect==index?item.imgSelect:item.img" mode=""></image>
						<text :style="{color:currect==index?'#006EEF':'#707070'}" class="text1">{{item.title}}</text>
					</view>
				</view>
				<view class="right">
					<image class="images1" src="../../static/img/demo/gengduo.png" mode=""></image>
				</view>
			</view>
		</u-sticky>
		<view class="last-update">
			<topic-list v-if='index<=5' :item="item" v-for="(item,index) in topicList.list" :key="index"></topic-list>
		</view>
	</view>
</template>

<script>
	import {
		newsList,
		topicList
	} from "@/utils/data/data.js"
	import InfoList from "@/pages/home/cpns/info-list.vue"
	import NewsTopicNav from "@/pages/news/cpns/news-topic-nav.vue"
	import TopicList from "@/pages/news/cpns/topic-list.vue"
	export default {
		components: {
			InfoList,
			NewsTopicNav,
			TopicList
		},
		data() {
			return {
				keyword: "",
				currect: 0,

				// 导航标签
				tabIndex: 1,
				tabList: [{
						name: "关注",
						id: 'follow'
					},
					{
						name: "话题",
						id: 'topic'
					}
				],
				swiperHeight: 0,
				// 关注列表
				followList: {
					// 加载更多
					loadStatus: 'loadmore',
					// 列表数据
					list: newsList[0].list
				},
				// 话题列表
				topicList: {
					swiper: [ // 轮播图
						{
							image: '/static/img/demo/winter1.jpeg',
						}
					],

					list: topicList[1].list
				},
				tabsList: [{
						img: '/static/img/demo/zhaopin.png',
						imgSelect: '/static/img/demo/zhaopin-select.png',
						title: '招聘',
					},
					{
						img: '/static/img/demo/jineng.png',
						imgSelect: '/static/img/demo/jineng-select.png',
						title: '技能',
					},
					{
						img: '/static/img/demo/kecheng.png',
						imgSelect: '/static/img/demo/kecheng-select.png',
						title: '课程',
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			// swiper滑动
			changeSwiper(e) {
				this.tabIndex = e.detail.current
			},
			btntabs(index) {
				this.currect = index
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f8ff;
	}

	.search-input {
		width: 90%;
		margin: 0 auto;
		position: relative;
		bottom: 270rpx;
	}

	.tabs-list {
		// border: solid 1px red;
		width: 95%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		position: relative;
		bottom: 200rpx;
		height: 180rpx;

		.left {
			width: 80%;
			display: flex;
			align-items: center;
			// border: solid 1px red;

			.item {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.images {
					width: 65rpx;
					height: 65rpx;
				}

				.text1 {
					font-size: 28rpx;
					color: #000000;
					margin-top: 10rpx;
				}
			}
		}

		.right {
			width: 20%;
			// border:solid 1px blue;
			display: flex;
			justify-content: center;

			.images1 {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}

	.last-update {
		// border: solid 1px red;
		position: relative;
		bottom: 200rpx;
		width: 95%;
		margin: 0 auto;

	}

	/deep/.u-search__content {
		background-color: rgba(255, 255, 255, 0.4) !important;
	}

	/deep/.u-search__content__input {
		background-color: rgba(255, 255, 255, 0) !important;
	}
</style>