fj-dc-ui/.svn/pristine/4f/4fff55de0c5ed5880101895608eebc00568ab8e8.svn-base

<!--  -->
<template>
	<div>
		<div class="left_user_left">
			<div class="icon">
				<img src="../../assets/img/dangqianzaixian .png" alt>
			</div>
			<div class="text">
				<div>
					<span style="margin-left:.4vw;font-size:.9vw;">当前在线</span>
				</div>
				<div>
					<span style="margin-left:1vw;font-size:1.1vw;">{{usersNum}}</span>
					<span style="font-size:.8vw;">人</span>
				</div>
			</div>
		</div>
		<div class="left_user_right">
			<div class="icon">
				<img src="../../assets/img/huodongzu.png" alt>
			</div>
			<div class="text">
				<div>
					<span style="font-size:.9vw;">当前活动组</span>
				</div>
				<div>
					<span style="margin-left:1vw;font-size:1.1vw;">{{grounpNum}}</span>
					<span style="font-size:.8vw;">组</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import {userAndGroup} from "../../api/homeMainView.js";
// import theme from '../../store/theme'
export default {
    props:['usersNum','grounpNum'],
    //import引入的组件需要注入到对象中才能使用
    components: {
        
    },
    data() {
        //这里存放数据
        return {
            
        };
    },
    //监听属性 类似于data概念
    computed: {
      msg(){
			//   return theme.state.testMsg;
			  return this.$store.state.theme.testMsg;
		  },
    },
    //监控data中的数据变化
    watch: {
        usersNum(n,o){
            this.usersNum = n;
        },
        grounpNum(n,o){
            this.grounpNum = n;

		},
		// msg(n,o){
		// 	if( n == 'dark'){
		// 		borderForDark
		// 	}else{

		// 	}
		// }
    },
    //方法集合
    methods: {
        
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
    };
</script>
<style lang="scss" scoped>
@media screen and (min-width: 960px) {
  @import "@scss/homeForPad";
}
// @media screen and (min-width: 1024px) {
//   @import "@scss/home1024";
// }
@media  screen and (min-width: 1024px) and (max-width:1920px){
	@import "@scss/home";
}
@media screen and (min-width: 1920px) {
  @import "@scss/home1920";
}
</style>