daimp-front/sub-operation-service/src/views/smartFarm/components/common.vue

<template>
  <div class="smartFarm-common-warp">
    <div class="smartFarm-common-content">
      <div class="left-menu">
        <slot v-if="$slots.left" name="left"></slot>
        <template v-else>
          <left-menu :menus="menus"></left-menu>
        </template>
      </div>
      <div class="common-content">
        <slot v-if="$slots.main" name="main"></slot>
        <template v-else></template>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import leftMenu from './leftMenu.vue';

const props = defineProps({
  currentName: { type: String, default: 'agricultural' },
});

const menus = reactive([
  {
    name: 'supplier',
    title: '农业环境监测',
    icon: 'menu1.png',
    path: '/sub-operation-service/smartFarm/main',
    isOpen: true,
    children: [
      {
        name: 'supplier',
        title: '田间监测',
        path: '/sub-operation-service/smartFarm/fieldInspection',
      },
      {
        name: 'supplier',
        title: '水质监测',
        path: '/sub-operation-service/ecommerce-supplier',
      },
      {
        name: 'supplier',
        title: '病虫害监测',
        path: '/sub-operation-service/ecommerce-supplier',
      },
    ],
  },
  {
    name: 'purchaser',
    title: '生产管理控制',
    icon: 'menu3.png',
    path: '/sub-operation-service/ecommerce-purchaser',
    isOpen: false,
    children: [],
  },
]);
</script>
<style lang="scss" scoped>
.smartFarm-common-warp {
  width: 100%;
  height: calc(100vh - 230px);
  text-align: center;
  .smartFarm-common-content {
    width: $width-main;
    margin: auto;
    height: 100%;
    display: inline-flex;
    justify-content: space-between;
    .left-menu,
    .common-content {
      height: calc(100% - 16px);
      border-radius: 8px;
      padding: 8px;
      overflow-y: auto;
    }
    .left-menu {
      width: 240px;
      background: $color-fff;
    }
    .common-content {
      width: calc(100% - 240px);
      margin-left: 16px;
    }
  }
}
</style>