ソースを参照

课程页面开发完毕

wanghuan 4 年 前
コミット
ed334cb2cc
3 ファイル変更206 行追加155 行削除
  1. 17 9
      pages/packages/packages.js
  2. 38 23
      pages/packages/packages.wxml
  3. 151 123
      pages/packages/packages.wxss

+ 17 - 9
pages/packages/packages.js

@@ -10,17 +10,25 @@ Page({
 			"https://api.zhumi.tech/MiniProgram/courses/step4.png"
 		],
 		coursesText1List: [
-		{"title": "兴趣","context": "通过绿色的闯关式教学游戏,打造适合孩子的趣味课堂,让孩子爱上编程。"},
-		{"title": "自信","context": "循序渐进的展开新知识,让孩子先通过一般难度,建立自信,培养学习热情。"},
-		{"title": "拓展","context": "将学科知识综合运用到教学过程,引导孩子的求知欲望,树立自主学习的意识。"},
-		{"title": "挑战","context": "逐步提升的难度,让孩子专注于挑战,培养独立思考的习惯和面对挫折的勇气。"},
-		{"title": "成就","context": "综合运用所学的知识,不断尝试多样的解决方案,并从中获得巨大的成就感。"}
+			"https://api.zhumi.tech/MiniProgram/courses/coursesText1.png",
+			"https://api.zhumi.tech/MiniProgram/courses/coursesText2.png",
+			"https://api.zhumi.tech/MiniProgram/courses/coursesText3.png",
+			"https://api.zhumi.tech/MiniProgram/courses/coursesText4.png",
+			"https://api.zhumi.tech/MiniProgram/courses/coursesText5.png"
 		],
 		coursesText2List: [
-			{"title": "思考","context": "赋予孩子发散思考的能力,锻炼如何分析问题,并将脑中的创意变成可被执行的创造力。"},
-			{"title": "记忆","context": "运用一些词汇、符号和图像来把一长串枯燥的信息,变成彩色的、容易记忆的、有结构的图。"},
-			{"title": "理解","context": "运用一些词汇、符号和图像来把一长串枯燥的信息,变成彩色的、容易记忆的、有结构的图。"},
-			{"title": "沟通","context": "清晰的思路、高度概括的关键词和完善的结构,让表达更准确,沟通更简单、更高效。"}
+			"https://api.zhumi.tech/MiniProgram/courses/coursestxt1.png",
+			"https://api.zhumi.tech/MiniProgram/courses/coursestxt2.png",
+			"https://api.zhumi.tech/MiniProgram/courses/coursestxt3.png",
+			"https://api.zhumi.tech/MiniProgram/courses/coursestxt4.png"
+		],
+		desctxt6: [
+			"https://api.zhumi.tech/MiniProgram/courses/jiao.png",
+			"https://api.zhumi.tech/MiniProgram/courses/xue.png",
+			"https://api.zhumi.tech/MiniProgram/courses/lian.png",
+			"https://api.zhumi.tech/MiniProgram/courses/wen.png",
+			"https://api.zhumi.tech/MiniProgram/courses/ce.png",
+			"https://api.zhumi.tech/MiniProgram/courses/jing.png"
 			]
 
 	},

+ 38 - 23
pages/packages/packages.wxml

@@ -2,14 +2,11 @@
 	<view class="view-page">
 		<navbar page-name="课程"></navbar>
 		<view class="page-content" style='height:calc(100vh - {{navH}}px)'>
-			<view class = "banner"></view>
-			<view class = "con-title1">用编程赋予孩子国际竞争力</view>
-			<view class = "con-min1">国际化的课程体系</view>
-			<view class = "con-middle">
-				<view class = "txt1" style="white-space:pre-wrap">课程直通信奥(NOIP)</view>
-				<view class = "txt2" style="white-space:pre-wrap">美国CSTAK-12教学标准</view>
-				<view class = "txt3" style="white-space:pre-wrap">4~18岁课程全覆盖</view>
-			</view> 
+			<view class = "banner">
+				<image class = "img_banner" src = "https://api.zhumi.tech/MiniProgram/courses/courses_banner.jpg"></image>
+			</view>
+			<image class = "img_tx" src = "https://api.zhumi.tech/MiniProgram/courses/kctx.png"></image>
+			<image class = "img_jzl" src = "https://api.zhumi.tech/MiniProgram/courses/jzl.png"></image> 
 			<scroll-view scroll-x="true">
 				<view class="coursesWrap">
 					<block wx:for="{{coursesList}}" wx:key="index">
