introduceIndex1.vue 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <template>
  2. <el-row class="introduce">
  3. <el-col :span="24" class="bigImage"></el-col>
  4. <el-col :span="24" class="info">
  5. <el-col :span="24" class="menus">
  6. <menusIndex />
  7. </el-col>
  8. <el-col :span="24" class="bottom">
  9. <el-col :span="24" class="zero top">
  10. <top-index :info="{ title: '集团介绍', enTitle: 'INTRODUCTION' }" />
  11. </el-col>
  12. <el-col :span="24" class="zero">
  13. <company-index />
  14. </el-col>
  15. <el-col :span="24" class="foot">
  16. <foot-index />
  17. </el-col>
  18. </el-col>
  19. </el-col>
  20. </el-row>
  21. </template>
  22. <script setup lang="ts">
  23. defineOptions({ name: 'introduceIndex' })
  24. /* 菜单 */
  25. import menusIndex from '../../components/windows/menusIndex.vue'
  26. /* 顶部信息 */
  27. import topIndex from '../../components/windows/topIndex.vue'
  28. /* 顶部信息 */
  29. import companyIndex from './introduceParts/companyIndex.vue'
  30. /* 底部信息 */
  31. import footIndex from '../../components/windows/footIndex.vue'
  32. </script>
  33. <style scoped lang="scss">
  34. .introduce {
  35. position: relative;
  36. .bigImage {
  37. height: 480px;
  38. overflow: hidden;
  39. background-image: url('/brief5.png');
  40. background-repeat: no-repeat;
  41. background-size: 100% 100%;
  42. }
  43. .info {
  44. position: absolute;
  45. top: 0;
  46. width: 100%;
  47. height: 100vh;
  48. overflow: hidden;
  49. .menus {
  50. height: 66px;
  51. overflow: hidden;
  52. }
  53. .bottom {
  54. height: calc(100vh - 66px);
  55. overflow-y: auto;
  56. margin: 0 auto;
  57. .zero {
  58. margin: 0 0 40px 0;
  59. }
  60. .top {
  61. padding: 0 17%;
  62. }
  63. }
  64. }
  65. }
  66. </style>