|
@@ -0,0 +1,283 @@
|
|
|
+<template>
|
|
|
+ <div class="enter-main">
|
|
|
+ <div class="top-box">
|
|
|
+ <div class="left">
|
|
|
+ <img class="logo" :src="parseImgUrl('pac', 'logo.svg')" />
|
|
|
+ <img class="weather-icon" :src="parseImgUrl('pac', 'weather/sunny.png')" />
|
|
|
+ <div class="wether-info">
|
|
|
+ <div class="temp">-3 ℃</div>
|
|
|
+ <div class="text">中雨</div>
|
|
|
+ </div>
|
|
|
+ <div class="line"></div>
|
|
|
+ <div class="wether-pm">
|
|
|
+ <div class="value-box">
|
|
|
+ <span>PM 2.5</span>
|
|
|
+ <span>16</span>
|
|
|
+ </div>
|
|
|
+ <div class="value-des">
|
|
|
+ <span>室外空气质量</span>
|
|
|
+ <span>优</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="env-box" v-for="item in titleList">
|
|
|
+ <div class="title-box">
|
|
|
+ <img class="icon" :src="item.img" />
|
|
|
+ <div class="title">{{ item.name }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="index-box">
|
|
|
+ <div class="num">{{ item.value }}</div>
|
|
|
+ <div class="text">{{ item.level }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {
|
|
|
+ defineComponent,
|
|
|
+ reactive,
|
|
|
+ toRefs,
|
|
|
+ onBeforeMount,
|
|
|
+ onMounted,
|
|
|
+ ref,
|
|
|
+ onBeforeUnmount,
|
|
|
+} from "vue";
|
|
|
+import { parseImgUrl } from "@/utils";
|
|
|
+export default defineComponent({
|
|
|
+ components: {},
|
|
|
+ setup(props) {
|
|
|
+ const titleList = [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ name: "PM 2.5",
|
|
|
+ unit: "ug/m³",
|
|
|
+ funcid: "PM2d5",
|
|
|
+ level: "优",
|
|
|
+ value: 10,
|
|
|
+ img: parseImgUrl("pac", "pm2.5.svg"),
|
|
|
+ showNowData: 0, // 0:loading 1:暂无数据 2:暂无服务定制时间
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ value: 10,
|
|
|
+ name: "甲醛",
|
|
|
+ unit: "mg/㎡",
|
|
|
+ level: "",
|
|
|
+ img: parseImgUrl("pac", "pm2.5.svg"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ value: 10,
|
|
|
+ name: "温度",
|
|
|
+ unit: "%",
|
|
|
+ level: "",
|
|
|
+ funcid: "Tdb,RH",
|
|
|
+ img: parseImgUrl("pac", "pm2.5.svg"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ value: 10,
|
|
|
+ name: "湿度",
|
|
|
+ level: "",
|
|
|
+ unit: "%",
|
|
|
+ funcid: "Tdb,RH",
|
|
|
+ img: parseImgUrl("pac", "pm2.5.svg"),
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ const proxyData = reactive({
|
|
|
+ titleList: titleList,
|
|
|
+ parseImgUrl: parseImgUrl,
|
|
|
+ });
|
|
|
+ onBeforeUnmount(() => {});
|
|
|
+ onMounted(() => {});
|
|
|
+ return {
|
|
|
+ ...toRefs(proxyData),
|
|
|
+ };
|
|
|
+ },
|
|
|
+});
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+// 因为像素转换的单位是96, 大屏的设计图是2160px,
|
|
|
+// 所以px大小除/2.25就可自定计算出rem了
|
|
|
+.enter-main {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(160, 146, 137, 1);
|
|
|
+ .top-box {
|
|
|
+ box-sizing: border-box;
|
|
|
+ // padding: 14.58vh 28vw;
|
|
|
+ padding: 0 2.78vw;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .logo {
|
|
|
+ width: 34.23px;
|
|
|
+ // height: 46px;
|
|
|
+ margin-right: 26.6px;
|
|
|
+ }
|
|
|
+ .weather-icon {
|
|
|
+ width: 53.4px;
|
|
|
+ // height: 58.6px;
|
|
|
+ margin-right: 23px;
|
|
|
+ }
|
|
|
+ .wether-info {
|
|
|
+ color: #fff;
|
|
|
+ .temp {
|
|
|
+ font-family: Montserrat;
|
|
|
+ font-size: 25.8px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 22px;
|
|
|
+ text-align: left;
|
|
|
+ margin-bottom: 9.8px;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-size: 16.88px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 16.4px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .line {
|
|
|
+ height: 46px;
|
|
|
+ width: 1px;
|
|
|
+ background: rgba(216, 185, 164, 1);
|
|
|
+ margin-left: 17.77px;
|
|
|
+ margin-right: 17.77px;
|
|
|
+ }
|
|
|
+ .wether-pm {
|
|
|
+ color: #fff;
|
|
|
+ .value-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 25.77px;
|
|
|
+ line-height: 22.22px;
|
|
|
+ text-align: left;
|
|
|
+ margin-bottom: 8.88px;
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ &:nth-child(1) {
|
|
|
+ width: 94px;
|
|
|
+ margin-right: 7px;
|
|
|
+ font-family: Montserrat;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ &:nth-child(2) {
|
|
|
+ font-family: Montserrat;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .value-des {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-size: 13.33px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 16.6px;
|
|
|
+ text-align: left;
|
|
|
+ &:nth-child(1){
|
|
|
+ width: 94px;
|
|
|
+ margin-right: 7px;
|
|
|
+ }
|
|
|
+ &:nth-child(2) {
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-size: 16.88px;
|
|
|
+ font-weight: 600;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ width: 52.7vw;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .env-box {
|
|
|
+ width: 11.7vw;
|
|
|
+ // height: 70.8vh;
|
|
|
+ color: #fff;
|
|
|
+ border: 2px solid rgba(255, 255, 255, 0.2);
|
|
|
+ border-radius: 8.88px;
|
|
|
+ background: radial-gradient(
|
|
|
+ 103.15% 78.07% at -3.15% 51.76%,
|
|
|
+ #a09289 0%,
|
|
|
+ #9c8c82 100%
|
|
|
+ );
|
|
|
+ .title-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 8px;
|
|
|
+ border-radius: 8.4px 8.4px 0 0;
|
|
|
+ text-align: center;
|
|
|
+ background: radial-gradient(
|
|
|
+ 100% 100% at 0% 0%,
|
|
|
+ rgba(255, 255, 255, 0.4) 0%,
|
|
|
+ #a09289 100%
|
|
|
+ );
|
|
|
+ backdrop-filter: blur(18px);
|
|
|
+ -webkit-backdrop-filter: blur(18px);
|
|
|
+ box-shadow: -3px -3px 111px 0px rgba(255, 255, 255, 0.02) inset;
|
|
|
+ border-bottom: 2px solid rgba(255, 255, 255, 0.2);
|
|
|
+ border-image-source: linear-gradient(
|
|
|
+ 169.15deg,
|
|
|
+ rgba(255, 255, 255, 0.4) 0%,
|
|
|
+ rgba(238, 237, 237, 0.2) 96.79%
|
|
|
+ );
|
|
|
+ .icon {
|
|
|
+ width: 13.3px;
|
|
|
+ height: 13.3px;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ font-family: Montserrat;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 17.78px;
|
|
|
+ text-align: left;
|
|
|
+ text-underline-position: from-font;
|
|
|
+ text-decoration-skip-ink: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .index-box {
|
|
|
+ padding: 7.55px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .num {
|
|
|
+ font-family: Montserrat;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 20.4px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 26.66px;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ font-family: PingFang SC;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 20.4px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 26.66px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|