<!--  -->
<template>
  <div class="login_box" :style="'height:' + fullHeight + 'px'" v-loading="loading">
    <!-- 背景图 -->
    <img src="../../assets/image/bajing.png" alt class="login_box_baijingimg" />

    <!-- 登录text -->
    <ul class="login_box_text_box">
      <li
        class="login_box_text"
        v-for="(item,index) in items"
        :key="index"
        :class="{active:istrue==index}"
        @click="istrue=index, deng(index)"
      >{{ item.name }}</li>
    </ul>

    <!-- 登录框 -->
    <!-- 卡片 -->
    <transition name="el-fade-in-linear">
      <div v-if="show3">
        <el-card class="login_box_card">
          <el-form :model="ruleForm" ref="ruleForm" label-width="50px" class="demo-ruleForm">
            <el-form-item prop="username">
              <el-input
                v-model.trim="ruleForm.username"
                ref="input1"
                maxlength="11"
                placeholder="请输入账号"
                clearable
                prefix-icon="el-icon-user"
                autocomplete="on"
                class="username_ipt"
              ></el-input>
            </el-form-item>

            <div class="paswd_box">
              <img src="../../../static/suo.png" alt class="paswd_box_imgA" />
              <div class v-if="pwdType">
                <input
                  class="paswd_ipt"
                  type="password"
                  :onkeyup="ruleForm.password = ruleForm.password.replace(/\s+/g,'')"
                  v-model="ruleForm.password"
                  placeholder="请输入不能小于6位的密码"
                  ref="input2"
                  maxlength="8"
                />
              </div>
              <div class v-else>
                <input
                  class="paswd_ipt"
                  type="text"
                  :onkeyup="ruleForm.password = ruleForm.password.replace(/\s+/g,'')"
                  v-model="ruleForm.password"
                  placeholder="请输入不能小于6位的密码"
                  ref="input2"
                  maxlength="8"
                />
              </div>
              <img :src="seen ? seenImg : unseenImg" @click="changeType()" class="paswd_box_imgB" />
            </div>

            <!-- 记住密码 -->
            <div class="box clearfix">
              <div class="automate">
                <el-checkbox v-model="checked" style="color:#f00303;">
                  <span class="automate_text">记住密码</span>
                </el-checkbox>
              </div>
            </div>

            <el-form-item v-if="showBtnA">
              <el-button type="primary" @click.13="login()">
                <i class="el-icon-loading" v-show="iShow"></i>
                登录
              </el-button>

              <el-button class="register" type="primary" @click="enroll()">注册</el-button>
            </el-form-item>
          </el-form>

          <!-- 忘记密码 -->
          <div class="forget" @click="forget()">忘记密码</div>
          <!-- 忘记密码 -->
        </el-card>
      </div>

      <!-- 游客登录框 -->
      <!-- 卡片 -->
      <div v-else>
        <el-card class="login_box_card">
          <el-form :model="ruleForm" ref="ruleForm" label-width="50px" class="demo-ruleForm">
            <el-form-item prop="username">
              <el-input
                v-model="ruleForm.username"
                ref="input1"
                maxlength="11"
                disabled="disabled"
                :placeholder="this.redata"
                clearable
                prefix-icon="el-icon-user"
                autocomplete="on"
                class="username_ipt"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click.13="loginA()">
                <i class="el-icon-loading" v-show="iShow"></i>
                登录
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </transition>

    <!-- 忘记密码 -->
    <!-- <div class="forget" @click="forget()">忘记密码</div> -->

    <!-- 点击相机图标弹出选择昆虫或病害窗口 -->
    <el-dialog :before-close="handleClose" title="提示" :visible.sync="dialogVisible" width="60%">
      <span>是否更新到最新版本</span>
      <span slot="footer" class="dialog-footer">
        <!-- 选择昆虫 -->
        <div class="home_box_div">
          <!-- 测试 -->
          <el-button @click="dialogVisible = false, showBtn()" class="kunchongBtn">取 消</el-button>
        </div>

        <!-- 选择病害 -->
        <div class="home_box_div">
          <!-- 测试 -->
          <el-button @click="dialogVisible = false, newApp()" class="binghaiBtn">确 定</el-button>
        </div>
      </span>
    </el-dialog>

    <!-- 进度条 -->
    <div class="schedule_box" v-if="scheduleShow" :style="'height:' + fullHeight + 'px'">
      <div class="schedule_box_div">
        <div class="schedule_box_title">正在下载...</div>
        <el-progress :percentage="percentage" :color="customColorMethod"></el-progress>
      </div>
    </div>

    <!-- 测试地图 -->
    <div class="mapbox" v-show="mapShow">
      <baidu-map
        :style="'height:' + fullHeight + 'px'"
        locationIcon
        class="map"
        :double-click-zoom="true"
        @ready="handler"
        :center="center"
        :zoom="150"
        :map-click="false"
        :mapStyle="mapStyle"
      >
        <bm-geolocation
          @locationSuccess="getLoctionSuccess"
          @locationError="getLoctionError"
          anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
          :showAddressBar="false"
          :autoLocation="true"
        ></bm-geolocation>
      </baidu-map>
    </div>
    <!-- 测试地图 -->
  </div>
