Delivery-merchant/pages/News.vue

<template>
	<view>
		<!-- <titlenav></titlenav> -->
		<view class="news">
			<view class="title">消息中心</view>
			<block>
				<u-swipe-action :right-width="65">
					<news-info></news-info>
					<div slot="right" class="del" @click="closeNews(item)">删除</div>
				</u-swipe-action>
			</block>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import Titlenav from '../components/Titlenav.vue';
import NewsInfo from '../components/NewsInfo.vue';
export default {
	components: {
		Titlenav,
		NewsInfo
	},
	data() {
		return {};
	},
	computed: {
		...mapState(['systemInfo'])
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
.news {
	margin: 10px 20px 0;
	.title {
		font-size: 24px;
		font-weight: bold;
		color: #000000;
		line-height: 33px;
		margin-bottom: 10px;
	}
	.del {
	    background-color: red;
	    height: 100%;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    color: #fff;
	    font-size: 12px;
	    width: 65px;
	}
}
</style>