const jcdt = {
    template: /*language=HTML*/ `
        <div class="jcdt-wrapper">
            <div class="jcdt-container">
                <div class="jcdt-title">
                    <span>综合新闻</span>
                </div>
                <div class="jcdt-content">
                    <div class="jcdt-list">
                        <div class="jcdt-item" v-for="item in list" :key="item.title" @click="onLink(item)">
                            <div class="date" v-if="item.date">{{item.date}}</div>
                            <div style="display: flex; align-items: center">
                                <div >
                                    <el-image style="width: 30px" src="/assets/platform/img/v4/xw.png" ></el-image>
                                </div>
                                <div class="title">{{item.title}}</div>
                            </div>

                            <!--<div class="image">
                                <img v-if="item.image" :src="item.image" alt="">
                                <img v-else src="/assets/platform/img/v4/not-image.png" alt="">
                            </div>-->
                            <!--                            <div class="summary">{{item.summary}}</div>-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `,
    data() {
        return {}
    },
    props: {
        list: {
            type: Array,
            default: []
        }
    },
    methods: {
        onLink(item) {
            if(!item.url) return
            window.open(item.url)
        },
    },
    style: /*language=CSS*/ `
        .jcdt-wrapper {
            width: 100%;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .jcdt-container {
            width: 80%;
            max-width: 80%;
            margin: 0 auto;

            background-color: #FFFFFF;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 10px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
        }

        .jcdt-title{
            font-size: 30px;
            color: #000000;
            display: block;
            font-weight: bold;
            position: relative;
            text-align: center;
            padding: 20px 0;
        }

        /deep/ .jcdt-container .jcdt-title span::before {
            content: '';
            width: 24px;
            height: 11px;
            background: url(https://www.ncu.edu.cn/images/titl.svg) no-repeat center;
            background-size: 24px 11px;
            display: inline-block;
            margin-right: 0;
            vertical-align: middle;
        }

        /deep/ .jcdt-container .jcdt-title span::after {
            content: '';
            width: 24px;
            height: 11px;
            background: url(https://www.ncu.edu.cn/images/titr.svg) no-repeat center;
            background-size: 24px 11px;
            display: inline-block;
            margin-left: 0;
            vertical-align: middle;
        }

        .jcdt-list {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }

        .jcdt-item {
            display: flex;
            flex-direction: column;
            padding: 16px;
            border: none;
            border-bottom: 3px solid transparent;
            transition: all 0.3s ease;
            cursor: pointer;
            height: auto;

            border-radius: 12px;
        }

        .jcdt-item:hover{
            background: #ffffff;
            border-bottom-color: var(--color-primary);
            transform: translateY(-4px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }

        .jcdt-item .date {
            font-size: 20px;
            font-weight: bold;
            white-space: nowrap;
            text-align: left;
            margin-bottom: 8px;
            transition: opacity 0.3s ease;
        }

        .jcdt-item .title {
            font-size: 16px;
            font-weight: 600;
            /*margin-bottom: 12px;*/
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            /*height: 45px;*/
        }

        .jcdt-item .image {
            width: 100%;
            height: 180px;
            margin: 0 0 16px 0;
            border-radius: 8px;
            overflow: hidden;
            background: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .jcdt-item .image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .jcdt-item .summary {
            font-size: 14px;
            color: #666;
            line-height: 1.6;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-align: justify;
            margin-bottom: 12px;
        }

    `
};