Explorar o código

index

首页框架基本搞定
wanghuan %!s(int64=4) %!d(string=hai) anos
pai
achega
eb6726aacb
Modificáronse 3 ficheiros con 126 adicións e 83 borrados
  1. 15 0
      pages/index/index.js
  2. 84 83
      pages/index/index.wxml
  3. 27 0
      pages/index/index.wxss

+ 15 - 0
pages/index/index.js

@@ -38,6 +38,16 @@ Page({
 		eqArray: [],
 		pmArray: [],
 		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"
+		],
+		mktImgage: "https://api.zhumi.tech/MiniProgram/mkt/mkt1.png",
 		leaseurl: undefined,
 		promotionurl: undefined,
 		userInfo: {},
@@ -83,6 +93,11 @@ Page({
 			navH: app.globalData.navHeight
 		})
 	},
+	mktImageChange: function(e) {
+		this.setData({
+			mktImgage: e.currentTarget.dataset.path
+		})
+	},
 	//点击轮播图
 	BhrefPm: function(e) {
 		var index = e.currentTarget.dataset.index;

+ 84 - 83
pages/index/index.wxml

@@ -1,100 +1,101 @@
-
 <view>
 	<view class="container">
 		<view class="view-page ">
 			<navbar page-name="个人中心" none="true"></navbar>
-			<swiper class="swiper" indicator-dots="true" indicator-color="#B5B5B5" indicator-active-color="#6D6D6D" autoplay="true"
-			 interval="5000" duration="{{duration}}">
+			<swiper class="swiper" indicator-dots="true" indicator-color="#B5B5B5" indicator-active-color="#6D6D6D"
+				autoplay="true" interval="5000" duration="{{duration}}">
 				<block wx:for="{{arr}}" wx:key="index">
 					<swiper-item>
 						<image src="{{arr[index].wb_url}}" class="slide-image" bindtap="BhrefPm" data-index="{{arr[index].wb_href}}"
-						 data-type="{{arr[index].wb_href_type}}" mode="widthFix" />
+							data-type="{{arr[index].wb_href_type}}" mode="widthFix" />
 					</swiper-item>
 				</block>
 			</swiper>
-		<view class = "cont">
-			<view class = "colum-logo-temp"></view>
-			<view class = "colum-logo">logo</view>
-			<view class = "colum-hot-temp"></view>
-			<view class = "colum-hot">
-				<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 class="cont">
+				<view class="colum-logo-temp"></view>
+				<view class="colum-logo">logo</view>
+				<view class="colum-hot-temp"></view>
+				<view class="colum-hot">
+					<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>
+					<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>
+					</view>
 				</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>
+				<view class="colum-hot-temp"></view>
+				<view class="tips-box">
+					<view class="tips-icon">111</view>
+					<view class="tips-cont">双11XXXXXXXXXXXXXX</view>
 				</view>
-			</view>
-			<view class = "colum-hot-temp"></view>
-			<view class = "tips-box">
-				<view class = "tips-icon">111</view>
-				<view class = "tips-cont">双11XXXXXXXXXXXXXX</view>
-			</view>
-			<view class = "lang-img">……</view>
-			<view class = "colum-hot-temp"></view>
-			<view class = "recommend"></view>
-			<view class = "colum-hot-temp"></view>
-			<view class = "colum-hot-temp"></view>
-			<view class = "hot-title">优秀师资</view>
-				<scroll-view scroll-x="true" > 
-				<view class="uploadWrap"> 
-				<block wx:for="{{mktarr}}" wx:key="index">
-					<!--bindtap="markertap" -->
-					<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}}'> 
-					<image class="upload_Item_img" src="{{mktarr[index].mi_mkturl}}"></image> 
-					<view class = 'mktinfoBox'>
-						<view>
-							<view class = "mktname">{{mktarr[index].mi_mktname}}</view>
-						</view>
-						<view class = "mktadd">{{mktarr[index].mi_mktaddress}}</view>
+				<view class="lang-img">……</view>
+				<view class="colum-hot-temp"></view>
+				<view class="recommend"></view>
+				<view class="colum-hot-temp"></view>
+				<view class="colum-hot-temp"></view>
+				<view class="hot-title">优秀师资</view>
+				<scroll-view scroll-x="true">
+					<view class="uploadWrap">
+						<block wx:for="{{mktarr}}" wx:key="index">
+							<!--bindtap="markertap" -->
+							<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}}'>
+								<image class="upload_Item_img" src="{{mktarr[index].mi_mkturl}}"></image>
+								<view class='mktinfoBox'>
+									<view>
+										<view class="mktname">{{mktarr[index].mi_mktname}}</view>
+									</view>
+									<view class="mktadd">{{mktarr[index].mi_mktaddress}}</view>
+								</view>
+							</view>
+							<view class="viewright" wx:if="{{index == mktarr.length -1}}"></view>
+						</block>
 					</view>
