vue中table表格

<template>
  <div>
      <div class="anlat">
            <div class="anlatHeader">
                <div class="headerLeft">
                    <div class="icon">
                        <img src="../../assets/images/dz1.png" alt="">
                    </div>
                    <div class="font">
                        <p>动植物资源</p>
                    </div>
                </div>
                <div class="headeRight">
                    <div class="bticon">
                        <div @click="updzw(1)" :class="dzwType==1?'animal':'animal noanimal'">
                            动物
                        </div> 
                        
                          <div @click="updzw(2)"  :class="dzwType==2?'noBotany Botany':'Botany'">
                            植物
                        </div>
                    </div>
                    <div class="btclose"> 
                        <img src="../../assets/images/closebull.png" alt="">
                    </div>
                </div>
            </div>

       <!-- 动物类型 -->
            <div class="anlatTab" v-show='dzwType==1'>
                <div class="anlatTabLeft">
                    <div class="TabLeftbt">
                       <div class="TabLeftbtTop" @click="upAnimal(1)">
                           <div class="acntiveImg">
                            <img v-show='activeAnimal == 1' src="../../assets/images/rightjt.png" alt="">
                           </div>
                           <p>一级保护动物</p>
                       </div>
                       <div class="TabLeftbtBottom"  @click="upAnimal(2)"> 
                           <div class="acntiveImg">
                            <img  v-show='activeAnimal == 2'  src="../../assets/images/rightjt.png" alt="">
                           </div>
                           <p>二级保护动物</p>
                     
                       </div>
                    </div>
                </div>
                <!-- 一级动物 -->
                <div class="anlatTabRigth"  v-show='activeAnimal == 1'>
                    <div class="tabletitle">
                        <p>一级保护动物（6）</p>
                    </div>
                    <div class="tab">
                        <table border="0" b cellspacing="1px" bordercolor="#254389" cellpadding = '0' style="border-collapse: collapse;">
                            <tr>
                                <th>种类</th>
                                <th>鸟类（2）</th>
                                <th colspan='5'>兽类（4）</th>
                            </tr>
                            <tr>
                                <td>名称</td>
                                <td>白颈长尾雉</td>
                                <td>黄腹角雉</td>
                                <td>云豹</td>
                                <td>黑鹰</td>
                                <td>豹</td>
                                <td>虎</td>
                            </tr>
                            <tr>
                                <td>数量</td>
                                <td>12</td>
                                <td>34</td>
                                <td>21</td>
                                <td>148</td>
                                <td>37</td>
                                <td>28</td>
                            </tr>
                        </table>
                    </div> 
                </div>


                <!-- 二级动物 -->

                 <div class="anlatTabRigth"  v-show='activeAnimal == 2'>
                    <div class="tabletitle">
                        <p>二级保护动物（12）</p>
                    </div>
                    <div class="tab ertab">
                        <table border="0" b cellspacing="1px" bordercolor="#254389" cellpadding = '0' style="border-collapse: collapse;">
                            <tr>
                                <th>种类</th>
                                <th colspan='4'>鸟类（4）</th>
                                <th colspan='9'>兽类（9）</th>
                            </tr>
                            <tr>
                                <td>名称</td>
                                <td>白鹇 </td>
                                <td>鸳鸯</td>
                                <td>鵰鸮</td>
                                <td>鸢</td>
                                <td>金猫</td>
                                <td>黑熊</td>
                                <td>穿山甲</td>
                                <td>大灵猫</td>
                                <td>小灵猫</td>
                                <td>猕猴</td>
                                <td>豺</td>
                                <td>水獭</td>
                                <td>鬣羚</td>
                            </tr>
                            <tr>
                                <td>数量</td>
                                <td>1223</td>
                                <td>4523</td>
                                <td>2321</td>
                                <td>3412</td>
                                <td>239</td>
                                <td>312</td>
                                <td>123</td>
                                <td>148</td>
                                <td>293</td>
                                <td>37</td>
                                <td>23</td>

                                <td>28</td>
                                <td>48</td>
                                 
                                  
                            </tr>
                        </table>
                    </div> 
                </div>
            </div>
