dev/dcp-web-gate/src_old/views/NationalregionalCommissions/NationaIntroductionCommitteeLayout.vue

<!-- 委员会简介 -->
<template>
  <div class="autoBox box1"
       style="position: relative;">
    <!-- 区域委员会 -->
    <div class="title"
         id="elIconArrowUp">
      {{$t('common.RegionalCommittee')}}
    </div>
    <div class="missions">
      <div :class="$i18n.locale=='zh'?'missionsLeft':'missionsLeft2'">
        <ul>
          <li :class="committeeSelectNum==item.id?'liTager':'liNoTager'"
              v-for="(item,index) in committee"
              @click="committeeChange(item.committeeName,item.id,item.committeeProfileUe,item.entityId,item)">
            {{item.committeeName}}
          </li>
        </ul>
      </div>
      <div class="missionsRight">
        <div class="missionsRightTitle">
          <span v-if="$i18n.locale =='zh'">{{regionEntity.committeeName}}简介 </span>
          <span v-if="$i18n.locale =='en'">Introduction to the {{regionEntity.committeeName}}</span>
        </div>
        <div class="briefIntroduction"
             v-html="regionEntity.committeeProfileUe">
        </div>
        <div class="borderBottom">
          <NationaIntroductionList :introduce="introduceMap"
                                   type="region"></NationaIntroductionList>
        </div>
        <!-- 动态 -->
        <div class="dynamic borderBottom"
             v-if="activityLogoFlag">
          {{$t('common.Dynamic')}}
        </div>
        <div v-if="activityLogoFlag">
          <div class="dynamicLeft">
            <img :src="'/api/file/pub/' + this.activityLogo"
                 alt=""
                 class="dynamicImg">
          </div>
          <div class="dynamicRight">
            <tr v-for="(item,index) in regionActivityInfoList"
                :key="index"
                v-if="index<5"
                @click="addBrowse(item.entityId);toView('nationalregionalCommissionsDetailds',item.entityId)"
                class="cursor">
              <td class="dynamicTitle">{{item.activityName}}</td>
              <!-- <td class="dynamicTime"
                  style="float: right;">{{formatDate(item.createDate)}}</td>
              <td style="clear:both"></td> -->
            </tr>
          </div>
        </div>
      </div>
      <div style="clear: both;"></div>
    </div>
    <div style="position: fixed;bottom: 10px;left: 50%;transform: translate(-50%,-50%); background-color: rgba(0,145,255,.3);
        z-index: 99;padding:12px 50px;color: #fff;border-radius: 15px;"
         class="view"
         v-if="ifUp">
      <i class=" el-icon-arrow-up"></i>
      <span class="cursor"
            style="color: #fff;margin-left: 5px;"
            @click="toUp">{{$t('common.RegionalCommittee')}}</span>
    </div>
    <div style="position: fixed;bottom: 10px;left: 50%;transform: translateX(-50%); background-color: rgba(0,145,255,.3);
        z-index: 99;padding:12px 50px;color: #fff;border-radius: 15px;"
         class="view"
         v-else>
      <i class="el-icon-arrow-down"></i>
      <span style="color: #fff;margin-left: 5px;"
            class="cursor"
            @click="handleLeft">{{$t('common.NationalCommittee')}}</span>
    </div>
    <!-- 国家委员会 -->
    <div class="title marginTop"
         id="elIconArrowDown">
      {{$t('common.NationalCommittee')}}
    </div>
    <div style="margin-top: 20px;">
      <Screen v-bind:screen1="screen1"
              :screen3="screen3"
              @screenBack="screenBack"></Screen>
    </div>
    <div style="height: 40px;padding: 10px 20px 0 0;background-color: rgb(247, 247, 247);margin: 0 20px;">
      <div style="float: right;transform: translateY(-10px);">
        <el-select v-model="CountryId"
                   :no-match-text="$i18n.locale=='zh'?'无匹配数据':'No Data'"
                   filterable
                   :placeholder="$t('common.PleaseEnter') + $t('common.Nameofcountry')">
          <el-option v-for="item in worldSearch"
                     :key="item.id"
                     :label="item.committeeName"
                     :value="item.id">
          </el-option>
        </el-select>
      </div>
    </div>
    <!-- 国家委员会全部展示 -->
    <div v-if="!photoUrl">
      <div class="map">
        <ul>
          <li class=""
              v-for="(item,index) in world">
            <div v-if="index <32"
                 @click="mapClick(item)">
              <div>
                <img :src="'api/file/pub/'+ item.nationalFlag"
                     alt=""
                     class="mapImg">
              </div>
              <div class="mapName">
                {{item.committeeName}}
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div style="clear: both;"></div>
      <div style="width: 100%;position: relative;height: 100px;">
        <el-pagination class="position"
                       background
                       layout="prev, pager, next"
                       :page-size=32
                       :total=totalPage
                       @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>
    <!-- 点击展示单个详情 -->
    <div v-if="photoUrl">
      <div>
        <div style="position: relative;width:178px;height:136px;float: left;margin-left: 40px;margin-top: 10px;"
             @click="photoUrlChange">
          <div class="boxMark">
            {{$t('common.ActiveReturn')}}
          </div>
          <img :src="'api/file/pub/' + countryEntity.nationalFlag"
               alt=""
               style="width:100%;height:100%;">

        </div>
        <div style="float: left;width: 900px;margin-left: 30px;">
          <div class="countryMapTitle">{{countryEntity.committeeName}}</div>
          <div class="countryMapMiss"
               v-html="countryEntity.committeeProfileUe"></div>
          <NationaIntroductionList :introduce="countryMap"
                                   type="country"></NationaIntroductionList>
          <!-- 动态 -->
          <div class="dynamic borderBottom borderTop"
               v-if="countryActivityInfoList.length>0">
            {{$t('common.Dynamic')}}
          </div>
          <div>
            <div class="dynamicLeft"
                 v-if="countryActivityLogoFlag">
              <img :src="'/api/file/pub/' + countryActivityLogo"
                   alt=""
                   class="dynamicImg">
            </div>
            <div class="dynamicRight"
                 v-if="countryActivityLogoFlag">
              <tr v-for="(item,index) in countryActivityInfoList" 
                  v-if="index<5"
                  @click="addBrowse(item.entityId);toView('nationalregionalCommissionsDetailds',item.entityId)"
                  class="cursor">
                <td class="dynamicTitle">{{item.activityName}}</td>
                <!-- <td class="dynamicTime"
                    style="float: right;">{{formatDate(item.createDate)}}</td>
                <td style="clear:both"></td> -->
              </tr>
            </div>
          </div>

          <div style="clear: both;"></div>
        </div>

      </div>
      <div style="clear: both;"></div>

      <div>

      </div>
    </div>

  </div>
  </div>
