web/src/views/win/messServiceWater.vue

<template>
  <el-row class="introduce">
    <el-col :span="24" class="bigImage"></el-col>
    <el-col :span="24" class="info">
      <el-col :span="24" class="menus">
        <menusIndex />
      </el-col>
      <el-col :span="24" class="bottom">
        <el-col :span="24" class="zero"> title </el-col>
        <el-col :span="24" class="zero"> content </el-col>
      </el-col>
      <el-col :span="24" class="foot">
        <foot-index />
      </el-col>
    </el-col>
  </el-row>
</template>
<script setup lang="ts">
// 信息公开-企业服务-用水发展的详情页
// TODO:需要自己排下版
/* 菜单 */
import menusIndex from '../../components/windows/menusIndex.vue'
/* 底部信息 */
import footIndex from '../../components/windows/footIndex.vue'
import { common } from '@/api/api'
import { get } from 'lodash-es'
import { ref, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const data = ref()
onMounted(() => {
  init()
})
const content_id = computed(() => {
  return get(route, 'query.content_id')
})
const init = async () => {
  const result = await common.content(content_id.value)
  if (result.errcode == 0) {
    data.value = get(result, 'data')
  }
}
</script>
<style scoped lang="scss">
.introduce {
  position: relative;

  .bigImage {
    height: 480px;
    overflow: hidden;
    background-image: url('/brief5.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .info {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;

    .menus {
      height: 66px;
      overflow: hidden;
    }

    .bottom {
      height: calc(100vh - 350px);
      overflow-y: auto;
      margin: 0 auto;

      .zero {
        margin: 0 0 40px 0;
      }

      .top {
        padding: 0 17%;
      }
    }
  }
}
</style>