school-web.git - Gitblit

			@@ -3,7 +3,7 @@
			* @Name: 社区迎新
			* @Date: 2021-11-15 17:14:47
			* @Last Modified by: Morpheus
			* @Last Modified time: 2022-01-13 17:39:35
			* @Last Modified time: 2022-01-14 17:22:55
			*/
			<template>
			<div>
			@@ -11,41 +11,31 @@
			<div class="header">
			<div class="title">
			{{ title }}
			<a href="javascript:void(0);" title="语音介绍">
			<img @click="audioPlay"
			class="audio-control"
			src="/img/navicon/audio.png"
			alt="">
			<a href="javascript:void(0);"
			title="全景浏览">
			<img @click="panoramaPlay"
			class="panorama-control"
			src="/img/icon/panorama.png"
			alt="">
			</a>
			<a href="javascript:void(0);" title="关闭">
			<img @click="closeMapPopupBox"
			class="close-box"
			src="/img/navicon/close.png"
			alt="">
			<a href="javascript:void(0);"
			title="语音介绍">
			<img @click="audioPlay"
			class="audio-control"
			src="/img/navicon/audio.png"
			alt="">
			</a>
			<a href="javascript:void(0);"
			title="关闭">
			<img @click="closeModel"
			class="close-box"
			src="/img/navicon/close.png"
			alt="">
			</a>
			</div>
			</div>
			<div class="content-box">
			<div class="text-introduce">
			<div class="title">
			相关介绍：
			</div>
			<div class="content">
			<p v-text="introduce">

			</p>
			</div>
			</div>
			<div class="organizer">
			主办：{{}}
			</div>
			<div class="undertake">
			承办：{{}}
			</div>
			<div class="img-exhibition">
			<div class="title">
			相关图片：
			</div>
			<div class="content">
			<el-carousel :interval="5000"
			arrow="always"
			@@ -59,11 +49,39 @@
			</el-carousel>
			</div>
			</div>
			<div class="operating-btn">
			<ul>
			<li>全景</li>
			<li>视频</li>
			</ul>
			<div class="organizer">
			主办：{{ sponsor }}
			</div>
			<div class="undertake">
			承办：{{ undertake }}
			</div>
			<div class="time-box">
			时间：{{ time }}
			</div>
			<div class="text-introduce">
			<div class="title">
			相关介绍：
			</div>
			<div class="content">
			<p v-text="introduce">

			</p>
			</div>
			</div>
			<div class="panorama-box" v-show="panoramaShow">
			<div class="title">
			全景浏览
			<a href="javascript:void(0);"
			title="关闭">
			<img @click="panoramaShow = false, panoramaUrl = ''"
			class="close-box"
			src="/img/navicon/close.png"
			alt="">
			</a>
			</div>
			<div class="content">
			<iframe :src="panoramaUrl" frameborder="0"></iframe>
			</div>
			</div>
			</div>
			</div>
			@@ -78,9 +96,9 @@
			export default {
			data () {
			return {
			data: [],
			time: '',
			num: 0,
			sponsor: '',
			undertake: '',
			title: '',
			introduce: '',
			list: [],
			@@ -89,7 +107,15 @@
			pointList: [],
			DC: null,
			pathLayer: null,
			pointLayer: null
			pointLayer: null,

			audioSource: '',
			audioFlag: false,
			audioCourse: false,
			audioSynth: null,
			audioMsg: null,

			panoramaShow: false
			}
			},
			created () {
			@@ -97,18 +123,28 @@
			},
			mounted () {
			this.DC = global.DC

			this.audioSynth = window.speechSynthesis

			this.audioMsg = new window.SpeechSynthesisUtterance()

			this.audioMsg.onend = function () {
			this.audioSynth.cancel()
			this.audioFlag = false
			this.audioCourse = false
			}

			getWelcome({ hdname: '社区迎新' }).then((res) => {
			var result = res.data.data
			this.title = result.hdname
			this.time = result.time
			this.sponsor = result.sponsor
			this.undertake = result.undertake
			this.introduce = result.context
			this.audioSource = result.context
			this.list = result.tpurl.split(',')
			this.pointNameList = result.addressname.split(',')
			this.pointList = result.address.split(';')

			this.list.forEach((item, index) => {
			var a = index + 1
			this.data.push(a)
			})

			var a = result.lx.split(';')

			@@ -184,6 +220,36 @@
			`
			)
			this.pointLayer.addOverlay(divIcon)
			},
			audioPlay () {
			if (this.audioFlag == false) {
			this.audioMsg.text = this.audioSource
			this.audioSynth.speak(this.audioMsg)
			this.audioFlag = true
			this.audioCourse = true
			} else {
			if (this.audioCourse == true) {
			this.audioSynth.pause()
			this.audioCourse = false
			} else {
			this.audioSynth.resume()
			this.audioCourse = true
			}
			}
			},
			closeModel () {
			this.viewer.removeLayer(this.pathLayer)
			this.viewer.removeLayer(this.pointLayer)

			this.audioSynth.cancel()
			this.audioFlag = false
			this.audioCourse = false

			this.$store.dispatch('delVisitedViews', this.$route)
			this.$router.push('/pcLayout/default')
			},
			panoramaPlay () {
			this.panoramaShow = true
			}
			}
			}
			@@ -196,27 +262,43 @@
			top: 132px;
			left: 132px;
			width: 480px;
			height: 620px;
			background: #2196f3;
			height: 720px;
			background: rgba(40, 187, 240, 0.7);
			border-radius: 10px;
			color: #fff;
			border: 1px solid #29baf1;
			box-shadow: 0 0 10px 2px #29baf1;

			.header {
			margin-bottom: 10px;
			height: 36px;
			line-height: 36px;
			text-align: center;
			position: relative;
			background: #29baf1;

			.title {
			.audio-control {
			.panorama-control {
			position: absolute;
			top: 0;
			right: 34px;
			right: 56px;
			bottom: 0;
			left: auto;
			margin: auto;
			width: 20px;
			height: 20px;
			width: 16px;
			height: 16px;
			cursor: pointer;
			}

			.audio-control {
			position: absolute;
			top: 0;
			right: 32px;
			bottom: 0;
			left: auto;
			margin: auto;
			width: 16px;
			height: 16px;
			cursor: pointer;
			}

			@@ -235,13 +317,38 @@
			}

			.content-box {
			padding: 0 16px;
			height: calc(100% - 36px);

			& > div {
			margin-bottom: 10px;
			}

			& > div:last-child {
			margin-bottom: 0px;
			}

			.text-introduce {
			height: calc(100% - 408px);
			height: calc(100% - 458px);

			.title {
			position: relative;
			padding-left: 24px;
			height: 36px;
			line-height: 36px;

			&::before {
			position: absolute;
			top: 12px;
			left: 0;
			width: 0;
			height: 6px;
			border: 6px solid #fff;
			box-sizing: border-box;
			box-shadow: 0px 0px 4px 1px #fff;
			border-radius: 50%;
			content: '';
			}
			}

			.content {
			@@ -259,18 +366,103 @@
			}

			.organizer,
			.undertake {
			.undertake,
			.time-box {
			padding-left: 24px;
			position: relative;

			height: 36px;
			line-height: 36px;

			&::before {
			position: absolute;
			top: 12px;
			left: 0px;
			width: 0;
			height: 6px;
			border: 6px solid #fff;
			box-sizing: border-box;
			box-shadow: 0px 0px 4px 1px #fff;
			border-radius: 50%;
			content: '';
			}
			}

			.panorama-box {
			padding: 10px;
			margin: auto !important;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 10;
			width: 560px;
			height: 406px;
			background: rgba(40, 187, 240, 0.7);
			border-radius: 10px;
			color: #fff;
			border: 1px solid #29baf1;
			box-shadow: 0 0 10px 2px #29baf1;

			.title {
			margin-bottom: 10px;
			height: 36px;
			line-height: 36px;
			text-align: center;
			position: relative;
			background: #29baf1;

			.panorama-control {
			position: absolute;
			top: 0;
			right: 56px;
			bottom: 0;
			left: auto;
			margin: auto;
			width: 16px;
			height: 16px;
			cursor: pointer;
			}

			.audio-control {
			position: absolute;
			top: 0;
			right: 32px;
			bottom: 0;
			left: auto;
			margin: auto;
			width: 16px;
			height: 16px;
			cursor: pointer;
			}

			.close-box {
			position: absolute;
			top: 0;
			right: 8px;
			bottom: 0;
			left: auto;
			margin: auto;
			width: 16px;
			height: 16px;
			cursor: pointer;
			}
			}

			.content {
			padding: 0 10px;
			height: calc(100% - 46px);

			.iframe {
			width: 100%;
			height: 100%;
			}
			}
			}

			.img-exhibition {
			height: 336px;

			.title {
			height: 36px;
			line-height: 36px;
			}
			height: 300px;

			.content {
			.el-image {

	public/img/icon/panorama.png	patch \| view \| raw \| blame \| history
	public/img/navicon/close.png	patch \| view \| raw \| blame \| history
	src/pcviews/specialmap/welcome.vue	306 ●●●●● patch \| view \| raw \| blame \| history