college/pages/mobile/index.vue

<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>