bigDataApp/pages/index/index.vue

<template>
  <view>
    <view class="weather">
      <image
        :src="
          'https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/img/weather/' +
          weatherinfo.wea +
          '.png'
        "
        mode=""
        class="weaimg"
      ></image>
      <view class="weatext">
        <view class="weatext_title">
          {{ hello }}
        </view>
        <view class="">
          {{ $isneutral ? '欢迎登录云飞智控' : '欢迎登录智控' }}
        </view>
      </view>
    </view>
    <view class="weatherinfo">
      <view class="weatherinfo_item">
        <image
          :src="$imageURL + '/bigdata_app/newindex/weizhi.png'"
          mode=""
          class="weaimg"
        ></image>
        <view class="textbox">
          {{ weatherinfo.district }}
        </view>
      </view>
      <view class="weatherinfo_item">
        <image
          :src="$imageURL + '/bigdata_app/newindex/wendu.png'"
          mode=""
          class="weaimg"
        ></image>
        <view class="textbox"> {{ weatherinfo.at }}℃ </view>
      </view>
      <view class="weatherinfo_item">
        <image
          :src="$imageURL + '/bigdata_app/newindex/shidu.png'"
          mode=""
          class="weaimg"
        ></image>
        <view class="textbox">
          {{ weatherinfo.ah }}
        </view>
      </view>
      <view class="weatherinfo_item">
        <view class="first_item"> PM2.5 </view>
        <view class="textbox">
          {{ weatherinfo.air_pm25 }}
        </view>
      </view>
    </view>
    <view class="functionbox">
      <view class="functionbox_title"> 功能应用 </view>
      <view class="functionbox_text">
        <view
          class="functionbox_text_item"
          v-if="jurisdiction.sqtf"
          @click="tabfunction(0)"
        >
          <image
            :src="$imageURL + '/bigdata_app/newindex/base.png'"
            mode=""
            class="itemimg"
          >
          </image>
          <view class=""> 四情基地 </view>
        </view>
        <view class="functionbox_text_item" @click="tabfunction(1)">
          <image
            :src="$imageURL + '/bigdata_app/newindex/worm.png'"
            mode=""
            class="itemimg"
          >
          </image>
          <view class=""> 病虫识别 </view>
        </view>
        <view
          class="functionbox_text_item"
          v-if="jurisdiction.zjtf"
          @click="tabfunction(2)"
        >
          <image
            :src="$imageURL + '/bigdata_app/newindex/knowledge.png'"
            mode=""
            class="itemimg"
          >
          </image>
          <view class=""> 知识百科 </view>
        </view>
        <view class="functionbox_text_item" @click="tabfunction(3)">
          <image
            :src="$imageURL + '/bigdata_app/newindex/aftersale.png'"
            mode=""
            class="itemimg"
          >
          </image>
          <view class=""> 售后服务 </view>
        </view>
      </view>
    </view>
    <view class="facilitybox">
      <view class="facilitybox_title"> 系统设备 </view>
      <view class="facilitybox_itembox">
        <view
          class="facilitybox_item"
          v-if="jurisdiction.cbtf"
          @click="tabequipment('../cb/index/index')"
        >
          <image
            :src="$imageURL + '/bigdata_app/newindex/cb.png'"
            mode=""
            class="itemimg"
          >
          </image>
          <view class=""> 测报系统 </view>
        </view>
        <view
          class="facilitybox_item"
          v-if="jurisdiction.cbyj"
          @click="tabequipment('../cbqxyj/cbwarn')"
        >
          <image
            :src="$imageURL + '/bigdata_app/newindex/cbyj.png'"
            mode=""
            class="itemimg"
          >
          </image>
          <view class=""> 测报预警 </view>
        </view>
        <view
          class="facilitybox_item"
          v-if="jurisdiction.fztf"
          @click="tabequipment('../prevention/index')"
        >
          <image
            :src="$imageURL + '/bigdata_app/newindex/fz.png'"
            mode=""
            class="itemimg"
          >
          </image>
          <view class=""> 防治系统 </view>
        </view>
        <view
          class="facilitybox_item"
          v-if="jurisdiction.jktf"
          @click="tabequipment('../monitor/index')"
        >
          <image
            :src="$imageURL + '/bigdata_app/newindex/jk.png'"
            mode=""
            class="itemimg"
          >
          </image>
          <view class=""> 监控系统 </view>
        </view>
        <view
          class="facilitybox_item"
          v-if="jurisdiction.hjtf"
          @click="tabequipment('../environment/index')"
        >
          <image
            :src="$imageURL + '/bigdata_app/newindex/hj.png'"
            mode=""
            class="itemimg"
          >
          </image>
          <view class=""> 环境监测 </view>
        </view>
        <view
          class="facilitybox_item"
          v-if="jurisdiction.qxz"
          @click="tabequipment('../qxzyj/cbwarn', '5')"
        >
          <image
            :src="$imageURL + '/bigdata_app/newindex/qxyj.png'"
            mode=""
            class="itemimg"
          >
          </image>
          <view class=""> 气象预警 </view>
        </view>
        <view
          class="facilitybox_item"
          v-if="jurisdiction.sq"
          @click="tabequipment('../qxzyj/cbwarn', '15')"
        >
          <image
            :src="$imageURL + '/bigdata_app/newindex/sqyj.png'"
            mode=""
            class="itemimg"
          >
          </image>
          <view class=""> 墒情预警 </view>
        </view>
        <view
          class="facilitybox_item"
          v-if="jurisdiction.ggtf"
          @click="tabequipment('../irrigate/index')"
        >
          <image
            :src="$imageURL + '/bigdata_app/newindex/guangai.png'"
            mode=""
            class="itemimg"
          >
          </image>
          <view class=""> 智能灌溉 </view>
        </view>
        <view
          class="facilitybox_item"
          v-if="jurisdiction.sbtf"
          @click="tabequipment('../equipMange/index/index')"
        >
          <image
            :src="$imageURL + '/bigdata_app/newindex/user.png'"
            mode=""
            class="itemimg"
          >
          </image>
          <view class=""> 用户管理 </view>
        </view>
        <view
          class="facilitybox_item"
          v-if="jurisdiction.sbtf"
          @click="tabequipment('../warning/index')"
        >
          <image
            :src="$imageURL + '/bigdata_app/newindex/cb.png'"
            mode=""
            class="itemimg"
          >
          </image>
          <view class=""> 预警列表 </view>
        </view>
      </view>
    </view>
    <view class="insectattack">
      <view class="insectattack_title" @click="worm">
        <view class=""> 虫情百科 </view>
        <view class="iconbox">
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>
      <view class="insectattack_listbox">
        <view class="insectattack_list">
          <view class="list_box list_box1" @click="introduce(79, '虫情百科')">
            <view class="list_box_xiang">
              <view class="list_box_xiang_click"> 详情 </view>
            </view>
            <view class="list_box_info">
              <view class="list_box_info_name"> 小地老虎 </view>
              <view class="list_box_info_text">
                该虫能危害百余种植物，是对农、林木幼苗危害很大的地下害虫，
                在东北主要危害落叶松、红松、水曲柳、核桃楸等苗木
              </view>
            </view>
          </view>
          <view class="list_box list_box2" @click="introduce(369, '虫情百科')">
            <view class="list_box_xiang">
              <view class="list_box_xiang_click"> 详情 </view>
            </view>
            <view class="list_box_info">
              <view class="list_box_info_name"> 草地贪夜蛾 </view>
              <view class="list_box_info_text">
                草地贪夜蛾被认为是世界上最具破坏性的害虫之一，其巨大的破坏性主要源于其“贪”的本性——贪吃、贪育、贪婪、广适、耐药。
              </view>
            </view>
          </view>
          <view class="list_box list_box3" @click="introduce(6, '虫情百科')">
            <view class="list_box_xiang">
              <view class="list_box_xiang_click"> 详情 </view>
            </view>
            <view class="list_box_info">
              <view class="list_box_info_name"> 棉铃虫 </view>
              <view class="list_box_info_text">
                棉铃虫具有高度多食性，可以为害20余科200多种植物，但比较喜食禾本科、锦葵科、茄科和豆科植物的花蕾和果实等繁殖器官。
              </view>
            </view>
          </view>
          <view class="list_box list_box4" @click="introduce(67, '虫情百科')">
            <view class="list_box_xiang">
              <view class="list_box_xiang_click"> 详情 </view>
            </view>
            <view class="list_box_info">
              <view class="list_box_info_name"> 稻纵卷叶螟 </view>
              <view class="list_box_info_text">
                生命潜能强，寿命长，产卵期长，产卵量也多。各代雌、雄蛾比例几乎各占半数。蛾子有强烈的趋荫蔽栖息习性
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="insectattack">
      <view class="insectattack_title" @click="virus">
        <view class=""> 病害百科 </view>
        <view class="iconbox">
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>
      <view class="insectattack_listbox">
        <view class="insectattack_list">
          <view class="list_box list_box5" @click="introduce(267, '病害百科')">
            <view class="list_box_xiang">
              <view class="list_box_xiang_click"> 详情 </view>
            </view>
            <view class="list_box_info">
              <view class="list_box_info_name"> 小麦赤霉病 </view>
              <view class="list_box_info_text">
                小麦赤霉病从苗期到穗期均可发生，引起苗腐、茎基腐、秆腐和穗腐，以穗腐危害最大。湿度大时，病部均可见粉红色霉层。
              </view>
            </view>
          </view>
          <view class="list_box list_box6" @click="introduce(320, '病害百科')">
            <view class="list_box_xiang">
              <view class="list_box_xiang_click"> 详情 </view>
            </view>
            <view class="list_box_info">
              <view class="list_box_info_name"> 大豆根腐病 </view>
              <view class="list_box_info_text">
                初期茎基部或胚根表皮出现淡红褐色不规则的小斑，后变红褐色凹陷坏死斑，绕根茎扩展致根皮枯死
              </view>
            </view>
          </view>
          <view class="list_box list_box7" @click="introduce(292, '病害百科')">
            <view class="list_box_xiang">
              <view class="list_box_xiang_click"> 详情 </view>
            </view>
            <view class="list_box_info">
              <view class="list_box_info_name"> 玉米大斑病 </view>
              <view class="list_box_info_text">
                玉米大斑病主要为害叶片，严重时也为害叶鞘和苞叶。植株下部叶片先发病，然后向上扩展。
              </view>
            </view>
          </view>
          <view class="list_box list_box8" @click="introduce(278, '病害百科')">
            <view class="list_box_xiang">
              <view class="list_box_xiang_click"> 详情 </view>
            </view>
            <view class="list_box_info">
              <view class="list_box_info_name"> 水稻稻瘟病 </view>
              <view class="list_box_info_text">
                发生于三叶前，由种子带菌所致。病苗基部灰黑，上部变褐，卷缩而死，湿度较大时病部产生大量灰黑色霉层。
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-modal
      v-model="show"
      :mask-close-able="true"
      title=""
      :show-cancel-button="true"
      confirm-text="拍病害"
      cancel-text="拍虫害"
      cancel-color="#4BB85F"
      content="拍照识别病虫害"
      @confirm="confirm"
      @cancel="cancel"
    ></u-modal>
    <kps-image-cutter
      @ok="onok"
      @cancel="oncancle"
      :url="url"
      :fixed="false"
      :blob="true"
      :maxWidth="500"
      :maxHeight="380"
      :height="380"
    ></kps-image-cutter>
    <view class="loading" v-if="loadTF" @touchmove.stop.prevent="moveHandle">
      <u-loading mode="flower" size="100" :show="true"></u-loading>
    </view>
  </view>
