静态页面结构树

最新推荐文章于 2024-08-22 11:06:05 发布

m0_62782752

最新推荐文章于 2024-08-22 11:06:05 发布

阅读量113

点赞数 2

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_62782752/article/details/136352179

版权

<div class="vue2_tree" >
       <div class="topBox">
              <div class="topBoxL">
                       <div class="labelBox labelBox1">
                            <div class="labelText ">参与人</div>
                             <img class="imgShow" src="./assets/img/jiahao.png" />
                              <img class="imgShow" src="./assets/img/jianhao.png" />
                           </div> 
                  </div>
                   <div class="topBoxR"></div>
           </div>
           <div class="bottomBox">
                    <div class="bottomBoxL">
                            <div class="labelBox labelBox2">
                                    <div class="labelText">市场主体</div>
                                     <img class="imgShow" src="./assets/img/jiahao.png" />
                                      <img class="imgShow" src="./assets/img/jianhao.png" />
                              </div> 
                              <div class="labelBox labelBox3 ">
                                      <div class="labelText">主体1</div>
                                      <img class="imgShow" src="./assets/img/jiahao.png" />
                                       <img class="imgShow" src="./assets/img/jianhao.png" />
                                </div> 
                                        <div class="labelBox labelBox3">
                                         <div class="labelText">主体2</div>
                                          <img class="imgShow" src="./assets/img/jiahao.png" />
                                          <img class="imgShow" src="./assets/img/jianhao.png" />
                                 </div> 
                                  <div class="labelBox labelBox3">
                                           <div class="labelText">主体3</div>
                                            <img class="imgShow" src="./assets/img/jiahao.png" />
                                             <img class="imgShow" src="./assets/img/jianhao.png" />
                                   </div> 
                                   <div class="labelBox labelBox3">
                                              <div class="labelText">主体4</div>
                                              <img class="imgShow" src="./assets/img/jiahao.png" />
                                              <img class="imgShow" src="./assets/img/jianhao.png" />
                                     </div> 
                      </div>
                       <div class="bottomBoxR">
                                      <div class="labelBox labelBox2 labelBox2_2">
                                              <div class="labelText">内部联系人</div>
                                              <img class="imgShow" src="./assets/img/jiahao.png" />
                                              <img class="imgShow" src="./assets/img/jianhao.png" />
                                       </div> 
                                        <div class="labelBox labelBox2 labelBox3_2">
                                               <div class="labelText">内部1</div>
                                                <img class="imgShow" src="./assets/img/jiahao.png" />
                                                <img class="imgShow" src="./assets/img/jianhao.png" />
                                        </div> 
                                        <div class="labelBox labelBox2 labelBox3_2">
                                                <div class="labelText">内部2</div>
                                                <img class="imgShow" src="./assets/img/jiahao.png" />
                                                <img class="imgShow" src="./assets/img/jianhao.png" />
                                        </div> 
                                         <div class="labelBox labelBox2 labelBox3_2">
                                                 <div class="labelText">内部3</div>
                                                 <img class="imgShow" src="./assets/img/jiahao.png" />
                                                  <img class="imgShow" src="./assets/img/jianhao.png" />
                                          </div> 
                                           <div class="labelBox labelBox2 labelBox3_2">
                                                   <div class="labelText">内部4</div>
                                                  <img class="imgShow" src="./assets/img/jiahao.png" />
                                                   <img class="imgShow" src="./assets/img/jianhao.png" />
                                           </div> 
                       </div>
                    </div>
              </div>

css