@@ -20,37 +17,55 @@
 					</block>
 				</view>
 			</scroll-view>
-			<view class = "con-title2">趣味化的教学模式</view>
-			<view class = "con-min2">兴趣是孩子最好的老师</view>
-			<view class = "longImg"></view>
-			<view class = "con-title3">CBL挑战式教学法</view>
-			<view class = "con-min3">最好的教学方式 是让学习变的更好玩</view>
+			<image class = "img_qw" src = "https://api.zhumi.tech/MiniProgram/courses/quwei.png"></image>
+			<image class = "img_cbl" src = "https://api.zhumi.tech/MiniProgram/courses/cbl.png"></image>
 			<scroll-view scroll-x="true">
 				<view class="coursesText1">
 					<block wx:for="{{coursesText1List}}" wx:key="index">
 						<view class="courses-text-box">
-							<view class = "courses-text-title">{{coursesText1List[index].title}}</view>
-							<view class = "courses-text-context">{{coursesText1List[index].context}}</view>
-							<view class="viewright-courses" wx:if="{{index == coursesList.length -1}}"></view>
+							<image class="img_coursesText1" src="{{coursesText1List[index]}}" />
 						</view>
+						<view class="viewright-courses" wx:if="{{index == coursesText1List.length -1}}"></view>
 					</block>
 				</view>
 			</scroll-view>
-			<view class = "longImg2"></view>
-			<view class = "con-title4">MMR导图式学习法</view>
-			<view class = "con-min4">良好的思维习惯 能够让孩子受用一生</view>
+			<image class = "img_style" src = "https://api.zhumi.tech/MiniProgram/courses/sd_style.png"></image>
 			<scroll-view scroll-x="true">
 				<view class="coursesText1">
 					<block wx:for="{{coursesText2List}}" wx:key="index">
 						<view class="courses-text-box">
-							<view class = "courses-text-title">{{coursesText2List[index].title}}</view>
-							<view class = "courses-text-context">{{coursesText2List[index].context}}</view>
-							<view class="viewright-courses" wx:if="{{index == coursesList.length -1}}"></view>
+							<image class="img_coursesText1" src="{{coursesText2List[index]}}" />
+						</view>
+						<view class="viewright-courses" wx:if="{{index == coursesText2List.length -1}}"></view>
+					</block>
+				</view>
+			</scroll-view>
+			<image class = "img_standardization" src = "https://api.zhumi.tech/MiniProgram/courses/standardization.png"></image>
+			<image class = "img_designer" src = "https://api.zhumi.tech/MiniProgram/courses/designer.png"></image>
+			<scroll-view scroll-x="true">
+				<view class="coursesDesctxt6">
+					<block wx:for="{{desctxt6}}" wx:key="index">
+						<view class="desctxt6-text-box">
+							<image class="img_desctxt6" src="{{desctxt6[index]}}" />
 						</view>
+						<view class="viewright-courses" wx:if="{{index == desctxt6.length -1}}"></view>
 					</block>
 				</view>
 			</scroll-view>
-			<view class = "endbottomm" ></view>
+			<image class = "img_target" src = "https://api.zhumi.tech/MiniProgram/courses/target.png"></image>
+			<image class = "target_img1" src = "https://api.zhumi.tech/MiniProgram/courses/target_img1.png"></image>
+			<image class = "wljzl_img" src = "https://api.zhumi.tech/MiniProgram/courses/wljzl.png"></image>
+			<image class = "jssc_img" src = "https://api.zhumi.tech/MiniProgram/courses/jssc.png"></image>
+			<image class = "jssc_desc_img" src = "https://api.zhumi.tech/MiniProgram/courses/jssc_desc.png"></image>
+			<image class = "yssz_img" src = "https://api.zhumi.tech/MiniProgram/courses/yssz.png"></image>
+			<image class = "yssz_img_img" src = "https://api.zhumi.tech/MiniProgram/courses/yssz_img.png"></image>
+			<image class = "shaixuan_img" src = "https://api.zhumi.tech/MiniProgram/courses/shaixuan.png"></image>
+			<image class = "peixun_img" src = "https://api.zhumi.tech/MiniProgram/courses/peixun.png"></image>
+			<image class = "kaohe_img" src = "https://api.zhumi.tech/MiniProgram/courses/kaohe.png"></image>
+			<image class = "fwcn_img" src = "https://api.zhumi.tech/MiniProgram/courses/fwcn.png"></image>
+			<image class = "fwcn_con_img" src = "https://api.zhumi.tech/MiniProgram/courses/fwcn_con.png"></image>
+			<view class = "txtend">—— 到底了,赶快联系老师报课程 ——</view>
+			<!-- <view class = "endbottomm" ></view> -->
 			</view>
 		<tabbar _tabBarInd="{{1}}"></tabbar>
 	</view>

