首页修改

pages/index/index.js

@@ -9,16 +9,29 @@ Page({
 		address: undefined,
 		arr: [],
 		mktarr: [],
-		mktList: [
-			"https://api.zhumi.tech/MiniProgram/mkt/mkt1.png",
-			"https://api.zhumi.tech/MiniProgram/mkt/mkt2.png",
-			"https://api.zhumi.tech/MiniProgram/mkt/mkt3.png",
-			"https://api.zhumi.tech/MiniProgram/mkt/mkt4.png",
-			"https://api.zhumi.tech/MiniProgram/mkt/mkt5.png",
-			"https://api.zhumi.tech/MiniProgram/mkt/mkt6.png",
-			"https://api.zhumi.tech/MiniProgram/mkt/mkt7.png"
+		mktList_m: [
+			"https://api.zhumi.tech/MiniProgram/mkt/m1.jpg",
+			"https://api.zhumi.tech/MiniProgram/mkt/m2.jpg",
+			"https://api.zhumi.tech/MiniProgram/mkt/m3.jpg",
+			"https://api.zhumi.tech/MiniProgram/mkt/m4.jpg",
+			"https://api.zhumi.tech/MiniProgram/mkt/m5.jpg",
+			"https://api.zhumi.tech/MiniProgram/mkt/m6.jpg",
+			"https://api.zhumi.tech/MiniProgram/mkt/m7.jpg",
+			"https://api.zhumi.tech/MiniProgram/mkt/m8.jpg",
+			"https://api.zhumi.tech/MiniProgram/mkt/m9.jpg"
 		],
-		mktImgage: "https://api.zhumi.tech/MiniProgram/mkt/mkt1.png",
+		mktList_l: [
+			"https://api.zhumi.tech/MiniProgram/mkt/l1.jpg",
+			"https://api.zhumi.tech/MiniProgram/mkt/l2.jpg",
+			"https://api.zhumi.tech/MiniProgram/mkt/l3.jpg",
+			"https://api.zhumi.tech/MiniProgram/mkt/l4.jpg",
+			"https://api.zhumi.tech/MiniProgram/mkt/l5.jpg",
+			"https://api.zhumi.tech/MiniProgram/mkt/l6.jpg",
+			"https://api.zhumi.tech/MiniProgram/mkt/l7.jpg",
+			"https://api.zhumi.tech/MiniProgram/mkt/l8.jpg",
+			"https://api.zhumi.tech/MiniProgram/mkt/l9.jpg"
+		],
+		mktImgage: "https://api.zhumi.tech/MiniProgram/mkt/l1.jpg",
 	},
 	onLoad: function(options) {
 		this.init(options)

pages/index/index.wxml

@@ -15,39 +15,32 @@
 				<view class="colum-hot">
 					<view class="hot-box-temp2"></view>
 					<view class="hot-box">
-						<view class="hot-title-temp"></view>
-						<view class="hot-title">一级标题</view>
-						<view class="hot-cont-temp"></view>
-						<view class="hot-cont">十级四阶段</view>
-					</view>
+						<image src="https://api.zhumi.tech/MiniProgram/image/index_m_left.png" class = "index_middle_l"></image>
+					</view>	
 					<view class="hot-box-temp"></view>
 					<view class="hot-box">
-						<view class="hot-title-temp"></view>
-						<view class="hot-title">一级标题</view>
-						<view class="hot-cont-temp"></view>
-						<view class="hot-cont">十级四阶段</view>
+						<image src="https://api.zhumi.tech/MiniProgram/image/index_m_right.png" class = "index_middle_l"></image>
 					</view>
 				</view>
 				<view class = "cont">
 					<view class="tips-box">
-						<view class="tips-icon">111</view>
 						<view class="tips-cont">双11XXXXXXXXXXXXXX</view>
 					</view>
 					<image src = "https://api.zhumi.tech/MiniProgram/image/recommend.png" class="lang-img"/>
-					<view class = "hot-middle"></view>
+					<image src = "https://api.zhumi.tech/MiniProgram/image/hd_banner.jpg" class="hd_banner"/>
 					<view class="hot-title">优秀师资</view>
-				<scroll-view scroll-x="true">
+				<scroll-view scroll-x="true" style="height: 550rpx;">
 					<view class="uploadWrap">
 						<block wx:for="{{mktarr}}" wx:key="index">
-							<view class="upload_Item" data-name='{{mktarr[index].mi_mktname}}'
-								data-address='{{mktarr[index].mi_mktaddress}}' data-latitude='{{mktarr[index].mi_latitude}}'
-								data-longitude='{{mktarr[index].mi_longitude}}'>
+							<view class="upload_Item" >
 								<image class="upload_Item_img" src="{{mktarr[index].mi_mkturl}}"></image>
-								<view class='mktinfoBox'>
-									<view>
-										<view class="mktname">{{mktarr[index].mi_mktname}}</view>
+								<view class = "teache_con">
+									<view class = "teahcer_name_box">
+										<view class = "teacher_name">{{mktarr[index].mi_mktname}}</view>
+										<view class = "teacher_name_con">注释文字</view>
 									</view>
-									<view class="mktadd">{{mktarr[index].mi_mktaddress}}</view>
+									<view class = "t_conntext">注释文字第二行</view>
+									<view class = "t_conntext">注释文字第二行</view>
 								</view>
 							</view>
 							<view class="viewright" wx:if="{{index == mktarr.length -1}}"></view>
@@ -59,31 +52,26 @@
 				<view class="campus-box">
 					<image src="{{mktImgage}}" class = "campus-image"></image>
 				</view>
-				<view class="campus_Item" data-name='{{mktarr[0].mi_mktname}}' data-address='{{mktarr[0].mi_mktaddress}}'
-					data-latitude='{{mktarr[0].mi_latitude}}' data-longitude='{{mktarr[0].mi_longitude}}'>
+				<view class="campus_Item" >
 					<view class="mkt-img-box">
 						<scroll-view scroll-x="true">
 							<view class="mktWrap">
-								<block wx:for="{{mktList}}" wx:key="index">
+								<block wx:for="{{mktList_m}}" wx:key="index">
 									<view class="mkt-img">
-										<image class="campus_Item_img" src="{{mktList[index]}}" bindtap="mktImageChange" data-path='{{mktList[index]}}'></image>
+										<image class="campus_Item_img" src="{{mktList_m[index]}}" bindtap="mktImageChange" data-path='{{mktList_l[index]}}'></image>
 									</view>
-									<view class="viewright-mkt" wx:if="{{index == mktList.length -1}}"></view>
+									<view class="viewright-mkt" wx:if="{{index == mktList_m.length -1}}"></view>
 								</block>
 							</view>
 						</scroll-view>
 					</view>
 				</view>
 				<view class = "mkt-desc-box">
-					<view class="hot-title-temp"></view>
-						<view class="hot-title">科乐纬·少儿编程(大都会校区)</view>
-						<view class="hot-title-temp"></view>
-						<view class="hot-mkt">电话：XXXXXXXXX-XXXXXX</view>
-						<view class="hot-mkt-temp"></view>
-						<view class="hot-mkt">地址: 辽宁省沈阳市铁西区XXXXXXX</view>
-						<view class="hot-title-temp"></view>
-					</view>
-					<view class = "endbottomm" ></view>
+					<view class="hot-title">米粒编程（大都汇校区）</view>
+					<view class="hot-mkt">电话：XXXXXXXXX-XXXXXX</view>
+					<view class="hot-mkt">地址: 辽宁省沈阳市铁西区XXXXXXX</view>
+				</view>
+				<view class = "endbottomm" ></view>
 				</view>
 			</view>
 			<tabbar _tabBarInd="{{0}}"></tabbar>

pages/index/index.wxss

@@ -8,6 +8,7 @@ page {
 	box-sizing: border-box;
 	overflow: hidden;
 	background-color: #F2F2F6;
+	line-height: 80rpx;
 }
 .swiper {
 	width: 100%;
@@ -26,6 +27,14 @@ page {
 	background: #F2F2F6;
 	border-radius: 36rpx 36rpx 0px 0px;
 }
+.index_middle_l {
+	width: 332rpx;
+	height: 208rpx;
+}
+.index_middle_r {
+	width: 332rpx;
+	height: 200rpx;
+}
 .box_logo{
 	position: absolute;
 	width: 100%;
@@ -57,23 +66,18 @@ page {
 .colum-hot {
 	position: absolute;
 	height: 208rpx;
-	margin: 0 32rpx 0 0rpx;
-	border-radius: 36rpx 36rpx 0rpx 0rpx;
 	top: 144rpx;
 	display: flex;
 }
-.hot-box-temp {
-	width: 24rpx;
-}
 .hot-box-temp2 {
 	width: 32rpx;
 }
+.hot-box-temp {
+	width: 24rpx;
+}
 .hot-box {
 	height: 208rpx;
 	width: 332rpx;
-	border-radius: 32rpx;
-	background-color: white;
-	box-shadow:0rpx 9rpx 18rpx 0rpx rgba(229,229,234,0.56);
 }
 .hot-title-box {
 	top:1440rpx;
@@ -99,15 +103,16 @@ page {
 	color: #ff6106;
 } 
 .tips-box {
-	margin-top: 16rpx;
+	margin-top: 0rpx;
 	position: absolute;
-	margin-left: 32rpx;
-	height: 72rpx;
-	width: 686rpx;
-	border-radius: 32rpx;
-	background-color: white;
-	box-shadow:0rpx 9rpx 18rpx 0rpx rgba(229,229,234,0.56);
-	display: flex;
+	margin-left: 0rpx;
+	height: 123rpx;
+	width: 737rpx;
+	background-image: url("https://api.zhumi.tech/MiniProgram/image/tips_bg.png");
+	background-size: cover;
+	 -webkit-background-size: cover;
+	-o-background-size: cover;
+	background-position: center 0;
 }
 
 .tips-icon {
@@ -115,19 +120,30 @@ page {
 	line-height: 72rpx;
 }
 .tips-cont {
-	margin-left: 20rpx;
-	font-size: 24rpx;
+	font-style: normal;
+	font-weight: bold;
+	font-size: 12px;
 	color: #000;
 	text-align: left;
-	font-weight: 500;
-	line-height: 72rpx;
+	line-height: 92rpx;
+	margin-left: 118rpx;
 }
 .lang-img {
-	margin-top: 116rpx;
+	margin-top: 160rpx;
 	margin-left: 64rpx;
 	width: 622rpx;
 	height: 954rpx;
 }
+.hd_banner {
+	width: 686rpx;
+	height: 290rpx;
+	margin-left: 32rpx;
+	margin-top: 64rpx;
+	/* background: url(hd_banner.jpg); */
+	border: 2rpx solid #9999A5;
+	box-sizing: border-box;
+	border-radius: 32rpx;
+}
 .cont {	
 	margin-top: 365rpx;
 	width: 100%;
@@ -159,48 +175,74 @@ page {
 .uploadWrap{
 	margin-top:32rpx;
 	margin-left: 32rpx;
-  height:400rpx; 
+  height:402rpx; 
   width:100%; 
   display: flex; 
   display: -webkit-box;
   flex-direction: column;
 } 
 .upload_Item{ 
-	width: 310rpx; 
-	height: 372rpx; 
+	width: 402rpx; 
+	height: 	512rpx; 
 	margin-right: 24rpx;
+	background-image: url("https://api.zhumi.tech/MiniProgram/teacher/p_bk.png");
+	background-size: cover;
+	 -webkit-background-size: cover;
+	-o-background-size: cover;
+	background-position: center 0;
 } 
 .upload_Item_img{ 
-  width: 310rpx; 
-  height: 206rpx;
-  border-radius: 30rpx 30rpx 0rpx 0rpx;
+  width: 402rpx;
+	height: 336rpx;
+	margin-top: 0rpx;
 }
 .mktinfoBox {
-  margin-top: -6rpx;
   display: flex;
   flex-direction: column;
   width: 310rpx;
   height: 166rpx;
-  border-radius: 0rpx 0rpx 30rpx 30rpx;
-  background:rgba(255,255,255,1);
+
 }
-.mktname {
-  font-size: 28rpx;
-  margin-left: 18rpx;
-  margin-right: 18rpx;
-  font-weight: 500;
-  color: #000000;
-  margin-top: 18rpx;
+.teache_con {
+	width: 430rpx;
+	height: 120rpx;
+	display: flex;
+	flex-direction: column;
 }
-.mktadd {
-  margin-right: 18rpx;
-  margin-left: 18rpx;
-  margin-top: 2rpx;
-  font-size: 20rpx;
-  font-weight: Light;
-  color: #8C8C8C;
-  justify-content: space-between;
+.teahcer_name_box {
+	display: flex;
+	margin-bottom: 8rpx;
+}
+.teacher_name {
+	flex: 0.5;
+	width: 128rpx;
+	height: 32rpx;
+	margin-left: 32rpx;
+	font-style: normal;
+	font-weight: bold;
+	font-size: 32rpx;
+	line-height: 32rpx;
+	color: #33333F;
+}
+.teacher_name_con {
+	font-style: normal;
+	font-weight: normal;
+	font-size: 24rpx;
+	line-height: 40rpx;
+	margin-left: 0rpx;
+}
+.teacher_con {
+	flex: 0.5;
+}
+.t_conntext {
+	margin-top:16rpx;
+	margin-left: 32rpx;
+	font-style: normal;
+	font-weight: normal;
+	font-size: 24rpx;
+	line-height: 24rpx;
 }
+
 scroll-view-teacher {
   height: 480rpx;
 }
@@ -220,12 +262,12 @@ scroll-view-teacher {
 	margin-left: 32rpx;
 }
 .campus_Item {
+	position: absolute;
 	width: 686rpx; 
 	height: 162rpx; 
 	margin-left: 32rpx;
 	background-color: white;
 	border-radius: 32rpx 32rpx 0rpx  0rpx ;
-	box-shadow:0rpx 18rpx 36rpx 0rpx rgba(229,229,234,0.56);
 	margin-top: -15rpx;
 }
 .campus_Item_img {
@@ -247,7 +289,7 @@ scroll-view-teacher {
 }
 .mktWrap {
 	margin-left: 32rpx;
-  height:250rpx; 
+  height: 116rpx; 
   width:100%; 
   display: flex; 
   display: -webkit-box; 
@@ -260,14 +302,15 @@ scroll-view-teacher {
 .mkt-desc-box {
 	background-color: white;
 	width: 686rpx; 
-	height: 240rpx; 
-	margin-top: -2rpx;
+	height: 230rpx; 
+	margin-top: 140rpx;
 	margin-left: 32rpx;
 	border-radius: 0rpx 0rpx 32rpx  32rpx ;
 	box-shadow:0rpx 18rpx 36rpx 0rpx rgba(229,229,234,0.56);
 }
 .hot-mkt {
 	margin-left: 32rpx;
+	margin-top: -20rpx;
 	font-weight: 500;
 	font-size: 24rpx;
 	color: #323232;
@@ -280,5 +323,9 @@ scroll-view-teacher {
 	height: 450rpx;
 	border-radius: 32rpx;
 }
-
+.b_teacher {
+	width: 402rpx;
+	height: 512rpx;
+	margin-left: 32rpx;
+}