王岚馨
11 months ago
commit
0a8f850c19
|
After Width: | Height: | Size: 146 KiB |
|
Before Width: | Height: | Size: 114 KiB After Width: | Height: | Size: 555 KiB |
@ -1,106 +1,126 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="welcome-title">
|
||||
<h2 class="playful">
|
||||
<span>欢</span>
|
||||
<span>迎</span>
|
||||
<span>光</span>
|
||||
<span>临</span>
|
||||
</h2>
|
||||
<div class="home">
|
||||
<h1>Welcome to the Admin Dashboard!</h1>
|
||||
<p>Here, you can manage all aspects of your application.</p>
|
||||
|
||||
<div class="stats-container">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">
|
||||
<i class="fas fa-users"></i>
|
||||
</div>
|
||||
<div class="stat-info">
|
||||
<h2>网站今日访问量</h2>
|
||||
<p>{{historyInfo.ip_count_today}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="stats-container">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">
|
||||
<i class="fas fa-users"></i>
|
||||
</div>
|
||||
<div class="stat-info">
|
||||
<h2>网站昨日访问量</h2>
|
||||
<p>{{historyInfo.ip_count_yest}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">
|
||||
<i class="fas fa-shopping-cart"></i>
|
||||
</div>
|
||||
<div class="stat-info">
|
||||
<h2>网站总访问量</h2>
|
||||
<p>{{historyInfo.ip_history_count}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
|
||||
created() {
|
||||
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
historyInfo: {}
|
||||
};
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
|
||||
created() {
|
||||
this.getHistoryInfo();
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
|
||||
methods: {
|
||||
getHistoryInfo() {
|
||||
this.$http.get(this.$constant.baseURL + "/webInfo/getHistoryInfo", {}, true)
|
||||
.then((res) => {
|
||||
if (!this.$common.isEmpty(res.data)) {
|
||||
this.historyInfo = res.data;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$message({
|
||||
message: error.message,
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.welcome-title {
|
||||
text-align: center;
|
||||
font-size: 50px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.playful span {
|
||||
position: relative;
|
||||
color: #5362f6;
|
||||
text-shadow: 0.25px 0.25px #e485f8, 0.5px 0.5px #e485f8, 0.75px 0.75px #e485f8,
|
||||
1px 1px #e485f8, 1.25px 1.25px #e485f8, 1.5px 1.5px #e485f8, 1.75px 1.75px #e485f8,
|
||||
2px 2px #e485f8, 2.25px 2.25px #e485f8, 2.5px 2.5px #e485f8, 2.75px 2.75px #e485f8,
|
||||
3px 3px #e485f8, 3.25px 3.25px #e485f8, 3.5px 3.5px #e485f8, 3.75px 3.75px #e485f8,
|
||||
4px 4px #e485f8, 4.25px 4.25px #e485f8, 4.5px 4.5px #e485f8, 4.75px 4.75px #e485f8,
|
||||
5px 5px #e485f8, 5.25px 5.25px #e485f8, 5.5px 5.5px #e485f8, 5.75px 5.75px #e485f8,
|
||||
6px 6px #e485f8;
|
||||
animation: scatter 1.75s infinite;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.playful span:nth-child(2n) {
|
||||
color: #ed625c;
|
||||
text-shadow: 0.25px 0.25px #f2a063, 0.5px 0.5px #f2a063, 0.75px 0.75px #f2a063,
|
||||
1px 1px #f2a063, 1.25px 1.25px #f2a063, 1.5px 1.5px #f2a063, 1.75px 1.75px #f2a063,
|
||||
2px 2px #f2a063, 2.25px 2.25px #f2a063, 2.5px 2.5px #f2a063, 2.75px 2.75px #f2a063,
|
||||
3px 3px #f2a063, 3.25px 3.25px #f2a063, 3.5px 3.5px #f2a063, 3.75px 3.75px #f2a063,
|
||||
4px 4px #f2a063, 4.25px 4.25px #f2a063, 4.5px 4.5px #f2a063, 4.75px 4.75px #f2a063,
|
||||
5px 5px #f2a063, 5.25px 5.25px #f2a063, 5.5px 5.5px #f2a063, 5.75px 5.75px #f2a063,
|
||||
6px 6px #f2a063;
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
.playful span:nth-child(3n) {
|
||||
color: #ffd913;
|
||||
text-shadow: 0.25px 0.25px #6ec0a9, 0.5px 0.5px #6ec0a9, 0.75px 0.75px #6ec0a9,
|
||||
1px 1px #6ec0a9, 1.25px 1.25px #6ec0a9, 1.5px 1.5px #6ec0a9, 1.75px 1.75px #6ec0a9,
|
||||
2px 2px #6ec0a9, 2.25px 2.25px #6ec0a9, 2.5px 2.5px #6ec0a9, 2.75px 2.75px #6ec0a9,
|
||||
3px 3px #6ec0a9, 3.25px 3.25px #6ec0a9, 3.5px 3.5px #6ec0a9, 3.75px 3.75px #6ec0a9,
|
||||
4px 4px #6ec0a9, 4.25px 4.25px #6ec0a9, 4.5px 4.5px #6ec0a9, 4.75px 4.75px #6ec0a9,
|
||||
5px 5px #6ec0a9, 5.25px 5.25px #6ec0a9, 5.5px 5.5px #6ec0a9, 5.75px 5.75px #6ec0a9,
|
||||
6px 6px #6ec0a9;
|
||||
animation-delay: 0.15s;
|
||||
}
|
||||
|
||||
.playful span:nth-child(5n) {
|
||||
color: #555bff;
|
||||
text-shadow: 0.25px 0.25px #e485f8, 0.5px 0.5px #e485f8, 0.75px 0.75px #e485f8,
|
||||
1px 1px #e485f8, 1.25px 1.25px #e485f8, 1.5px 1.5px #e485f8, 1.75px 1.75px #e485f8,
|
||||
2px 2px #e485f8, 2.25px 2.25px #e485f8, 2.5px 2.5px #e485f8, 2.75px 2.75px #e485f8,
|
||||
3px 3px #e485f8, 3.25px 3.25px #e485f8, 3.5px 3.5px #e485f8, 3.75px 3.75px #e485f8,
|
||||
4px 4px #e485f8, 4.25px 4.25px #e485f8, 4.5px 4.5px #e485f8, 4.75px 4.75px #e485f8,
|
||||
5px 5px #e485f8, 5.25px 5.25px #e485f8, 5.5px 5.5px #e485f8, 5.75px 5.75px #e485f8,
|
||||
6px 6px #e485f8;
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
.playful span:nth-child(7n) {
|
||||
color: #ff9c55;
|
||||
text-shadow: 0.25px 0.25px #ff5555, 0.5px 0.5px #ff5555, 0.75px 0.75px #ff5555,
|
||||
1px 1px #ff5555, 1.25px 1.25px #ff5555, 1.5px 1.5px #ff5555, 1.75px 1.75px #ff5555,
|
||||
2px 2px #ff5555, 2.25px 2.25px #ff5555, 2.5px 2.5px #ff5555, 2.75px 2.75px #ff5555,
|
||||
3px 3px #ff5555, 3.25px 3.25px #ff5555, 3.5px 3.5px #ff5555, 3.75px 3.75px #ff5555,
|
||||
4px 4px #ff5555, 4.25px 4.25px #ff5555, 4.5px 4.5px #ff5555, 4.75px 4.75px #ff5555,
|
||||
5px 5px #ff5555, 5.25px 5.25px #ff5555, 5.5px 5.5px #ff5555, 5.75px 5.75px #ff5555,
|
||||
6px 6px #ff5555;
|
||||
animation-delay: 0.25s;
|
||||
}
|
||||
|
||||
.home {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 32px;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 18px;
|
||||
color: #666;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.stats-container {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background-color: #f2f2f2;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.stat-info h2 {
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.stat-info p {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
Before Width: | Height: | Size: 97 KiB |
Loading…
Reference in new issue