recruit/app/home/view/notice/index.html

{extend name="public/base"/}
{block name="css"}
<style>
    .substring {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

    .new-se-group {width: 100%;height: 155px;background-image: url("/static/home/images/nebanner.jpg");background-repeat: no-repeat;background-position: center center;}
    .new-se-group .new-se-main {width: 1200px;height: 99px;padding-top: 56px;margin: 0 auto;}
    .new-se-group .new-se-main .ip-group {margin: 0 auto;background: #FFF;height: 45px;width: 770px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
    .new-se-group .new-se-main .ip-box {float: left;padding-top: 7px;width: 626px;padding-left: 17px;}
    .new-se-main .ip-box input {width: 616px;height: 28px;line-height: 36px;border: 0;}
    .new-se-group .new-se-main .ip-btn {float: left;width: 127px;height: 45px;background-color: #dd4250;font-size: 18px;text-align: center;line-height: 45px;border: 0;color: #FFFFFF;cursor: pointer;border-radius: 0 3px 3px 0;}

    .panel {background-color: #FFF;margin: 0 auto;width: 1200px;margin-top: 40px;}
    .newslist{width:100%;background-color: #fff;border-bottom: 1px #ebeef5 solid;margin-top: 10px;padding: 5px 30px 50px 30px;box-sizing: border-box;}
    .newslist .list {border-bottom: 1px #ebeef5 solid;padding-top: 20px;padding-bottom: 20px;cursor: pointer;}
    .newslist .list:hover .t span {text-decoration: underline;}
    .newslist .list .br {padding-left:10px;width: 100%;}
    .newslist .list .br .t {color:#000;font-size: 18px;height: 30px;float: left;width: 500px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-weight: bold;}

    .newslist .list .br .time {width: 300px;float: right;text-align: right;height: 25px;color: #dd4250;padding-top: 2px;}
    .newslist .list .br .time .time1 {padding-left: 10px;position: relative;}
    .newslist .list .br .summary {width: 100%;font-size: 12px;color: #a0a0a0;-ms-word-break: break-all;word-break: break-all;line-height: 24px;}
    .ellipsis-multiline {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;text-overflow: ellipsis;}

    .el-pagination {justify-content: center;padding:10px 0;}
    .el-pagination.is-background .el-pager li.is-active {background-color: #dd4250;color: var(--el-color-white);}
</style>
{/block}
{block name="body"}
<div class="new-se-group">
    <div class="new-se-main">
        <div class="ip-group">
            <div class="ip-box"><input type="text" v-model="keyword" placeholder="请输入关键字"></div>
            <div class="ip-btn" @click="onSubmit">搜通知</div>
            <div class="clear"></div>
        </div>
    </div>
</div>
<div class="panel" v-loading="loading">
    <div class="l" style="width: 100%;">
        <div class="newslist">
            <div class="list" v-for="item in list" @click="toDetail(item.id)">
                <div class="br link_gray6">
                    <div class="t substring">
                        <span>{{item.title}}</span>
                    </div>
                    <div class="time substring">
                        <span class="time1">{{item.update_show}}</span>
                    </div>
                    <div class="clear"></div>
                    <div class="summary ellipsis-multiline">{{item.summary}}</div>
                </div>
            </div>
            <el-empty description="暂无更多数据" v-show="list.length == 0"></el-empty>
        </div>
        <el-pagination background :hide-on-single-page="true" :page-size="limit" layout="prev, pager, next" :total="total" @current-change="onPage"></el-pagination>
    </div>
</div>
{/block}
{block name="script"}
<script>
    function v_setup() {
        let base = {};

        base.keyword = Vue.ref("{$keyword}");
        base.onSubmit = () => {
            location.href = "{:url('notice/index')}?keyword=" + base.keyword.value;
        };

        base.loading = Vue.ref(true);
        base.page = Vue.ref(1);
        base.total = Vue.ref({$total});
        base.limit = Vue.ref({$limit});
        base.list = Vue.reactive([]);
        base.onPage = num => {
            base.page.value = num;
            base.getList();
        };
        base.getList = () => {
            base.loading.value = true;
            postJson("{:url('notice/list')}", {page:base.page.value,limit:base.limit.value,keyword:base.keyword.value}).then(function ({data}) {
                base.loading.value = false;
                if (data.length === 0) {
                    base.finished.value = true;
                } else {
                    base.list = data;
                }
            });
        };
        base.getList();

        base.toDetail = id => {
            location.href = "{:url('notice/detail')}?id=" + id;
        };


        return base;
    }
</script>
{/block}