update 基本完成

src/components/boxes/XicaoTemp.vue

@@ -55,12 +55,12 @@ export default {
 }
 
 .vertical-line {
-	margin: 0 adjust(3px);
-	width: adjust(3px);
+	margin: 0 6px;
+	width: 6px;
 	background: radial-gradient(
 		ellipse at center,
-		#6fe2ff,
-		#52cbef80,
+		#3565ff,
+		#3565ff51,
 		transparent,
 		transparent
 	);

src/components/groups/data.vue

@@ -4,7 +4,7 @@
 		<GasFlow />
 		<TopTemp />
 		<BottomTemp />
-		<OilFlow />
+		<XicaoTemp />
 		<FanRuntime />
 	</section>
 </template>
@@ -15,6 +15,7 @@ import GasFlow from "../boxes/GasFlow.vue";
 import TopTemp from "../boxes/TopTemp.vue";
 import BottomTemp from "../boxes/BottomTemp.vue";
 import FanRuntime from "../boxes/FanRuntime.vue";
+import XicaoTemp from '../boxes/XicaoTemp.vue';
 // import { mapState } from "vuex";
 
 export default {
@@ -26,6 +27,7 @@ export default {
 		GasFlow,
 		TopTemp,
 		BottomTemp,
+		XicaoTemp
 	},
 	data() {
 		return {};

src/components/layout/SubContainer.vue

@@ -37,9 +37,9 @@ export default {
 				gas: "icon-gas",
 				xicao: "icon-xc",
 				inWater: "icon-water-in",
-				fan: 'icon-fan',
-				ktop: 'icon-kiln-top',
-				kbtm: 'icon-kiln-bottom',
+				fan: "icon-fan",
+				ktop: "icon-kiln-top",
+				kbtm: "icon-kiln-bottom",
 			},
 		};
 	},
@@ -82,8 +82,8 @@ export default {
 }
 
 .icon-xc {
-	background: url(../../assets/xicao-icon.png);
-	background-size: 100% 100%;
+	background: url(../../assets/xicao-icon.png) top 0 left 0 / 90% 75% no-repeat;
+	margin-right: 6px;
 }
 
 .icon-fan {
@@ -92,17 +92,20 @@ export default {
 }
 
 .icon-kiln-top {
-	background: url(../../assets/kiln-top-icon.png) top 0 left 0 / 90% 75% no-repeat;
+	background: url(../../assets/kiln-top-icon.png) top 0 left 0 / 90% 75%
+		no-repeat;
 	margin-right: 6px;
 }
 
 .icon-kiln-bottom {
-	background: url(../../assets/kiln-bottom-icon.png) top 0 left 0 / 90% 75% no-repeat;
+	background: url(../../assets/kiln-bottom-icon.png) top 0 left 0 / 90% 75%
+		no-repeat;
 	margin-right: 6px;
 }
 
 .icon-water-in {
-	background: url(../../assets/water-temp.png) top 24% left 0 / 80% 75% no-repeat;
+	background: url(../../assets/water-temp.png) top 24% left 0 / 80% 75%
+		no-repeat;
 }
 
 .title {
@@ -127,7 +130,7 @@ export default {
 }
 
 .content {
-	height: 1px; 
+	height: 1px;
 	flex: 1;
 }
 </style>

src/main.js

@@ -11,12 +11,6 @@ Vue.config.productionTip = false
 
 Vue.directive('title', title)
 
-document.body.addEventListener('keydown', e => {
-  if (e.shiftKey && e.key === 'L') {
-    console.log('e', e.key)
-  }
-})
-
 new Vue({
   router,
   store,

src/views/HomeView.vue

@@ -1,14 +1,11 @@
 <template>
-	<div>
-		<div class="home-view" :style="styles">
-			<LeftSide />
-			<section class="center">
-				<BigHeader />
-				<Main />
-			</section>
-			<RightSide />
-		</div>
-		<Slider v-model="value" />
+	<div class="home-view" :style="styles">
+		<LeftSide />
+		<section class="center">
+			<BigHeader />
+			<Main />
+		</section>
+		<RightSide />
 	</div>
 </template>
 
@@ -17,11 +14,10 @@ import BigHeader from "../components/layout/Header.vue";
 import Main from "../components/layout/Main.vue";
 import LeftSide from "./LeftSide.vue";
 import RightSide from "./RightSide.vue";
-import Slider from "../utils/slider.vue";
 
 export default {
 	name: "HomeView",
-	components: { BigHeader, Main, LeftSide, RightSide, Slider },
+	components: { BigHeader, Main, LeftSide, RightSide },
 	props: {},
 	data() {
 		return {
@@ -37,17 +33,47 @@ export default {
 			};
 		},
 	},
+	mounted() {
+		const slider = document.createElement('div')
+		slider.id = 'slider'
+		slider.classList.add('slider')
+		const ranger = document.createElement('input')
+		ranger.type = 'range'
+		ranger.value = 100
+		ranger.addEventListener('input', this.handleSlide)
+		slider.appendChild(ranger)
+		document.body.appendChild(slider)
+
+		// this.$watch('value', val => {
+		// 	ranger.value = val
+		// })
+
+		document.addEventListener("keydown", (e) => {
+			if (e.shiftKey && e.key === "L") {
+				document.getElementById("slider").classList.toggle("show");
+			}
+		});
+		document.getElementById("slider").addEventListener("mouseleave", () => {
+			setTimeout(() => {
+				document.getElementById("slider").classList.remove("show");
+			}, 200);
+		});
+	},
+	methods: {
+		handleSlide(e) {
+			this.value = e.target.value
+			window.scroll(0, 0)
+		},
+	},
 };
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 @import "../assets/styles/functions";
 
 .home-view {
 	height: 4320px;
 	width: 21120px;
-	// height: 300px;
-	// width: 600px;
 	overflow: hidden;
 	background: url(../assets/bg.png) center/cover no-repeat, #e0e3f6;
 	color: white;
@@ -60,4 +86,34 @@ export default {
 	display: flex;
 	flex-direction: column;
 }
+
+.slider {
+	height: 5vh;
+	width: 20vw;
+	border-radius: 88px;
+	box-shadow: 0 0 68px 8px rgba($color: #000000, $alpha: 0.3);
+	padding: 32px;
+	display: grid;
+	place-items: center;
+	background: #fff;
+	position: fixed;
+	// bottom: 64px;
+	bottom: 0;
+	opacity: 0;
+	left: 50%;
+	transform: translateX(-50%);
+	transition: opacity 0.3s ease-out, bottom 0.3s ease-out;
+
+	input {
+		width: 100%;
+		transform: translateY(-7px);
+		color: #0b58ff;
+		background: #fcc;
+	}
+}
+
+.slider.show {
+	opacity: 1;
+	bottom: 64px;
+}
 </style>