
<template>
    <div>
        <van-search
            v-model="value"
            placeholder="搜索"
            @search="onSearch" 
            >
        </van-search>
        <div class="card" v-for="(item,index) in list"  :key="index"  @click="warningClick(item)">
            <div class="card-header">
                <van-row>
                    <van-col span="10">
                        <span class="card-header-left">{{item.warningName}}</span>
                    </van-col>
                    <van-col span="6" class="card-header-medium">
                        <van-tag size="medium" type="danger">SOS</van-tag>
                    </van-col>
                    <van-col span="8" class="card-header-right">
                        <van-tag :color="item.isreading? '#07c160': '#ee0a24'" class="status" plain v-if="item.isreading">已读</van-tag>
                        <van-tag :color="item.isreading? '#07c160': '#ee0a24'" class="status" plain v-else-if="!item.isreading">未读</van-tag>
                    </van-col>
                </van-row>
            </div>
            <div class="card-body">
            {{item.content}}
            </div>
        </div>
    </div>
</template>
<script>
import { getFun,postFun } from '@/service/table'
export default {
    name: 'SOS',
    components: {
        
    },
    data() {
        return {
            value:'',//搜索值
            list:[
                {
                    warningName:'SOS求救报警',
                    isreading:false,
                    content:'2021年8月23日 12:34:32 有限空间作业-0294758 张天爱 发出 SOS求救报警，请附近人员及时进行赶往现场进行救援。'
                },
            ]
           
        }
    },
    mounted() {
        
    },
    methods: {
        //搜索查询
        onSearch(){
            
        },
        //点击卡片跳转
        warningClick(item){
            this.$router.push('/isoDetail')
        }
    }
}
</script>
<style lang="less" scoped>
    /* 搜索框 */
    .van-search{
        margin:0.26667rem auto 0;
        width: 95%;
        border-radius: 4%;
        border-radius: 5px;
        padding: 5px 12px;
    }
    .van-search__content {
      background-color: #ffffff;
    }
    /* 卡片系列 */
    .card{
    width:90%;
    box-shadow: 0px 0px 10px 2px #F3F3F3;
    padding: 0.25rem;
    margin:0.26667rem auto;
    background: white;
    border-radius: 4%;
    }
    .card div{
        font-size: 0.4rem;
        line-height: 0.7rem;
    }
    .card-header-left{
        font-weight: bolder;
    }
    .card-header-left{
        font-size: 0.45rem;
    }
    .card-header-right{
        text-align: right;
    }
    .card-header-medium{
        text-align: left;
    }
    .status {
        padding: 3px 8px !important;
        right: 0.286667rem !important;
    }
</style>