// 路口图组件
.intersection-with-interface {
  height: 100%;
}
.intersection-map {
  height: 100%;
  overflow: hidden;
  .crossDirection-display {
    // height: 650px;
    // transform-origin: center top;
    padding-top: 30px;
  }
  .changeWidth {
    width: 98% !important;
  }
  .changePaddingBottom {
    padding-bottom: 30px;
  }
  @media only screen and (min-width: 2048px){
    .crossDirection-display{
      zoom: 1.5;
    }
   }
  @media only screen and (max-width: 2048px){
    .crossDirection-display{
      zoom: 1.3;
    }
   }
  @media only screen and (max-width: 1920px){
    .crossDirection-display{
      zoom: 1.2;
    }
   }
  /*当屏幕小于等于1680px的屏幕样式*/
  @media only screen and (max-width: 1680px){
    .crossDirection-display{
      // transform: scale(0.9);
      zoom: 0.9;

    }
   }
  /*当屏幕小于等于1440px的屏幕样式*/
  @media only screen and (max-width: 1440px){
    .crossDirection-display{
      // transform: scale(0.8);
      zoom: 0.8;

    }
   }
   /*当屏幕小于等于1280px的屏幕样式*/
  @media only screen and (max-width: 1280px){
    .crossDirection-display{
      // transform: scale(0.65);
      zoom: 0.65;
    }
   }
   /*当屏幕小于等于960px的屏幕样式*/
  @media only screen and (max-width: 960px){
    .crossDirection-display{
      // transform: scale(0.5);
      zoom: 0.5;
    }
   }
    /*当屏幕小于等于720px的屏幕样式*/
  @media only screen and (max-width: 720px){
    .crossDirection-display{
      // transform: scale(0.45);
      zoom: 0.45;
    }
   }
  // 小屏幕打开首页适配样式
  .minifont {
    font-size: 12px;
    .cross-mess {
      font-size: 16px;
    }
    .cross-value {
      font-size: 12px;
    }
    .pattern-message {
      font-size: 12px;
    }
  }

  .widescreenCrossImg {
    // 宽屏最大缩放到1.3，否则高度溢出
    zoom: 1.3;
  }
  .superlargeCrossImg {
  //  transform: scale(0.9);
    zoom: 1.1;
  }
  .largeCrossImg {
    zoom: 1.1;
  }
  .middleCrossImg {
    zoom: 1;
  }
  .middleCrossImg2 {
    zoom: 0.8;
  }
  .smallCrossImg {
    zoom: 0.8;
  }
  .smallCrossImg2 {
    zoom: 0.8;
  }
  .miniCrossImg {
    zoom: 0.7;
  }
  .superminiCrossImg {
    zoom: 0.6;
  }
  .minimumCrossImg {
    zoom: 0.35;
  }
  .transMiddleCrossImg {
    -webkit-transform-origin-y: 0;
     transform: scale(0.55);
    //  transform: translateX(0.45) translateY(0.45);
    //  transform: scale(0.25);
     margin-top: 3%;
     padding: 0PX;
    //  zoom: 0.25;
   }
   .transMiddleCrossImg2 {
    -webkit-transform-origin-y: 0;
    //  transform: scale(0.27);
    //  margin-top: -1.5%;
     transform: scale(0.4);
     margin-top: 0%;
     padding: 0PX;
    //  zoom: 0.25;
   }
   .transMiddleCrossImg3 {
    -webkit-transform-origin-y: 0;
     transform: scale(0.22);
     margin-top: -1%;
     padding: 0PX;
    //  zoom: 0.25;
   }
   .transMiniCrossImg {
    -webkit-transform-origin-y: 0;
     transform: scale(0.18);
     margin-top: -1.6%;
     padding: 0PX;
    //  zoom: 0.25;
   }
   .controlText {
    position:absolute;
    top:20%;
    left:7%;
    width:25%;
    height:50px;
    color: $--color-text-primary;
    font-size:30PX;
 }
 .modeText {
    position:absolute;
    top:20%;
    left:68%;
    width:25%;
    height:50px;
    color: $--color-text-primary;
    font-size:30PX;
 }
 .stateText {
    position:absolute;
    top:12%;
    left:50%;
    width:25%;
    height:50px;
    color: $--color-text-primary;
    font-size:30PX;
 }
 .centerText {
  .text {
    font-size: 18PX;
  }
 }
.road-name-text {
  fill: $--color-text-primary !important;
  font-size: 16PX !important;
 }
}