提交10
This commit is contained in:
parent
e4e7e20767
commit
7e1c58b2b6
|
|
@ -9,19 +9,29 @@
|
|||
<p>查看今日水果销售情况，管理订单和库存。</p>
|
||||
</section>
|
||||
<section class="quick-actions">
|
||||
<router-link to="/order-management" class="action-item">
|
||||
<router-link to="/goods" class="action-item" @click.prevent="openModal('../assets/images/dingdanguanli.jpg', '订单管理')">
|
||||
<img src="../assets/images/dingdanguanli.jpg" alt="Order Management Icon" />
|
||||
<span>订单管理</span>
|
||||
<span>水果产品</span>
|
||||
</router-link>
|
||||
<router-link to="/stock-management" class="action-item">
|
||||
<router-link to="/shopcar" class="action-item" @click.prevent="openModal('../assets/images/kucunguanli.png', '库存管理')">
|
||||
<img src="../assets/images/kucunguanli.png" alt="Stock Management Icon" />
|
||||
<span>库存管理</span>
|
||||
<span>购物车</span>
|
||||
</router-link>
|
||||
<router-link to="/new-arrivals" class="action-item">
|
||||
<router-link to="/recommend" class="action-item" @click.prevent="openModal('../assets/images/newshop.png', '新品上架')">
|
||||
<img src="../assets/images/newshop.png" alt="New Arrivals Icon" />
|
||||
<span>新品上架</span>
|
||||
<span>推荐表</span>
|
||||
</router-link>
|
||||
</section>
|
||||
<!-- Modal -->
|
||||
<transition name="fade">
|
||||
<div v-if="showModal" class="modal-overlay" @click.self="closeModal">
|
||||
<div class="modal-content">
|
||||
<span class="close-btn" @click="closeModal">×</span>
|
||||
<img :src="currentImage" :alt="currentTitle" />
|
||||
<p>{{ currentTitle }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<section class="statistics-section">
|
||||
<div class="statistic-item">
|
||||
<h3>今日销售额</h3>
|
||||
|
|
@ -64,7 +74,21 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
// JavaScript逻辑（如有需要）
|
||||
import { ref } from 'vue';
|
||||
|
||||
const showModal = ref(false);
|
||||
const currentImage = ref('');
|
||||
const currentTitle = ref('');
|
||||
|
||||
function openModal(imageSrc, title) {
|
||||
currentImage.value = imageSrc;
|
||||
currentTitle.value = title;
|
||||
showModal.value = true;
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
showModal.value = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -93,6 +117,7 @@ $font-family: '楷体', 'Comic Sans MS', cursive, sans-serif;
|
|||
font-size: 2.5em;
|
||||
margin-bottom: 0.5em;
|
||||
text-shadow: 2px 2px 5px rgba(255, 204, 203, 0.7);
|
||||
animation: fadeInDown 1s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -127,11 +152,13 @@ $font-family: '楷体', 'Comic Sans MS', cursive, sans-serif;
|
|||
color: $primary-color;
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 0.5em;
|
||||
animation: fadeInUp 1s ease-in-out;
|
||||
}
|
||||
|
||||
p {
|
||||
color: darken($secondary-color, 20%);
|
||||
font-size: 1em;
|
||||
animation: fadeInUp 1.2s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -151,20 +178,28 @@ $font-family: '楷体', 'Comic Sans MS', cursive, sans-serif;
|
|||
border-radius: 15px;
|
||||
background-color: lighten($secondary-color, 5%);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
|
||||
img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-bottom: 10px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
animation: fadeInUp 1.4s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($secondary-color, 10%);
|
||||
transform: scale(1.05);
|
||||
img {
|
||||
transform: rotateY(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -179,19 +214,23 @@ $font-family: '楷体', 'Comic Sans MS', cursive, sans-serif;
|
|||
border-radius: 15px;
|
||||
background-color: lighten($secondary-color, 5%);
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
|
||||
h3 {
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 0.5em;
|
||||
animation: fadeInUp 1.6s ease-in-out;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
animation: fadeInUp 1.8s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($secondary-color, 10%);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -201,12 +240,14 @@ $font-family: '楷体', 'Comic Sans MS', cursive, sans-serif;
|
|||
h3 {
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 1em;
|
||||
animation: fadeInUp 2s ease-in-out;
|
||||
}
|
||||
|
||||
.calendar-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5em;
|
||||
animation: fadeInUp 2.2s ease-in-out;
|
||||
}
|
||||
|
||||
.month {
|
||||
|
|
@ -229,6 +270,7 @@ $font-family: '楷体', 'Comic Sans MS', cursive, sans-serif;
|
|||
text-align: center;
|
||||
font-size: 0.8em;
|
||||
color: #888;
|
||||
animation: fadeInUp 2.4s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -246,4 +288,103 @@ $font-family: '楷体', 'Comic Sans MS', cursive, sans-serif;
|
|||
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
animation: fadeIn 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
max-width: 90%;
|
||||
max-height: 90%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
|
||||
animation: zoomIn 0.5s ease-in-out;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 10px;
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
font-size: 2em;
|
||||
cursor: pointer;
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
// 动画定义
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue