bocai_supplyChain_pc/src/components/FirstJob/detail.vue

<template>
  <div class="detail-container">
    <!-- <a-modal
      title="报名"
      :visible="visible"
      class="modal"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      :maskClosable="false"
      okText="提交"
      cancelText="取消"
      :destroyOnClose="true"
    >
      <a-form-model ref="ruleForm" :model="form" :rules="rules" :colon="false">
        <a-form-model-item ref="name" label="姓名" prop="name">
          <a-input
            v-model="form.name"
            placeholder="请输入老乡姓名"
            @blur="
              () => {
                $refs.name.onFieldBlur();
              }
            "
          />
        </a-form-model-item>
        <a-form-model-item ref="gender" label="性别" prop="gender">
          <a-select v-model="form.gender" placeholder="请选择性别">
            <a-select-option value="man">男</a-select-option>
            <a-select-option value="woman">女</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item ref="tel" label="年龄" prop="tel">
          <a-input
            v-model="form.age"
            placeholder="请输入年龄"
            @blur="
              () => {
                $refs.tel.onFieldBlur();
              }
            "
          />
        </a-form-model-item>
        <a-form-model-item ref="peoplecard" label="民族" prop="peoplecard">
          <a-select v-model="form.nation" placeholder="请选择民族">
            <a-select-option
              v-for="item in nationlist"
              :key="item.id"
              :value="item.id"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-model-item>
        <a-form-model-item ref="peoplecard" label="身份证号" prop="peoplecard">
          <a-input v-model="form.peoplecard" placeholder="请输入老乡身份证号" />
        </a-form-model-item>
        <a-form-model-item ref="peoplecard" label="家庭住址" prop="peoplecard">
          <a-input v-model="form.location" placeholder="请输入家庭住址" />
        </a-form-model-item>

        <a-form-model-item ref="username" label="报名企业" prop="username">
          <a-select v-model="form.firm" placeholder="请选择民族">
            <a-select-option :value="id">{{ id }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item ref="username" label="岗位" prop="username">
          <a-select v-model="form.post" placeholder="请选择民族">
            <a-select-option :value="id">{{ id }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item ref="username" label="模式" prop="username">
          <a-select v-model="form.pattern" placeholder="请选择民族">
            <a-select-option :value="id">{{ id }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item ref="username" label="政策" prop="username">
          <a-select v-model="form.policy" placeholder="请选择民族">
            <a-select-option :value="id">{{ id }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item ref="username" label="代理" prop="username">
          <a-select v-model="form.proxy" placeholder="请选择民族">
            <a-select-option :value="id">{{ id }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item ref="username" label="面试时间" prop="username">
          <a-select v-model="form.facedate" placeholder="请选择民族">
            <a-select-option :value="id">{{ id }}</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal> -->

    <a-drawer
      title="报名"
      placement="right"
      :closable="true"
      :maskClosable="false"
      :visible="visible"
      labelAlign="right"
      width="480"
      @close="onClose"
    >
      <recordbill :visible.sync="visible" :firminfo="jobDetail"></recordbill>
    </a-drawer>
    <!-- 面包屑 -->
    <a-breadcrumb class="w">
      <a-breadcrumb-item href="">
        <router-link to="/main"><a-icon type="home" /></router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item href="">
        <router-link to="/list">
          <span>一手职位</span>
        </router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item href="">
        <span>企业详情</span>
      </a-breadcrumb-item>
    </a-breadcrumb>
    <!-- 主体区域 -->
    <div class="maincontent w">
      <div class="maincontentleft">
        <div class="subset">
          <div class="subsetleft">
            <div class="imgbox">
              <a-carousel
                arrows
                :autoplay="true"
                effect="fade"
                :dots="true"
                ref="scrollimg"
                v-if="storeImage.length !== 0"
              >
                <div
                  slot="prevArrow"
                  class="custom-slick-arrow"
                  style="left: 5px; z-index: 99"
                >
                  <a-icon type="left-circle" />
                </div>
                <div
                  slot="nextArrow"
                  class="custom-slick-arrow"
                  style="right: 5px; z-index: 99"
                >
                  <a-icon type="right-circle" />
                </div>
                <img
                  v-for="(item, index) in storeImage"
                  :key="index"
                  :src="item"
                  alt=""
                />
              </a-carousel>
              <img v-else src="../../../static/img/nopicture.png" alt="" />
            </div>
            <div class="jobinfobox">
              <div class="jobname">{{ jobDetail.jobName }}</div>
              <div class="jobinfo">
                <span>{{ jobDetail.district }}</span>
                <span>{{ jobDetail.gender }}</span>
                <span>{{ jobDetail.age }}</span>
              </div>
              <div class="jobtag">
                <!-- <span>返费</span> -->
                <span
                  v-for="(item, index) in jobDetail.jobSpecialLabelNames"
                  :key="index"
                  >{{ item }}</span
                >
              </div>
              <div class="jobpricemonth">
                <span>{{ jobDetail.minMonthlyPay }}</span
                >-<span>{{ jobDetail.maxMonthlyPay }}</span
                >元/月
              </div>
              <div class="jobpricehour">
                <template v-if="jobDetail.hourlyPay"
                  ><span>{{ jobDetail.hourlyPay }}</span
                  >元/小时</template
                >
                <template v-else-if="jobDetail.dayPay"
                  ><span>{{ jobDetail.dayPay }}</span
                  >元/日</template
                >
              </div>
              <!-- <div class="billbutton">
                <span>服务费 <i>1.5</i>元/小时</span>
                <a-dropdown class="dropdown" :trigger="['click']">
                  <a
                    class="ant-dropdown-link"
                    @click="(e) => e.preventDefault()"
                  >
                    报名
                  </a>
                  <a-menu slot="overlay">
                    <a-menu-item @click="showmodal"> 抽屉 </a-menu-item>
                    <a-menu-item @click="torecord"> 新页面</a-menu-item>
                  </a-menu>
                </a-dropdown>
              </div> -->
            </div>
          </div>
          <div class="subsetright">
            <div class="topbox">
              <div>服务费</div>
              <div>
                <span
                  v-if="
                    jobDetail.returnFee &&
                    jobDetail.returnFee !== -1 &&
                    jobDetail.returnFee !== null
                      ? true
                      : false
                  "
                  >{{ jobDetail.returnFee }}</span
                ><i v-else>--</i><span>{{ jobDetail.servetype }}</span>
              </div>
            </div>
            <button class="dropdown bottombox1" @click="torecord">报名</button>
          </div>
        </div>
        <div class="proxy">
          <h1><i>代理政策</i></h1>
          <div>{{ jobDetail.returnFeeDesp }}</div>
        </div>
        <div class="jobinformationbox">
          <h1><i>职位信息</i></h1>
          <div
            v-html="jobDetail.baseInfo"
            style="white-space: break-spaces; line-height: 2"
          ></div>
        </div>
      </div>
      <div class="maincontentright">
        <div class="hotphone">
          <h1 class="bottombox"><i>服务热线</i></h1>
          <p>0371-666666666</p>
        </div>
        <div class="companyinfo">
          <div class="companydetail">
            <h1 class="bottombox"><i>企业详情</i></h1>
            <p style="text-align: center">{{ jobDetail.aliasName }}</p>
            <div class="imgbox">
              <img v-if="storeImage.length !== 0" :src="storeImage[0]" alt="" />
              <img v-else src="../../../static/img/nopicture.png" alt="" />
            </div>
            <p>
              <!-- 我是文案我很长很长我是文案我 很长很长我是文案我很长很长我
              是文案我很长很长我是文案我很 长很长 -->
            </p>
          </div>
          <div class="companylocation">
            <h1 class="bottombox"><i>企业位置</i></h1>
            <div class="imgbox">
              <img src="../../assets/map.png" alt="" />
            </div>
          </div>
        </div>
        <recommend />
      </div>
    </div>
  </div>
</template>

<script>
import { getJobDetailApi } from "../../api/job";
import { disposeJobListData } from "../../utils/commonUtil";
import recommend from "../../components/FirstJob/components/recommend.vue";
import { nationlist } from "../../utils/datalist";
import recordbill from "@/components/FirstJob/components/recordbill.vue";

export default {
  // 组件名称
  name: "",
  // 局部注册的组件
  components: {
    recommend,
    recordbill,
  },
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      relationList: [],
      jobDetail: {},
      storeImage: [],
      id: this.$route.params.id,
      visible: false, // 录单模态框的展示
      confirmLoading: false, // 录单提交的loading效果
      nationlist,
      form: {
        // 录单数据
        name: "",
        peoplecard: "",
        gender: "",
        nation: "",
        location: "",
        firm: "",
        post: "",
        pattern: "",
        policy: "",
        proxy: "",
        facedate: "",
      },
      storeJob: {},
      // rules: {
      //   // 录单校验规则
      //   name: [{ required: true, message: "请输入姓名", trigger: "submit" }],
      //   // tel: [{ required: true, message: "请输入手机号", trigger: "submit" }],
      // },
      apply: {},
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */

  beforeCreate() {},
  created() {
    // console.log(this.$router.matcher.match());
    console.log(this.$route.params); // 获取传过来的params数据
    this.getJobDetail();
    // Object.defineProperties("window.opener", "sessionStorage", {
    //   LOGIN_DATA: {},
    // });
    // console.log(window.opener);
  },
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {
    // console.log(this.$refs.scrollimg);
    // this.$refs.scrollimg.goTo(0, false);
  },
  // 组件方法
  methods: {
    async getJobDetail() {
      try {
        const { data } = await getJobDetailApi(this.id);
        console.log(data);
        if (data.status === 200) {
          this.jobDetail = disposeJobListData(data.data.storeJob);
          data.data.storeImage.forEach((item) => {
            this.storeImage.push(item.url);
          });
          // console.log(this.storeImage);
        } else {
          this.$message.warning("数据获取失败");
        }

        //  = data.data.recordList;
        // console.log(data);
        // console.log(this.jobDetail);
      } catch (error) {
        // console.log(error);
      }
    },
    // 录单弹出层的关闭
    handleCancel() {
      this.visible = false;
      this.form = {
        // 录单数据
        name: "",
        tel: "",
        peoplecard: "",
        username: "",
      };
    },
    // 录单提交按钮的回调
    handleOk() {
      this.$refs.ruleForm.validate((ispass, no) => {
        // console.log(ispass);
        if (ispass) {
          this.confirmLoading = true;

          setTimeout(() => {
            this.confirmLoading = false;
            this.visible = false;
          }, 2000);
        } else {
          // console.log(123);
        }
        console.log(no);
      });
    },
    // 弹出录单模态框
    // showmodal() {
    //   this.visible = true;
    //   console.log(this.id);
    // },
    showmodal() {
      this.visible = true;
      // this.apply = item;
      // console.log(this.apply);
      // console.log(id);
    },
    onClose() {
      this.visible = false;
      this.form = {
        // 录单数据
        name: "",
        peoplecard: "",
        gender: "", // 性别
        nation: "", // 民族
        location: "", // 家庭住址
        firm: "", // 公司名
        post: "", // 岗位
        pattern: "", // 模式
        policy: "", // 代理政策
        proxy: "", // 代理
        facedate: "", // 面试时间
      };
    },
    torecord(item) {
      // 跳转到路由新页面的方法
      console.log(item);
      // let userinfo = JSON.stringify(item);

      this.$router.push({ name: "recordbill", params: this.jobDetail });
    },
  },
};
</script>

<style scoped lang="less">
.detail-container {
  overflow: hidden;
  // border-top: 1px solid #eeefef;

  background-color: #f6f6f6;
}
/deep/ .ant-form {
  // overflow: auto;
  margin-bottom: 50px;
}
// 录单模态框样式
/deep/ .ant-drawer-wrapper-body {
  // overflow: none;
  // position: relative;
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 0px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
  }

  .ant-drawer-header {
    position: absolute;
    width: 100%;
    background-color: #fff;
    padding: 12px 24px;
    z-index: 999;
    .ant-drawer-close {
      height: 48px;
      width: 48px;
      line-height: 48px;
    }
  }
  .ant-drawer-body {
    overflow-y: auto;
    margin-top: 47px;
  }
}
// /deep/ .ant-modal {
//   top: 30px !important;
// }
// .modal {
//   .ant-form-item {
//     margin-top: -8px;
//     /deep/ .ant-form-item-label {
//       line-height: 22px;
//     }
//     .ant-input {
//       // width: 430px;
//       height: 40px;
//       // border: none;
//       border: 1px solid #dddddd;
//       box-shadow: none !important;
//       // background-color: #f6f6f6;
//     }
//   }
//   /deep/ .ant-modal-footer {
//     padding: 10px 24px;
//     .ant-btn {
//       &:hover {
//         color: #ff6a00;
//         border-color: #ff6a00;
//       }
//     }
//     .ant-btn.ant-btn-primary {
//       background-color: #ff6a00 !important;
//       border: none;
//       line-height: 32px;
//       margin-left: 12px;
//       color: #fff;
//       box-shadow: none;
//       &:hover {
//         background-color: #ff8025 !important;
//       }
//     }
//   }
//   /deep/ .ant-modal-header {
//     .ant-modal-title {
//       font-size: 20px;
//       // font-weight: normal;
//     }
//   }
//   /deep/ .ant-modal-body {
//     padding: 24px 24px 8px 24px;
//     overflow: auto;
//     height: 630px;
//     max-height: 630px !important;
//   }
// }
/deep/ .maincontent {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  .maincontentleft {
    width: 944px;
    margin-right: 16px;
    text-align: left;
    .subset {
      display: flex;
      justify-content: space-between;
      padding: 16px;
      margin-bottom: 16px;
      // width: 914px;
      background-color: #fff;
      // height: 302px;
      border-radius: 4px;
      // border: 1px solid #eeefef;
      .subsetleft {
        display: flex;
        .imgbox {
          width: 177px;
          height: 177px;
          margin-right: 16px;
          overflow: hidden;
          position: relative;
          // .slick-active {
          //   button {
          //     background-color: #fe6a00 !important;
          //   }
          // }
          // .slick-track {
          // transition: all 0s ease 0s !important;
          // }
          img {
            position: absolute;
            // width: 100%;
            // height: 100%;
            height: 100%;
            // width: 100%;
            top: 50%;
            left: 50%;
            // left: 0;
            // top: 0;
            // right: 0;
            // bottom: 0;
            // margin: auto;
            transform: translateX(-50%) translateY(-50%);
          }

          .ant-carousel {
            .slick-slide {
              text-align: center;
              height: 177px;
              // height: 160px;
              // line-height: 160px;
              // background: #364d79;
              overflow: hidden;
            }
            .custom-slick-arrow {
              width: 35px;
              height: 35px;
              font-size: 35px;
              margin-top: -20px;
              border-radius: 50%;
              color: #fff;
              background-color: rgba(31, 45, 61, 0.11);
              opacity: 0.6;
            }
            .custom-slick-arrow:before {
              // color: #ff6a00;
              display: none;
            }
            .custom-slick-arrow:hover {
              // background-color: #ff6a00cc;
              opacity: 0.8;
            }
            .slick-slide h3 {
              color: #fff;
            }
          }
        }
        .jobinfobox {
          .jobname {
            // margin: 12px 0;
            font-size: 20px;
            font-weight: 400;
            text-align: left;
            color: #4d575e;
            line-height: 20px;
            // &:hover {
            //   color: #ff6a00;
            // }
          }
          .jobinfo {
            margin-top: 16px;
            opacity: 0.5;
            font-size: 16px;
            font-weight: 400;
            text-align: left;
            color: #4d575e;
            line-height: 20px;
          }
          .jobtag {
            margin-top: 14px;
            text-align: left;
            span:first-child {
              color: #ff6a00;
              background: rgba(254, 97, 0, 0.1);
            }
            span {
              margin-right: 8px;
              font-size: 16px;
              padding: 2px 10px;
              background: rgba(51, 51, 51, 0.06);
              border-radius: 4px;
            }
          }
          .jobpricemonth {
            margin-top: 16px;
            font-size: 16px;
            font-weight: 400;
            text-align: left;
            color: #4d575e;
            line-height: 22px;
          }
          .jobpricehour {
            margin-top: 16px;
            font-size: 16px;
            font-weight: normal;
            text-align: left;
            color: #ff6a00;
            // line-height: 24px;
            span {
              vertical-align: baseline;
              font-size: 20px;
              line-height: 24px;
            }
          }
          .billbutton {
            display: flex;
            justify-content: flex-start;
            margin-top: 15px;
            span {
              padding: 0 16px;
              height: 36px;
              margin-right: 20px;
              border-radius: 4px;
              background-color: rgba(254, 97, 0, 0.1);
              font-size: 18px;
              font-weight: normal;
              color: #ff6a00;
              line-height: 34px;
            }
            // button {
            //   width: 160px;
            //   // padding: 0 16px;
            //   height: 36px;
            //   border: none;
            //   background-color: #ff6a00;
            //   color: #fff;
            //   font-weight: normal;
            //   font-size: 18px;
            //   border-radius: 4px;
            //   cursor: pointer;
            //   &:hover {
            //     background-color: #ff7614;
            //   }
            // }
            .dropdown {
              width: 160px;
              padding: 0 16px;
              height: 36px;
              border: none;
              background-color: #ff6a00;
              color: #fff;
              font-weight: normal;
              font-size: 18px;
              border-radius: 4px;
              text-align: center;
              line-height: 36px;
              cursor: pointer;
              &:hover {
                color: #fff;

                background-color: rgba(255, 121, 26);
              }
            }
          }
        }
        // .jobinfobox {
        //   .jobname {
        //     // margin: 12px 0;
        //     font-size: 20px;
        //     font-weight: 400;
        //     text-align: left;
        //     color: #4d575e;
        //     line-height: 30px;
        //   }
        //   .jobinfo {
        //     margin-top: 16px;
        //     opacity: 0.5;
        //     font-size: 16px;
        //     font-weight: 400;
        //     text-align: left;
        //     color: #4d575e;
        //     line-height: 22px;
        //   }
        //   .jobtag {
        //     margin-top: 16px;
        //     span:first-child {
        //       color: #ff6a00;
        //       background: rgba(254, 97, 0, 0.06);
        //     }
        //     span {
        //       margin-right: 8px;
        //       font-size: 16px;
        //       padding: 2px 14px;
        //       text-align: left;
        //       background: rgba(51, 51, 51, 0.06);
        //       border-radius: 4px;
        //     }
        //   }
        //   .jobpricemonth {
        //     margin-top: 16px;
        //     font-size: 18px;
        //     text-align: left;
        //     color: #4d575e;
        //     line-height: 22px;
        //   }
        //   .jobpricehour {
        //     margin-top: 20px;
        //     font-size: 18px;
        //     font-weight: normal;
        //     text-align: left;
        //     color: #ff6a00;
        //     line-height: 18px;
        //     span {
        //       vertical-align: bottom;
        //       font-size: 24px;
        //       line-height: 18px;
        //     }
        //   }
        //   .billbutton {
        //     display: flex;
        //     justify-content: flex-start;
        //     margin-top: 20px;
        //     span {
        //       padding: 0 16px;
        //       height: 36px;
        //       margin-right: 20px;
        //       border-radius: 4px;
        //       background-color: rgba(254, 97, 0, 0.1);
        //       font-size: 18px;
        //       font-weight: normal;
        //       color: #ff6a00;
        //       line-height: 34px;
        //     }
        //     button {
        //       width: 160px;
        //       // padding: 0 16px;
        //       height: 36px;
        //       border: none;
        //       background-color: #ff6a00;
        //       color: #fff;
        //       font-weight: normal;
        //       font-size: 18px;
        //       border-radius: 4px;
        //     }
        //   }
        // }
      }
      .subsetright {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        .topbox {
          width: 116px;
          height: 54px;
          text-align: center;
          overflow: hidden;
          background: rgba(255, 106, 0, 0.1);
          border-radius: 4px;
          color: #ff6a00;
          line-height: 30px;
          div {
            // font-weight: normal;
            font-size: 16px;

            span:first-of-type {
              font-size: 20px;
              // font-weight: normal;
            }
          }
          div:first-child {
            height: 24px;
            background: #ff6a00;
            line-height: 21px;
            font-size: 14px;
            color: #ffffff;
            border: 1px solid #ff6a00;
            border-radius: 4px 4px 0px 0px;
          }
          div:last-child {
            font-weight: normal;
            background-color: #fff4e3;
          }
        }
        .bottombox1 {
          width: 116px;
          height: 32px;
          font-size: 16px;
          // border: 1px solid rgba(77, 87, 94, 0.3);
          border-radius: 4px;
          border: 1px solid #ff6a00;
          background-color: #fff;
          color: rgba(255, 106, 0, 1);
          cursor: pointer;
          &:hover {
            color: #fff;

            background-color: rgba(255, 121, 26);
          }
        }
      }
    }
    .proxy {
      margin-bottom: 16px;
      div {
        white-space: break-spaces;
      }
      // padding: 20px !important;
    }
    .jobinformationbox,
    .proxy {
      width: 944px;
      // border: 1px solid #eeefef;
      overflow: hidden;
      border-radius: 4px;
      padding: 0 20px 20px 20px;
      background-color: #fff;

      h1 {
        font-size: 20px;
        text-align: left;
        color: #4d575e;
        line-height: 33px;
        margin-bottom: 20px;
        font-weight: normal;
        padding: 10px 0;
        border-bottom: 1px solid #eeefef;

        span {
          height: 25px;
        }
      }
      dl {
        dt {
          margin: 30px 0 20px 0;
          font-size: 20px;
          text-align: left;
          color: #4d575e;
          line-height: 28px;
        }
        dd {
          ul {
            li {
              line-height: 32px;
            }
          }
        }
      }
    }
  }
  .maincontentright {
    width: 240px;
    > div {
      margin-bottom: 16px;
    }
    .hotphone {
      width: 240px;
      overflow: hidden;
      // height: 114px;
      padding: 0 20px 20px 20px;
      border-radius: 4px;
      background-color: #fff;
      text-align: center;
      // border: 1px solid #eeefef;
      p {
        font-size: 24px;
        color: #ff6a00;
        // font-weight: normal;
        margin-top: 12px;
      }
    }
    .companyinfo {
      overflow: hidden;
      padding: 0 20px 20px 20px;
      border-radius: 4px;
      // border: 1px solid #eeefef;
      background-color: #fff;

      .companydetail {
        width: 200px;
        p:first-of-type {
          font-size: 18px;
          font-weight: normal;
          text-align: left;
          color: #4d575e;
          margin-bottom: 12px;
          line-height: 22px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .imgbox {
          // width: 230px;
          height: 172px;
          margin-bottom: 12px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        p:last-of-type {
          font-size: 16px;
          text-align: left;
          color: #788085;
          line-height: 22px;
          margin-bottom: 15px;
        }
      }
      .companylocation {
        width: 200px;
        h1 {
          // height: 50px;
          // line-height: 50px;
          padding-top: 10px;
          text-align: center;
          // border-top: 1px solid #eeefef;
        }
        .imgbox {
          // width: 230px;
          height: 172px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>