master

分支 (1)

管理

管理

master

mm_tpl_admin
/
index.html

<!DOCTYPE html>
<html>
	<head>
		${@view('./admin/head.html')}
	</head>
	<body class="${@hook_action('theme', 'cloud')}">
		<div id="app">
			<div class="mm_row">
				<!-- #main -->
			</div>
		</div>
		${@view('./admin/foot.html')}
		${@view('./admin/float.html')}

		<script src="/js/require/require.js"></script>
		<script>
			require({
				baseUrl: '/src/',
				paths: {
					babel: '/js/babel.min',
					polyfill: '/js/require/polyfill.min',
					css: '/js/require/css.min',
					text: '/js/require/text.min',
					vue: '/js/require/mm-requirejs-vue',
					jquery: '/js/jquery.min',
					countup: '/js/countup.umd',
					Vue: '/js/vue/vue2',
					mm_sdk: '/js/mm/mm_sdk',
					mm_vue: '/js/vue/mm_vue',
					mm_ui: '/js/mm/mm_ui',
					mm_vue_ui: '/js/vue/mm_vue_ui',
					mixin_page: '/src/mixins/page',
				},
				config: {
					// vue加载配置
					'vue': {
						'css': 'inject',
						'templateVar': '__template__'
					}
				},
				shim: {
					polyfill: {
						deps: ['babel']
					},
					countup: {
						deps: ['jquery']
					},
					mm_sdk: {
						deps: ['jquery']
					},
					mm_vue: {
						deps: ['mm_sdk']
					},
					mm_ui: {
						deps: ['mm_sdk']
					},
					mm_vue_ui: {
						deps: ['mm_ui']
					}
				}
			});

			require(['mm_vue', 'mm_vue_ui', 'vue!/src/components/expand/expand_num.vue',
				'vue!/src/components/chart/chart_pic.vue',
				'vue!/src/components/chart/chart_line.vue', 'vue!/src/components/chart/chart_pie.vue',
				'vue!/src/components/chart/chart_bar.vue'
			], function(mm_vue, mm_vue_ui, expand_num, chart_pic, chart_line, chart_pie, chart_bar) {
				Vue.use(mm_vue);
				Vue.use(mm_vue_ui);
				var app = new Vue({
					el: '#app',
					components: {
						expand_num,
						chart_pic,
						chart_line,
						chart_pie,
						chart_bar
					},
					data() {
						return {
							show_preview: false,
							info: {
								title: "",
								content: ""
							},
							obj: {
								user_count: 100,
								user_online: 100,
								user_up_down: 10,
								use_count: 15694,
								use_day: 130,
								use_up_down: 33.33,
								device_count: 200,
								device_online: 200,
								project_count: 100,
								project_doning: 10
							},
							show_filter: true,
							show_search: false,
							user_date: [],
							user_group: [],
							device_date: [],
							device_group: [],
							version: {},
							notice: {},
							trends: [],
							host: "https://www.fman.top/"
						}
					},
					methods: {
						check_login() {
							var user_id = "${user.user_id}";
							if (user_id === "0") {
								top.location.href = '/admin/login';
							}
						},
						get_user_count() {
							var _this = this;
							this.$get("/api/user/data_count?", {}, function(json) {
								var ret = json.result;
								if (ret) {
									_this.user_date = ret.user_date;
									_this.user_group = ret.user_group;
								}
							});
						}
					},
					created() {
						this.check_login();
						this.get_user_count();
					}
				});
			});
		</script>
		<style>
			.card_count {
				position: relative;
				padding: 1rem;
				background: #fff;
			}

			.card_count h5,
			.card_count .expand_num {
				font-size: 1.75rem;
				font-weight: normal;
				font-family: 'Helvetica Neue';
			}

			.card_count .label {
				line-height: 2;
				color: var(--font_base);
			}

			.card_count .count {
				margin-left: 0.5rem;
			}

			.card_count figure {
				position: absolute;
				top: 0.5rem;
				right: 1rem;
				font-size: 1rem;
				color: var(--font_white);
				width: 2.5rem;
				height: 2.5rem;
				line-height: 2.5rem;
				text-align: center;
				border-radius: 50%;
				opacity: 0.75;
			}

			.bg_line_red {
				background: var(--line_red);
			}

			.bg_line_blue {
				background: var(--line_blue);
			}

			.bg_line_yellow {
				background: var(--line_yellow);
			}

			.bg_line_green {
				background: var(--line_green);
			}

			.card_count .up {
				color: var(--font_success);
				margin-left: 0.5rem;
			}

			.card_count .up::before {
				font-family: "FontAwesome";
				content: "\f176";
				font-weight: bold;
				margin-right: 0.25rem;
			}

			.card_count .down {
				color: var(--font_error);
				margin-left: 0.5rem;
			}

			.card_count .down::before {
				font-family: "FontAwesome";
				content: "\f175";
				font-weight: bold;
				margin-right: 0.25rem;
			}

			.trends h5,
			.notice h5,
			.version h5,
			.chart h5 {
				padding: 0.5rem 1rem;
			}

			.chart_pie {
				width: 100%;
			}

			.word {
				line-height: 1.5;
				padding: 0.5rem 1rem;
			}

			.word .mm_list a {
				width: 100%;
				display: block;
			}

			.word .item {
				position: relative;
				display: block;
				overflow: hidden;
				padding: 0.5rem 0 0.5rem 1.75rem;
				margin: 0;
			}

			.word .item::after {
				display: block;
				content: "";
				position: absolute;
				top: 0;
				left: 1.75rem;
				border-top: 1px dashed var(--border_base);
				width: 100%;
			}

			.word a:nth-child(1) .ranking {
				background-color: #f12f04;
			}

			.word a:nth-child(2) .ranking {
				background-color: #ff5000;
			}

			.word a:nth-child(3) .ranking {
				background-color: #ff9000;
			}

			.word .ranking {
				position: absolute;
				left: 0;
				top: 50%;
				display: block;
				width: 1.125rem;
				line-height: 1.125rem;
				text-align: center;
				border-radius: 0.125rem;
				transform: translateY(-50%);
				letter-spacing: 0;
				font-size: var(--text_mini);
				height: 1.125rem;
				color: var(--font_white);
				background-color: #afbfd4;
			}

			.word a:first-child .item::after {
				border: none;
			}

			.trends a:hover {
				color: var(--font_info);
			}

			.trends li {
				width: 100%;
				padding: 0.5rem 0;
				border-top: 1px dashed var(--border_base);
			}

			.trends li:first-child {
				border: none;
			}

			.trends .time {
				color: #999;
			}

			.modal_main .content {
				line-height: 1.5;
			}
		</style>
	</body>
</html>