</template>

<script>
// 按需引入点聚合
// 引入marker
import BmMarker from "vue-baidu-map/components/overlays/Marker";
import { BmGeolocation } from "vue-baidu-map";
const markers = [];
const carList = [{}];
export default {
  name: "login",
  components: {
    BmMarker,
    // 手动定位控件
    BmGeolocation,
    // marker控件
    BmMarker
  },
  data() {
    //这里存放数据
    return {
      loading: true, //加载动画
      //自动定位
      mapShow: false, //地图
      center: null,
      BMap: "",
      map: "",
      markers,
      carList,
      show: false,
      redata: [], //后端传来的数据
      active: false,
      latA: "",
      lngA: "",
      nameShow: false,
      mapStyle: {
        styleJson: [
          {
            featureType: "all",
            elementType: "geometry",
            stylers: {
              // hue: "#007fff",
              hue: "#eb8f16",
              saturation: 89
            }
          },
          {
            featureType: "water",
            elementType: "all",
            stylers: {
              color: "#ffffff"
            }
          }
        ]
      },
      //设置地图详细信息
      address: "", //位置详细信息
      jgNameDialog: false,
      show: false,
      postionMap: {
        //地图坐标
        lng: 120.211486,
        lat: 30.256576
      },
      location: "",
      keyword: "", //搜索框关键词
      // zoom: 12.8, //放大比例
      address: "", //位置详细信息
      add: {
        siteName: "",
        site: "",
        jd: "",
        wd: "",
        desce: "",
        type: "",
        jgName: "",
        jgNum: ""
      },
      organizationData: [],
      jgName: "",
      jgNum: "",

      checked: false, //记住密码多选框
      fullHeight: document.documentElement.clientHeight,
      ruleForm: {
        username: "",
        password: ""
      },
      seen: "",
      pwdType: true, //此时文本框隐藏，显示密码框
      unseenImg: "./static/eyes.png", //看不见
      seenImg: "./static/eye.png", //看得见密码
      iShow: false, //登录缓冲图标
      dialogVisible: false, //选择昆虫还是病害识别
      redataName: localStorage.getItem("redataName"), //获取到后端发来的app的名字
      redataNameA: localStorage.getItem("redataName"), //获取到后端发来的app的名字

      //测试进度条
      percentage: 20,
      customColor: "#409eff",
      customColors: [
        { color: "#f56c6c", percentage: 20 },
        { color: "#e6a23c", percentage: 40 },
        { color: "#5cb87a", percentage: 60 },
        { color: "#1989fa", percentage: 80 },
        { color: "#6f7ad3", percentage: 100 }
      ],
      scheduleShow: false,
      show3: true, //判断当前设备是否注册账号
      redata: "", //游客账号
      items: [{ name: "账号登录" }, { name: "游客登录" }],
      istrue: localStorage.getItem("loginIstrue"),
      showBtnA: true //用户取消更新软件，隐藏登录按钮
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    fullHeight(val) {
      //监控浏览器高度变化
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          //防止过度调用监测事件，导致卡顿
          that.timer = false;
        }, 400);
      }
    },

    //判断进度条是否为100%
    percentage(time) {
      if (time === 100) {
        this.scheduleShow = false;
        this.$message({
          message: "已经下载成功，可以安装",
          type: "success",
          duration: 1000
        });
      }
    }
  },
  //方法集合
  methods: {
    //测试tab-登录
    deng(index) {
      let _this = this;
      //判断当前时用户还是游客
      // location.reload();
      if (index === 0) {
        this.show3 = true;
        //判断tab切换下标是否为空
        localStorage.setItem("loginIstrue", "0");
        //获取本地存储的账号和密码
        if (
          localStorage.getItem("Name") !== null &&
          localStorage.getItem("passWord") !== null &&
          localStorage.getItem("loginIstrue") == 0
        ) {
          _this.ruleForm.username = localStorage.getItem("Name");
          _this.ruleForm.password = localStorage.getItem("passWord");
          _this.checked = true;
        }
      } else if (index === 1) {
        _this.ruleForm.username = "";
        _this.ruleForm.password = "";
        let postData = _this.$qs.parse({
          imei: localStorage.getItem("uuID")
        });
        _this
          .$axios({
            method: "post",
            // url: "/check_tourist",
            url: "bigservers/check_tourist",
            data: postData
          })
          .then(res => {
            if (res.data === 0) {
              this.$notify({
                title: "提示",
                message: "您的十次体验已经结束，如果想继续使用，请先注册账号",
                type: "warning",
                duration: 1500
              });
            } else if (res.data === 1) {
              console.log("没有获取到设备信息，请退出软件重新测试");
            } else if (res.data === 2) {
              this.$axios({
                method: "get",
                url: "bigservers/tourist_in"
              })
                .then(res => {
                  this.redata = res.data;
                })
                .catch(error => {
                  console.log(error);
                });
            }

            if (res.data[0].ret === "tourist") {
              this.redata = res.data[0].tourist_number;
            } else if (res.data[0].ret === "user") {
              if (localStorage.getItem("loginIstrue") === "1") {
                this.$notify({
                  title: "提示",
                  message: "您已经注册了账号，请用账号登录",
                  type: "warning",
                  duration: 1500
                });
              }
            }
          })
          .catch(error => {
            // console.log("失败");
          });
        localStorage.setItem("loginIstrue", "1");
        this.show3 = false;
      }
    },

    //动态获取浏览器高度
    get_boderHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },

    //密码的显示隐藏
    changeType() {
      this.seen = !this.seen; //小眼睛的变化
      this.pwdType = !this.pwdType; //跟着小眼睛变化，密码框隐藏显示文本框，内容就显示了
    },

    //登录事件
    login() {
      let _this = this;
      _this.iShow = true;
      // 判断账号或密码是否为空
      if (_this.ruleForm.username !== "" && _this.ruleForm.password !== "") {
        let postData = _this.$qs.parse({
          mobile: _this.ruleForm.username,
          password: _this.ruleForm.password
        });
        _this
          .$axios({
            method: "post",
            url: "bigservers/land_in",
            data: postData,
            headers: {
              "Content-Type": "multipart/form-data"
            }
          })
          .then(res => {
            if (res.data === 1) {
              this.$message({
                message: "密码不正确",
                type: "error",
                duration: 1000
              });
            } else if (res.data === 2) {
              this.$message({
                message: "用户不存在",
                type: "error",
                duration: 1000
              });
            } else if (
              res.data.username !== "" &&
              res.data !== 1 &&
              res.data !== 2
            ) {
              this.$message({
                message: "登录成功",
                type: "success",
                duration: 1000
              });
              localStorage.setItem("ret", res.data[0].ret);
              localStorage.setItem("accountName", res.data[0].username); //用户名称
              sessionStorage.setItem("login", this.ruleForm.username); //登录状态标识
              _this.$router.replace("/home");
              location.reload();
              //判断是否是管理员账号
              if (
                res.data[0].is_active === true &&
                res.data[0].is_staff === true &&
                res.data[0].is_superuser === true
              ) {
                localStorage.setItem("identity", "A"); //存一个管理员身份
              }

              //判断是否勾选记住密码
              if (_this.checked == true) {
                _this.setLocalStorage(
                  _this.ruleForm.username,
                  _this.ruleForm.password
                );
              } else {
                //清空localStorage
                _this.clearLocalStorage();
              }
            }
            const timer = setInterval(() => {
              _this.iShow = false;
            }, 2500);
          })
          .catch(error => {
            this.$message({
              message: "失败",
              type: "error",
              duration: 1000
            });
          });
      } else {
        this.$message({
          message: "账号或密码不能为空!",
          type: "error",
          duration: 1000
        });
      }
    },

    // 注册跳转
    enroll() {
      let _this = this;
      _this.$router.push("/enroll");
    },

    //升级到最新版本弹框
    newApp() {
      //判断本地是否有值
      if (this.redataName == null) {
        var data = this.redataNameA
      } else if (this.redataName !== null) {
        var data = this.redataName
      }
      window.location.href =
        "bigservers/down_app/" + data;
      this.scheduleShow = true;
      const timer = setInterval(() => {
        this.percentage += 10;
        if (this.percentage > 100) {
          this.percentage = 100;
        }
      }, 1000);
    },

    //点击最新版本弹框的取消按钮
    showBtn() {
      // this.$notify({
      //   title: "警告",
      //   message: "不是最新版本，您将不能体验该软件",
      //   type: "warning",
      //   duration: 2000
      // });
      // this.showBtnA = false; //隐藏按钮
      var webview = plus.webview.currentWebview(); //获取当前页面的
      plus.runtime.quit(); //退出应用
    },

    //点击进入忘记密码页面
    forget() {
      let _this = this;
      _this.$router.push("/forget");
    },

    //测试进度条
    customColorMethod(percentage) {
      if (percentage < 30) {
        return "#909399";
      } else if (percentage < 70) {
        return "#e6a23c";
      } else {
        return "#67c23a";
      }
    },
    increase() {
      this.percentage += 10;
      if (this.percentage > 100) {
        this.percentage = 100;
      }
    },
    decrease() {
      this.percentage -= 10;
      if (this.percentage < 0) {
        this.percentage = 0;
      }
    },

    //游客登录
    loginA() {
      let _this = this;
      let postData = _this.$qs.parse({
        num: _this.redata,
        imei: localStorage.getItem("uuID")
      });
      _this
        .$axios({
          method: "post",
          url: "bigservers/tourist_in",
          data: postData
        })
        .then(res => {
          if (
            res.data !== 2 &&
            res.data !== 3 &&
            res.data !== 4 &&
            res.data !== 0 &&
            res.data !== null
          ) {
            this.$notify({
              title: "成功",
              message: "登录成功",
              type: "success",
              duration: 1000
            });
            localStorage.setItem("ret", res.data[0].ret);
            sessionStorage.setItem("login", this.redata); //登录状态标识
            if (res.data[0].ret === "user") {
              //账号登录
              _this.$router.replace("/home");
              location.reload();
            } else if (res.data[0].ret === "tourist") {
              //游客登录
              _this.$router.replace("/tourist");
              ocation.reload();
            }
          } else if (res.data === 2) {
            this.$notify.error({
              title: "失败",
              message: "该手机已经注册过账号，请直接用账号登录",
              duration: 1000
            });
          } else if (res.data === 3) {
            this.$notify.error({
              title: "失败",
              message: "游客账号已经注册",
              duration: 1000
            });
          } else if (res.data === 0) {
            this.$notify.error({
              title: "登录失败，请重试",
              message: "",
              duration: 1000
            });
          }
        })
        .catch(error => {
          // this.$notify.error({
          //   title: "失败",
          //   message: "登录失败",
          //   duration: 1000
          // });
          console.log("登录失败");
        });
    },

    handleClose() {
      this.$notify({
        title: "警告",
        message: "请点击取消或是确定按钮",
        type: "warning",
        duration: 2000
      });
    },

    //记住密码
    setLocalStorage(u, p) {
      localStorage.setItem("Name", u);
      localStorage.setItem("passWord", p);
    },
    //读取localStorage
    getLocalStorage() {
      let _this = this;
      if (
        localStorage.getItem("Name") !== null &&
        localStorage.getItem("passWord") !== null &&
        localStorage.getItem("loginIstrue") == 0
      ) {
        _this.ruleForm.username = localStorage.getItem("Name");
        _this.ruleForm.password = localStorage.getItem("passWord");
        _this.checked = true;
      }
    },
    //清除localStorage
    clearLocalStorage() {
      localStorage.removeItem("Name");
      localStorage.removeItem("passWord");
    },

    //地图定位
    //百度地图事件
    //地图初始化
    handler({ BMap, map }) {
      const _this = this;
      // 获取自动定位方法
      var geolocation = new BMap.Geolocation();
      // 获取逆解析方法实例
      this.myGeo = new BMap.Geocoder();
      // 获取自动定位获取的坐标信息
      geolocation.getCurrentPosition(
        function(r) {
          _this.center = {
            lng: r.point.lng,
            lat: r.point.lat
          };
          _this.point = {
            lng: r.point.lng,
            lat: r.point.lat
          };
          localStorage.setItem("jingdu", _this.point.lng); //存经纬度
          localStorage.setItem("weidu", _this.point.lat);
          _this.ceshi(r);
        },

        { enableHighAccuracy: true }
      );
      map.enableScrollWheelZoom(true);
      _this.BMap = BMap;
      _this.map = map;
    },
    //手动定位成功回调
    getLoctionSuccess(e) {
      this.lngA = e.point.lng;
      this.latA = e.point.lat;
      localStorage.setItem("jingdu", this.lngA); //存经纬度
      localStorage.setItem("weidu", this.latA);

      this.show = true;
      this.postionMap.lng = e.point.lng; //通过  e.point.lng获取经度
      this.postionMap.lat = e.point.lat; //通过  e.point.lat获取纬度
      this.add.jd = e.point.lng;
      this.add.wd = e.point.lat;

      let geocoder = new BMap.Geocoder(); //创建地址解析器的实例
      geocoder.getLocation(e.point, rs => {
        this.add.site = rs.address;
        //地址描述(string)=
        // console.log(rs.address);    //这里打印可以看到里面的详细地址信息，可以根据需求选择想要的
        // console.log(rs.addressComponents);//结构化的地址描述(object)
        // console.log(rs.addressComponents.province); //省
        // console.log(rs.addressComponents.city); //城市
        // console.log(rs.addressComponents.district); //区县
        // console.log(rs.addressComponents.street); //街道
        // console.log(rs.addressComponents.streetNumber); //门牌号
        // console.log(rs.surroundingPois); //附近的POI点(array)
        // console.log(rs.business); //商圈字段，代表此点所属的商圈(string)

        let a = rs.addressComponents.province;
        let b = rs.addressComponents.city;
        let c = rs.addressComponents.district;
        let d = rs.addressComponents.street;
        let e = rs.addressComponents.streetNumber;
        localStorage.setItem("dizhi", a + b + c + d + e); //存地址
      });
      this.loadinAShow = false; //关闭地图加载动画
    },
    //手动定位失败回调
    getLoctionError() {
      alert("定位失败");
    },
    //自动定位
    ceshi(r) {
      let _this = this;
      let geocoder = new BMap.Geocoder(); //创建地址解析器的实例
      geocoder.getLocation(r.point, rs => {
        this.add.site = rs.address;
        let a = rs.addressComponents.province;
        let b = rs.addressComponents.city;
        let c = rs.addressComponents.district;
        let d = rs.addressComponents.street;
        let e = rs.addressComponents.streetNumber;

        localStorage.setItem("addrData", b); //存下地址
        //判断本地存储中是否存有值
        if (localStorage.getItem("tianqiData") !== null) {
          //有值
          var data = localStorage.getItem("tianqiData");
          var data = JSON.parse(data); //获取到存在本地的值
        } else if (localStorage.getItem("tianqiData") === null) {
          //没有值
          // this.tianqiAxios(b);
        }
        //测试自定义天气插件
        localStorage.setItem("dizhi", a + b + c + d + e); //存地址
        _this.loading = false;
      });
      this.loadinAShow = false; //关闭地图加载动画
    },

    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    btn() {
      var _this = this;
      _this.$router.push("/lianxi");
    },

    btnA() {
      var _this = this;
      _this.$router.push("/lianxiB");
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    let _this = this;
    _this.getLocalStorage(); //页面加载调用获取LocalStorage值
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    //判断tab切换下标是否为空
    if (localStorage.getItem("loginIstrue") === null) {
      localStorage.setItem("loginIstrue", "0");
    }

    let _this = this;
    _this.get_boderHeight();
    _this
      .$axios({
        method: "get",
        url: "bigservers/edition"
      })
      .then(res => {
        let num = "114";
        var data = res.data.edition_num;
        var a = data.replace(/\./g, "");
        if (num === a) {
        } else if (num < a) {
          this.$message({
            message: "检测到有新版本",
            type: "success"
          });
          _this.dialogVisible = true;
          localStorage.setItem("redataName", res.data.edition_name);
          _this.redataNameA = res.data.edition_name
        }
      })
      .catch(error => {
        this.$message({
          message: "检测失败",
          type: "warning"
        });
      });

    let postData = _this.$qs.parse({
      imei: localStorage.getItem("uuID")
    });
    _this
      .$axios({
        method: "post",
        url: "bigservers/check_tourist",
        data: postData
      })
      .then(res => {
        _this.loading = false;
        if (res.data === 0) {
          this.$notify({
            title: "提示",
            message: "您的十次体验已经结束，如果想继续使用，请先注册账号",
            type: "warning",
            duration: 1500
          });
        } else if (res.data === 1) {
          console.log("没有获取到设备信息,请退出软件重新测试");
        } else if (res.data === 2) {
          this.$axios({
            method: "get",
            url: "bigservers/tourist_in"
          })
            .then(res => {
              this.redata = res.data;
            })
            .catch(error => {
              console.log(error);
            });
        }

        if (res.data[0].ret === "tourist") {
          this.redata = res.data[0].tourist_number;
        } else if (res.data[0].ret === "user") {
          if (localStorage.getItem("loginIstrue") === "1") {
            this.$notify({
              title: "提示",
              message: "您已经注册了账号，请用账号登录",
              type: "warning",
              duration: 1500
            });
          }
        }
      })
      .catch(error => {});

    //判断当前是用户还是游客
    if (localStorage.getItem("loginIstrue") === "0") {
      this.show3 = true;
      //判断tab切换下标是否为空
      localStorage.setItem("loginIstrue", "0");
    } else if (localStorage.getItem("loginIstrue") === "1") {
      localStorage.setItem("loginIstrue", "1");
      this.show3 = false;
    }
  }
};
</script>
<style lang='scss'>
@import "../../assets/scss/bus.scss";
@import "../../assets/scss/login.scss";
</style>

<style>
.clearfix {
  /* border: 1px solid #000; */
  width: 50%;
  margin: 0.2rem 0 0 4rem;
}
.el-checkbox__inner:hover {
  border-color: #a5a4a4;
}

.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #65d1a3;
  border-color: #65d1a3;
}

.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #65d1a3;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>