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
How to switch the content of the Carousel revolving door, including the AQI level, by swiping the mobile phone left and right in the element plus frame
Guess you like
Origin blog.csdn.net/u010782109/article/details/131698738
Ranking