create

pages.json

@@ -139,7 +139,17 @@
 						"bounce": "none"
 					}
 				}
+			},
+			{
+				"path": "course/detail",
+				"style": {
+					"navigationBarTitleText": "单科",
+					"app-plus": {
+						"titleNView": false, //禁用原生导航栏 
+						"bounce": "none"
+					}
 				}
+			}
 		],
 		"plugins": {
 			"polyv-player": {

pages/course/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<view>
-		首页
+		选课中心
 	</view>
 </template>
 

pages2/course/detail.vue

@@ -0,0 +1,451 @@
+<template>
+	<view>
+		<view style="position: fixed;width: 100%;z-index: 999;background: #FFFFFF;" id="top">
+			<view class="video_box">
+				<image
+					src="https://cdn.uviewui.com/uview/swiper/3.jpg"
+					style="width: 100%;height: 460rpx;"
+				></image>
+				<image v-if="!startStatus" class="video_play" src="/static/play.png" @click="startVideo"></image>
+			</view>
+			<view >
+				<u-row>
+					<u-col span="10" >
+						<view class="video_t1">施工承发包模式-施工合同与物资采购合...</view>
+					</u-col>
+					<u-col span="2">
+						<view class="video_t1_t">
+							<image src="/static/icon/jy_icon.png" style="width: 40rpx;height: 40rpx;"></image>
+							讲义
+						</view>
+					</u-col>
+				</u-row>
+			</view>
+			<u-line color="#D6D6DB" />
+			<view>
+				<view style="width: 240px;margin: 0 auto;"><u-tabs :list="list" item-width="150" font-size="24" bar-width="80" :current="current" @change="change" active-color="#007AFF"></u-tabs></view>
+			</view>
+			<u-line color="#D6D6DB" />
+			
+		</view>
+		<view class="box">
+			<view class="menuBox" v-for="(item, index) in menuList">
+				<view class="b_title">
+					2Z106000 施工合同管理-模块标题
+				</view>
+				<view style="color: #666666;font-size: 24rpx;margin: 30rpx 0;" v-for="(item1, index1) in item">
+					<u-icon :name="item1.showChildren?'arrow-down':'arrow-right'" color="#666666" size="28" @click="open(item1)"></u-icon>
+					<text @click="open(item1)">2Z106010 施工承发包的模式-2Z106020 施工合同...</text>
+					<view v-for="(item2, index2) in item1.children" v-if="item1.showChildren" >
+						<view style="display: flex;align-items: center;margin: 20rpx 0;">
+							<view class="tag1">录播</view>
+							<view class="t_content1">施工承发包模式-施工合同与物资采购合同</view>
+						</view>
+					</view>
+				</view>
+				
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+export default {
+	data() {
+		return {
+			playbackRate: [0.5, 0.8, 1.0],
+			list: [
+				{
+					name: '目录'
+				},
+				{
+					name: '笔记'
+				},
+				{
+					name: '答疑'
+				}
+			],
+			menuList:[
+				[{
+					showChildren:false,
+					children:[1,2,3]
+				},{
+					showChildren:false,
+					children:[1]
+				},{
+					showChildren:false,
+					children:[1,2]
+				}],[],[]
+			],
+			current:0
+		};
+	},
+	onUnload() {
+		
+	},
+	computed: { ...mapGetters(['userInfo']) },
+	onLoad(option) {
+
+	},
+	onShow() {
+		
+	},
+	methods: {
+		open(item){
+			item.showChildren = !item.showChildren
+		},
+		change(index){
+			this.current = index;
+		}
+	}
+};
+</script>
+
+<style scope>
+	.t_content1{
+		color: #007AFF;
+		margin-left: 10rpx;
+	}
+	.tag1{
+		border: 2rpx solid #007AFF;
+		border-radius: 8rpx;
+		font-size: 20rpx;
+		color: #007AFF;
+		padding: 5rpx;
+	}
+	.b_title{
+		color: #333333;
+		font-size: 30rpx;
+		font-weight: bold;
+	}
+	page {
+			background: #EAEEF1;
+		}
+	.menuBox{
+		width: 100%;
+		background: #FFFFFF;
+		border-radius: 16rpx;
+		padding: 20rpx;
+		margin-bottom: 20rpx;
+	}
+.btnspric {
+	border-top: 1rpx solid #eee;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	height: 108rpx;
+	padding-left: 43rpx;
+	padding-right: 32rpx;
+}
+.btnspric > .lefprL {
+	font-size: 36rpx;
+	color: #0c141f;
+	font-weight: bold;
+}
+.btnspric > .lefprR {
+	padding: 0rpx 24rpx;
+	height: 60rpx;
+	line-height: 60rpx;
+	text-align: center;
+	color: #fff;
+	background: #32467b;
+	border-radius: 24rpx;
+	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
+}
+.yhj,
+.hdyhj {
+	padding: 24rpx 29rpx 24rpx 34rpx;
+}
+.yhj {
+	border-bottom: 16rpx solid #f9f9f9;
+}
+.yhjtit {
+	font-size: 30rpx;
+	color: #0c141f;
+	font-weight: 500;
+	margin-bottom: 14rpx;
+}
+.yhjList {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 14rpx;
+}
+.yhjList > .yhjLefts {
+	display: flex;
+	align-items: center;
+}
+.yhjLefts > .yhl {
+	color: #32467b;
+	font-size: 30rpx;
+	margin-right: 31rpx;
+}
+.yhjLefts > .yhbq {
+	font-size: 24rpx;
+	color: #ff9500;
+	border-radius: 18rpx;
+	background-color: rgba(255, 149, 0, 0.2);
+	border: 2rpx solid #ff9500;
+	height: 38rpx;
+	line-height: 38rpx;
+	padding: 0rpx 16rpx;
+}
+.ts {
+	font-size: 24rpx;
+	color: #999;
+	margin: 14rpx 0rpx;
+	padding-right: 29rpx;
+	padding-left: 34rpx;
+}
+.yh {
+	padding-top: 20rpx;
+}
+.yh > .yhtitle {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding-right: 29rpx;
+	padding-left: 34rpx;
+}
+.priceBxs {
+	display: flex;
+	align-items: center;
+}
+.priceBxs > .pricleft {
+	border-radius: 24rpx;
+	border: 1rpx solid #e91313;
+	background-color: rgba(233, 19, 19, 0.1);
+	padding: 0rpx 18rpx;
+	height: 49rpx;
+	line-height: 49rpx;
+	text-align: center;
+	font-size: 30rpx;
+	font-weight: 500;
+	color: #e91313;
+	margin-right: 13rpx;
+}
+.topBox {
+	padding: 32rpx 32rpx 24rpx;
+	border-bottom: 1rpx solid #eeeeee;
+}
+.topBox > .boldFonstType {
+	font-weight: 500;
+	font-size: 30rpx;
+	margin: 16rpx 0rpx 23rpx;
+}
+.topBox > .firstTopL {
+	display: flex;
+	align-items: center;
+}
+.topBox > .firstTopL > .imageBs {
+	width: 331rpx;
+	height: 160rpx;
+	border-radius: 6rpx;
+	overflow: hidden;
+	margin-right: 8rpx;
+	box-shadow: 0rpx 6rpx 6rpx 0rpx rgba(47, 67, 121, 0.08);
+}
+.topBox > .firstTopL > .imageBs > image {
+	width: 100%;
+	height: 100%;
+}
+.topBox > .firstTopL > .textBs {
+	font-size: 30rpx;
+	font-weight: bold;
+	color: #0c141f;
+}
+.content {
+	padding: 24rpx;
+	text-align: left;
+}
+.catalogBox {
+	display: flex;
+	align-items: center;
+	flex-wrap: nowrap;
+	overflow-x: auto;
+	padding-left: 38rpx;
+	max-height: 305rpx;
+	overflow-y: auto;
+	transition: all 0.4s;
+}
+.catalogBox > .catalogA {
+	min-width: 200rpx;
+	height: 48rpx;
+	line-height: 48rpx;
+	// text-align: center;
+	border: 2rpx solid transparent;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	word-break: break-all;
+	border-radius: 10rpx;
+	background: rgba(22, 119, 255, 0.05);
+	padding-left: 19rpx;
+	box-sizing: border-box;
+	padding-right: 15rpx;
+	margin-right: 16rpx;
+	margin-bottom: 20rpx;
+	margin-top: 15rpx;
+	font-size: 24rpx;
+	color: #666;
+}
+.catalogBox > .activesq {
+	border-color: #1677ff;
+}
+.changeCatalogBox {
+	display: block;
+}
+.catalogBox::-webkit-scrollbar {
+	display: none; /* Chrome Safari */
+}
+.box {
+	position: relative;
+	top: 650rpx;
+	padding-bottom: 88rpx;
+	margin: 20rpx;
+}
+.price_t2 {
+	font-size: 18rpx;
+	font-family: PingFang SC;
+	font-weight: 500;
+	text-decoration: line-through;
+	color: #999999;
+}
+.price_t1 {
+	font-size: 33rpx;
+	font-family: PingFang SC;
+	font-weight: bold;
+	color: #e91313;
+}
+.sc_t {
+	font-size: 22rpx;
+	color: #000000;
+}
+.sc {
+	width: 29rpx;
+	height: 29rpx;
+}
+.buy {
+	width: 138rpx;
+	height: 48rpx;
+	line-height: 48rpx;
+	background: #32467b;
+	border-radius: 10rpx;
+	color: #ffffff;
+	font-size: 28rpx;
+	text-align: center;
+	vertical-align: middle;
+	position: absolute;
+	right: 30rpx;
+}
+.video_body {
+	padding-bottom: 96rpx;
+}
+.footer_tab {
+	position: fixed;
+	bottom: 0;
+	height: 96rpx;
+	width: 100%;
+	background-color: #ffffff;
+}
+.tj_box {
+	width: 50%;
+	display: inline-block;
+	text-align: center;
+	margin: 10rpx 0;
+}
+.teacher_t {
+	font-size: 24rpx;
+	font-family: PingFang SC;
+	font-weight: 400;
+	color: #666666;
+	line-height: 36rpx;
+	margin-left: 15rpx;
+}
+.teacher_img {
+	width: 87rpx;
+	height: 129rpx;
+}
+.t2 {
+	font-size: 24rpx;
+	font-family: PingFang SC;
+	color: #666666;
+	line-height: 36rpx;
+	margin: 15rpx;
+}
+.r_t2 {
+	width: 201rpx;
+	height: 49rpx;
+	background: rgba(22, 119, 255, 0.05);
+	border: 1rpx solid #32467b;
+	border-radius: 16rpx;
+	color: #666666;
+	font-size: 23rpx;
+	text-align: center;
+	display: flex;
+	align-items: center;
+	padding: 5rpx;
+}
+.scroll_box {
+	width: 100%;
+	height: 60rpx;
+	background: #ffffff;
+	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
+	white-space: nowrap;
+	overflow: hidden;
+	margin: 15rpx 0;
+}
+.r_sliper {
+	padding: 0 20rpx;
+}
+.top_line {
+	width: 6rpx;
+	height: 22rpx;
+	background: #32467b;
+	margin-right: 10rpx;
+}
+.video_t2 {
+	font-size: 24rpx;
+	font-family: PingFang SC;
+	font-weight: 500;
+	color: #666666;
+}
+.video_t1 {
+	height: 80rpx;
+	color: #333333;
+	line-height: 80rpx;
+	font-size: 30rpx;
+	font-family: PingFang SC;
+	font-weight: bold;
+	color: #333333;
+	
+	
+}
+.video_t1_t{
+	display: flex;
+	flex-direction: column;
+	height: 80rpx;
+	color: #333333;
+	text-align: center;
+	align-items: center;
+	border-left: solid 1px #D6D6DB;
+}
+.video_play {
+	position: absolute;
+	width: 95rpx;
+	height: 95rpx;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	margin: auto;
+}
+.video_box {
+	position: relative;
+}
+.rotoct {
+	transform: rotate(90deg);
+}
+
+</style>

pages2/wd/class.vue

@@ -1,6 +1,6 @@
 <template>
 	<view style="padding: 30rpx;">
-		<view v-for="(item, index) in list" :key="index" style="margin: 15rpx 0;">
+		<navigator url="/pages2/course/detail" v-for="(item, index) in list" :key="index" style="margin-bottom: 30rpx;">
 			<view class="class_item">
 				<image src="/static/login_bg.jpg" style="height: 316rpx;width: 100%;border-radius: 24rpx;"></image>
 				<view style="color: #333333;font-weight: bold;font-size: 32rpx;">
@@ -40,7 +40,7 @@
 				</view>
 			</view>
 			
-		</view>
+		</navigator>
 	</view>
 </template>
 
@@ -81,7 +81,7 @@
 	}
 	.bottomBox{
 		background: #FFFFFF;
-		width: 90%;
+		width: 94%;
 		border-bottom-left-radius: 24rpx;
 		border-bottom-right-radius: 24rpx;
 		margin: 0 auto;