<template>
    <div>
        <headers></headers>
        <search :informationTotal="informationTotal" style="margin-top: 10px;"></search>
        <div class="box" style="margin-top: 20px;">
            <ul>
                <li v-for="(item, index) in initData" class="button7" :key="item.value + index">
                    <div style="position: relative;margin-top: 10px;">
                        <span :style="$i18n.locale == 'en' ? 'display:block;margin-top:43px;margin-bottom:20px;' : ''">
                            <img :style="$i18n.locale == 'zh' ? 'width:30px;' : ''" :src="getIconUrl(item.icon)" alt=""
                                class="middle">
                        </span>
                        <span style="font-weight: 600;font-size: 18px;" class="Boxcursor"
                            @click="toView(item.value, {})">
                            {{ $t(item.label) }}
                        </span>
                    </div>
                    <span style="position: relative;display: block; font-size: 14px;font-weight: 400;text-align: left;"
                        :style="$i18n.locale == 'zh' ? 'height: 30px;margin-left: 65px; ' : 'margin-left: 36px; line-height: 23px;'"
                        v-for="(i, index) in item.dataitem" :key="i.value + index" :class="item.value == 'projectPresentation' ? 'borderBottomNone' :
        item.value == 'countryInformation' ? 'borderBottomNone' :
            item.value == 'countryInformation' ? 'borderBottomNone' :
                item.value == 'enterprise' ? 'borderBottomNone' :
                    item.value == 'cooperationExchange' ? 'borderBottomNone' :
                        item.value == 'conferenceServices' ? 'borderBottomNone' : ''"
                        @click="toView(i.value, i.json ? i.json : '', item, i)" v-if="$i18n.locale == 'zh'">
                        <span class="Boxcursor"> ◆{{ $t(i.label) }}</span>
                    </span>
                </li>
            </ul>
        </div>
        <div class="box2" style="position: relative;">
            <div
                style="position: fixed;left: 50%;transform: translate(610px,-50%);width: 70px;background: #fff;box-shadow:0px 2px 4px 0px rgba(0,0,0,0.5);">
                <div style="width: 70px;height: 70px;background: #2A548C;
              text-align: center;font-size: 12px;color: #fff;" class="cursor" @click="toView('customerService')">
                    <img src="@/assets/img/home/footer/customerServiceexport@2x.png" alt=""
                        style="width: 30px;margin-top: 10px;">
                    <div>{{ $t('common.Online') }}</div>
                </div>
                <div style="width: 70px;height: 70px;text-align: center;font-size: 12px;
               color: #A5A5A5;border-bottom: 1px solid rgba(241,241,241,1);cursor: pointer;" @mouseover="mouseOver"
                    @mouseleave="mouseLeave">
                    <img src="@/assets/img/home/footer/QRcodeexport@2x.png" alt=""
                        style="width: 30px;margin-top: 10px;">
                    <div>{{ $t('common.QRCode') }}</div>
                </div>
                <div ref="QRCode" id="qrcode"
                    style="position: absolute; transform: translate(70%,-50%);display: none; "></div>
                <div style="width: 70px;height: 70px;text-align: center;font-size: 12px;color: #A5A5A5;border-bottom: 1px solid rgba(241,241,241,1);"
                    class="cursor" @click="ShareChange">
                    <img src="@/assets/img/home/footer/rectangle@2x.png" alt="" style="width: 30px;margin-top: 10px;">
                    <div>{{ $t('common.Share') }}</div>
                </div>

                <!-- 首页跳转 -->
                <div style="width: 70px;height: 70px;text-align: center;font-size: 12px;color: #A5A5A5;border-bottom: 1px solid rgba(241,241,241,1);"
                    class="cursor" @click="toView('home')">
                    <img src="@/assets/img/home/footer/home@2x.png" alt="" style="width: 30px;margin-top: 10px;">
                    <div>{{ $t('common.Home') }}</div>
                </div>
                <div style="position: absolute; transform: translate(150%,-100%);" v-show="ShareNum">
                    <vshare></vshare>
                </div>
                <div style="width: 70px;height: 70px;text-align: center;display:none;font-size: 12px;color: #A5A5A5;border-bottom: 1px solid rgba(241,241,241,1);"
                    class="cursor" @click="toUp" id="toUp">
                    <img src="@/assets/img/home/footer/BackTopexport@2x.png" alt=""
                        style="width: 30px;margin-top: 10px;">
                    <div>{{ $t('common.Top') }}</div>
                </div>
            </div>
            <ul>
                <li style="position: relative;" v-for="(item, num) in news" :key="item.label + index">
                    <div
                        style="height: 100%;text-align: center;line-height: 120px;position: absolute;left: 46px;top: 0;">
                        <img :src="getIconUrl(item.icon)" alt=""
                            style="vertical-align:middle;width: 24px;margin-left: 5px;" />
                        <span> {{ $t(item.label) }}</span>
                    </div>
                    <div style="position: absolute;left: 200px;top: 10px;">
                        <table style="padding-bottom: 12px;border-bottom: 1px dashed #666;">
                            <tr v-for="(i, index) in item.newItem" style="width:990px;display: block;"
                                :key="i.title + index">
                                <td v-if="num != 2" class="tdLabel1 cursor"
                                    style="width: 75%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"
                                    @click="viewChange(i.baseEntityId ? i.baseEntityId : i.projectId, index, num)">
                                    <span class="spot"></span>
                                    {{ $t(i.title ? i.title : i.projectName) }}
                                </td>
                                <td v-if="num == 0" class="tdLabel2" style="width: 20%;text-align: center;">
                                    {{ formatDate(i.publishDate) }}
                                </td>
                                <td v-if="num == 1" class="tdLabel2" style="width: 20%;text-align: center;">
                                    {{ formatDate(i.createDate) }}
                                </td>
                                <td v-if="num === 2" class="tdLabel1 cursor"
                                    style="width: 75%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"
                                    @click="viewChange(i.id, index, num)">
                                    <span class="spot"></span>
                                    {{ $i18n.locale.toUpperCase() == 'ZH' ? i.meetingName : i.meetingNameEn }}
                                </td>
                                <td v-if="num === 2" class="tdLabel2" style="width: 20%;text-align: center;">
                                    {{ formatDate(i.meetingReleaseDate) }}
                                </td>
                            </tr>
                            <span v-if="item.newItem.length > 0"
                                style="position: absolute;right: 20px;bottom: 10px;font-size: 14px;" class="cursor"
                                @click="toViewChange(num)">
                                {{ $t('common.More') }}
                            </span>
                        </table>
                    </div>
                </li>
            </ul>
        </div>
        <el-dialog width="50%" :visible.sync="detialPlayVideoVideo" @close="closePlay">
            <player :video-url="videoUrl" :state="state"></player>
        </el-dialog>
        <el-dialog width="50%" :visible.sync="detialPlayVideoPdf">
            <!-- <div style="margin-bottom: 15px; text-align: right">
          <el-button type="primary" size="small" @click.stop="previousPage">
             上一页
           </el-button>
           <el-button type="primary" size="small" @click.stop="nextPage">
           下一页
          </el-button>
          <span>当前第{{pdfPage}}页 / 共{{pageCount}}页</span>
        </div> -->

            <div>
                <!-- <pdf
            :src="src"
            :page="pdfPage"
            @num-pages="pageCount = $event"
            @page-loaded="pdfPage = $event"
            style="display: inline-block; width: 100%"
          ></pdf> -->
                <iframe width="100%" id="embed" height="600px" :src="src" frameborder="0"></iframe>
            </div>
        </el-dialog>
        <div class="box3">
            <span class="cursor" @click="toView('developmentCooperation')"> <i class="el-icon-folder-remove"></i>
                {{ $t('common.DevelopmentCooperationForum') }} </span>
            <span class="cursor" @click="toView('onlineMeeting')"> <i class="el-icon-data-analysis"></i> {{
                    $t('common.OnlineMeeting')
            }} </span>
        </div>
        <footers></footers>
    </div>
