bigdata_WX/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=""> 欢迎登录云飞智控 </view>
      </view>
    </view>
    <view class="weatherinfo">
      <view class="weatherinfo_item">
        <image
          src="https://www.hnyfwlw.com:8006/bigdata_app/newindex/weizhi.png"
          mode=""
          class="weaimg"
        ></image>
        <view class="textbox">
          {{ weatherinfo.district || '-' }}
        </view>
      </view>
      <view class="weatherinfo_item">
        <image
          src="https://www.hnyfwlw.com:8006/bigdata_app/newindex/wendu.png"
          mode=""
          class="weaimg"
        ></image>
        <view class="textbox"> {{ weatherinfo.at || '-' }}℃ </view>
      </view>
      <view class="weatherinfo_item">
        <image
          src="https://www.hnyfwlw.com:8006/bigdata_app/newindex/shidu.png"
          mode=""
          class="weaimg"
        ></image>
        <view class="textbox"> {{ weatherinfo.ah || '-' }}%RH </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="https://www.hnyfwlw.com:8006/bigdata_app/newindex/base.png"
            mode=""
            class="itemimg"
          ></image>
          <view class=""> 四情基地 </view>
        </view>
        <view class="functionbox_text_item" @click="tabfunction(1)">
          <image
            src="https://www.hnyfwlw.com:8006/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="https://www.hnyfwlw.com:8006/bigdata_app/newindex/knowledge.png"
            mode=""
            class="itemimg"
          ></image>
          <view class=""> 知识百科 </view>
        </view>
        <view class="functionbox_text_item" @click="tabfunction(3)">
          <image
            src="https://www.hnyfwlw.com:8006/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="https://www.hnyfwlw.com:8006/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="https://www.hnyfwlw.com:8006/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="https://www.hnyfwlw.com:8006/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="https://www.hnyfwlw.com:8006/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="https://www.hnyfwlw.com:8006/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="https://www.hnyfwlw.com:8006/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="https://www.hnyfwlw.com:8006/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="https://www.hnyfwlw.com:8006/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="https://www.hnyfwlw.com:8006/bigdata_app/newindex/user.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_boxbg">
							<image src="https://www.hnyfwlw.com:8006/bigdata_app/newindex/cao.png" mode="" class="list_boxbg_img"></image>
						</view>
						<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_boxbg">
							<image src="https://www.hnyfwlw.com:8006/bigdata_app/newindex/yee.jpg" mode="" class="list_boxbg_img"></image>
						</view>
						<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_boxbg">
							<image src="https://www.hnyfwlw.com:8006/bigdata_app/newindex/lingc.jpg" mode="" class="list_boxbg_img"></image>
						</view>
						<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_boxbg">
							<image src="https://www.hnyfwlw.com:8006/bigdata_app/newindex/ming.png" mode="" class="list_boxbg_img"></image>
						</view>
						<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_boxbg">
							<image src="https://www.hnyfwlw.com:8006/bigdata_app/newindex/mai.png" mode="" class="list_boxbg_img"></image>
						</view>
						<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_boxbg">
							<image src="https://www.hnyfwlw.com:8006/bigdata_app/newindex/dadou.jpg" mode="" class="list_boxbg_img"></image>
						</view>
						<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_boxbg">
							<image src="https://www.hnyfwlw.com:8006/bigdata_app/newindex/yumi.png" mode="" class="list_boxbg_img"></image>
						</view>
						<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_boxbg">
							<image src="https://www.hnyfwlw.com:8006/bigdata_app/newindex/dao.png" mode="" class="list_boxbg_img"></image>
						</view>
						<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';
// Vue.use(QueryPermission)
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,
        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',
      });
      // this.jurisdiction = {
      // 	cbtf: false,
      // 	jktf: false,
      // 	hjtf: false,
      // 	fztf: false,
      // 	sytf: false,
      // 	sbtf: false,
      // 	sqtf: false,
      // 	zjtf: false,
      // }
      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 "灌溉控制系统":
          // 	this.jurisdiction.sftf = 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
        uni.navigateTo({
          url: '/pages/identifyPest/identifyPest',
        });
      } 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 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);
      if (this.flag == 2) {
        console.log('111');
        // pest.pests.insect_discern 虫害
        uni.uploadFile({
          // url: 'http://114.115.147.140:8002/api/api_gateway?method=base.bases.base_photo', //仅为示例，非真实的接口地址
          url: 'http://192.168.2.183:8006/api/api_gateway?method=pest.pests.insect_discern', //仅为示例，非真实的接口地址
          filePath: ev.path,
          name: 'img_file',
          formData: {
            user: 'test',
            sign: pubblicData,
          },
          success: (uploadFileRes) => {
            this.loadTF = false;
            console.log(JSON.parse(uploadFileRes.data));
            uni.navigateTo({
              url:
                '../disandpests/index?datas=' +
                uploadFileRes.data +
                '&path=' +
                ev.path,
            });
          },
          fail(res) {
            console.log(res);
          },
        });
      } else if (this.flag == 1) {
        //pest.pests.insect_discern病害识别
        // uni.showLoading({
        // 	title: '加载中'
        // });
        uni.uploadFile({
          // url: 'http://114.115.147.140:8002/api/api_gateway?method=base.bases.base_photo', //仅为示例，非真实的接口地址
          url: 'http://192.168.2.183:8006/api/api_gateway?method=pest.pests.plant_discern', //仅为示例，非真实的接口地址
          filePath: ev.path,
          name: 'img_file',
          formData: {
            user: 'test',
            sign: pubblicData,
          },
          success: (uploadFileRes) => {
            this.loadTF = false;
            console.log(JSON.parse(uploadFileRes.data));
            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.$isneutral);
    var time = new Date();
    var hours = time.getHours();
    if (hours < 12) {
      this.hello = '上午好!';
    } else {
      this.hello = '下午好!';
    }
    uni.getFuzzyLocation({
      type: 'wgs84 ',
      success: (res) => {
        console.log(res, 'loacation');
        this.getcity(res.longitude, res.latitude);
      },
    });
    this.getUserlogin();
  },
  onShow() {
    this.loadTF = false;
    this.getUserlogin();
  },
};
</script>

<style lang="less">
page {
  background-image: url(https://www.hnyfwlw.com:8006/bigdata_app/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;
        position: relative;
        .list_boxbg {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: -1;
          .list_boxbg_img {
            width: 100%;
            height: 100%;
          }
        }
        .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(../../static/images/newindex/cao.png);
      // }

      // .list_box2 {
      // 	background-image: url(../../static/images/newindex/yee.jpg);
      // }

      // .list_box3 {
      // 	background-image: url(../../static/images/newindex/lingc.jpg);
      // }

      // .list_box4 {
      // 	background-image: url(../../static/images/newindex/ming.png);
      // }

      // .list_box5 {
      // 	background-image: url(../../static/images/newindex/mai.png);
      // }

      // .list_box6 {
      // 	background-image: url(../../static/images/newindex/dadou.jpg)
      // }

      // .list_box7 {
      // 	background-image: url(../../static/images/newindex/yumi.png);
      // }

      // .list_box8 {
      // 	background-image: url(../../static/images/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>