:host{
    &.f-component-walk-page{
        // position: absolute;
        // display: none;
        // z-index: 333333;
        &.active{
            display: block;
        }
        .f-page-walker-detail-wrapper{
            // position: relative;
            position: absolute;
            z-index: 333333;
        }
        .f-page-walker-detail-wrapper-img{
            background: transparent;
        }
        .f-page-walker-detail-wrapper-content{
            position: absolute;
            &-right{
                left: calc(100% + 6px);
                top: -13px;
            }
            &-left{
                right: calc(100% + 6px);
                top: -13px;
            }
            &-bottom{
                top: calc(100% + 6px);
                left: 0;
            }
            &-top{
                bottom: calc(100% + 6px);
                left: 0;
            }
            .f-page-walker-detail-arrow{
                position: absolute;
                display: block;
                width: 12px;
                height: 16px;
                &::after {
                    position: absolute;
                    display: block;
                    content: "";
                    border-color: transparent;
                    border-style: solid;
                }
            }
            &-default{
              box-shadow: 0 3px 10px 0 rgba(0,0,0,.15);
              border-radius: 2px;
              &.f-page-walker-detail-wrapper-content-top {
                margin-bottom: 12px;
                .f-page-walker-detail-arrow {
                  bottom: -12px;
                  left: 12px;
                  width: 16px;
                  height: 12px;
                }
                .f-page-walker-detail-arrow::after {
                  border-width: 10px 8px 0;
                }
                .f-page-walker-detail-arrow::after {
                  bottom: 2px;
                  border-top-color: #fff;
                  box-shadow: -2px -2px 5px rgba(0,0,0,.08);
                }
              }
              &.f-page-walker-detail-wrapper-content-right {
                margin-left: 12px;
                .f-page-walker-detail-arrow {
                  left: -12px;
                  top: 28px;
                  width: 12px;
                  height: 16px;
                }
                .f-page-walker-detail-arrow::after {
                  border-width: 8px 10px 8px 0;
                }
                .f-page-walker-detail-arrow::after {
                  left: 2px;
                  border-right-color: #fff;
                  box-shadow: -2px -2px 5px rgba(0,0,0,.08);
                }
              }
              &.f-page-walker-detail-wrapper-content-bottom {
                margin-top: 12px;
                .f-page-walker-detail-arrow {
                  top: -12px;
                  left: 12px;
                  width: 16px;
                  height: 12px;
                }
                .f-page-walker-detail-arrow::after {
                  border-width: 0 8px 10px 8px;
                }
                .f-page-walker-detail-arrow::after {
                  top: 2px;
                  border-bottom-color: #fff;
                  box-shadow: -2px -2px 5px rgba(0,0,0,.08);
                }
              }
              &.f-page-walker-detail-wrapper-content-left {
                  margin-right: 12px;
                  .f-page-walker-detail-arrow {
                    top: 28px;
                    right: -12px;
                  }
                  .f-page-walker-detail-arrow::after {
                    border-width: 8px 0 8px 10px;
                  }
                  .f-page-walker-detail-arrow::after {
                    right: 2px;
                    border-left-color: #fff;
                  }
              }
            }
            .f-page-walker-detail-default{
              box-shadow: 0 2px 10px 0 rgba(38,40,56,0.23);
            }
            .f-page-walker-detail-inner{
              position: relative;
              display: flex;
              flex-direction: column;
              min-width: 419px;
              min-height: 165px;
              padding: 24px 12px;
              background-color: #fff;
              border-radius: 3px;
              .f-page-walker-detail-content{
                position: relative;
                min-height: 60px;
                padding-left: 74px;
                .f-page-walker-detail-img{
                  position: absolute;
                  left: 0;
                  top: 0;
                  width: 60px;
                  height: 60px;
                  border-radius: 3px;
                  // border:1px dashed #262838;
                  overflow: hidden;
                  img{
                    display: block;
                    width: 60px;
                    height: 60px;
                  }
                }
                .f-page-walker-detail-text{
                  .f-page-walker-detail-title{
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    .f-page-walker-detail-number{
                      flex-shrink: 0;
                      padding-right: 6px;
                      font-size: 12px;
                      color: rgba(0,0,0,0.85);
                      &-current{
                        font-size: 16px;
                      }
                    }
                    .f-page-walker-detail-title-text{
                      font-size: 16px;
                      color: rgba(0,0,0,0.85);
                      font-weight: 600;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                      overflow: hidden;}
                  }
                  .f-page-walker-detail-subtitle{
                    flex-shrink: 1;
                    flex-grow: 1;
                    flex-basis: 0;
                    margin-top: 6px;
                    font-size: 13px;
                    min-height: 44px;
                    color: rgba(0,0,0,0.65);
                    line-height: 22px;
                  }
                }
              }
              .f-page-walker-detail-inner-btns{
                display: flex;
                flex-direction: row;
                align-items: center;
                padding-top: 17px;
                padding-right: 10px;
                .f-page-walker-detail-inner-btn{
                  flex: 1 0 0;
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                  justify-content: flex-end;
                  .btn{
                      margin-right: 6px;
                      &:last-child{
                          margin-right: 0;
                      }
                  }
                }
              }
              .f-page-walker-detail-close{
                  position: absolute;
                  right: 10px;
                  top: 10px;
                  width: 30px;
                  height: 30px;
                  line-height: 30px;
                  text-align: center;
                  cursor: pointer;
                  .f-icon{
                      font-size: 18px;
                      color: rgba(0,0,0,0.45);
                  }
                  &:hover{
                    .f-icon{
                      color: rgba(0,0,0,0.85);
                    }
                  }
              }
            }
            .f-page-walker-detail-skip{
              display: flex;
              flex-direction: row;
              align-items: center;
              padding-left: 74px;
              background-color: #fff;
              .btn{
                color: rgba(0,0,0,0.35);
              }
            }
        }
    }
}