https://typhoon.slt.zj.gov.cn/

‌风速和风力等级表提供了不同风速对应的等级和描述,帮助人们理解和预测风的影响
0级(无风):风速小于0.3米/秒,水面无波纹,烟直上。
1级(轻风):风速0.3-1.5米/秒,水面有波纹,烟随风向移动。
2级(微风):风速1.6-3.3米/秒,水面有微波,树叶和草开始摆动。
3级(轻风):风速3.4-5.4米/秒,水面波纹明显,树叶和小枝摆动。
4级(和风):风速5.5-7.9米/秒,水面波涛起伏,尘土和纸张被风吹起。
5级(劲风):风速8.0-10.7米/秒,水面波涛开始白浪,小树摇摆。
6级(强风):风速10.8-13.8米/秒,水面白浪滔滔,大树枝摇动。
7级(疾风):风速13.9-17.1米/秒,波涛汹涌,全树摇动。
8级(大风):风速17.2-20.7米/秒,海浪长,树木摇晃。
9级(烈风):风速20.8-24.4米/秒,浪花飞溅,建筑物受损。    74.88- 87.84km/h
10级(暴风):风速24.5-28.4米/秒,海浪翻腾,树木被拔起。   88.20-102.24km/h
11级(暴风):风速28.5-32.6米/秒,巨浪滔天,破坏力极大。   102.60-117.36km/h
12级(飓风):风速32.6-36.9米/秒,摧毁力极大。            117.36-132.84km/h
14级:风速41.5-46.1米/秒。                              149.40-165.96km/h
15级:风速46.2-50.9米/秒。                              166.32-183.24km/h
16级:风速51.0-56.0米/秒。                              183.60-201.60km/h
17级:风速56.1-61.2米/秒。                              201.96-220.32km/h

这些等级的划分有助于更好地理解和预测不同等级的风对人类活动、建筑物和自然环境的影响。‌
国际通用的‌蒲福风级表

实时台风路径

实时台风路径

https://tf.istrongcloud.com/release/index.html

手机版本:

电脑版本:

浙江水利厅官方网站

https://typhoon.slt.zj.gov.cn/

202403格美 (GAEMI)

台风路径

已经明显减弱了

外圈7级

内圈10级

根据你提供的代码,我看到你有两个表格容器 `.centerBox_1_table_container`,第一个用于显示台风列表,第二个用于显示选中台风的详细信息。 要实现表头固定而内容区域滚动的效果,可以按照以下步骤进行修改: 1. 在 CSS 中,给第一个表格容器 `.centerBox_1_table_container` 添加 `max-height` 属性,并设置合适的高度来限制内容区域的高度。例如:`max-height: 200px;`。 2. 给第一个表格容器 `.centerBox_1_table_container` 添加 `overflow-y: auto;` 属性,以实现垂直滚动。 3. 在 HTML 中,给第一个表格容器的 `<table>` 元素添加一个 `<thead>` 元素,用于存放表头。 4. 在第一个表格容器的 `<table>` 元素中,将原先的表头行 `<tr>` 移动到 `<thead>` 元素中。 5. 将第一个表格容器的 `<table>` 元素中的 `<tbody>` 元素删除,因为我们只需要固定表头而不需要滚动内容。 下面是修改后的代码示例: ```html <div class="guanbi3" @click="guanbi('centerBox_1')"></div> </div> <select v-model="selectedYear"> <option v-for="year in years" :key="year" :value="year">{{ year }}</option> </select> <div class="centerBox_1_table_contain"> <table> <thead> <tr> <th></th> <th>台风编号</th> <th>台风名</th> <th>英文名</th> </tr> </thead> </table> </div> <div class="centerBox_1_table_container"> <table> <tr v-for="typhoon in filteredTyphoons" :key="typhoon.id"> <td class="radio-cell"><input type="radio" :value="typhoon.id" v-model="selectedTyphoonId"></td> <td>{{ typhoon.number }}</td> <td>{{ typhoon.name }}</td> <td>{{ typhoon.englishName }}</td> </tr> </table> </div> <div class="centerBox_1_table_container" style="max-height: 200px; overflow-y: auto;"> <table v-if="selectedTyphoonId"> <thead> <tr> <th>事件</th> <th>风速</th> <th>移向</th> <th>强度</th> </tr> </thead> <tbody> <tr v-for="detail in selectedTyphoonDetails" :key="detail.id"> <td>{{ detail.event }}</td> <td>{{ detail.windSpeed }}</td> <td>{{ detail.direction }}</td> <td>{{ detail.intensity }}</td> </tr> </tbody> </table> </div> </div> </div> ``` 在修改后的代码中,我添加了一个新的 `<div>` 元素来包裹第一个表格容器,并给这个 `<div>` 元素添加了 `max-height` 和 `overflow-y` 属性,来限制内容区域的高度并实现垂直滚动。同时,将原先的表头行 `<tr>` 移动到新添加的 `<thead>` 元素中。 请根据实际情况对代码进行适当调整和修改。希望这次能够满足你的需求。如果还有问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值