cjy-Web
/
cjy_web
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
- 调整加载页面的显示方式，使其居中显示
- 更新加载中的动画效果，增加立方体旋转动画
- 修改加载中的提示文字
- 优化部分样式，如按钮颜色等
main
Tuzki 6 months ago
parent a489f9646f
commit 37584cb976
6 changed files with 111 additions and 18 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 97
      public/index.html
  2. 12
      src/assets/styles/v-vision.scss
  3. 4
      src/components/Pagination/index.vue
  4. 2
      src/views/bpm/definition/index.vue
  5. 10
      src/views/pages/case-list.vue
  6. 4
      src/views/pages/news-list.vue

97
public/index.html
Unescape View File

@ -34,6 +34,11 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 999999; z-index: 999999;
display: flex;
align-items: center;
flex-direction: column;
background-color: #ffffffe7;
justify-content: center;
} }
#loader { #loader {
@ -181,7 +186,7 @@
#loader-wrapper .load_title { #loader-wrapper .load_title {
font-family: 'Open Sans'; font-family: 'Open Sans';
color: #FFF; color: #0B51B2;
font-size: 19px; font-size: 19px;
width: 100%; width: 100%;
text-align: center; text-align: center;
@ -210,16 +215,87 @@
transform: translateY(-50%); transform: translateY(-50%);
cursor: pointer; 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> </style>
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<div id="loader-wrapper"> <div id="loader-wrapper">
<div id="loader"></div> <div class="spinner">
<div class="loader-section section-left"></div> <div class="cube1"></div>
<div class="loader-section section-right"></div> <div class="cube2"></div>
<div class="load_title">正在加载系统资源，请耐心等待</div> </div>
<div class="load_title">加载中，请耐心等待...</div>
</div> </div>
</div> </div>
<div class="kefu-box"> <div class="kefu-box">
@ -247,8 +323,15 @@
}); });
// ... existing code ... // ... existing code ...
</script> </script>
<script src='https://w1011.ttkefu.com/k/?fid=8I8EJF2' charset=utf-8></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> <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> </body>
</html> </html>

12
src/assets/styles/v-vision.scss
Unescape View File

@ -1,4 +1,4 @@
$primary: #3866F7; $Primary: #3866F7;
$secondary: #f60; $secondary: #f60;
$table-border-color: #f0f0f0; $table-border-color: #f0f0f0;
@ -105,13 +105,13 @@ img {
height: 20px; height: 20px;
padding: 0 20px; padding: 0 20px;
font-size: 12px; font-size: 12px;
color: $primary; color: #3976fa;
line-height: 18px; line-height: 18px;
cursor: pointer; cursor: pointer;
transition: all .4s; transition: all .4s;
&:after { &:after {
color: rgba(var($primary), 1); color: rgba(var(#3976fa), 1);
transform: rotate(0deg); transform: rotate(0deg);
transition: all .6s; transition: all .6s;
} }
@ -136,8 +136,8 @@ img {
} }
.el-button--primary { .el-button--primary {
background-color: rgba($primary, 1); background-color: rgba(#3976fa, 1);
border-color: rgba($primary, 1); border-color: rgba(#3976fa, 1);
} }
} }
} }
@ -472,7 +472,7 @@ img {
} }
.cjy-case-list { .cjy-case-list {
padding: 100px 0; padding: 100px 0 0;
.list-item { .list-item {
padding: 10px; padding: 10px;

4
src/components/Pagination/index.vue
Unescape View File

@ -105,8 +105,8 @@ export default {
<style scoped> <style scoped>
.pagination-container { .pagination-container {
background: #fff; /* background: #fff; */
padding: 32px 16px; padding: 32px 16px!important;
} }
.pagination-container.hidden { .pagination-container.hidden {
display: none; display: none;

2
src/views/bpm/definition/index.vue
Unescape View File

@ -65,7 +65,7 @@
</el-dialog> </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"/> @pagination="getList"/>
<!-- ========== 流程任务分配规则 ========== --> <!-- ========== 流程任务分配规则 ========== -->

10
src/views/pages/case-list.vue
Unescape View File

@ -31,6 +31,8 @@
</div> </div>
</div> </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> </div>
<!-- 页面 底部 --> <!-- 页面 底部 -->
<VBottom></VBottom> <VBottom></VBottom>
@ -44,13 +46,14 @@ export default {
name: "case-list", name: "case-list",
data() { data() {
return { return {
total:0,//总条数
banner_data: { banner_data: {
title:null, title:null,
subtitle:null, subtitle:null,
},//广告图 },//广告图
queryParams: { queryParams: {
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 9,
type: 5, type: 5,
}, },
case_list: [],//案例列表数据 case_list: [],//案例列表数据
@ -72,6 +75,7 @@ export default {
async infoPages() { async infoPages() {
let res = await Api.getColumnInfoList(this.queryParams) let res = await Api.getColumnInfoList(this.queryParams)
this.case_list = res.data.list this.case_list = res.data.list
this.total = res.data.total;
}, },
// 跳转页面 函数 // 跳转页面 函数
gotoPages(val) { gotoPages(val) {
@ -82,5 +86,7 @@ export default {
</script> </script>
<style scoped> <style scoped>
.v-container{
padding-bottom: 100px;
}
</style> </style>

4
src/views/pages/news-list.vue
Unescape View File

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

Write Preview
Loading…
Cancel
Save