kuangshan-project/src/views/meihuajing/yinhuanpaicha/yinhuaninfo.vue

<template>
  <div>
    <div v-if="shows">
      <van-nav-bar title="隐患排查" left-arrow right-text="添加" @click-left="onClickLeft" @click-right="onClickRight"/>
    </div>
    <div class="contents">
      <div>
        <van-field
          readonly
          clickable
          label="责任单位"
          :value="value1"
          placeholder="请选择"
          @click="showPicker1 = true"
        />
        <van-popup v-model="showPicker1" round position="bottom">
          <van-picker
            show-toolbar
            :columns="columns1"
            @cancel="showPicker1 = false"
            @confirm="onConfirm1"
          />
        </van-popup>
      </div>

      <div>
        <van-field
          readonly
          clickable
          label="整改责任人"
          :value="value2"
          placeholder="请选择"
          @click="showPicker2 = true"
        />
        <van-popup v-model="showPicker2" round position="bottom">
          <van-picker
            show-toolbar
            :columns="columns2"
            @cancel="showPicker2 = false"
            @confirm="onConfirm2"
          />
        </van-popup>
      </div>

      <div>
        <van-field
          readonly
          clickable
          label="检查专业"
          :value="value3"
          placeholder="请选择"
          @click="showPicker3 = true"
        />
        <van-popup v-model="showPicker3" round position="bottom">
          <van-picker
            show-toolbar
            :columns="columns3"
            @cancel="showPicker3 = false"
            @confirm="onConfirm3"
          />
        </van-popup>
      </div>

      <div class="contents_button" @click="buttons">
        <button>查询</button>
      </div>
    </div>

    <div class="footed">
      <van-tabs @click="onClick" v-model="active">
        <van-tab title="我的发布">
          <div class="footed_box">
            <div class="footed_box_one">
              <p class="footed_box_one_p1">张三</p>
              <p class="footed_box_one_p2">2021-10-12</p>
              <p class="footed_box_one_p3">已验收</p>
            </div>
            <div class="footed_box_two">
              <div class="footed_box_two_div">
                <span class="footed_box_span1">风险点</span>
                <span>111001运输港</span>
              </div>
              <div class="footed_box_two_div">
                <span class="footed_box_span1">检查单位</span>
                <span>掘进专业</span>
              </div>
              <div class="footed_box_two_div">
                <span class="footed_box_span1">责任但闻</span>
                <span>综掘进三队</span>
              </div>
            </div>
            <div class="footed_box_three">
              <img src="../../../assets/images/meihuajing/信息.png" alt="" />
            </div>
          </div>
        </van-tab>
        <van-tab title="我的整改">
          <div class="footed_box">
            <div class="footed_box_one">
              <p class="footed_box_one_p1">李四</p>
              <p class="footed_box_one_p2">2021-10-13</p>
              <p class="footed_box_one_p6">未整改</p>
            </div>
            <div class="footed_box_two">
              <div class="footed_box_two_div">
                <span class="footed_box_span1">风险点</span>
                <span>111001运输港</span>
              </div>
              <div class="footed_box_two_div">
                <span class="footed_box_span1">检查单位</span>
                <span>掘进专业</span>
              </div>
              <div class="footed_box_two_div">
                <span class="footed_box_span1">责任但闻</span>
                <span>综掘进三队</span>
              </div>
            </div>
            <div class="footed_box_three" @click="dianji">
              <img src="../../../assets/images/meihuajing/信息.png" alt="" />
            </div>
          </div>
        </van-tab>
        <van-tab title="全部">
          <div class="footed_box">
            <div class="footed_box_one">
              <p class="footed_box_one_p1">王五</p>
              <p class="footed_box_one_p2">2021-10-14</p>
              <p class="footed_box_one_p5">逾期</p>
            </div>
            <div class="footed_box_two">
              <div class="footed_box_two_div">
                <span class="footed_box_span1">风险点</span>
                <span>111001运输港</span>
              </div>
              <div class="footed_box_two_div">
                <span class="footed_box_span1">检查单位</span>
                <span>掘进专业</span>
              </div>
              <div class="footed_box_two_div">
                <span class="footed_box_span1">责任但闻</span>
                <span>综掘进三队</span>
              </div>
            </div>
            <div class="footed_box_three" @click="dianji">
              <img src="../../../assets/images/meihuajing/信息.png" alt="" />
            </div>
          </div>

          <div class="footed_box">
            <div class="footed_box_one">
              <p class="footed_box_one_p1">李四</p>
              <p class="footed_box_one_p2">2021-10-13</p>
              <p class="footed_box_one_p4">未验收</p>
            </div>
            <div class="footed_box_two">
              <div class="footed_box_two_div">
                <span class="footed_box_span1">风险点</span>
                <span>111001运输港</span>
              </div>
              <div class="footed_box_two_div">
                <span class="footed_box_span1">检查单位</span>
                <span>掘进专业</span>
              </div>
              <div class="footed_box_two_div">
                <span class="footed_box_span1">责任但闻</span>
                <span>综掘进三队</span>
              </div>
            </div>
            <div class="footed_box_three" @click="dianji1">
              <img src="../../../assets/images/meihuajing/信息.png" alt="" />
            </div>
          </div>

          <div class="footed_box">
            <div class="footed_box_one">
              <p class="footed_box_one_p1">张三</p>
              <p class="footed_box_one_p2">2021-10-12</p>
              <p class="footed_box_one_p6">未整改</p>
            </div>
            <div class="footed_box_two">
              <div class="footed_box_two_div">
                <span class="footed_box_span1">风险点</span>
                <span>111001运输港</span>
              </div>
              <div class="footed_box_two_div">
                <span class="footed_box_span1">检查单位</span>
                <span>掘进专业</span>
              </div>
              <div class="footed_box_two_div">
                <span class="footed_box_span1">责任但闻</span>
                <span>综掘进三队</span>
              </div>
            </div>
            <div class="footed_box_three" @click="dianji">
              <img src="../../../assets/images/meihuajing/信息.png" alt="" />
            </div>
          </div>

          <div class="footed_box">
            <div class="footed_box_one">
              <p class="footed_box_one_p1">赵六</p>
              <p class="footed_box_one_p2">2021-10-12</p>
              <p class="footed_box_one_p3">已验收</p>
            </div>
            <div class="footed_box_two">
              <div class="footed_box_two_div">
                <span class="footed_box_span1">风险点</span>
                <span>111001运输港</span>
              </div>
              <div class="footed_box_two_div">
                <span class="footed_box_span1">检查单位</span>
                <span>掘进专业</span>
              </div>
              <div class="footed_box_two_div">
                <span class="footed_box_span1">责任但闻</span>
                <span>综掘进三队</span>
              </div>
            </div>
            <div class="footed_box_three" @click="dianji2">
              <img src="../../../assets/images/meihuajing/信息.png" alt="" />
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shows: true, //tabber是否显示
      active: 2,
      value1: "",
      value2: "",
      value3: "",
      showPicker1: false,
      showPicker2: false,
      showPicker3: false,
      columns1: ["综掘进一队", "综掘进二队", "综掘进三队"],
      columns2: ["张三", "李四", "王五"],
      columns3: ["掘进专业", "钻头专业", "打井专业"],
    };
  },
  methods: {
    //返回按钮
    onClickLeft() {
      //   window.history.back();
      console.log("sss");
    },
    onClickRight(){
      this.$router.push("/meihuajing/yinhuanpaicha/yinhuanform");
    },
    onConfirm1(value) {
      //   console.log("1");
      console.log(value);
      this.value1 = value;
      this.showPicker1 = false;
    },
    onConfirm2(value) {
      //   console.log("2");
      console.log(value);
      this.value2 = value;
      this.showPicker2 = false;
    },
    onConfirm3(value) {
      //   console.log("3");
      console.log(value);
      this.value3 = value;
      this.showPicker3 = false;
    },
    buttons() {
      console.log(this.value1, this.value2, this.value3);
    },
    onClick(name, title) {
      console.log(name, title);
    },
    dianji(){
      this.$router.push("/meihuajing/yinhuanpaicha/yinhuanformz");
    },
    dianji1(){
      this.$router.push("/meihuajing/yinhuanpaicha/yinhuanformy");
    },
    dianji2(){
      this.$router.push("/meihuajing/yinhuanpaicha/yinhuanformok");
    }
  },
  mounted() {
    document.body.style.backgroundColor = "#f0f0f0"; //背景色
  },
};
</script>

