style(public): 优化加载页面样式和布局

- 调整加载页面的显示方式，使其居中显示 - 更新加载中的动画效果，增加立方体旋转动画 - 修改加载中的提示文字 - 优化部分样式，如按钮颜色等
6 months ago · 37584cb976
parent a489f9646f
commit 37584cb976
6 changed files with 111 additions and 18 deletions
--- a/public/index.html
+++ b/public/index.html
@ -34,6 +34,11 @@
      width: 100%;
      height: 100%;
      z-index: 999999;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      background-color: #ffffffe7;
+      justify-content: center;
    }

    #loader {
@ -181,7 +186,7 @@

    #loader-wrapper .load_title {
      font-family: 'Open Sans';
-      color: #FFF;
+      color: #0B51B2;
      font-size: 19px;
      width: 100%;
      text-align: center;
@ -210,16 +215,87 @@
      transform: translateY(-50%);
      cursor: pointer;
    }
+
+    .spinner {
+      width: 60px;
+      height: 60px;
+      position: relative;
+    }
+
+    .cube1,
+    .cube2 {
+      background-color: #0B51B2;
+      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 class="spinner">
+        <div class="cube1"></div>
+        <div class="cube2"></div>
+      </div>
+      <div class="load_title">加载中，请耐心等待...</div>
    </div>
  </div>
  <div class="kefu-box">
@ -247,8 +323,15 @@
    });
    // ... existing code ...
  </script>
-  <script src='https://w1011.ttkefu.com/k/?fid=8I8EJF2' charset=utf-8></script>
-  <div style='display:none;'><a href='https://www.ttkefu.com'>在线客服</a></div>
+  <!-- <script src='https://w1011.ttkefu.com/k/?fid=8I8EJF2' charset=utf-8></script>
+  <div style='display:none;'><a href='https://www.ttkefu.com'>在线客服</a></div> -->
+  <!-- <a id="ibangkf" href="https://www.ibangkf.com">在线客服系统</a><script>(function(){var st=document.createElement("script");st.src="https://c.ibangkf.com/i/c-cjykf123.js";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(st,s);})();</script> -->
+  <script>(function(){document.getElementsByTagName("head")[0].appendChild(document.createElement("script")).src=(location.protocol.toLocaleLowerCase()=="https:"?"https:":"http:")+"//v1.fmkefu.com/cs/js/8111_8051?c=auto";})();</script><a id="egeel-flink" href="http://www.egeel.com" style="position:fixed;font-size:0">亿鸽在线客服系统</a>
+  <script>
+  /*以下两个变量可动态赋值，用于传输网站会员信息到亿鸽会话*/
+  var egeelVisitorName = "";/*该值为客户的名称，留空则以对方所在地为名*/
+  var egeelVisitorDesc = "";/*该值为客户的备注信息*/
+  </script>
 </body>

 </html>
--- a/src/assets/styles/v-vision.scss
+++ b/src/assets/styles/v-vision.scss
@ -1,4 +1,4 @@
-$primary: #3866F7;
+$Primary: #3866F7;
 $secondary: #f60;
 $table-border-color: #f0f0f0;

@ -105,13 +105,13 @@ img {
    height: 20px;
    padding: 0 20px;
    font-size: 12px;
-    color: $primary;
+    color: #3976fa;
    line-height: 18px;
    cursor: pointer;
    transition: all .4s;

    &:after {
-      color: rgba(var($primary), 1);
+      color: rgba(var(#3976fa), 1);
      transform: rotate(0deg);
      transition: all .6s;
    }
@ -136,8 +136,8 @@ img {
    }

    .el-button--primary {
-      background-color: rgba($primary, 1);
-      border-color: rgba($primary, 1);
+      background-color: rgba(#3976fa, 1);
+      border-color: rgba(#3976fa, 1);
    }
  }
 }
@ -472,7 +472,7 @@ img {
 }

 .cjy-case-list {
-  padding: 100px 0;
+  padding: 100px 0 0;

  .list-item {
    padding: 10px;
--- a/src/components/Pagination/index.vue
+++ b/src/components/Pagination/index.vue
@ -105,8 +105,8 @@ export default {

 <style scoped>
 .pagination-container {
-  background: #fff;
-  padding: 32px 16px;
+  /* background: #fff; */
+  padding: 32px 16px!important;
 }
 .pagination-container.hidden {
  display: none;
--- a/src/views/bpm/definition/index.vue
+++ b/src/views/bpm/definition/index.vue
@ -65,7 +65,7 @@
    </el-dialog>

    <!-- 分页组件 -->
-    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+    <pagination class="m-pagination m-t-small" v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                @pagination="getList"/>

    <!-- ========== 流程任务分配规则 ========== -->
--- a/src/views/pages/case-list.vue
+++ b/src/views/pages/case-list.vue
@ -31,6 +31,8 @@
          </div>
        </div>
      </div>
+      <pagination v-show="total > 0" :pageSizes="[9,18,27,36]" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+        @pagination="infoPages"/>
    </div>
    <!-- 页面 底部 -->
    <VBottom></VBottom>
@ -44,13 +46,14 @@ export default {
  name: "case-list",
  data() {
    return {
+      total:0,//总条数
      banner_data: {
        title:null,
        subtitle:null,
      },//广告图
      queryParams: {
        pageNo: 1,
-        pageSize: 10,
+        pageSize: 9,
        type: 5,
      },
      case_list: [],//案例列表数据
@ -72,6 +75,7 @@ export default {
    async infoPages() {
      let res = await Api.getColumnInfoList(this.queryParams)
      this.case_list = res.data.list
+      this.total = res.data.total;
    },
    // 跳转页面 函数
    gotoPages(val) {
@ -82,5 +86,7 @@ export default {
 </script>

 <style scoped>
-
+  .v-container{
+    padding-bottom: 100px;
+  }
 </style>
--- a/src/views/pages/news-list.vue
+++ b/src/views/pages/news-list.vue
@ -36,6 +36,8 @@
              </div>
            </div>
          </div>
+          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+            @pagination="infoPages"/>
        </el-tab-pane>

      </el-tabs>
@ -54,6 +56,7 @@
    data() {
      return {
        banner_data: {},//广告图
+        total: 0,
        queryParams: {
          pageNo: 1,
          pageSize: 10,
@ -90,6 +93,7 @@
        this.queryParams.infoType = Number(this.active)
        let res = await Api.getColumnInfoList(this.queryParams)
        this.news_list = res.data.list
+        this.total = res.data.total;
      },
      handleClick() {
        this.infoPages()