首页样式修改

App.vue

@@ -1,63 +1,119 @@
 <script>
-import config from './config';
-import store from '@/store';
-import { getToken } from '@/utils/auth';
+	import config from './config';
+	import store from '@/store';
+	import {
+		getToken
+	} from '@/utils/auth';
 
-export default {
-	onLaunch: function () {
-		this.initApp();
-	},
-	data() {
-		return {
-			width: '--width:300px;',
-			height: '--height:712px;'
-		};
-	},
-	methods: {
-		// 初始化应用
-		initApp() {
-			// 初始化应用配置
-			this.initConfig();
-			// 检查用户登录状态
-			//#ifdef H5
-			this.checkLogin();
-			//#endif
+	export default {
+		onLaunch: function() {
+			this.initApp();
 		},
-		initConfig() {
-			const _windowsWidth = uni.getWindowInfo().windowWidth;
-			const _windowsHeight = uni.getWindowInfo().windowHeight;
-			// console.log(_windowsWidth,_windowsHeight);
-			this.globalData.config = config;
-			// 设置页面初始大小
-			// this.'--width' = _windowsWidth + 'px;';
-			// this.'--height' =  (_windowsHeight - 50) + 'px;';
+		data() {
+			return {
+				width: '--width:300px;',
+				height: '--height:712px;'
+			};
 		},
-		checkLogin() {
-			if (!getToken()) {
-				this.$tab.reLaunch('/pages/login');
+		methods: {
+			// 初始化应用
+			initApp() {
+				// 初始化应用配置
+				this.initConfig();
+				// 检查用户登录状态
+				//#ifdef H5
+				this.checkLogin();
+				//#endif
+			},
+			initConfig() {
+				const _windowsWidth = uni.getWindowInfo().windowWidth;
+				const _windowsHeight = uni.getWindowInfo().windowHeight;
+				// console.log(_windowsWidth,_windowsHeight);
+				this.globalData.config = config;
+				// 设置页面初始大小
+				// this.'--width' = _windowsWidth + 'px;';
+				// this.'--height' =  (_windowsHeight - 50) + 'px;';
+			},
+			checkLogin() {
+				if (!getToken()) {
+					this.$tab.reLaunch('/pages/login');
+				}
 			}
 		}
-	}
-};
+	};
 </script>
 
 <style lang="scss">
-/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
-@import '@/uni_modules/uview-ui/index.scss';
-.content {
-	display: flex;
-	flex-direction: column;
-	background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), url('static/images/background/background.png');
-	background-size: cover;
-	//filter: opacity(50%);
-	font-size: 36px;
-	font-weight: 700;
-	width: 360px;
-	height: 662px;
-}
-.main-box {
-	width: 100%;
-	height: 100%;
-}
-@import '@/static/scss/index.scss';
+	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
+	@import '@/uni_modules/uview-ui/index.scss';
+
+	/* 无顶部nav无tab通用主容器 可使用高度 */
+	.common-container {
+		width: 360px;
+		height: 712px;
+		background-color: white;
+	}
+
+	/* 存在顶部nav与tab通用主容器 可使用高度 */
+	.common-nav-container {
+		width: 360px;
+		height: 644px;
+		background-color: white;
+	}
+
+	/* 通用测试边框 */
+	.border {
+		border: 1px solid black;
+	}
+
+	.content {
+		display: flex;
+		flex-direction: column;
+		background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), url('static/images/background/background.png');
+		background-size: cover;
+		//filter: opacity(50%);
+		font-size: 36px;
+		font-weight: 700;
+		width: 360px;
+		height: 662px;
+	}
+
+	.main-box {
+		width: 100%;
+		height: 100%;
+	}
+
+	.gap-5 {
+		margin: 0;
+		padding: 0;
+		width: 5px;
+		height: 5px;
+		background-color: transparent;
+	}
+
+	.gap-10 {
+		margin: 0;
+		padding: 0;
+		width: 10px;
+		height: 10px;
+		background-color: transparent;
+	}
+
+	.gap-20 {
+		margin: 0;
+		padding: 0;
+		width: 20px;
+		height: 20px;
+		background-color: transparent;
+	}
+
+	.gap-40 {
+		margin: 0;
+		padding: 0;
+		width: 40px;
+		height: 40px;
+		background-color: transparent;
+	}
+
+	@import '@/static/scss/index.scss';
 </style>