cbz/pages/tabbar/shipyard/news.vue

<template>
	<view class="content">
		<view class="top">
			<u-navbar title=" " @leftClick="leftClick" height="44px" bgColor="rgb(255,255,255)" :placeholder="true">
				<view class="u-nav-slot" slot="center"> 
					<u-input v-model="keyword" type="text" :border="true" placeholder="搜索关键词" shape="circle"
						prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" @focus="search">
						<template slot="suffix">
							<view @click="search">搜索</view>
						</template>
					</u-input>
				</view>
			</u-navbar>
		</view>
		<view class="boxs">
			<u-tabs :list="tabs" @click="changeTaaba"
				:scrollable = "false"
				:activeStyle="{
					color: '#000',
				}" :inactiveStyle="{
					color: '#888888'
				}"></u-tabs>
		</view>
		<view class="boxs">
			<news-module :pageList="pageList"></news-module>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				keyword: '',
				tabs: [
					{
						name: '推荐',
					},
					{
						name: '发现',
					},
					{
						name: '资讯',
					},
					{
						name: '实时',
					},
					{
						name: '娱乐',
					},
					{
						name: '美食',
					}
				],
				pageList: [
					{
						title: '2022年上半年十部好剧，《开端》第7名，《人世间》第4名，值得观看',
						imgs: [
							"/static/images/index/class_img1.png",
							"/static/images/index/class_img1.png",
							"/static/images/index/class_img1.png"
						],
						type: '资讯',
						client: '澎湃新闻客户端',
						comment: 77
					}
				],
			}
		},
		onLoad() {
			that = this
		},
		methods: {
			// 返回
			leftClick() {
				console.log('返回');
				$api.jump(-1)
			},
			// 切换tabs
			changeTaaba(e) {
				console.log(e);
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content::v-deep {
		.top {
			box-sizing: border-box;
			// padding: 30rpx;
			// height: 540rpx;
			.u-nav-slot {
				position: absolute;
				top: 8rpx;
				left: 84rpx;
				width: 470rpx;
			}
			.u-input {
				background-color: #fff;
				height: 64rpx;
				padding: 0 0 0 18rpx !important;
				border: 1rpx solid #506Dff;
				margin-bottom: 12rpx;
			}
			.u-input__content__subfix-icon {
				width: 128rpx;
				height: 64rpx;
				background-color: #506Dff;
				border-radius: 32rpx;
				color: #fff;
				font-size: 28rpx;
				text-align: center;
				line-height: 64rpx;
			}
		}
		.boxs {
			width: 100%;
			box-sizing: border-box;
			padding: 0 30rpx;
			margin: 24rpx 0 0;
		}
	}
</style>