uniapp新闻页面

<template>
	<view class="">
		<!-- 占位符 -->
		<view class="status_bar"></view>
		<!-- 头部 -->
		<view class="nav_header">
		    <view class="nav_search">
		        <view class="form">
		            <view class="sxbut"> 
						<text class="xzso active" data="文章">文章</text>
		                <text class="xzso" data="音频">音频</text>
		                <text class="xzso" data="视频">视频</text>
		            </view>
		            <input  placeholder="输入关键字 搜索文章" class="input"> 
					<view class="zt"><i class="iconfont icon-chacha"></i></view>
		            <view class="button"><i class="iconfont icon-sousuo"></i></view>
		        </view>
		    </view>
		    <view class="tis">今日新增：10条 昨日新增：10条 总计：120798条</view>
		    <view id="TouchNav">
				<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
					<view class="scroll-view-item_H">全部</view>
					<view class="scroll-view-item_H">恋爱</view>
					<view class="scroll-view-item_H">婚姻</view>
					<view class="scroll-view-item_H">恋爱</view>
					<view class="scroll-view-item_H">婚姻</view>
					<view class="scroll-view-item_H">恋爱</view>
					<view class="scroll-view-item_H">婚姻</view>
					<view class="scroll-view-item_H">恋爱</view>
					<view class="scroll-view-item_H">婚姻</view>
					<view class="scroll-view-item_H">恋爱</view>
					<view class="scroll-view-item_H">婚姻</view>
					<view class="scroll-view-item_H">恋爱</view>
					<view class="scroll-view-item_H">婚姻</view>
				</scroll-view>
		    </view>
		</view>
		<!-- 内容 -->
		<view class="main">
			<!-- 文字 -->
		    <view class="list"> 
				<view class="h2">大学，途经一场哀伤</view>
		        <view class="card"> 
					<text class="span">网络</text>
		            <text class="span">20小时前</text>
					<text class="span">文章</text>
		            <view class="you"> 
						<text class="span"><i class="iconfont icon-chakan"></i> 1</text>
		                <text class="span"><i class="iconfont icon-shoucang"></i> 0</text>
		            </view>
		        </view>
		    </view>
			<!-- 一张图片右边 -->
			<view class="list">
				<view class="left">
					<view class="h2">大学，途经一场哀伤按时打算打算打算打算</view>
					<view class="card">
						<text class="span">网络</text>
					    <text class="span">20小时前</text>
						<text class="span">文章</text>
					    <view class="you"> 
							<text class="span"><i class="iconfont icon-chakan"></i> 1</text>
					        <text class="span"><i class="iconfont icon-shoucang"></i> 0</text>
					    </view>
					</view>
				</view>
				<view class="right">
					<image src="/static/img/banner.jpg" class="img"></image>
				</view>
			</view>
			<!-- 一张图片左边 -->
			<view class="list zuo">
				<view class="left">
					<view class="h2">大学，途经一场哀伤按时打算打算打算打算</view>
					<view class="card">
						<text class="span">网络</text>
					    <text class="span">20小时前</text>
						<text class="span">文章</text>
					    <view class="you"> 
							<text class="span"><i class="iconfont icon-chakan"></i> 1</text>
					        <text class="span"><i class="iconfont icon-shoucang"></i> 0</text>
					    </view>
					</view>
				</view>
				<view class="right">
					<image src="/static/img/banner.jpg" class="img"></image>
				</view>
			</view>
			<!-- 一张图下边 -->
			<view class="list">
				<view class="h2">大学，途经一场哀伤按时打算打算打算打算</view>
				<view class="imgs i1">
					<image src="/static/img/banner.jpg" class="img" mode="aspectFill"></image>
				</view>
				<view class="card">
					<text class="span">网络</text>
				    <text class="span">20小时前</text>
					<text class="span">文章</text>
				    <view class="you"> 
						<text class="span"><i class="iconfont icon-chakan"></i> 1</text>
				        <text class="span"><i class="iconfont icon-shoucang"></i> 0</text>
				    </view>
				</view>
			</view>
			<!-- 下面2张图 -->
			<view class="list">
				<view class="h2">大学，途经一场哀伤按时打算打算打算打算</view>
				<view class="imgs i2">
					<image src="/static/img/banner.jpg" class="img" mode="aspectFill"></image>
					<image src="/static/img/ico.png" class="img" mode="aspectFill"></image>
				</view>
				<view class="card">
					<text class="span">网络</text>
				    <text class="span">20小时前</text>
					<text class="span">文章</text>
				    <view class="you"> 
						<text class="span"><i class="iconfont icon-chakan"></i> 1</text>
				        <text class="span"><i class="iconfont icon-shoucang"></i> 0</text>
				    </view>
				</view>
			</view>
			<!-- 下面3张图 -->
			<view class="list">
				<view class="h2">大学，途经一场哀伤按时打算打算打算打算</view>
				<view class="imgs i2">
					<image src="/static/img/banner.jpg" class="img" mode="aspectFill"></image>
					<image src="/static/img/ico.png" class="img" mode="aspectFill"></image>
					<image src="/static/img/banner.jpg" class="img" mode="aspectFill"></image>
				</view>
				<view class="card">
					<text class="span">网络</text>
				    <text class="span">20小时前</text>
					<text class="span">文章</text>
				    <view class="you"> 
						<text class="span"><i class="iconfont icon-chakan"></i> 1</text>
				        <text class="span"><i class="iconfont icon-shoucang"></i> 0</text>
				    </view>
				</view>
			</view>
			<!-- 音频 -->
			<view class="list">
				<view class="h2">大学，途经一场哀伤按时打算打算打算打算</view>
				<view class="imgs i0">
					<image src="/static/img/ypyy.png" class="img" mode="widthFix"></image>
				</view>
				<view class="card">
					<text class="span">网络</text>
				    <text class="span">20小时前</text>
					<text class="span">文章</text>
				    <view class="you"> 
						<text class="span"><i class="iconfont icon-chakan"></i> 1</text>
				        <text class="span"><i class="iconfont icon-shoucang"></i> 0</text>
				    </view>
				</view>
			</view>
			<!-- 视频 -->
			<view class="list">
				<view class="h2">大学，途经一场哀伤按时打算打算打算打算</view>
				<view class="imgs i1">
					<image src="/static/img/banner.jpg" class="img" mode="aspectFill"></image>
					<image src="/static/img/spbf.png" class="img bf"></image>
				</view>
				<view class="card">
					<text class="span">网络</text>
				    <text class="span">20小时前</text>
					<text class="span">文章</text>
				    <view class="you"> 
						<text class="span"><i class="iconfont icon-chakan"></i> 1</text>
				        <text class="span"><i class="iconfont icon-shoucang"></i> 0</text>
				    </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style>
