54 lines
1.2 KiB
Vue
54 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<div class="ecommerce-common-warp">
|
||
|
|
<div class="ecommerce-common-content">
|
||
|
|
<div class="left-menu">
|
||
|
|
<slot v-if="$slots.left" name="left"></slot>
|
||
|
|
<template v-else>
|
||
|
|
<leftMenu :current-name="currentName"></leftMenu>
|
||
|
|
</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' },
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.ecommerce-common-warp {
|
||
|
|
width: 100%;
|
||
|
|
height: calc(100vh - 230px);
|
||
|
|
text-align: center;
|
||
|
|
.ecommerce-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>
|