besiweb/pages/index/index.vue

<template>
	<view>
		<view class="sticky-nav">
			<view class="nav-bar">
				<view class="left-nav">
					<ul>
						<li v-for="(item,index) in navList" :class="{active:!(index-menuIndex)}">
							<view v-if="item.url">
								<navigator :url="item.url" v-text="item.name"></navigator>
							</view>
							<view v-else @click="menuShow(index)">
								<text v-text="item.name"></text>
							</view>
						</li>
					</ul>
				</view>
				<view class="right-nav">
					<image src="../../static/index/search_white_blod_big_icon.png" class="index_search"></image>
					<image src="../../static/index/notice_message_white_icon.png" class="index_info"></image>
				</view>
			</view>
		</view>
		<view>
			<view v-if="menuIndex===0" class="left-nav-title-box">
				<view class="left-nav-titles">
					<view v-for="(item,index) in leftNavList" :key="index">
						<view @click="navigate(item)">
							<image :src="item.imgurl" class="left-nav-title-img"></image>
							<text class="left-nav-title-content">{{item.content}}</text>
						</view>
					</view>
				</view>
				<view class="uni-margin-wrap">
					<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
						:interval="interval" :duration="duration" indicator-active-color="#FF713F"
						indicator-color="transparent">
						<swiper-item v-for="(item,index) in indexSwiperImgs">
							<view class="swiper-item">
								<image :src="item" style="width: 720rpx;height:320rpx;border-radius: 10rpx;"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>

				<view class="left-nav-center">
					<view class="left-nav-btns">
						<image src="../../static/index/index_jisi_icon.png" class="jisi-img">
						</image>
						<view class="left-nav-btnBox">
							<view class="left-nav-btn left-nav-btn1">
								<image src="../../static/index/peifu_icon.png" class="small-btn-img">
								</image>
								<text class="left-nav-btn-content">培福</text>
							</view>
							<view class="left-nav-btn">
								<image src="../../static/index/xixing_icon.png" class="small-btn-img">
								</image>
								<text class="left-nav-btn-content">西游</text>
							</view>
						</view>
					</view>
					<view>
						<view class="nav-left-date">
							<text class="nav-left-oldDate">{{oldDate}}</text>
							<text class="nav-left-today">{{today}}</text>
							<text class="nav-left-lunarDate">{{lunarDate}}</text>
						</view>
						<view class="foli-box">
							<text class="nav-left-suit">宜</text><text
								class="nav-left-thing">{{suit.substr(0,9)+"..."}}</text>
							<text class="nav-left-aviod">忌</text><text
								class="nav-left-thing">{{avoid.substr(0,9)+"..."}}</text>
							<image src="../../static/index/foli_jiaobiao.png" class="foli"></image>
						</view>
					</view>
					<view class="ad-box">
						<swiper class="adSwiper" circular :indicator-dots="adIndicatorDots" vertical="true"
							:autoplay="adAutoplay" :interval="adInterval" :duration="adDuration">
							<swiper-item v-for="(item,index) in adSwiperImgs">
								<view>
									<image :src="item" style="width: 720rpx;height:120rpx;border-radius: 10rpx;">
									</image>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
				<view class="left-nav-bottom">
					<view class="left-nav-headline-box">
						<text class="left-nav-headline">头条</text>
					</view>
					<view class="news-list-box" v-for="(item,index) in newsList">
						<view class="news-item">
							<navigator :url="'/pages/headlines/detail?id='+item.id">
								<view class="news-list-item">
									<view class="news-list-item-title">
										<text>{{item.title}}</text>
									</view>
									<view class="news-list-item-tag">
										<text class="item-tag">{{item.tag}}</text>
										<text>{{item.publish_at}}</text>
									</view>
								</view>
								<image :src="item.thumb" style="width: 215rpx;height: 192rpx;display: inline-block;
									vertical-align: top;"></image>
							</navigator>
						</view>
					</view>
				</view>
			</view>
			<view v-else-if="menuIndex===1">
				<view>
					修行
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				menuIndex: 0,
				navList: [
					{name: '祈福',url: ''},
					{name: '修行', url: ''},
					{name: '商城', url: '/pages/shop/index'}
				],
				activeColor: '#007aff',
				styleType: 'text',
				leftNavList: [{
						imgurl: "../../static/index/home_icon_wish.png",
						content: "祈福",
						page: '../index/qifu/index'
					},
					{
						imgurl: "../../static/index/home_icon_excess.png",
						content: "超度",
						page: '../index/chaodu/index'
					},
					{
						imgurl: "../../static/index/home_icon_release.png",
						content: "放生",
						page: '../index/fangsheng/index'
					},
					{
						imgurl: "../../static/index/home_icon_light.png",
						content: "供灯",
						page: '../index/gongdeng/index'
						
					},
					{
						imgurl: "../../static/index/home_icon_answer.png",
						content: "答疑",
						page: '../index/answer/index'
					}
				],
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				adIndicatorDots: false,
				autoplay: true,
				adAutoplay: true,
				interval: 2000,
				adInterval: 4000,
				duration: 1000,
				adDuration: 500,
				indexSwiperImgs: [
					"../../static/index/seat_double.png",
					"../../static/index/seat_sat.png",
					"../../static/index/seat_single.png"
				],
				oldDate: "辛丑年壬辰月丙午日",
				today: "04月28日",
				lunarDate: "十七",
				suit: "出行 嫁娶 会亲友 开市",
				avoid: "入宅 作灶 安门 修造",
				adSwiperImgs: [
					"../../static/index/ad1.jpg",
					"../../static/index/ad2.jpg",
					"../../static/index/ad3.jpg"
				],
				newsList: [{
						id: 1,
						title: "宽运法师对话李家杰博士(下),如何做到自在生命",
						tag: "头条",
						publish_at: "2021-04-27 17:45:25",
						thumb: "../../static/index/news-img.png"
					},
					{
						id: 2,
						title: "宽运法师对话李家杰博士(下),如何做到自在生命",
						tag: "头条",
						publish_at: "2021-04-27 17:45:25",
						thumb: "../../static/index/news-img.png"
					}
				],
				form: {
					content: '',
					checked: false
				},
			}
		},
		onLoad() {
			this.$request.api('/api/test/',{}).then(res=> {
				console.log(res)
			}).catch(parmas => {
　　　　　　		console.log(432142)
　　			})

			
		},
		methods: {
			menuShow(index) {
				this.menuIndex = index;
				console.log(index)
			},
			navigate(item) {
				if(item.page){
					uni.navigateTo({
						url: item.page
					});
				}
				
			}
		}
	}
