dev/dcp-web-gate/src_old/views/realTimeInfo/RealTimeInfoItemInfo.vue

<template>
    <div>
        <div class="autoBox box RealTimeInfo" style="padding-top: 0;">
             <!-- 主体部分 -->
             <div>
                <div style="height: 45px;line-height: 45px;" class="realTimeInfo_scree">
                    <span class="cursor" v-for="(i,index) in realTimeInfo_scree" @click="realTimeInfoScreensChange(i,index)" 
                    :class="index==realTimeInfoScreenItem?'span1':'span2'">{{i.label=='common.LatestNews'?$t('common.LatestNews'):i.label}}</span>
                </div>
                <div style="height: 120px;position: relative;">
                    <div style="margin-top: 15px;position: absolute;
                            left: 18%;top: 20%;transform: translate(-50%,-50%);color: #5083ba;font-weight: 700;" >
                           {{ $t('common.Informationsearch')}}
                    </div>
                    <div style="margin-top: 15px;width: 50%;position: absolute;
                            left: 50%;top: 20%;transform: translate(-50%,-50%);">
                            <el-input :placeholder="$t('common.EnterContent')" v-model="page.title" class="input-with-select">
                                <el-button slot="append" icon="el-icon-search" @click="getData"></el-button>
                            </el-input>
                    </div>
                    <div style="margin-top: 15px;position: absolute;
                            right: 15%;top: 20%;transform: translate(-50%,-50%);color: #5083ba;font-weight: 700;" :style="$i18n.locale=='en'?'right:7%':''">
                             {{ $t('common.AdvancedSearch')}}
                    </div>
                    <div style="width: 100%;position: absolute;left: 0px;top: 65%;">
                        <div class="Information">
                            <span class="dcp_infor"> {{ $t('common.LatestNews')}}</span>
                            <span style="color: #bebebe;" class="dcp_infor2 cursor">{{ $t('common.publish')}}<span class="el-icon-edit-outline"></span></span>
                            <span style="color: #bebebe;" class="cursor" @click="toView('RealTimeInfoMoreInfo','')">{{ $t('common.More')}} <span class="el-icon-arrow-right"></span></span>
                        </div>
                    </div>
                </div>
                <div style="height: 350px;position: relative;">
                    <div style="width: 65%;height: 350px;position: absolute;">
                        <div style="width: 33%;height: 100%;float: left;">
                            <ul>
                                <li>
                                    <img :src="'/api/file/pub/' + i.pictureUrl" style="width: 100%;height: 160px;margin-top: 8px;" alt="" v-for="(i,index) in img">
                                </li>
                            </ul>
                        </div>
                        <div style="width: 67%;height: 100%;float: right;">
                            <ul class="lableStyle">
                                <li v-for="(item,index) in info" :class="item.icon?'lableStyle1':'lableStyle2'"
                                     class="cursor"
                                     @click="toView('realTimeInfoItemdetails',item.baseEntityId)">
                                    <span class="spot"></span>
                                    <span>{{item.title}}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div style="width: 34%;height: 350px;position: absolute;top: 0;right: 0;">
                        <img src="@/assets/img\home/u5114.png" alt="">
                    </div>
                </div>
             </div>
        </div>
    </div>
</template>
  
<script>
    import Base from "@/views/base/Base";
    import {cmsInformationViews} from "@/api/baseUnitView";
    import {getDicts} from '@/api/dict';
    export default {
        name: 'realTimeInfoItemInfo',
        extends: Base,
        data () {
            return {
                realTimeInfo_scree:[],
                realTimeInfoScreenItem:0,
                page:{
                    pageSize:12,
                    pageNo:1,
                    businessType:"information",
                    typeDict:null,
                    title:''
                },
                img:[],
                info:[]
            }
        },
        watch:{
            '$i18n.locale'(){
                this.toInitData();
                this.getData();
            }
        },
        mounted() {
            this.toInitData();
            this.getData();
        },
        methods:{
            toInitData: function () {
                getDicts(this.$i18n.locale=='en'?"CMS_INFORMATION_TYPE_DICT_EN":"CMS_INFORMATION_TYPE_DICT").then((result) => {
                    if(result.data){
                        this.realTimeInfo_scree = result.data[0] ||[];
                        let both={
                            label:'common.LatestNews',
                            value:null
                        };
                        this.realTimeInfo_scree.unshift(both);
                    }
                });
            },
            getData(){
                this.page.language=this.$i18n.locale.toUpperCase();
                cmsInformationViews(this.page).then(res=>{
                    var data = res.data;
                    if(data){
                        this.img = [];
                        this.info = data.allDataList||[];
                        var count = 0;
                        this.info.forEach(element=>{
                            if(element.pictureUrl && this.img.length <2){
                                this.img.push(element);
                            }
                        })
                    }
                });  
            },
            getIconUrl(url){
                return require("@/assets/img/realTimeInfo/"+url);
            },
            toView(router,json){
                this.$store.commit('modify', router);
                this.$router.push({name:router,params:{key:json}});
            },
            screenBack(data){
                console.log(data,'screenBackscreenBackscreenBackscreenBack');
            },
            realTimeInfoScreensChange(i,index){
                this.realTimeInfoScreenItem=index;
                this.page.typeDict=i.value;
                this.page.title='';
                this.getData();
                console.log(i)
            }
        }
    }
</script>
  
<style scoped>
    ul{
        margin: 0;
        padding: 0;
    }
    .box,.boxs {
        margin-top: 10px;
        background: #fff;
        padding-bottom: 10px;
    }
    .boxs {
        padding-bottom:30px;
    }
    body {
        margin: 0;
    }
    .screen1 {
         color:#2c5589;
    }
    .screen2 {
        font-size: 14px;
        color:#bebebe;
    }
    li {
        display: inline-block;
        margin-left: 6px;
        padding: 0 2px;
        color: #1251A7;
    }
    .realTimeInfo_scree .span1,
    .realTimeInfo_scree .span2{
        color: #fff;
        padding: 0 10px;
        font-size: 13px;
        display: inline-block;
        height: 100%;
        background: #2c5589;
        /* margin-right: 30px; */
        width: 90px;
        text-align: center;
    }
    .realTimeInfo_scree .span2 {
        background: #fff;
        color: #1251A7;
    }
    .RealTimeInfo >>>.el-input__inner {
            height: 50px !important;
    }
    .RealTimeInfo >>>.el-input-group__prepend {
        background-color: #fff;
        color: #000;
    }
    .Information {
        border-bottom: 1px solid #bebebe;
    }
    .Information span {
        font-size: 14px;
        display: inline-block;
        padding: 6px 0;
        
    }
    .Information .dcp_infor {
        margin-right: 500px;
        color: #2c5589;
        font-weight: 700;
        font-size: 15px;
        padding-left: 20px;
    }
    .Information .dcp_infor2 {
        margin-right: 30px;
    }
    .lableStyle li {
        display: block;
    }
    .lableStyle1,
    .lableStyle2 {
        color: #666;
        font-size: 14px;
        line-height: 29px;
        padding-left: 10px;
    }
    .lableStyle1 {
        font-size: 16px;
        font-weight: 600;
    }
    .spot {
        display: inline-block;
        width: 6px;
        height: 6px;
        background-color: #999;
        margin-right: 5px;
        margin-bottom:2px;
    }
    .cursor:hover {
        color: #ff0000;
    }
</style>