.

package.json

@@ -10,7 +10,9 @@
   "dependencies": {
     "core-js": "^3.8.3",
     "element-ui": "^2.15.12",
+    "node-sass": "^8.0.0",
     "sass-loader": "^13.2.0",
+    "style-loader": "^3.3.1",
     "vue": "^2.6.14",
     "vue-router": "^3.2.0",
     "vuex": "^3.6.2",

src/App.vue

@@ -13,12 +13,13 @@
 	}
 </script>
 
-<style>
+<style lang="scss">
 	#app {
 		font-family: Avenir, Helvetica, Arial, sans-serif;
 		-webkit-font-smoothing: antialiased;
 		-moz-osx-font-smoothing: grayscale;
 		color: #2c3e50;
+		// background: #eff2fc;
 	}
 	*{
 		margin: 0;

src/api/login.js

@@ -0,0 +1,17 @@
+// 登录接口
+import {
+	axios
+} from '../utils/http.js'
+
+const loginApi = {
+	login: '/v3/Login_verification',
+}
+
+//登陆
+export function login(data) {
+	return axios({
+		url: loginApi.login,
+		method: 'post',
+		data:data
+	})
+}

src/components/404.vue

@@ -0,0 +1,11 @@
+<template>
+	<div>
+		404
+	</div>
+</template>
+
+<script>
+</script>
+
+<style lang="scss">
+</style>

src/components/tabs.vue

@@ -1,53 +0,0 @@
-<template>
-	<div>
-		<el-tabs type="card" closable :value="$route.path" @tab-click="tabClick" @tab-remove='tabClose'>
-		  <el-tab-pane
-		    v-for="(item, index) in TabsData"
-		    :key="item.path"
-		    :label="item.title"
-		    :name="item.path"
-		  >
-		    {{item.content}}
-		  </el-tab-pane>
-		</el-tabs>
-	</div>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				homes:'danger',
-				editableTabsValue: '',
-				TabsData: this.$store.state.tabList
-			}
-		},
-		watch: {
-			'$route': {
-				handler(to){
-					console.log('哇哇哇哇',to)
-				},
-				immediate:true
-			}
-		},
-		methods: {
-			tabClick(e) {
-				if(e.name!=this.$route.path){
-					this.$router.push(e.name)
-				}
-			},
-			tabClose(e) {
-				// this.$router.push(e.name)
-				console.log('tabClick',this.editableTabsValue)
-				this.$store.commit('delTab',e)
-			},
-		},
-
-	}
-</script>
-
-<style>
-	.el-tabs__nav .el-tabs__item:nth-child(1) span{
-	     display: none;
-	 }
-</style>

src/router/index.js

@@ -18,29 +18,67 @@ const routes = [
 		meta: {
 			title: '首页',
 		},
-		component: () => import('@/views/layout/index/index.vue'),
+		component: () => import('@/views/layout/index.vue'),
 		children: [{
 			path: '/home',
 			name: 'home',
+			icons:'el-icon-house',
 			component: () => import('@/views/home/home.vue'),
 			meta: {
 				title: '工作首页',
 			},
 		},{
-			path: '/test',
-			name: 'test',
-			component: () => import('@/views/test/test.vue'),
+			path: '/CompanyAccount',
+			name: 'CompanyAccount',
+			icons:'el-icon-bank-card',
+			component: () => import('@/views/CompanyAccount/index.vue'),
 			meta: {
-				title: '测试服务',
+				title: '公司账户',
 			},
 		},{
-			path: '/Contact',
-			name: 'Contact',
-			component: () => import('@/views/Contact/Contact.vue'),
+			path: '/ManagingUsers',
+			name: 'ManagingUsers',
+			icons:'el-icon-user',
+			component: () => import('@/views/ManagingUsers/index.vue'),
 			meta: {
-				title: '联系我们',
+				title: '管理用户',
 			},
-		},]
+		},{
+			path: '/companyManagement',
+			name: 'companyManagement',
+			icons:'el-icon-office-building',
+			component: () => import('@/views/companyManagement/index.vue'),
+			meta: {
+				title: '公司管理',
+			},
+		},{
+			path: '/ReportViewing',
+			name: 'ReportViewing',
+			icons:'el-icon-pie-chart',
+			component: () => import('@/views/ReportViewing/index.vue'),
+			meta: {
+				title: '报告查看',
+			},
+		},{
+			path: '/ValidationTemplate',
+			name: 'ValidationTemplate',
+			icons:'el-icon-magic-stick',
+			component: () => import('@/views/ValidationTemplate/index.vue'),
+			meta: {
+				title: '验证模板管理',
+			},
+		},{
+			path: '/calibrationCertificate',
+			name: 'calibrationCertificate',
+			icons:'el-icon-notebook-2',
+			component: () => import('@/views/calibrationCertificate/index.vue'),
+			meta: {
+				title: '校准证书管理',
+			},
+		}]
+	},{
+		path: '*',
+		component: () => import('@/components/404.vue'),
 	}
 ]
 

