123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600 |
- <template>
- <div>
- <div>
- <IntroductionHeader style="position: absolute;left: 0;top: 0;width: 100%;z-index: 2;"></IntroductionHeader>
- <div style="width: 65%;z-index: 2;height: 60px;position: absolute;top: 90px;left: 25%;">
- <img src="@/assets/img/home/LOGO2020-12-22.png" alt="" style="height:100%" @click="toView('home')">
- </div>
- <div style="position: relative;width:100%">
- <img :src="getIconImg(img)" alt="" style="width: 100%;height: 600px;">
-
- <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;">
- {{$t(title)}}
- </div>
- <el-button
- type="success"
- round
- style="position:absolute;left:50%;top:85%;transform: translate(-50%,-89px);"
- @click="nextChange('IntroductionApplicationMembership')">
- {{$t('common.ApplyToJoin')}}
- </el-button>
- </div>
- </div>
- <div style="width: 100%;position: relative;">
-
- <div class="autoBox box">
- <!-- 面包屑导航 -->
- <div style="height: 30px;margin-left: 10px;" class="union">
- <el-breadcrumb separator="/" style="line-height: 30px;color: #0079ef !important;">
- <el-breadcrumb-item :to="{ path: 'home' }">{{$t('common.Home')}}</el-breadcrumb-item>
- <el-breadcrumb-item :to="{ path: 'IntroductionMemberProfile' }">
- {{$t('common.CooperationNetwork')}}
- </el-breadcrumb-item>
- <el-breadcrumb-item><span @click="toView('IntroductionMemberProfile','union')"
- style="font-weight: 700;cursor: pointer;">{{$t('common.IntroductionAlliances')}}</span>
- </el-breadcrumb-item>
- <el-breadcrumb-item>{{$t(title2)}}</el-breadcrumb-item>
- </el-breadcrumb>
- </div>
- <!-- 成立背景 -->
- <div style="width:100%">
- <div style="text-align:center;padding:30px 0">
- <span style="color: #0E4891;font-weight: 700;font-size: 30px;">{{$t('common.Histroy')}}</span>
- </div>
- <div style="text-align:center;padding:0 103px;color: #333333;font-size: 16px;line-height: 24px;">
- <p>{{$t(Details.label)}}</p>
- <p>{{$t(Details.value)}}</p>
- </div>
- <div style="text-align:center;">
- <img :src="getIconImg2(backgroundImg)" alt="" style="width:480px">
- </div>
- </div>
- <!-- 宗旨构成功能 -->
- <div style="width:100%;height:230px;display:flex;justify-content: space-between;flex-wrap: nowrap;margin-top:44px">
- <!-- 宗旨 -->
- <div style="width:30%;height:100%;overflow: hidden;text-overflow: ellipsis;white-space: normal;display: flex;">
- <div style="width: 85%;height: 100%;margin: auto;overflow: hidden;text-overflow: ellipsis;
- background-color: #f4f9ff;padding: 10px 10px;">
- <div style="text-align:center;font-weight: 600;color: #0E4891;line-height: 28px;font-size: 20px;">
- <div class="title">
- <span class="title-text"><span>{{$t('common.Aims')}}</span></span>
- </div>
- </div>
- <p style="font-size: 14px;font-weight: 400;color: #333333;line-height: 20px;">{{$t(Details.establishment)}}</p>
- </div>
-
- </div>
- <!-- 构成 -->
- <div style="width:30%;height:100%;overflow: hidden;text-overflow: ellipsis;white-space: normal;display: flex;">
- <div style="width: 85%;height: 100%;margin: auto;overflow: hidden;text-overflow: ellipsis;background-color: #f4f9ff;padding: 10px 10px;">
- <div style="text-align:center;font-weight: 600;color: #0E4891;line-height: 28px;font-size: 20px;">
- <div class="title">
- <span class="title-text"><span>{{$t('common.Constitute')}}</span></span>
- </div>
- </div>
- <p style="font-size: 14px;font-weight: 400;color: #333333;line-height: 20px;">{{$t(Details.purpose)}}</p>
- </div>
-
- </div>
- <!-- 功能 -->
- <div style="width:30%;height:100%;overflow: hidden;text-overflow: ellipsis;white-space: normal;display: flex;">
- <div style="width: 85%;height: 100%;margin: auto;overflow: hidden;text-overflow: ellipsis;background-color: #f4f9ff;padding: 10px 5px 0 10px;">
- <div style="text-align:center;font-weight: 600;color: #0E4891;line-height: 28px;font-size: 20px;">
-
- <div class="title">
- <span class="title-text"><span>{{$t('common.Function')}}</span></span>
- </div>
- </div>
- <p style="font-size: 14px;font-weight: 400;color: #333333;line-height: 20px;">{{$t(Details.Alliance)}}</p>
- </div>
- </div>
- </div>
- <!-- 联盟活动 -->
- <div style="width:100%">
- <div style="text-align:center;padding:30px 0">
- <span style="color: #0E4891;font-weight: 700;font-size: 30px;">{{$t('common.Activities')}}</span>
- </div>
- <div style="padding-top: 10px;" class="AllianceActivities">
- <div v-for="(item,index) in AllianceActivities" :key="index" class="Activities">
- <div>
- <img :src="getIconImg3('all' + (index+1)+ '.png')" alt="" style="width: 100%;height: 100%;">
- </div>
- <div class="Alliancetitle">
- <div :style="detailBackColor" style="width:92px;height:92px;border-radius:50%;margin: auto;text-align:center">
- <img :src="getIconImg3('activity' + (index+1)+ '.png')" alt=""
- style="height:40%;margin-top:30px">
- </div>
- <h3>{{$t(item.title)}}</h3>
- </div>
- <div class="AllianceDetail" :style="detailBackColor">
- <fieldset style="width:80%;margin:auto;border: 2px solid #fff;font-size: 24px;font-weight: 700;">
- <legend>{{$t(item.title)}}</legend>
- <div style="border:1px solid #fff;margin:auto;width:58px;margin-top:12px"></div>
- <p style="font-size: 14px;">
- {{$t(item.label)}}
- </p>
- </fieldset>
- </div>
- </div>
- </div>
- </div>
- <!-- 联盟成员 -->
- <div style="margin-left: 10px;padding-top: 10px;margin-bottom: 30px;" v-if="this.title!=='common.GoalEquipmentAlliance'">
- <span style="color: #3a6295;font-weight: 700;margin-left: 5px;">{{$t('common.Member')}}</span>
- </div>
- <div style="margin: 20px;color: #666;font-size: 14px;" class="continents" v-if="index!==3">
- <ul>
- <li class="cursor" v-for="(item,index) in list"
- @click="toViewDetails('IntroductionLeagueMemberDetails',item)">
- <img v-if="memberUnits[item.unitId]"src="@/assets/img/introductionCooperation/profile.png" alt="" style="vertical-align: middle;">
- {{$i18n.locale=='zh'?item.unitZhName:item.unitEnName}}
- </li>
- </ul>
- </div>
- <div style="width: 100%;position: relative;height: 100px;" v-if="index!=3">
- <el-pagination
- style="height: 80px;position: absolute;left: 50%;top: 100px;transform: translate(-50%,-50%);"
- background
- layout="prev, pager, next"
- :page-size=45
- :total=total-0
- @current-change="handleCurrentChange">
- </el-pagination>
- </div>
- </div>
- </div>
- <el-dialog
- :title="$i18n.locale=='zh'?'提示':'Reminder'"
- :visible.sync="toViewLogin"
- :width="$i18n.locale=='zh'?'500px':'750px'"
- :height="$i18n.locale=='zh'?'300px':'386px'"
- :before-close="toViewLoginChange">
- <div style="width: 100%;height: 100%;">
- <img src="@/assets/img/loginTips.png" alt="" style="width: 180px;height: 180px;margin-left: 20px;">
- <div style="float: right;margin-right: 20px;" :style="$i18n.locale=='zh'?'width: 49%;margin-top: 10px;':'width: 453px;margin-top: -25px;'">
- <div style="font-size: 20px;font-weight: normal;color: #333333;font-family: HiraginoSansGB-W3, HiraginoSansGB;line-height: 40px;">
- {{$t('common.ReminderFirst')}}
- </div>
- <div style="font-size: 16px;font-family: HiraginoSansGB-W3, HiraginoSansGB;font-weight: normal;color: #666666;line-height: 30px;">
- {{$t('common.ReminderSecond')}} <span style="color: #0091FF;font-size: 18px;">{{num}}</span> {{$t('common.ReminderThird')}}
- </div>
- <div style="font-size: 14px;font-family: HiraginoSansGB-W3, HiraginoSansGB;font-weight: normal;color: #666666;line-height: 30px;">
- {{$t('common.ReminderForth')}}
- </div>
- <div style="font-size: 14px;font-family: HiraginoSansGB-W3, HiraginoSansGB;height:33px;line-height:60px;font-weight: normal;color: #0091FF;">
- <span style="margin-left: 40px;" class="cursor" @click="toView('login')">
- {{$t('common.ReminderFifth')}}
- </span>
- <span style="margin-left: 10px;" class="cursor" @click="toView('Register')">{{$t('common.ReminderSixth')}}</span>
- </div>
- </div>
- </div>
- </el-dialog>
- <footers></footers>
- </div>
- </template>
- <script>
- import Base from "@/views/base/Base";
- import IntroductionHeader from '@/views/introductionCooperation/IntroductionHeader.vue'
- import footers from '@/components/footers'
- import {getLeagueMemberByName} from '@/api/leagueMember/leagueMember'
- import {getMemberLeagueUnit} from '@/api/baseContactsInfo'
- import {gateGetUnitViewById} from "@/api/baseUnitView";
- import Screen from '@/components/screen'
- import { get } from '../../api/baseUnitView';
- export default {
- name: 'IntroductionEquipmentAlliance',
- components: {IntroductionHeader, footers},
- extends: Base,
- data() {
- return {
- index: this.$route.query.id,
- img: '',
- total:0,
- title: '',
- title2: '',
- Details: {},
- timer:'',
- num:5,
- detailBackColor:'',
- backgroundImg: "",
- page: {
- pageSize: 45,
- pageNo: 1,
- unitZhName: null,
- unitEnName:null,
- leagueName: null,
- language: null,
- },
- input: '',
- initData: {
- label: ' 为发挥高校在科研、教育、学术交流等方面的优势和积极性,坚持资源共享、协同创新、互利共赢,为全球能源互联网发展提供技术创新、人才培养和理念传播等方面的支撑,服务全球能源互联网战略落地,服务世界能源变革转型,服务人类社会可持续发展。全球能源互联网发展合作组织(以下简称“合作组织”)发起成立全球能源互联网大学联盟(以下简称“大学联盟”)。',
- },
- AllianceActivities: [{
- img: '@/assets/img/introductionCooperation/AllianceActivities.png',
- title: 'common.ProfessionalActivities',
- label: "common.ProfessionalLable"
- }, {
- img: '@/assets/img/introductionCooperation/AllianceActivities2.png',
- title: 'common.event',
- label: "common.eventLable"
- }, {
- img: '@/assets/img/introductionCooperation/AllianceActivities3.png',
- title: 'common.OtherActivities',
- label: "common.OtherLable"
- }],
- list: [],
- zhLeagueName:'',
- toViewLogin: false,
- memberUnits:{}
- }
- },
- created() {
- },
- props:{
- pageSize:{
- type:Number,
- default: 0,
- }
- },
- watch:{
- "$i18n.locale"() {
- this.initLeagueData();
- this.getInitData();
- },
- "toViewLogin"(){
- if(this.toViewLogin==true){
- this.loginTipsChange();
- }
- }
- },
- mounted() {
- this.initLeagueData();
- this.getInitData();
- this.$nextTick(() => {
- });
- },
- methods: {
- loginTipsChange(){
- const that=this;
- this.num =5;
- // clearInterval(timer_interval);
- this.timer = setInterval(function() {
- if (that.num > 0) {
- that.num--;
- } else {
- if(that.toViewLogin==true){
- clearInterval(that.timer);
- that.toView('login');
- }else {
- clearInterval(that.timer);
- }
- }
- }, 1000)
- },
- toViewLoginChange(done){
- this.toViewLogin=false;
- this.num=5;
- clearInterval(this.timer);
- },
- initLeagueData(){
- if (this.index == 0) {
- this.title = 'common.GoalUniversityAlliance';
- this.title2 = this.$i18n.locale ==='zh'?'大学联盟':'University Alliance';
- this.zhLeagueName = '大学联盟';
- this.Details = {
- label: "common.GoalUniversitylabel",
- value: 'common.GoalUniversityvalue',
- establishment:'common.Universityestablishment',
- purpose:'common.Universitypurpose',
- Alliance:'common.UniversityAlliances',
- }
- this.backgroundImg = 'university.png';
- this.img = 'IntroductionUniversity.png';
- this.detailBackColor='background: rgb(22 111 228 / 0.7);';
- } else if (this.index == 1) {
- this.title = 'common.GoalThinkTankAlliance';
- this.title2 = this.$i18n.locale ==='zh'?'智库联盟':'Think Tank Alliance';
- this.zhLeagueName = '智库联盟';
- this.Details = {
- label: "common.GoalThinkTanklabel",
- value: 'common.GoalThinkTankvalue',
- establishment:'common.ThinkTankestablishment',
- purpose:'common.ThinkTankpurpose',
- Alliance:'common.ThinkTankAlliances',
- }
- this.backgroundImg = 'Thinkanks.png'
- this.img = 'IntroductionThinkTanks.png';
- this.detailBackColor='background: rgb(81 158 1 / 0.7);';
- } else if (this.index == 2) {
- this.title = 'common.GoalFinancialUnion';
- this.title2 = this.$i18n.locale ==='zh'?'金融联盟':'Financial Alliance';
- this.zhLeagueName = '金融联盟';
- this.Details = {
- label: "common.GoalFinanciallabel",
- value: 'common.GoalFinancialvalue',
- establishment:'common.Financialestablishment',
- purpose:'common.Financialpurpose',
- Alliance:'common.FinancialAlliances',
- }
- this.backgroundImg = 'finances.png'
- this.img = 'IntroductionFinance.png';
- this.detailBackColor='background: rgb(214 146 0 / 0.7);';
- } else if (this.index == 3) {
- this.title = 'common.GoalEquipmentAlliance';
- this.title2 = this.$i18n.locale ==='zh'?'装备联盟':'Equipment Alliance';
- this.zhLeagueName = '装备联盟';
- this.Details = {
- label: "common.GoalEquipmentlabel",
- value: 'common.GoalEquipmentvalue',
- establishment:'common.Equipmentestablishment',
- purpose:'common.Equipmentpurpose',
- Alliance:'common.EquipmentAlliances',
- }
- this.backgroundImg = 'equipments.png'
- this.img = 'IntroductioneEuipment.png';
- this.detailBackColor='background: rgb(46 162 128 / 0.7);';
- }
- },
- getInitData() {
- this.getLeagueMemberByName();
- },
- getLeagueMemberByName: function () {
- this.page.language = this.$i18n.locale.toUpperCase();
- this.page.leagueName = this.zhLeagueName;
- if(this.title=='common.GoalEquipmentAlliance'){
- return;
- }
- //this.page.leagueMemberName='';
- getLeagueMemberByName(this.page).then(result => {
- var data = result.data;
- if (data) {
- this.list = data.baseLeagueMembers || [];
- this.memberUnits = data.memberUnits
- this.total=data.page.totalCount;
-
- }
- })
- },
- getData() {
- if(this.$i18n.locale ==='zh'){
- this.page.unitZhName = this.input
- }else {
- this.page.unitEnName = this.input
- }
- getLeagueMemberByName(this.page).then(result => {
- var data = result.data;
- if (data) {
- this.list = data.baseLeagueMembers || [];
- }else {
- this.list = []
- }
- })
- },
- handleCurrentChange(val) {
- this.page.pageNo = val;
- this.getLeagueMemberByName();
- },
- getIconImg(url) {
- return require("@/assets/img/introductionCooperation/" + url);
- },
- getIconImg2(url) {
- return require("@/assets/img/introductionCooperation/" + this.backgroundImg);
- },
- getIconImg3(url) {
- return require("@/assets/img/introductionCooperation/" + url);
- },
- toViewDetails(router, json) {
- gateGetUnitViewById(json.unitId,this.$i18n.locale.toUpperCase()).then(res => {
- var data = res.data;
- if(data){
- var baseUnitView = res.data.baseUnitView;
- if(baseUnitView.showable == '1'){
- this.$store.commit('modify', 'enterpriseDetails');
- window.localStorage.setItem('router', 'enterpriseDetails');
- const { href } = this.$router.resolve({
- name: 'enterpriseDetails',
- query: {
- key: json.unitId
- }
- });
- window.open(href, '_blank');
- }else{
- if(data.isMember != undefined ){
- let member ={
- memberNameZh: data.isMember.memberNameZh,
- memberNameEn:data.isMember.memberNameEn,
- unitId:data.isMember.unitId,
- }
- this.$store.commit('modify', 'IntroductionPresentationDetails');
- window.localStorage.setItem('router', 'IntroductionPresentationDetails');
- const { href } = this.$router.resolve({
- name: 'IntroductionPresentationDetails',
- query: {
- key: data.isMember.id,
- member: JSON.stringify(member)
- }
- });
- window.open(href, '_blank');
- }else{
- if(json.showFlag === 'y'){
- this.$store.commit('modify', router);
- window.localStorage.setItem('router', router);
- const { href } = this.$router.resolve({
- name: router,
- query: {
- key: json.id,
- }
- });
- window.open(href, '_blank');
- }else if(baseUnitView.officialWebsitePath){
- var url = baseUnitView.officialWebsitePath;
- if(url.indexOf('http') == -1){
- url = 'http://' + url
- }
- window.open(url,'_blank')
- }else{
- return
- }
- }
- }
- }
- })
- },
- nextChange(){
- if (!this.$Cookies.get('token')) {
- // this.$message.warning("请先登录");
- // this.$confirm('检测到您未登录,是否登录')
- // .then(_ => {
- // this.toView('login');
- // })
- // .catch(_ => {});
- this.toViewLogin=true;
- } else {
- this.toView('IntroductionApplicationMembership')
- }
- },
- toView(router, json) {
- this.$store.commit('modify', router);
- this.$router.push({name: router, query: {key: json}});
- },
- mouseOver(index) {
- console.log(index)
- this.$refs[`mouse${index}`][0].style.display = 'block';
- },
- mouseLeave(index) {
- console.log(index)
- this.$refs[`mouse${index}`][0].style.display = 'none';
- }
- }
- }
- </script>
- <!-- Add "scoped" attribute to limit CSS to this component only -->
- <style scoped>
- body {
- margin: 0;
- }
- .box, .box2, .box3 {
- width: 1200px;
- /* height: 360px;
- */
- margin: auto;
- position: relative;
- border-bottom: 1px solid #fff;
- background-color: #fff;
- /* background-color: #000; */
- }
- .AllianceActivities {
- text-align: top;
- display: flex;
- display: -webkit-flex; /* Safari */
- justify-content: space-between;
- flex-wrap: wrap;
- padding: 30px 10px;
- }
- .AllianceActivities .Activities {
- width: 32%;
- position: relative;
-
- }
- .continents ul {
- text-align: top;
- /*display: flex;*/
- /*display: -webkit-flex; !* Safari *!*/
- /*flex-wrap: wrap;*/
- /*padding-left: 40px;*/
-
- }
- .continents ul li {
- border: 1px solid #f1f1f1;
- display: inline-block;
- box-shadow: 5px 5px 5px #f1f1f1;
- margin-bottom: 10px;
- color: #2c558a;
- border-radius: 5px;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- width: 364px;
- margin-right: 10px;
- height: 35px;
- line-height: 35px;
- text-align: center;
- padding-left: 10px;
- }
- /*.continents ul li {*/
- /* border: 1px solid #f1f1f1;*/
- /* box-shadow: 5px 5px 5px #f1f1f1;*/
- /* margin-bottom: 10px;*/
- /* color: #5878a2;*/
- /* border-radius: 5px;*/
- /* width: 364px;*/
- /* height: 35px;*/
- /* line-height: 35px;*/
- /* text-align: left;*/
- /* padding-left: 10px;*/
- /*}*/
- .continents ul li:hover {
- border: 1px solid #e36844;
- }
- .continents ul li:active {
- background: #e36844;
- color: #fff;
- }
- .union >>> .el-breadcrumb__inner.is-link, .union >>> .el-breadcrumb__inner {
- color: #606266;
- }
- .Alliancetitle{
- width:100%;
- position: absolute;
- top: 25%;
- text-align: center;
- color: #fff;
- opacity: 1;
- }
- .AllianceDetail{
- position: absolute;
- left:0;
- top: 0;
- width:100%;
- height:100%;
- color: #fff;
- text-align: center;
- opacity: 0;
- display: flex;
- align-items: center;
- }
-
- .Activities:hover .AllianceDetail{
- opacity: 1;
- }
- .Activities:hover .Alliancetitle{
- opacity: 0;
- }
-
- </style>
|