feat: 优化页面样式和加载动画

- 更新加载页面样式，添加立方体加载动画 - 调整页面背景和字体颜色 - 优化顶部栏和标签页样式 - 更新事件历史页面样式 - 补充打印模板信息
6 months ago · 8e0ca2a508
parent f513fad5c6
commit 8e0ca2a508
7 changed files with 144 additions and 32 deletions
--- a/public/index.html
+++ b/public/index.html
@ -1,14 +1,17 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <meta name="renderer" content="webkit">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= webpackConfig.name %></title>
-    <!--[if lt IE 11]><script>window.location.href='html/ie.html';</script><![endif]-->
-    <style>
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="renderer" content="webkit">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <title>
+    <%= webpackConfig.name %>
+  </title>
+  <!--[if lt IE 11]><script>window.location.href='html/ie.html';</script><![endif]-->
+  <style>
    html,
    body,
    #app {
@ -16,6 +19,7 @@
      margin: 0px;
      padding: 0px;
    }
+
    .chromeframe {
      margin: 0.2em 0;
      background: #ccc;
@ -30,6 +34,11 @@
      width: 100%;
      height: 100%;
      z-index: 999999;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      background-color: #000;
+      justify-content: center;
    }

    #loader {
@ -92,6 +101,7 @@
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
      }
+
      100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
@ -105,6 +115,7 @@
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
      }
+
      100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
@ -175,7 +186,7 @@

    #loader-wrapper .load_title {
      font-family: 'Open Sans';
-      color: #FFF;
+      color: #0767c0;
      font-size: 19px;
      width: 100%;
      text-align: center;
@ -190,19 +201,92 @@
      font-weight: normal;
      font-style: italic;
      font-size: 13px;
-      color: #FFF;
+      color: #0767c0;
      opacity: 0.5;
    }
+
+    .spinner {
+      width: 60px;
+      height: 60px;
+      position: relative;
+    }
+
+    .cube1,
+    .cube2 {
+      background-color: #0767c0;
+      width: 30px;
+      height: 30px;
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      -webkit-animation: cubemove 1.8s infinite ease-in-out;
+      animation: cubemove 1.8s infinite ease-in-out;
+      transform-origin: center;
+    }
+
+    .cube2 {
+      -webkit-animation-delay: -0.9s;
+      animation-delay: -0.9s;
+    }
+
+    @-webkit-keyframes cubemove {
+      25% {
+        -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
+      }
+
+      50% {
+        -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
+      }
+
+      75% {
+        -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
+      }
+
+      100% {
+        -webkit-transform: rotate(-360deg);
+      }
+    }
+
+    @keyframes cubemove {
+      25% {
+        transform: translateX(42px) rotate(-90deg) scale(0.5);
+        -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
+      }
+
+      50% {
+        transform: translateX(42px) translateY(42px) rotate(-179deg);
+        -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
+      }
+
+      50.1% {
+        transform: translateX(42px) translateY(42px) rotate(-180deg);
+        -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
+      }
+
+      75% {
+        transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
+        -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
+      }
+
+      100% {
+        transform: rotate(-360deg);
+        -webkit-transform: rotate(-360deg);
+      }
+    }
  </style>
-  </head>
-  <body>
-    <div id="app">
-	    <div id="loader-wrapper">
-		    <div id="loader"></div>
-		    <div class="loader-section section-left"></div>
-		    <div class="loader-section section-right"></div>
-		    <div class="load_title">正在加载系统资源，请耐心等待</div>
-        </div>
-	</div>
-  </body>
-</html>
+</head>
+
+<body>
+  <div id="app">
+    <div id="loader-wrapper">
+      <div class="spinner">
+        <div class="cube1"></div>
+        <div class="cube2"></div>
+      </div>
+      <div class="load_title">加载中，请耐心等待...</div>
+    </div>
+  </div>
+</body>
+
+</html>
--- a/src/assets/styles/element-variables.scss
+++ b/src/assets/styles/element-variables.scss
@ -4,7 +4,7 @@
 **/

 /* theme color */
-$--color-primary: #1890ff;
+$--color-primary: #0767c0;
 $--color-success: #13ce66;
 $--color-warning: #ffba00;
 $--color-danger: #ff4949;
