123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434 |
- <template>
- <div class="autoBox box" style="min-height: 900px;position: relative;">
- <div class="crumbs">
- <el-breadcrumb separator="/">
- <el-breadcrumb-item :to="{ path: 'home' }">{{ $t('common.Home') }}</el-breadcrumb-item>
- <el-breadcrumb-item>{{ $t('common.ExhibitionService') }}</el-breadcrumb-item>
- </el-breadcrumb>
- </div>
- <div class="top-pic" v-if="flag">
- <div class="ui-little-pic">
- <ul class="ui-big-pics">
- <li @click="picOne(item)" v-for="(item, index) in exhibitionInfo" :key="index"
- :class="[isactive ? styleClass[index] : '']"><span class="ui-big-text">{{ item.name }}</span>
- </li>
- </ul>
- </div>
- <div class="ui-big-pic">
- <ul>
- <li><img :src="picUrl" alt="" class="user-pic"></li>
- </ul>
- <el-button v-show="$i18n.locale == 'en'" round class="ui-btn" @click="toDetail">View details</el-button>
- <el-button v-show="$i18n.locale == 'zh'" round class="ui-btn" @click="toDetail">查看详情</el-button>
- </div>
- </div>
- <div style="margin-top: 20px;margin-left: 10px;" >
- <div class="relevanInformation">
- <div class="informationTitle informationTitleAfter">
- <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt=""
- style="height: 20px;vertical-align: middle;">
- {{ $t('common.ExhibitionServiceInfo') }}
- </div>
- </div>
- </div>
- <div class="ui-bottom-pic">
- <div class="ui-bottom-big-pic" @click="toBig">
- <div class="ui-big-pic-left">
- <img src="@/assets/img/exhibition/Rectangle 81.png" alt="" class="user-pic" title="点击进入展厅">
- </div>
- <div class="pic-text-1" v-if="$i18n.locale == 'zh'">全球能源互联网展厅</div>
- <div class="pic-text-1" v-if="$i18n.locale == 'en'">Global Energy Internet Exhibition hall</div>
- </div>
- <div class="ui-bottom-little-pic">
- <div class="ui-little-pic-top" @click="toBig">
- <div class="ui-little-pic-right-top">
- <img src="@/assets/img/exhibition/Rectangle 82.png" alt="" class="user-pic" title="点击进入展厅">
- </div>
- <div class="pic-text-2" v-if="$i18n.locale == 'zh'">全球共识1</div>
- <div class="pic-text-2" v-if="$i18n.locale == 'en'">Global Consensus 1</div>
- </div>
- <div class="ui-little-pic-bottom" @click="toBig">
- <div class="ui-little-pic-right-bottom">
- <img src="@/assets/img/exhibition/Rectangle 83.png" alt="" class="user-pic" title="点击进入展厅">
- </div>
- <div class="pic-text-3" v-if="$i18n.locale == 'zh'">全球共识2</div>
- <div class="pic-text-3" v-if="$i18n.locale == 'en'">Global Consensus 2</div>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import { ExhibitionLists } from '@/api/exhibition'
- export default {
- name: "exhibitionService2",
- data() {
- return {
- data: {},
- exhibitionInfo: [],
- firstPicUrl: '',
- firstDetail: '',
- firstInfo: '',
- picUrl: null,
- picId: null,
- three1: null,
- styleClass: [
- 'first-class',
- 'second-class',
- 'third-class',
- 'four-class',
- 'five-class'
- ],
- isactive: true,
- flag: false,
- }
- },
- mounted() {
- this.initDatas()
- },
- watch: {
- '$i18n.locale'() {
- this.initDatas();
- },
- },
- methods: {
- load() {
- console.log('..');
- },
- picOne(item) {
- console.log(item);
- this.picUrl = 'api/file/pub/' + item.picture
- this.picId = item.id
- this.three1 = item.extendThree
- },
- toDetail() {
- let picId = this.picId
- let three1 = this.three1
- console.log(picId, three1, '参数1');
- if (!picId == '') {
- this.$router.push({
- name: 'exhibitionServiceDetail', params: {
- id: picId,
- three1: three1
- }
- });
- } else {
- let picId = this.firstDetail
- let three1 = this.firstInfo
- console.log(picId, three1, '参数2');
- this.$router.push({
- name: 'exhibitionServiceDetail', params: {
- id: picId,
- three1: three1
- }
- });
- }
- },
- initDatas() {
- let params = {
- pageSize: 10,
- pageNo: 1,
- extendFour: this.$i18n.locale.toUpperCase()
- }
- ExhibitionLists(params).then((res) => {
- // console.log(res);
- this.data = res.data
- if (res.data.exhibitionManagementLists) {
- this.flag = true
- } else {
- this.flag = false
- }
- this.exhibitionInfo = res.data.exhibitionManagementLists
- this.firstPicUrl = res.data.exhibitionManagementLists[0].picture
- this.firstDetail = res.data.exhibitionManagementLists[0].id
- this.firstInfo = res.data.exhibitionManagementLists[0].extendThree
- // console.log(this.firstPicUrl, '图片地址');
- this.picUrl = 'api/file/pub/' + this.firstPicUrl
- })
- },
- toBig() {
- window.open('http://tour.quanjingke.com/xiangmu/quanqiunengyuan_vtour_v7/index.html');
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .box {
- margin-top: 10px;
- background: #fff;
- /* height: 500px; */
- padding: 20px 0;
- .crumbs {
- margin-left: 20px;
- }
- }
- .user-pic {
- width: 100%;
- height: 100%;
- }
- .top-pic {
- display: flex;
- justify-content: space-between;
- padding: 30px 10px;
- .ui-little-pic {
- width: 26%;
- height: 432px;
- overflow: hidden;
- .ui-big-pics {
- width: 100%;
- height: 432px;
- overflow: hidden;
- }
- }
- .ui-big-text {
- display: inline-block;
- color: #fff;
- width: 90%;
- margin-left: 5%;
- height: 80px;
- line-height: 80px;
- text-align: center;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- .first-class {
- display: inline-block;
- width: 98%;
- height: 80px;
- margin-bottom: 8px;
- background-image: url('~@/assets/img/bgImg/Group 95.png');
- background-size: 100% 100%;
- }
- .first-class:hover {
- display: inline-block;
- width: 98%;
- height: 80px;
- margin-bottom: 8px;
- background-image: url('~@/assets/img/bgImg/Group 96.png');
- background-size: 100% 100%;
- }
- .second-class {
- display: inline-block;
- width: 98%;
- height: 80px;
- margin-bottom: 8px;
- background-image: url('~@/assets/img/bgImg/Group 99.png');
- background-size: 100% 100%;
- }
- .second-class:hover {
- display: inline-block;
- width: 98%;
- height: 80px;
- margin-bottom: 8px;
- background-image: url('~@/assets/img/bgImg/Group 96.png');
- background-size: 100% 100%;
- }
- .third-class {
- display: inline-block;
- width: 98%;
- height: 80px;
- margin-bottom: 8px;
- background-image: url('~@/assets/img/bgImg/Group 101.png');
- background-size: 100% 100%;
- }
- .third-class:hover {
- display: inline-block;
- width: 98%;
- height: 80px;
- margin-bottom: 8px;
- background-image: url('~@/assets/img/bgImg/Group 96.png');
- background-size: 100% 100%;
- }
- .four-class {
- display: inline-block;
- width: 98%;
- height: 80px;
- margin-bottom: 8px;
- background-image: url('~@/assets/img/bgImg/Group 102.png');
- background-size: 100% 100%;
- }
- .four-class:hover {
- display: inline-block;
- width: 98%;
- height: 80px;
- margin-bottom: 8px;
- background-image: url('~@/assets/img/bgImg/Group 96.png');
- background-size: 100% 100%;
- }
- .five-class {
- display: inline-block;
- width: 98%;
- height: 80px;
- margin-bottom: 8px;
- background-image: url('~@/assets/img/bgImg/Group 103.png');
- background-size: 100% 100%;
- }
- .five-class:hover {
- display: inline-block;
- width: 98%;
- height: 80px;
- margin-bottom: 8px;
- background-image: url('~@/assets/img/bgImg/Group 96.png');
- background-size: 100% 100%;
- }
- .ui-big-pic {
- width: 73%;
- margin-bottom: 8px;
- height: 432px;
- overflow: hidden;
- }
- .ui-btn {
- width: 127px;
- z-index: 999;
- margin-left: 50%;
- transform: translateX(-50%) translateY(-338%);
- }
- .ui-big-pic ul li {
- width: 100%;
- height: 432px;
- }
- }
- .relevanInformation {
- padding: 0;
- overflow: hidden;
- .informationTitle {
- // border-bottom: 1px solid #2C558A;
- padding: 0 0 10px 0;
- font-weight: 600;
- font-size: 20px;
- opacity: 0.9;
- }
- .informationTitleAfter {
- position: relative;
- }
- }
- .ui-bottom-pic {
- padding: 10px;
- display: flex;
- justify-content: space-between;
- height: 370px;
- margin-bottom: 30px;
- .ui-bottom-big-pic {
- width: 54%;
- overflow: hidden;
- .ui-big-pic-left {
- height: 370px;
- width: 100%;
- }
- .ui-big-pic-left:hover+.pic-text-1 {
- transform: translateY(-30px);
- transition: 0.8s;
- }
- .pic-text-1 {
- height: 30px;
- line-height: 30px;
- padding-left: 35px;
- color: #fff;
- background-color: rgba(119, 118, 118, 0.8);
- }
- }
- .ui-bottom-little-pic {
- width: 45%;
- .ui-little-pic-top {
- height: 180px;
- overflow: hidden;
- margin-bottom: 10px;
- background-color: rgb(99, 184, 184);
- .ui-little-pic-right-top {
- height: 180px;
- }
- .ui-little-pic-right-top:hover+.pic-text-2 {
- transform: translateY(-30px);
- transition: 0.8s;
- }
- .pic-text-2 {
- height: 30px;
- line-height: 30px;
- padding-left: 35px;
- color: #fff;
- background-color: rgba(119, 118, 118, 0.8);
- }
- }
- .ui-little-pic-bottom {
- height: 180px;
- overflow: hidden;
- .ui-little-pic-right-bottom {
- height: 180px;
- }
- .ui-little-pic-right-bottom:hover+.pic-text-3 {
- transform: translateY(-30px);
- transition: 0.8s;
- }
- .pic-text-3 {
- height: 30px;
- line-height: 30px;
- padding-left: 35px;
- color: #fff;
- background-color: rgba(119, 118, 118, 0.8);
- }
- }
- }
- }
- </style>
|