阶段性提交

pages/course/outline.vue

@@ -0,0 +1,183 @@
+<template>
+	<view>
+		<!-- 公共组件-每个页面必须引入 -->
+		<public-module></public-module>
+		<z-nav-bar title="课程大纲"></z-nav-bar>
+		<view class="container flexbox">
+
+			<view class="box">
+				<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="aspectFill"></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>
+		<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();
+		},
+		onPullDownRefresh() {
+			uni.stopPullDownRefresh()
+		},
+		components: {
+			// musicPlay
+		},
+		//方法
+		methods: {
+			itemClick(op){
+				var path = ''
+				switch(op){
+					case "jiage":
+						path = '/'
+						break
+					case "shuoming":
+						path = '/pages/course/illustrate';
+						break;
+					case "jianjie":
+						path = '/pages/course/outline';
+						break;
+				}
+				uni.navigateTo({
+					url:path
+				})
+			},
+		},
+	};
+</script>
+<style lang="scss" scoped>
+	@import '@/style/mixin.scss';
+
+	.flexbox {
+		display: flex;
+	}
+
+	.container {
+		align-items: center;
+		min-height: calc(100vh - 270rpx);
+		@include pleft_right(10px);
+		background: url(@/static/pageBg.jpg) center no-repeat;
+		background-size: cover;
+
+	}
+
+	.box {
+		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: 150rpx;
+					height: 150rpx;
+				}
+			}
+		}
+
+		.logo {
+			// width: 100%;
+		}
+
+		.type {
+
+			// position: absolute; right: 0;
+			image {
+				width: 50rpx;
+				height: 60rpx;
+			}
+		}
+
+		text { padding-left: 20rpx;
+			width: 100%;
+			font-size: 40rpx;
+			color: #fff;
+			line-height: 150rpx;
+			text-align: right;
+			padding-right: 20rpx;
+		}
+	}
+
+	.title {
+		font-size: 32rpx;
+		font-weight: bold;
+		display: block;
+		text-align: center;
+	}
+
+	.content {
+		font-size: 26rpx;
+		line-height: 48rpx;
+		margin-top: 10rpx;
+	}
+</style>