src/utils/base.js

@@ -0,0 +1,8 @@
+let baseURL = ''
+//是否在控制台显示请求日志，本地环境启用，打包环境禁用
+let showHttpLog = false 
+baseURL = 'http://47.111.15.17:6200'
+module.exports = {
+	baseURL:baseURL,
+	showHttpLog:showHttpLog
+}

src/utils/http.js

@@ -0,0 +1,49 @@
+import axios from 'axios'
+import { baseURL } from './base.js'
+import router from '../router/index.js'
+// 创建 axios 实例
+const service = axios.create({
+	baseURL: baseURL,
+	withCredentials: false,// 是否跨站点访问控制请求
+	timeout: 60000,
+	headers: {
+		'Content-Type': 'application/x-www-form-urlencoded',//x-www-form-urlencoded
+		// 'User_tokey':''
+	}
+})
+
+// 请求拦截器
+service.interceptors.request.use((config) => {
+	// showLoading()
+	config.data.User_tokey = store.state.userInfo.token
+	config.data = qs.stringify(config.data)
+	// config.headers['Authorization'] = '1' // 让每个请求携带自定义token  //设置请求头
+	return config
+}, (error) => {
+	// 错误抛到业务代码
+	error.data = {}
+	return Promise.resolve(error)
+})
+
+// 响应拦截器
+service.interceptors.response.use((response) => {
+	// hideLoading(1)
+	showStatus(response.data)
+	return response
+}, (error) => {
+	// 错误抛到业务代码
+	// router.push({
+	// 	path:'/error'
+	// })
+	elementui.Message.error('系统异常，联系管理员处理')
+	error.data = {}
+	return Promise.resolve(error)
+})
+
+const showStatus = (status) => {//状态码
+	console.log('状态码',status)
+}
+
+export {
+	service as axios
+}

src/views/CompanyAccount/index.vue

