~xingchuan/SewerAndRainNetwork.git

New file
			@@ -0,0 +1,117 @@
			<template>
			<div class="bounced-box">
			<ul>
			<li>
			<form action="" class="bounced-box-title">
			<span>文字标注设置</span>
			<a @click="changeBounced()">X</a>
			</form>
			</li>
			<li>
			<form action="" class="bounced-box-content">
			<h6>内容：</h6>
			<div><textarea v-model='bouncedText' @blur="ChangeText"></textarea></div>
			</form>
			</li>
			<li class="bounced-box-choose">
			<span>颜色：</span>
			<select v-model='bouncedSelect' @click="changeLabelTextSelect()">
			<option v-for="(item,index) in selectOptions" :key="index" :value="item">{{ item }}</option>
			</select>
			</li>
			</ul>
			</div>
			</template>

			<script>

			import MakeTation from '@components/plugin/MakeTation'

			export default {
			name: 'TextBounced',
			data () {
			return {
			bouncedText: '',
			bouncedSelect: '红色',
			selectOptions: ['红色', '蓝色', '黄色']
			}
			},
			methods: {
			changeBounced () {
			this.$emit('changeBounced', false)
			},
			changeLabelTextSelect () {
			// this.bouncedSelect = item
			console.log('获取颜色')
			},
			ChangeText () {
			MakeTation.setContentText(this.bouncedText)
			console.log(this.bouncedText)
			}
			}
			}
			</script>

			<style lang="less" scoped>
			.bounced-box {
			position: absolute;
			border: 1px solid grey;
			width: 150px;
			right: 5%;
			top: 238px;
			background-color: rgba(3, 28, 61, 0.8);
			color: white;
			cursor: default;
			left: 814px;

			ul {
			list-style: none;
			padding: 0;
			margin: 0;

			li {
			margin: 1rem 0;
			}

			.bounced-box-title {
			background-color: rgba(34, 83, 130, 0.8);
			cursor: move;
			display: flex;
			align-items: center;
			justify-content: space-around;

			a {
			color: white;
			cursor: pointer;
			}
			}

			.bounced-box-content {
			h6 {
			padding: 0;
			margin: 5px;
			}

			div {
			display: flex;
			align-items: center;
			justify-content: center;

			textarea {
			width: 90%;
			resize: none;
			outline: 0;
			border: 1px solid #a0b3d6;
			border-radius: 5px;
			}
			}
			}

			.bounced-box-choose {
			display: flex;
			align-items: center;
			justify-content: space-around;
			}
			}
			}
			</style>