首页

pages/index/index.vue

@@ -1,18 +1,202 @@
 <template>
 	<view class="content">
-		
-		<view class="text-area">
-			<text class="red">{{title}}</text>
+		<u-navbar :is-back="false" title="">	
+			<view class="slot-wrap">
+				<view class="navbar-left">
+					<u-dropdown ref="uDropdown">
+						<u-dropdown-item title="荆州">
+							<view class="slot-content">
+								<view class="u-text-center">其他自定义内容</view>
+								<u-button type="primary" @click="closeDropdown">确定</u-button>
+							</view>
+						</u-dropdown-item>
+					</u-dropdown>
+				</view>				
+				<view class="search-wrap">
+					<u-search placeholder="日照香炉生紫烟" :show-action="false"></u-search>
+				</view>
+				<view class="navbar-right">
+					<u-icon name="saoma" custom-prefix="custom-icon" size="40" color="#333"></u-icon>
+				</view>
+			</view>
 			
+		</u-navbar>	
+		<view class="banner">
+			<u-swiper :list="list"></u-swiper>
+		</view>
+		<view class="index-floor">
+			<view class="title">
+				<u-icon name="zhanpai" custom-prefix="custom-icon" size="40" color="#1677ff"></u-icon>
+				<span>玉桥小区</span>
+			</view>
+			<view class="content">
+				<view class="route">
+					<view class="route-item">
+						<view class="route-text">
+							<h4>沙岑线</h4>
+							<p>开往岑河物流园</p>
+						</view>
+						<viwe class="route-gap">
+							<viwe class="route-gap stop">
+								<span>已到站</span>
+								<u-icon name="arrow-right" color="#999" size="28"></u-icon>
+							</viwe>
+						</viwe>
+					</view>
+					<view class="route-item">
+						<view class="route-text">
+							<h4>沙岑线</h4>
+							<p>开往岑河物流园</p>
+						</view>
+						<viwe class="route-gap">
+							<span>1站5公里</span>
+							<u-icon name="arrow-right" color="#999" size="28"></u-icon>
+						</viwe>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="index-floor">
+			<view class="title">
+				<u-icon name="zhanpai" custom-prefix="custom-icon" size="40" color="#1677ff"></u-icon>
+				<span>豉湖路站牌</span>
+			</view>
+			<view class="content">
+				<view class="route">
+					<view class="route-item">
+						<view class="route-text">
+							<h4>沙岑线</h4>
+							<p>开往岑河物流园</p>
+						</view>
+						<viwe class="route-gap">
+							<viwe class="route-gap stop">
+								<span>已到站</span>
+								<u-icon name="arrow-right" color="#999" size="28"></u-icon>
+							</viwe>
+						</viwe>
+					</view>
+					<view class="route-item">
+						<view class="route-text">
+							<h4>沙岑线</h4>
+							<p>开往岑河物流园</p>
+						</view>
+						<viwe class="route-gap">
+							<span>1站5公里</span>
+							<u-icon name="arrow-right" color="#999" size="28"></u-icon>
+						</viwe>
+					</view>
+				</view>
+			</view>
 		</view>
 	</view>
 </template>
 
-<script>
-	import api from './index.js'
-	export default api;
+<script>
+	import api from './index.js'
+	export default {
+		data() {
+			return {
+				list: [{
+						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
+						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
+					},
+					{
+						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
+						title: '身无彩凤双飞翼，心有灵犀一点通'
+					},
+					{
+						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
+						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
+					}
+				],
+			}
+		},
+		methods: {
+			closeDropdown() {
+				this.$refs.uDropdown.close();
+			}
+		}
+	}
 </script>
 
 <style>
-	
+	page{background-color: #f7f7f7;}
+</style>
+<style scoped lang="scss">
+	.slot-wrap {
+		display: flex;
+		align-items: center;
+		flex: 1;
+	}
+	.navbar-right {
+		display: flex;
+		margin-right: 20rpx;
+	}
+	.navbar-left{
+		display: flex;
+		align-items: center;
+		margin-left: 20rpx;
+		span{
+			margin-right: 6rpx;
+			font-size: 14px;
+		}
+	}
+	.search-wrap {
+		margin: 0 20rpx;
+		flex: 1;
+	}
+	.banner{
+		padding: 20rpx;
+		background-color: #fff;
+	}
+	.slot-content{
+		background-color: #fff;
+	}
+	.index-floor{
+		margin: 20rpx;
+		background-color: #fff;
+		border-radius: 20rpx;
+		.title{
+			padding: 20rpx;
+			border-bottom: 1px solid #f7f7f7;
+			display: flex;
+			align-items: center;
+			span{
+				margin-left: 10rpx;
+				font-size: 16px;
+				font-weight: bold;
+			}
+		}
+	}
+	.route{
+		margin:0 20rpx;
+	}
+	.route-item{
+		padding:  20rpx 0;
+		border-bottom: 1px solid #f7f7f7;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		&:last-child{
+			border: none;
+		}
+		h4{
+			font-size: 32rpx;
+		}
+		p{
+			margin-top: 6rpx;
+			color:#999;
+		}
+	}
+	.route-gap{
+		span{
+			font-size: 32rpx;
+			font-weight: bold;
+			margin-right: 10rpx;
+			color:#1677ff;
+		}
+		&.stop{
+			span{color:#ff731d}
+		}
+	}
 </style>