<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<z-nav-bar title="课程大纲"></z-nav-bar>
		<view class="container">
			<view class="imagebg">
				
			</view>
			<view class="ss" >
			<view class="box">
				<view class="item flexbox" @click="itemClick('chaov')">
				
					<view class="logo">
						<image class="" src="@/static/logo.png" mode="aspectFill"></image>
					</view>
					<view class="flexbox tt">
						<view class="type">
							<image src="/static/chaovIcon.png" mode="widthFix"></image>
						</view>
						<text style="letter-spacing: 1.2px;">超V介绍 > </text>
					</view>
				
				</view>
				<view class="item flexbox" @click="itemClick('jiage')">

					<view class="logo">
						<image class="" src="@/static/logo.png" mode="aspectFill"></image>
					</view>
					<view class="flexbox tt">
						<view class="type">
							<image src="/static/priceIcon.png" mode="widthFix"></image>
						</view>
						<text>课程价格 > </text>
					</view>

				</view>
				<view class="item flexbox" @click="itemClick('shuoming')">
					<view class="logo">
						<image class="" src="@/static/logo.png" mode="aspectFill"></image>
					</view>
					<view class="flexbox tt">
						<view class="type">
							<image src="/static/shuomingIcon.png" mode="widthFix"></image>
						</view>
						<text>课程说明 > </text>
					</view>
				</view>
				<view class="item flexbox" @click="itemClick('jianjie')">
					<view class="logo">
						<image class="" src="@/static/logo.png" mode="aspectFill"></image>
					</view>
					<view class="flexbox tt">
						<view class="type">
							<image src="/static/jianjieIcon.png" mode="widthFix"></image>
						</view>
						<text>平台简介 > </text>
					</view>
				</view>
			</view></view>
		</view>
		<z-navigation></z-navigation>
		<!-- <music-play :playData="playData"></music-play> -->
	</view>
</template>

<script>
	// import musicPlay from '@/components/music.vue'
	import $http from '@/config/requestConfig.js';
	var clear;
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				playData: {},
			};
		},
		//第一次加载
		onLoad(e) {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			// console.log(e, '------')
		},
		computed: {
			...mapState(['userInfo'])
		},
		//页面显示
		onShow() {
			// 隐藏原生的tabbar
			uni.hideTabBar();
		},
	components: {
			// musicPlay
		},
		//方法
		methods: {
			itemClick(op){
				var path = ''
				switch(op){
					case "chaov":
						path = '/pages/course/superVip'
						break
					case "jiage":
						path = '/pages/course/coursePrice'
						break
					case "shuoming":
						path = '/pages/course/courseSet';
						break;
					case "jianjie":
						path = '/pages/course/platformInfo';
						break;
				}
				uni.navigateTo({
					url:path
				})
			},
		},
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.flexbox {
		display: flex;
	}
	.imagebg{
		width: 100%;
		
		background:#fff url(@/static/pageBg.jpg) top no-repeat;
		background-size:cover;
		height:45vh
	}
	.container {	
		min-height: calc(100vh - 270rpx);		
		align-items: end !important;
		position: relative; background-color: #fff;

	}
	.ss{@include pleft_right(10px);	}

	.box { overflow: hidden; 
	// position: absolute; left: 20rpx; bottom: 0rpx;
		width: 100%;
		justify-content: space-between;
		
		.item {
			width: 100%;
			justify-content: space-between;
			// background-image: linear-gradient(-90deg, #e4edff 0%, #fff 100%);
			background: url(@/static/bg2.jpg) center no-repeat;
			border-radius: 20rpx;
			margin: 20rpx 0;
			position: relative;
			padding: 16rpx;
			// @include mshadow(10px, 1);
			.tt{
				align-items: center;
			}
			.logo {
				
				image {
					width: 100rpx;
					height: 100rpx;
				}
			}
		}

		.logo {
			// width: 100%;
		}

		.type {

			// position: absolute; right: 0;
			image {
				width: 40rpx;
				height: 50rpx;
			}
		}

		text { padding-left: 20rpx;
			width: 100%;
			font-size: 40rpx;
			color: #fff;
			line-height: 100rpx;
			text-align: right;
			padding-right: 20rpx;
		}
	}

	.title {
		font-size: 30rpx;
		font-weight: bold;
		display: block;
		text-align: center;
	}

	.content {
		font-size: 26rpx;
		line-height: 48rpx;
		margin-top: 10rpx;
	}
</style>