teaching-uniapp/pages/mineSubscribe/mineSubscribe.vue

<template>
	<view class="content">
		<statusBar :item="navBarData"></statusBar>
		
		<view class="" style="width: 750rpx;height: 60px;">
			<view class="activeTitle">
				<view class="left" @click="phoneLogin" :class="current==0?active:test">
					<text>教研室活动</text>
					<view :class="current==0?yun:test"></view>
				</view>
				<view class="right" @click="accountLogin" :class="current==1?active:test">
					<text>非常规活动</text>
					<view :class="current==1?yun:test"></view>
				</view>
			</view>
		</view>
		
		<swiper class="scroll-view-height" @change="swipeIndex" :current="current" :duration="300">
			<swiper-item>
					<view class="activeClass">
						<view class="classBox" v-for="i in 9" :key="i">
							<view class="classLeft">
								<view class="class_Img">
									<image src="../../static/mine/activeclass.png" mode=""></image>
								</view>
								<view class="class_Text">
									<view class="text_Title">
										<span class="manage">类型</span>
										<span>教研室标题</span>
									</view>
									<view class="text_Intro">
										<span>说明文字教研室简介</span>
									</view>
								</view>
							</view>
							<view class="classright">
								<image src="../../static/mine/Union.png" mode=""></image>
							</view>
						</view>
					</view>
				
			</swiper-item>
			<swiper-item>
				<view class="activeClass">
					<view class="classBox" v-for="i in 7" :key="i">
						<view class="classLeft">
							<view class="class_Img">
								<image src="../../static/mine/myactive.png" mode=""></image>
							</view>
							<view class="class_Text">
								<view class="text_Title">
									<span class="manage">类型</span>
									<span>活动标题</span>
								</view>
								<view class="text_Intro">
									<span>说明文字教研室简介</span>
								</view>
							</view>
						</view>
						<view class="classright">
							<image src="../../static/mine/Union.png" mode=""></image>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navBarData: {
					title: '我的订阅',
					btn: 1
				},
				current:0,//切换
				height:`calc(100vh - this.navheight+'px' - 10px)`,
				navheight:this.navheight,		//导航栏高度
				
				active:'active',  //类名
				test:'test',
				yun:'yun',
			};
		},
		  computed: {
		     dynamicStyle() {
		       return {
		         height: `calc(100vh - 10px)`
		       };
		     }
		   },
		methods: {
			swipeIndex(index){
				this.current=index.detail.current;
			},
			phoneLogin(){
				this.current=0
			},
			accountLogin(){
				this.current=1
			},
		}
	}
</script>

<style lang="scss">
.content{
	.activeTitle{
		position: fixed;
		z-index: 9;
		width: 100%;
		height: 60px;
		background-color: white;
		border-top: 1px solid lightgray;
		display: flex;
		justify-content: center;
		padding: 0 30px;
		font-size: 34rpx;
		.test{
			// height: ;
		}
		.active{
			position: relative;
			font-weight: bold;
			.yun{
				width: 80rpx;
				height: 0rpx;
				position: absolute;
				left: 50%;
				top: 65%;
				transform: translate(-50%,-50%);
				box-shadow: 0px 0px 10px 2px #4a97f2;
			}
		}
		.left{
			width: 50%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.right{
			width: 50%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.scroll-view-height{
		// height: 200vmin;
		// height: 100vh;
		// height: auto;
		.activeClass{
			width: 100%;
			height: auto;
			.classBox{
				display: flex;
				justify-content: space-between;
				padding: 0 47rpx;
				background-color: #fff;
				height: 144rpx;
				.classLeft{
					display: flex;
					height: 100%;
					.class_Img{
						display: flex;
						align-items: center;
						flex-grow: 1;
						image{
							width: 80rpx;
							height: 80rpx;
						}
					}
					.class_Text{
						display: flex;
						justify-content: center;
						flex-grow: 2;
						flex-direction: column;
						.text_Title{
							display: flex;
							margin-bottom: 6px;
							span{
								&:last-child {
									color: #000;
									font-size: 28rpx;
									font-weight: 600;
								}
								
								&.manage {
									border: 1px #00b2b6 solid;
									font-size: 10px;
									display: flex;
									white-space: nowrap;
									justify-content: center;
									align-items: center;
									padding: 1px 6px;
									border-radius: 3px;
									margin-right: 10rpx;
									color: #00b2b6;
									margin-left: 6px;
									font-weight: 600;
								}
							}
						}
						.text_Intro{
							display: flex;
							span{
								font-size: 24rpx;
								font-weight: 400;
								color: rgb(191, 191, 191);
								margin-left: 6px;
							}
						}
					}
				}
				.classright{
					display: flex;
					height: 100%;
					align-items: center;
					image{
						width: 38rpx;
						height: 42rpx;
					}
				}
			}
		}
	}
}
</style>