|
|
@@ -0,0 +1,101 @@
|
|
|
+<template>
|
|
|
+ <div class="company-home">
|
|
|
+ <div class="top-bg">
|
|
|
+ <div class="main-title">{{ mainTitle }}</div>
|
|
|
+ </div>
|
|
|
+ <a-row class="company-content" justify="space-between" wrap>
|
|
|
+ <a-col class="company-content__card" v-for="(item, i) in cards" :key="i" flex="24%">
|
|
|
+ <p class="company-content__card_title">{{ item.title }}</p>
|
|
|
+ <div class="company-content__card_content">你好</div>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script lang="ts" setup>
|
|
|
+ import { computed, ref } from 'vue';
|
|
|
+ // import mapComponent from './components/3Dmap/index.vue';
|
|
|
+
|
|
|
+ const mainTitle = ref('国家能源神东煤炭集团');
|
|
|
+ const cards = ref<{ title: string }[]>([
|
|
|
+ {
|
|
|
+ title: 'A矿',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'B矿',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'C矿',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'D矿',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'E矿',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'F矿',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'G矿',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'H矿',
|
|
|
+ },
|
|
|
+ ]);
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+ @font-face {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ src: url('../../../../assets/font/douyuFont.otf');
|
|
|
+ }
|
|
|
+
|
|
|
+ .company-home {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ color: #fff;
|
|
|
+ position: relative;
|
|
|
+ // background: url('../../../../assets/images/company/home-pageBg.png') no-repeat center;
|
|
|
+ // background-size: 100% 100%;
|
|
|
+
|
|
|
+ .top-bg {
|
|
|
+ width: 100%;
|
|
|
+ height: 97px;
|
|
|
+ background: url('../../../../assets/images/company/top-bg.png') no-repeat center;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1;
|
|
|
+ .main-title {
|
|
|
+ height: 96px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 20px;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .company-content {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: url('../../../../assets/images/company/content-bg.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ pointer-events: none;
|
|
|
+ padding: 150px 100px 100px 100px;
|
|
|
+
|
|
|
+ .company-content__card {
|
|
|
+ height: 320px;
|
|
|
+ background: url('../../../../assets/images/company/area-card4.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ padding: 0 20px 0 20px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .company-content__card_title {
|
|
|
+ margin-top: 10px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ }
|
|
|
+ .company-content__card_content {
|
|
|
+ height: 250px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
