vue中table表格
<template><div><div class="anlat"><div class="anlatHeader"><div class="headerLeft"><div class="icon"><img src="../../assets/images/
·
<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 属647 种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>
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献4条内容
所有评论(0)