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

<template>
	<div style="position: relative; background: #fff">
		<div class="autoBox box1" style="position: relative">
			<div :class="$i18n.locale == 'zh' ? 'title-text' : 'title-text2'">
				<span class="title_span">{{ $t("common.RegionalNational") }}</span>
			</div>

			<div style="clear: both"></div>
		</div>
		<!-- <div >
						<ul>
								<li v-for="(item,index) in committeeInformationReleaseManagementInfos">
										<div style="margin: 20px 60px 20px 245px;" v-html="item.releaseInformationUe" v-if="item.moduleDict== '1AA'"></div>
										<div style="width: 100%;text-align: center;" v-if="item.moduleDict == '1AB'">
												<span class="title_Inteo">{{$t('common.ResponsibilitiesRegional')}}</span>
										</div>
										<div style="margin: 20px 60px 20px 245px;" v-html="item.releaseInformationUe" v-if="item.moduleDict == '1AB'"></div>
								</li>

								<li v-for="(item,index) in committeeInformationReleaseManagementInfos">
										<div style="margin: 20px 60px 20px 245px;" v-html="item.releaseInformationUe" v-if="item.moduleDict == '1BA'"></div>
										<div style="width: 100%;text-align: center;" v-if="item.moduleDict == '1BB'">
												<span class="title_Inteo">{{$t('common.ResponsibilitiesNational')}}</span>
										</div>

										<div style="margin: 20px 60px 20px 245px;" v-html="item.releaseInformationUe" v-if="item.moduleDict== '1BB'"></div>
								</li>
						</ul>
				</div> -->

		<div style="position: relative; height: 330px; width: 100%">
			<img
					src="@/assets/img/nationaIntorduction/nationLeft.png"
					alt=""
					style="height: 330px; float: left; width: 100%"
			/>
			<div
					style="z-index: 99; transform: translateX(-104%); width: 530px"
					:style="
          $i18n.locale == 'zh'
            ? 'position: absolute;left: 50%;top: 80px;'
            : 'position: absolute;left: 50%;top: 50px;'
        "
			>
				<div class="IntroductionCommittee">
					{{ $t("common.RegionalCommittees") }}
				</div>
				<div class="IntroductionCommittee2">
					{{ $t("common.RegionalCommitteesContent") }}
				</div>
			</div>
			<img
					src="@/assets/img/nationaIntorduction/nationRight.png"
					alt=""
					style="height: 330px; transform: translateY(-330px); width: 100%"
			/>
		</div>
		<div class="autoBox box1" style="position: relative">
			<div style="width: 100%; text-align: center">
				<span class="title_Inteo">{{ $t("common.Responsibilities") }}</span>
			</div>
			<div style="margin-top: 50px; margin-left: 35px; position: relative">
				<img
						src="@/assets/img/nationaIntorduction/hexagon1.png"
						alt=""
						class="IntroductionImg"
				/>
				<img
						src="@/assets/img/nationaIntorduction/hexagon2.png"
						alt=""
						class="IntroductionImg"
				/>
				<img
						src="@/assets/img/nationaIntorduction/hexagon3.png"
						alt=""
						class="IntroductionImg"
				/>
				<img
						src="@/assets/img/nationaIntorduction/hexagon4.png"
						alt=""
						class="IntroductionImg"
				/>
				<img
						src="@/assets/img/nationaIntorduction/hexagon5.png"
						alt=""
						class="IntroductionImg"
				/>
				<div v-for="(item, index) in introduce" class="introduceItem">
					<div class="introduce_title">{{ $t(item.title) }}</div>
					<div class="introduce_lable">{{ $t(item.lable) }}</div>
				</div>
			</div>
			<div style="clear: both"></div>
		</div>
		<div style="position: relative; height: 330px; width: 100%">
			<img
					src="@/assets/img/nationaIntorduction/nationBottom.png"
					alt=""
					style="margin-left: -18px; height: 330px; float: left; width: 100%"
			/>
			<div
					style="transform: translateX(9%); z-index: 99; width: 530px"
					:style="
          $i18n.locale == 'zh'
            ? 'position: absolute;left: 50%;top: 80px;'
            : 'position: absolute;left: 50%;top: 50px;'
        "
			>
				<div class="IntroductionCommittee1">
					{{ $t("common.NationalIntroduction") }}
				</div>
				<div
						class="IntroductionCommittee2"
						:style="$i18n.locale == 'zh' ? 'text-indent:2em' : ''"
						style="
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 5;
          "
				>
					{{ $t("common.AsImportantParts") }}
				</div>
			</div>
		</div>
		<div class="autoBox box1" style="position: relative">
			<div style="width: 100%; text-align: center">
        <span  class="title_Inteo">{{
		        $t("common.NationalResponsibilities")
	        }}</span>
			</div>
			<div class="duty">
				<div class="Workspace" @click="toCommitteeWorkSpace"></div>
				<div class="Information" @click="toInformation"></div>
				<ul>
					<li v-for="(item, index) in duty">
						<img
								:src="getIconUrl(index)"
								alt=""
								style="width: 100px; height: 100px"
						/>
						<div :class="$i18n.locale == 'zh' ? 'duty_title' : 'duty_title_en'">
							{{ $t(item.title) }}
						</div>
						<div :class="$i18n.locale == 'zh' ? 'duty_lable' : 'duty_lable_en'">
							{{ $t(item.lable) }}
						</div>
					</li>
				</ul>
			</div>
			<div style="clear: both"></div>
		</div>

