cbz/pages/tabbar/index/index.vue

<template>
	<view class="content">
		<view class="content_top">
			<u-navbar leftText="" height="44px" bgColor="rgb(255,255,255,0)" :placeholder="true">
				<view class="navbar_left hflex acenter" slot="left">
					<image src="../../../static/images/index/logo.png" style="width: 160rpx;height: 60rpx;"></image>
					<view class="dian"></view>
					<view class="text_style1">{{weather}}</view>
				</view>
			</u-navbar>
			<view class="search hflex acenter">
				<view class="hflex acenter" @click="changeCity">
					<view class="city">{{city}}</view>
					<u-icon name="arrow-down-fill" color="#000" size="10"></u-icon>
				</view>
				<u-input v-model="serach_value" type="text" :border="true" placeholder="搜索关键词" shape="circle"
					prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399">
				</u-input>
			</view>
		</view>
		
		<view class="swiper">
			<u-swiper :list="bannerList" radius="20rpx" @click="toBanner"></u-swiper>
		</view>
		<view class="notice hflex acenter jbetween">	
			<!-- <view class="notice_left">公告</view> -->
			<u-notice-bar :text="notice_text" direction="column" icon="公告" color="#7a7b7c" bgColor="#f3f7ff"></u-notice-bar>
			<view class="hflex acenter" @click="toNotice">
				<view class="text1">更多</view>
				<u-icon name="arrow-right" color="#bebebf" size="14"></u-icon>
			</view>
		</view>
		<view class="boxs hflex acenter jbetween">
			<image :src="class_img1" mode="widthFix" style="width: 336rpx;"></image>
			<image :src="class_img2" mode="widthFix" style="width: 336rpx;"></image>
		</view>
		<view class="boxs hflex acenter jbetween">
			<image :src="class_img3" mode="widthFix" style="width: 220rpx;"></image>
			<image :src="class_img4" mode="widthFix" style="width: 220rpx;"></image>
			<image :src="class_img5" mode="widthFix" style="width: 220rpx;"></image>
		</view>
		<view class="boxs">
			<u-tabs :list="tabs" @click="changeTaaba"
				:activeStyle="{
					color: '#000',
				}" :inactiveStyle="{
					color: '#888888'
				}"></u-tabs>
		</view>
		<view class="boxs">
			<block v-for="(item,index) in pageList" :key="index">
				<news-module :title="item.title" :imgs="item.imgs" :type="item.type" :client="item.client" :comment="item.comment"></news-module>
			</block>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				title: 'Hello',
				weather: '',
				city: '北京',
				serach_value: '',
				bannerList: [
					"/static/images/index/class_img1.png",
					"/static/images/index/class_img1.png"
				],
				notice_text: [
					'找工作有妙招，这里看过来~',
					'浔阳江头夜送客'
				],
				class_img1: '/static/images/index/class_img1.png',
				class_img2: '/static/images/index/class_img2.png',
				class_img3: '/static/images/index/class_img3.png',
				class_img4: '/static/images/index/class_img3.png',
				class_img5: '/static/images/index/class_img3.png',
				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: '澎湃新闻客户端',
						commnet: 77
					}
				]
			}
		},
		onLoad() {
			that = this
			this.getCity()
		},
		methods: {
			// 获取当前位置
			getCity() {
				console.log("当前接口需要申请")
				uni.authorize({
				    scope: 'scope.userLocation',
				    success() {
				        uni.getLocation({
				        	type: "wgs84",
				        	success:function(res){
				        		console.log("当前位置：",res);
				        	}
				        })
				    }
				})
				
			},
			changeCity() {
				// console.log("城市");
				$api.jump('/page_index/pages/index/changeCity?city=' + this.city)
			},
			// 轮播图跳转
			toBanner(e) {
				console.log("点击轮播",e);
			},
			// 公告列表
			toNotice() {
				$api.jump('/page_index/pages/index/noticeList')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content::v-deep {
		// padding: 0 30rpx;
		background: #fff;
		.content_top {
			background: url('../../../static/images/index/bg.png') no-repeat;
			background-size: 100%;
			box-sizing: border-box;
			padding: 0 30rpx;
			.navbar_left {
				
				.dian {
					width: 8rpx;
					height: 8rpx;
					background: #232323;
					border-radius: 50%;
					margin: 0 6rpx 0 12rpx;
				}
			}
			.search {
				width: 100%;
				box-sizing: border-box;
				padding: 20rpx;
				margin-top: 36rpx;
				.city {
					color: #222222;
					font-size: 32rpx;
					margin-right: 16rpx;
				}
				.u-input {
					border: solid 1rpx #526eff;
					background: #fff;
					height: 76rpx;
					margin-left: 16rpx;
				}
			}
		}
		.swiper {
			width: 690rpx;
			// box-sizing: border-box;
			// padding: 0 30rpx;
			// height: 340rpx;
			margin: 24rpx 30rpx 20rpx;
			border-radius: 20rpx;
		}
		.notice {
			width: 690rpx;
			box-sizing: border-box;
			padding: 15rpx 30rpx 15rpx 0;
			background-color: #f3f7ff;
			margin: 0 20rpx 0;
			border-radius: 20rpx;
			
			.u-notice-bar {
				// background-color: #f3f7ff !important;
				// 
				.u-icon__icon {
					font-size: 32rpx;
					// padding-left: 24rpx;
					color: #506dff !important;
					padding-right: 20rpx;
					border-right: 3rpx solid #f1f1f1;
				}
			}
			
			.notice_left {
				
			}
		}
		// .class_img {
		// 	width: 100%;
		// 	box-sizing: border-box;
		// 	padding: 0 30rpx;
			
		// }
		.boxs {
			width: 100%;
			box-sizing: border-box;
			padding: 0 30rpx;
			margin: 24rpx 0 0;
		}
		.text1 {
			font-size: 25rpx;
			color: #8f8f90;
		}
	}

</style>