PixelAI-mobile/pages/pc_web/index/index.vue

<template>
	<view>
		<el-container class="pc-container">
		  <view class="pc-header">
			<Header :isLogin="isLogin" />
		  </view>
		  <view style="width: 100%;height: 100rpx;"></view>
		  <view class="pc-main">
		  	<component ref="pageRef" :is="refs[current]" />
		  </view>
		</el-container>
		<Loading :show="loading" />
		<u-back-top class="back-top" :scrollTop="scrollTop" zIndex="100" :iconStyle="{ color: '#fff', fontSize: '50rpx' }"
		:customStyle="{background: 'linear-gradient(180deg, #96fe11 0%, #f0fdbf 100%)',
		filter: 'opacity(0.96)', width: '120rpx', height: '120rpx'}" />
	</view>
</template>

<script>
import Header from './components/header.vue';
import Home from '@/pages/pc_web/home/home.vue';
export default {
	components:{
		Header, Home
	},
	data(){
		return{
			// 当前页码下标
			current: uni.getStorageSync('pc_current')||0,
			// refs组件列表
			refs: ['home'],
			// 加载
			loading: false,
			// 滚动顶部
			scrollTop: 0,
		}
	},
	computed: {
		// 登录状态
		isLogin(){
			return this.$store.state.vuex_token;
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onLoad() {
	},
}
</script>

<style scoped lang="scss">
.pc-container{
	display: flex;
	flex-direction: column;
}
.pc-header{
	width: 100%;
	height: 120rpx;
	z-index: 90;
	box-shadow: 0 5rpx 10rpx 0 #dcdae4;
	position: fixed;
}
.pc-main{
	background-color: #edecf1;
}
.back-top{
	cursor: pointer;
	&:hover{
		box-shadow: 0 0 20rpx #d8fc92;
	}
}
</style>