IntroductionEquipmentAlliance.vue 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600
  1. <template>
  2. <div>
  3. <div>
  4. <IntroductionHeader style="position: absolute;left: 0;top: 0;width: 100%;z-index: 2;"></IntroductionHeader>
  5. <div style="width: 65%;z-index: 2;height: 60px;position: absolute;top: 90px;left: 25%;">
  6. <img src="@/assets/img/home/LOGO2020-12-22.png" alt="" style="height:100%" @click="toView('home')">
  7. </div>
  8. <div style="position: relative;width:100%">
  9. <img :src="getIconImg(img)" alt="" style="width: 100%;height: 600px;">
  10. <div style="width:65%;text-align:center;position:absolute;left:50%;top:62%;transform: translate(-50%,-89px);color: #fff;font-size: 35px;font-weight: 700;">
  11. {{$t(title)}}
  12. </div>
  13. <el-button
  14. type="success"
  15. round
  16. style="position:absolute;left:50%;top:85%;transform: translate(-50%,-89px);"
  17. @click="nextChange('IntroductionApplicationMembership')">
  18. {{$t('common.ApplyToJoin')}}
  19. </el-button>
  20. </div>
  21. </div>
  22. <div style="width: 100%;position: relative;">
  23. <div class="autoBox box">
  24. <!-- 面包屑导航 -->
  25. <div style="height: 30px;margin-left: 10px;" class="union">
  26. <el-breadcrumb separator="/" style="line-height: 30px;color: #0079ef !important;">
  27. <el-breadcrumb-item :to="{ path: 'home' }">{{$t('common.Home')}}</el-breadcrumb-item>
  28. <el-breadcrumb-item :to="{ path: 'IntroductionMemberProfile' }">
  29. {{$t('common.CooperationNetwork')}}
  30. </el-breadcrumb-item>
  31. <el-breadcrumb-item><span @click="toView('IntroductionMemberProfile','union')"
  32. style="font-weight: 700;cursor: pointer;">{{$t('common.IntroductionAlliances')}}</span>
  33. </el-breadcrumb-item>
  34. <el-breadcrumb-item>{{$t(title2)}}</el-breadcrumb-item>
  35. </el-breadcrumb>
  36. </div>
  37. <!-- 成立背景 -->
  38. <div style="width:100%">
  39. <div style="text-align:center;padding:30px 0">
  40. <span style="color: #0E4891;font-weight: 700;font-size: 30px;">{{$t('common.Histroy')}}</span>
  41. </div>
  42. <div style="text-align:center;padding:0 103px;color: #333333;font-size: 16px;line-height: 24px;">
  43. <p>{{$t(Details.label)}}</p>
  44. <p>{{$t(Details.value)}}</p>
  45. </div>
  46. <div style="text-align:center;">
  47. <img :src="getIconImg2(backgroundImg)" alt="" style="width:480px">
  48. </div>
  49. </div>
  50. <!-- 宗旨构成功能 -->
  51. <div style="width:100%;height:230px;display:flex;justify-content: space-between;flex-wrap: nowrap;margin-top:44px">
  52. <!-- 宗旨 -->
  53. <div style="width:30%;height:100%;overflow: hidden;text-overflow: ellipsis;white-space: normal;display: flex;">
  54. <div style="width: 85%;height: 100%;margin: auto;overflow: hidden;text-overflow: ellipsis;
  55. background-color: #f4f9ff;padding: 10px 10px;">
  56. <div style="text-align:center;font-weight: 600;color: #0E4891;line-height: 28px;font-size: 20px;">
  57. <div class="title">
  58. <span class="title-text"><span>{{$t('common.Aims')}}</span></span>
  59. </div>
  60. </div>
  61. <p style="font-size: 14px;font-weight: 400;color: #333333;line-height: 20px;">{{$t(Details.establishment)}}</p>
  62. </div>
  63. </div>
  64. <!-- 构成 -->
  65. <div style="width:30%;height:100%;overflow: hidden;text-overflow: ellipsis;white-space: normal;display: flex;">
  66. <div style="width: 85%;height: 100%;margin: auto;overflow: hidden;text-overflow: ellipsis;background-color: #f4f9ff;padding: 10px 10px;">
  67. <div style="text-align:center;font-weight: 600;color: #0E4891;line-height: 28px;font-size: 20px;">
  68. <div class="title">
  69. <span class="title-text"><span>{{$t('common.Constitute')}}</span></span>
  70. </div>
  71. </div>
  72. <p style="font-size: 14px;font-weight: 400;color: #333333;line-height: 20px;">{{$t(Details.purpose)}}</p>
  73. </div>
  74. </div>
  75. <!-- 功能 -->
  76. <div style="width:30%;height:100%;overflow: hidden;text-overflow: ellipsis;white-space: normal;display: flex;">
  77. <div style="width: 85%;height: 100%;margin: auto;overflow: hidden;text-overflow: ellipsis;background-color: #f4f9ff;padding: 10px 5px 0 10px;">
  78. <div style="text-align:center;font-weight: 600;color: #0E4891;line-height: 28px;font-size: 20px;">
  79. <div class="title">
  80. <span class="title-text"><span>{{$t('common.Function')}}</span></span>
  81. </div>
  82. </div>
  83. <p style="font-size: 14px;font-weight: 400;color: #333333;line-height: 20px;">{{$t(Details.Alliance)}}</p>
  84. </div>
  85. </div>
  86. </div>
  87. <!-- 联盟活动 -->
  88. <div style="width:100%">
  89. <div style="text-align:center;padding:30px 0">
  90. <span style="color: #0E4891;font-weight: 700;font-size: 30px;">{{$t('common.Activities')}}</span>
  91. </div>
  92. <div style="padding-top: 10px;" class="AllianceActivities">
  93. <div v-for="(item,index) in AllianceActivities" :key="index" class="Activities">
  94. <div>
  95. <img :src="getIconImg3('all' + (index+1)+ '.png')" alt="" style="width: 100%;height: 100%;">
  96. </div>
  97. <div class="Alliancetitle">
  98. <div :style="detailBackColor" style="width:92px;height:92px;border-radius:50%;margin: auto;text-align:center">
  99. <img :src="getIconImg3('activity' + (index+1)+ '.png')" alt=""
  100. style="height:40%;margin-top:30px">
  101. </div>
  102. <h3>{{$t(item.title)}}</h3>
  103. </div>
  104. <div class="AllianceDetail" :style="detailBackColor">
  105. <fieldset style="width:80%;margin:auto;border: 2px solid #fff;font-size: 24px;font-weight: 700;">
  106. <legend>{{$t(item.title)}}</legend>
  107. <div style="border:1px solid #fff;margin:auto;width:58px;margin-top:12px"></div>
  108. <p style="font-size: 14px;">
  109. {{$t(item.label)}}
  110. </p>
  111. </fieldset>
  112. </div>
  113. </div>
  114. </div>
  115. </div>
  116. <!-- 联盟成员 -->
  117. <div style="margin-left: 10px;padding-top: 10px;margin-bottom: 30px;" v-if="this.title!=='common.GoalEquipmentAlliance'">
  118. <span style="color: #3a6295;font-weight: 700;margin-left: 5px;">{{$t('common.Member')}}</span>
  119. </div>
  120. <div style="margin: 20px;color: #666;font-size: 14px;" class="continents" v-if="index!==3">
  121. <ul>
  122. <li class="cursor" v-for="(item,index) in list"
  123. @click="toViewDetails('IntroductionLeagueMemberDetails',item)">
  124. <img v-if="memberUnits[item.unitId]"src="@/assets/img/introductionCooperation/profile.png" alt="" style="vertical-align: middle;">
  125. {{$i18n.locale=='zh'?item.unitZhName:item.unitEnName}}
  126. </li>
  127. </ul>
  128. </div>
  129. <div style="width: 100%;position: relative;height: 100px;" v-if="index!=3">
  130. <el-pagination
  131. style="height: 80px;position: absolute;left: 50%;top: 100px;transform: translate(-50%,-50%);"
  132. background
  133. layout="prev, pager, next"
  134. :page-size=45
  135. :total=total-0
  136. @current-change="handleCurrentChange">
  137. </el-pagination>
  138. </div>
  139. </div>
  140. </div>
  141. <el-dialog
  142. :title="$i18n.locale=='zh'?'提示':'Reminder'"
  143. :visible.sync="toViewLogin"
  144. :width="$i18n.locale=='zh'?'500px':'750px'"
  145. :height="$i18n.locale=='zh'?'300px':'386px'"
  146. :before-close="toViewLoginChange">
  147. <div style="width: 100%;height: 100%;">
  148. <img src="@/assets/img/loginTips.png" alt="" style="width: 180px;height: 180px;margin-left: 20px;">
  149. <div style="float: right;margin-right: 20px;" :style="$i18n.locale=='zh'?'width: 49%;margin-top: 10px;':'width: 453px;margin-top: -25px;'">
  150. <div style="font-size: 20px;font-weight: normal;color: #333333;font-family: HiraginoSansGB-W3, HiraginoSansGB;line-height: 40px;">
  151. {{$t('common.ReminderFirst')}}
  152. </div>
  153. <div style="font-size: 16px;font-family: HiraginoSansGB-W3, HiraginoSansGB;font-weight: normal;color: #666666;line-height: 30px;">
  154. {{$t('common.ReminderSecond')}} <span style="color: #0091FF;font-size: 18px;">{{num}}</span> {{$t('common.ReminderThird')}}
  155. </div>
  156. <div style="font-size: 14px;font-family: HiraginoSansGB-W3, HiraginoSansGB;font-weight: normal;color: #666666;line-height: 30px;">
  157. {{$t('common.ReminderForth')}}
  158. </div>
  159. <div style="font-size: 14px;font-family: HiraginoSansGB-W3, HiraginoSansGB;height:33px;line-height:60px;font-weight: normal;color: #0091FF;">
  160. <span style="margin-left: 40px;" class="cursor" @click="toView('login')">
  161. {{$t('common.ReminderFifth')}}
  162. </span>
  163. <span style="margin-left: 10px;" class="cursor" @click="toView('Register')">{{$t('common.ReminderSixth')}}</span>
  164. </div>
  165. </div>
  166. </div>
  167. </el-dialog>
  168. <footers></footers>
  169. </div>
  170. </template>
  171. <script>
  172. import Base from "@/views/base/Base";
  173. import IntroductionHeader from '@/views/introductionCooperation/IntroductionHeader.vue'
  174. import footers from '@/components/footers'
  175. import {getLeagueMemberByName} from '@/api/leagueMember/leagueMember'
  176. import {getMemberLeagueUnit} from '@/api/baseContactsInfo'
  177. import {gateGetUnitViewById} from "@/api/baseUnitView";
  178. import Screen from '@/components/screen'
  179. import { get } from '../../api/baseUnitView';
  180. export default {
  181. name: 'IntroductionEquipmentAlliance',
  182. components: {IntroductionHeader, footers},
  183. extends: Base,
  184. data() {
  185. return {
  186. index: this.$route.query.id,
  187. img: '',
  188. total:0,
  189. title: '',
  190. title2: '',
  191. Details: {},
  192. timer:'',
  193. num:5,
  194. detailBackColor:'',
  195. backgroundImg: "",
  196. page: {
  197. pageSize: 45,
  198. pageNo: 1,
  199. unitZhName: null,
  200. unitEnName:null,
  201. leagueName: null,
  202. language: null,
  203. },
  204. input: '',
  205. initData: {
  206. label: ' 为发挥高校在科研、教育、学术交流等方面的优势和积极性,坚持资源共享、协同创新、互利共赢,为全球能源互联网发展提供技术创新、人才培养和理念传播等方面的支撑,服务全球能源互联网战略落地,服务世界能源变革转型,服务人类社会可持续发展。全球能源互联网发展合作组织(以下简称“合作组织”)发起成立全球能源互联网大学联盟(以下简称“大学联盟”)。',
  207. },
  208. AllianceActivities: [{
  209. img: '@/assets/img/introductionCooperation/AllianceActivities.png',
  210. title: 'common.ProfessionalActivities',
  211. label: "common.ProfessionalLable"
  212. }, {
  213. img: '@/assets/img/introductionCooperation/AllianceActivities2.png',
  214. title: 'common.event',
  215. label: "common.eventLable"
  216. }, {
  217. img: '@/assets/img/introductionCooperation/AllianceActivities3.png',
  218. title: 'common.OtherActivities',
  219. label: "common.OtherLable"
  220. }],
  221. list: [],
  222. zhLeagueName:'',
  223. toViewLogin: false,
  224. memberUnits:{}
  225. }
  226. },
  227. created() {
  228. },
  229. props:{
  230. pageSize:{
  231. type:Number,
  232. default: 0,
  233. }
  234. },
  235. watch:{
  236. "$i18n.locale"() {
  237. this.initLeagueData();
  238. this.getInitData();
  239. },
  240. "toViewLogin"(){
  241. if(this.toViewLogin==true){
  242. this.loginTipsChange();
  243. }
  244. }
  245. },
  246. mounted() {
  247. this.initLeagueData();
  248. this.getInitData();
  249. this.$nextTick(() => {
  250. });
  251. },
  252. methods: {
  253. loginTipsChange(){
  254. const that=this;
  255. this.num =5;
  256. // clearInterval(timer_interval);
  257. this.timer = setInterval(function() {
  258. if (that.num > 0) {
  259. that.num--;
  260. } else {
  261. if(that.toViewLogin==true){
  262. clearInterval(that.timer);
  263. that.toView('login');
  264. }else {
  265. clearInterval(that.timer);
  266. }
  267. }
  268. }, 1000)
  269. },
  270. toViewLoginChange(done){
  271. this.toViewLogin=false;
  272. this.num=5;
  273. clearInterval(this.timer);
  274. },
  275. initLeagueData(){
  276. if (this.index == 0) {
  277. this.title = 'common.GoalUniversityAlliance';
  278. this.title2 = this.$i18n.locale ==='zh'?'大学联盟':'University Alliance';
  279. this.zhLeagueName = '大学联盟';
  280. this.Details = {
  281. label: "common.GoalUniversitylabel",
  282. value: 'common.GoalUniversityvalue',
  283. establishment:'common.Universityestablishment',
  284. purpose:'common.Universitypurpose',
  285. Alliance:'common.UniversityAlliances',
  286. }
  287. this.backgroundImg = 'university.png';
  288. this.img = 'IntroductionUniversity.png';
  289. this.detailBackColor='background: rgb(22 111 228 / 0.7);';
  290. } else if (this.index == 1) {
  291. this.title = 'common.GoalThinkTankAlliance';
  292. this.title2 = this.$i18n.locale ==='zh'?'智库联盟':'Think Tank Alliance';
  293. this.zhLeagueName = '智库联盟';
  294. this.Details = {
  295. label: "common.GoalThinkTanklabel",
  296. value: 'common.GoalThinkTankvalue',
  297. establishment:'common.ThinkTankestablishment',
  298. purpose:'common.ThinkTankpurpose',
  299. Alliance:'common.ThinkTankAlliances',
  300. }
  301. this.backgroundImg = 'Thinkanks.png'
  302. this.img = 'IntroductionThinkTanks.png';
  303. this.detailBackColor='background: rgb(81 158 1 / 0.7);';
  304. } else if (this.index == 2) {
  305. this.title = 'common.GoalFinancialUnion';
  306. this.title2 = this.$i18n.locale ==='zh'?'金融联盟':'Financial Alliance';
  307. this.zhLeagueName = '金融联盟';
  308. this.Details = {
  309. label: "common.GoalFinanciallabel",
  310. value: 'common.GoalFinancialvalue',
  311. establishment:'common.Financialestablishment',
  312. purpose:'common.Financialpurpose',
  313. Alliance:'common.FinancialAlliances',
  314. }
  315. this.backgroundImg = 'finances.png'
  316. this.img = 'IntroductionFinance.png';
  317. this.detailBackColor='background: rgb(214 146 0 / 0.7);';
  318. } else if (this.index == 3) {
  319. this.title = 'common.GoalEquipmentAlliance';
  320. this.title2 = this.$i18n.locale ==='zh'?'装备联盟':'Equipment Alliance';
  321. this.zhLeagueName = '装备联盟';
  322. this.Details = {
  323. label: "common.GoalEquipmentlabel",
  324. value: 'common.GoalEquipmentvalue',
  325. establishment:'common.Equipmentestablishment',
  326. purpose:'common.Equipmentpurpose',
  327. Alliance:'common.EquipmentAlliances',
  328. }
  329. this.backgroundImg = 'equipments.png'
  330. this.img = 'IntroductioneEuipment.png';
  331. this.detailBackColor='background: rgb(46 162 128 / 0.7);';
  332. }
  333. },
  334. getInitData() {
  335. this.getLeagueMemberByName();
  336. },
  337. getLeagueMemberByName: function () {
  338. this.page.language = this.$i18n.locale.toUpperCase();
  339. this.page.leagueName = this.zhLeagueName;
  340. if(this.title=='common.GoalEquipmentAlliance'){
  341. return;
  342. }
  343. //this.page.leagueMemberName='';
  344. getLeagueMemberByName(this.page).then(result => {
  345. var data = result.data;
  346. if (data) {
  347. this.list = data.baseLeagueMembers || [];
  348. this.memberUnits = data.memberUnits
  349. this.total=data.page.totalCount;
  350. }
  351. })
  352. },
  353. getData() {
  354. if(this.$i18n.locale ==='zh'){
  355. this.page.unitZhName = this.input
  356. }else {
  357. this.page.unitEnName = this.input
  358. }
  359. getLeagueMemberByName(this.page).then(result => {
  360. var data = result.data;
  361. if (data) {
  362. this.list = data.baseLeagueMembers || [];
  363. }else {
  364. this.list = []
  365. }
  366. })
  367. },
  368. handleCurrentChange(val) {
  369. this.page.pageNo = val;
  370. this.getLeagueMemberByName();
  371. },
  372. getIconImg(url) {
  373. return require("@/assets/img/introductionCooperation/" + url);
  374. },
  375. getIconImg2(url) {
  376. return require("@/assets/img/introductionCooperation/" + this.backgroundImg);
  377. },
  378. getIconImg3(url) {
  379. return require("@/assets/img/introductionCooperation/" + url);
  380. },
  381. toViewDetails(router, json) {
  382. gateGetUnitViewById(json.unitId,this.$i18n.locale.toUpperCase()).then(res => {
  383. var data = res.data;
  384. if(data){
  385. var baseUnitView = res.data.baseUnitView;
  386. if(baseUnitView.showable == '1'){
  387. this.$store.commit('modify', 'enterpriseDetails');
  388. window.localStorage.setItem('router', 'enterpriseDetails');
  389. const { href } = this.$router.resolve({
  390. name: 'enterpriseDetails',
  391. query: {
  392. key: json.unitId
  393. }
  394. });
  395. window.open(href, '_blank');
  396. }else{
  397. if(data.isMember != undefined ){
  398. let member ={
  399. memberNameZh: data.isMember.memberNameZh,
  400. memberNameEn:data.isMember.memberNameEn,
  401. unitId:data.isMember.unitId,
  402. }
  403. this.$store.commit('modify', 'IntroductionPresentationDetails');
  404. window.localStorage.setItem('router', 'IntroductionPresentationDetails');
  405. const { href } = this.$router.resolve({
  406. name: 'IntroductionPresentationDetails',
  407. query: {
  408. key: data.isMember.id,
  409. member: JSON.stringify(member)
  410. }
  411. });
  412. window.open(href, '_blank');
  413. }else{
  414. if(json.showFlag === 'y'){
  415. this.$store.commit('modify', router);
  416. window.localStorage.setItem('router', router);
  417. const { href } = this.$router.resolve({
  418. name: router,
  419. query: {
  420. key: json.id,
  421. }
  422. });
  423. window.open(href, '_blank');
  424. }else if(baseUnitView.officialWebsitePath){
  425. var url = baseUnitView.officialWebsitePath;
  426. if(url.indexOf('http') == -1){
  427. url = 'http://' + url
  428. }
  429. window.open(url,'_blank')
  430. }else{
  431. return
  432. }
  433. }
  434. }
  435. }
  436. })
  437. },
  438. nextChange(){
  439. if (!this.$Cookies.get('token')) {
  440. // this.$message.warning("请先登录");
  441. // this.$confirm('检测到您未登录,是否登录')
  442. // .then(_ => {
  443. // this.toView('login');
  444. // })
  445. // .catch(_ => {});
  446. this.toViewLogin=true;
  447. } else {
  448. this.toView('IntroductionApplicationMembership')
  449. }
  450. },
  451. toView(router, json) {
  452. this.$store.commit('modify', router);
  453. this.$router.push({name: router, query: {key: json}});
  454. },
  455. mouseOver(index) {
  456. console.log(index)
  457. this.$refs[`mouse${index}`][0].style.display = 'block';
  458. },
  459. mouseLeave(index) {
  460. console.log(index)
  461. this.$refs[`mouse${index}`][0].style.display = 'none';
  462. }
  463. }
  464. }
  465. </script>
  466. <!-- Add "scoped" attribute to limit CSS to this component only -->
  467. <style scoped>
  468. body {
  469. margin: 0;
  470. }
  471. .box, .box2, .box3 {
  472. width: 1200px;
  473. /* height: 360px;
  474. */
  475. margin: auto;
  476. position: relative;
  477. border-bottom: 1px solid #fff;
  478. background-color: #fff;
  479. /* background-color: #000; */
  480. }
  481. .AllianceActivities {
  482. text-align: top;
  483. display: flex;
  484. display: -webkit-flex; /* Safari */
  485. justify-content: space-between;
  486. flex-wrap: wrap;
  487. padding: 30px 10px;
  488. }
  489. .AllianceActivities .Activities {
  490. width: 32%;
  491. position: relative;
  492. }
  493. .continents ul {
  494. text-align: top;
  495. /*display: flex;*/
  496. /*display: -webkit-flex; !* Safari *!*/
  497. /*flex-wrap: wrap;*/
  498. /*padding-left: 40px;*/
  499. }
  500. .continents ul li {
  501. border: 1px solid #f1f1f1;
  502. display: inline-block;
  503. box-shadow: 5px 5px 5px #f1f1f1;
  504. margin-bottom: 10px;
  505. color: #2c558a;
  506. border-radius: 5px;
  507. text-overflow: ellipsis;
  508. white-space: nowrap;
  509. overflow: hidden;
  510. width: 364px;
  511. margin-right: 10px;
  512. height: 35px;
  513. line-height: 35px;
  514. text-align: center;
  515. padding-left: 10px;
  516. }
  517. /*.continents ul li {*/
  518. /* border: 1px solid #f1f1f1;*/
  519. /* box-shadow: 5px 5px 5px #f1f1f1;*/
  520. /* margin-bottom: 10px;*/
  521. /* color: #5878a2;*/
  522. /* border-radius: 5px;*/
  523. /* width: 364px;*/
  524. /* height: 35px;*/
  525. /* line-height: 35px;*/
  526. /* text-align: left;*/
  527. /* padding-left: 10px;*/
  528. /*}*/
  529. .continents ul li:hover {
  530. border: 1px solid #e36844;
  531. }
  532. .continents ul li:active {
  533. background: #e36844;
  534. color: #fff;
  535. }
  536. .union >>> .el-breadcrumb__inner.is-link, .union >>> .el-breadcrumb__inner {
  537. color: #606266;
  538. }
  539. .Alliancetitle{
  540. width:100%;
  541. position: absolute;
  542. top: 25%;
  543. text-align: center;
  544. color: #fff;
  545. opacity: 1;
  546. }
  547. .AllianceDetail{
  548. position: absolute;
  549. left:0;
  550. top: 0;
  551. width:100%;
  552. height:100%;
  553. color: #fff;
  554. text-align: center;
  555. opacity: 0;
  556. display: flex;
  557. align-items: center;
  558. }
  559. .Activities:hover .AllianceDetail{
  560. opacity: 1;
  561. }
  562. .Activities:hover .Alliancetitle{
  563. opacity: 0;
  564. }
  565. </style>