page{background-color:#f2f5f9}
.nav_header{background-color:#ff3a3f;position:fixed;width:100%;z-index:999;left:0;right:0;top:0;    padding-top: var(--status-bar-height);}
.nav_header .tis{padding-bottom:10px;text-align:center;color:#fff;font-size:12px}
.nav_search{margin:auto;background-color:#ff3a3f;width:calc(100% - 10px);padding:10px;z-index:999}
.nav_search .form{overflow:auto;position:relative;width:calc(100% - 10px)}
.nav_search .zt{color:#ff3a3f;border-radius:50px;z-index: 99;text-align:center;position:absolute;padding:4px;line-height:18px;width:18px;right:44px;top:34px}
.nav_search .input{padding:0 8px;font-size:14px;width:calc(100% - 16px);height:38px;float:right;border-radius:5px;background-color:#fff}
.nav_search .sxbut{font-size:12px;color:#f0f8ff;height:28px;line-height:20px;text-align:center}
.nav_search .sxbut .xzso{padding:0 7px;border-radius:5px;border:1px solid #fff;margin:0 3px}
.nav_search .button{position:absolute;z-index: 99;background:#ff3a3f;font-size:14px;width:38px;line-height:30px;color:#fff;text-align:center;border-radius:5px;right:3px;top:32px}
#TouchNav{width:100%;border-bottom:1px solid #f8f8f8;background-color:#fff;padding:5px 0px}
.scroll-Y{height:300rpx}
.scroll-view_H{white-space:nowrap;width:100%}
.scroll-view-item{height:30rpx;line-height:30rpx;text-align:center;font-size:36rpx}
.scroll-view-item_H{display:inline-block;width:100rpx;height:30rpx;line-height:30rpx;text-align:center;font-size:32rpx}


.main{margin-top:155px;padding-top: var(--status-bar-height)}
.main .list {
    margin-bottom: 10px;
    position: relative;
    background-color: #fff;
    padding: 10px;
}
.main .list:after{content:"";display:table;clear:both}
.main .list .h2{font-size:16px;font-weight:unset}
.main .list .card{font-size:12px;margin-top:6px;position:relative}
.main .list .card>.span{margin-right:10px;color:#9c9c9c}
.main .list .card .you{position:absolute;right:0;top:0}
.main .list .card .you>.span{margin-right:10px;color:#9c9c9c}
.main .list .card .you>.span.hover{margin-right:10px;color:#ff5722}
.main .list .card .settop{color:#ff3a3f}
.main .list .left{float:left;width:calc(100% - 120px)}
.main .list .left .h2{height:74px;text-overflow:ellipsis;overflow:hidden}
.main .list .right{float:right;width:110px;height:100px}
.main .list .right .img{width:100%;height:100%;border-radius:5px}
.main .list.zuo .left{float:right}
.main .list.zuo .right{float:left}
.main .list.xia .left .h2{height:auto}
.main .list.xia .left{width:100%}
.main .list.xia .right{width:100%;height:200px}
.main .list .imgs{display:flex;position: relative;}
.main .list .imgs.i1{max-height:200px;overflow:hidden;height: 200px;}
.main .list .imgs.i2{max-height:120px;overflow:hidden;height: 120px;}
.main .list .imgs.i3{max-height:100px;overflow:hidden;height: 100px;}
.main .list .imgs.i0 .img{width:calc(100% - 5px);margin:5px;border-radius:5px;border:1px solid #d2d2d2}
.main .list .imgs.i1 .img{margin:5px;width:calc(100% - 5px);height:auto;border-radius:5px}
.main .list .imgs.i1 .bf{z-index: 99;height: 38px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);text-align:center;width:38px}
.main .list .imgs.i2 .img{width:calc(50% - 10px);margin:5px;height:auto;border-radius:5px}
.main .list .imgs.i3 .img{width:calc(33.33% - 10px);margin:5px;border-radius:5px}
</style>
分类: UNIAPP 点赞(0) 收藏
评论列表（0）
觅新博客

觅新科技 - 定制各种网站 app 小程序解决方案QQ50361804

uniapp新闻页面

评论

公告

搜索

阅读排行榜

站长推荐

随机推荐
