123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129 |
- <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>
|