master

分支 (2)

管理

管理

master

protect

medical-industrial-park
/
index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>index</title>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <script type="text/javascript" src="js/jquery.js"></script>
  <link rel="stylesheet" href="css/comon0.css" />
  <link rel="stylesheet" href="css/common.css" />

  <script type="text/javascript" src="./static/vue.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

  <style>
    .myclick {
      cursor: pointer;
    }

    .box {
      width: 400px;
      height: 36px;
      border: 2px solid rgba(3, 19, 88);
      margin: auto;
      position: relative;
      z-index: 100;
      float: right;

      /* margin-right: -0.2rem; */
      margin-top: -0.1rem;
    }

    .input {
      float: left;
      width: 250px;
      /*宽400*/
      height: 34px;
      outline: none;
      border: none;
      text-align: center;
      border-radius: 4px;
      /*取消文本框内外边框*/
    }

    .button {
      float: left;
      width: 120px;
      height: 36px;
      color: white;
      background-color: rgba(3, 19, 88);
      /*将按钮背景设置为红色，字体设置为白*/
      border: none;
      outline: none;
      font-size: larger;
      /*取消边框和外边框将按钮边框去掉*/
    }

    .butt{
      background-color: rgba(3, 19, 88);
      border: none;
    }
    .el-icon-search:before{
      color: aliceblue;
      font-size: 23px;

    }
    .el-button--primary:hover{
      background-color: rgba(3, 19, 88,1);;
    }
    .el-button--info{
      background-color: #fff;
    }
    .bt{
      margin-right: 10px;
      margin-top: 9px;
    }
  </style>
</head>
<script>
  $(window).load(function () {
    $(".loading").fadeOut();
  });

  /****/
  $(document).ready(function () {
    var whei = $(window).width();
    $("html").css({ fontSize: whei / 20 });
    $(window).resize(function () {
      var whei = $(window).width();
      $("html").css({ fontSize: whei / 20 });
    });
  });
</script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script language="JavaScript" src="js/js.js"></script>

