<template>
  <div :class="['friendShipLinkSectorBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
    <div :class="['friendShipLinkSectorTitle', {componentBorder: $store.state.template.previewStatus==false}]">
      <editBtn :id="id" :sort="0" :type="7" :size="1"/>
      <convertBtn :id="id" :sort="0" :type="2"/>
      <div v-if="this.$store.state.template.pageData.index[id].content.componentList[0].component_style == 1">
        <title1Style />
      </div>
    </div>
    <div :class="['friendShipLinkSectorItemBox', {componentBorder: $store.state.template.previewStatus==false}]">
      <editBtn :id="id" :sort="0" :type="4" :size="1"/>
      <convertBtn :id="id" :sort="0" :type="9"/>
      <div v-if="this.$store.state.template.pageData.index[id].content.componentList[1].component_style == 1">
        <link1Style />
      </div>
    </div>
  </div>
</template>

<script>
//编辑按钮
import editBtn from '../../../public/editBtn.vue'
import convertBtn from '../../../public/convertBtn.vue'
//标题组件
import title1Style from '../components/title/1.vue'
//友情链接组件
import link1Style from '../components/link/1.vue'

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

<style scoped lang="less">
  .friendShipLinkSectorBox {
    .componentBorder{
      border: 2px dashed #999;
    }
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .friendShipLinkSectorTitle {
      width: 80%;
      //border: 2px dashed #999;
      position: relative;
    }
    .friendShipLinkSectorItemBox {
      width: 80%;
      margin-top: 20px;
      //border: 2px dashed #999;
      position: relative;
    }
  }
</style>