</template>

<script>
import kpsImageCutter from '@/components/ksp-image-cutter/ksp-image-cutter.vue';
import jsencrypt from '@/components/jsencrypt/jsencrypt.vue';
export default {
  components: {
    kpsImageCutter,
  },
  data() {
    return {
      weatherinfo: {
        wea: '晴',
      },
      hello: '',
      jurisdiction: {
        cbtf: false,
        jktf: false,
        hjtf: false,
        fztf: false,
        sytf: false,
        sbtf: false,
        sqtf: false,
        zjtf: false,
        sftf: false,
        ggtf: false,
        qxz: false,
        sq: false,
        cbyj: false,
      },
      show: false,
      url: '',
      loadTF: false,
    };
  },
  watch: {
    url(news) {
      if (news != '') {
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 500,
        });
      }
    },
  },
  methods: {
    moveHandle() {
      return;
    },
    async getcity(lng, lat) {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=device.device_manage.weathers',
        data: {
          lng: lng,
          lat: lat,
        },
      });
      console.log(res);
      this.weatherinfo = res[0];
    },
    async getUserlogin() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=user.login.user_login_info',
      });
      uni.setStorage({
        key: 'jurisdiction',
        data: JSON.stringify(res.children),
      });
      uni.setStorage({
        key: 'myuser_type',
        data: JSON.stringify(res.myuser_type),
      });
      uni.setStorage({
        key: 'myuid',
        data: JSON.stringify(res.myuid),
      });
      let QueryPermission = (id) => {
        let list = res.children;
        for (var i = 0; i < list.length; i++) {
          if (list[i].children) {
            var data = list[i].children;
            for (var j = 0; j < data.length; j++) {
              if (data[j].children) {
                var item = data[j].children;
                for (var k = 0; k < item.length; k++) {
                  if (item[k].pur_id == id) {
                    return true;
                  }
                }
              }
            }
          }
        }
        return false;
      };
      this.jurisdiction = {
        cbtf: false,
        jktf: false,
        hjtf: false,
        fztf: false,
        sytf: false,
        sbtf: false,
        sqtf: false,
        zjtf: false,
        qxz: QueryPermission(242),
        sq: QueryPermission(284),
        cbyj: QueryPermission(243),
      };
      // console.log(res.children)
      for (var i = 0; i < res.children.length; i++) {
        switch (res.children[i].pur_id) {
          case 36:
            this.jurisdiction.cbtf = true; //"测报系统"
            break;
          case 42:
            this.jurisdiction.jktf = true; //"可视农业"
            break;
          case 40:
            this.jurisdiction.hjtf = true; //"环境监测系统"
            break;
          case 44:
            this.jurisdiction.fztf = true; //"防治系统"
            break;
          case 58:
            this.jurisdiction.sytf = true; //"溯源系统"
            break;
          case 28:
            this.jurisdiction.sbtf = true; //"系统管理"
            break;
          case 25:
            this.jurisdiction.sqtf = true; //"四情基地"
            break;
          case 124:
            this.jurisdiction.zjtf = true; //"专家诊断"
            break;
          case 202:
            this.jurisdiction.ggtf = true; //"灌溉控制系统"
            break;
        }
      }
    },
    tabfunction(index) {
      if (index == 0) {
        uni.navigateTo({
          url: '../fourBase/index',
        });
      } else if (index == 1) {
        var that = this;
        this.show = true;
      } else if (index == 2) {
        uni.navigateTo({
          url: '../expertDiagnosis/index',
        });
      } else if (index == 3) {
        uni.navigateTo({
          url: '../afterSale/index',
        });
      }
    },
    tabequipment(url, type) {
      console.log(url);
      uni.navigateTo({
        url: `${url}${type ? `?typeId=${type}` : ''}`,
      });
    },
    onok(ev) {
      this.path = this.url;
      console.log(ev);
      this.loadTF = true;
      uni.showLoading({
        mask: true,
        success: function () {
          console.log(999);
        },
      });
      // var encrypt = new jsencrypt();
      var publiukey = `-----BEGIN PUBLIC KEY-----
				MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC6m92fXUrccS4SoLg4W4jPRNua
				4BcRk4ldLcqPuQpD2Mds2+hw+Gi+0MUnshF/r/DTcCJgkt7rtoY9EB6/XJ6MFw14
				whhESFie/lZUWRsk8M89Rkr8m5rwmBl+uLAd5LopyshFqKTBXeT2ytHP1JCQLPBO
				34Fy4/yEz4qEzkzBuwIDAQAB
				-----END PUBLIC KEY-----`;
      var time = +new Date();
      var str2 = 'YuNfEi' + time + 'YuNfEi';
      var pubblicData = jsencrypt.setEncrypt(publiukey, str2);
      // encrypt.setPublicKey(str);
      // var time = +new Date();
      // var str2 = 'YuNfEi' + time + 'YuNfEi'
      // var encrypted = encrypt.encrypt(str2);
      console.log(pubblicData);
      if (this.flag == 2) {
        console.log('111');
        // pest.pests.insect_discern 虫害
        uni.uploadFile({
          // url: 'http://dev.hnyfwlw.com/api/api_gateway?method=base.bases.base_photo', //仅为示例，非真实的接口地址
          url: 'https://web.hnyfwlw.com/api/api_gateway?method=pest.pests.insect_discern', //仅为示例，非真实的接口地址
          filePath: ev.path,
          name: 'img_file',
          formData: {
            user: 'test',
            sign: pubblicData,
          },
          success: (uploadFileRes) => {
            console.log(JSON.parse(uploadFileRes.data));
            this.loadTF = false;
            uni.navigateTo({
              url:
                '../disandpests/index?datas=' +
                uploadFileRes.data +
                '&path=' +
                ev.path,
            });
          },
        });
      } else if (this.flag == 1) {
        //pest.pests.insect_discern病害识别
        uni.showLoading({
          title: '加载中',
        });
        uni.uploadFile({
          // url: 'http://dev.hnyfwlw.com/api/api_gateway?method=base.bases.base_photo', //仅为示例，非真实的接口地址
          url: 'https://web.hnyfwlw.com/api/api_gateway?method=pest.pests.plant_discern',
          filePath: ev.path,
          name: 'img_file',
          formData: {
            user: 'test',
            sign: pubblicData,
          },
          success: (uploadFileRes) => {
            console.log(JSON.parse(uploadFileRes.data));
            this.loadTF = false;
            uni.navigateTo({
              url:
                '../disandpests/index?datas=' +
                uploadFileRes.data +
                '&path=' +
                ev.path,
            });
          },
        });
      }
      this.url = '';
    },
    oncancle() {
      // url设置为空，隐藏控件
      this.url = '';
    },
    confirm() {
      this.flag = 1;
      uni.chooseImage({
        count: 1, //默认9
        // sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['camera', 'album'], //从相册选择
        success: (res) => {
          this.url = res.tempFilePaths[0];
        },
      });
      console.log(1);
    },
    cancel() {
      this.flag = 2;
      uni.chooseImage({
        count: 1, //默认9
        // sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['camera', 'album'], //从相册选择
        success: (res) => {
          console.log(1);
          this.url = res.tempFilePaths[0];
        },
      });
    },
    worm() {
      uni.navigateTo({
        url: '../expertDiagnosis/wormcase?name=虫情百科',
      });
    },
    virus() {
      uni.navigateTo({
        url: '../expertDiagnosis/wormcase?name=病害百科',
      });
    },
    introduce(id, title) {
      uni.navigateTo({
        url: '../expertDiagnosis/introduce?id=' + id + '&title=' + title,
      });
    },
  },
  onLoad() {
    // console.log(this.$QueryPermission(242))

    var time = new Date();
    var hours = time.getHours();
    if (hours < 12) {
      this.hello = '上午好!';
    } else {
      this.hello = '下午好!';
    }
    uni.getLocation({
      type: 'wgs84 ',
      success: (res) => {
        this.getcity(res.longitude, res.latitude);
      },
    });
  },
  onShow() {
    this.loadTF = false;
    this.getUserlogin();
  },
};
</script>

