front / ningxia-credit-web · Files

<template>
  <div class="banner_bg">
    <div class="w80">
      <div class="search_bar">
        <div class="search_title">企业信用管理就上信用管家</div>
        <el-row>
          <el-col :span="16">
            <el-input placeholder="请输入企业名称关键字" v-model="state.searchName" class="search_input" @keyup.enter="search">
            </el-input>
          </el-col>
          <el-col :span="4">
            <el-button @click="search" icon="Search" type="primary" style="height: 60px; width: 100%;font-size: 24px">
              <span>搜索</span>
            </el-button>
          </el-col>
        </el-row>
        <div class="search_soon" v-if="state.searchList.length > 0">
          最近搜索：
          <template v-for="(item, index) in state.searchList" :key="index">
            <el-link class="search_name" type="primary" v-if="item.country === 'CN'" :href="'/enterpriseList?name=' + item.historyName" :underline="false">{{item.historyName}}</el-link>
            <el-link class="search_name" type="primary" v-else :href="'/otherEnterpriseList?name=' + item.historyName +'&country=' + item.country" :underline="false">{{item.historyName}}</el-link>
          </template>
        </div>
      </div>
    </div>
  </div>

  <contact title="联系我们" :open="state.contactOpen" open-name="contactOpen" @handleClose="handleClose"></contact>
</template>

<script setup lang="ts">
  import router from "../router/index";
  import * as api from '../interface/api.ts'
  import getImage from './../assets/getImage'
  import {getToken} from "../utils/auth.ts";
  import Contact from "../components/Contact.vue";

  interface ReportItem {
    reportName: string;
    icon: string;
    notice: string;
  }

  interface CountryItem {
    jcCode: string;
    gj: string;
    isShow: boolean;
  }

  let state = reactive({
    searchName: "",
    country: "中国",
    countryCode: "CN",
    searchList: [],
    reportList: [] as ReportItem[],
    contactOpen: false,
    isShowAllCountry: false,
    countryList: [] as CountryItem[],
    countryName: "",
  }) as any;

  let getSearchHistory = () => {
    api.getInfoList({}, '/web/monitorCompany/recentlyList').then((res: any)=> {
      state.searchList = res.data
    })
  }

  let search = () => {
    if (state.searchName) {
      if (state.country === '中国') {
        router.push("/enterpriseList?name=" + state.searchName)
      } else {
        router.push("/otherEnterpriseList?name=" + state.searchName + "&country=" + state.countryCode)
      }
    }
  }

  onMounted(()=> {
    if (getToken()) {
      getSearchHistory()
    }
  })
</script>

<style scoped lang="scss">
  .banner_bg {
    background: url("../assets/images/home/bg.png") no-repeat center center;
    background-size: 100% 100%;
    min-width: 1200px;
  }
  $search-select-width: 120px;
  .search_bar {
    width: 60%;
    padding: 100px 0 120px;

    .search_title {
      font-size: 42px;
      padding: 20px 0;
      color: #000000;
    }
    .country_select{
      width: $search-select-width;
      height: 60px;
      :deep(.el-input){
        --el-input-height: 60px;
      }
      :deep(.el-select__wrapper){
        height: 60px;
      }
    }
    .search_input {
      height: 60px;
      font-size: 18px;
      margin-bottom: 20px;
    }

    .cur_country {
      position: relative;

      .select_country {
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none; /* Chrome, Safari, Opera */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */

        .rotatable {
          transition: transform 0.5s ease;
        }

        .rotate {
          transform: rotate(180deg);
        }

      }
    }
    .all_country {
      position: absolute;
      top: 48px;
      left: -20px;
      background: #f8f8f8;
      z-index: 1;
      padding: 20px;

      .country_level1 {
        display: flex;

        .level1_name {
          width: 100px;
          padding: 10px 0;
        }
        .country_list {
          width: 1100px;
          height: 300px;
          overflow-y: scroll;
          .country_name {
            float: left;
            width: 20%;
            cursor: pointer;
            padding: 10px 0;
          }
        }
      }
    }

    .search_soon {
      padding-left: 50px;
      color: #888888;
      .search_name {
        margin-right: 20px;
      }
    }
  }

  .report_list {
    padding: 100px 0;
    overflow: hidden;

    .report_item {
      .item_wrap {
        border: 1px #888888 dashed;
        width: 48%;
        margin: 0 auto 40px;
        background-image: linear-gradient(to bottom right, #F4F6F8, #FEFEFE);
        padding: 20px 30px;
        .item_title_wrap {
          display: flex;
          justify-content: center;
          align-items: center;
          color: #333333;
          .item_title {
            text-align: center;
            font-size: 20px;
            margin-left: 20px;
          }
        }
        .item_content {
          text-align: justify;
          height: 290px;
          color: #333333;
        }
      }
    }
  }

  .monitor_bg {
    background: url("../assets/images/home/monitor_bg.png") no-repeat center center;
    background-size: 100% 100%;
    overflow: hidden;
    color: #ffffff;
    .monitor_wrap {
      width: 80%;
      margin: 0 auto;
      padding: 30px 0;
      min-width: 1200px;

      .model_title {
        color: #ffffff;
      }

      .monitor_col {
        text-align: center;
        .monitor_arrow {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 77px;
        }
      }
    }
  }

  .solve_warp {
    overflow: hidden;
    color: #ffffff;
    height: 480px;
    .solve_item {
      padding: 50px 40px;
      .item_title {
        font-size: 24px;
      }
      .item_content {
        margin-bottom: 30px;
      }
      .item_ul {
        display: flex;
        align-items: center;
        margin-bottom: 30px;
        .ul_icon {
          color: #2FFFD2;
          font-size: 24px;
        }
      }
    }
  }
  .solve_warp.solve1 {
    background: url("../assets/images/home/solve1.png") no-repeat center center;
    background-size: 100% 100%;
  }
  .solve_warp.solve2 {
    background: url("../assets/images/home/solve2.png") no-repeat center center;
    background-size: 100% 100%;
  }
  .solve_warp.solve3 {
    background: url("../assets/images/home/solve3.png") no-repeat center center;
    background-size: 100% 100%;
  }

  .model_title {
    text-align: center;
    padding: 40px 0;
    color: #000000;

  }
  .model_content {
    margin-bottom: 40px;
  }

  .report_content {
    padding: 30px;
    border-radius: 5px;
    background-color: #f5f5f5;
  }
  :deep(.el-carousel__indicators--outside) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  :deep(.el-carousel__indicators--outside button) {
    height: 6px !important;
    width: 6px !important;
    background-color: #2969E7;
    border-radius: 2px;
  }
  :deep(.el-carousel__indicator.is-active button) {
    height: 10px !important;
    width: 10px !important;
  }
</style>