learning-system-portal/src/views/contributorConferenceNew/example.vue

<template>
  <div id="bg">
    <waterMark></waterMark>
    <span id="point"></span>
    <span class="backIndex" @click="back">返回首页</span>
    <div id="example">
        <div class="item4" v-for="item in exampleList" :key="item.id" @click="[item.url != '' ? toLink(item.url) : toLink('')]">
            <div class="txt5">{{item.name}}</div>
            <div>
                <span class="tag" v-if="item.tag1 !== undefined && item.tag1 !== ''">#{{item.tag1}}</span>
                <span class="tag" v-if="item.tag2 !== undefined && item.tag2 !== ''">#{{item.tag2}}</span>
                <span class="tag" v-if="item.tag3 !== undefined && item.tag3 !== ''">#{{item.tag3}}</span>
                <span class="tag" v-if="item.tag4 !== undefined && item.tag4 !== ''">#{{item.tag4}}</span>
                <span class="tag" v-if="item.tag5 !== undefined && item.tag5 !== ''">#{{item.tag5}}</span>
                <span class="tag" v-if="item.tag6 !== undefined && item.tag6 !== ''">#{{item.tag6}}</span>
                <span class="tag" v-if="item.tag7 !== undefined && item.tag7 !== ''">#{{item.tag7}}</span>
                <span class="tag" v-if="item.tag8 !== undefined && item.tag8 !== ''">#{{item.tag8}}</span>
            </div>
            <div class="txt6" ref="text">{{item.content}}</div>
            <div><span class="name">{{item.owner}}</span><span class="org">{{item.system}}</span></div>
        </div>
        <div class="top" @click="top"></div>
    </div>
  </div>
</template>

<script>
import waterMark from '@/components/waterMark'
import example from '@/assets/js/examplenew.js'
export default {
    components:{
        waterMark
    },
    data() {
        return {
            exampleList:[]
        }
    },
    methods:{
        top(){
            document.getElementById("point").scrollIntoView();
        },
        back(){
            this.$router.back('/contributornew/index');
        },
        toLink(link){
            if(link == ''){
                this.$message('该案例为保密案例，暂不允许观看')
            }else{
                window.location = 'http://u.boe.com/pc/case/detail?id='+link;
            }
        },
    },
    mounted() {
      // 给 body 添加特定类名，用于限制样式作用域
      document.body.classList.add('contributor-conference-new-example-active');
      
        let list = example.example
        for(let i = 0; i<list.length; i++){
            if(list[i].content.length > 200){
                list[i].content = list[i].content.slice(0,175)+'......'
            }
        }
        this.exampleList = list
    },
    beforeDestroy() {
      // 组件销毁时移除类名
      document.body.classList.remove('contributor-conference-new-example-active');
    },

}
</script>

<style lang='scss'>
// 使用 body.contributor-conference-new-example-active 类名限制样式只在该页面生效
@media screen and (min-width: 1440px) and (max-width: 1600px){
    body.contributor-conference-new-example-active{
        zoom: 79%;
    }
    body.contributor-conference-new-example-active #bg{
         width: 1900px !important;
    }
}
@media screen and (min-width: 1366px) and (max-width: 1440px){
    body.contributor-conference-new-example-active{
        zoom: 74%;
    }
    body.contributor-conference-new-example-active #bg{
        width: 1869px !important;
    }
}
@media screen and (min-width: 1280px) and (max-width: 1366px){
    body.contributor-conference-new-example-active{
        zoom: 72%;
    }
    body.contributor-conference-new-example-active #bg{
        width: 1874px !important;
    }
}
@media screen and (max-width: 1280px){
    body.contributor-conference-new-example-active{
        zoom: 67%;
    }
    body.contributor-conference-new-example-active #bg{
        width: 1885px !important;
    }
}
</style>
<style scoped>
#bg{
    width: 1903px;
    height: 36984px;
    background-image: url(../../assets/images/contributor/example_bg1.png);
    background-repeat: no-repeat;
    background-color: #001228;
}
#example{
    position: relative;
    top: 500px;
    left: 253px;
    width: 1420px;
}
.item4{
    padding: 38px 116px 30px 125px;
    border: 1px solid #FEECBC;
    border-radius: 10px;
    box-sizing: border-box;
    display: inline-block;
    width: 1420px;
    background-color: #081017;
    margin-bottom: 30px;
    cursor: pointer;
}
.tag{
    display: inline-block;
    padding: 0 15px 0 15px;
    height: 34px;
    border: #FEECBC solid 1px;
    border-radius: 10px;
    background-color: #FBD09F;
    line-height: 34px;
    font-size: 16px;
    text-align: center;
    vertical-align: middle;
    color: #363636;
    margin:  0 26px 15px 0;
}
.txt5{
    color: #FFD89F;
    font-size: 28px;
    margin-bottom: 20px;
}
.txt6{
    font-size: 20px;
    color:#81807B;
    margin: 11px 0 11px 0;
    line-height: 37px;
    min-height: 111px;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    line-clamp: 3; /* 设置最大显示行数为7行 */
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.top{
    width: 63px;
    height: 63px;
    position: fixed;
    top: 800px;
    right: 80px;
    display: inline-block;
    background-image: url(../../assets/images/contributor/backTop.png);
    cursor: pointer;
}
.backIndex{
    width: 133px;
    height: 39px;
    box-sizing: border-box;
    position: relative;
    border: 1px solid #FFE7C7;
    border-radius: 5px;
    color: #FFE7C7;
    font-size: 16px;
    text-align: center;
    line-height: 39px;
    font-weight: 700;
    display: block;
    cursor: pointer;
    transform: translate(250px,398px);
}
.item4 .name{
    font-size: 16px;
    font-weight: 600;
    margin: 0 5px 0 0;
    color: #FFD89F;
}
.item4 .org{
    font-size: 16px;
    color: #FFD89F;
}
</style>