feat: 调整首页样式和新建任务日期，以及小文字调整

chenyao

2025-04-21 7b70bb16c3fd3d3b2c0fa4a464cee90054834cbf

feat: 调整首页样式和新建任务日期，以及小文字调整

 src/assets/images/login/bg.png

 src/assets/images/login/bg1.png

 src/page/login/index.vue

@@ -1,11 +1,13 @@
<template>
  <div class="login-container" @keyup.enter="handleLogin">
    <div class="login-header">
      <div class="title">中图智飞低空智能感知网平台</div>
  <div :class="{loginContainer:true, 'narrowScreen':narrowScreen}" @keyup.enter="handleLogin">
    <div class="login-container">
      <div class="login-header">
        <div class="title">中图智飞低空智能感知网平台</div>
      </div>
      <!-- <div class="login-left-title">中国图强 智领飞跃</div> -->
      <!-- <div class="login-left"></div> -->
      <userLogin v-if="activeName === 'user'"></userLogin>
    </div>
    <!-- <div class="login-left-title">中国图强 智领飞跃</div> -->
    <div class="login-left"></div>
    <userLogin v-if="activeName === 'user'"></userLogin>
  </div>
</template>
<script>
@@ -30,6 +32,7 @@
  },
  data() {
    return {
      narrowScreen: false,
      login:{
        info: '中图智飞低空智能感知网平台'
      },
@@ -53,12 +56,19 @@
    this.handleLogin();
    this.getTime();
  },
  mounted() {},
  mounted() {
    this.narrowScreenFun()
    window.addEventListener('resize', this.narrowScreenFun);
  },
  computed: {
    ...mapGetters(['tagWel']),
  },
  props: [],
  methods: {
    narrowScreenFun() {
      // 监听窗口变化，计算是不是 窄屏幕
      this.narrowScreen = window.innerWidth / window.innerHeight < 16 / 9;
    },
    getTime() {
      setInterval(() => {
        this.time = this.$dayjs().format('YYYY年MM月DD日 HH:mm:ss');
@@ -131,127 +141,40 @@
</script>

<style lang="scss" scoped>
// .login-index {
//   position: relative;
//   width: 100%;
//   height: 100%;
//   background: url('@/assets/images/login/bg.png') no-repeat center / 100% 100%;
//   .login-header {
//     background: url('@/assets/images/login/big-title.png') no-repeat center / 100% 100%;
//     width: 100%;
//     height: 102px;
//     position: relative;
//     .title {
//       position: absolute;
//       left: 637px;
//       top: 22px;
//       width: 646px;
//       height: 58px;
//       font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
//       font-weight: 400;
//       font-size: 54px;
//       line-height: 58px;
//       // text-shadow: 0px 2px 6px #0C3D79;
//       text-align: center;
//       font-style: normal;
//       text-transform: none;
//       color: #fff;
//       // background: linear-gradient(90deg, #FFFFFF 0%, #B2D5FF 100%);
//     }
//   }
//   .login-left-title {
//     position: absolute;
//     left: 147px;
//     top: 263px;
//     width: 926px;
//     height: 42px;
//     font-family: Source Han Sans CN, Source Han Sans CN;
//     font-weight: bold;
//     font-size: 28px;
//     line-height: 33px;
//     letter-spacing: 30px;
//     // text-shadow: 0px 4px 6px rgba(0,0,0,0.72);
//     color: #fff;
//     text-align: center;
//     font-style: normal;
//     text-transform: none;
//     // background: linear-gradient(90.00000000000004deg, #FFFFFF 0%, #E3FEFF 63%, #88BAFF 100%);
//   }
//   .login-left {
//     position: absolute;
//     top: 334px;
//     left: 147px;
//     width: 858px;
//     height: 540px;
//     background: url('@/assets/images/login/left-logo.png') no-repeat center / 100% 100%;
//   }
.loginContainer {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox 隐藏滚动条 */
  &::-webkit-scrollbar {
    display: none; /* Chrome、Safari 隐藏滚动条 */
  }

//   .login-right {
//     position: absolute;
//     top: 305px;
//     right: 291px;
//     width: 488px;
//     height: 508px;
//     background: url('@/assets/images/login/right-login-info.png') no-repeat center / 100% 100%;
//     .user-login {
//       position: absolute;
//       top: 72px;
//       left: 180px;
//       width: 118px;
//       height: 26px;
//       font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
//       font-weight: 400;
//       font-size: 32px;
//       // color: #D1E0F9;
//       color: #fff;
//       line-height: 26px;
//       text-align: center;
//     }
//     .username {
//       position: absolute;
//       top: 127px;
//       left: 46px;
//       width: 394px;
//       height: 72px;
//       background: url('../assets/images/login/username.png') no-repeat center / 100% 100%;
//       // :deep(.el-form-item) {
//       //   width: 120px;
//       // }
//     }
//     .password {
//       position: absolute;
//       top: 208px;
//       left: 46px;
//       width: 394px;
//       height: 72px;
//       background: url('../assets/images/login/password.png') no-repeat center / 100% 100%;
//     }
//     .forgot-password {
//       position: absolute;
//       width: 64px;
//       height: 24px;
//       top: 289px;
//       right: 58px;
//       font-family: Source Han Sans CN, Source Han Sans CN;
//       font-weight: 500;
//       font-size: 16px;
//       color: #D1E0F9;
//       line-height: 19px;
//     }
//     .login-click {
//       position: absolute;
//       bottom: 106px;
//       left: 44px;
//       width: 391px;
//       height: 61px;
//       background: url('../assets/images/login/login-btn.png') no-repeat center / 100% 100%;
//       font-family: Source Han Sans CN, Source Han Sans CN;
//       font-weight: 500;
//       font-size: 24px;
//       line-height: 50px;
//       text-align: center;
//       color: #fff;
//     }
//   }
// }
  &.narrowScreen{
    >div{
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  >div{
    left: 0;
    top: 0;
    position: absolute;
    height: 1080px;
    width: 1920px;
  }
  .login-container {
    background-image: url('@/assets/images/login/bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    // background: url('@/assets/images/login/bg.png') no-repeat center / 100% 100%;
    pointer-events: none;

    > * {
      pointer-events: auto;
    }
  }
}
</style>

 src/page/login/userlogin.vue

@@ -40,7 +40,7 @@
      </el-input>
    </el-form-item>
  </div>
  <div class="forgot-password">忘记密码</div>
  <!-- <div class="forgot-password">忘记密码</div> -->
  <div class="">
    <el-form-item>
      <el-button type="primary" @click.prevent="handleLogin" class="login-submit">

 src/styles/login.scss

@@ -1,9 +1,4 @@
.login-container {
  background: url('../assets/images/login/bg.png') no-repeat center / 100% 100%;
  position: relative;
  width: 100%;
  height: 100%;
}

.login-header {
  background: url('../assets/images/login/big-title.png') no-repeat center / 100% 100%;
  width: 100%;
@@ -140,7 +135,7 @@
  display: flex;
}
.login-left {
  padding-top: 100px;
  // padding-top: 100px;
  justify-content: center;
  flex-direction: column;
  color: #fff;

 src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue

@@ -1,7 +1,7 @@
<template>
    <div class="event-overviewdetail-right" :class="{ isMore }">
        <UserOperate/>
        <CommonTitle title="事件概况" :style="{ width: isMore ? pxToRem(820) : pxToRem(404) }" />
        <CommonTitle title="事件概况详情" :style="{ width: isMore ? pxToRem(820) : pxToRem(404) }" />

        <div class="content">
            <img

 src/views/Home/HomeLeft/InspectionRaskDetails/InspectionRaskDetails.vue

@@ -1,6 +1,6 @@
<!-- 巡检任务详情 -->
<template>
    <common-title title="巡检任务情况" :style="{ marginLeft: pxToRem(14) }" @details="detailsFun"></common-title>
    <common-title title="巡检任务概况" :style="{ marginLeft: pxToRem(14) }" @details="detailsFun"></common-title>
    <div class="inspection-rask-details">
        <div class="inspection-num">
            <div class="total">

 src/views/TaskManage/TaskIntermediateContent/AddTask.vue

@@ -18,15 +18,15 @@
                        <el-input class="ztzf-input" v-model="searchForm.name" placeholder="请输入任务/机巢名称"></el-input>
                    </div>
                    <div class="item">
                        <div class="itemchild">日期选择：</div>
                        <el-date-picker
                            popper-class="custom-date-picker"
                            class="ztzf-date-picker"
                            class="ztzf-date-picker tasktimer"
                            v-model="taskData"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            type="date"
                            placeholder="请选择日期"
                            value-format="YYYY-MM-DD"
                            :disabled-date="disabledDate"
                        />
                    </div>
                    <div class="item">
@@ -61,7 +61,7 @@
                    </div>
                    <div class="item">
                        <div class="itemchild">关联算法：</div>
                        <TaskAlgorithmBusiness :setWidth="200" :showAlgorithm="true" @algorithmChange="algorithmChange" />
                        <TaskAlgorithmBusiness :setWidth="220" :showAlgorithm="true" @algorithmChange="algorithmChange" />
                    </div>
                    <div class="item">
                        <div class="itemchild">任务描述：</div>
@@ -251,8 +251,8 @@
        return
    }

    searchForm.begin_time = `${taskData.value[0]} 00:00:00`
    searchForm.end_time = `${taskData.value[1]} 23:59:59`
    searchForm.begin_time = `${taskData.value} 00:00:00`
    searchForm.end_time = `${taskData.value} 23:59:59`
    searchForm.execute_time_arr = timeSlot.value ? [timeSlot.value] : []
    createTask(searchForm).then(res => {
        if (res.data.code === 0) {

 src/views/TaskManage/TaskIntermediateContent/TaskIntermediateContent.vue

@@ -94,7 +94,6 @@
    if (res.data.code !== 0) return;
    jobListData.value = res.data.data.records;
    total.value = res.data.data.total;
    console.log('任务管理列表',jobListData.value);
    
  });
};