<template>
  <div>
    <div class="row row01">
      <el-card class="weather">
        <!-- 地区星期几 -->
        <div class="weather01">
          <span style="color: #767676; font-size: 12px; margin-left: 20px">
            {{ weaRegion }}
          </span>
          <span style="color: #767676; font-size: 12px; margin-right: 10px">
            <i class="el-icon-alarm-clock"></i>
            {{ todayWeek }}
          </span>
        </div>
        <div class="weather02">
          <div class="weather02Left">
            <img
              v-if="wea_img == '' || wea_img == null ? false : true"
              :src="
                '../../../static/images/home/' +
                wea_img +
                '.png'
              "
            />
          </div>

          <div class="weather02Right">
            <span class="temperatureTop">{{ temperature }}℃</span>
            <div class="temperatureBottom">
              <span class="weatherText">{{ weather }}</span>
            </div>
          </div>
        </div>
        <!-- 空气质量 -->
        <div class="weather03">
          <div class="wea">
            <img
              style="width: 16px; height: 16px"
              src="../../assets/images/home/home03/ICON/kongqizhiliang.png"
              alt=""
            />
            <span class="nums">{{ airQuality }}</span>
            <span style="font-size: 12px">空气质量</span>
          </div>

          <div class="wea">
            <img
              style="width: 33px; height: 17px"
              src="../../assets/images/home/home03/ICON/fengsu.png"
              alt=""
            />
            <span class="nums">{{ windSpeed }}</span>
            <span style="font-size: 12px">风速</span>
          </div>

          <div class="wea">
            <img
              style="width: 20px; height: 25px; margin-top: -0.4px"
              src="../../assets/images/home/home03/ICON/shidu.png"
              alt=""
            />
            <span class="nums">{{ humidness }}</span>
            <span style="font-size: 12px">湿度</span>
          </div>
        </div>

        <div class="weather04">
          <div class="message">
            <div class="notice">
              <img
                src="../../assets/images/home/home03/ICON/jinggao.png"
                alt=""
              />
              <section>天气预警</section>
            </div>
            <p>
              {{
                message == null || message == "" ? "暂无预警信息" : message
              }}
            </p>
          </div>
        </div>
      </el-card>

      <el-card class="data">
        <div>
          <div class="pic">
            <div
              style="
                color: #fff;
                font-weight: 600;
                font-size: 20px;
                margin-left: 68px;
                padding-top: 56px;
              "
            >
              {{ baseinfo.base_name }}
            </div>
            <div
              style="
                color: #fff;
                margin-left: 68px;
                font-size: 12px;
                margin-top: 8px;
              "
            >
              欢迎进入{{ role_header }}
            </div>
          </div>
          <div
            style="
              margin-top: 30px;
              margin-left: 25px;
              display: flex;
              flex-direction: row;
            "
          >
            <span class="tit">基地描述</span>
            <span style="margin-left: 16px; color: #767676; font-size: 12px">
              <i class="el-icon-location-outline"></i>
              {{ baseinfo.area_addr[0] }}
              {{ baseinfo.area_addr[1] }}
              {{ baseinfo.area_addr[2] }}
            </span>
          </div>

          <div
            style="
              margin-top: 30px;
              margin-left: 25px;
              color: #767676;
              font-size: 12px;
            "
          >
            {{
              baseinfo.describe == null || baseinfo.describe == ""
                ? "暂无基地内容信息，请尽快编辑您的基地内容"
                : baseinfo.describe
            }}
          </div>
        </div>
      </el-card>

      <el-card class="list">
        <!-- 项目列表和下拉框 -->
        <section>
          <div>
            <span class="tit">基地列表</span>
          </div>
          <el-select
            v-model="selectValue"
            filterable
            placeholder="请选择"
            @change="handleChange"
            size="mini"
          >
            <el-option
              v-for="(item, index) in baselist"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </section>
        <div class="swiper">
          <img :src="baseinfo.img_url" alt="" />
          <div class="add" @click="handleAdd(baseinfo.base_id)">设为首页</div>
        </div>
      </el-card>
    </div>

    <div class="row02">
      <el-card class="showDevice">
        <section>
          <div class="showLeft">
            <div class="showDeviceTop">
              <span class="tit">设备展示</span>
              <el-select
                style="margin-left: auto"
                v-model="selectTypeValue"
                filterable
                size="mini"
                placeholder="请选择"
                @change="handleDeviceTypeChange"
              >
                <el-option
                  v-for="(item, index) in deviceTypeList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>

            <div class="cardContainer">
              <el-card
                style="cursor: pointer"
                class="infoCard"
                v-for="(item, index) in deviceList"
                :key="index"
              >
                <div class="info">
                  <img
                    src="../../../static/images/home/icon.png"
                    alt=""
                  />
                  <div>
                    <p style="font-weight: 600; font-size: 14px">
                      {{ item.device_name }}
                    </p>
                    <p style="font-size: 12px; color: #767676">
                      ID:{{ item.device_id }}
                    </p>
                    <p style="font-size: 12px; color: #767676">
                      地址:{{ item.region == "" ? "暂无地址" : item.region }}
                    </p>
                    <p style="font-size: 12px; color: #767676">
                      最新上报时间:{{ item.uptime }}
                    </p>
                  </div>
                  <div style="margin-left: auto">
                    <el-button class="btn" size="mini" type="primary" round>{{
                      item.is_online == 1 ? "在线" : "离线"
                    }}</el-button>
                  </div>
                </div>
              </el-card>

              <div v-if="deviceTypeList.length == 0 ? true : false">
                <img
                  style="
                    width: 150px;
                    height: 195px;
                    margin-left: 99px;
                    margin-top: 90px;
                  "
                  src="../../assets/images/home/home03/noData/deviceLeft.png"
                  alt=""
                />
              </div>
            </div>
          </div>

          <div class="showRight" style="width: 42vw; height: 38.5vh">
            <img
              v-if="deviceList.length == 0 ? false : true"
              style="width: 42vw; height: 41vh"
              :src="
                '../../../static/images/home/' +
                selectTypeValue2 +
                '.png'
              "
            />

            <img
              v-if="deviceList.length == 0 ? true : false"
              style="width: 42vw; height: 41vh"
              src="../../../static/images/home/none.png"
              alt=""
            />
            <div class="picText">{{ selectTypeValue2 }}</div>
            <div class="picText1">图片仅供参考</div>
          </div>
        </section>
      </el-card>

      <el-card class="myDevice">
        <div class="tit">您的设备</div>
        <div v-if="echartsTotal != 0" id="chart" ref="chartRef"></div>
        <!-- echartsTotal -->
        <div v-else>
          <img
            style="
              width: 166px;
              height: 190px;
              margin-left: 95px;
              margin-top: 102px;
            "
            src="../../assets/images/home/home03/noData/deviceRight.png"
            alt=""
          />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import cityArr from "../../../static/js/citydata";