<style scoped>
>>> .van-nav-bar {
  background: #39f;
}
>>> .van-nav-bar__title {
  color: #fff;
}
>>> .van-nav-bar .van-icon {
  color: #fff;
}
>>> .van-nav-bar__text {
  color: #fff;
}
[class*="van-hairline"]:after {
  border: none;
}
.contents {
  width: 100%;
  background: #fff;
}
.contents_button {
  width: 151px;
  margin: 20px auto;
  height: 34px;
  background: #39f;
  border-radius: 20px;
  text-align: center;
  line-height: 34px;
}
.contents_button > button {
  border: none;
  background: #39f;
  color: #fff;
}
.footed {
  width: 100%;
  background: #fff;
}
.footed_box {
  width: 90%;
  margin: 5px auto;
  display: flex;
  border-bottom: 1px solid #f0f0f0;
}
.footed_box_one {
  width: 30%;
  text-align: center;
}
.footed_box_two {
  width: 56%;
}
.footed_box_three {
  width: 10%;
  text-align: center;
}
.footed_box_three > img {
  margin-top: 34px;
  width: 34px;
}
.footed_box_two_div {
  display: flex;
  margin-top: 10px;
  margin-bottom: 10px;
}
.footed_box_span1 {
  width: 77px;
  color: #9b9b9b;
}
.footed_box_one_p1 {
  margin-top: 10px;
  font-size: 20px;
}
.footed_box_one_p2 {
  font-size: 14px;
  color: #9b9b9b;
}
.footed_box_one_p3 {
  background: #4dc100;
  width: 70px;
  height: 25px;
  margin: 5px auto;
  color: #fff;
  border-radius: 20px;
  line-height: 25px;
  font-size: 15px;
}
.footed_box_one_p4{
  background: #fdaf00;
  width: 70px;
  height: 25px;
  margin: 5px auto;
  color: #fff;
  border-radius: 20px;
  line-height: 25px;
  font-size: 15px;
}
.footed_box_one_p5{
  background: #c00201;
  width: 70px;
  height: 25px;
  margin: 5px auto;
  color: #fff;
  border-radius: 20px;
  line-height: 25px;
  font-size: 15px;
}
.footed_box_one_p6{
  background: #39f;
  width: 70px;
  height: 25px;
  margin: 5px auto;
  color: #fff;
  border-radius: 20px;
  line-height: 25px;
  font-size: 15px;
}
</style>