影视平台首页模板：整合搜索、轮播、导航、通知等功能

<template>
	<view class='content'>
		<u-tabbar :value='value1' :fixed='true' :placeholder='false' :safeAreaInsetBottom='false'>
			<u-tabbar-item v-for='(item, index) in list' :key='index' :text='item.text' :icon='item.icon'
				@click='click1(item,index)'></u-tabbar-item>
		</u-tabbar>
		<!-- 搜索栏 -->
		<u-search placeholder='搜索' v-model='keyword' shape='square' :showAction='false'></u-search>
		<!-- 影视轮播 -->
		<view class='swiper'>
			<u-swiper :list='list1' previousMargin='30' nextMargin='30' circular :autoplay='true' radius='5'
				bgColor='#ffffff' height='200px'></u-swiper>
		</view>
		<!-- 小导航 -->
		<view class='grid'>
			<u-grid :border='false' @click='click' col='4'>
				<u-grid-item v-for='(baseListItem,baseListIndex) in baseList' :key='baseListIndex'>
					<image :src='baseListItem.img' mode='' style='width: 35px;height: 35px;margin-bottom: 8px;'></image>
					<text class='grid-text' style='font-size:14px;'>{{baseListItem.title}}</text>
				</u-grid-item>
			</u-grid>
			<u-toast ref='uToast' />
		</view>
		<!-- 通知 -->
		<view class='notice'>
			<u-notice-bar :text='text1' speed='80' direction='column' url='/pages/componentsB/tag/tag'></u-notice-bar>
		</view>
		<!-- 今日爆款 -->
		<view class='u-demo-block__content'>
			<u-row justify='space-between' customStyle='margin-bottom: 10px'>
				<u-col span='6'>
					<view class='demo-layout bg-purple-light'>今日影视推荐</view>
				</u-col>
				<u-col span='4'>
					<view class='demo-layout bg-purple' style='float: right;margin-right: 10px;font-size: 15px;'>查看更多></view>
				</u-col>
			</u-row>
		</view>
		<!-- 商品 -->
		<My-Shp></My-Shp>
	</view>
</template>
<script>
	import { My-Shp } from '@/page_sub/shp/My-Shp.vue',
	export default {
		components: { My-Shp },
		data() {
			return {
				value1: 0,
				keyword: '',
				list: [{
						text: '首页',
						icon: 'home',
						url: ''
					}, {
						text: '放映厅',
						icon: 'photo',
						url: ''
					}, {
						text: '直播',
						icon: 'play-right',
						url: ''
					}, {
						text: '我的',
						icon: 'account',
						url: ''
					},
				],
				list1: [
					'https://p0.pipi.cn/mmdb/fb7386dd3380fae7aa300b7a6c0a2db67b7f5.jpg?imageView2/1/w/464/h/644',
					'https://p0.pipi.cn/mmdb/fb7386ddb1206d92357a3592d6c13d59752a4.jpg?imageView2/1/w/464/h/644',
					'https://p0.pipi.cn/mmdb/fb7386333393399257b12d2bdf368cb769813.jpg?imageView2/1/w/464/h/644',
				],
				baseList: [{
						img: 'https://img1.imgtp.com/2023/09/27/Bl2QdZsY.png',
						title: '影视推荐'
					}, {
						img: 'https://img1.imgtp.com/2023/09/27/K9m7WM26.png',
						title: '限时抢票'
					}, {
						img: 'https://img1.imgtp.com/2023/09/27/dsaNZ17X.png',
						title: '最受欢迎'
					}, {
						img: 'https://img1.imgtp.com/2023/09/27/sd8FQbQ4.png',
						title: '今天票房'
					},
				],
				text1: [
					'9.28就爱吧！9月28日一起看129分钟的《前任4》吧 !',
					'《坚如磐石》旧案翻起，风雨欲来，各方蛰伏势力蠢蠢欲动',
				]
			};
		},
		onLoad() {},
		methods: {
			click1(item, index) {
				console.log('click1', item);
				this.value1 = index;
			},
		},
	};
</script>
<style>
	/deep/ .u-search.data-v-0a306a29 {
		width: 95vw;
		margin: auto;
	}
	.swiper {
		width: 95vw;
		margin: auto;
		margin-top: 20px;
	}
	.grid {
		margin-top: 30px;
	}
	.notice,.u-demo-block__content {
		width: 95vw;
		margin: auto;
		margin-top: 20px;
	}
	.u-demo-block__content {
		width: 93vw;
		font-weight: 400;
		font-size: 100%;
	}
</styl