<template>
  <div style="width: 100%; display: flex; flex-direction: column">
    <div
      style="
        display: flex;
        width: 100%;
        padding-top: 5px;
        padding-bottom: 5px;
        font-size: 14px;
      "
    >
      <div style="display: flex; justify-content: space-between; width: 100%">
        <div v-if="center">{{ name }}</div>
        <div
          v-if="!center"
          style="width: 100%; display: flex; justify-content: center"
        >
          {{ name }}
        </div>
        <div v-if="center" class="el-icon-arrow-right"></div>
      </div>
    </div>
    <div v-if="center" style="display: flex; width: 100%; align-items: center">
      <div style="height: 6px; background: #477eff; width: 2px"></div>
      <div
        style="width: 120px; height: 2px; opacity: 0.7; background: #477eff"
      ></div>
      <div
        style="height: 1px; opacity: 0.7; width: 100%; background: #477eff"
      ></div>
      <div
        style="
          height: 4px;
          background: #477eff;
          width: 2px;
          margin-right: 2px;
          margin-left: 2px;
        "
      ></div>
      <div style="height: 4px; background: #477eff; width: 2px"></div>
    </div>
    <div v-else style="display: flex; width: 100%; align-items: center">
      <div
        style="
          height: 4px;
          background: #477eff;
          width: 2px;
          margin-right: 2px;
          margin-left: 2px;
        "
      ></div>
      <div style="height: 4px; background: #477eff; width: 2px"></div>

      <div
        style="height: 1px; opacity: 0.7; width: 100%; background: #477eff"
      ></div>
      <div
        style="
          height: 4px;
          background: #477eff;
          width: 2px;
          margin-right: 2px;
          margin-left: 2px;
        "
      ></div>
      <div style="height: 4px; background: #477eff; width: 2px"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "titileLine",
  props: {
    name: "",
    center: {
      type: Boolean,
      default: true,
    },
    iconleft: {
      type: Boolean,
      default: true,
    },
  },
};
</script>

<style scoped></style>
