byte-sailing-main/src/views/main.vue

<template>
  <div id="main" class="main">
	<header-bar></header-bar>
	<!-- <el-table
		:data="tableData"
		style="width: 100%;margin;top:200px"
		:default-sort = "{prop: 'date', order: 'descending'}"
		>
		<el-table-column label="交易时间" prop="time" width="78" fixed />
		<el-table-column label="资产小计" prop="total" width="78" fixed>
			<template slot-scope="scope">
				<span style="color: #940819">{{ scope.row.total.toFixed(2) }}</span>
			</template>
		</el-table-column>
		<template v-if="bankList && bankList.length > 0">
			<tbody v-for="(item) in bankList" :key="item.id">
			<el-table-column :render-header="(h, obj) => renderHeader(h, obj, item)" align="center">
				<el-table-column label="收入" align="right" width="80" :prop="'rmbIncome-' + item.id">
				</el-table-column>
				<el-table-column label="支出" align="right" width="80"  :prop="'rmbExpenditure-' + item.id">
				</el-table-column>
				<el-table-column label="余额" align="right" width="80"  :prop="'rmbAmount-' + item.id">
				</el-table-column>
			</el-table-column>
			</tbody>
		</template>
		
	</el-table> -->
    <!-- <header>
      <ul class="nav">
        <img class="logo" src="../assets/logo.png" alt=""></img>
        <li>
          <router-link to="/main/fjhxCloudVue/#/wel/index">针筒</router-link>
        </li>
        <li class="active">
          <router-link to="/main/canvas/">canvas</router-link>
        </li>
        <li>
          <router-link to="/main/iotPlatformRoom/#/wel/index">云帆</router-link>
        </li>
        <li>
          <router-link to="/main/about">主服务about</router-link>
        </li>
      </ul>
      
      <div class="fr">
        <el-input
          class="input-search"
          placeholder="请输入关键词"
          suffix-icon="el-icon-search"
          v-model="input1">
        </el-input>
        <el-dropdown class="dropdown-box">
          <span class="el-dropdown-link">
            中文<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>English</el-dropdown-item>
            <el-dropdown-item>中文</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-badge :value="12" class="badge">
          <i class="el-icon-message-solid"></i>
        </el-badge>
        <div class="user-img">
          <img  src="../assets/icon_people.png" alt=""></img>
        </div>
        <el-dropdown class="dropdown-box">
          <span class="el-dropdown-link">;
            leehom<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item>退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </header> -->
    <!-- <span @click="changeParentState">主项目的数据：{{ commonData.parent }}，点击变回1</span> -->
    <content>
      <!-- <left-mneu></left-mneu> -->
	  <div class="router-warp">
		<div id="appContainer"></div>
      	<router-view></router-view>
	  </div>
    </content>
    
  </div>
</template>

<script>
import leftMneu from '@/components/left-menu'
import { registerMicroApps, start } from 'qiankun'
import headerBar from '@/components/header-bar'
import { getAll } from '@/libs/micros'
import router from '../router'
import store from '../store'
console.log(process.env.NODE_ENV)
const state = getAll()
state.router = router
registerMicroApps([
	{
		name: 'app-vue-hash',
		entry: 'http://localhost:8081',
		container: '#appContainer',
		activeRule: '/main/app-vue-hash',
		props:{
			data:state,
		},
	},
	{
		name: 'fjhxCloudVue',
		entry: (process.env.NODE_ENV === "development") ?  'http://localhost:1777' : 'https://wdly.bytesail.cn:10002',
		//entry: (process.env.NODE_ENV === "development") ?  'https://wdly.bytesail.cn:10002' : 'https://wdly.bytesail.cn:10002',
		container: '#appContainer',
		activeRule: '/main/fjhxCloudVue',
		props:{
			data:state,
		},
	},
	{
		name: 'iotPlatformRoom',
		entry: 'http://localhost:1888',
		container: '#appContainer',
		activeRule: '/main/iotPlatformRoom',
		props:{
			data:state,
		},
	},
	{
		name: 'canvas',
		entry: 'http://localhost:8080',
		container: '#appContainer',
		activeRule: '/main/canvas',
		props:{
			data:getAll()
		},
	},
]);
start();
export default {
	components:{
		leftMneu,
		headerBar
	},
	data() {
		return {
			input1: null,
			tableData:[],
			bankList:[],
		}
	},
	computed: {
		commonData() {
			return this.$store.state.commonData
		},
	},
	methods: {
		renderHeader(h, para, item) {
		return h('div', {
				attrs: {
				class: 'cell',
				},
				domProps: {
				innerHTML: item.name + '</br>（' + item.accountNumber + '）',
				},
			})
		},
		changeParentState() {
			this.$store.commit('setCommonData', { parent: 1 })
		},
		getData(){
			
		},
	},
	created(){
		//this.getData()
	},
}
</script>
<style>
  .loading-9 {
		--r1: 154%;
		--r2: 68.5%;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		background:
			radial-gradient(var(--r1) var(--r2) at top, #0000 79.5%, #269af2 80%) center left,
			radial-gradient(var(--r1) var(--r2) at bottom, #269af2 79.5%, #0000 80%) center center,
			radial-gradient(var(--r1) var(--r2) at top, #0000 79.5%, #269af2 80%) center right,
			#ccc;
		background-size: 50.5% 220%;
		background-position: -100% 0%, 0% 0%, 100% 0%;
		background-repeat: no-repeat;
		animation: p9 .3s infinite linear;
	}

	@keyframes p9 {
		33% {
			background-position: 0% 33%, 100% 33%, 200% 33%
		}

		66% {
			background-position: -100% 66%, 0% 66%, 100% 66%
		}

		100% {
			background-position: 0% 100%, 100% 100%, 200% 100%
		}
	}
</style>
<style scoped lang="less">
.main {
	height: 100%;
	background: #f1f1f1;
	position: relative;
	content{
		display: flex;
		min-height: 100%;
		.left-menu{
			width: 244px;
		}
		.router-warp{
			width:100%;
			min-height:calc(~'100vh - 64px');
		}
	}
	.nav {
		display: flex;
		padding: 0;
		margin: 0;
		li {
			width: 128px;
			height: 64px;
			font-size: 16px;
			font-weight: 700;
			text-align: center;
			line-height: 64px;
			list-style: none;
		}
		li.active {
			background: #0084ff;
			color: #fff;
			a {
				color: #fff;
			}
		}
	}
	header {
		z-index: 10;
		left: 0;
		right: 0;
		top: 0;
		height: 64px;
		background: #fff;
		display: flex;
		justify-content: space-between;
		.logo {
			margin: 16px 42px;
			display: block;
		}
		.fr {
			display: flex;

			.input-search {
				margin: 12px 40px 12px 0;
				width: 240px;
				input {
				}
			}
			.dropdown-box {
				margin: 0 24px 0 0px;
				line-height: 64px;
			}
			.badge {
				margin: 22px 24px 22px 0;
				height: 20px;
				width: 20px;
				i {
					color: #bbbbbb;
				}
			}
			.user-img {
				margin: 12px 12px 12px 0;
			}
		}
	}
}

header > a {
	margin: 0 20px;
}
.appContainer {
	background: #ccc;
	padding: 20px;
}
</style>
<style>
/* #appContainer div[id^='__qiankun_microapp_wrapper_']>div {
  height: calc(100vh - 64px);
} */

body,
html,
#appContainer,
#appContainer div[id^='__qiankun_microapp_wrapper_'] {
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
}
</style>