Goodgame_web/pages/part/member_left.vue

<template>
	<view>
		<el-row class="tac">
		  <el-col >
		    <el-menu
		      :default-active="index"
		      class="el-menu-vertical-demo"
		      @open="handleOpen"
		      @close="handleClose"
		      background-color="#ffffff"
		      text-color="#3D3D3D"
		      active-text-color="#F6773C">
			  <el-menu-item @tap="goPath({url: 'member'})" >
			    <!-- <i class="el-icon-user" :class="{'active-color':index=='1'}"></i> -->
				<image class="zsimg" src="../../static/img/member/uiconx.png" v-if="index=='1'"></image>
				<image class="zsimg" src="../../static/img/member/uicon.png" v-else></image>
			    <span slot="title" class="tt" :class="{'active-color':index=='1'}">用户信息</span>
			  </el-menu-item>
			  <el-menu-item @tap="goPath({url: 'digital_assets'})" >
			    <!-- <i class="el-icon-data-line" :class="{'active-color':index=='2'}"></i> -->
				<image class="zsimg" src="../../static/img/member/dj.png" v-if="index=='2'"></image>
				<image class="zsimg" src="../../static/img/member/djx.png" v-else></image>
			    <span slot="title" class="tt" :class="{'active-color':index=='2'}">装备道具资产确权</span>
			  </el-menu-item>
			  <el-menu-item @tap="goPath({url: 'asset_list'})" >
			    <!-- <i class="el-icon-data-analysis" :class="{'active-color':index=='3'}"></i> -->
				<image class="zsimg" src="../../static/img/member/qq.png" v-if="index=='3'"></image>
				<image class="zsimg" src="../../static/img/member/qqx.png" v-else></image>
			    <span slot="title" class="tt" :class="{'active-color':index=='3'}">游戏产品评估确权</span>
			  </el-menu-item>
			  <el-menu-item @tap="goPath({url: 'pay_list'})" >
			    <!-- <i class="el-icon-data-analysis" :class="{'active-color':index=='3'}"></i> -->
				<image class="zsimg" src="../../static/img/member/fkx.png" v-if="index=='4'"></image>
				<image class="zsimg" src="../../static/img/member/fk.png" v-else></image>
			    <span slot="title" class="tt" :class="{'active-color':index=='4'}">付款记录</span>
			  </el-menu-item>
			  <el-menu-item @tap="goPath({url: 'notice_list'})" >
			    <!-- <i class="el-icon-data-analysis" :class="{'active-color':index=='3'}"></i> -->
				<image class="zsimg" src="../../static/img/member/tz.png" v-if="index=='5'"></image>
				<image class="zsimg" src="../../static/img/member/tzx.png" v-else></image>
			    <span slot="title" class="tt" :class="{'active-color':index=='5'}">平台通知</span>
			  </el-menu-item>
			  
			  
			  
		    <!--  <el-submenu index="2">
		        <template slot="title">
		          <i class="el-icon-data-line" :class="{'active-color':index=='2'}" ></i>
		          <span :class="{'active-color':index=='2'}" class="tt">游戏资产评估</span>
		        </template>
		        <el-menu-item-group>
		          <el-menu-item index="2" style="width: 100%;" @tap="goPath({url: 'asset_list'})">
					  <span class="active-colors" :class="{'active-color':index=='2'}" > 资产列表</span>
					  </el-menu-item>
		        </el-menu-item-group>
		      </el-submenu>
			  <el-submenu index="3">
			    <template slot="title">
			      <i class="el-icon-data-analysis" :class="{'active-color':index=='3'}" ></i>
			      <span :class="{'active-color':index=='3'}" class="tt">数字资产确权</span>
			    </template>
			    <el-menu-item-group>
			      <el-menu-item index="3" style="width: 100%;" @tap="goPath({url: 'digital_assets'})">
			  					  <span class="active-colors" :class="{'active-color':index=='3'}" > 资产列表</span>
			  					  </el-menu-item>
			    </el-menu-item-group>
			  </el-submenu> -->
		    </el-menu>
		  </el-col>
		</el-row>
	</view>
</template>

<script>
	export default {
		props:{
			index:{
				type: String,
				default: 1
			},
		},
		data(){
			return {
				detail:{
					name: '',
				},
				isMobile:false
			}
		},
		created() {
		},
		  mounted() {
			this.checkIsMobile();
			window.addEventListener("resize", this.checkIsMobile);
		  },
		  beforeDestroy() {
			window.removeEventListener("resize", this.checkIsMobile);
		  },
		methods:{
			goPath(e) {
				const path = this.$route.path;
				// const query = this.$route.query;
				if(path=='/'+e.url){
					return;
				}
				if(e.url.includes("http")){
					window.open(e.url, '_blank');
					// window.location.href = '';
				}
				else{
					this.$router.replace({
						path: e.url
					});
				}
			},
			checkIsMobile() {
			      const width = window.innerWidth;
			      const height = window.innerHeight;
			      const mobileWidth = 768; // 可以根据需要调整这个值
			      this.isMobile = width <= mobileWidth || height <= mobileWidth;
			    },
			handleOpen(key, keyPath) {
			        console.log(key, keyPath,2222);
			},
			handleClose(key, keyPath) {
			        console.log(key, keyPath,3333);
			}
		}
	}
</script>

<style lang="scss">
	.active-color{
		color: #F6773C !important;
	}
	.active-colors{
		color: #333333;
	}
	.tt{
		font-weight: 500;
	}
	.el-submenu .el-menu-item{
		    padding-left:48px !important;
		    min-width: auto !important; 
	}
	::v-deep.el-submenu__icon-arrow{
		margin-top:-3px !important
	}
	.zsimg{
		width: 18px;
		height: 18px;
		margin-right: 12px;
		margin-top: 1px;
	}
	
</style>