dev/dcp-web-gate/src_old/views/unitConversion/unitConversionindex.vue

<template>
	<div class="unitConversionindex" style="position: relative">
		<HeaderItem style="background-color: #0e4891"></HeaderItem>
		<div
			style="
				height: 45px;
				line-height: 42px;
				width: 1200px;
				margin: 40px auto 0;
			"
		>
			<div
				:class="informationsClass == 1 ? 'information2' : 'information1'"
				@click="getInformation(1)"
				class="cursor"
			>
				{{
					$i18n.locale == 'en' ? 'Physical Unit Conversion ' : '物理单位换算'
				}}
			</div>
			<div
				:class="informationsClass == 2 ? 'information2' : 'information1'"
				@click="getInformation(2)"
				class="cursor"
			>
				{{ $i18n.locale == 'en' ? 'Heat Unit Conversion' : '热量单位换算' }}
			</div>
			<div
				:class="informationsClass == 3 ? 'information2' : 'information1'"
				@click="getInformation(3)"
				class="cursor"
			>
				{{
					$i18n.locale == 'en'
						? 'Conversion Of Carbon Emission Factors'
						: '碳排放因子换算'
				}}
			</div>
			<div
				:class="informationsClass == 4 ? 'information2' : 'information1'"
				@click="getInformation(4)"
				class="cursor"
			>
				{{
					$i18n.locale == 'en'
						? 'Physical Unit Thermal Unit Conversion'
						: '物理单位-热单位换算'
				}}
			</div>
		</div>
		<unitConversion v-if="informationsClass == 1"></unitConversion>
		<heatUnitConversion v-if="informationsClass == 2"></heatUnitConversion>
		<conversionCarbonEmissionFactors
			v-if="informationsClass == 3"
		></conversionCarbonEmissionFactors>
		<physicalUnitConversion
			v-if="informationsClass == 4"
		></physicalUnitConversion>
		<footers style="position: absolute; left: 0%; top: 109.6%"></footers>
	</div>
</template>

<script>
import HeaderItem from '@/components/headerItem2'
import footers from '@/components/footers'
import unitConversion from '@/views/unitConversion/unitConversion'
import heatUnitConversion from '@/views/unitConversion/heatUnitConversion'
import conversionCarbonEmissionFactors from '@/views/unitConversion/conversionCarbonEmissionFactors'
import physicalUnitConversion from '@/views/unitConversion/physicalUnitConversion'
export default {
	name: 'unitConversionindex',
	components: {
		unitConversion,
		heatUnitConversion,
		conversionCarbonEmissionFactors,
		physicalUnitConversion,
		footers,
		HeaderItem,
	},
	data() {
		return {
			informationsClass: '1',
		}
	},
	mounted() {},
	methods: {
		getInformation(num) {
			this.informationsClass = num
		},
	},
}
</script>

<style scoped lang="less">
.unitConversionindex {
	width: 100%;
	background: #fff;
	min-height: 700px;
}

.information1 {
	display: inline-block;
	height: 100%;
	text-align: center;
	background: #f9f9f9;
	border-bottom: 3px solid #f9f9f9;
	color: #999;
	box-sizing: border-box;
	vertical-align: middle;
	font-weight: 600;
	padding: 0 20px;
}

.information1:hover {
	color: #ff0036;
}

.information2 {
	display: inline-block;
	height: 100%;
	text-align: center;
	border-bottom: 3px solid #2c5589;
	color: #2c5589;
	box-sizing: border-box;
	vertical-align: middle;
	font-weight: 600;
	padding: 0 20px;
}
</style>