桌面

src/router/modules/index.js

@@ -39,6 +39,15 @@ export default [
     component: () => import('@/views/dataJq/dataV.vue')
   },
   {
+    path: '/dataVT',
+    name: 'dataVT',
+    meta: {
+      title: '工作桌面',
+      auth: '5'
+    },
+    component: () => import('@/views/dataJq/deskTop.vue')
+  },
+  {
     path: '/jump',
     name: 'jump',
     meta: {

src/views/dataJq/components/JobDog.vue

+<template>
+  <div id="jobDog">
+    <div class="jobDog_left">
+      <div class="jobDogLeftTop"></div>
+      <div class="jobDogLeftBottom"></div>
+    </div>
+    <div class="jobDog_right">
+      <div class="jobDogRightTop">
+        <div class="rightTLeft">
+          <div id="age_sex"></div>
+          <div id="age_grade"></div>
+        </div>
+        <div class="rightTRight"></div>
+      </div>
+      <div class="jobDogRightBottom"></div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+#jobDog {
+  width: 100%;
+  height: 100%;
+  background-color: rgba($color: red, $alpha: 0.2);
+  padding: 20px 64px 36px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  .jobDog_left {
+    width: 282px;
+    margin-right: 20px;
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: space-between;
+    .jobDogLeftTop {
+      height: 160px;
+      margin-bottom: 20px;
+      background: #202b66;
+      border-radius: 16px 16px 16px 16px;
+      border-image: linear-gradient(
+          180deg,
+          rgba(88, 133, 249, 1),
+          rgba(29, 62, 180, 1)
+        )
+        1 1;
+    }
+    .jobDogLeftBottom {
+      flex: 1;
+      background: #202b66;
+      border-radius: 16px 16px 16px 16px;
+      border-image: linear-gradient(
+          180deg,
+          rgba(88, 133, 249, 1),
+          rgba(29, 62, 180, 1)
+        )
+        1 1;
+    }
+  }
+  .jobDog_right {
+    flex: 1;
+    .jobDogRightTop {
+      height: 66.6%;
+      padding: 0 0 20px 0;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-between;
+      .rightTLeft {
+        flex: 1;
+        padding-right: 20px;
+        display: flex;
+        flex-flow: column nowrap;
+        > div {
+          height: 50%;
+          background: #202b66;
+          border-radius: 16px 16px 16px 16px;
+          border-image: linear-gradient(
+              180deg,
+              rgba(88, 133, 249, 1),
+              rgba(29, 62, 180, 1)
+            )
+            1 1;
+        }
+        #age_sex {
+          margin-bottom: 20px;
+        }
+      }
+      .rightTRight {
+        width: 282px;
+        height: 100%;
+        background: #202b66;
+        border-radius: 16px 16px 16px 16px;
+        border-image: linear-gradient(
+            180deg,
+            rgba(88, 133, 249, 1),
+            rgba(29, 62, 180, 1)
+          )
+          1 1;
+      }
+    }
+    .jobDogRightBottom {
+      height: 33.4%;
+      background: #202b66;
+      border-radius: 16px 16px 16px 16px;
+      border-image: linear-gradient(
+          180deg,
+          rgba(88, 133, 249, 1),
+          rgba(29, 62, 180, 1)
+        )
+        1 1;
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/dataJq/deskTop.vue

+<template>
+  <div id="deskBox">
+    <div class="header">
+      <div class="header_date">
+        <el-date-picker
+          size="small"
+          v-model="value1"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        >
+        </el-date-picker>
+      </div>
+      <div class="header_logo">
+        <img src="@/assets/img/logoTile.png" alt="" />
+      </div>
+      <div class="header_weather">2023-05-01 | 19℃-25℃</div>
+    </div>
+    <div class="content">
+      <JobDog></JobDog>
+    </div>
+    <div class="footer"></div>
+  </div>
+</template>
+<script>
+import JobDog from './components/JobDog.vue'
+export default {
+  components: {
+    JobDog
+  },
+  data() {
+    return {
+      value1: [],
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+#deskBox {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-flow: nowrap column;
+  background: url("~@/assets/img/bgImg.png") 100% 100%;
+  .content {
+  }
+  .header {
+    height: 80px;
+    background: url("~@/assets/img/deskHeader.png") 100% 100% / cover;
+    background-color: linear-gradient(180deg, #11246a 0%, #22528b 100%);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 40px;
+    .header_weather {
+      text-align: right;
+      color: #ebedf1;
+      font-size: 16px;
+      font-family: PingFang SC-Regular, PingFang SC;
+    }
+    .header_date {
+      .el-date-editor /deep/ {
+        background-color: #001235;
+        border: 1px solid #073E62;
+        .el-input__icon {
+          color: #2276FC;
+        }
+        .el-range-separator { color:  #3F5580;}
+        .el-range-input {
+          background-color: #001235;
+          color: #fff;
+        }
+      }
+    }
+    .header_date,
+    .header_weather {
+      width: 30%;
+    }
+  }
+  .footer {
+    height: 55px;
+    box-shadow: 0px 0px 26px 0px #000000;
+    opacity: 1;
+    background: url("~@/assets/img/footerBg.png") 100% 100% / cover;
+  }
+}
+</style>
\ No newline at end of file