</script>
<style>
	page {
		background-color: rgb(247, 246, 242);
	}
</style>
<style lang="less" scoped>
	.sticky-nav{
		position: sticky;
		width: 100%;
		top:0;
		z-index: 1;
	}
	.nav-bar {
		padding-top: 70rpx;
		padding-bottom: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: linear-gradient(rgb(255, 152, 101), rgb(255, 122, 85));
		height: 125rpx;
	}

	.left-nav {
		ul {
			padding: 0;
			margin-left: 20rpx;
		}

		ul li {
			list-style: none;
			display: inline-block;
			height: 30px;
			line-height: 30px;
			width: 50px;
			text-align: center;
			color: rgb(255, 214, 205);
			font-size: 18px;
		}

		.active {
			color: #fff;
			font-size: 22px;
			border-bottom: 2px solid #fff;
		}
	}

	.content-text {
		font-size: 20px;
		color: #333;
		margin-right: 5rpx;
	}

	.right-nav {
		margin-right: 15rpx;

		.index_search {
			width: 45rpx;
			height: 45rpx;
			margin-right: 15rpx;
		}

		.index_info {
			width: 45rpx;
			height: 45rpx;
		}
	}

	.left-nav-title-box {
		background: linear-gradient(rgb(255, 152, 101), rgb(255, 122, 85));
		border-radius: 0 0 180rpx 180rpx;
		height: 280rpx;
		padding: 30rpx 0;

		.left-nav-titles {
			padding-bottom: 30rpx;
			display: flex;
			justify-content: space-around;
			flex-direction: row;
			flex: 1 1 auto;

			.left-nav-title-img {
				width: 105rpx;
				height: 105rpx;
			}

			.left-nav-title-content {
				display: block;
				text-align: center;
				color: white;
			}
		}

		.left-nav-center {
			margin-top: 15rpx;
			background-color: #fff;
			padding: 0 18rpx;

			.left-nav-btns {
				display: flex;
				flex-direction: row;
				padding: 25rpx 0;

				.jisi-img {
					width: 340rpx;
					height: 240rpx;
				}

				.left-nav-btnBox {
					padding-left: 32rpx;

					.left-nav-btn {
						display: flex;
						justify-content: left;
						width: 348rpx;
						border: 1px solid rgb(247, 246, 242);
						border-radius: 10rpx;
						align-items: center;

						.small-btn-img {
							width: 100rpx;
							height: 100rpx;
							padding-right: 50rpx;
						}

						.left-nav-btn-content {
							font-size: 40rpx;
						}
					}

					.left-nav-btn1 {
						margin-bottom: 25rpx;
					}
				}
			}
		}

		.nav-left-oldDate {
			font-size: 42rpx;
			margin-right: 10rpx;
		}

		.nav-left-today {
			font-size: 32rpx;
			margin-right: 90rpx;
			color: rgb(170, 170, 170);
		}

		.nav-left-lunarDate {
			font-size: 40rpx;
			color: rgb(204, 173, 82);
		}

		.foli-box {
			position: relative;
			padding-bottom: 25rpx;

			.nav-left-suit {
				color: rgb(0, 128, 0);
				font-size: 40rpx;
				margin-right: 15rpx;
			}

			.nav-left-thing {
				margin-right: 30rpx;
				color: rgb(170, 170, 170);
				text-overflow: ellipsis;
				overflow: hidden;
			}

			.nav-left-aviod {
				color: rgb(255, 0, 0);
				font-size: 40rpx;
				margin-right: 15rpx;
			}

			.foli {
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				bottom: 17rpx;
				right: 0;
			}
		}

		.ad-box {
			padding-bottom: 25rpx;

			.adSwiper {
				height: 57px;
			}
		}

		.left-nav-bottom {
			background-color: #fff;
			margin-top: 30rpx;
			padding-bottom: 100rpx;

			.news-list-box {
				display: flex;
				align-items: center;
			}

			.left-nav-headline-box {
				font-size: 45rpx;
				padding: 15rpx 0 15rpx 15rpx;
			}

			.news-item {
				padding: 16rpx 0;
			}

			.news-list-item {
				display: inline-block;
				padding-right: 10rpx;

				.news-list-item-title {
					width: 495rpx;
					height: 133rpx;
					word-wrap: break-word;
					font-size: 40rpx;
					padding-left: 20rpx;
					display: table-cell;
					vertical-align: top;
				}

				.news-list-item-tag {
					height: 59rpx;
					line-height: 59rpx;
					padding-left: 20rpx;
					color: rgb(170, 170, 170);

					.item-tag {
						padding-right: 20rpx;
					}
				}
			}
		}
	}

	.uni-margin-wrap {
		// width: 690rpx;
		width: 100%;

		.swiper {
			height: 320rpx;

			.swiper-item {
				display: block;
				height: 320rpx;
				line-height: 320rpx;
				text-align: center;
			}

			/deep/.uni-swiper-dot {
				border: 1px solid #FF713F !important;
			}
		}
	}
</style>