-				</view> 
-				<view class = "viewright" wx:if="{{index == mktarr.length -1}}"></view>
-				</block>
-				</view> 
-				</scroll-view> 
-				<view class = "colum-hot-temp"></view>
-				<view class = "colum-hot-temp"></view>
-				<view class = "hot-title">查找校区</view>
-				<view class = "colum-hot-temp"></view>
-				<view class = "campus-box"></view>
-					<!--bindtap="markertap" -->
-					<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="mkt-img-box">
-				<scroll-view scroll-x="true" > 
-				<view class="mktWrap"> 
-				<block wx:for="{{mktarr}}" wx:key="index">
-					<!--bindtap="markertap" -->
-					<view class="mkt-img" 
-					data-name = '{{mktarr[0].mi_mktname}}' 
-					data-address = '{{mktarr[0].mi_mktaddress}}' 
-					data-latitude = '{{mktarr[0].mi_latitude}}' 
-					data-longitude = '{{mktarr[0].mi_longitude}}'> 
-					<image class="campus_Item_img" src="{{mktarr[0].mi_mkturl}}"></image> 
-				</view> 
-				<view class = "viewright" wx:if="{{index == mktarr.length -1}}"></view>
-				</block>
+				</scroll-view>
+				<view class="colum-hot-temp"></view>
+				<view class="colum-hot-temp"></view>
+				<view class="hot-title">查找校区</view>
+				<view class="colum-hot-temp"></view>
+				<view class="campus-box">
+					<image src="{{mktImgage}}" class = "campus-image"></image>
 				</view>
-				</scroll-view> 
+				<!--bindtap="markertap" -->
+				<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="mkt-img-box">
+						<scroll-view scroll-x="true">
+							<view class="mktWrap">
+								<block wx:for="{{mktList}}" wx:key="index">
+									<view class="mkt-img">
+										<image class="campus_Item_img" src="{{mktList[index]}}" bindtap="mktImageChange" data-path='{{mktList[index]}}'></image>
+									</view>
+									<view class="viewright-mkt" wx:if="{{index == mktList.length -1}}"></view>
+								</block>
+							</view>
+						</scroll-view>
+					</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>
-			<view class="endbottomm"></view>
-		<tabbar _tabBarInd="{{0}}"></tabbar>
-	</view>
+			
+			<tabbar _tabBarInd="{{0}}"></tabbar>
+		</view>
 	</view>
-</view>
+</view>

+ 27 - 0
pages/index/index.wxss

@@ -203,3 +203,30 @@ scroll-view-teacher {
   display: -webkit-box; 
   flex-direction: column;
 }
+.viewright-mkt {
+	width: 18rpx; 
+  height: 130rpx; 
+}
+.mkt-desc-box {
+	background-color: white;
+	width: 686rpx; 
+	height: 240rpx; 
+	margin-top: -2rpx;
+	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;
+	font-weight: 500;
+	font-size: 24rpx;
+	color: #323232;
+} 
+.hot-mkt-temp {
+	height: 12rpx;
+}
+.campus-image {
+	width: 686rpx;
+	height: 450rpx;
+	border-radius: 32rpx;
+}