<!-- 植物类型 -->
            <div class="anlatTab" v-show='dzwType==2'>

                    <div class="tab zw">
                        <table border="0" b cellspacing="1px" bordercolor="#254389" cellpadding = '0' style="border-collapse: collapse;">
                            <tr>
                                <th colspan="4">
                                    <p>维管植物</p>
                                     <br/>
                                    <p>科178&nbsp;&nbsp;属647&nbsp;&nbsp;种1</p>
                                </th>
                            </tr>
                            <tr >
                                <td style="vertical-align: middle" colspan="3">种子植物 ：科 148 属 590 种 1</td>
                                <td rowspan="3" style="vertical-align: middle">蕨类植物 ：科 30 属 57 种 83</td>
                            </tr>
                            <tr>
                                <td colspan="2">被子植物：科 148 属 590 种 1</td>
                                <td rowspan="2" style="vertical-align: middle">裸子植物：科 9 属 17 种 27</td>
                            </tr>
                            <tr>
                                <td>双子叶： 科 118 属 453 种 87</td>
                                <td>单子叶： 科 22 属 120 种 207</td>
                                 
                            </tr>
                        </table>
                    </div> 
            </div>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
       dzwType:2,      
        activeAnimal:1
    };
  },

  components: {},

  computed: {},

  mounted(){},

  methods: {
    //   动植物
    updzw(type){
        this.dzwType = type
          this.activeAnimal = 1

    },
      upAnimal(id){
          this.activeAnimal = id
      }
  },
}

</script>
<style scoped>
.anlat{
    width: 9.12rem;
    height: 2.6rem;
    background-image: url(../../assets/images/anplat.png); 
    background-size: 100% 100%;
}

.anlatHeader{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .2rem;
}
.headerLeft,.headeRight,.headeRight .bticon{
    display: flex;
    justify-content: space-between;
    align-items: center; 
}
.headerLeft .icon img,.icon{
    display: block;
    width: .4rem;
    height: .4rem;
}
.headerLeft  .font p{
    font-size: .2rem;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #1CADF1;
    line-height: .2rem;
}
 .bticon .Botany,.bticon .animal{
    font-size: .14rem;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFE54E;
    line-height: .42rem;
    text-align: center;
    cursor: pointer;
     width:1.12rem ;
     height:.42rem ;
     background-size: 100% 100%;
     background-image: url(../../assets/images/btyell.png); 
}
.bticon .noanimal{
     color: #00A5FC;
     background-image: url(../../assets/images/btbull.png); 
}
  
 .bticon .Botany{
     color: #00A5FC;
     margin-left: .1rem;
     background-image: url(../../assets/images/btbull.png); 
}
 .bticon .noBotany{
    color: #FFE54E;
    background-image: url(../../assets/images/btyell.png); 
 
 }
.btclose{
    margin-left: 30px;
}
.btclose img{
    display: block;
    cursor: pointer;
    width: .22rem;
}
.anlatTab{
    width: 98%;
    height: 1.78rem;
    border-top: 1px solid #045589;
    margin-left: 0.1rem;
    display: flex;
}
.anlatTabLeft{
    height: 1.77rem;
    width: 18%;
    border-right:1px solid #045589;
        flex-shrink: 0;
}
.TabLeftbt{
    height: 1.57rem;
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content: center;    
}
 
.TabLeftbtTop,.TabLeftbtBottom{
    display: flex;
    align-items: center;
}
.TabLeftbtTop img,.TabLeftbtBottom img{
    width: .4rem;
    height: .4rem;
    position: absolute;
    cursor: pointer;

}
.TabLeftbtTop p,.TabLeftbtBottom p{
    cursor: pointer;
    font-size: .16rem;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: .5rem;
}
.acntiveImg{ 
    width: .4rem;
    height: .4rem;
}
.tabletitle p{
    font-size: .16rem;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #1CADF1;
    line-height: .16rem;
    background: linear-gradient(360deg, #1CADF1 0%, #06D3FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-bottom: .1rem;
}
.anlatTabRigth{
    padding: .17rem;
}
.tab th,.tab td{
    text-align: center;
    font-size: .12rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: .12rem;
    border:solid #00EBFC; 
    border-width:1px 1px 1px 1px;
    padding:10px 0px;
    width: 1rem;
}
 

 /* 植物 */
 .anlatTab .zw,table{
     width: 100%;
 }
</style>