xjc-vue/src/views/xjc-integratedmachine/environment/career_story1.vue

<template>
    <div class="university_details_video">
        <head-component :headinfo=headinfo></head-component>
        <div class="page-content">
            <div class="page-img-box">
                <!--        生涯故事1-->
                <div>
                    <div class="item-box" v-for="(item,index) in list" @click="toDetail(item)">
                        <div class="top">
                            <p class="title" v-html="item.title"></p>
                            <p class="details">详情 ></p>
                        </div>

                        <div class="content">{{ safeTruncate(item.content, 50) }}...</div>
                    </div>
                </div>
                <!--<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"-->
                <!--v-model:limit="queryParams.pageSize" @pagination="query"/>-->
                <xjc-pagination v-if="!loading" :total="total" :pageNum="queryParams.pageNum" :pageSize="queryParams.pageSize"
                                @changePage="changePage"></xjc-pagination>
            </div>
            <drag_component v-if="false"></drag_component>
        </div>
    </div>

</template>
<script setup>
    import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
    import Drag_component from "@/views/xjc-integratedmachine/components/drag_component.vue";
    import xjcPagination from "@/views/xjc-integratedmachine/components/xjc_pagination.vue"

    import {
        universityDetail,
        getPlanYearList,
        getScoreList,
        getPlanList,
        getCollection
    } from '@/api/xjc-integratedmachine/environment/university.js'
    import videojs from 'video.js';
    import 'video.js/dist/video-js.css';

    import collectionComponent from '@/views/xjc-integratedmachine/components/collection_component.vue'
    import {ref} from "vue";
    import {getConfigKey} from "@/api/system/config.js";
    import {careerinformation} from '@/api/xjc-integratedmachine/environment/tscareer.js'

    const router = useRouter()
    const route = useRoute()
    const list = ref([])
    const total = ref(0)

    const showAreaChoose = ref(false)
    const showCategoryChoose = ref(false)
    const showGradeChoose = ref(false)

    const param = route.query
    const showIndex = ref(1)
    const baseUrl = ref()


    const grade = ref([])

    const {proxy} = getCurrentInstance()


    function changePage(params) {

        queryParams.value.pageSize = params.value.pageSize
        queryParams.value.pageNum = params.value.pageNum
        query()
    }

    const {
        gk_province,
        category,
        educationlevel,
        property,
        school_category
    } = proxy.useDict('gk_province', 'category', 'educationlevel', 'property', 'school_category')

    const form = ref({
        area: null,
        areaname: null,
        university: param.name,
    })

    const entity = ref({})
    const collectionList = ref([])
    const headinfo = ref({})
    const onePage = ref(true)
    const twoPage = ref(false)
    const threePage = ref(false)
    const fourPage = ref(false)
    const fivePage = ref(false)
    const fivePageDialog = ref(false)
    const sixPageDialog = ref(false)
    const eightPageDialog = ref(false)


    const sixPage = ref(false)
    const senvenPage = ref(false)
    const eightPage = ref(false)

    function setHeadinfo() {
        headinfo.value = {
            title: '生涯故事',
            user: {
                avatar: '头像路径',
                nickName: '张三'
            },
            backUrl: '/xjc-integratedmachine/environment/query_universitydb_conditions',
            homeUrl: '/xjc-integratedmachine/environment/index',

        }
    }

    function safeTruncate(text, length) {
        // 使用 substring 方法截取字符串

        // 这里可以添加额外的消毒步骤来确保文本安全
        // 例如：使用正则表达式移除所有脚本标签等
        // let reg = /[\u4e00-\u9fa5]|[\（\）\《\》\——\；\，\。\“\”\<\>\！]/g;
        // const sanitizedText = text.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
        const sanitizedText = text.replace(/[^\u4e00-\u9fa5；，。“”《》？！]+/g, '');
        // const truncatedText = sanitizedText.substring(0, length);

        const truncatedText = sanitizedText.substring(0, length);
        console.log("truncatedText", truncatedText)
        // 但为了简化示例，这里仅返回截取的文本
        return truncatedText;
    }

    onMounted(() => {
        setHeadinfo()

    })

    const queryParams = ref({
        pageNum: 1,
        pageSize: 3,
        type: '5'
    })
    const loading = ref(false)
    function query() {
        loading.value = true
        careerinformation(queryParams.value).then(resp => {
            list.value = resp.data_list.rows
            total.value = resp.data_list.total
            loading.value = false
        })
    }

    function toDetail(item) {
        router.push({
            path: '/xjc-integratedmachine/environment/career_story2',
            query: {
                id: item.id
            }
        })
    }

    onMounted(() => {
        query()
    })



</script>

<style scoped lang="scss">
    p, div {
        margin: 0;
        padding: 0;
    }

    .university_details_video {
        background: url('@/assets/images/environment/university-detail.png') no-repeat;
        background-size: 1920px 1080px;
        z-index: 10;
        width: 100%;
        height: 1080px;

        .page-content {
            width: 100%;
            position: absolute;
            top: 100px;
            bottom: 0;
            display: flex;
            justify-content: center;
        }

        .page-img-box {
            width: 1832px;
            height: 860px;
            margin-top: 13px;
            background: rgba(255, 255, 255, 0.4);
            border-radius: 35px 35px 35px 35px;
            display: flex;
            flex-direction: column;
            //overflow: auto;

            .item-box {
                width: 1750px;
                height: 204px;
                border-left: 10px solid #1EC590;
                background: #FFFFFF;
                box-shadow: 0px 2px 4px 2px rgba(0, 0, 0, 0.09);
                border-radius: 5px 5px 5px 5px;
                margin-left: 40px;
                margin-top: 46px;
                padding-left: 40px;
                padding-right: 40px;

                .top {
                    display: flex;
                    justify-content: space-between;
                    padding-top: 40px;

                    .title {
                        font-weight: bold;
                        font-size: 32px;
                        color: #000000;
                        line-height: 52px;
                        //margin-left: 25px;
                    }

                    .details {
                        font-weight: 400;
                        font-size: 20px;
                        color: #515F6A;
                        //margin-right: 40px;
                        //margin-top: 40px;
                    }
                }

                .content {
                    border-top: #E6E6E6 1px solid;
                    height: 100px;
                    overflow: auto;
                    padding-top: 30px;
                    font-weight: 400;
                    font-size: 30px;
                    color: #333333;
                }
            }
        }

    }

</style>