<!--		<div @click="toCommitteeWorkSpace" class="fixed">-->
<!--			<img-->
<!--					style="z-index: 10"-->
<!--					class="Img"-->
<!--					:src="require('@/assets/img/nationaIntorduction/box1.png')"-->
<!--					alt=""-->
<!--			/>-->
<!--			<div class="workspace">-->
<!--        <span>-->
<!--          {{ $t("common.RegionalWorkspace") }}-->
<!--        </span>-->
<!--			</div>-->
<!--		</div>-->
	</div>
</template>
<script>
import {getAllReleaseManagementInfos} from "@/api/committee/committeeInformationReleaseManagementInfo";
import {getWorkSpacePermission} from "@/api/committee/nrc";

export default {
	name: "NationalregionalCommissions",

	data() {
		return {
			committeeInformationReleaseManagementInfos: [],
			introduce: [
				{
					title: "common.SpreadingConcept",
					lable: "common.CarryingOut",
				},
				{
					title: "common.BuildingPlatform",
					lable: "common.BuildingARegional",
				},
				{
					title: "common.PromotingTransnational",
					lable: "common.CoordinatingAndContacting",
				},
				{
					title: "common.CarryingThematic",
					lable: "common.BasedOn",
				},
				{
					title: "common.StrengtheningDailyContact",
					lable: "common.StrengtheningDaily",
				},
			],
			duty: [
				{
					img: "/assets/img/nationaIntorduction/countryDuty1.png",
					title: "common.SpreadingConcept",
					lable: "common.Carryingout",
				},
				{
					img: "/assets/img/nationaIntorduction/countryDuty2.png",
					title: "common.BuildingPlatform",
					lable: "common.Buildingplatformenergy",
				},
				{
					img: "/assets/img/nationaIntorduction/countryDuty3.png",
					title: "common.PromotingCooperated",
					lable: "common.Cooperatingandsupporting",
				},
				{
					img: "/assets/img/nationaIntorduction/countryDuty4.png",
					title: "common.CarryingThematic",
					lable: "common.Basedonactual",
				},
				{
					img: "/assets/img/nationaIntorduction/countryDuty5.png",
					title: "common.StrengtheningDailyContact",
					lable: "common.Strengthendailycontact",
				},
			],
		};
	},
	watch: {
		"$i18n.locale"() {
			this.initData();
		},
	},
	mounted() {
		this.initData();
	},
	methods: {
		getIconUrl(index) {
			return require("@/assets/img/nationaIntorduction/countryDuty" +
					Number(index + 1) +
					".png");
		},
		initData() {
			let page = {
				language: this.$i18n.locale.toUpperCase(),
			};
			getAllReleaseManagementInfos(page).then((res) => {
				var data = res.data;
				if (data) {
					this.committeeInformationReleaseManagementInfos =
							res.data.committeeInformationReleaseManagementInfos || [];
				}
				console.log(res);
			});
		},
		realTimeInfoScreen(i, index) {
			this.screenIndex = index;
			this.Screens = i.lable;
		},

		toCommitteeWorkSpace() {
			getWorkSpacePermission().then(res => {
				if(res.data == 1){
					this.$emit("showWorkSpace", "workspace");
				}else {
					if(this.$i18n.locale == 'en'){
						this.$message.error("The User Does Not Have Access Permission");
					}else {
						this.$message.error("该账户没有访问权限");
					}
					return
				}
			})

		},
		toInformation() {
			this.$emit("showWorkSpace", "information");
		},
	},
};
</script>
<style scoped>
.Workspace{
	width: 30px;
	height: 30px;
	/*background: red;*/
	position: absolute;
	left: 48%;
	bottom: 16%;
}
.Information{
	width: 30px;
	height: 30px;
	/*background: green;*/
	position: absolute;
	right:15%;
	bottom: 23%;
}
body {
	background-color: #fff;
}

.box1 {
	background: #fff;
	/* height: 500px; */
	padding: 20px 0;
	position: absolute;
}

.crumbs {
	margin-left: 20px;
}

.screen1 {
	color: #2c5589;
}

.screen2 {
	font-size: 14px;
	color: #bebebe;
}

