yj_vue3/src/components/Cjmscon.vue

<template>
	<div class="cjmscon">
		<div class="cjmscon-btn">
			<a><i class="iconfont yj-icon-fengsu"></i>风速&nbsp;8.0m/s</a>
			<a><i class="iconfont yj-icon-fengxiang"></i>风向&nbsp;东南风</a>
			<a><i class="iconfont yj-icon-jiangyuliang"></i>降雨量&nbsp;10mm</a>
			<a><i class="iconfont yj-icon-huoxiandengji"></i>风险等级&nbsp;4</a>
			<a><i class="iconfont yj-icon-fengxiantishi"></i>风险&nbsp;1</a>
		</div>
		<div class="cjmscon-map">
			<!--<img src="../assets/images/yj-cjmsimg2.png" />-->
			<img :src="mainPicSrc" />
		</div>
	</div>
</template>
<script>


export default {
  name: 'Cjmsbtm',
  data(){
  	return {
		// mainPicSrc:"../assets/images/yj-cjmsimg2.png",
		mainPicSrc:"/img/yj-cjmsimg2.3c5ccc04.png",
			// <img data-v-54aa8595="" src="/img/yj-cjmsimg2.3c5ccc04.png">
		}

  },
  created() {

    },
   mounted () {

            },

  methods: {
	  changeMainPic(src){
	  	// alert(src)
		// /img/yj-cjmsimg2.3c5ccc04.png
				this.mainPicSrc = src;

	  }

},
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.cjmscon{
		position: absolute;
		top: 90px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 3;
		}
	.cjmscon-btn{
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-bottom: 15px;
	}
	.cjmscon-btn a{
		display: flex;
		flex-direction: row;
		color: #fff;
		background: url("../assets/images/yj-cjmsbtnbg3.png") no-repeat center;
		width: 189px;
		height: 38px;
		align-items: center;
		font-size: 14px;
	}
	.cjmscon-btn a:hover{
		text-shadow: 0px 0px 5px #00ffff;
	}
	.cjmscon-btn a i{
		margin-left: 20px;
		margin-right: 10px;
	}
	.cjmscon-map{
		width: 1100px;
		height: 650px;
	}
	.cjmscon-map img{
		width: 100%;
		height: 100%;
	}
</style>