<template>
  <div class="public-service">
    <m-card mode="border">
      <div class="beauty1"><BeautyStreet /></div>
      <div class="beauty2"><BeautyHome /></div>
    </m-card>
    <m-card mode="border">
      <Old />
    </m-card>
    <m-card mode="border">
      <Ecology />
    </m-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import BeautyStreet from './beauty-street.vue'
import BeautyHome from './beauty-home.vue'
import Old from './old.vue'
import Ecology from './ecology.vue'

export default defineComponent({
  name: 'PublicService',
  components: { BeautyStreet, BeautyHome, Old, Ecology },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'

.public-service
  $full()
  display flex
  justify-content space-between
  >div
    height 100%
    width 33%
    .beauty1
      flex 1
    .beauty2
      flex 1.6
</style>