import echarts from "echarts";
import { myEcharts } from "../../../static/js/chart.js";
export default {
  data() {
    return {
      dialogAddFormVisible: false,
      dialogEditFormVisible: false,
      role_header: localStorage.getItem("newTitleName"),
      projectForm: {
        name: "",
        introduce: "",
        address: [],
        image: "",
        imageArr: [],
      },
      cityValue: [],
      options: cityArr,
      props: {
        expandTrigger: "hover",
        value: "value",
      },

      rules: {
        name: [{ required: true, message: "请输入项目名称", trigger: "blur" }],
        introduce: [
          {
            required: true,
            message: "请填写项目信息,不超过300字",
            trigger: "blur",
          },
        ],
        pics: [{ required: true }],
        // cityValue: [{ required: true }],
        address: [
          { required: true, message: "请选择项目地址", trigger: "change" },
        ],
        image: [{ required: true, message: "请上传项目图片", trigger: "blur" }],
      },
      weaRegion: "", //天气区域
      region: "", //地区
      temperature: "", //温度
      weather: "", //天气
      wea_img: "", //天气图片
      airQuality: "", //空气质量
      windSpeed: "", //风速
      humidness: "", //湿度
      message: "", //天气预警信息
      baselist: [], //项目列表
      air_tips: "", //预警信息
      swiperList: [], //轮播图
      selectValue: "", //select的值
      region: "", //项目风貌的地址
      projectMessage: "", //项目描述
      dialogFormVisible: false, //新增项目的弹窗
      echartsArr: [], //echarts数组
      echartsTotal: 0, //echarts总数
      deviceTypeList: [], //设备类型列表
      selectTypeValue: "", //设备类型的select值
      selectTypeValue2: "",
      deviceList: [], //设备列表
      deviceTypeId: "", //设备id
      todayWeek: "", //周几
      cropperVisible: false, //剪裁图片的弹窗
      photo: {
        img: "", // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 0.8, // 裁剪生成图片的质量
        outputType: "jpeg", // 裁剪生成图片的格式
        // canScale: false, // 图片是否允许滚轮缩放
        // autoCrop: true, // 是否默认生成截图框
        // autoCropWidth: 300, // 默认生成截图框宽度
        // autoCropHeight: 200, // 默认生成截图框高度
        // fixedBox: true, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [1.5, 1], // 截图框的宽高比例
        full: true, // 是否输出原图比例的截图
        canMoveBox: false, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: false, // 截图框是否被限制在图片里面
        infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
      },
      file: "", //上传的图片
      projectId: "", //项目id
      url: "", //当前链接
      fileList: [], //上传的图片列表
      dialogVisible: false,
      baseinfo: {
        area_addr: [],
      },
    };
  },
  // require
  // computed:{
  //   wea() {
  //     return `../../assets/images/home/home03/天气(2x+4x)/${this.weather}.png`
  //   }
  // },
  mounted() {
    this.url = window.location.href;
    console.log(this.url);
    this.getWeatherData();
    this.getItemsList();
    this.getEchartsData();

    this.getDeviceTypeList();
    let now = new Date();
    let today =
      now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate();
    // console.log(today);
    this.getWeekDate(today);
  },

  methods: {
    deleteImg(index) {
      this.fileList.splice(index, 1);
      this.projectForm.imageArr.splice(index, 1);
      console.log(this.projectForm.imageArr);
    },
    // 上传按钮   限制图片大小
    changeUpload(file, fileList) {
      console.log(file);
      console.log(fileList);
      this.file = file;
      this.fileList = fileList;
      // console.log(fileList);
      const isLt4M = file.size / 1024 / 1024 < 2;
      if (!isLt4M) {
        this.$message.error("上传文件大小不能超过 2MB!");
        return false;
      }
      // 上传成功后将图片地址赋值给裁剪框显示图片
      this.$nextTick(() => {
        this.photo.img = URL.createObjectURL(file.raw);
        this.cropperVisible = true;
      });
    },

    finish() {
      // 获取截图的base64 数据
      this.$refs.cropper.getCropBlob((data) => {
        var form = new FormData();
        let resFile = this.blobToFile(data, "filename.jpg");
        console.log(resFile);

        form.append("file", resFile);

        form.append("img_type", "/index/home03");
        form.append("token", localStorage.getItem("session"));

        this.cropperVisible = false;
        this.$axios({
          method: "POST",
          url: "/api/v2/util/upload/img/",
          data: form,
        }).then((res) => {
          console.log(res);

          if (res.data.data.items.img_url != 0 && res.data.msg == "成功") {
            this.projectForm.image = res.data.data.items.img_url;

            this.projectForm.imageArr.push(this.projectForm.image);
            console.log(this.projectForm.imageArr);
          } else {
            if (document.getElementsByClassName("el-message").length == 0) {
              this.$message({
                message: "上传失败",
                type: "error",
              });
            }
          }
        });
      });
    },

    //转成file
    blobToFile(Blob, fileName) {
      Blob.lastModifiedDate = new Date();
      Blob.name = fileName;
      return Blob;
    },
    // 获取周几
    getWeekDate(date) {
      var now = new Date(date);
      var day = now.getDay();
      var weeks = new Array(
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      );
      var week = weeks[day];

      this.todayWeek = week;
      console.log("这是时间");
      // return week;
    },

    // 获取天气数据
    getWeatherData() {
      this.$axios({
        method: "POST",
        url: "api/api_gateway?method=home.new_home.get_home_weather",
        // data: this.qs.stringify({
        //   lat:34.81522,
        //   lng:113.67291
        // })
      }).then((res) => {
        if (res.data.message == "" && res.data.data.region) {
          console.log(res.data.data);
          this.weaRegion = res.data.data.region;
          this.temperature = res.data.data.at;
          this.weather = res.data.data.wea;
          this.wea_img = res.data.data.wea_img;
          this.airQuality = res.data.data.air;
          this.windSpeed = res.data.data.win_meter;
          this.humidness = res.data.data.ah;
          this.message = res.data.data.alarm_content;
          this.air_tips = res.data.data.air_tips;
        }
      });
    },
    // 获取项目列表
    getItemsList() {
      this.$axios({
        method: "POST",
        url: "api/api_gateway?method=basemanager.baseinfo.list_land_base",
        data: this.qs.stringify({
          page: 1,
          page_size: 999999,
        }),
      }).then((res) => {
        console.log("项目列表");
        console.log(res);
        // this.list = res.data.data.data;
        if (res.data.message == "") {
          var lists = res.data.data.data;
          for (var i = 0; i < lists.length; i++) {
            var obj = {
              value: lists[i].base_id,
              label: lists[i].base_name,
            };
            this.baselist.push(obj);
          }
          console.log(this.baselist);
          this.selectValue = this.baselist[0].label;
          this.baseinfo = lists[0];
          console.log(this.baseinfo);
        }
        // if (this.list != "") {
        //   this.selectValue = this.list[0].project_name;
        //   this.swiperList = res.data.data.items[0].img_list;
        //   this.region = this.list[0].region;
        //   this.projectMessage = this.list[0].project_msg;
        //   this.projectId = this.list[0].project_id;
        // }
      });
    },
    // 获取项目列表
    getbaseinfo(base_id) {
      this.$axios({
        method: "POST",
        url: "api/api_gateway?method=basemanager.baseinfo.list_land_base",
        data: this.qs.stringify({
          base_id: base_id,
        }),
      }).then((res) => {
        console.log("项目列表");
        console.log(res);
        // this.list = res.data.data.data;
        if (res.data.message == "") {
          this.baseinfo = res.data.data.data[0];
        }
      });
    },
    // select变化
    handleChange(e) {
      console.log(e);
      this.getbaseinfo(e);
    },
    // 添加地址选择地区
    handleAddressChange(e) {
      console.log(e);

      this.projectForm.address = e;
      console.log(this.projectForm.address[0]);
      console.log(this.projectForm.address[1]);
      console.log(this.projectForm.address[2]);
    },
    // 取消添加项目
    cancelAdd() {
      this.dialogEditFormVisible = false;
      this.dialogAddFormVisible = false;
      // this.projectForm =''
    },
    // 添加项目
    addProject() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.dialogEditFormVisible = false;
          this.dialogAddFormVisible = false;
          this.$axios({
            method: "POST",
            url: "/api/v2/home/project/modify/",
            data: this.qs.stringify({
              project_name: this.projectForm.name,
              project_msg: this.projectForm.introduce,
              province: this.projectForm.address[0],
              city:
                this.projectForm.address[1] == undefined
                  ? this.projectForm.address[0]
                  : this.projectForm.address[1],
              district:
                this.projectForm.address[2] == undefined
                  ? this.projectForm.address[0]
                  : this.projectForm.address[2],
              img_list: this.projectForm.imageArr,
            }),
          }).then((res) => {
            console.log(res);
            if (res.status == 200) {
              if (document.getElementsByClassName("el-message").length == 0) {
                this.$message.success("添加成功");
              }
              this.getItemsList();
            }
          });
        } else {
          if (document.getElementsByClassName("el-message").length == 0) {
            this.$message.error("请填写完整的项目信息");
          }
          return false;
        }
      });
    },
    closeDialog() {
      this.$refs.upload.clearFiles();
    },
    // 新增项目按钮
    handleAdd(id) {
      this.$axios({
        method: "POST",
        url: "api/api_gateway?method=home.new_home.set_home_land",
        data: this.qs.stringify({
          base_id: id,
        }),
      }).then((res) => {
        if (res.data.data) {
          if (document.getElementsByClassName("el-message").length == 0) {
            this.$message.success("设置成功");
          }
          this.dialogVisible = false;
          // this.getbaslist();
        } else {
          if (document.getElementsByClassName("el-message").length == 0) {
            this.$message.error("设置失败");
          }
        }
      });
    },
    // 设备类型列表
    getDeviceTypeList() {
      this.$axios({
        method: "POST",
        url: "api/api_gateway?method=home.new_home.get_device_type_list",
      }).then((res) => {
        console.log(res.data);
        if (res.data.message == "") {
          var data = res.data.data;
          for (let i = 0; i < data.length; i++) {
            var obj = {
              value: data[i].device_type_id,
              label: data[i].type_name,
            };
            this.deviceTypeList.push(obj);
          }
          this.selectTypeValue = this.deviceTypeList[0].value;
          this.selectTypeValue2 = this.deviceTypeList[0].label;
          this.getDeviceList(this.deviceTypeList[0].value);
        }
      });
    },
    // 设备类型改变
    handleDeviceTypeChange(e) {
      console.log(e);
      for (let i = 0; i < this.deviceTypeList.length; i++) {
        if (e == this.deviceTypeList[i].value) {
          this.selectTypeValue2 = this.deviceTypeList[i].label;
        }
      }
      this.getDeviceList(e);
    },
    // 设备列表
    getDeviceList(id) {
      this.$axios({
        method: "POST",
        url: "api/api_gateway?method=home.new_home.get_device_list",
        data: this.qs.stringify({
          device_type_id: id,
        }),
      }).then((res) => {
        console.log(res);
        this.deviceList = res.data.data;
      });
    },
    // 获取Echarts数据
    getEchartsData() {
      this.$axios({
        method: "POST",
        url: "api/api_gateway?method=home.new_home.get_device_statistic",
      }).then((res) => {
        console.log(res.data.data);
        if (res.data.message == "") {
          this.echartsArr = res.data.data.result;
          this.echartsTotal = res.data.data.total_num;
          console.log(this.echartsArr, this.echartsTotal);
          if (this.echartsTotal) {
            this.$nextTick(() => {
              this.chartsInit();
            });
          }
        }
      });
    },

    chartsInit() {
      let myChart = echarts.init(this.$refs.chartRef);
      myChart.setOption(myEcharts(this.echartsArr, this.echartsTotal));
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>

<style scoped lang="less">
.row01 {
  display: flex;
  flex-direction: row;
  .weather {
    width: 25vw;
    height: 43vh;
    display: flex;
    flex-direction: column;
    .weather01 {
      height: 5%;
      // border: 1px solid red;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    .weather02 {
      height: 30%;
      // border: 1px solid red;
      display: flex;
      flex-direction: row;
      // border: 1px solid red;
      border-bottom: 1px solid #e4e6e8;
      .weather02Left {
        img {
          width: 100px;
          height: 100px;
        }
      }
      .weather02Right {
        margin-top: 20px;
        margin-left: 46px;
        .temperatureTop {
          font-size: 28px;
          font-weight: 500;
        }
        .temperatureBottom {
          .weatherText {
            font-size: 20px;
            font-weight: 500;
          }
        }
      }
    }
    .weather03 {
      height: 27%;
      // border: 1px solid red;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: 15px;
      .wea {
        margin-top: 5px;
        width: 30vw;
        text-align: center;
        font-family: "FF DIN Pro-Medium";
        font-weight: Medium;
        border-right: 1px solid #e4e6e8;
        // border: 1px solid red;
        display: flex;
        flex-direction: column;
        img {
          // width: 1.4vw;
          // height: 1.6vw;
          // width: 16px;
          // height: 16px;
          margin: 10px auto;
        }
        .nums {
          margin-bottom: 10px;
        }
      }
    }

    .weather04 {
      height: 30%;
      // border: 1px solid red;
      width: 19.5vw;
      margin: 0 auto;
      margin-top: 15px;
      // height: 200px;
      // border: 1px solid red;
      background-color: #ecf5ff;
      // padding: 0px 0px 8px;
      overflow: hidden;
      .message {
        // border: 1px solid green;
        // width: 18.5vw;
        height: 120px;
        margin: 0 auto;
        margin-top: 10px;

        .notice {
          // border: 1px solid yellow;
          height: 25px;
          line-height: 25px;
          // margin-top: 10px;
          // margin-bottom: 10px;
          padding-top: 10px;
          display: flex;
          flex-direction: row;
          padding: 2px 11px;
        }
        img {
          width: 18px;
          height: 18px;
          margin-top: 5px;
          margin-left: 5px;
        }
        section {
          color: #409eff;
          height: 25px;
          font-size: 14px;
          line-height: 25px;
          margin: 0px 10px;
          margin-top: 2px;
        }
        p {
          color: #3d3d3d;
          font-size: 12px;
          padding-top: 5px;
          padding: 0px 18px;
          display: -webkit-box; //谷歌
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 4; //显示几行
          overflow: hidden;
          // font-family:'Source Han Sans CN-Regular';
        }
      }
    }
  }
  .weather03 .wea:last-child {
    border-right: none;
  }

  .data {
    width: 50vw;
    height: 43vh;
    margin: 0 10px 0 10px;
    .pic {
      width: 106%;
      height: 23vh;
      background-image: url("../../assets/images/home/home03/background/背景.png");
      background-size: 100% 100%;
      margin-left: -20px;
      margin-top: -20px;
    }
  }

  .list {
    width: 25vw;
    height: 43vh;

    section {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    .swiper {
      // border: 1px solid red;
      width: 100%;
      margin: 0 auto;
      margin-top: 15px;
      height: 34vh;
      overflow: auto;
      img {
        width: 100%;
        height: 80%;
      }
      .add {
        width: 100%;
        height: 40px;
        margin: 15px auto 0;
        background-color: #4f71ff;
        color: #fff;
        line-height: 40px;
        text-align: center;
        border-radius: 4px;
        font-size: 14px;
        cursor: pointer;
      }
    }
  }
}

.row02 {
  display: flex;
  flex-direction: row;
  .showDevice {
    width: 71vw;
    height: 44.5vh;
    margin: 10px 10px 0 0;

    section {
      display: flex;
      flex-direction: row;
      .showLeft {
        width: 21vw;
        height: 40.5vh;
        // border: 1px solid red;
        // overflow: auto;
        margin-right: 10px;
        .showDeviceTop {
          display: flex;
          flex-direction: row;
        }

        .cardContainer {
          // border: 1px solid red;
          height: 38.5vh;
          overflow: auto;
        }
      }
      .showRight {
        width: 43vw;
        // border: 1px solid red;
        height: 50px;
        position: relative;

        .picText {
          position: absolute;
          top: 2.5vh;
          left: 2.5vw;
          font-size: 24px;
          font-weight: 500;
          color: #1a1a1a;
        }
        .picText1 {
          position: absolute;
          top: 39vh;
          left: 37.5vw;
          font-size: 12px;
          font-weight: 500;
          color: #1a1a1a;
        }
      }
    }
  }

  .myDevice {
    width: 23.5vw;
    height: 44.5vh;
    margin-top: 10px;
    #chart {
      // width: 400px;
      width: 100%;
      // height: 38vh;
      height: 359px;
      // border: 1px solid red;
    }
  }
}

.infoCard {
  margin-top: 15px;
  .info {
    display: flex;
    flex-direction: row;
    img {
      // border: 1px solid red;
      width: 30px;
      height: 30px;
      margin-right: 15px;
    }

    p {
      margin-bottom: 5px;
    }
  }
}

.loadMore {
  width: 100%;
  height: 48px;
  margin: 0 auto;
  color: #14a478;
  line-height: 48px;
  text-align: center;
  border-radius: 4px;
  background: linear-gradient(
    270deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(20, 164, 120, 0.30000001192092896) 100%
  );
  margin-top: 15px;
}

.tit {
  font-weight: 600;
  font-size: 14px;
  color: #212712;
}

.btn {
  background: rgba(79, 113, 255, 0.2) !important;
  border-radius: 16px 16px 16px 16px !important;
  border: 1px solid transparent !important;
  color: #4f71ff !important;
}

.editImg {
  width: 146px;
  height: 146px;
  margin-right: 10px;

  background-color: rgba(170, 170, 170, 0.3);
  border-radius: 8px;
  box-shadow: inset 0 0 6px rgb(143 142 142 / 40%);
}

.deleteImg {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 40%;
  top: 40%;
  // border: 1px solid red;
  display: none;
  font-weight: 900;
}

.editImg:hover + .deleteImg {
  display: block;
}

.editImg:hover {
  // border: 1px solid red;
  opacity: 0.4;
}

.deleteImg:hover {
  display: block;
}

.deleteImg:hover + .editImg {
  opacity: 0.4;
}

/deep/ .el-carousel__indicator--horizontal .el-carousel__button {
  width: 10px;
  height: 10px;
  background: transparent;
  border: 1px solid #14a478;
  border-radius: 50%;
  opacity: 0.5;
}
/deep/ .el-carousel__indicator--horizontal.is-active .el-carousel__button {
  width: 10px;
  height: 10px;
  background: #14a478;
  border-radius: 50%;
  opacity: 1;
}

.editProject {
  // border: 1px solid red;
  /deep/ .el-upload-list--picture-card .el-upload-list__item {
    display: none !important;
    // border: 1px solid red !important;
  }
}

.cardContainer::-webkit-scrollbar {
  display: none;
}

.swiper::-webkit-scrollbar {
  display: none;
}

.warning {
  color: rgb(64, 158, 255);
  margin-left: 54px;
  margin-top: -27px;
  width: 75px;
  height: 28px;
  line-height: 28px;
  border: 1px solid #9fceff;
  text-align: center;
  font-size: 14px;
  border-radius: 4px 4px 4px 4px;
}

.temperatureBottom {
  margin-left: 5px;
}

.topNavigation {
  display: none !important;
}

// ::v-deep .custom-ffffff .el-carousel__indicators--outside {
//   border: 1px solid red !important;
// }
</style>
