<template>
    <div style="padding: 10px">
        <div style="background: #fff; border-radius: 8px; padding: 20px;">
            <div class="query-c">
                <h1>病害分析</h1>
                <!-- Example single danger button -->
                <div style="margin-top:2vh">
                    <Dropdown trigger="click" style="margin-left: 20px">
                        <a href="javascript:void(0)" style="color:#515a6e;border:solid 1px #CCC">
                            全部种植基地
                            <i class="arrow-down"></i>
                        </a>
                        <Dropdown-menu slot="list">
                            <Dropdown-item></Dropdown-item>
                            <Dropdown-item>基地1</Dropdown-item>
                            <Dropdown-item>基地2</Dropdown-item>
                            <Dropdown-item>基地3</Dropdown-item>
                        </Dropdown-menu>
                    </Dropdown>
                    <Dropdown trigger="click" style="margin-left: 20px">
                        <a href="javascript:void(0)" style="color:#515a6e;border:solid 1px #CCC">
                            全部类型
                            <i class="arrow-down"></i>
                        </a>
                        <Dropdown-menu slot="list">
                            <Dropdown-item></Dropdown-item>
                            <Dropdown-item>正常</Dropdown-item>
                            <Dropdown-item>严重</Dropdown-item>
                            <Dropdown-item>非常严重</Dropdown-item>
                        </Dropdown-menu>
                    </Dropdown>
                </div>
                <!-- <Input search placeholder="请输入查询内容" style="width: auto" /> -->
            </div>
            <br>
            <div>
                <div v-for="(item,i) in datas" :key=i>
                    <div class="out_box_t row_dsp" @click="onClick">
                        <div class="word_left"  @click="onClick">
                            <span>{{item.content}}</span>
                        </div>
                        <div class="word_right_t"  @click="onClick">
                            <span class="word_right_t">{{item.date}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <br>
            <Page :total="100" show-sizer show-elevator/>
        </div>
    </div>
</template>

<script>
export default {
    name: 'bhfx',
    data() {
        return {
            columns1: [
                {
                    title: '分析结果',
                    key: 'name',
                },
            ],
            visible: false,
            datas: [
                {
                    content: 'John Brown',
                    date: '2016-10-03 10:19',
                },
                {
                    content: 'John',
                    date: '2016-10-03 10:19',
                },
                {
                    content: 'Brown',
                    date: '2016-10-03 10:19',
                },
            ],
            methods: {
                handleOpen() {
                    this.visible = true
                },
                handleClose() {
                    this.visible = false
                },
                onClick() {
                    this.$router.push({ path: '/' })
                },
            },
        }
    },
}
</script>

<style scoped>
.btn_t{
    background: none;
}
.dropdown-menu {
    /* min-width:1px; */
}
.out_box_t{
    padding: 1vw;
}
.arrow-down {
  border-left: 1px solid #000000;
  border-bottom: 1px solid #000000;
  height: 5px;
  width: 5px;
  transform: translate(1px, -1px) rotate(-45deg);
  -webkit-transform: translate(1px, -1px) rotate(-45deg);
  border-right: 1px solid transparent;
  border-top: 1px solid transparent;
  display: inline-block;
  -moz-transform: translate(1px, -1px) rotate(-45deg);
  -ms-transform: translate(1px, -1px) rotate(-45deg);
  -o-transform: translate(1px, -1px) rotate(-45deg);
}
.out_box_t{
    border:solid 1px rgb(157, 151, 151);
}
.word_center_t{
     text-align:center;
}
.word_left_t{
     text-align:left;
}
.word_right_t{
     text-align:right;
}
.row_dsp{
    display: flex;
    align-items: center;
    /* justify-content: space-around; */
    justify-content: space-between;
}
.list_box_t{

}
</style>