</template>
<script>
import Screen from "@/components/screen";
import { getDicts } from "@/api/dict";

import NationaIntroductionList from "@/views/NationalregionalCommissions/NationaIntroductionList";
import { getCommitteeInfos, getCommitteeCountryInfos } from '@/api/committee/committeeBasisInfo'
import {addBrowseNum} from '@/api/committee/committeeActivityEntity'
export default {
  name: "NationaIntroductionCommitteeLayout",
  components: { Screen, NationaIntroductionList },
  data () {
    return {
      totalPage: null,
      photoUrl: '',
      page: {
        order: null,
        region: null,
        name: null,
        language: '',
        pageNo: 1,
        pageSize: 32
      },
      CountryId: null,
      committeeSelectNum: '',
      committeeSelectLable: '非洲区域委员会',
      briefIntroduction: '',//区域委员会简介
      regionEntity: {},//区域委员会
      countryMapMiss: '',//国家委员会简介
      countryEntityId: '',//国家委员会实体id
      countryEntity: {},//国家委员会
      countryActivityInfoList: [],
      regionActivityInfoList: [],
      committeeRegionDicts: [],
      committeeRegionDictsEn: [],
      activityLogo: '',
      activityLogoFlag: true,
      countryActivityLogo: '',
      countryActivityLogoFlag: true,
      committee: [],
      introduceRegion: {},
      ifUp: false,
      introduce: {},
      introduceMap: {},
      cooperationUnitDynamicList: [],
      world: [],
      worldSearch: [],
      countryList: {},
      countryMap: {},
      screen1: {
        value: "common.Region",
        item: [],
      },
      screen3: {
        value: "common.Byletter",
        item: [{
          value: null,
          ifValue: true,
          label: 'common.All'
        }, {
          ifValue: false,
          value: 'A',
          label: 'A'
        }, {
          ifValue: false,
          value: 'B',
          label: 'B'
        }, {
          ifValue: false,
          value: 'C',
          label: 'C'
        }, {
          ifValue: false,
          value: 'D',
          label: 'D'
        }, {
          ifValue: false,
          value: 'E',
          label: 'E'
        }, {
          ifValue: false,
          value: 'F',
          label: 'F'
        }, {
          ifValue: false,
          value: 'G',
          label: 'G'
        }, {
          ifValue: false,
          value: 'H',
          label: 'H'
        }, {
          ifValue: false,
          value: 'I',
          label: 'I'
        }, {
          ifValue: false,
          value: 'J',
          label: 'J'
        }, {
          ifValue: false,
          value: 'K',
          label: 'K'
        }, {
          ifValue: false,
          value: 'L',
          label: 'L'
        }, {
          ifValue: false,
          value: 'M',
          label: 'M'
        }, {
          ifValue: false,
          value: 'N',
          label: 'N'
        }, {
          ifValue: false,
          value: 'O',
          label: 'O'
        }, {
          ifValue: false,
          value: 'P',
          label: 'P'
        }, {
          ifValue: false,
          value: 'Q',
          label: 'Q'
        }, {
          ifValue: false,
          value: 'R',
          label: 'R'
        }, {
          ifValue: false,
          value: 'S',
          label: 'S'
        }, {
          ifValue: false,
          value: 'T',
          label: 'T'
        }, {
          ifValue: false,
          value: 'U',
          label: 'U'
        }, {
          ifValue: false,
          value: 'V',
          label: 'V'
        }, {
          ifValue: false,
          value: 'W',
          label: 'W'
        }, {
          ifValue: false,
          value: 'X',
          label: 'X'
        }, {
          ifValue: false,
          value: 'Y',
          label: 'Y'
        }, {
          ifValue: false,
          value: 'Z',
          label: 'Z'
        }],
      },
      pageNo: 1,
      dataList: {},
    }
  },
  watch: {
    "$i18n.locale" () {
      this.getMap();
      this.getDict();
      this.screenBack();
    },
    "CountryId" () {
      this.screenByName();
    }
  },
  mounted () {
    this.getMap();
    this.getDict();
    this.screenBack();
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleLeft (index) {
      this.$el.querySelector('#elIconArrowDown').scrollIntoView({
        behavior: "smooth",  // 平滑过渡
        block: "start"  // 上边框与视窗顶部平齐。默认值
      });
      // this.listBoxState=false;

      // let timeId;
      // clearTimeout(timeId);
      // timeId = setTimeout(() => {
      //   this.listBoxState=true;
      // },200);
    },
    handleScroll () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      // console.log(scrollTop)
      // var offsetTop = document.querySelector('.realTimeInfo_scree').offsetTop
      if (scrollTop > 400) {
        this.ifUp = true;
      } else if (scrollTop < 400) {
        this.ifUp = false;
      }
    },
    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)
    },
    getDict () {
      getDicts("COMMITTEE_REGIONAL_DICT,COMMITTEE_REGIONAL_DICT_EN").then(res => {
        var data = res.data;
        if (data) {
          if (this.$i18n.locale == 'zh') {
            this.screen1.item = res.data[0] || [];
            this.screen1.item.unshift({
              label: "全部",
              value: null,
            })
            this.screen1.item = res.data[0] || [];
          } else if (this.$i18n.locale == 'en') {
            this.screen1.item = res.data[1] || [];
            this.screen1.item.unshift({
              label: "All",
              value: null,
            })
          }
        }
      });

    },
    screenByName () {
      this.page.language = this.$i18n.locale.toUpperCase();
      this.page.name = this.CountryId,
        this.photoUrl = '';
      // console.log(this.page);
      getCommitteeCountryInfos(this.page).then(res => {
        var data = res.data
        if (data) {
          this.world = res.data.committeeBasisInfos || [];
          this.totalPage = res.data.page.totalCount - 0;
        }
      });
    },
    screenBack (data) {
      this.page.language = this.$i18n.locale.toUpperCase();
      if (data != undefined) {
        if (data.click1) {
          this.page.region = data.click1;
        } else {
          this.page.region = null;
        }
        if (data.click3) {
          this.page.order = data.click3;
        } else {
          this.page.order = null;
        }
      }

      // if(data){
      //     page={
      //         region:data.click1 , 
      //         order:data.click3 ,
      //         language:this.$i18n.locale.toUpperCase(),
      //         pageNo:this.pageNo,
      //         pageSize:32
      //     }
      // }else{
      //     page={
      //         language:this.$i18n.locale.toUpperCase(),
      //         name:this.CountryId,
      //         pageNo:this.pageNo,
      //         pageSize:32
      //     }
      // }
      this.photoUrl = '';
      // console.log(this.page);
      getCommitteeCountryInfos(this.page).then(res => {
        var data = res.data
        if (data) {
          this.world = res.data.committeeBasisInfos || [];
          this.totalPage = res.data.page.totalCount - 0;
        }
      });

    },
    handleCurrentChange (val) {
      this.page.pageNo = val;
      this.screenBack(this.dataList);
    },
    getMap () {
      let page = {
        committeeId: "",
        language: this.$i18n.locale.toUpperCase()
      }
      getCommitteeInfos(page).then((res) => {
        if (res.data) {
          //   区域委员会
          this.committee = res.data.committeeBasisInfosRegion;
          // 国家委员会
          this.worldSearch = res.data.committeeBasisInfosCountry;
          this.worldSearch.unshift({
            committeeName: this.$i18n.locale == 'zh' ? '全部' : 'ALL',
            id: null,
            value: null
          })
          // 活动
          this.cooperationUnitDynamicList = res.data.committeeActivityInfos;
          this.countryList = res.data.countryList;
          this.introduce = res.data.regionList;
          // 默认取第一个区域委员会
          this.committeeChange(this.committee[0].committeeName, this.committee[0].id, this.committee[0].committeeProfileUe, this.committee[0].entityId, this.committee[0])
        }
      })
    },
    mapClick (item) {
      this.countryEntity = item;
      this.photoUrl = item.nationalFlag;
      this.countryActivityInfoList = [];
      this.cooperationUnitDynamicList.forEach(element => {
          let strings=element.committeeId.split(",");
          strings.forEach(i => {
              if (i == item.entityId) {
                  this.countryActivityInfoList.push(element);
              }
          })
        // if (element.committeeId == item.entityId) {
        //   this.countryActivityInfoList.push(element);
        // }
      });
      if (this.countryActivityInfoList.length >= 1) {
        this.countryActivityLogo = this.countryActivityInfoList[0].activityLogo;
        this.countryActivityLogoFlag = true;
      } else {
        this.$nextTick(() => {
          this.countryActivityLogo = " ";
          this.countryActivityLogoFlag = false;
        })
      }
      this.countryMap = {};
      this.countryMap[0] = []
      this.countryMap[1] = []
      this.countryMap[2] = []
      this.countryMap[3] = []
      this.countryMap[4] = []
      this.countryList[1].forEach(element => {
        if (element.nationalCommitteeDict == item.entityId && element.correlationType == 'C') {
          this.countryMap[0].push(element);
        }
      })
      this.countryList[1].forEach(element => {
        if (element.nationalCommitteeDict == item.entityId && element.correlationType == 'P') {
          this.countryMap[1].push(element);
        }
      })
      this.countryList[2].forEach(element => {
        if (element.nationalCommitteeDict == item.entityId) {
          this.countryMap[2].push(element);
        }
      })
      this.countryList[3].forEach(element => {
        if (element.nationalCommitteeDict == item.entityId) {
          this.countryMap[3].push(element);
        }
      })
      this.countryList[4].forEach(element => {
        if (element.nationalCommitteeDict == item.entityId) {
          this.countryMap[4].push(element);
        }
      })
      this.$forceUpdate();

    },
    photoUrlChange () {
      this.photoUrl = "";
      // console.log(this.photoUrl)
    },
    // realTimeInfoScreen(i,index){
    //   this.screenIndex=index
    //   this.Screens=i.lable
    // },

    // 委员会切换
    committeeChange (lable, num, committeeProfileUe, entityId, item) {
      this.regionEntity = item;
      this.committeeSelectNum = num;
      this.committeeSelectLable = lable;
      this.briefIntroduction = committeeProfileUe
      this.regionActivityInfoList = [];
      this.entityId = entityId;
      this.cooperationUnitDynamicList.forEach(element => {
          let strings=element.committeeId.split(",");
          strings.forEach(i => {
              if (i == entityId) {
                  this.regionActivityInfoList.push(element);
              }
          })

          console.log("list")
          console.log(this.regionActivityInfoList)
      });
      if (this.regionActivityInfoList.length >= 1) {
        this.activityLogo = this.regionActivityInfoList[0].activityLogo;
        this.activityLogoFlag = true;
      } else {
        this.$nextTick(() => {
          this.activityLogo = " ";
          this.activityLogoFlag = false;
        })
      }
      this.introduceMap = {};
      this.introduceMap[1] = []
      this.introduceMap[2] = []
      this.introduceMap[3] = []
      this.introduceMap[4] = []
      this.introduce[1].forEach(element => {
        if (element.regionalCommitteeDict == entityId) {
          element.unitProfile = element.unitProfile ? element.unitProfile.replace(/<[^>]+>|&[^>]+;/g, "") : '';
          this.introduceMap[1].push(element);
        }
      })
      this.introduce[2].forEach(element => {
        if (element.regionalCommitteeDict == entityId) {
          this.introduceMap[2].push(element);
        }
      })
      this.introduce[3].forEach(element => {
        if (element.regionalCommitteeDict == entityId) {
          this.introduceMap[3].push(element);
        }
      })
      this.introduce[4].forEach(element => {
        if (element.regionalCommitteeDict == entityId) {
          this.introduceMap[4].push(element);
        }
      })
      this.$forceUpdate();

      // 处理绑定的机构 人员数据

    },
    addBrowse(entityId){
        addBrowseNum(entityId).then(res =>{
                // console.log(res);
            })
        },
    toView(router,json){
        this.$store.commit('modify', router);
        window.localStorage.setItem('router', router);
        const { href } = this.$router.resolve({
            name: router,
            query: {
              key: json
            }
        });
        window.open(href, '_blank');
    },
  }
}
</script>
<style scoped>
.box1 {
  /* margin-top: 10px; */
  background: #fff;
  /* height: 500px; */
  padding: 0 0 20px 0;
  position: absolute;
}
.crumbs {
  margin-left: 20px;
}
.screen1 {
  color: #2c5589;
}
.screen2 {
  font-size: 14px;
  color: #bebebe;
}
.marginTop {
  margin-top: 20px;
}
.title {
  width: 100%;
  height: 60px;
  background-color: #ebf5ff;
  text-align: center;
  color: #1890ff;
  line-height: 60px;
  font-size: 25px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
}
.missions {
  margin-top: 30px;
}
.missionsLeft,
.missionsLeft2 {
  float: left;
  width: 258px;
  /* height: 430px; */
  margin-left: 10px;
}
.missionsLeft li {
  width: 100%;
  height: 50px;
  text-align: center;
  font-size: 20px;
  font-family: PingFangSC-Semibold, PingFang SC;
  line-height: 50px;
  letter-spacing: 1px;
  border-radius: 5px;
  cursor: pointer;
  overflow: hidden;
  margin-bottom: 3px;
}
.missionsLeft2 li {
  width: 100%;
  /* height: 50px; */
  text-align: center;
  font-size: 20px;
  font-family: PingFangSC-Semibold, PingFang SC;
  line-height: 25px;
  padding: 15px 0;
  letter-spacing: 1px;
  border-radius: 5px;
  cursor: pointer;
  /* overflow: hidden; */
  margin-bottom: 3px;
}
.missionsLeft .liTager,
.missionsLeft2 .liTager {
  background-color: #1890ff;
  color: #ffffff;
}
.missionsLeft .liNoTager .missionsLeft2 .liNoTager {
  background-color: #ebf5ff;
  color: #333333;
}
.missionsRight {
  float: right;
  width: 900px;
}
.missionsRightTitle {
  font-size: 23px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 500;
  color: #1890ff;
  line-height: 32px;
}
.briefIntroduction {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 30px;
  margin: 20px 0 12px 0;
  text-indent: 2em;
}
.email {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  margin-bottom: 20px;
  line-height: 22px;
}
.introduce {
  margin-top: 20px;
}
.introduceBorder {
  border-top: 1px solid #0091ff;
}
.introduceItem {
  margin: 10px 0;
  position: relative;
}
.introduceItem :hover .iconRight {
  color: #0091ff;
}
.introduceItemTitle {
  width: 100px;
  height: 34px;
  line-height: 34px;
  border: 1px solid #0091ff;
  text-align: center;
  color: #0091ff;
  position: absolute;
  top: 25px;
  left: 0px;
}
.borderBottom {
  border-bottom: 1px solid rgba(0, 121, 239, 0.5);
}
.borderTop {
  border-top: 1px solid rgba(0, 121, 239, 0.5);
}
.introduceItemImg {
  width: 80px;
  height: 80px;

  position: absolute;
  top: 10px;
  left: 130px;
}
.introduceItemName {
  width: 160px;
  /*position: absolute;*/
  /*top: 10px;*/
  /*left: 220px;*/
  padding: 10px 0;
}
.introduceItemPersonnel {
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  text-align: center;
  color: #333333;
  line-height: 28px;
}
.introduceItemCountry {
  font-size: 14px;
  text-align: center;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 22px;
}
.regionalIntroduce {
  width: 474px;
  height: 85px;
  margin-top: -20px;
  color: #333333;
  line-height: 22px;
  overflow: hidden;
  position: absolute;
  font-size: 14px;
  top: 10px;
  left: 375px;
}
.dynamic {
  padding: 20px 0 10px 0;
  font-size: 16px;
  font-family: HiraginoSansGB-W6, HiraginoSansGB;
  font-weight: normal;
  color: #1890ff;
  line-height: 30px;
}
.dynamicLeft {
  float: left;
  margin-top: 15px;
  width: 280px;
}
.dynamicImg {
  width: 100%;
  height: 200px;
}
.dynamicRight {
  float: right;
  margin-top: 15px;
  margin-right: 10px;
  width: 590px;
  color: #979797;
}
.dynamicTitle {
  float: left;
  width: 500px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 40px;
  position: relative;
  text-indent: 1em;
}
.dynamicTitle::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background: #0b82ff;
  position: absolute;
  top: 17px;
  left: 0;
}
.view {
  position: relative;
  margin: 0 auto;
  /* padding: 1em;    */
  max-width: 23em;
  background: hsla(0, 0%, 100%, 0.25) border-box;
  overflow: hidden;
  border-radius: 0.3em;
  box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.3) inset,
    0 0.5em 1em rgba(0, 0, 0, 0.6);
  text-shadow: 0 1px 1px hsla(0, 0%, 100%, 0.3);
}
.view::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: -30px;
  z-index: -1;
  -webkit-filter: blur(20px);
  filter: blur(20px);
}
.dynamicTime {
  line-height: 40px;
}
.map ul {
  padding: 20px 0px 20px 20px;
}
.map ul li {
  float: left;
  width: 130px;
  margin-right: 17px;
}
.mapImg {
  width: 130px;
  height: 100px;
}
.mapName {
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #2c558a;
  text-align: center;
  height: 50px;
  margin-top: 10px;
}
.position {
  height: 80px;
  position: absolute;
  left: 50%;
  top: 100px;
  transform: translate(-50%, -50%);
}
.countryMapTitle {
  margin-top: 10px;
  font-size: 20px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #1890ff;
  line-height: 32px;
}
.countryMapMiss {
  margin-top: 20px;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 40px;
  padding-bottom: 30px;
  border-bottom: 1px solid #0b82ff;
}
.introduce_F5FAFF {
  background-color: #f5faff;
  margin-left: 125px;
  height: 100px;
}
.iconRight {
  float: right;
  margin-top: 5px;
}
.boxMark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgbA(155, 155, 155, 0.8);
  line-height: 136px;
  text-align: center;
  color: #ffffff;
  cursor: pointer;
}
.dynamicRight tr {
  line-height: 30px;
  width: 100%;
  display: inline-block;
  border-bottom: 1px dashed #ccc;
  font-size: 14px;
  color: #6C819D;
  margin-bottom: 5px;
}
</style>