recruit/app/home/view/news/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;}

    .list_content {background-color: #FFF;margin: 0 auto;width: 1200px;margin-top: 40px;}
    .list_content .ul {padding: 0 35px;}
    .list_content .ul .li {padding: 25px 0;border-bottom: 1px solid #ECECEC;}
    .list_content .ul .li .notice {font-size: 16px;font-weight: bold;}
    .list_content .ul .li .date {margin: 5px 0;font-size: 12px;color: rgb(156, 155, 155);}
    .list_content .article {position: relative;line-height: 14px;}
    .list_content .article .article-content {display: inline-block;width: 1053px;font-size: 12px;color: #999999;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
    .list_content .article .article-all {font-size: 12px;color: #2C619D;position: absolute;right: 0;}

    .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="list_content" v-loading="loading">
    <ul class="ul">
        <li class="li" v-for="item in list" @click="toDetail(item.id)">
            <div class="notice">
                <a href="https://hxks.hxrc-app.com/content/recruit/article/show?id=702" style="color:black">
                    {{item.title}}
                </a>
            </div>
            <div class="date">日期：{{item.update_show}}&nbsp;浏览{{item.volume}}次
            </div>
            <div class="article">
                <div class="article-content">{{item.summary}}</div>

                <a href="https://hxks.hxrc-app.com/content/recruit/article/show?id=702" class="article-all">查看全文</a>
            </div>
        </li>
    </ul>
    <el-empty description="暂无更多数据" v-show="list.length == 0"></el-empty>
    <el-pagination background :hide-on-single-page="false" :page-size="limit" layout="prev, pager, next" :total="total" @current-change="onPage"></el-pagination>
</div>
{/block}
{block name="script"}
<script>
    function v_setup() {
        let base = {};

        base.keyword = Vue.ref("{$keyword}");
        base.onSubmit = () => {
            location.href = "{:url('news/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('news/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('news/detail')}?id=" + id;
        };

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