dev/dcp-web-gate/src_old/views/Biodiversity/BiodiversityAndEnergyRevolutionTire.vue

<template>
     <div style="background-color: #fff; min-width: 1920px;overflow: auto;">
        <HeaderItem style="background: #2c558a "></HeaderItem>
        <div style="width: 100%;height: 650px; ">
            <img style="width: 100%;height: 100%;margin-top: -44px; " src="@/assets/Biodiversity/top 2.png">
        </div>
        <div style="position: relative;margin-top: -119px;margin-bottom: 30px;">
            <div style="width: 100%;overflow: hidden;background-color: #fff;border-radius: 50px 50px 0 0;">
                <div style="width: 70%;margin-left: 15%;margin-top: 50px; ">
                    <div class="user-top-name">背景</div>
                    <div class="ui-user-EnInfo">
                        <div class="ui-line"></div>
                        <div class="ui-user-detail">BACKGROUND</div>
                        <div class="ui-line"></div>
                    </div>
                    <div style="width: 76%;margin-left: 12%;">
                        <div :class="$i18n.locale == 'zh' ?'ui-text-info':'ui-text-info-en'">{{ $i18n.locale == 'zh' ?
                        '生物多样性是人类赖以生存和发展的重要基础，关乎子孙后代和人类福祉，关乎永续发展和文明兴衰。' : 'Biodiversity is an important basis for
                        human survival and development, which is related to future generations and human well-being,
                        sustainable development and the rise and fall of civilization.' }}</div>
                        <div :class="$i18n.locale == 'zh' ?'ui-text-info':'ui-text-info-en'">{{ $i18n.locale == 'zh' ?
                        '进入工业文明以来，人类在创造巨大物质财富的同时，也加速了对自然资源的攫取，打破了地球生态系统平衡，带来了生物多样性丧失和环境破坏等重大危机。当前，人类正处于第六次物种大灭绝边缘，全球物种灭绝速度不断加快，生态系统退化形势严峻，生物多样性丧失对人类生存和发展构成严重威胁。'
                        : 'Since entering the industrial civilization, while creating huge material wealth, human
                        beings have also accelerated the grab of natural resources, broken the balance of the
                        earth is ecosystem, and brought about major crises such as loss of biodiversity and
                        environmental damage. At present, mankind is on the verge of the sixth mass extinction of
                        species. The global rate of species extinction is accelerating. The situation of ecosystem
                        degradation is severe. The loss of biodiversity poses a serious threat to human survival and
                        development.'}}

                        </div>
                        <div :class="$i18n.locale == 'zh' ?'ui-text-info':'ui-text-info-en'">{{ $i18n.locale == 'zh' ?
                        '从全球范围看，造成全球生物多样性破坏的原因主要可以归结为栖息地破坏、生物资源过度消耗、气候变化、环境污染、生物入侵五个方面。不合理的能源发展方式是导致上述问题不断加剧的关键因素。工业革命以来，化石能源长期大规模开发利用，产生大量温室气体和有害物质，造成温度上升、环境破坏、资源紧张，严重威胁全球生物多样性。特别是气候危机加速袭来，很可能在未来几十年演化成全球性生态危机，给地球生物带来巨大灾难。面对日益严峻的形势，关键要抓佳能源这个
                        “牛鼻子”，加快能源电力革命，减缓和消除化石能源开发利用对生物多样性的破坏，实现能源电力与生物多样性协同治理。'
                        : 'From a global perspective, the causes of global biodiversity destruction can be mainly
                        attributed to habitat destruction, excessive consumption of biological resources, climate
                        change, environmental pollution and biological invasion. Unreasonable energy development
                        mode is the key factor that leads to the aggravation of the above problems. Since the
                        industrial revolution, fossil energy has been developed and utilized on a large scale for a
                        long time, producing a large number of greenhouse gases and harmful substances, causing
                        temperature rise, environmental damage, resource tension, and a serious threat to global
                        biodiversity. In particular, the accelerated onset of the climate crisis is likely to evolve
                        into a global ecological crisis in the coming decades, which will bring huge disasters to
                        the earth is creatures. Facing the increasingly severe situation, the key is to improve the
                        energy "Bullnose", accelerate the energy and electricity revolution, slow down and eliminate
                        the destruction of biodiversity caused by the development and utilization of fossil energy,
                        and achieve the coordinated governance of energy, electricity and biodiversity.' }}

                        </div>
                        <div :class="$i18n.locale == 'zh' ?'ui-text-info':'ui-text-info-en'">{{ $i18n.locale == 'zh' ?
                        '全球能源互联网是能源生产清洁化、配置广域化、消费电气化的新型能源系统，是清洁能源在全球范围大规模开发、输送和使用的重要平台。构建全球能源互联网是实现世界能源电力革命的根本途径，能够改变经济社会依赖化石能源的发展路径，推动建立“零污染、零碳排放、高效率”
                        的新型能源发展模式，彻底解决化石能源这一影响和制约生物多样性的关键问题，促进能源与生态环境协调可持续发展，为保护生物多样性提供有效解决方案，
                        为推动生态文明建设、打造地球生命共同体注入新动能。'
                        : 'The global energy internet is a new energy system with clean energy production, wide
                        distribution and electrification of consumption, and an important platform for large-scale
                        development, transmission and use of clean energy worldwide. Building a global energy
                        Internet is the fundamental way to realize the world energy and power revolution. It can
                        change the development path of the economy and society relying on fossil energy, promote the
                        establishment of a new energy development model of "zero pollution, zero carbon emissions,
                        and high efficiency", thoroughly solve the problem of fossil energy, which affects and
                        restricts biodiversity, and promote the coordinated and sustainable development of energy
                        and the ecological environment, To provide effective solutions for biodiversity conservation
                        and inject new momentum into promoting the construction of ecological civilization and
                        building a global community of life' }}

                        </div>
                    </div>
                    <div style="width: 100%;margin-top: 30px;display: flex;justify-content: space-between;">
                        <div style="width: 48%;height: 340px;background-color: #e9f3ff; ">
                            <div class="user-car-title">
                                话题
                            </div>
                            <div class="user-car-titEn">TOPIC</div>
                            <div :class="$i18n.locale == 'zh'?'user-car-text':'user-car-text-en'">{{ $i18n.locale ==
                            'zh' ?
                            '会议将以“生物多样性与能源电力革命”为主要话题，邀请联合国、有关国际组织高级别代表，相关国家高级别官员，大学及研究机构专家学者，企业及金融机构负责人直面全球生物多样性危机背景下的人类发展模式中的问题，正视全球气候环境危机，就清洁能源开发、低碳能源转型、跨区域能源互联网建设、碳减排、三网融合、科技创新、生态文明建设和推动构建人类命运共同体等话题开展研讨。'
                            : 'The conference will take "biodiversity and energy power revolution" as the main
                            topic, and invite high-level representatives of the United Nations and relevant
                            international organizations, high-level officials of relevant countries, experts and
                            scholars from universities and research institutions, and heads of enterprises and
                            financial institutions to directly face the problems in the human development model in
                            the context of the global biodiversity crisis, face up to the global climate and
                            environmental crisis Cross regional energy Internet construction, carbon emission
                            reduction, three networks integration, scientific and technological innovation,
                            ecological civilization construction and promoting the construction of a community with
                            a shared future for mankind were discussed.' }}

                            </div>
                        </div>
                        <div style="width: 48%;height: 340px;background-color: #e9f3ff; ">
                            <div class="user-car-title">
                                目标
                            </div>
                            <div class="user-car-titEn">OBJECTIVES</div>
                            <div :class="$i18n.locale == 'zh'?'user-car-text':'user-car-text-en'">{{ $i18n.locale ==
                            'zh' ?
                            '会议将发布《生物多样性与能源电力革命》研究成果，揭示化石能源为主体的不合理能源发展方式是导致生物多样性破坏的重要根源，提出以全球能源互联网推动能源电力革命、保护生物多样性的新思路、新方案和行动路线图，为推力世界能源电力革命、促进生物多样性保护提供可操作、可实施、可复制的一榄子解決方案。'
                            : 'The conference will release the research results of Biodiversity and Energy Power
                            Revolution, reveal that the irrational energy development mode dominated by fossil
                            energy is an important source of biodiversity destruction, propose new ideas, new plans
                            and action roadmap to promote the energy power revolution and protect biodiversity
                            through the global energy Internet, and provide operable, implementable One olive
                            solution that can be copied.' }}

                            </div>
                        </div>
                    </div>
                </div>
                <div class="ui-user-pic">
                    <div style="width: 70%;margin-left: 15%;margin-top: 30px; ">
                        <div class="user-top-name">初步议程</div>
                        <div class="ui-user-EnInfo">
                            <div class="ui-line"></div>
                            <div class="ui-user-detail">DRAFT AGENDA</div>
                            <div class="ui-line"></div>
                        </div>
                        <div class="ui-speak-time">
                            <div class="ui-speak-left">{{ $i18n.locale == 'zh' ? '会议时间' : 'Meeting time' }}:</div>
                            <div class="ui-speak-right">{{ $i18n.locale == 'zh' ? '2022年12月16日13:35-14:45' : 'December
                            16, 2022 13:35-14:45' }}</div>
                        </div>
                        <div class="ui-speak-time">
                            <div class="ui-speak-left">{{ $i18n.locale == 'zh' ? '会议地点' : 'Meeting address' }}:</div>
                            <div class="ui-speak-right">{{ $i18n.locale == 'zh' ? '加拿大蒙特利尔会展中心512E会议室' : '512E
                            Conference Room, Montreal Convention Center, Canada' }}</div>
                        </div>
                        <div style="width: 98%;margin-left: 1%;margin-top: 30px; display: flex;">
                            <div style="width: 10%;text-align: center;position: relative;">
                                <div :class="$i18n.locale == 'zh' ?'body-time-left1':'body-time-left11'">
                                    13:15-13:35
                                </div>
                                <div :class="$i18n.locale == 'zh' ?'body-time-left2':'body-time-left22'">
                                    13:15-13:35
                                </div>
                                <div :class="$i18n.locale == 'zh' ?'body-time-left3':'body-time-left33'">
                                    13:55-14:45
                                </div>
                            </div>
                            <div style="width: 90%; ">
                                <el-timeline>
                                    <el-timeline-item :timestamp="$i18n.locale == 'zh' ? '开场致辞' : 'Opening remarks'"
                                        placement="top">
                                        <div>
                                            <p class="text-detail">1.{{ $i18n.locale == 'zh' ? '中国生态环境部有关领导' : 'Relevant
                                            leaders of the Ministry of Ecology and Environment of China' }}
                                                <br />2.{{
                                                $i18n.locale == 'zh' ? '联合国生多公约秘书处执秘穆雷玛' : 'Executive Secretary of the
                                                Secretariat of the United Nations Convention on Biological Diversity'
                                                }}<br />
                                                3.{{ $i18n.locale == 'zh' ? '联合国有关机构负责人' : 'Heads of relevant United
                                                Nations agencies' }}<br />
                                                4.{{ $i18n.locale == 'zh' ? '合作组织主席、国家电网公司董事长、中国电力联合会理事长辛保安' :
                                                'Xin Bao an, Chairman of the Cooperation Organization, Chairman of the
                                                State Grid Corporation of China and Chairman of the China Electricity
                                                Council' }}
                                            </p>
                                        </div>
                                    </el-timeline-item>
                                    <el-timeline-item :timestamp="$i18n.locale == 'zh' ? '成果发布' : 'Results release'"
                                        placement="top">
                                        <div>
                                            <p class="text-detail">{{ $i18n.locale == 'zh' ?
                                            '合作组织秘书局副局长陈葛松发布《生物多样性与能源电力革命》专著' : 'Chen Gesong, Deputy Director of the
                                            Secretariat of the Cooperation Organization, released the monograph
                                            "Biodiversity and Energy Power Revolution"'
                                            }}</p>
                                        </div>
                                    </el-timeline-item>
                                    <el-timeline-item :timestamp="$i18n.locale == 'zh' ? '主题演讲' : 'Keynote speech'"
                                        placement="top">
                                        <div>
                                            <p class="text-detail">1.{{ $i18n.locale == 'zh' ? '联合国环境署代表' :
                                            'Representative of the United Nations Environment Programme'
                                            }} <br />2.{{ $i18n.locale == 'zh' ? '世界经济论坛代表' : 'Representative of the
                                                World Economic Forum'
                                                }}<br />
                                                3.{{ $i18n.locale == 'zh' ? '世界可持续发展工商理事会执行副总裁戴安.霍尔多夫女士' : 'Ms. Diane
                                                Holdorf, Executive Vice President of the World Business Council for
                                                Sustainable Development'
                                                }}<br />
                                                4.{{ $i18n.locale == 'zh' ? '世界资源研究所代表' : 'Representative of World
                                                Resources Institute' }}<br />
                                                5.{{ $i18n.locale == 'zh' ? '中国人民大学生态金融研究中心副主任、教授蓝虹女士' : 'Ms. Lan Hong,
                                                Deputy Director and Professor of the Ecological Finance Research Center
                                                of Renmin University of China'
                                                }}<br /> 6.{{ $i18n.locale == 'zh' ? '加电协代表' :
                                                'Power Supply Association Representative' }}</p>
                                        </div>
                                    </el-timeline-item>
                                </el-timeline>
                            </div>
                        </div>

                    </div>
                </div>
                <div style="position:relative;z-index: 9999; ">
                    <img style="position:absolute;top:0%;left:23%;margin-top: 85px; "
                        src="@/assets/Biodiversity/animales4.png" alt="">
                </div>
                <div style="width: 70%;margin-left: 15%;margin-top: 50px; ">
                    <div class="user-top-name">项目案例</div>
                    <div class="ui-user-EnInfo">
                        <div class="ui-line"></div>
                        <div class="ui-user-detail">PROJECT CASE</div>
                        <div class="ui-line"></div>
                    </div>
                    <div></div>
                    <div style="width:100%;margin-top: 20px;">
                        <ul style="width: 100%;">
                            <li class="ui-ul-li" v-for="(item,index) in listInfo" :key="index">
                                <div style="width: 100%;height: 100%;display: flex;">
                                    <div style="width: 20%;height: 260px;text-align: center;">
                                        <div>
                                            <img :src="'api/file/pub/' + item.pictureUrl"
                                                style="display:inline-block;width: 253px;height:219px;margin-top:20.5px;margin-left: 50%;transform:translateX(-50%)">
                                        </div>
                                    </div>
                                    <div v-if="item.sysAttachmentInfos.length==1" style="width: 63.5%;height: 260px;">
                                        <div class="user-top-title-ui" :title="item.title">
                                            {{item.title}}</div>
                                        <div
                                            style="width: 98%;height: 180px;margin-left: 50%;transform: translateX(-50%);">
                                            <div class="user-center-ui" v-html="item.contentHtml">
                                            </div>
                                            <div style="width: 100%;height: 10px;"></div>
                                        </div>
                                    </div>
                                    <div v-if="item.sysAttachmentInfos.length>=2" style="width: 47.6%;height: 260px;">
                                        <div class="user-top-title-ui" :title="item.title">
                                            {{item.title}}</div>
                                        <div
                                            style="width: 98%;height: 180px;margin-left: 50%;transform: translateX(-50%);">
                                            <div class="user-center-ui" v-html="item.contentHtml">
                                            </div>
                                            <div style="width: 100%;height: 10px;"></div>
                                        </div>
                                    </div>
                                    <div v-if="item.sysAttachmentInfos.length==0" style="width: 80%;height: 260px;">
                                        <div class="user-top-title-ui" :title="item.title">
                                            {{item.title}}</div>
                                        <div
                                            style="width: 98%;height: 180px;margin-left: 50%;transform: translateX(-50%);">
                                            <div class="user-center-ui" v-html="item.contentHtml">
                                            </div>
                                            <div style="width: 100%;height: 10px;"></div>
                                        </div>
                                    </div>
                                    <div v-if="item.sysAttachmentInfos.length>=2"
                                        style="max-width: 32.4%;height: 260px;display: flex; overflow: auto;">
                                        <div style="height: 200px;margin:0 6px;"
                                            v-for="(ele,indexs) in item.sysAttachmentInfos" :key="indexs">
                                            <div style="margin-top: 45px;">
                                                <img :src="'api/file/pub/' + ele.attachmentSavePath"
                                                    style="width: 197px;height: 148px; ">
                                                <div class="user-text-ui" :title="ele.attachmentTitle.split('.')[0]">
                                                    {{ele.attachmentTitle.split('.')[0]}}</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div v-if="item.sysAttachmentInfos.length==1"
                                        style="max-width: 16.5%;height: 260px;display: flex; overflow: auto;">
                                        <div style="height: 200px;margin:0 5px;"
                                            v-for="(ele,indexs) in item.sysAttachmentInfos" :key="indexs">
                                            <div style="margin-top: 45px;">
                                                <img :src="'api/file/pub/' + ele.attachmentSavePath"
                                                    style="width: 197px;height: 148px; ">
                                                <div class="user-text-ui" :title="ele.attachmentTitle.split('.')[0]">
                                                    {{ele.attachmentTitle.split('.')[0]}}</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div v-if="item.sysAttachmentInfos.length==0"></div>
                                </div>
                            </li>
                        </ul>
                        <!-- 分页 -->
                        <div style="width: 100%;position: relative;height: 100px;">
                            <el-pagination background
                                style="height: 80px;position: absolute;left: 50%;top: 100px;transform: translate(-50%,-50%);"
                                layout="prev, pager, next" :total=totalCount @current-change="handleCurrentChange">
                            </el-pagination>
                        </div>
                    </div>
                </div>
                <div></div>
            </div>
        </div>
        <footers></footers>
    </div>
</template>

<script>
import {getInfoList} from '@/api/Biodiversity/BiodiversityAndEnergyRevolutionTire'
import HeaderItem from '@/components/headerItem3'
import footers from '@/components/footersNew'
export default {
  name: 'BiodiversityAndEnergyRevolutionTire',
 components: {
		HeaderItem,
		footers,
	},
 data() {
      return {
       listInfo:[],
       totalCount:'',
       language:'',
       page: {
            pageSize: 5,
            pageNo: 1,
            continentDict: null,
            industryDict: null,
            initialOrderZh: null,
            memberNameEn: null,
            memberNameZh:null,
            language: null,
        },
      };
    },
    methods:{
        init(){
            if(this.$i18n.locale=='zh'){
                this.language='ZH'
            }else{
                this.language='EN'
            }
            let params={
                pageNo:this.page.pageNo,
                pageSize:this.page.pageSize,
                language:this.language
            }
            console.log(params);
            getInfoList(params).then((res)=>{
                console.log('列表数据',res);
                this.listInfo=res.data.otherCmsInformationViews
                let num=Math.ceil(Number(res.data.otherCmsInformationViewsCount)/5)
                console.log(num);
                this.totalCount=Number(num*10)
                
            })
        },
        handleCurrentChange(val) {
            this.page.pageNo = val;
            this.init()
        },
    },
    watch: {
        '$i18n.locale'() {
            this.init()
        },
    },
    mounted(){
        this.init()
    }
}
</script>

<style scoped>
.ui-line{
    width: 34%;
    margin-top: 19px;
    border-top: 2px solid #0a3b78;
}
.user-top-name{
    width: 100%;
    height: 49px;
    line-height: 49px;
    font-size:35px;font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #003372;
    text-align: center;
}
.ui-user-EnInfo{
    display: flex;
    justify-content: space-around; 
    width: 40%;
    margin-left: 30%; 
    height: 40px;
    margin-bottom: 30px;
}
.ui-text-info{
    margin-top: 20px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 22px;
    text-indent: 2em;
}
.ui-text-info-en{
    margin-top: 20px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 22px;
}
.ui-user-detail{
    height: 40px;
    line-height: 40px; 
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #003372;
}
.user-car-title{
    margin-top: 30px;
    width: 100%; 
    height: 49px;
    line-height: 
    49px; font-size: 30px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #003372;
    text-align: center;
}
.user-car-titEn{
    margin-top: 8px;
    margin-bottom: 20px;
    width: 100%; 
    height: 21px;
    font-size: 15px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 540;
    color: #003372;
    line-height: 21px;
    text-align: center;
}
.user-car-text{
    width: 90%;
    margin-left: 5%;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 20px;
    text-indent: 2em;
}
.user-car-text-en{
    width: 90%;
    margin-left: 5%;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 20px;
    
}
.ui-user-pic{
    margin-top: 30px;
    width: 99.9%;
    height: 850px;
    border: 1px dotted #939394;
    background-image: url('~@/assets/Biodiversity/wolves-ga63ca5643_1920.jpg');
    background-size:100% 100%;
}
.ui-speak-time{
    width: 60%;
    height: 30px;
    margin-left: 20%;
    display: flex;
    justify-content: space-evenly;
}
.ui-speak-left{
    width: 30%;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #104990;
    text-align: right;
}
.ui-speak-right{
    width: 70%;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 550;
    text-align: left;
    padding-left: 5px;
}
.text-detail{
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 30px;
}
.body-time-left1{
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #104990;
    line-height: 22px;
    position: absolute;
    left: 24.8%;
    top: 1px;
}
.body-time-left11{
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #104990;
    line-height: 22px;
    position: absolute;
    left: 24.8%;
    top: 1px;
}
.body-time-left2{
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #104990;
    line-height: 22px;
    position: absolute;
    left: 24.8%;
    top: 195px;
}
.body-time-left22{
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #104990;
    line-height: 22px;
    position: absolute;
    left: 24.8%;
    top: 230px;
}
.body-time-left3{
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #104990;
    line-height: 22px;
    position: absolute;
    left: 24.8%;
    top: 300px;
}
.body-time-left33{
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #104990;
    line-height: 22px;
    position: absolute;
    left: 24.8%;
    top: 370px;
}
.ui-ul-li{
    display: inline-block;
    width: 98%;
    height: 260px;
    margin-left: 1%;
    margin: 10px 0;
    border: 1px solid #9CC7FA;
    
}
.user-text-ui{
    width: 197px;
    height:40px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-align: center;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
}
.user-top-title-ui{
    width: 98%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 20px;
    margin-top: 20px;
    margin-bottom: 6px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #333333;
    margin-left: 50%;
    transform: translateX(-50%);
}
.user-center-ui{
    width: 100%;
    height: 180px;
    line-height: 20px;
    overflow: auto;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
   
}
/deep/.el-timeline-item__timestamp {
    height: 22px;
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #104990;
    line-height: 22px;
}
/deep/.el-timeline-item__tail {
    position: absolute;
    left: 4px;
    height: 265%;
    border-left: 2px solid #4772a7;
}
/deep/.el-timeline-item__node {
    position: absolute;
    background-color: #104990;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background-color: #99a9bf;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 5px;
    background-color: #d3dce6;
}

</style>