<body>
  <!-- <div class="canvas" style="opacity: .2">
	<iframe frameborder="0" src="js/index.html" style="width: 100%; height: 100%"></iframe>
	</div> -->
  <div class="loading">
    <div class="loadbox"><img src="picture/loading.gif" /> 页面加载中...</div>
  </div>
  <div class="head">
    <h1>重庆高新区医疗器械产业链平台</h1>
    <div class="weather">
      <!--<img src="picture/weather.png"><span>多云转小雨</span>--><span id="showTime"></span>
    </div>

    <script>
      var t = null;
      t = setTimeout(time, 1000); //開始运行
      function time() {
        clearTimeout(t); //清除定时器
        dt = new Date();
        var y = dt.getFullYear();
        var mt = dt.getMonth() + 1;
        var day = dt.getDate();
        var h = dt.getHours(); //获取时
        var m = dt.getMinutes(); //获取分
        var s = dt.getSeconds(); //获取秒
        document.getElementById("showTime").innerHTML =
          y + "-" + mt + "-" + day + " " + h + ":" + m + ":" + s;
        t = setTimeout(time, 1000); //设定定时器，循环运行
      }
    </script>
    <div class="navtop" style="background-color: rgba(3, 19, 88); margin-top: 10px">
      <div style="float: left">
        <nav>
          <ul>
            <li><a class="myclick" to="index_2.html">产业链总览</a></li>
            <li><a class="myclick" to="part3.html">发展指标监测</a></li>
            <li><a class="myclick" to="./gailan/index.html">产业链概览</a></li>
            <li><a class="myclick" to="page_1.html">企业和产品</a></li>
            <li><a class="myclick" to="page_3.html">高新区产业链企业</a></li>
            <li><a class="myclick" to="./dist/index.html">平台运营服务</a></li>
          </ul>
        </nav>
      </div>
      <div style="flex: 1 20px;"></div>
      <div class="box" style="float: left;float: left;">
        <div class="box" id="app">
          <el-select v-model="value" placeholder="请选择" style="width: 130px;" @change="changeRestaurants" size="mini">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-autocomplete class="inline-input" v-model="state1" :fetch-suggestions="querySearch" placeholder="请输入内容"
            @select="handleSelect" size="mini"></el-autocomplete>
          <el-button id="btn" class="butt" type="primary" icon="el-icon-search" @click="find" size="medium" ></el-button>
          <!-- <el-button type="danger" round>危险按钮</el-button> -->
        </div>
      </div>
      <div id="app2" style="width: 150px;margin-top: -8px;">
        <el-button type="info" size="mini" class="bt">登录</el-button>
      </div>
    </div>

    <script>
      var nav = $("nav");
      var line = $("<div />").addClass("line");

      line.appendTo(nav);

      var active = nav.find(".active");
      var pos = 0;
      var wid = 0;

      if (active.length) {
        pos = active.position().left;
        wid = active.width();
        line.css({
          left: pos,
          width: wid,
        });
      }

      nav.find("ul li a").click(function (e) {
        if (!$(this).parent().hasClass("active")) {
          e.preventDefault();

          var _this = $(this);

          nav.find("ul li").removeClass("active");

          var position = _this.parent().position();
          var width = _this.parent().width();

          if (position.left >= pos) {
            line.animate(
              {
                width: position.left - pos + width,
              },
              300,
              function () {
                line.animate(
                  {
                    width: width,
                    left: position.left,
                  },
                  150
                );
                _this.parent().addClass("active");
              }
            );
          } else {
            line.animate(
              {
                left: position.left,
                width: pos - position.left + wid,
              },
              300,
              function () {
                line.animate(
                  {
                    width: width,
                  },
                  150
                );
                _this.parent().addClass("active");
              }
            );
          }

          pos = position.left;
          wid = width;
        }
      });
    </script>

    <iframe id="page-view" src="index_2.html" style="width: 100%; height: 1200px; border: none; margin-bottom: -20px">
    </iframe>

    <script>
      let navs = document.getElementsByClassName("myclick");
      for (let i = 0; i < navs.length; i++) {
        navs[i].addEventListener(
          "click",
          function (event) {
            document.getElementById("page-view").src =
              event.target.getAttribute("to");
            // console.log(document.getElementById('page-view').contentWindow.document.getElementsByTagName('body'))
            // processInnderDiv(event.target);
          },
          false
        );
      }

      window.onload = function () {
        let hre = window.location.search;
        if (hre == "?1") {
          document.getElementById("page-view").src = "page_3.html";
        }
      };
    </script>

    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            restaurants: [],
            state1: '',
            options: [{
              value: 1,
              label: '企业名称'
            }, {
              value: 2,
              label: '产品名称'
            }, {
              value: 3,
              label: '注册证编号'
            }],
            value: 1
          };
        },

        methods: {
          querySearch(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
          },
          createFilter(queryString) {
            return (restaurant) => {
              return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
          },
          loadAll(index) {
            console.log(this.value)
            return [
              [
                { "value": "大博医疗科技股份有限公司", "key": "1" },
                { "value": "深圳市兴汇科技有限公司", "key": "2" },
                { "value": "上海励图医疗器材有限公司", "key": "3" }
              ],
              [
                { "value": "金属直型接骨板", "key": "1" },
                { "value": "动力髋、髁加压接骨板系统", "key": "2" },
                { "value": "金属空心接骨螺钉", "key": "3" }
              ],
              [
                { "value": "20173130721", "key": "1" },
                { "value": "20163132441", "key": "2" },
                { "value": "20163132432", "key": "3" }
              ],
            ][index];
          },
          handleSelect(item) {
            console.log(item);
          },
          find() {
            this.$message.success('搜索中')
          },
          changeRestaurants() {
            this.state1 = ''
            this.restaurants = this.loadAll(this.value - 1);
          }
        },
        mounted() {
          this.restaurants = this.loadAll(this.value - 1);
        }
      },
      )

      new Vue({
        el:"#app2"
      })
      document.getElementById('btn').class='button butt el-button--primary el-button--medium '
    </script>

    <script type="text/javascript" src="js/visual-map.js"></script>
  </div>
  <!-- <script type="text/javascript" src="js/china.js"></script>
<script type="text/javascript" src="js/area_echarts.js"></script>  -->
</body>

</html>