--- a/src/assets/styles/v-manage.scss
+++ b/src/assets/styles/v-manage.scss
@ -1390,6 +1390,7 @@
 .m-pages {
  height: calc(100vh - 86px);
  padding: $space-medium;
+  overflow-y: scroll;
 }

 /* 页面背景 */
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@ -15,11 +15,11 @@
          <i class="el-icon-caret-bottom" />
        </div>
        <el-dropdown-menu slot="dropdown">
-          <router-link to="/user/profile">
+          <!-- <router-link to="/user/profile">
            <el-dropdown-item>个人中心</el-dropdown-item>
-          </router-link>
+          </router-link> -->
          
-          <el-dropdown-item divided @click.native="logout">
+          <el-dropdown-item style="margin-top: 0;border-top: none;" divided @click.native="logout">
            <span>退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@ -258,7 +258,7 @@ export default {
      font-size: 12px;
      margin-left: 4px;
      margin-top: 4px;
-      border-radius: 3px 3px 3px 3px;
+      border-radius: 15px;
      &:first-of-type {
        margin-left: 15px;
      }
--- a/src/views/report/eventHistory/index.vue
+++ b/src/views/report/eventHistory/index.vue
@ -8,11 +8,11 @@
      <el-form class="m-search-form" :class="searchState ? 'col' : ''" :model="queryParams" ref="queryForm"
        :inline="true" v-show="showSearch" label-width="">
        <el-form-item label="单位名称/姓名" prop="userUnit">
-          <el-input v-model="queryParams.userUnit" placeholder="请输入单位名称/姓名" clearable
+          <el-input v-model="queryParams.userUnit" placeholder="请输入单位名称/姓名" 
            @keyup.enter.native="handleQuery" />
        </el-form-item>
-        <el-form-item label="创建时间" prop="createTime">
-          <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
+        <el-form-item label="创建时间" prop="createTime" label-width="100px">
+          <el-date-picker v-model="queryParams.createTime" :clearable="false" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
            type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']" />
        </el-form-item>
@ -34,7 +34,7 @@
          <div class="event-history-item" v-for="item in list">
            <div class="event-history-item-left">
              <div class="enent-name">{{ item.userUnit || '--' }}</div>
-              <div class="event-history-item-time">创建时间:{{ item.createTime }}</div>
+              <div class="event-history-item-time">创建时间:{{ parseTime(item.createTime) }}</div>
            </div>
            <div class="event-history-item-right">
              <el-button @click="getDetail(item)">查看</el-button>
@ -171,3 +171,8 @@
    }
  }
 </script>
+<style scoped lang="scss">
+.event-history-item:not(:last-child){
+  margin-bottom: 10px;
+}
+</style>
--- a/src/views/report/eventList/printDemo.vue
+++ b/src/views/report/eventList/printDemo.vue
@ -452,6 +452,28 @@
            return acc;
          }, {
            registrationCategory: this.formData.registrationCategory,
+            equipmentType: "",//设备品种
+            productName: "",//产品名称
+            cylinderQuantity: 0,//气瓶数量
+            fillingMedium: "",//充装介质
+            nominalWorkingPressure: 0,//气瓶公称工作压力
+            cylinderVolume: 0,//气瓶容积
+            manufacturer: "",//制造单位名称
+            productionDate: "",//制造日期
+            productId: "",//产品编号
+            internalId: "",//单位内编号
+            contractor: "",//施工单位名称
+            supervisionAgency: "",//监督检验机构名称
+            userUnit: "",//使用单位名称
+            userAddress: "",//使用单位地址
+            unifiedSocialCode: "",//使用单位统一社会信用代码
+            postalCode: "",//邮政编码
+            licensePlate: "",//车牌号
+            vehicleVin:"",//车辆VIN码
+            commissionDate: "",//投入使用日期
+            telephone: "",//单位固定电话
+            safetyManager: "",//安全管理员
+            mobilePhone: "",//移动电话
            equipmentType: "高压气瓶",//设备品种
            productName: "车用气瓶",//产品名称
            postalCode: "050200",//邮政编码