前端补充页面

src/views/chargeFee.vue

@@ -1,13 +1,59 @@
 <template>
-    <div>
-        <div class="head-word">这个月的水费是-------</div>
-        <div class="mid-word">{{ waterFee }}元！！</div>
+    <div class="fee-container">
+        <el-card class="fee-card">
+            <div class="fee-header">
+                <el-icon class="header-icon"><Money /></el-icon>
+                <span>本月费用账单</span>
+            </div>
+
+            <div class="fee-content">
+                <!-- 水费展示 -->
+                <div class="fee-item">
+                    <div class="fee-label">
+                        <el-icon><WaterMeter /></el-icon>
+                        <span>本月水费</span>
+                    </div>
+                    <div class="fee-amount">
+                        <span class="amount">{{ waterFee }}</span>
+                        <span class="unit">元</span>
+                    </div>
+                </div>
+
+                <!-- 电费展示 -->
+                <div class="fee-item">
+                    <div class="fee-label">
+                        <el-icon><Lightning /></el-icon>
+                        <span>本月电费</span>
+                    </div>
+                    <div class="fee-amount">
+                        <span class="amount">{{ electricityFee }}</span>
+                        <span class="unit">元</span>
+                    </div>
+                </div>
 
-        <div class="last-word">这个月的电费是-------</div>
-        <div class="mid-word">{{ electricityFee }}元！！</div>
+                <!-- 总费用和缴费按钮 -->
+                <div class="fee-total">
+                    <div class="total-amount">
+                        <span>总计：</span>
+                        <span class="total-number">{{ waterFee + electricityFee }}</span>
+                        <span class="unit">元</span>
+                    </div>
+                    <el-button 
+                        type="primary" 
+                        :disabled="isPaid"
+                        @click="handlePayment"
+                        size="large"
+                    >
+                        {{ isPaid ? '已完成缴费' : '立即缴费' }}
+                    </el-button>
+                </div>
+            </div>
+        </el-card>
 
-        <div class="last-word">请立即缴费~~~</div>
-        <img src="../assets/charge.png" alt="">
+        <!-- 底部提示图片 -->
+        <div class="image-container">
+            <img src="../assets/charge.png" alt="缴费提示">
+        </div>
     </div>
 </template>
 
@@ -20,6 +66,7 @@ export default {
         return {
             waterFee: 5000,
             electricityFee: 10000,
+            isPaid: false
         };
     },
     created() {
@@ -38,31 +85,150 @@ export default {
                     });
                 }
             });
+        },
+        handlePayment() {
+            this.isPaid = true;
+            ElMessage({
+                message: "缴费成功！",
+                type: "success"
+            });
         }
     },
 };
 </script>
+
 <style scoped>
-.head-word {
-    font-size: 35px;
+.fee-container {
+    padding: 40px;
+    min-height: 100vh;
+    background-color: #f0f9ff;
+}
+
+.fee-card {
+    max-width: 800px;
+    margin: 0 auto;
+    border-radius: 16px;
+    box-shadow: 0 4px 20px rgba(19, 152, 255, 0.1);
+}
+
+.fee-header {
+    display: flex;
+    align-items: center;
+    font-size: 24px;
+    color: #1398ff;
+    margin-bottom: 40px;
+    padding-bottom: 20px;
+    border-bottom: 2px solid #e6f4ff;
+}
+
+.header-icon {
+    font-size: 28px;
+    margin-right: 12px;
+}
+
+.fee-content {
+    padding: 20px 0;
+}
+
+.fee-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px;
+    margin-bottom: 20px;
+    background-color: #f8fcff;
+    border-radius: 12px;
+    transition: all 0.3s ease;
+}
+
+.fee-item:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(19, 152, 255, 0.1);
+}
+
+.fee-label {
+    display: flex;
+    align-items: center;
+    font-size: 18px;
+    color: #666;
+}
+
+.fee-label .el-icon {
+    margin-right: 8px;
+    font-size: 20px;
+    color: #1398ff;
+}
+
+.fee-amount {
+    display: flex;
+    align-items: baseline;
+}
+
+.amount {
+    font-size: 32px;
     font-weight: bold;
-    margin-top: 40px;
-    margin-left: 150px;
+    color: #1398ff;
+    margin-right: 4px;
 }
-.mid-word {
-    font-size: 33px;
-    /* font-weight: bold; */
+
+.unit {
+    font-size: 16px;
+    color: #666;
+}
+
+.fee-total {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     margin-top: 40px;
-    margin-left: 600px;
+    padding-top: 20px;
+    border-top: 2px solid #e6f4ff;
 }
-.last-word {
-    font-size: 35px;
+
+.total-amount {
+    font-size: 20px;
+    color: #333;
+}
+
+.total-number {
+    font-size: 36px;
     font-weight: bold;
+    color: #1398ff;
+    margin: 0 8px;
+}
+
+:deep(.el-button--primary) {
+    background-color: #1398ff;
+    border-color: #1398ff;
+    padding: 12px 36px;
+    font-size: 16px;
+    transition: all 0.3s ease;
+}
+
+:deep(.el-button--primary:hover:not(:disabled)) {
+    background-color: #0d86e9;
+    border-color: #0d86e9;
+    transform: translateY(-2px);
+}
+
+:deep(.el-button--primary:disabled) {
+    background-color: #a1d4ff;
+    border-color: #a1d4ff;
+}
+
+.image-container {
+    text-align: center;
     margin-top: 40px;
-    margin-left: 150px;
 }
-img {
-    width: 350px;
-    margin-left: 550px;
+
+.image-container img {
+    width: 250px;
+    opacity: 0.8;
+    transition: all 0.3s ease;
+}
+
+.image-container img:hover {
+    opacity: 1;
+    transform: scale(1.05);
 }
 </style>