|
|
|
@ -1,20 +1,51 @@
|
|
|
|
|
<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 {
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {}
|
|
|
|
|
return {
|
|
|
|
|
historyInfo: {}
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
computed: {},
|
|
|
|
@ -22,85 +53,74 @@
|
|
|
|
|
watch: {},
|
|
|
|
|
|
|
|
|
|
created() {
|
|
|
|
|
|
|
|
|
|
this.getHistoryInfo();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
mounted() {
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
mounted() {},
|
|
|
|
|
|
|
|
|
|
methods: {}
|
|
|
|
|
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 {
|
|
|
|
|
.home {
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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>
|
|
|
|
|