597 lines
14 KiB
Vue
597 lines
14 KiB
Vue
|
<template>
|
|||
|
|
<div class="service-page">
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<!-- 服务入口 -->
|
|||
|
|
<el-col :span="16">
|
|||
|
|
<el-card class="service-grid">
|
|||
|
|
<template #header>
|
|||
|
|
<div class="card-header">
|
|||
|
|
<span>生活服务</span>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<div class="grid-container">
|
|||
|
|
<div
|
|||
|
|
v-for="service in services"
|
|||
|
|
:key="service.id"
|
|||
|
|
class="service-item"
|
|||
|
|
@click="handleService(service)"
|
|||
|
|
>
|
|||
|
|
<el-icon :size="40" :color="service.color">
|
|||
|
|
<component :is="service.icon" />
|
|||
|
|
</el-icon>
|
|||
|
|
<h3>{{ service.name }}</h3>
|
|||
|
|
<p>{{ service.description }}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-card>
|
|||
|
|
|
|||
|
|
<!-- 社区团购 -->
|
|||
|
|
<el-card class="group-buy mt-20">
|
|||
|
|
<template #header>
|
|||
|
|
<div class="card-header">
|
|||
|
|
<span>社区团购</span>
|
|||
|
|
<el-radio-group v-model="groupBuyFilter" size="small">
|
|||
|
|
<el-radio-button label="ongoing">进行中</el-radio-button>
|
|||
|
|
<el-radio-button label="upcoming">即将开始</el-radio-button>
|
|||
|
|
<el-radio-button label="ended">已结束</el-radio-button>
|
|||
|
|
</el-radio-group>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<div class="group-buy-list">
|
|||
|
|
<div
|
|||
|
|
v-for="item in filteredGroupBuyItems"
|
|||
|
|
:key="item.id"
|
|||
|
|
class="group-buy-item"
|
|||
|
|
>
|
|||
|
|
<el-image :src="item.image" fit="cover">
|
|||
|
|
<template #error>
|
|||
|
|
<div class="image-slot">
|
|||
|
|
<el-icon><Picture /></el-icon>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</el-image>
|
|||
|
|
<div class="item-info">
|
|||
|
|
<h4>{{ item.title }}</h4>
|
|||
|
|
<p class="description">{{ item.description }}</p>
|
|||
|
|
<div class="price-info">
|
|||
|
|
<div class="price">
|
|||
|
|
<span class="current">¥{{ item.groupPrice }}</span>
|
|||
|
|
<span class="original">¥{{ item.originalPrice }}</span>
|
|||
|
|
</div>
|
|||
|
|
<span class="participants">{{ item.participants }}人已参与</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="progress-info">
|
|||
|
|
<el-progress
|
|||
|
|
:percentage="(item.participants / item.target) * 100"
|
|||
|
|
:format="() => `${item.participants}/${item.target}人`"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<el-button
|
|||
|
|
type="primary"
|
|||
|
|
:disabled="item.status === 'ended'"
|
|||
|
|
@click="joinGroupBuy(item)"
|
|||
|
|
>
|
|||
|
|
{{ getGroupBuyButtonText(item.status) }}
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-card>
|
|||
|
|
</el-col>
|
|||
|
|
|
|||
|
|
<!-- 服务记录 -->
|
|||
|
|
<el-col :span="8">
|
|||
|
|
<!-- 进行中的服务 -->
|
|||
|
|
<el-card class="active-services">
|
|||
|
|
<template #header>
|
|||
|
|
<div class="card-header">
|
|||
|
|
<span>进行中的服务</span>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<el-timeline>
|
|||
|
|
<el-timeline-item
|
|||
|
|
v-for="service in activeServices"
|
|||
|
|
:key="service.id"
|
|||
|
|
:type="service.status"
|
|||
|
|
:timestamp="service.time"
|
|||
|
|
>
|
|||
|
|
<h4>{{ service.title }}</h4>
|
|||
|
|
<p>{{ service.description }}</p>
|
|||
|
|
<div class="service-actions">
|
|||
|
|
<el-button
|
|||
|
|
type="primary"
|
|||
|
|
link
|
|||
|
|
@click="contactService(service)"
|
|||
|
|
>
|
|||
|
|
联系服务人员
|
|||
|
|
</el-button>
|
|||
|
|
<el-button
|
|||
|
|
type="danger"
|
|||
|
|
link
|
|||
|
|
@click="cancelService(service)"
|
|||
|
|
>
|
|||
|
|
取消服务
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
</el-timeline-item>
|
|||
|
|
</el-timeline>
|
|||
|
|
</el-card>
|
|||
|
|
|
|||
|
|
<!-- 缴费提醒 -->
|
|||
|
|
<el-card class="payment-reminder mt-20">
|
|||
|
|
<template #header>
|
|||
|
|
<div class="card-header">
|
|||
|
|
<span>缴费提醒</span>
|
|||
|
|
<el-button type="primary" text @click="batchPayment">
|
|||
|
|
一键缴费
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<div class="payment-list">
|
|||
|
|
<div
|
|||
|
|
v-for="bill in unpaidBills"
|
|||
|
|
:key="bill.id"
|
|||
|
|
class="payment-item"
|
|||
|
|
>
|
|||
|
|
<div class="bill-info">
|
|||
|
|
<el-icon :color="bill.color"><component :is="bill.icon" /></el-icon>
|
|||
|
|
<div class="bill-details">
|
|||
|
|
<h4>{{ bill.title }}</h4>
|
|||
|
|
<p>{{ bill.period }}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="bill-amount">
|
|||
|
|
<span class="amount">¥{{ bill.amount }}</span>
|
|||
|
|
<el-button
|
|||
|
|
type="primary"
|
|||
|
|
size="small"
|
|||
|
|
@click="payBill(bill)"
|
|||
|
|
>
|
|||
|
|
立即缴费
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-card>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<!-- 家政服务预约对话框 -->
|
|||
|
|
<el-dialog
|
|||
|
|
v-model="serviceDialogVisible"
|
|||
|
|
:title="currentService?.name"
|
|||
|
|
width="50%"
|
|||
|
|
>
|
|||
|
|
<el-form :model="serviceForm" label-width="100px">
|
|||
|
|
<el-form-item label="服务类型">
|
|||
|
|
<el-select v-model="serviceForm.type" placeholder="请选择服务类型">
|
|||
|
|
<el-option
|
|||
|
|
v-for="type in currentService?.types"
|
|||
|
|
:key="type.value"
|
|||
|
|
:label="type.label"
|
|||
|
|
:value="type.value"
|
|||
|
|
/>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="预约时间">
|
|||
|
|
<el-date-picker
|
|||
|
|
v-model="serviceForm.date"
|
|||
|
|
type="datetime"
|
|||
|
|
placeholder="选择日期时间"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="服务地址">
|
|||
|
|
<el-input v-model="serviceForm.address" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="备注说明">
|
|||
|
|
<el-input
|
|||
|
|
v-model="serviceForm.notes"
|
|||
|
|
type="textarea"
|
|||
|
|
:rows="3"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
<template #footer>
|
|||
|
|
<span class="dialog-footer">
|
|||
|
|
<el-button @click="serviceDialogVisible = false">取消</el-button>
|
|||
|
|
<el-button type="primary" @click="submitService">确认预约</el-button>
|
|||
|
|
</span>
|
|||
|
|
</template>
|
|||
|
|
</el-dialog>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ref, computed } from 'vue'
|
|||
|
|
import {
|
|||
|
|
Box,
|
|||
|
|
Van,
|
|||
|
|
Money,
|
|||
|
|
House,
|
|||
|
|
Tools,
|
|||
|
|
ShoppingCart,
|
|||
|
|
Picture,
|
|||
|
|
WaterMeter,
|
|||
|
|
Lightning,
|
|||
|
|
Connection
|
|||
|
|
} from '@element-plus/icons-vue'
|
|||
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|||
|
|
|
|||
|
|
// 服务列表
|
|||
|
|
const services = [
|
|||
|
|
{
|
|||
|
|
id: 1,
|
|||
|
|
name: '家政服务',
|
|||
|
|
description: '专业保洁、护理等服务',
|
|||
|
|
icon: 'House',
|
|||
|
|
color: '#409EFF',
|
|||
|
|
types: [
|
|||
|
|
{ label: '日常保洁', value: 'cleaning' },
|
|||
|
|
{ label: '深度保洁', value: 'deep-cleaning' },
|
|||
|
|
{ label: '护理服务', value: 'care' }
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 2,
|
|||
|
|
name: '快递代收',
|
|||
|
|
description: '快递代收和暂存服务',
|
|||
|
|
icon: 'Box',
|
|||
|
|
color: '#67C23A'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 3,
|
|||
|
|
name: '水电缴费',
|
|||
|
|
description: '水电费在线缴纳',
|
|||
|
|
icon: 'Money',
|
|||
|
|
color: '#E6A23C'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 4,
|
|||
|
|
name: '物业服务',
|
|||
|
|
description: '物业报修、投诉建议',
|
|||
|
|
icon: 'House',
|
|||
|
|
color: '#F56C6C'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 5,
|
|||
|
|
name: '维修服务',
|
|||
|
|
description: '家电维修、管道疏通',
|
|||
|
|
icon: 'Tools',
|
|||
|
|
color: '#909399'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 6,
|
|||
|
|
name: '社区团购',
|
|||
|
|
description: '团购优惠、便民服务',
|
|||
|
|
icon: 'ShoppingCart',
|
|||
|
|
color: '#9C27B0'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
// 团购商品
|
|||
|
|
const groupBuyFilter = ref('ongoing')
|
|||
|
|
const groupBuyItems = ref([
|
|||
|
|
{
|
|||
|
|
id: 1,
|
|||
|
|
title: '新鲜水果礼盒',
|
|||
|
|
description: '精选时令水果，营养美味',
|
|||
|
|
image: 'https://example.com/fruits.jpg',
|
|||
|
|
groupPrice: 99,
|
|||
|
|
originalPrice: 199,
|
|||
|
|
participants: 35,
|
|||
|
|
target: 50,
|
|||
|
|
status: 'ongoing'
|
|||
|
|
},
|
|||
|
|
// 添加更多团购商品...
|
|||
|
|
])
|
|||
|
|
|
|||
|
|
// 进行中的服务
|
|||
|
|
const activeServices = ref([
|
|||
|
|
{
|
|||
|
|
id: 1,
|
|||
|
|
title: '家政保洁服务',
|
|||
|
|
description: '预约时间：2024-03-21 14:00',
|
|||
|
|
time: '2024-03-21 14:00',
|
|||
|
|
status: 'primary'
|
|||
|
|
},
|
|||
|
|
// 添加更多服务记录...
|
|||
|
|
])
|
|||
|
|
|
|||
|
|
// 未缴费账单
|
|||
|
|
const unpaidBills = ref([
|
|||
|
|
{
|
|||
|
|
id: 1,
|
|||
|
|
title: '水费',
|
|||
|
|
period: '2024年2月',
|
|||
|
|
amount: 85.5,
|
|||
|
|
icon: 'WaterMeter',
|
|||
|
|
color: '#409EFF'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 2,
|
|||
|
|
title: '电费',
|
|||
|
|
period: '2024年2月',
|
|||
|
|
amount: 156.8,
|
|||
|
|
icon: 'Lightning',
|
|||
|
|
color: '#E6A23C'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 3,
|
|||
|
|
title: '物业费',
|
|||
|
|
period: '2024年第一季度',
|
|||
|
|
amount: 450,
|
|||
|
|
icon: 'House',
|
|||
|
|
color: '#67C23A'
|
|||
|
|
}
|
|||
|
|
])
|
|||
|
|
|
|||
|
|
// 服务预约表单
|
|||
|
|
const serviceDialogVisible = ref(false)
|
|||
|
|
const currentService = ref<any>(null)
|
|||
|
|
const serviceForm = ref({
|
|||
|
|
type: '',
|
|||
|
|
date: '',
|
|||
|
|
address: '',
|
|||
|
|
notes: ''
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 计算属性
|
|||
|
|
const filteredGroupBuyItems = computed(() => {
|
|||
|
|
return groupBuyItems.value.filter(item => item.status === groupBuyFilter.value)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 方法
|
|||
|
|
const handleService = (service: any) => {
|
|||
|
|
currentService.value = service
|
|||
|
|
serviceDialogVisible.value = true
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const submitService = () => {
|
|||
|
|
ElMessage.success('服务预约成功')
|
|||
|
|
serviceDialogVisible.value = false
|
|||
|
|
// 重置表单
|
|||
|
|
serviceForm.value = {
|
|||
|
|
type: '',
|
|||
|
|
date: '',
|
|||
|
|
address: '',
|
|||
|
|
notes: ''
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const joinGroupBuy = (item: any) => {
|
|||
|
|
ElMessageBox.confirm(
|
|||
|
|
'确定参与该团购活动吗？',
|
|||
|
|
'提示',
|
|||
|
|
{
|
|||
|
|
confirmButtonText: '确定',
|
|||
|
|
cancelButtonText: '取消',
|
|||
|
|
type: 'info'
|
|||
|
|
}
|
|||
|
|
).then(() => {
|
|||
|
|
ElMessage.success('参与成功')
|
|||
|
|
item.participants++
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const getGroupBuyButtonText = (status: string) => {
|
|||
|
|
const texts: Record<string, string> = {
|
|||
|
|
ongoing: '立即参与',
|
|||
|
|
upcoming: '即将开始',
|
|||
|
|
ended: '已结束'
|
|||
|
|
}
|
|||
|
|
return texts[status] || '立即参与'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const contactService = (service: any) => {
|
|||
|
|
ElMessage.success(`正在连接服务人员...`)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const cancelService = (service: any) => {
|
|||
|
|
ElMessageBox.confirm(
|
|||
|
|
'确定要取消该服务吗？',
|
|||
|
|
'提示',
|
|||
|
|
{
|
|||
|
|
confirmButtonText: '确定',
|
|||
|
|
cancelButtonText: '取消',
|
|||
|
|
type: 'warning'
|
|||
|
|
}
|
|||
|
|
).then(() => {
|
|||
|
|
ElMessage.success('服务已取消')
|
|||
|
|
activeServices.value = activeServices.value.filter(s => s.id !== service.id)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const payBill = (bill: any) => {
|
|||
|
|
ElMessageBox.confirm(
|
|||
|
|
`确定支付${bill.title} ¥${bill.amount}吗？`,
|
|||
|
|
'提示',
|
|||
|
|
{
|
|||
|
|
confirmButtonText: '确定支付',
|
|||
|
|
cancelButtonText: '取消',
|
|||
|
|
type: 'info'
|
|||
|
|
}
|
|||
|
|
).then(() => {
|
|||
|
|
ElMessage.success('支付成功')
|
|||
|
|
unpaidBills.value = unpaidBills.value.filter(b => b.id !== bill.id)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const batchPayment = () => {
|
|||
|
|
const total = unpaidBills.value.reduce((sum, bill) => sum + bill.amount, 0)
|
|||
|
|
ElMessageBox.confirm(
|
|||
|
|
`确定一键支付所有账单 ¥${total.toFixed(2)}吗？`,
|
|||
|
|
'提示',
|
|||
|
|
{
|
|||
|
|
confirmButtonText: '确定支付',
|
|||
|
|
cancelButtonText: '取消',
|
|||
|
|
type: 'info'
|
|||
|
|
}
|
|||
|
|
).then(() => {
|
|||
|
|
ElMessage.success('批量支付成功')
|
|||
|
|
unpaidBills.value = []
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.service-page {
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mt-20 {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 服务网格样式 */
|
|||
|
|
.grid-container {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(3, 1fr);
|
|||
|
|
gap: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.service-item {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 20px;
|
|||
|
|
background: #f5f7fa;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.service-item:hover {
|
|||
|
|
transform: translateY(-2px);
|
|||
|
|
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.service-item h3 {
|
|||
|
|
margin: 15px 0 5px;
|
|||
|
|
font-size: 18px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.service-item p {
|
|||
|
|
margin: 0;
|
|||
|
|
color: #666;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 团购列表样式 */
|
|||
|
|
.group-buy-list {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(2, 1fr);
|
|||
|
|
gap: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.group-buy-item {
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.group-buy-item .el-image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 200px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-info {
|
|||
|
|
padding: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-info h4 {
|
|||
|
|
margin: 0 0 10px 0;
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.description {
|
|||
|
|
color: #666;
|
|||
|
|
margin: 0 0 10px 0;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.price-info {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.price .current {
|
|||
|
|
color: #f56c6c;
|
|||
|
|
font-size: 20px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-right: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.price .original {
|
|||
|
|
color: #999;
|
|||
|
|
text-decoration: line-through;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.participants {
|
|||
|
|
color: #666;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-info {
|
|||
|
|
margin: 10px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 服务记录样式 */
|
|||
|
|
.service-actions {
|
|||
|
|
margin-top: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 缴费列表样式 */
|
|||
|
|
.payment-list {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.payment-item {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 15px;
|
|||
|
|
background: #f5f7fa;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bill-info {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bill-details h4 {
|
|||
|
|
margin: 0 0 5px 0;
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bill-details p {
|
|||
|
|
margin: 0;
|
|||
|
|
color: #666;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bill-amount {
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.amount {
|
|||
|
|
display: block;
|
|||
|
|
color: #f56c6c;
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
}
|
|||
|
|
</style>
|