<style lang="less">
page {
  background-image: url(../../static/images/newindex/bg.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: #f9f9f9;
}

.weather {
  display: flex;
  width: 85%;
  margin: 0 auto;
  padding-top: 40rpx;

  .weaimg {
    width: 296rpx;
    height: 296rpx;
  }

  .weatext {
    width: 300rpx;
    text-align: center;
    font-size: 36rpx;
    color: #fff;
    padding-top: 60rpx;
    margin-left: 60rpx;

    .weatext_title {
      font-size: 80rpx;
      margin-bottom: 30rpx;
    }
  }
}

.weatherinfo {
  display: flex;
  background-color: rgba(255, 255, 255, 0.2);
  width: 85%;
  margin: 60rpx auto;
  padding: 30rpx;
  justify-content: space-around;
  border-radius: 170rpx;

  .weatherinfo_item {
    text-align: center;

    .first_item {
      height: 50rpx;
      margin-bottom: 10rpx;
      color: #fff;
      line-height: 50rpx;
    }

    .weaimg {
      width: 50rpx;
      height: 50rpx;
    }

    .textbox {
      text-align: center;
      color: #fff;
    }
  }
}

.functionbox {
  width: 85%;
  margin: 0 auto;
  padding: 30rpx;
  // box-sizing: border-box;
  background-color: #fff;
  border-radius: 30rpx;

  .functionbox_title {
    padding-left: 20rpx;
    font-size: 34rpx;
  }

  .functionbox_text {
    display: flex;
    justify-content: space-around;
    margin-top: 30rpx;

    .functionbox_text_item {
      text-align: center;
      color: #616666;

      .itemimg {
        width: 60rpx;
        height: 60rpx;
        margin-bottom: 20rpx;
      }
    }
  }
}

.facilitybox {
  width: 90%;
  margin: 0 auto;
  padding: 30rpx;

  .facilitybox_title {
    font-size: 34rpx;
    // padding-left: 20rpx;
  }

  .facilitybox_itembox {
    display: flex;
    // justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 30rpx;

    .facilitybox_item {
      width: 25%;
      text-align: center;
      color: #616666;
      margin-bottom: 20rpx;

      .itemimg {
        width: 100rpx;
        height: 100rpx;
        margin-bottom: 20rpx;
      }
    }
  }
}

.insectattack {
  width: 90%;
  margin: 0 auto;
  padding: 30rpx;

  .insectattack_title {
    font-size: 34rpx;
    // padding-left: 20rpx;
    display: flex;
    justify-content: space-between;

    .iconbox {
      width: 40rpx;
      height: 40rpx;
      background-color: #cfd6d6;
      color: #909696;
      border-radius: 40rpx;
      line-height: 40rpx;
      text-align: center;
      font-size: 20rpx;
    }
  }

  .insectattack_listbox {
    // padding: 0 20rpx;
    overflow-x: auto;

    .insectattack_list {
      width: 1104rpx;
      display: flex;
      margin-top: 30rpx;

      flex-wrap: wrap;

      .list_box {
        // background-color: #f00;
        background-size: 100% 100%;
        width: 246rpx;
        height: 324rpx;
        margin-right: 30rpx;
        border-radius: 20rpx;

        .list_box_xiang {
          width: 95%;
          margin-top: 0rpx auto;
          display: flex;
          justify-content: flex-end;
          padding-top: 20rpx;

          .list_box_xiang_click {
            padding: 8rpx 15rpx;
            background-color: rgba(0, 0, 0, 0.2);
            color: #fff;
            font-size: 20rpx;
            border-radius: 52rpx;
          }
        }

        .list_box_info {
          width: 90%;
          margin: 130rpx auto 0;
          height: 120rpx;
          border-radius: 10rpx;
          background-image: linear-gradient(
            to right,
            #ffffff,
            rgba(255, 255, 255, 0.44)
          );
          padding: 10rpx;
          box-sizing: border-box;

          .list_box_info_name {
            font-weight: 700;
          }

          .list_box_info_text {
            font-size: 18rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }
        }
      }

      .list_box1 {
        background-image: url(https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newindex/cao.png);
      }

      .list_box2 {
        background-image: url(https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newindex/yee.jpg);
      }

      .list_box3 {
        background-image: url(https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newindex/lingc.jpg);
      }

      .list_box4 {
        background-image: url(https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newindex/ming.png);
      }

      .list_box5 {
        background-image: url(https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newindex/mai.png);
      }

      .list_box6 {
        background-image: url(https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newindex/dadou.jpg);
      }

      .list_box7 {
        background-image: url(https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newindex/yumi.png);
      }

      .list_box8 {
        background-image: url(https://s3.hnyfwlw.com/webstaticimg/bigdata_app/newindex/dao.png);
      }
    }
  }
}

.loading {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>