<template>
  <div :class="['listSectorBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
    <div :class="['listSectorMainBox', {componentBorder: $store.state.template.previewStatus==false}]">
      <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="1" :size="15" :y="y"/>
      <convertBtn :id="id" :sort="0" :type="10"/>
      <list1Style />
    </div>
  </div>
</template>

<script>
import editBtn from '../../../public/editBtn.vue'
import convertBtn from '../../../public/convertBtn.vue'
import list1Style from '../components/mainList/1.vue'

export default {
  components: {
    editBtn,
    convertBtn,
    list1Style
  },
  props: {
    id:{
      type:Number,
      default:0
    },
    y:{
      type:Number,
      default:0
    },
    dataSort:{
      type:Number,
      default:0
    }
  },
  data() {
    return {
      
    };
  },
};
</script>

<style scoped lang="less">
  .listSectorBox {
    width: 100%;
    height: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .componentBorder{
      border: 2px dashed #999;
    }
    .listSectorMainBox {
      width: 80%;
      height: 900px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }
  }
</style>