@@ -0,0 +1,19 @@
+<template>
+	<div class="CompanyAccount">
+		公司账户<input v-model="vlaue" />
+	</div>
+</template>
+
+<script>
+	export default {
+		name:'CompanyAccount',
+		data() {
+			return{
+				vlaue:''
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+</style>

src/views/ManagingUsers/index.vue

@@ -0,0 +1,19 @@
+<template>
+	<div class="ManagingUsers">
+		管理员用户
+	</div>
+</template>
+
+<script>
+	export default {
+		name:'ManagingUsers',
+		data() {
+			return{
+				vlaue:''
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+</style>

src/views/Contact/Contact.vue → src/views/ReportViewing/index.vue

@@ -1,12 +1,12 @@
 <template>
-	<div class="login">
-		联系我们	<input v-model="vlaue" />
+	<div class="ReportViewing">
+		报告查看
 	</div>
 </template>
 
 <script>
 	export default {
-		name:'Contact',
+		name:'ReportViewing',
 		data() {
 			return{
 				vlaue:''
@@ -15,5 +15,5 @@
 	}
 </script>
 
-<style>
+<style lang="scss">
 </style>

src/views/ValidationTemplate/index.vue

@@ -0,0 +1,19 @@
+<template>
+	<div class="ValidationTemplate">
+		验证模板管理
+	</div>
+</template>
+
+<script>
+	export default {
+		name:'ValidationTemplate',
+		data() {
+			return{
+				vlaue:''
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+</style>

src/views/calibrationCertificate/index.vue

@@ -0,0 +1,19 @@
+<template>
+	<div class="ValidationTemplate">
+		校准证书管理
+	</div>
+</template>
+
+<script>
+	export default {
+		name:'ValidationTemplate',
+		data() {
+			return{
+				vlaue:''
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+</style>

src/views/companyManagement/index.vue

@@ -0,0 +1,19 @@
+<template>
+	<div class="companyManagement">
+		公司管理
+	</div>
+</template>
+
+<script>
+	export default {
+		name:'companyManagement',
+		data() {
+			return{
+				vlaue:''
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+</style>

src/views/home/home.vue

@@ -16,5 +16,5 @@
 	}
 </script>
 
-<style>
+<style lang="scss">
 </style>

src/views/layout/Breadcrumb.vue

@@ -0,0 +1,39 @@
+<template>
+	<div class="Breadcrumb">
+		<el-breadcrumb separator-class="el-icon-arrow-right" style="display: flex;align-items: center;">
+			<el-breadcrumb-item :to="{ path: '/home' }"><i class="el-icon-folder-opened" style="font-size: 18px;margin-right: 5px;"></i>首页</el-breadcrumb-item>
+			<el-breadcrumb-item><i class="el-icon-folder-remove" style="font-size: 18px;margin-right: 5px;"></i>{{BreData1}}</el-breadcrumb-item>
+		</el-breadcrumb>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				BreData1: '',
+			}
+		},
+		watch: {
+			'$route': { // $route可以用引号，也可以不用引号
+				handler(to) {
+					this.BreData1 = to.meta.title
+				},
+				deep: true, // 深度监听
+				immediate: true, // 第一次初始化渲染就可以监听到
+			}
+		},
+	}
+</script>
+
+<style lang="scss">
+	.Breadcrumb {
+		padding: 20px;
+		.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link {
+		    font-weight: 700;
+		    text-decoration: none;
+		    transition: color .2s cubic-bezier(.645,.045,.355,1);
+		    color: #fff;
+		}
+	}
+</style>

src/views/layout/Menus.vue

@@ -0,0 +1,58 @@
+<template>
+	<div style="user-select: none;">
+		<!-- <div class="menu-logo1">
+			<img src="@/assets/img/logo2-1.png" alt="logo">
+		</div> -->
+		<el-menu :default-active="$route.path" router background-color="#545c64"
+			text-color="#fff" :collapse="true">
+			<el-menu-item :index="item.path" v-for="(item,index) in $router.options.routes[1].children"
+				:key="index">
+				<i :class="item.icons" style="font-size:32px;"></i>
+				<span slot="title">{{item.meta.title}}</span>
+			</el-menu-item>
+		</el-menu>
+	</div>
+</template>
+
+<script>
+</script>
+
+<style lang="scss" scoped>
+	// .menu-logo1 {
+	// 	width: 80px;
+	// 	height: 80px;
+	// 	display: flex;
+	// 	justify-content: center;
+	// 	align-items: center;
+	// 	img {
+	// 		width: 75%;
+	// 		height: 75%;
+	// 		object-fit: contain;
+	// 	}
+	// }
+	.el-menu-item.is-active {
+	    color: #fff;
+		background: #409EFF !important;
+	}
+	.el-menu-item[data-v-512d1d49], .el-submenu__title[data-v-512d1d49] {
+	    height: 80px;
+	    line-height: 80px;
+	    list-style: none;
+	}
+	.el-menu--collapse {
+	    width: 80px;
+	}
+	.el-menu {
+	    border-right: solid 0 #e6e6e6;
+	    list-style: none;
+	    position: relative;
+	    margin: 0;
+	    padding-left: 0;
+	    background-color: #FFF;
+	}
+	.el-menu-item, .el-submenu__title {
+	    height: 80px;
+	    line-height: 56px;
+	    list-style: none;
+	}
+</style>

src/views/layout/Topmenu.vue

@@ -0,0 +1,162 @@
+<template>
+	<div class="Topmenu">
+		<div class="TopmenuPir">
+			<div class="TopmenuPir-logo">
+				<div class="TopmenuPir-logo1">
+					<img src="@/assets/img/logo2-1.png" alt="logo">
+				</div>
+				<div class="TopmenuPir-logo2">
+					<img src="@/assets/img/logo2-2.png" alt="logo">
+				</div>
+			</div>
+			<div class="TopmenuPir-mai">
+				<div class="TopmenuPir-mai-ul">
+					<el-popover placement="top-start" title="系统消息" trigger="hover"
+						content="接收系统下发的新消息">
+						<div slot="reference" class="TopmenuPir-mai-ul-li" @click="SetMenu(1)">
+							<i class="el-icon-bell" style="font-size: 26px;"></i>
+						</div>
+					</el-popover>
+					<el-popover placement="top-start" title="更换主题" trigger="hover"
+						content="更改系统整体风格,字体颜色,背景色等等">
+						<div slot="reference" class="TopmenuPir-mai-ul-li" @click="SetMenu(2)">
+							<i class="el-icon-magic-stick" style="font-size: 26px;"></i>
+						</div>
+					</el-popover>
+					<el-popover placement="top-start" title="全屏/正常模式" trigger="hover"
+						content="切换全屏或者正常展示模式">
+						<div slot="reference" class="TopmenuPir-mai-ul-li" @click="quan"><i class="el-icon-monitor" style="font-size: 26px;"></i></div>
+					</el-popover>
+					<div class="TopmenuPir-mai-ul-li">
+						<el-dropdown @command="commands">
+							<div class="el-dropdown-link dropdown-links" style="">
+								<i class="el-icon-user" style="font-size: 26px;"></i>
+							</div>
+							<el-dropdown-menu slot="dropdown">
+								<el-dropdown-item command="a">设置</el-dropdown-item>
+								<el-dropdown-item command="b">个人信息</el-dropdown-item>
+								<el-dropdown-item command="c">退出登录</el-dropdown-item>
+							</el-dropdown-menu>
+						</el-dropdown>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+			SetMenu(e){
+				this.$notify.error({
+					title: '错误提示',
+					message: '功能正在更新中，敬请留意',
+					offset: 100
+				});
+			},
+			commands(e){
+				console.log(e)
+				switch(e){
+					case 'a':
+						this.$notify.error({
+							title: '错误提示',
+							message: '功能正在更新中，敬请留意',
+							offset: 100
+						});
+						break
+					case 'b':
+						this.$notify.error({
+							title: '错误提示',
+							message: '功能正在更新中，敬请留意',
+							offset: 100
+						});
+						break
+					default:
+					this.$router.replace('/')
+				}
+			},
+			quan() {//全屏
+				if (window.innerHeight === window.screen.height) { // 利用屏幕分辨率和window对象的内高度来判断兼容IE
+					document.exitFullscreen()
+				} else {
+					document.documentElement.requestFullscreen()
+				}
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.Topmenu {
+		background-color: rgb(84, 92, 100);
+		height: 60px;
+		color: #fff;
+		.TopmenuPir {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			height: 100%;
+			padding-right: 0 15px;
+
+			.TopmenuPir-mai {
+				color: #fff !important;
+
+				.TopmenuPir-mai-ul {
+					display: flex;
+					align-items: center;
+
+					.TopmenuPir-mai-ul-li {
+						margin-right: 30px;
+						cursor: pointer;
+
+						.dropdown-links {
+							width: 30px;
+							height: 30px;
+							background: #fff;
+							border-radius: 50%;
+							display: flex;
+							align-items: center;
+							justify-content: center;
+							outline: none;
+						}
+					}
+				}
+			}
+
+			.TopmenuPir-logo {
+				height: 60px;
+				display: flex;
+				align-items: center;
+				.TopmenuPir-logo1 {
+					width: 80px;
+					height: 80px;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					img {
+						width: 60%;
+						height: 60%;
+						object-fit: contain;
+					}
+				}
+
+				.TopmenuPir-logo2 {
+					height: 60px;
+					display: flex;
+					align-items: center;
+
+					img {
+						width: auto;
+						height: 100%;
+					}
+				}
+			}
+		}
+	}
+</style>

src/views/layout/index.vue

@@ -0,0 +1,70 @@
+<template>
+	<div class="layout">
+		<div class="layout-T">
+			<Topmenu></Topmenu>
+		</div>
+		<div class="layout-B">
+			<div class="layout-B-menu">
+				<Menus></Menus>
+			</div>
+			<div class="layout-B-mai">
+				<!-- <div>
+					<Breadcrumb></Breadcrumb>
+				</div> -->
+				<div style="layout-B-mai1">
+					<tabs></tabs>
+				</div>
+				<keep-alive :include="$store.state.includeTabs">
+					<router-view class="rouView"></router-view>
+				</keep-alive>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import Topmenu from '@/views/layout/Topmenu'
+	import Menus from '@/views/layout/Menus'
+	import Breadcrumb from '@/views/layout/Breadcrumb'
+	import tabs from '@/views/layout/tabs'
+	export default {
+		components: {
+			tabs,Topmenu,Breadcrumb,Menus
+		},
+		data() {
+			return {
+			}
+		},
+		mounted() {
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.layout{
+		height: 100vh;
+		display: flex;
+		flex-direction: column;
+		.layout-B{
+			flex: 1;
+			display: flex;
+			.layout-B-menu{
+				height: 100%;
+				width: 80px;
+				background-color: rgb(84, 92, 100);
+			}
+			.layout-B-mai{
+				flex: 1;
+				background: #fff;
+				margin: 10px;
+				border-radius: 4px;
+				.layout-B-mai1{
+					border-bottom: 1px solid #DCDFE6;
+				}
+				.rouView{
+					padding:20px;
+				}
+			}
+		}
+	}
+</style>

src/views/layout/index/index.vue

@@ -1,68 +0,0 @@
-<template>
-	<div class="">
-		<el-container>
-			<el-aside width="180px">
-				<el-menu :default-active="$route.path" router class="el-menu-vertical-demo" background-color="#545c64"
-					text-color="#fff">
-					<el-menu-item :index="item.path" v-for="(item,index) in $router.options.routes[1].children"
-						:key="index">
-						<i class="el-icon-setting"></i>
-						<span slot="title">{{item.meta.title}}</span>
-					</el-menu-item>
-				</el-menu>
-			</el-aside>
-			<div style="flex: 1;">
-				<div style="">
-					<tabs></tabs>
-				</div>
-				<el-main>
-					<keep-alive :include="includeTabs">
-						<router-view></router-view>
-					</keep-alive>
-				</el-main>
-			</div>
-		</el-container>
-	</div>
-</template>
-
-<script>
-	import tabs from '@/components/tabs'
-	export default {
-		components: {
-			tabs
-		},
-		computed: {},
-		data() {
-			return {
-				includeTabs: this.$store.state.includeTabs,
-			}
-		},
-		mounted() {
-			this.includeTabs = this.$store.state.includeTabs
-			console.log('tanb', this.$store.state.tabList, this.$store.state.includeTabs)
-		},
-	}
-</script>
-
-<style>
-	.el-header {
-		background-color: #B3C0D1;
-		color: #333;
-		line-height: 60px;
-		padding: 0;
-	}
-
-	.el-aside {
-		background-color: #D3DCE6;
-		color: #333;
-		text-align: center;
-		line-height: 200px;
-	}
-
-	.el-main {
-		background-color: #E9EEF3;
-		color: #333;
-		line-height: 160px;
-		padding: 0;
-	}
-</style>

src/views/layout/tabs.vue

@@ -0,0 +1,72 @@
+<template>
+	<div class="tabs">
+		<el-tabs type="border-card" :value="$route.path" @tab-click="tabClick" @tab-remove='tabClose'>
+			<el-tab-pane :closable="item.path!='/home'?true:false" v-for="(item, index) in TabsData" :key="item.path"
+				:label="item.title" :name="item.path">
+				{{item.content}}
+			</el-tab-pane>
+		</el-tabs>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				homes: 'danger',
+				editableTabsValue: '',
+				TabsData: this.$store.state.tabList
+			}
+		},
+		methods: {
+			tabClick(e) {
+				if (e.name != this.$route.path) {
+					this.$router.push(e.name)
+				}
+			},
+			tabClose(e) {
+				// this.$router.push(e.name)
+				this.$store.commit('delTab', e)
+				this.$router.replace(this.TabsData[this.TabsData.length-1].path)
+				console.log('tabClick',this.TabsData)
+				if(e===this.$route.path){//删除当前这个
+					TabsData
+				}else{//删除其他
+					
+				}
+			},
+		},
+
+	}
+</script>
+
+<style lang="scss">
+	.tabs {
+		overflow: hidden;
+		.el-tabs__content {
+			display: none;
+		}
+
+		.el-tabs--border-card>.el-tabs__header {
+		 background-color: #fff;
+			border-bottom: 1px solid #DCDFE6;
+			margin: 0;
+		}
+
+		.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
+			color: #fff;
+			background-color: #409EFF;
+			border-right-color: #DCDFE6;
+			border-left-color: #DCDFE6;
+		}
+
+		.el-tabs--border-card>.el-tabs__header .el-tabs__item {
+			border: none;
+		}
+
+		.el-tabs--border-card {
+			border:none;
+			box-shadow: none;
+		}
+	}
+</style>

src/views/login/login.vue

@@ -1,15 +1,162 @@
 <template>
 	<div class="login">
-		<el-button type="success">成功按钮</el-button>
-		<router-link to="/home">登录</router-link>
+		<div class="loginMai">
+			<div class="loginPir">
+				<div class="loginPir-t">
+					<!-- <img src="../../assets/img/logo1.png" alt="" srcset=""> -->
+				</div>
+				<div class="loginPir-c">
+					<div class="loginPir-cLR">
+						<div class="loginPir-c-L">
+							<h1>冷链验证报告线上</h1>
+							<div class="loginPir-c-L">
+								验证模板管理、校准证书管理
+							</div>
+						</div>
+						<div class="loginPir-c-R">
+							<div class="loginPir-c-R1">
+								账号登录/Login
+							</div>
+							<div class="loginPir-c-R2">
+								<div style="margin-bottom: 15px;">
+									<el-input v-model="Info.userName" placeholder="请输入内容"></el-input>
+								</div>
+								<div style="margin-bottom: 15px;">
+									<el-input placeholder="请输入密码" v-model="Info.password" show-password></el-input>
+								</div>
+								<div style="margin-bottom: 15px;">
+									<el-select v-model="value" placeholder="请选择" style="width: 100%;">
+										<el-option v-for="item in options" :key="item.value" :label="item.label"
+											:value="item.value">
+										</el-option>
+									</el-select>
+								</div>
+								<div style="margin-top: 40px;">
+									<el-button type="primary" style="width: 100%;" @click="login">登录</el-button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="loginPir-b"></div>
+			</div>
+		</div>
 	</div>
 </template>
 
 <script>
 	export default {
-		
+		data(){
+			return{
+				Info: {
+					userName: '',
+					password: '',
+				},
+				options: [{
+					value: '选项1',
+					label: '管理员'
+				}, {
+					value: '选项2',
+					label: '用户'
+				}],
+				value:''
+			}
+		},
+		methods:{
+			login(){
+				this.$router.replace('/home')
+			}
+		}
 	}
 </script>
 
-<style>
-</style>
+<style lang="scss">
+	.login {
+		user-select: none;
+		background: #fff;
+		.loginMai {
+			height: 100vh;
+			width: 100%;
+			display: flex;
+			align-items: center;
+			.loginPir {
+				width: 100%;
+				display: flex;
+				flex-direction: column;
+				.loginPir-t {
+					height: 80px;
+					margin: 0 auto;
+				}
+
+				.loginPir-c {
+					flex: 1;
+					height: 500px;
+					background-image: url('../../assets/img/BJ.jfif');
+					background-size:cover;
+					background-repeat: no-repeat;
+					@media screen and (max-width: 1200px) {
+						.loginPir-cLR {
+							height: 100%;
+							margin: 0 auto;
+							display: flex;
+							align-items: center;
+							justify-content: center;
+							.loginPir-c-L {
+								display: none;
+								color: #fff;
+								h1{
+									letter-spacing: 5px;
+								}
+							}
+						
+							.loginPir-c-R {
+								background: #fff;
+								border-radius: 4px;
+								padding: 40px 30px;
+								width: 300px;
+								.loginPir-c-R1 {
+									padding-bottom: 30px;
+									letter-spacing: 2px;
+									color: #606266;
+								}
+							}
+						}
+					}
+					@media screen and (min-width: 1200px) {
+						.loginPir-cLR {
+							max-width: 1200px;
+							height: 100%;
+							margin: 0 auto;
+							display: flex;
+							align-items: center;
+							justify-content: space-between;
+							.loginPir-c-L {
+								color: #fff;
+								h1{
+									letter-spacing: 5px;
+								}
+							}
+						
+							.loginPir-c-R {
+								background: #fff;
+								border-radius: 4px;
+								padding: 40px 30px;
+								width: 300px;
+						
+								.loginPir-c-R1 {
+									padding-bottom: 30px;
+									letter-spacing: 2px;
+									color: #606266;
+								}
+							}
+						}
+					}
+				}
+
+				.loginPir-b {
+					height: 80px;
+				}
+			}
+		}
+	}
+</style>

src/views/test/test.vue

@@ -17,5 +17,5 @@
 	}
 </script>
 
-<style>
+<style lang="scss">
 </style>