<template>
|
|
<view class="home-content">
|
|
<view class="card-container">
|
|
<view class="float-button">
|
|
<image @click="changeOrderType" style="width: 112rpx; height: 112rpx;" slot='cover'
|
|
src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/SystemOrderCircle.png">
|
|
</view>
|
|
<view>
|
|
<view class="top-select">
|
|
<view style="width: 50%;">
|
|
<view class="top-select-left" @click="getLocationInfo">
|
|
<uni-icons type="location-filled" size="20" color="#FFB13F"></uni-icons>
|
|
<text v-if="isCheckLocation"
|
|
style="color: #FFB13F ;font-size: 28rpx;font-weight: 400; line-height: 28rpx; width: 280rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{locationName}}</text>
|
|
<text v-else style="color: #AAAAAA;font-size: 28rpx;font-weight: 400;">选择地址</text>
|
|
</view>
|
|
</view>
|
|
<view style="width: 50%;">
|
|
<view class="top-select-right" @click="toggleCalendar('bottom')">
|
|
<image style="width: 32rpx; height: 32rpx; margin-right: 10rpx;" slot='cover'
|
|
src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/Calendar.png"/>
|
|
<text v-if="isCheckTime" style="color: #FFB13F;font-size: 28rpx;font-weight: 400;">
|
|
{{selectedDateShowText}}共{{selectedDate.length}}天</text>
|
|
<text v-else style="color: #AAAAAA;font-size: 28rpx;font-weight: 400;">选择时间</text>
|
|
</view>
|
|
<view>
|
|
<uni-popup ref="popup" background-color="#fff" @change="changePopup">
|
|
<view class="popupBottom">
|
|
<uni-calendar ref="calendar" class="uni-calendar--hook" :selected="selectedDate"
|
|
:startDate="startDate" :endDate="endDate" :showMonth="false"
|
|
@change="changeCalendar" @confirm="changeCalendar" @close="close" />
|
|
<view style="display: flex; justify-content: center; align-items: center;">
|
|
<!-- <button class="bottom-btn" @click="closePopup">确定</button> -->
|
|
<image @click="closePopup" style="width: 670rpx; height: 80rpx;" slot='cover' src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/yesButton.png" />
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view style="display: flex; margin: 10rpx 20rpx 0 20rpx;">
|
|
<!-- <view>
|
|
<image v-show="isCatCheck" @click="changeSelectedPet('cat')"
|
|
style="width: 224rpx; height: 96rpx; margin-right: 20rpx;" slot='cover'
|
|
src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/CatCheck.png" />
|
|
<image v-show="!isCatCheck" @click="changeSelectedPet('cat')"
|
|
style="width: 224rpx; height: 96rpx; margin-right: 20rpx;" slot='cover'
|
|
src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/CatUncheck.png" />
|
|
</view>
|
|
<view>
|
|
<image v-show="isDogCheck" @click="changeSelectedPet('dog')"
|
|
style="width: 224rpx; height: 96rpx; margin-right: 20rpx;" slot='cover'
|
|
src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/DogCheck.png" />
|
|
<image v-show="!isDogCheck" @click="changeSelectedPet('dog')"
|
|
style="width: 224rpx; height: 96rpx; margin-right: 20rpx;" slot='cover'
|
|
src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/DogUncheck.png" />
|
|
</view> -->
|
|
|
|
|
|
<view style="padding: 10rpx 20rpx;border-radius: 50rpx;background-color: #fff;
|
|
display: flex;align-items: center;justify-content: center;width: 450rpx;margin-right: 30rpx;
|
|
color: #AAAAAA;" @click="openFilterPopup">
|
|
|
|
|
|
<text>伴宠师条件筛选</text>
|
|
<uni-icons type="forward" size="30rpx" color="#aaa"
|
|
style="margin-top: 7rpx;margin-left: 10rpx;"></uni-icons>
|
|
</view>
|
|
|
|
<!-- 筛选弹窗组件 -->
|
|
<filter-popup ref="filterPopup" @confirm="handleFilterConfirm"></filter-popup>
|
|
|
|
|
|
<uni-easyinput style="border-radius: 84rpx; width: 224rpx; height: 96rpx;" borderColor="#FFB13F"
|
|
prefixIcon="search" v-model="value" placeholder="输入名称" @iconClick="iconClick"></uni-easyinput>
|
|
<!-- <view style="width: 50%;" class="card">
|
|
<uni-data-checkbox multiple selectedColor="#FFB13F" v-model="selectedPet" :localdata="catOrdog"
|
|
@change="changeSelectedPet"></uni-data-checkbox>
|
|
</view>
|
|
<view style="width: 50%;">
|
|
<uni-easyinput style="border-radius: 30rpx;" borderColor="#FFB13F" prefixIcon="search"
|
|
v-model="value" placeholder="搜索" @iconClick="iconClick"></uni-easyinput>
|
|
</view> -->
|
|
<!-- <checkbox-group>
|
|
<label>
|
|
<checkbox value="cb" checked="true" color="#FFB13F" style="transform:scale(0.7)" />选中
|
|
</label>
|
|
<label>
|
|
<checkbox class="color_FFB13F" value="cb" color="#FFB13F" style="transform:scale(0.7)" />未选中
|
|
</label>
|
|
</checkbox-group> -->
|
|
</view>
|
|
<view>
|
|
<view v-if="companionList.length > 0">
|
|
<uni-row :span="12" v-for="(item,index) in companionList" :key="index">
|
|
<uni-card :is-shadow="false" padding=0 margin="10px"
|
|
@click="getInfo(item.userId)">
|
|
<view class="personal-list-item">
|
|
<view class="personal-info">
|
|
<view>
|
|
<!-- <image class="people-img" slot='cover'
|
|
:src="item&&item.staffImages&&item.staffImages.length>0?item.staffImages[0].url:defaultStaffIamge">
|
|
</image> -->
|
|
|
|
<image class="people-img" slot='cover'
|
|
:src="item.userImage">
|
|
</image>
|
|
|
|
</view>
|
|
<view class="personal-info-1">
|
|
<view class="personal-info-2">
|
|
<view class="personal-info-title">
|
|
<view class="personal-name">
|
|
{{ item.userName || '匿名' }}
|
|
</view>
|
|
<view class="personal-sex">
|
|
<img :src="item.appletUsersTeacher.sex == 0?'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/sex_m.png':
|
|
'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/sex_f.png'" alt="sex"
|
|
style="width: 20px;height: 20px;" />
|
|
</view>
|
|
</view>
|
|
<view class="personal-star" @click="checkIsLike">
|
|
<text style="color: #FFB13F;">客户点赞数{{ item.appletUsersTeacher.thumbsUp || 0 }}</text>
|
|
<uni-icons v-if="isLike" type="hand-up-filled" size="20"
|
|
color="#FFB13F"></uni-icons>
|
|
<uni-icons v-else type="hand-up" size="20" color="#FFB13F"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<view class="personal-info-3" style="width: 100%;">
|
|
<view class="ellipsis" v-if="item.distanceText">
|
|
距离{{ item.distanceText }}km
|
|
</view>
|
|
<view class="ellipsis" v-else>
|
|
暂无距离估测
|
|
</view>
|
|
</view>
|
|
<view class="personal-info-4" style="width: 100%;">
|
|
<view class="ellipsis" style="max-width: 225px;">
|
|
简介:{{ item.appletUsersTeacher.userBrief || '暂无' }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<view class="personal-item-bottom">
|
|
<text class="personal-item-bottom-text">养宠{{ item.experience || 0 }}年 | 评价{{ item.commentNum || 0 }}条 | 服务小结{{ item.serviceSummaryNum || 0 }}份</text>
|
|
</view>
|
|
</view>
|
|
</uni-card>
|
|
</uni-row>
|
|
</view>
|
|
<view v-else
|
|
style="
|
|
color: #AAAAAA;
|
|
display: flex; justify-content: center; align-items: center; height: 100px; font-size: 16px; font-weight: bold;">
|
|
暂无数据
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
|
|
import uniFab from '@/uni_modules/uni-fab/components/uni-fab/uni-fab.vue'
|
|
import FilterPopup from '@/components/FilterPopup/FilterPopup.vue'
|
|
import positionMixin from '../../mixins/position';
|
|
// import {
|
|
// getCompanionList,
|
|
// getCompanionInfo
|
|
// } from "@/api/system/companion"
|
|
import {
|
|
getTeacherList,
|
|
} from "@/api/order/order"
|
|
export default {
|
|
mixins: [positionMixin],
|
|
data() {
|
|
return {
|
|
allInfo: {
|
|
isCheckLocation: false,
|
|
locationName: '',
|
|
locationLatitude: '',
|
|
locationLongitude: '',
|
|
locationAddress: '',
|
|
selectedDate: [],
|
|
isCheckTime: false,
|
|
},
|
|
// 筛选条件
|
|
filterOptions: {
|
|
gender: '',
|
|
petTypes: [],
|
|
level: ''
|
|
},
|
|
selectedDate: [],
|
|
startDate: '',
|
|
endDate: '',
|
|
isCheckLocation: false,
|
|
locationName: '',
|
|
locationLatitude: '',
|
|
locationLongitude: '',
|
|
locationAddress: '',
|
|
isCheckTime: false,
|
|
selectedDateShowText: '',
|
|
isCatCheck: true,
|
|
isDogCheck: true,
|
|
petTypes: ['1', '2'],
|
|
value: '',
|
|
companionList: [],
|
|
isLike: false,
|
|
likeNum: 560,
|
|
defaultStaffIamge: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/banner/gold_people.png',
|
|
}
|
|
},
|
|
components: {
|
|
uniPopup,
|
|
FilterPopup
|
|
},
|
|
onLoad: function(option) {
|
|
let info = JSON.parse(decodeURIComponent(option.info));
|
|
this.allInfo = info
|
|
console.log('this.allInfo', this.allInfo);
|
|
this.setInfo()
|
|
this.getCompanionList()
|
|
},
|
|
mounted() {
|
|
this.getCalendarDate();
|
|
},
|
|
methods: {
|
|
setInfo() {
|
|
this.isCheckLocation = this.allInfo.isCheckLocation
|
|
this.locationName = this.allInfo.locationName
|
|
this.locationLatitude = this.allInfo.locationLatitude
|
|
this.locationLongitude = this.allInfo.locationLongitude
|
|
this.locationAddress = this.allInfo.locationAddress
|
|
this.selectedDate = this.allInfo.selectedDate
|
|
this.isCheckTime = this.allInfo.isCheckTime
|
|
if (this.allInfo.selectedDate.length == 1) {
|
|
this.selectedDateShowText = this.allInfo.selectedDate[0].date.replace(/-/g, "/") + ' '
|
|
} else if (this.allInfo.selectedDate.length > 1) {
|
|
this.selectedDateShowText = this.allInfo.selectedDate[0].date.replace(/-/g, "/") + '...' + ' '
|
|
}
|
|
},
|
|
checkIsLike() {
|
|
this.isLike = !this.isLike
|
|
this.$forceUpdate()
|
|
},
|
|
changeOrderType() {
|
|
uni.navigateTo({
|
|
url: '/pages/newOrder/serviceNew2'
|
|
});
|
|
},
|
|
getInfo(id) {
|
|
if (id) {
|
|
uni.navigateTo({
|
|
// url: '/pages/companionPetList/companionPetInfo',
|
|
url: `/pages/companionPetList/companionPetInfo?id=${id}`
|
|
});
|
|
}
|
|
},
|
|
trigger(e) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: `激活状态:${e.item.active};选中项:${e.item.text}`,
|
|
success(res) {
|
|
if (res.confirm) {
|
|
console.log('用户点击确定');
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消');
|
|
}
|
|
}
|
|
});
|
|
},
|
|
fabClick() {
|
|
uni.showToast({
|
|
title: '点击了悬浮按钮',
|
|
icon: 'none'
|
|
});
|
|
},
|
|
getCompanionList() {
|
|
// let data = {
|
|
// longitude: this.locationLongitude,
|
|
// latitude: this.locationLatitude,
|
|
// petTypes: this.selectedPet,
|
|
// staffName: '',
|
|
// address: this.locationAddress
|
|
// }
|
|
let data = {
|
|
address: "上海市浦东新区浦东南路150弄",
|
|
latitude: 29.56471,
|
|
longitude: 106.55073,
|
|
petTypes: ["1", "2"],
|
|
staffName: "君"
|
|
}
|
|
console.log('data', data);
|
|
// getCompanionList(data).then(response => {
|
|
// if (response.code == 200) {
|
|
// this.companionList = response.rows
|
|
// console.log(response);
|
|
// }
|
|
// console.log(response);
|
|
// })
|
|
getTeacherList(data).then(response => {
|
|
if (response.code == 200) {
|
|
this.companionList = response.rows
|
|
this.calculateTeacherListDistance()
|
|
}
|
|
console.log(response);
|
|
})
|
|
},
|
|
calculateTeacherListDistance(){
|
|
this.companionList.forEach(item => {
|
|
item.distanceText = this.calculateDistanceAddress(item.appletAddresseList)
|
|
})
|
|
},
|
|
iconClick() {},
|
|
changeSelectedPet(type) {
|
|
console.log('changeSelectedPet type', type);
|
|
if (type == 'cat') {
|
|
this.isCatCheck = !this.isCatCheck
|
|
if (this.petTypes.includes('1')) {
|
|
if (!this.isCatCheck) {
|
|
this.petTypes = this.petTypes.filter(item => item !== '1');
|
|
}
|
|
} else {
|
|
this.isCatCheck ? this.petTypes.push('1') : ''
|
|
}
|
|
} else {
|
|
this.isDogCheck = !this.isDogCheck
|
|
if (this.petTypes.includes('2')) {
|
|
if (!this.isDogCheck) {
|
|
this.petTypes = this.petTypes.filter(item => item !== '2');
|
|
}
|
|
} else {
|
|
this.isDogCheck ? this.petTypes.push('2') : ''
|
|
}
|
|
}
|
|
console.log('this.petTypes', this.petTypes);
|
|
},
|
|
toggleCalendar(type) {
|
|
this.type = type
|
|
uni.hideTabBar()
|
|
this.$refs.popup.open(type)
|
|
},
|
|
closePopup() {
|
|
this.$refs.popup.close()
|
|
setTimeout(() => {
|
|
uni.showTabBar()
|
|
}, 300)
|
|
},
|
|
changePopup(e) {
|
|
console.log('当前模式:' + e.type + ',状态:' + e.show);
|
|
if (e.show) {
|
|
uni.hideTabBar()
|
|
} else {
|
|
setTimeout(() => {
|
|
uni.showTabBar()
|
|
}, 300)
|
|
}
|
|
},
|
|
close() {
|
|
console.log('弹窗关闭');
|
|
},
|
|
confirm(e) {
|
|
console.log('confirm 返回:', e)
|
|
},
|
|
changeCalendar(e) {
|
|
console.log('change 返回:', e)
|
|
this.selectedDateShowText = ''
|
|
// 选中日期
|
|
const selectedValue = this.selectedDate.find(item => item.date === e.fulldate)
|
|
if (selectedValue) {
|
|
// 存在则移除
|
|
this.selectedDate = this.selectedDate.filter(item => item.date !== e.fulldate);
|
|
} else {
|
|
this.selectedDate.push({
|
|
date: e.fulldate,
|
|
info: 'time'
|
|
})
|
|
}
|
|
if (this.selectedDate.length > 0) {
|
|
this.isCheckTime = true
|
|
if (this.selectedDate.length == 1) {
|
|
this.selectedDateShowText = this.selectedDate[0].date.replace(/-/g, "/") + ' '
|
|
} else {
|
|
this.selectedDateShowText = this.selectedDate[0].date.replace(/-/g, "/") + '...' + ' '
|
|
}
|
|
} else {
|
|
this.isCheckTime = false
|
|
}
|
|
},
|
|
getCalendarDate() {
|
|
let tomorrow = new Date()
|
|
tomorrow.setDate(tomorrow.getDate() + 2);
|
|
this.startDate = this.formatDate(tomorrow);
|
|
// 获取三个月后的日期
|
|
let threeMonthsLater = new Date();
|
|
threeMonthsLater.setMonth(threeMonthsLater.getMonth() + 3);
|
|
this.endDate = this.formatDate(threeMonthsLater);
|
|
},
|
|
formatDate(date) {
|
|
let year = date.getFullYear();
|
|
let month = (date.getMonth() + 1).toString().padStart(2, '0');
|
|
let day = date.getDate().toString().padStart(2, '0');
|
|
return year + '-' + month + '-' + day;
|
|
},
|
|
getLocationInfo() {
|
|
wx.chooseLocation({
|
|
type: 'gcj02', // 坐标系,默认为 wgs84 返回 gps 原始坐标,gcj02 返回可用于 wx.openLocation 的坐标
|
|
success: (res) => {
|
|
// 成功回调
|
|
this.isCheckLocation = true
|
|
this.locationName = res.address
|
|
this.locationLongitude = res.longitude
|
|
this.locationLatitude = res.latitude
|
|
this.locationAddress = res.address
|
|
console.log('选择的位置:', res);
|
|
|
|
this.position.address = this.locationAddress
|
|
this.position.longitude = this.locationLongitude
|
|
this.position.latitude = this.locationLatitude
|
|
|
|
},
|
|
fail: (err) => {
|
|
// 失败回调
|
|
console.error('选择位置失败:', err);
|
|
}
|
|
});
|
|
},
|
|
// 打开筛选弹窗
|
|
openFilterPopup() {
|
|
this.$refs.filterPopup.open()
|
|
},
|
|
// 处理筛选确认
|
|
handleFilterConfirm(filterData) {
|
|
console.log('筛选条件:', filterData)
|
|
this.filterOptions = filterData
|
|
// 根据筛选条件重新获取数据
|
|
this.getCompanionList()
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.home-content {
|
|
background: linear-gradient(360deg, #F5F5F7 0%, #FFBF60 99%);
|
|
|
|
.card-container {
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
.uni-card {
|
|
border-radius: 16rpx;
|
|
}
|
|
|
|
.top-select {
|
|
background-color: #fff;
|
|
border: 1px solid #EBEEF5;
|
|
// box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.08);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 0 10px 10px 10px;
|
|
border-radius: 16rpx;
|
|
padding: 13px;
|
|
|
|
.top-select-left {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
// justify-content: space-around;
|
|
}
|
|
|
|
.top-select-right {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.float-button {
|
|
z-index: 10;
|
|
position: fixed;
|
|
bottom: 100rpx;
|
|
/* 距离底部的距离 */
|
|
right: 32rpx;
|
|
/* 距离右侧的距离 */
|
|
// width: 50px;
|
|
// /* 按钮的宽度 */
|
|
// height: 50px;
|
|
}
|
|
|
|
.is-input-border {
|
|
border-radius: 84rpx;
|
|
height: 96rpx;
|
|
width: 224rpx;
|
|
}
|
|
|
|
.card {
|
|
// border-radius: 50rpx;
|
|
width: 50%;
|
|
background-color: #fff;
|
|
border: 1px solid #EBEEF5;
|
|
box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.08);
|
|
margin-right: 20rpx;
|
|
// height: 80rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.personal-list-item {
|
|
padding: 10px 0px 0px 0;
|
|
|
|
.personal-info {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
|
|
.people-img {
|
|
width: 168rpx;
|
|
height: 168rpx;
|
|
border: #FEA714 5rpx solid;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.personal-info-1 {
|
|
margin-left: 10px;
|
|
width: 100%;
|
|
|
|
.personal-info-2 {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.personal-info-title {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 60%;
|
|
}
|
|
|
|
.personal-name {
|
|
color: #333;
|
|
font-size: 32rpx;
|
|
// line-height: 32rpx;
|
|
margin-right: 10rpx;
|
|
font-weight: 900;
|
|
font-style: normal;
|
|
}
|
|
|
|
.personal-star {
|
|
color: #FFAA48;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
line-height: 32rpx;
|
|
}
|
|
}
|
|
|
|
.personal-info-3 {
|
|
display: flex;
|
|
align-items: baseline;
|
|
font-size: 28rpx;
|
|
line-height: 32rpx;
|
|
margin-top: 5px;
|
|
color: #FFAA48;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.personal-info-4 {
|
|
display: flex;
|
|
align-items: baseline;
|
|
font-size: 24rpx;
|
|
margin-top: 10px;
|
|
color: #7D8196;
|
|
font-weight: 400;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.personal-item-bottom {
|
|
height: 60rpx;
|
|
background-color: #FFF4E5;
|
|
margin: 20rpx 0 20rpx 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 8rpx;
|
|
|
|
.personal-item-bottom-text {
|
|
color: #A94F20;
|
|
margin: 14rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
.popupBottom {
|
|
z-index: 99;
|
|
height: 950rpx;
|
|
overflow: hidden;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 10rpx 20rpx;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
background-color: #fff;
|
|
|
|
.bottom-btn {
|
|
width: 100%;
|
|
border-radius: 120rpx;
|
|
background: #FFB13F;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
::v-deep .wx-radio-input.wx-radio-input-checked {
|
|
background-color: #00875a !important;
|
|
border-color: #00875a !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.color_FFB13F {
|
|
color: #FFB13F;
|
|
}
|
|
|
|
}
|
|
}
|
|
</style>
|