zdxtLawEnforcementCodeView/src/views/enforce/noScan.vue

<template>
  <div class="address_edit">
    <!-- 导航栏 -->
    <div class="header_body">
      <header-nav
          :slefBack="true"
          @goBack="goBack"
          :titelText="`企业搜索（未扫码）`"
      >
      </header-nav>
    </div>
    <!-- 中间 -->
    <div class="warp_body">
<!--      {{ content }}-->
      <div class="subsearch">
        <input class="searchbox" placeholder="请输入关键字搜索" name="keyword" id="" onclick="">
      </div>
      <div class="search-result">
        <div class="case-item">
          <div class="case-title">深圳市鹏程万里智慧科技有限公司</div>
          <div class="case-info">统一社会信用代码：91511402MAA8RLGP7K</div>
          <div class="case-area">福田区华强街道</div>
          <div class="case-info"><span>法定代表人：张伟</span><span>证件号：4455**********0667</span></div>
          <div class="case-info"><span>企业联系人：李玉明</span><span>联系电话：133****2558</span></div>
        </div>
        <div class="case-item">
          <div class="case-title">深圳市鹏程展翼建筑装饰工程有限公司</div>
          <div class="case-info">统一社会信用代码：92511402MAA8RLGP69</div>
          <div class="case-area">福田区华强街道</div>
          <div class="case-info"><span>法定代表人：王展华</span><span>证件号：4455**********0667</span></div>
          <div class="case-info"><span>企业联系人：卫军</span><span>联系电话：133****2558</span></div>
        </div>
      </div>




  </div>
  </div>

  <div v-if="visible" class="popup">
    <!-- 弹窗的内容 -->
    <div class="popup-content">
      <div class="subtitle">请选择不扫码的原因：</div>
      <div class="item-box">
        <span class="item-btn active">企业拒绝出示二维码</span>
        <span class="item-btn">网络/设备故障</span>
        <span class="item-btn">其它</span>
      </div>
      <div class="btnbox">
        <button class='btn-reset' @click="">重置</button>
        <button class='btn-search' @click="">确定</button>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: true
    },
    content: {
      type: String,
      default: ''
    }
  },
  methods: {
    closePopup() {
      this.$emit('close');
    }
  }
}
</script>

<style scoped>
.address_edit {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: #ebf3fb;
}
.warp_body {
  background-image: linear-gradient(to bottom, #ebf3fb, #fff);
}

.subsearch {
  width: 100%;
  height: 1.25rem;
  font-size: 0.38rem;
}

.searchbox {
  margin: 2% 3%;
  padding: 0.15rem 0.3rem 0.1rem 1.15rem;
  width: 94%;
  height: 1.0rem;
  background: #f6f7fe url(../../assets/images/icon_sou.png) no-repeat;
  background-position: left 0.5rem center;
  background-size: auto 50%;
  box-sizing: border-box;
  border: 1px solid rgba(0,0,0,.05);
  border-radius: 0.5rem;
  color: #999999;
  outline: none;
}

.search-result {
  margin: 1% 3%;
  padding-bottom: 2rem;
  width: 94%;
  background: #fff;
}

.case-item {
  margin: 3% 4%;
  padding: 2% 0;
  width: 92%;
  font-size: 0.35rem;
  border-bottom: 1px solid #f4f4f4;
  color: #999;
  line-height: 2;
}

.case-title {
  margin: 2% 0;
  padding-left: 0.65rem;
  background: url(/src/assets/images/icon_jd.png) no-repeat left top 0.08rem;
  background-size: auto 0.5rem;
  font-size: 0.5rem;
  color: #000;
  line-height: 1.25;
}

.case-area {
  display: table;
  margin: 2% 0 2% -4.5%;
  padding: 1% 15% 1% 4%;
  width: auto;
  background-color: #d0e5ff;
  color: #077bf7;
  font-size: 0.4rem;
  border-radius: 0 0.75rem 0.75rem 0;
}

.case-info {
  display: flex;
  white-space: nowrap;
}

.case-info span {
  width: 45%;
}

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.35);
}

.popup-content {
  position: fixed;
  z-index: 999;
  bottom: 0;
  left: 0;
  padding: 0 3%;
  width: 94%;
  height: 35vh;
  background: #fff;
  overflow-y: auto;
  font-size: 0.38rem;
}

.subtitle {
  margin: 5% 2% 2%;
  width: 96%;
  /*font-size: 0.4rem;
  font-weight: 600;*/
  border-bottom: 1px solid #f4f4f4;
  line-height: 2;
}

.item-btn {
  float: left;
  margin: 0.3rem 0.2rem;
  padding: 0.2rem 0.3rem;
  background-color: #f2f3f4;
  color: #999;
  border-radius: 1rem;
  font-size: 0.35rem;
}

.item-btn.active {
  background-color: #e9f2fb;
  color: #1367fe;
}
.btnbox  {
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 1rem;
  left: 5%;
  width: 90%;
  height: 1rem;
}

.btn-reset,
.btn-search {
  display: inline-block;
  margin: 0 2%;
  padding: 0;
  width: 60%;
  color: #fff;
  font-size: 0.35rem;
  border-radius: 1rem;
  background: #1367fe;
  border: 1px solid #1367fe;
  text-align: center;
}

.btn-reset {
  width: 35%;
  background-color: #fff;
  border-color: rgba(19, 103, 254, .7);
  color: #1367fe;
}
</style>