</template>

<script>
import { getLatestInformationPortal } from "@/api/baseUnitView";
import headers from '@/components/header'
import HeaderItem from '@/components/headerItem'
import editor from '@/components/dialog'
import tabers from '@/components/taber'
import search from '@/components/search'
import vshare from 'vshare'
import QRCode from 'qrcodejs2'
import footers from '@/components/footers'
import { gateGetProjectViewInfo, getBannerPath, getLatestBaseProjectViewPortal } from "@/api/project/baseProjectView";
import { allInformationViewCount } from "@/api/information/information";
import { getLatestMeetingListPortal } from "@/api/meeting/meetingOutInfo";
import Bus from "@/api/bus";   //注意引入
// import {get} from  "@/api/work/wtDeptWorkTaskInfo";   //注意引入
import player from "@/components/Player";
import pdf from 'vue-pdf'
export default {
    name: 'Home',
    components: { headers, tabers, HeaderItem, search, footers, editor, vshare, player, pdf },
    data() {
        return {
            dialogVisible: false,
            ShareNum: false,
            videoUrl: require('../assets/pdfAndVideo/video.mp4'),
            currentPage: 0, // pdf文件页码
            pageCount: 0, // pdf文件总页数
            fileType: 'pdf', // 文件类型
            src: null,
            pdfPage: 1,
            pageCount: 0,
            detialPlayVideoVideo: false,
            detialPlayVideoPdf: false,
            state: false,
            params: {
                pageNo: 1,
                pageSize: 3,
                language: '',
                //0为默认排序，1为关注排序
                descStatus: 0,
                status: 1
            },
            vshareConfig: {
                shareList: [
                    // 此处放分享列表（ID）
                    'more',
                    'qzone',
                    'tsina',
                    'renren',
                    'weixin'
                ],
                common: {
                    //此处放置通用设置
                    bdUrl: window.location.href,
                },
                share: [{
                    //此处放置分享按钮设置
                }
                ],

                image: [
                    //此处放置图片分享设置
                ],
                selectShare: [
                    //此处放置划词分享设置
                ]
            },
            initData: {
                data1: {
                    label: 'common.ProjectResources',
                    value: 'projectPresentation',
                    icon: 'resources@2x',
                    dataitem: [{
                        label: 'common.Pre-planning',
                        value: 'projectPresentation'
                    }, {
                        label: 'common.ProjectShowcase',
                        value: 'projectPresentation'
                    }, {
                        label: 'common.EvaluationAnalysis',
                        value: 'projectPresentation'
                    }, {
                        label: 'common.MatchTracking',
                        value: 'projectPresentation'
                    }],
                },
                data2: {
                    label: 'common.InformationData',
                    icon: 'information@2x',
                    value: 'realTimeInfo',
                    dataitem: [{
                        label: 'common.Information',
                        value: 'realTimeInfo',
                        json: '0'
                    }, {
                        label: 'common.DataInformation',
                        value: 'realTimeInfo',
                        json: '1'
                    }, {
                        label: 'common.JournalInformation',
                        value: 'realTimeInfo',
                        json: '2'
                    }],
                },
                data3: {
                    label: 'common.CountryInformation',
                    icon: 'country@2x',
                    value: 'countryInformation',
                    dataitem: [{
                        label: 'common.Resources',
                        value: 'countryInformation'
                    }, {
                        label: 'common.EnergyDevelopmentPlanning',
                        value: 'countryInformation'
                    }, {
                        label: 'common.ProjectStatus',
                        value: 'countryInformation'
                    }, {
                        label: 'common.ProjectDevelopmentGuide',
                        value: 'countryInformation'
                    }],
                },
                data4: {
                    icon: 'enterprise@2x',
                    label: 'common.EnterpriseShow',
                    value: 'enterprise',
                    dataitem: [{
                        label: 'common.CompanyProfile',
                        value: 'enterprise'
                    }, {
                        label: 'common.ProductInformation',
                        value: 'enterprise'
                    }, {
                        label: 'common.CoreTechnology',
                        value: 'enterprise'
                    }, {
                        label: 'common.ProjectPerformance',
                        value: 'enterprise'
                    }],
                },
                data5: {
                    label: 'common.FinancialServices',
                    icon: 'finance@2x',
                    value: 'financialServices',
                    dataitem: [{
                        label: 'common.FinancialInstitutions',
                        value: 'financialServices'
                    }, {
                        label: 'common.Fund',
                        value: 'financialServices'
                    }, {
                        label: 'common.Investment&FinancingCases',
                        value: 'financialServices'
                    }],
                },
                data6: {
                    label: 'common.ThinkTankConsulting',
                    icon: 'ThinkTank@2x',
                    value: 'thinkTankConsulting',
                    dataitem: [{
                        label: 'common.ThinkTankNews',
                        value: 'thinkTankConsulting'
                    }, {
                        label: 'common.ServiceScope',
                        value: 'thinkTankConsulting'
                    }, {
                        label: 'common.ProjectCase',
                        value: 'thinkTankConsulting'
                    }, {
                        label: 'common.WillingnessToCooperate',
                        value: 'thinkTankConsulting'
                    }],
                },
                data7: {
                    label: 'common.CooperationNetwork',
                    icon: 'cooperation@2x',
                    value: 'IntroductionMemberProfile',
                    dataitem: [{
                        label: 'common.MemberIntroduction',
                        value: 'IntroductionMemberProfile',
                        json: 'member'
                    }, {
                        label: 'common.AllianceIntroduction',
                        value: 'IntroductionMemberProfile',
                        json: 'union'
                    }, {
                        label: 'common.CooperativeUnitIntroduction',
                        value: 'IntroductionMemberProfile',
                        json: 'cooperation'
                    }, {
                        label: 'common.CustomService',
                        value: 'IntroductionMemberProfile',
                        json: 'custom'
                    }],
                },
                data8: {
                    label: 'common.Cooperation&Communication',
                    icon: 'exchange@2x',
                    value: 'cooperationExchange',
                    dataitem: [{
                        label: 'common.MemberActivities',
                        value: 'cooperationExchange'
                    }, {
                        label: 'common.AllianceActivities',
                        value: 'cooperationExchange'
                    }, {
                        label: 'common.CooperationActivities',
                        value: 'cooperationExchange'
                    }],
                },
                data9: {
                    label: 'common.ResourceSharing',
                    icon: 'share@2x',
                    value: 'resourceSharing',
                    dataitem: [{
                        label: 'common.ResearchResults',
                        value: 'resourceSharing'
                    }, {
                        label: 'common.ResearchResources',
                        value: 'resourceSharing'
                    }, {
                        label: 'common.ConferenceFacilities',
                        value: 'resourceSharing'
                    }],
                },
                data10: {
                    label: 'common.ConferenceService',
                    icon: 'discussion@2x',
                    value: 'conferenceServices',
                    dataitem: [{
                        label: 'common.ConferenceInformation',
                        value: 'conferenceServices'
                    },
                    // {
                    //   label:'common.ConferenceRegistration',
                    //   value:'conferenceServices'
                    // },
                    {
                        label: 'common.ConferenceResults',
                        value: 'conferenceServices'
                    }, {
                        label: 'common.ConferenceFeedback',
                        value: 'conferenceServices'
                    }],
                },
                // data11:{
                //   label:'common.ExhibitionService',
                //   icon:'Exhibition@2x',
                //   value:'exhibitionService',
                //   dataitem:[{
                //           label:'common.ExhibitionService',
                //           value:'exhibitionService'
                //         },{
                //           label:'common.OnlineExhibition',
                //           value:'exhibitionService'
                //         },{
                //           label:'common.Exhibitionresults',
                //           value:'exhibitionService'
                //         },{
                //           label:'common.Exhibitionfeedback',
                //           value:'exhibitionService'
                //   }],
                // },
                data11: {
                    label: "common.ExhibitionService",
                    icon: "Exhibition",
                    value: "exhibitionService",
                    dataitem: [
                        {
                        label: 'common.ExhibitionService',
                        value: 'exhibitionService'
                    }, {
                        label: 'common.ExhibitionService',
                        value: 'exhibitionService'
                    }, {
                        label: 'common.ExhibitionService',
                        value: 'exhibitionService'
                    }, {
                        label: 'common.ExhibitionService',
                        value: 'exhibitionService'
                    }
                    ],
                },
                data12: {
                    label: 'common.NationalregionalCommissions',
                    icon: 'commissions@2x',
                    value: 'nationalregionalCommittees',
                    dataitem: [{
                        label: 'common.BriefintroductiontotheCommittee',
                        value: 'nationalregionalCommittees'
                    }, {
                        label: 'common.Committeelayout',
                        value: 'nationalregionalCommittees'
                    }, {
                        label: 'common.Committeeactivities',
                        value: 'nationalregionalCommittees'
                    }],
                },
            },
            news: [{
                icon: 'new',
                label: "common.LatestNews",
                newItem: []
            }, {
                icon: 'project',
                label: 'common.LatestProject',
                newItem: []
            }, {
                icon: 'meeting',
                label: 'common.LatestMeeting',
                newItem: []
            }],
            informationTotal: '',
        }
    },
    watch: {
        '$i18n.locale'() {
            this.getRelevantList(1, null, this.$i18n.locale.toUpperCase())
            this.getBaseProject();
            this.getConfrences()
        },
        videoUrl: function (val) {
            // const myPlayer = this.$refs.videoPlayer.player
            if (val !== '') {
                this.$refs.videoPlayer.player.src(val)
            }
        },
        state: function (val) {
            if (val) {
                this.$refs.videoPlayer.player.pause()
            }
        }
    },
    mounted() {
        // this.src = '../assets/pdfAndVideo/SchemeOfOnlineExhibitionHall.pdf';

        if (window._bd_share_main) {
            window._bd_share_main.init();
        }
        // this.src = pdf.createLoadingTask(this.src)
        window.addEventListener("scroll", this.showbtn, true);
        this.getRelevantList(1, null, this.$i18n.locale.toUpperCase());// 最新资讯
        this.getBaseProject();
        this.getConfrences();

        this.qrcode();

        this.src = '/api/file/pub/def/Scheme3ofonlineexhibitionhall.pdf';
        document.all.iframeid.src = this.src ? this.src : '';

        this.$forceUpdate();
    },
    loadPdfHandler(e) {
        this.currentPage = 1 // 加载的时候先加载第一页
    },
    destroyed() {
        window.removeEventListener('scroll', this.scrollToTop);
    },
    methods: {

        previewPDF(row) {


        },
        closeDialog() {
            this.pdfPage = 1;
        },

        //PDF改变页数
        previousPage() {
            var p = this.pdfPage
            p = p > 1 ? p - 1 : this.pageCount
            this.pdfPage = p
        },
        nextPage() {
            var p = this.pdfPage
            p = p < this.pageCount ? p + 1 : 1
            this.pdfPage = p
        },
        getConfrences() {
            var page = {
                pageSize: 3,
                pageNo: 1
            }
            getLatestMeetingListPortal(page).then(res => {
                if (res.data) {
                    this.news[2].newItem = res.data.meetingBasicInfos || [];
                }
            })
        },
        closePlay(val) {
            console.log(val);
        },
        qrcode() {
            this.url = window.location.href;
            let qrcode = new QRCode('qrcode', {
                width: 132,
                height: 132,
                text: this.url, // 二维码地址
            })
        },
        ShareChange() {
            this.ShareNum = !this.ShareNum;
        },
        mouseOver() {
            this.ShareNum = false;
            this.$refs['QRCode'].style.display = 'block';
        },
        mouseLeave() {

            this.$refs['QRCode'].style.display = 'none';
        },
        getRelevantList(num, type, language, title) {
            let page = {
                typeDict: type,
                language: language,
                pageSize: 3,
                pageNo: num,
                businessType: "information",
                title: title ? title : ''
            }
            getLatestInformationPortal(page).then(res => {
                if (res.data) {
                    this.news[0].newItem = res.data.portalInformationList || []
                }
            });
        },
        getBaseProject() {
            this.params.language = this.$i18n.locale.toUpperCase();
            getLatestBaseProjectViewPortal(this.params).then((result) => {
                var data = result.data;
                if (data.baseProjectViews) {
                    this.news[1].newItem = result.data.baseProjectViews || [];
                }
            })
            allInformationViewCount().then(result => {
                var data = result.data;
                if (data) {
                    this.informationTotal = data.cmsInformationViewCount;
                }
            })
        },
        viewChange(id, index, num) {
            if (id) {
                if (num == 0) {
                    this.toView('realTimeInfoItemdetails', id)
                }
                if (num == 1) {
                    this.toView('projectPresentationDetails', id)
                }
                if (num == 2) {
                    localStorage.setItem('conferenceId', id);
                    this.$store.commit('modify', 'ConferenceDetail')
                    this.$router.push({ name: 'ConferenceDetail', params: { key: id } })
                }
            }
        },
        toViewChange(index) {
            if (index == 0) {
                this.toView('realTimeInfo');
            }
            console.log(index + "index")
            if (index == 1) {
                this.toView('projectPresentation');
            }
            if (index == 2) {
                this.toView('conferenceServices');
            }
        },
        CreateMeeting() {
            this.dialogVisible = true
        },
        showbtn() {
            let topBtn = document.getElementById('toUp');
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            let browserHeight = window.outerHeight;
            if (scrollTop > 100) {
                if (topBtn) {
                    topBtn.style.display = 'block';
                }
            } else {
                if (topBtn) {
                    topBtn.style.display = 'none';
                }
            }
        },
        getIconUrl(url) {
            return require("@/assets/img/home/" + url + ".png");
        },
        // 返回顶部
        toUp() {
            // window.scrollTo(0,0);
            var timer = setInterval(function () {
                let osTop = document.documentElement.scrollTop || document.body.scrollTop;
                let ispeed = Math.floor(-osTop / 5);
                document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
                this.isTop = true;
                if (osTop === 0) {
                    clearInterval(timer);
                }
            }, 30)
        },
        toView(router, json, item, i) {
            console.log(router)
            if (i && i.label == 'common.ExhibitionService') {
                // window.open('http://tour.quanjingke.com/xiangmu/quanqiunengyuan_vtour_v7/');
                this.state = true;
                this.detialPlayVideoVideo = true;
            } else if (i && i.label == 'common.OnlineExhibition') {
                window.open("http://119.3.163.174:1080/23-2/", '_blank');
            } else if (i && i.label == 'common.Exhibitionfeedback') {
                this.detialPlayVideoPdf = true;
            } else {
                if (json) {
                    if (router == 'projectPresentationDetails') {
                        this.$router.push({ name: 'routerItem', query: { key: json } })
                    } else {
                        this.$router.push({ name: 'routerItem', query: { key: json } })
                    }

                } else {

                    this.$router.push({ name: 'routerItem' })
                }
                this.$store.commit('modify', router)
                window.localStorage.setItem('router', router)
            }

            //  get().then(result => {
            //    console.log(result)
            //  })
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* * {
    padding: 0;
    margin: 0;
  } */
body {
    margin: 0;
}

.box,
.box2,
.box3 {
    width: 1200px;
    height: 360px;
    margin: auto;
    position: relative;
    border-bottom: 1px solid #fff;
    /* background-color: #000; */
}

.box3 {
    height: 40px;
    border: none;
}

.box3 span:nth-child(1) {
    width: 600px;
    height: 40px;
    display: block;
    float: left;
    background: #06c4e2;
    color: #fff;
}

.box3 span:nth-child(2) {
    width: 600px;
    height: 40px;
    display: block;
    float: left;
    background: #f0d06b;
    color: #666;
}

.box3 span {
    text-align: center;
    line-height: 40px;
    font-size: 14px;
}

.box ul {
    text-align: top;
    display: flex;
    display: -webkit-flex;
    /* Safari */
    justify-content: space-between;
    flex-wrap: wrap;
}

.box2 ul li {
    display: block;
    height: 120px;
    background: #fff;
}

.box2 ul li:nth-child(1) {
    border-left: 3px solid #608cc4;
}

.box2 ul li:nth-child(2) {
    border-left: 3px solid #57c4a8;
}

.box2 ul li:nth-child(3) {
    border-left: 3px solid #e9b767;
}

.box ul li {
    /* display: inline-block; */
    /* float: left; */
    width: 188px;
    height: 170px;
    background: #fff;
    margin: 6px 0;
    text-align: center;
    background-image: url("../assets/img/home/green.png");
    background-size: 120px 120px;
    background-repeat: no-repeat;
    background-position: 68px 50px;
    background-color: rgba(167, 225, 123, 0.5);
    color: #638F3F;
    border-radius: 10px;
}

.box ul li:nth-child(-n+6) {
    background-image: url("../assets/img/home/bule.png");
    background-color: rgba(115, 209, 240, 0.5);
    color: #3F85A7;
}

.initDataItem {
    font-size: 14px;
    margin-bottom: 10px;
    ;
    /* height: 30px; */
    font-weight: 400;
    text-align: left;
    margin-left: 65px;
}

.initDataItem2 {
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    margin-left: 36px;
    line-height: 23px;
}

.tdLabel1,
.tdLabel2 {
    font-size: 14px;
    color: #666;
    line-height: 28px;
    display: inline-block;
}

.spot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #d8d8d8;
    margin-right: 5px;
    margin-bottom: 2px;
}

.cursor:hover {
    color: #ff0000;
    /* border-bottom: 1px solid #7CBA4B; */
}

.Boxcursor:hover {
    border-bottom: 1px solid #7CBA4B;
    cursor: pointer;
}

.box ul li:nth-child(-n+6) .Boxcursor:hover {
    border-bottom: 1px solid #45ACE0;
    cursor: pointer;
}

.box ul li .borderBottomNone span:hover {
    border-bottom: none !important;

}

.el-button {
    padding: 5px 10px;
}

.CreateMeeting p {
    line-height: 25px;
}

.el-popper[x-placement^=right] {
    max-height: none;
}

.box ul li:hover {
    /* content:''; */
    /* position:absolute;
    left:0;
    bottom:0; */
    width: 188px;
    height: 170px;
    transform: translate(-3px, -5px) scale(1);
    /* transition-timing-function:cubic-bezier(0.75,0,0.125,1); */
    transition: all 0.5s;
    /* transform:; */
}
</style>
