From 8aaf0180a50a92c1876c35ff53336a1a46532baa Mon Sep 17 00:00:00 2001
From: licp <lichunping@guanfang.com.cn>
Date: 星期二, 16 四月 2024 18:10:04 +0800
Subject: [PATCH] 优化页面
---
src/components/view/index-index.vue | 178 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 174 insertions(+), 4 deletions(-)
diff --git a/src/components/view/index-index.vue b/src/components/view/index-index.vue
index 479fcde..bff6116 100644
--- a/src/components/view/index-index.vue
+++ b/src/components/view/index-index.vue
@@ -1,16 +1,186 @@
<style scoped>
+ .index {
+ width: 100%;
+ height: calc(100% - 50px);
+ overflow-y: auto;
+ padding: 25px 0;
+ }
+
+ .left-1 {
+ background-image: url("../../../static/img/棣栭〉鍥剧墖1.png");
+ background-size: 100% 100%;
+ height: 118px;
+ margin-bottom: 10px;
+ }
+
+ .left-1 .say {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ margin-left: 15%;
+ width: 45%;
+ }
+
+ .left-1 .say div {
+ color: #fff;
+ margin: 4px 0;
+ }
+
+ .left-1 .say-1 {
+ font-size: 18px;
+ }
+
+ .left-1 .say-2 {
+ font-size: 17px;
+ }
+
+ ::-webkit-scrollbar {
+ width: 0px;
+ }
+
+ ::-webkit-scrollbar-thumb {
+ background-color: transparent;
+ border-radius: 3px;
+ }
+
+ .card{
+ background: #FFFFFF;
+ border-radius: 16px;
+ width: 100%;
+ box-sizing: border-box;
+ }
+
+ .right-1{
+ padding: 14px 10px 4px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ .right-1-item{
+ width: 25%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .right-1-item .mun{
+ margin-left: 6px;
+ color: #0166E2;
+ }
+
</style>
<template>
- <div class="index">棣栭〉</div>
+ <div class="index">
+ <el-row :gutter="25">
+ <el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14">
+ <div class="left-1">
+ <div class="say">
+ <div style="display: flex;align-items: center;flex-wrap: wrap;">
+ <div class="say-1">{{user.name}} 鎮ㄥソ锛佺鎮ㄥ紑蹇冩瘡涓�澶�</div>
+ <div class="say-2">褰撳墠鏃堕棿锛� {{now}}</div>
+ </div>
+ </div>
+ </div>
+ <div class="left-2 card"></div>
+ </el-col>
+ <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
+ <div class="right-1 card">
+ <div class="right-1-item">
+ <div class="img">
+ <img src="../../../static/img/index-0.svg" alt="">
+ </div>
+ <div class="mun">
+ <p style="font-size: 20px;">254</p>
+ <p style="font-size: 14px;margin-bottom: 10px;">鎴戠殑浠ｅ姙</p>
+ </div>
+ </div>
+ <div class="right-1-item">
+ <div class="img">
+ <img src="../../../static/img/index-1.svg" alt="">
+ </div>
+ <div class="mun">
+ <p style="font-size: 20px;">254</p>
+ <p style="font-size: 14px;margin-bottom: 10px;">宸插姙浜嬪疁</p>
+ </div>
+ </div>
+ <div class="right-1-item">
+ <div class="img">
+ <img src="../../../static/img/index-2.svg" alt="">
+ </div>
+ <div class="mun">
+ <p style="font-size: 20px;">254</p>
+ <p style="font-size: 14px;margin-bottom: 10px;">鍓╀綑寰呭姙</p>
+ </div>
+ </div>
+ <div class="right-1-item">
+ <div class="img">
+ <img src="../../../static/img/index-3.svg" alt="">
+ </div>
+ <div class="mun">
+ <p style="font-size: 20px;">254</p>
+ <p style="font-size: 14px;margin-bottom: 10px;">杩戞湡浜嬪疁</p>
+ </div>
+ </div>
+ </div>
+ <div class="right-2 card">
+ </div>
+ <div class="right-3 card">
+ </div>
+ </el-col>
+ </el-row>
+ </div>
</template>
<script>
- export default{
+ export default {
data() {
- return{}
+ return {
+ user: {},
+ now: null,
+ }
},
mounted() {
+ this.user = JSON.parse(localStorage.getItem('user'))
+ this.nowTime()
+ this.getDataList()
+ setInterval(() => {
+ this.nowTime()
+ }, 1000)
+ },
+ methods: {
+ nowTime() {
+ var date = new Date();
+ var y = date.getFullYear();
+ var m = date.getMonth() + 1;
+ var d = date.getDate();
+ var h = date.getHours();
+ this.timeH = h
+ var min = date.getMinutes();
+ var s = date.getSeconds();
+ if (s < 10) {
+ s = "0" + s;
+ }
+ if (min < 10) {
+ min = "0" + min;
+ }
+ if (h < 10) {
+ h = "0" + h;
+ }
+ if (d < 10) {
+ d = "0" + d;
+ }
+ if (m < 10) {
+ m = "0" + m;
+ }
+ this.now = y + "-" + m + "-" + d + " " + h + ":" + min + ":" + s;
+ },
+ getDataList() {
+ this.$axios.get(this.$api.dataReporting.getDataList).then(res => {
+ this.data = res.data
+ })
+ }
}
}
-</script>
\ No newline at end of file
+</script>
--
Gitblit v1.9.3