<style scoped lang="less">
.vue2_tree{
    width: 100%;
    min-height: 100px;
    // background: skyblue;
    position: relative;
    margin: auto;

    .topBox{
        position:absolute;
        top:0px;
        left:43%;
        margin-left:-100Px;
        display: flex;
        flex:1;
        margin-top:10px;
      .topBoxL{
        width:200px;
        height:100px;
        // background: #333;
        border-right: 1px solid #333;
      }  
      .topBoxR{
        width:200px;
        height:100px;
        // background:skyblue;
        // border-left: 1px solid #333;
      }
    }
    .bottomBox{
        position:absolute;
        top:100px;
        left:47%;
        margin-left:-100Px;
        display: flex;
        flex:1;
        margin-top:10px;
        .bottomBoxL{
        width:140px;
        height:165px;
        // background: skyblue;
        border-top: 1px solid #333;
        border-left: 1px solid #333;
      }  
      .bottomBoxR{
        width:140px;
        height:165px;
        // background:#333;
        border-top: 1px solid #333;
        border-right: 1px solid #333;
      }
    }
    .labelBox{
        width: 80px;
        height:50px;
        
        border:1px solid pink;
        background: pink;
        border-radius: 10px;
        margin: auto;
        // margin-top:10px;
        .labelText{
            margin:5px 0px;
        }
    }
    .labelBox1{
        position: absolute;
       
        left:40%;
    }
    .labelBox2{
        position: absolute;
        top: 15px;
        left: -40px;
        // margin:auto;
    }
    
    .labelBox3:nth-of-type(2){
        position: absolute;
        top: 50px+1*30px;
        left: -110px; 
    }
      //水平线
      .labelBox3:nth-of-type(2):after{
        content:' ';
        position:absolute;
        top:23px;
        left:80px;
        width:30px;
        border:none;
        border-top:1px solid #333;

    }
    .labelBox3:nth-of-type(3){
        position: absolute;
        top: 50px+1*30px;
        left: 30px; 
    }
    //水平线
    .labelBox3:nth-of-type(3):after{
        content:' ';
        position:absolute;
        top:23px;
        left:-30px;
        width:30px;
        border:none;
        border-top:1px solid #333;

    }
    .labelBox3:nth-of-type(4){
        position: absolute;
        top: 50px+3*30px;
        left: -110px; 
    }
      //水平线
      .labelBox3:nth-of-type(4):after{
        content:' ';
        position:absolute;
        top:23px;
        left:80px;
        width:30px;
        border:none;
        border-top:1px solid #333;

    }
    .labelBox3:nth-of-type(5){
        position: absolute;
        top: 50px+3*30px;
        left: 30px; 
    }
       //水平线
       .labelBox3:nth-of-type(5):after{
        content:' ';
        position:absolute;
        top:23px;
        left:-30px;
        width:30px;
        border:none;
        border-top:1px solid #333;

    }
    .labelBox2_2{
        position: absolute;
        top: 15px;
        left: 240px;
    }

    .labelBox3_2:nth-of-type(2){
        position: absolute;
        top: 50px+1*30px;
        left: 170px; 
    }
    //水平线
    .labelBox3_2:nth-of-type(2):after{
        content:' ';
        position:absolute;
        top:23px;
        left:80px;
        width:30px;
        border:none;
        border-top:1px solid #333;

    }
    .labelBox3_2:nth-of-type(3){
        position: absolute;
        top: 50px+1*30px;
        left: 310px; 
    }
    //水平线
    .labelBox3_2:nth-of-type(3):after{
        content:' ';
        position:absolute;
        top:23px;
        left:-30px;
        width:30px;
        border:none;
        border-top:1px solid #333;

    }
    .labelBox3_2:nth-of-type(4){
        position: absolute;
        top: 50px+3*30px;
        left: 170px; 
    }
      //水平线
      .labelBox3_2:nth-of-type(4):after{
        content:' ';
        position:absolute;
        top:23px;
        left:80px;
        width:30px;
        border:none;
        border-top:1px solid #333;

    }
    .labelBox3_2:nth-of-type(5){
        position: absolute;
        top: 50px+3*30px;
        left: 310px; 
    }
    //水平线
    .labelBox3_2:nth-of-type(5):after{
        content:' ';
        position:absolute;
        top:23px;
        left:-30px;
        width:30px;
        border:none;
        border-top:1px solid #333;

    }
    
}
</style>

效果图中的结构树部分