1.先给最全的代码 最后详细解释
//HomePage.vue 页面
<template>
<div class="block text-center" trigger="hover" style="overflow: scroll;">
<el-carousel ref="myRef" height="auto" :autoplay="false" :initial-index="clicknum" @change="chfun">
<el-carousel-item style=" height: calc(100vh - 112px);min-height: 665px; overflow: scroll;" v-for="item in items" :key="item">
<el-row style="color:#FFF; text-align: left;margin-top: 30px;">
<el-col :span="20"><span style="padding-left: 20px; font-size: 22px;">{
{
item.areaName}} <span style="font-size: 12px;">{
{
item.quyudex }}</span> </span></el-col>
<el-col :span="4"></el-col>
<el-col :span="12"><span style="padding-left: 20px;font-size: 12px;">空气质量指数/AQI</span></el-col>
</el-row>
<el-row style="color:#FFF; text-align: center;margin-top: 10px;">
<el-col :span="24"><span style="font-size: 38px; font-weight: 600;" :style="{color:item.AQIcolor}">{
{
item.AQI}}</span></el-col>
<el-col :span="24"><span style="font-size: 26px;font-weight: 600; ">{
{
item.name}}</span></el-col>
<el-col :span="24"><span style="font-size: 18px;">首要污染物:{
{
item.CriticalPollutants.replace("PM10","颗粒物(PM₁₀)").replace("PM25","颗粒物(PM₂.₅)").replace("SO2","二氧化硫(SO₂)").replace("CO","一氧化碳(CO)").replace("NO2","二氧化氮(SO₂)").replace("O3_8H","臭氧(O₃)").replace("O3","臭氧(O₃)").replace("_",",")}}</span></el-col>
<el-col :span="24"><span style="font-size: 14px;">更新时间:{
{
item.datetime}}</span></el-col>
</el-row>
<el-row class="row-bg" justify="space-evenly" style="color:#FFF;font-size: 14px; margin-top: 10px;">
<el-col :span="6" style="display: flex; justify-content: center;">
<div style="height: 70px; width: 70px; border-radius: 70px; background: rgba(255, 255, 255, 0.4);">
<div style="text-align: center;line-height: 34px;"> {
{
item.PM25}}</div>
<div style="width: 40px;margin-left: 15px;height: 2px;background: #fff;" :style="{background:item.pm25color}"></div>
<div style="text-align: center;line-height: 30px;">PM₂.₅</div>
</div>
</el-col>
<el-col :span="6" style="display: flex; justify-content: center;">
<div style="height: 70px; width: 70px; border-radius: 70px; background: rgba(255, 255, 255, 0.4);">
<div style="text-align: center;line-height: 34px;"> {
{
item.PM10}}</div>
<div style="width: 40px;margin-left: 15px;height: 2px;background: #fff;" :style="{background:item.pm10color}"></div>
<div style="text-align: center;line-height: 30px;">PM₁₀</div>
</div>
</el-col>
<el-col :span="6" style="display: flex; justify-content: center;">
<div style="height: 70px; width: 70px; border-radius: 70px; background: rgba(255, 255, 255, 0.4);">
<div style="text-align: center;line-height: 34px;"> {
{
item.SO2}}</div>
<div style="width: 40px;margin-left: 15px;height: 2px;background: #fff;" :style="{background:item.so2color}"></div>
<div style="text-align: center;line-height: 30px;">SO₂</div>
</div>
</el-col>
</el-row>
<el-row class="row-bg" justify="space-evenly" style="color:#FFF;font-size: 14px; margin-top: 20px;">
<el-col :span="6" style="display: flex; justify-content: center;">
<div style="height: 70px; width: 70px; border-radius: 70px; background: rgba(255, 255, 255, 0.4);">
<div style="text-align: center;line-height: 34px;"> {
{
item.NO2}}</div>
<div style="width: 40px;margin-left: 15px;height: 2px;background: #fff;" :style="{background:item.no2color}"></div>
<div style="text-align: center;line-height: 30px;">NO₂</div>
</div>
</el-col>
<el-col :span="6" style="display: flex; justify-content: center;">
<div style="height: 70px; width: 70px; border-radius: 70px; background: rgba(255, 255, 255, 0.4);">
<div style="text-align: center;line-height: 34px;"> {
{
item.O3}}</div>
<div style="width: 40px;margin-left: 15px;height: 2px;background: #fff;" :style="{background:item.o3color}"></div>
<div style="text-align: center;line-height: 30px;">O₃</div>
</div>
</el-col>
<el-col :span="6" style="display: flex; justify-content: center;">
<div style="height: 70px; width: 70px; border-radius: 70px; background: rgba(255, 255, 255, 0.4);">
<div style="text-align: center;line-height: 34px;"> {
{
item.CO}}</div>
<div style="width: 40px;margin-left: 15px;height: 2px;background: #fff;" :style="{background:item.cocolor}"></div>
<div style="text-align: center;line-height: 30px;">CO</div>
</div>
</el-col>
</el-row>
<el-row style="color:#FFF; text-align: left;margin-top: 10px;">
<el-col :span="12"><span style="padding-left: 25px;font-size: 14px;">温馨提示:</span></el-col>
</el-row>
<el-row style="color:#FFF; text-align: left;margin-top: 10px;">
<el-col :span="4">
<el-image style="padding:2px;box-sizing: border-box;margin-left: 25px; width: 40px; height: 40px;border: 1px solid #FFF ;" :src="pb" :fit="'fill'" />
</el-col>
<el-col :span="20" style="padding-left: 25px;font-size: 14px; display: flex; flex-direction: column;justify-content: center; ">{
{
item.tishi[0]}}</el-col>
<el-col :span="4">
<el-image style="padding:2px;box-sizing: border-box;margin-left: 25px; width: 40px; height: 40px;border: 1px solid #FFF ;" :src="jr" :fit="'fill'" />
</el-col>
<el-col :span="20" style="padding-left: 25px;font-size: 14px; display: flex; flex-direction: column;justify-content: center; ">{
{
item.tishi[1]}}</el-col>
<el-col :span="4">
<el-image style="padding:2px;box-sizing: border-box;margin-left: 25px; width: 40px; height: 40px;border: 1px solid #FFF ;" :src="mg" :fit="'fill'" />
</el-col>
<el-col :span="20" style="padding-left: 25px;font-size: 14px; display: flex; flex-direction: column;justify-content: center; ">{
{
item.tishi[2]}}</el-col>
<el-col :span="4">
<el-image style="padding:2px;box-sizing: border-box; margin-left: 25px; width: 40px; height: 40px;border: 1px solid #FFF ;" :src="ch" :fit="'fill'" />
</el-col>
<el-col :span="20" style="padding-left: 25px;font-size: 14px; display: flex; flex-direction: column;justify-content: center; ">{
{
item.tishi[3]}}</el-col>
</el-row>
</el-carousel-item>
</el-carousel>
</div>
</template>
<script lang="ts" setup
element plus框架中手机左右滑动如何切换Carousel 走马灯的内容,包括AQI等级
最新推荐文章于 2024-05-30 11:27:58 发布