.title-text span,
.title-text2 span {
	display: block; /*设置为块级元素会独占一行形成上下居中的效果*/
	position: relative; /*定位横线（当横线的父元素）*/
	text-align: center;
}

.title-text span:before,
.title-text span:after {
	content: "";
	position: absolute; /*定位背景横线的位置*/
	top: 50%;
	background: #c3c8d8; /*背景横线颜色*/
	width: 35%; /*单侧横线的长度*/
	height: 1px;
}

.title-text2 span:before,
.title-text2 span:after {
	content: "";
	position: absolute; /*定位背景横线的位置*/
	top: 50%;
	background: #c3c8d8; /*背景横线颜色*/
	width: 22%; /*单侧横线的长度*/
	height: 1px;
}

.title-text span:before,
.title-text2 span:before {
	left: 2%; /*调整背景横线的左右距离*/
}

.plate::after,
.plateCountry::after {
	content: "...";
	position: absolute;
	bottom: 0;
	right: 0;
	padding-left: 0px;
	background: -webkit-linear-gradient(left, transparent, #fff 55%);
	background: -o-linear-gradient(right, transparent, #fff 55%);
	background: -moz-linear-gradient(right, transparent, #fff 55%);
	background: linear-gradient(to right, transparent, #fff 55%);
}

.plateCountry::after {
	bottom: 10px;
}

.title-text span:after,
.title-text2 span:after {
	right: 2%;
}

.title_span {
	font-size: 30px;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #000000;
	line-height: 56px;
}

.IntroductionCommittee {
	font-size: 30px;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #ffffff;
	line-height: 45px;
	border-bottom: 1px solid #507474;
	padding-bottom: 10px;
}

.IntroductionCommittee1 {
	font-size: 30px;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #ffffff;
	line-height: 45px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	padding-bottom: 10px;
}

.IntroductionCommittee2 {
	text-indent: 2em;
	margin-top: 20px;
	font-size: 16px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #ffffff;
	line-height: 28px;
}

.title_Inteo {
	font-size: 30px;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #333333;
	line-height: 30px;
}

.IntroductionImg {
	width: 384px;
	height: 384px;
	opacity: 1;
}

.IntroductionImg:hover {
	opacity: 1.5;
	transform: rotateY(360deg);
}

.IntroductionImg:nth-of-type(4),
.IntroductionImg:nth-of-type(5) {
	transform: translateX(184px) translateY(-50px);
	/* transform: ; */
}

.introduceItem {
	width: 280px;
}

.introduceItem:nth-of-type(1) {
	position: absolute;
	left: 54px;
	top: 97px;
}

.introduceItem:nth-of-type(2) {
	position: absolute;
	left: 437px;
	top: 97px;
}

.introduceItem:nth-of-type(3) {
	position: absolute;
	left: 820px;
	top: 97px;
}

.introduceItem:nth-of-type(4) {
	position: absolute;
	left: 235px;
	top: 430px;
}

.introduceItem:nth-of-type(5) {
	position: absolute;
	left: 620px;
	top: 430px;
}

.introduce_title {
	font-size: 20px;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #333333;
	line-height: 24px;
	text-align: center;
}

.introduce_lable {
	margin-top: 15px;
	font-size: 16px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #333333;
	line-height: 24px;
	text-align: center;
}

.duty ul {
	display: flex;
	justify-content: space-between;
	margin: 30px 10px;
}

.duty li {
	float: left;
	width: 230px;
	text-align: center;
}

.duty_title {
	margin-top: 20px;
	font-size: 20px;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #333333;
	line-height: 24px;
	font-size: 20px;
	height: 30px;
	/*overflow: hidden;*/
	/*text-overflow: ellipsis;*/
	/*display: -webkit-box;*/
	/*-webkit-box-orient: vertical;*/
	/*-webkit-line-clamp:2;*/
}

.duty_title_en {
	margin-top: 20px;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #333333;
	text-align: left;
	line-height: 24px;
	font-size: 18px;
	height: 70px;
}

.duty_lable {
	font-size: 16px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #333333;
	line-height: 24px;
	text-align: left;
	margin-top: 15px;
}

.duty_lable_en {
	font-size: 14px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #333333;
	line-height: 24px;
	text-align: left;
	margin-top: 15px;
}

.fixed {
	position: fixed;
	/* top: 0; */
	/* left: 0; */
	bottom: 0;
	right: 0;
}

.Img {
	margin-right: 70px;
	margin-bottom: 80px;
	/* display: inline-block; */
	transform: scale(0.3);
}

.workspace {
	position: fixed;
	/* top: 0; */
	/* left: 0; */
	bottom: 18%;
	right: 9%;
}

.workspace span {
	font-family: "PingFang SC";
	font-style: normal;
	font-weight: 500;
	font-size: 20px;
	line-height: 28px;
	color: #417cd9;
}
</style>