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

<template>
	<view class="component-wrapper u000242" :style="wrapper_style">
		<view class="weather_left">
			<view class="weather_left_top" :style="weather_style">
				<view style="fontSize:20px ;">38℃</view>
				<view>多云</view>
				<view>2018-08-20</view>
				<view>星期一</view>
			</view>
			<view class="weather_left_bottom">
				<view>
					温度变化:{{ '27°-37°'}}
				</view>
				<view>
					空气质量: {{'轻度污染'}}
				</view>
				<view>
					风力: {{'二级'}}
				</view>
			</view>
		</view>
		<u-icon :style="img_style"  name="eye" :color="datas.text_color" size="28"></u-icon>
	</view>
</template>
<script>
	export default {
		props: ['styles', 'datas'],

		computed: {
			/** 样式 */
			wrapper_style() {
				const {
					bg_color,
					padding_top,
					padding_bottom,
					padding_left,
					padding_right,
				} = this.datas;
				return `
				min-height: 40px;
				padding: ${padding_top}px ${padding_right}px ${padding_bottom}px  ${padding_left}px;
                background-color: ${bg_color};
                background-size: 100% auto;
                bakcground-position: center;
            `;
			},

			/** 标题样式 */
			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};
            `;
			},
			//文字颜色
			weather_style() {
				const { text_color } = this.datas
				return `
				color:${text_color};
				`;
			},
			img_style() {
				const { text_color } = this.datas
				return `
				color:${text_color};
				font-size:35px;
				margin-left:15px;
				margin-top:-5px;
				`;
			},

			/** 标题 */
			title() {
				return '公告内容';
			},
		},

		mounted() {
			this.$emit('loaded');
		}
	};
</script>
<style lang="less" scoped>
	.component-wrapper {
		display: block;
		max-width: 100%;
		// text-align: center;
		margin-left: auto;
		margin-right: auto;
		overflow: hidden;
		text-decoration: none;
		display: flex;
		align-items: center;

		.weather_left {
			width: 85%;

			.weather_left_top {
				color: #FCBD56;
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
				width: 85%;
				margin-bottom: 8px;
			}

			.weather_left_bottom {
				width: 90%;
				font-size: 10px;
				width: 100%;
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
			}
		}
	}

	.img {
		width: 25px;
		height: 25px;
		margin: 10px;
	}
</style>