jn_app/pages/warn/faultWarnIndex.vue

<template>
	<view class="faultwarn">
		<company-header></company-header>
		<view class="falutWarn_main">
			<view class="faultwarn_main_com flex" style="margin:10px 0" v-for="(item,index) in faultwarnData"
				:key="index">
				<view class="faultwarn_main_com_left">
					<view class="faultwarnLeftTop">{{item.name}}</view>
					<view class="faultwarnLeftBot">{{item.code}}</view>
				</view>
				<view class="faultwarn_main_com_right">
					<view class="faultwarnRightTop" :style="getSty(item)">{{item.reson}}
					</view>
					<view class="faultwarnRightBot" :style="getSty(item)">{{item.date}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import companyHeader from '../common/companyHeader.vue'
	export default {
		onLoad: function() {},
		components: {
			companyHeader
		},
		data() {
			return {
				faultwarnData: []
			}
		},
		created() {
			this.faultwarnData = [{
					name: '乌力吉',
					code: 'A25',
					reson: '通讯站点诊断类故障',
					date: '2017-01-06  13:34:34'
				},
				{
					name: '宝龙山',
					code: 'A25',
					reson: '通讯站点诊断类故障通讯站点诊断类故障通 讯站点诊断类故障',
					date: '2017-01-06  13:34:34'
				},
			]
		},
		methods: {
			getSty(item) {
				let sty = ''
				if (item.reson.length > 16) {
					sty = 'top: 5px'
				} else {
					sty = 'top: 15px'
				}
				return sty
			},
			changeMsg() {
				this.$tab.navigateTo('/pages/common/messagePage')
			},
			changeStation() {
				this.$tab.navigateTo('/pages/common/stationListPage')
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #202246;
	}

	.faultwarn {
		width: 100vw;
		background: url('../../static/jnImage/loginPage/windBack.png'), url('../../static/jnImage/loginPage/backWav.png');
		background-repeat: no-repeat, repeat;
		background-size: 100% 260px, 100% 5px;

		.falutWarn_main {
			padding: 0 20px;

			.faultwarn_main_com {
				height: 60px;
				background: #3F4572;
				border-radius: 5px;

				.faultwarn_main_com_left {
					width: 20%;
					background-color: #610900;
					color: #fff;
					border-radius: 5px 0 0 5px;
					text-align: center;

					.faultwarnLeftTop {
						font-size: 30upx;
						position: relative;
						top: 15px;
					}

					.faultwarnLeftBot {
						position: relative;
						top: 20px;
					}
				}

				.faultwarn_main_com_right {
					padding-left: 10px;
					width: 80%;

					.faultwarnRightTop {
						margin-bottom: 5px;
						color: #6A98CB;
						font-size: 30upx;
						position: relative;
						// top: 5px;
					}

					.faultwarnRightBot {
						color: #9A9BA6;
						position: relative;
						// top: 5px;
					}
				}
			}
		}
	}
</style>