1.首页

pages/mobile/index.vue

@@ -1,29 +1,247 @@
-<template>
-	<view class="content">
-		<view class="test"></view>
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				title: 'Hello'
-			}
-		},
-		onLoad() {
-          
-		},
-		methods: {
-
-		}
-	}
-</script>
-
-<style scoped>
-	.test{
-		width: 350rpx;
-		height: 350rpx;
-		background: red;
-	}
+<template>
+	<view class="content">
+
+		<!-- 导航 -->
+		<view class="nav">
+			<view class="leftView"></view>
+			<view class="navTitle">门店学院</view>
+			<view class="rightView">
+				<image src="../../static/mobile/icona_fenlei@2x.png" mode="" class="rightImg"></image>
+				<image src="../../static/mobile/icon_search@2x.png" mode="" class="rightImg"
+					style="margin-left: 40rpx;"></image>
+			</view>
+		</view>
+
+		<!-- 推荐 -->
+		<view class="commend">
+			<view class="top">
+				<image src="../../static/mobile/icon_tuijian@2x.png" mode="" style="width: 28rpx; height: 28rpx;">
+					<text class="tuijian">推荐文章</text>
+				</image>
+			</view>
+
+			<!-- item -->
+			<view class="scrollBg">
+				<scroll-view scroll-x="true" @scroll="scroll">
+					<view class="itemBg">
+						<view v-for="(item,index) in bannerArr" :key="index" class="item">
+							<image src="../../static/logo.png" mode="" class="swpImg"></image>
+							<view class="title">文字标题</view>
+							<view class="title2">小标题</view>
+
+						</view>
+					</view>
+				</scroll-view>
+			</view>
+
+		</view>
+
+		<!-- 分类 -->
+		<view v-for="(item,index) in itemArr" :key="index">
+			<view class="fenleiBg">
+				<!-- 头 -->
+				<view class="fenTop">
+					<view class="leftTop">
+						<view class="tuijian">天空飘来5个字</view>
+						<view class="sum">共9999篇文章</view>
+					</view>
+					<view class="rightTop">
+						<view class="">查看全部
+							<image src="../../static/mobile/icon_arrow@2x.png" mode=""
+								style="width: 11rpx; height: 18rpx; margin-left: 10rpx;"></image>
+						</view>
+					</view>
+				</view>
+				<!-- item -->
+				<view class="itemBg">
+					<view v-for="(item,index) in bannerArr" :key="index" class="twoItem">
+						<image src="../../static/logo.png" mode="" class="img2"></image>
+						<view class="title">文字标题</view>
+
+
+					</view>
+				</view>
+
+
+			</view>
+		</view>
+
+		
+
+
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				bannerArr: [1, 2, 3, 4, 5],
+				scrollTop: 0,
+				old: {
+					scrollTop: 0
+				},
+				itemArr: [1, 2, 3, 4, 5, 6],
+			}
+		},
+		onLoad() {
+
+		},
+		methods: {
+			scroll: function(e) {
+				console.log(e)
+				this.old.scrollTop = e.detail.scrollTop
+			},
+		}
+	}
+</script>
+
+<style scoped>
+	.content {
+		min-height: 100vh;
+		background-color: #f4f5f7;
+		padding-top: 88rpx;
+		padding-bottom: 20rpx;
+
+	}
+
+	.nav {
+		position: fixed;
+		left: 0;
+		top: 0;
+		width: 100vw;
+		height: 88rpx;
+		background-color: #FFFFFF;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		z-index: 999;
+	}
+
+	.navTitle {
+		font-size: 36rpx;
+		font-weight: bold;
+		color: #3c3c3c;
+
+	}
+
+	.leftView {
+		width: 30%;
+	}
+
+	.rightView {
+		width: 30%;
+		display: flex;
+		justify-content: flex-end;
+		padding-right: 24rpx;
+	}
+
+	.rightImg {
+		width: 40rpx;
+		height: 40rpx;
+
+	}
+
+	.commend {
+
+		background-color: #FFFFFF;
+		margin: 20rpx 0;
+		padding: 30rpx 25rpx;
+
+	}
+
+	.top {
+		padding-bottom: 24rpx;
+	}
+
+	.tuijian {
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #3c3c3c;
+		margin-left: 10rpx;
+	}
+
+	.scrollBg {
+		background-color: #FFFFFF;
+
+	}
+
+	.scroll-view {
+		white-space: nowrap;
+	}
+
+	.itemBg {
+		display: flex;
+	}
+
+	.item {
+		width: 300rpx;
+		margin-right: 25rpx;
+	}
+
+	.swpImg {
+		width: 300rpx;
+		height: 200rpx;
+		border-radius: 10rpx;
+	}
+
+	.title {
+		font-size: 28rpx;
+		font-weight: bold;
+		color: #3c3c3c;
+		/* 隐藏文字显示 ...不换行 */
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		margin: 14rpx 0;
+	}
+
+	.title2 {
+
+		background: rgba(63, 144, 247, 0.1);
+		font-size: 22rpx;
+		color: #3F90F7;
+		height: 36rpx;
+		line-height: 36rpx;
+		border-radius: 18rpx;
+		padding: 3rpx 14rpx;
+		width: 138rpx;
+		margin-bottom: 10rpx;
+		/* text-align: center; */
+	}
+
+	.fenleiBg {
+		background-color: #FFFFFF;
+		margin: 20rpx 0;
+		padding: 30rpx 25rpx;
+	}
+
+	.fenTop {
+		padding-bottom: 24rpx;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.leftTop {
+		display: flex;
+		align-items: center;
+	}
+
+	.sum {
+		font-size: 24rpx;
+		color: #999999;
+		margin-left: 16rpx;
+	}
+
+	.twoItem {
+		width: calc((100vw - 75rpx) / 2);
+		margin-right: 25rpx;
+	}
+
+	.img2 {
+		width: calc((100vw - 75rpx) / 2);
+		height: 226rpx;
+	}
 </style>