+ 151 - 123
pages/packages/packages.wxss

@@ -14,72 +14,18 @@ page {
 	top: 0rpx;
 	background: rgba(196, 196, 196, 0.7);
 }
-.con-title1 {
-	width: 432rpx;
-	height: 36rpx;
-	margin-left: 158rpx;
-	margin-top: 76rpx;
-	font-style: normal;
-	font-weight: bold;
-	font-size: 36rpx;
-	line-height: 36rpx;
-	color: #000000;
-}
-.con-min1 {
-	width: 192rpx;
-	height: 36rpx;
-	margin-left: 280rpx;
-	margin-top: 10rpx;
-	font-style: normal;
-	font-weight: normal;
-	font-size: 24rpx;
-	line-height: 24rpx;
-	color: #000000;
-}
 .con-middle {
 	width: 100%;
 	height: 64rpx;
 	display: flex;
 	margin-top: 144rpx;
 }
-.txt1 {
-	width: 144rpx;
-	height: 64rpx;
-	margin-left: 80rpx;
-	font-style: normal;
-	font-weight: normal;
-	font-size: 24rpx;
-	line-height: 32rpx;
-	text-align: center;
-	color: #1A1A20;
-}
-.txt2 {
-	width: 180rpx;
-	height: 64rpx;
-	margin-left: 68rpx;
-	font-style: normal;
-	font-weight: normal;
-	font-size: 24rpx;
-	line-height: 32rpx;
-	text-align: center;
-	color: #1A1A20;
-}
-.txt3 {
-	width: 128rpx;
-	height: 64rpx;
-	margin-left: 70rpx;
-	font-style: normal;
-	font-weight: normal;
-	font-size: 24rpx;
-	line-height: 32rpx;
-	text-align: center;
-	color: #1A1A20;
-}
+
 .coursesWrap {
 	margin-left: 56rpx;
 	margin-top: 44rpx;
 	width: 638rpx;
-	height: 812rpx;
+	height: 872rpx;
 	margin-right: 24rpx;
 	display: flex; 
   display: -webkit-box;
@@ -87,18 +33,14 @@ page {
 }
 .courses-img {
 	width: 638rpx;
-	height: 812rpx;
+	height: 872rpx;
 	margin-right: 24rpx;
 }
 .courses_Item_img {
 	width: 638rpx;
-	height: 812rpx;
+	height: 840rpx;
 	border-radius: 32rpx;
 }
-.viewright-courses {
-	width: 18rpx; 
-  height: 130rpx; 
-}
 .con-title2 {
 	width: 288rpx;
 	height: 36rpx;
@@ -137,81 +79,167 @@ page {
 	background: #84E793;
 	border-radius: 32rpx 32rpx 0px 0px;
 }
-.con-title3 {
-	width: 290rpx;
-	height: 28rpx;
-	margin-left: 114rpx;
-	margin-top: 42rpx;
-	font-style: normal;
-	font-weight: bold;
-	font-size: 36rpx;
-	line-height: 36rpx;
-	color: #000000;
-}
-.con-min3 {
-	width: 392rpx;
-	height: 24rpx;
-	margin-left: 114rpx;
-	margin-top: 20rpx;
-	font-style: normal;
-	font-weight: normal;
-	font-size: 24rpx;
-	line-height: 24rpx;
-	color: #000000;
-}
+
 .coursesText1 {
-	margin-left: 82rpx;
-	margin-top: 104rpx;
+	margin-left: 56rpx;
+	margin-top: 48rpx;
 	width: 270rpx;
-	height: 306rpx;
-	margin-right: 82rpx;
+	height: 420rpx;
+	margin-right: 56rpx;
 	display: flex; 
   display: -webkit-box;
   flex-direction: column;
 }
 .courses-text-box {
 	width: 270rpx;
-	height: 212rpx;
+	height: 420rpx;
 	margin-right: 24rpx;
 }
-.courses-text-title {
-	width: 270rpx;
-	height: 28rpx;
-	font-style: normal;
-	font-weight: bold;
-	font-size: 36rpx;
-	line-height: 28rpx;
-	color: #000000;
+.img_banner {
+	width: 100%;
+	height: 400rpx;
 }
-.courses-text-context {
-	margin-top: 24rpx;
-	width: 270rpx;
+.img_tx {
+	margin-top: 32rpx;
+	width: 100%;
 	height: 160rpx;
-	font-style: normal;
-	font-weight: normal;
-	font-size: 24rpx;
-	line-height: 40rpx;
-	color: #000000;
 }
-.con-title4 {
-	width: 320rpx;
-	height: 28rpx;
-	margin-left: 114rpx;
-	margin-top: 42rpx;
-	font-style: normal;
-	font-weight: bold;
-	font-size: 36rpx;
-	line-height: 36rpx;
-	color: #000000;
+.img_jzl {
+	width: 590rpx;
+	height: 188rpx;
+	margin-top: 64rpx;
+	margin-left: 80rpx;
+}
+.img_qw {
+	width: 100%;
+	height: 160rpx;
+	margin-top: 64rpx;
+}
+.img_cbl {
+	margin-top: 64rpx;
+	width: 686rpx;
+	height: 426rpx;	
+	margin-left: 32rpx;
+}
+.img_coursesText1 {
+	width: 292rpx;
+	height: 384rpx;
+}
+.img_style {
+	margin-top: 96rpx;
+	width: 682rpx;
+	height: 428rpx;
+	margin-left: 34rpx;
+}
+.img_standardization {
+	width: 100%;
+	height: 160rpx;
+	margin-top: 64rpx;
+}
+.img_designer {
+	width: 686rpx;
+	height: 320rpx;
+	margin-top: 64rpx;
+	margin-left: 32rpx;
+}
+.img_desctxt6 {
+	width: 417rpx;
+	height: 340rpx;
+}
+.desctxt6-text-box {
+	width: 417rpx;
+	height: 340rpx;
+	margin-right: 16rpx;
 }
-.con-min4 {
-	width: 392rpx;
-	height: 24rpx;
-	margin-left: 114rpx;
-	margin-top: 18rpx;
+.coursesDesctxt6 {
+	margin-left: 56rpx;
+	margin-top: 38rpx;
+	width: 417rpx;
+	height: 360rpx;
+	margin-right: 56rpx;
+	display: flex; 
+  display: -webkit-box;
+  flex-direction: column;
+}
+.img_target {
+	width: 100%;
+	height: 160rpx;
+	margin-top: 64rpx;
+}
+.target_img1 {
+	width: 648rpx;
+	height: 454rpx;
+	margin-top: 64rpx;
+	margin-left: 50rpx;
+}
+.wljzl_img {
+	margin-top: -40rpx;
+	width: 646rpx;
+	height: 566rpx;
+	margin-left: 52rpx;
+}
+.jssc_img {
+	width: 100%;
+	height: 160rpx;
+	margin-top: 64rpx;
+}
+.jssc_desc_img {
+	width: 638rpx;
+	height: 422rpx;	
+	margin-top: 64rpx;
+	margin-left:56rpx;
+}
+.yssz_img {
+	width: 100%;
+	height: 160rpx;
+	margin-top: 64rpx;
+}
+.yssz_img_img {
+	width: 686rpx;
+	height: 418rpx;
+	margin-top: 64rpx;
+	margin-left: 32rpx;
+}
+.shaixuan_img {
+	width: 230rpx;
+	height: 268rpx;
+	margin-top: 64rpx;
+	margin-left: 22rpx;
+}
+.peixun_img {
+	width: 230rpx;
+	height: 268rpx;
+	margin-top: 64rpx;
+	margin-left: 10rpx;
+}
+.kaohe_img {
+	width: 230rpx;
+	height: 268rpx;
+	margin-top: 64rpx;
+	margin-left: 10rpx;
+}
+.fwcn_img {
+	width: 100%;
+	height: 160rpx;
+	margin-top: 64rpx;
+}
+.fwcn_con_img {
+	width: 564rpx;
+	height: 244rpx;
+	margin-top:32rpx;
+	margin-left: 82rpx;
+}
+.txtend {
+	margin-top: 64rpx;
+	margin-left: 198rpx;
+	width: 354rpx;
+	height: 20rpx;
 	font-style: normal;
 	font-weight: normal;
-	font-size: 24rpx;
-	line-height: 24rpx;
-	color: #000000;
+	font-size: 20rpx;
+	line-height: 20rpx;
+	display: flex;
+	align-items: center;
+	text-align: center;
+	color: #9999A5;
 }