跃码教育B站粉丝可视化

项目依赖

• vue3
• echarts
• reset.css

开发环境

• vite
• sass
• vscode

整体规划

整个项目大体分为左中右三栏，如下图：

<!--
 * @Author: 最爱白菜吖 <1355081829@qq.com>
 * @Date: 2022-08-04 14:50:00
 * @LastEditTime: 2022-08-04 15:47:11
 * @LastEditors: 最爱白菜吖
 * @FilePath: \vue3-big-screen\src\App.vue
 * @QQ: 大前端QQ交流群: 473246571
 * @公众账号: 乐编码
 * 惑而不从师，其为惑也，终不解矣
 * Copyright (c) 2022 by 武汉跃码教育, All Rights Reserved. 
-->
<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
</script>

<template>
  <div id="main-container">
    <div id="left-container"></div>
    <div id="center-container"></div>
    <div id="right-container"></div>
  </div>
</template>

<style scoped>
</style>

采用flex布局，2:3:2的比例分配

@import "reset.css";

#main-container {
	display: flex;
	height: 100vh;
	background: url(./assets/images/index_bg.png) left top no-repeat;
}

#left-container {
	flex: 2;
	background: url(./assets/images/line_img.png) top right repeat-y;
}
#center-container {
	flex: 3;
}
#right-container {
	background: url(./assets/images/line_img.png) top left repeat-y;
	flex: 2;
}

左侧布局

采用上中下的布局方式

<!--
 * @Author: 最爱白菜吖 <1355081829@qq.com>
 * @Date: 2022-08-04 14:50:00
 * @LastEditTime: 2022-08-04 17:17:59
 * @LastEditors: 最爱白菜吖
 * @FilePath: \vue3-big-screen\src\App.vue
 * @QQ: 大前端QQ交流群: 473246571
 * @公众账号: 乐编码
 * 惑而不从师，其为惑也，终不解矣
 * Copyright (c) 2022 by 武汉跃码教育, All Rights Reserved. 
-->
<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
</script>

<template>
  <div id="main-container">
    <div id="left-container">
      <div class="left-top">
      </div>
      <div class="left-center"></div>
      <div class="left-bottom"></div>
    </div>
    <div id="center-container"></div>
    <div id="right-container"></div>
  </div>
</template>

<style scoped>
</style>

采用 1:2:2的分布方式

@import "reset.css";

#main-container {
	display: flex;
	height: 100vh;
	background: url(./assets/images/index_bg.png) left top no-repeat;
}

#left-container {
	flex: 2;
	background: url(./assets/images/line_img.png) top right repeat-y;
	display: flex;
	flex-flow: column nowrap;
}
.left-top {
	flex: 1;
	background-color: red;
}
.left-center {
	flex: 2;
	background-color: blue;
}
.left-bottom {
	flex: 2;
	background-color: aqua;
}
#center-container {
	flex: 3;
}
#right-container {
	background: url(./assets/images/line_img.png) top left repeat-y;
	flex: 2;
}

左侧顶部

      <div class="left-top">
        <div class="currnet-number">
          <div>当前粉丝数
          </div>
          <p>4076</p>
        </div>
      </div>

.left-top {
	flex: 1;
	.currnet-number {
		margin: 0.2rem;
		width: 4.96rem;
		height: 1.86rem;
		background-size: contain;
		background: url(./assets/images/border_bg01.png) top left no-repeat;
		div {
			text-align: center;
			color: #0e94ea;
			width: 100%;
			height: 0.78rem;
			line-height: 0.78rem;
			font-size: 0.2rem;
			background: url(/src/assets/images/title_bg01.png) center center
				no-repeat;
		}
		p {
			text-align: center;
			color: white;
			font-size: 0.46rem;
		}
	}
}

引入rem

/*
 * @Author: 最爱白菜吖 <1355081829@qq.com>
 * @Date: 2022-08-04 17:10:03
 * @LastEditTime: 2022-08-04 17:10:05
 * @LastEditors: 最爱白菜吖
 * @FilePath: \vue3-big-screen\src\rem.js
 * @QQ: 大前端QQ交流群: 473246571
 * @公众账号: 乐编码
 * 惑而不从师，其为惑也，终不解矣
 * Copyright (c) 2022 by 武汉跃码教育, All Rights Reserved.
 */
(function (doc, win) {
	var docEl = doc.documentElement,
		resizeEvt =
			"orientationchange" in window ? "orientationchange" : "resize",
		recalc = function () {
			var clientWidth = docEl.clientWidth;
			if (!clientWidth) return;
			if (clientWidth >= 1920) {
				docEl.style.fontSize = "100px"; //1rem  = 100px
			} else {
				docEl.style.fontSize = 100 * (clientWidth / 1920) + "px";
			}
		};
	if (!doc.addEventListener) return;
	win.addEventListener(resizeEvt, recalc, false);
	doc.addEventListener("DOMContentLoaded", recalc, false);
})(document, window);

/*
 * @Author: 最爱白菜吖 <1355081829@qq.com>
 * @Date: 2022-08-04 14:50:00
 * @LastEditTime: 2022-08-04 17:10:15
 * @LastEditors: 最爱白菜吖
 * @FilePath: \vue3-big-screen\src\main.ts
 * @QQ: 大前端QQ交流群: 473246571
 * @公众账号: 乐编码
 * 惑而不从师，其为惑也，终不解矣
 * Copyright (c) 2022 by 武汉跃码教育, All Rights Reserved.
 */
import { createApp } from "vue";
import "./style.scss";
import "./rem.js";
import App from "./App.vue";

createApp(App).mount("#app");