WenWuGuanJia/pages/dongtai/dongtai.vue

<template>
	<view class="box">
		<u-navbar title="动态" :placeholder="true" bgColor="rgba(255,255,255,0)" :leftIconSize="0" titleStyle="font-weight:bold;color:#000000"></u-navbar>
		<view style="width: 90%; margin: auto">
			<u-swiper
				:list="swiperList"
				imgMode="aspectFill"
				:height="160"
				:indicator="true"
				radius="0"
				:autoplay="true"
				:circular="true"
				indicatorStyle="bottom: 10px"
				indicatorMode="dot"
				indicatorActiveColor="#fff"
				indicatorInactiveColor="rgba(255, 255, 255, 0.35)"
			></u-swiper>
		</view>
		<view class="map_tit" style="margin-left: 96rpx">
			<image style="width: 211rpx; height: 52rpx" src="/static/img/right_img.png"></image>
			<view class="">巡查动态</view>
			<image style="width: 211rpx; height: 52rpx" src="/static/img/left_img.png"></image>
		</view>
		<view class="sh_rw">
			<view class="item_rw">
				<view>巡查文章</view>
				<image style="width: 40rpx; height: 40rpx" src="/static/img/more.png"></image>
			</view>
			<view class="item_rw">
				<view>巡查视频</view>
				<image style="width: 40rpx; height: 40rpx" src="/static/img/more.png"></image>
			</view>
		</view>
		<view class="gg_box">
			<view class="gg_item" v-for="item in 2" :key="item">
				<view class="" style="display: flex; align-items: center">
					<image
						src="https://feicheng.16fw.cn:1443/uploads/20230425/suo34008e6935b8f2e920d95d58f8039a71.jpg"
						style="margin-right: 30rpx; width: 128rpx; height: 128rpx"
					></image>
					<view class="">
						<view>
							<view class="rw_tit1">巡查文章标题</view>
							<view class="rw_tit2">巡查内容</view>
						</view>
					</view>
				</view>
				<view>
					<image style="width: 40rpx; height: 40rpx" src="/static/img/more.png"></image>
				</view>
			</view>
		</view>
		<!-- 投稿动态 -->
		<view class="map_tit" style="margin-left: 96rpx">
			<image style="width: 211rpx; height: 52rpx" src="/static/img/right_img.png"></image>
			<view class="">投稿动态</view>
			<image style="width: 211rpx; height: 52rpx" src="/static/img/left_img.png"></image>
		</view>
		<view class="sh_rw">
			<view class="item_rw">
				<view>投稿文章</view>
				<image style="width: 40rpx; height: 40rpx" src="/static/img/more.png"></image>
			</view>
			<view class="item_rw">
				<view>投稿视频</view>
				<image style="width: 40rpx; height: 40rpx" src="/static/img/more.png"></image>
			</view>
		</view>
		<view class="gg_box">
			<view class="gg_item" v-for="item in 2" :key="item">
				<view class="" style="display: flex; align-items: center">
					<image
						src="https://feicheng.16fw.cn:1443/uploads/20230425/suo34008e6935b8f2e920d95d58f8039a71.jpg"
						style="margin-right: 30rpx; width: 128rpx; height: 128rpx"
					></image>
					<view class="">
						<view>
							<view class="rw_tit1">投稿文章标题</view>
							<view class="rw_tit2">投稿内容</view>
						</view>
					</view>
				</view>
				<view>
					<image style="width: 40rpx; height: 40rpx" src="/static/img/more.png"></image>
				</view>
			</view>
		</view>
		<!-- 综合动态 -->
		<view class="map_tit" style="margin-left: 96rpx">
			<image style="width: 211rpx; height: 52rpx" src="/static/img/right_img.png"></image>
			<view class="">综合动态</view>
			<image style="width: 211rpx; height: 52rpx" src="/static/img/left_img.png"></image>
		</view>

		<view class="gg_box">
			<view class="gg_item" v-for="item in 2" :key="item">
				<view class="" style="display: flex; align-items: center">
					<image
						src="https://feicheng.16fw.cn:1443/uploads/20230425/suo34008e6935b8f2e920d95d58f8039a71.jpg"
						style="margin-right: 30rpx; width: 128rpx; height: 128rpx"
					></image>
					<view class="">
						<view>
							<view class="rw_tit1">巡查文章标题</view>
							<view class="rw_tit2">巡查内容</view>
						</view>
					</view>
				</view>
				<view>
					<image style="width: 40rpx; height: 40rpx" src="/static/img/more.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
let that;

export default {
	components: {},
	data() {
		return {
			swiperList: ['https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/dt_lb1.jpg']
		};
	},
	onLoad(option) {
		that = this;
	},
	methods: {}
};
</script>

<style>
.box {
	height: auto;
	width: 100%;
	padding-bottom: 50rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/sh_bg.png');
	background-repeat: repeat-y;
	background-size: cover;
}
/deep/.u-swiper-indicator__wrapper__dot--active {
	width: 5px !important;
}
.map_tit {
	display: flex;
	align-items: center;
	margin-left: 50rpx;
	margin-top: 40rpx;
	font-size: 40rpx;
	font-family: Songti SC, Songti SC;
	font-weight: 900;
	line-height: 52rpx;
	color: #444444;
}
.gg_box {
	width: 670rpx;
	margin: auto;
	margin-top: 20rpx;
	padding: 20rpx;
	border: 2rpx solid #ebc9a9;
}
.gg_item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 25rpx;
	width: 630rpx;
}
.rw_tit1 {
	font-size: 28rpx;
	color: #444444;
	line-height: 44rpx;
}
.rw_tit2 {
	font-size: 24rpx;
	color: rgba(68, 68, 68, 0.4);
	line-height: 40rpx;
}
.sh_rw {
	width: 60%;
	margin: auto;
	margin-top: 24rpx;
	justify-content: space-evenly;
	display: flex;
	align-items: center;
}
.item_rw {
	width: 176rpx;
	height: 56rpx;
	align-items: center;
	text-align: center;
	display: flex;
	justify-content: center;
	border: 2rpx #eba869 solid;
}
</style>