jyyqfk_zjd/src/views/HomeView.vue

<template>
  <div class="home">
    <!-- 头部 -->
    <header-top>
      <span slot="Bigtitle">缙云县疫情防控服务</span>
    </header-top>

    <!-- 主体 -->
    <div class="context">
      <!-- 导航 -->
      <nav-bar></nav-bar>
      <!-- 疫情服务数据 -->
      <covid-serve></covid-serve>

      <!-- 分页 -->
      <van-tabs v-model="active" background="#F7F7F7" line-width="32px">
        <van-tab title="今日专报">
          <div class="jrzb">
            <img class="jrzbimg" src="../assets/image/index/位图.png" alt="" />
          </div>
        </van-tab>
        <van-tab title="最新文件">
       <card :poicefilelist="poicefilelist"></card>
        </van-tab>
        <van-tab title="中高风险地区">
          <!-- 风险地区搜索 -->
          <!-- 搜索框 -->
          <div class="sickarea">
            <div class="search">
              <van-search
                v-model="value"
                placeholder="请输入搜索关键词"
                @search=""
              >
              </van-search>
              <van-button @click="" type="info">搜索</van-button>
            </div>
          </div>

          <!-- 中高风险地区切换TAP -->
          <tap-item></tap-item>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>




<script>
// 导入 header组件
import HeaderTop from "../components/header/header.vue";
// 导入navbar
import NavBar from "../components/navbar/navbar.vue";
// 导入缙云县疫情服务
import CovidServe from "../components/covidserve/CovidServe.vue";
// 导入 最新文件 循环组件
import Card from '@/components/carditem/card.vue';

// 导入 中高风险地区切换tap
import TapItem from "../components/Tapitem/TapItem.vue"

import { getpoicefile } from "../network/poicefile"



export default {
  name: "index",
  components: {
    HeaderTop,
    NavBar,
    CovidServe,
    TapItem,
    Card
  },

  data() {
    return {
      // 搜索属性
      value: " ",
      active: 0,
      poicefilelist:[]
    };
  },
  created(){
     this.getpoicefile();
  },

  methods: {
    // 搜索方法
    // onSearch() {},
        getpoicefile() {
      getpoicefile("", 0, 1).then((res) => {
        console.log(res);
        this.poicefilelist.push(...res.data.data);
        console.log("file+" + this.poicefilelist);
      });
    },
  }

}
</script>



<style scoped>
.context {
  width: 90%;
  margin: 0 auto;
}
.jrzbimg {
  width: 100%;
}
.jrzb {
  margin-top: 3vw;
}

/* button */
.van-button {
  height: 32px;
  width: 20%;
}

/* tab切换标签 */
/deep/ .van-tabs__line {
  background-color: #1677ff;
}
.span.van-tab__text.van-tab__text--ellipsis {
  font-size: 16px;
}
/deep/.van-tabs__nav--line {
  width: 100%;
}
/deep/.van-tab {
  color: rgb(51, 51, 51);
  font-size: 16px;
  font-weight: bold;
}

/* 搜索框
 */
.search {
  display: flex;
  justify-content: space-evenly;
  padding-top: 2vw;
  margin-bottom: 5vw;
}
.van-search {
  padding: 0px;
  width: 80%;
  margin-right: 2vw;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(237, 237, 237, 1);
  border-radius: 1vw;
}
.van-search .van-cell {
  padding: 1px;
}
.van-search__content {
  background-color: rgba(255, 255, 255, 1);
}
.van-cell {
  font-size: 16px;
  line-height: 32px;
  height: 32px;
}

/* button */
.van-button {
  height: 32px;
  width: 20%;
}
</style>