hwnc/components/ui-component/U_bull/m/index.vue

<template>
	<view class="component-wrapper u000242" :style="wrapper_style">
		<u-notice-bar :text="announcetext" :bgColor="datas.bg_color" :fontSize="datas.text_size" @click="goMessage"
			:color="datas.text_color" direction="column" mode="closable" speed="200">
		</u-notice-bar>
	</view>
</template>
<script>
	import homeApi from '@/api/home/index.js'
	export default {
		props: ['styles', 'datas'],
		data() {
			let siteinfo = getApp().globalData.siteinfo;
			this.homeInit();
			return {
				settingFile: siteinfo,
				emptyImage: siteinfo.root_img + '/static/app/image.png',
				announce: [],
				announcetext: [],
			}
		},

		computed: {
			/** 样式 */
			wrapper_style() {
				const {
					bg_color,
					padding_top,
					padding_bottom,
					padding_left,
					padding_right,
				} = this.datas;
				return `
				padding-top: ${padding_top}rpx;
				padding-bottom: ${padding_bottom}rpx;
				padding-left: ${padding_left}rpx;
				padding-right: ${padding_right}rpx;
                background-color: ${bg_color};
            `;
			},

			/** 标题样式 */
			title_style() {
				const {
					text_align,
					text_size,
					text_color
				} = this.datas;
				return `
				margin-left: 10px;
                text-align: ${text_align};
                font-size: ${text_size}px;
                color: ${text_color};
            `;
			},
			img_style() {
				const {
					button_size,
					button_color
				} = this.datas
				return `
				color: ${button_color};
				margin-left: 10px;
				font-size:${button_size}px;
				`;
			},

			/** 标题 */
			title() {
				return '公告内容';
			},
		},
		methods: {
			goMessage(index) {
				this.$until.toarticle('',this.announce[index].id)
			},
			async homeInit() {
				let that = this;
				let res = await homeApi.index()
				if (res.data&&res.data.announce) {
					that.announce = res.data.announce;
					res.data.announce.forEach(item => {
						that.announcetext.push(item.title);
					});
				}
			},
		},
		mounted() {
			this.$emit('loaded');
		}
	};
</script>
<style lang="less" scoped>
	.component-wrapper {
		display: block;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		overflow: hidden;
		text-decoration: none;
		display: flex;
		align-items: center;
	}
</style>