|
@@ -1,51 +1,51 @@
|
|
|
<template>
|
|
|
<zzx-navbar :scrollable="true" :back="true" title="详情"></zzx-navbar>
|
|
|
<view class="detail-header">
|
|
|
- <image class="header-bg"
|
|
|
- src="https://ts1.tc.mm.bing.net/th/id/R-C.a8553f142638e741396e386b43c2bca7?rik=dzSGk6XRsxAAsQ&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50062%2f5890.jpg_wh1200.jpg&ehk=BgxiqxvzoNQd0pZHWV4VPOMbYgqM76WDMt8RDzCjoYY%3d&risl=&pid=ImgRaw&r=0"
|
|
|
- mode="widthFix"></image>
|
|
|
+ <image class="header-bg" :src="bannerList[0]" mode=""></image>
|
|
|
<view class="back-icon" :style="{paddingTop:(statusBarHeight+10)+'px'}" @click="RouterUtils.back()">
|
|
|
<zzx-icon name="back"></zzx-icon>
|
|
|
</view>
|
|
|
<view :style="{height:(statusBarHeight+70)+'px'}"></view>
|
|
|
<scroll-view class="header-swiper content" scroll-x="true" :show-scrollbar="false">
|
|
|
<view class="swiper-inner">
|
|
|
- <video src="https://vod.v.jstv.com/2025/05/09/JSTV_JSGGNEW_1746791056693_2lBi96K_114.mp4"></video>
|
|
|
- <image v-for="item in 4"
|
|
|
- src="https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650"
|
|
|
- mode=""></image>
|
|
|
+ <block v-if="detailInfo.video">
|
|
|
+ <video v-for="(item,index) in videoList" :key="index" :src="item"></video>
|
|
|
+ </block>
|
|
|
+ <image v-for="(item,index) in bannerList" :key="index" :src="item" mode=""></image>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
</view>
|
|
|
<view :style="{height:(statusBarHeight+34)+'px'}"></view>
|
|
|
<view class="header-info">
|
|
|
<view class="venue-name">
|
|
|
- <view class="name">观山湖区第十二小学</view>
|
|
|
+ <view style="display: flex;gap: 20rpx;align-items: center;">
|
|
|
+ <view class="name">{{detailInfo.name}}</view>
|
|
|
+ <view class="open-status">{{detailInfo.runStatus?'营业中':'歇业中'}}</view>
|
|
|
+ </view>
|
|
|
<view class="star">
|
|
|
<zzx-icon name="star" size="12"></zzx-icon>
|
|
|
- <text>4.8</text>
|
|
|
+ <text>{{detailInfo.goodRate}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="open-time">
|
|
|
- <view class="open-status">开放中</view>
|
|
|
<view class="time">
|
|
|
- <view class="">教学日 10:00-22:00</view>
|
|
|
- <view class="">非教学日 10:00-22:00</view>
|
|
|
+ <view>教学日 <text style="margin-right: 14rpx;" v-for="(item,index) in teachingDay.data" :key="index">{{item.startTime+'-'+item.endTime||'--'}}</text></view>
|
|
|
+ <view class="">非教学日 <text style="margin-right: 14rpx;" v-for="(item,index) in noTeachingDay.data" :key="index">{{item.startTime+'-'+item.endTime||'--'}}</text></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="venues-tags">
|
|
|
<view class="tags-box">
|
|
|
- <view class="tags" v-for="item in 4">无烟环境</view>
|
|
|
+ <view class="tags" v-for="(item,index) in detailInfo.facilityInfo" :key="index">{{item}}</view>
|
|
|
</view>
|
|
|
- <view class="more-info" @click="RouterUtils.to_page('/pages/index/basisInfo/index')">
|
|
|
+<!-- <view class="more-info" @click="RouterUtils.to_page('/pages/index/basisInfo/index')">
|
|
|
<text>信息/设备设施</text>
|
|
|
<zzx-icon name="ashRight" size="10"></zzx-icon>
|
|
|
- </view>
|
|
|
+ </view> -->
|
|
|
</view>
|
|
|
<view class="venues-address">
|
|
|
<view class="address">
|
|
|
<zzx-icon name="location" size="14"></zzx-icon>
|
|
|
- <text>印象城购物中心6楼</text>
|
|
|
+ <text>{{detailInfo.address}}</text>
|
|
|
</view>
|
|
|
<view class="nav-phone">
|
|
|
<view class="nav" @click="open_map">
|
|
@@ -76,7 +76,7 @@
|
|
|
<view style="margin-bottom: 10rpx;">包场</view>
|
|
|
</view>
|
|
|
<view class="">
|
|
|
- 开场前60分钟随时退
|
|
|
+ 开场前{{charteredList.earlyRefundTime}}分钟随时退
|
|
|
</view>
|
|
|
<view class="v-left" @click="RouterUtils.to_page('/pages/index/vr/index')">
|
|
|
<zzx-icon name="venue-icon2" size="14"></zzx-icon>
|
|
@@ -85,16 +85,17 @@
|
|
|
</view>
|
|
|
<view class="v-select-infocard">
|
|
|
<view class="select-btn">
|
|
|
- <view :class="sel_btn===index?'distance':'score'" v-for="(item,index) in selectList_btn"
|
|
|
- :key="index" @click="select_btn(index)">{{item}}</view>
|
|
|
+ <view :class="selChartered===index?'distance':'score'" v-for="(item,index) in allCategoryList" :key="item.id"
|
|
|
+ @click="selectChartered(item,index)">{{item.name}}</view>
|
|
|
</view>
|
|
|
<view class="info-card-list">
|
|
|
<scroll-view scroll-x="true" class="scroll-view_H">
|
|
|
- <view class="item-card scroll-view-item_H" v-for="item in 6" @click="open_popup">
|
|
|
- <view class="today">今天(03-04)</view>
|
|
|
- <view class="time">最早19:00可订</view>
|
|
|
- <view class="price">¥58起</view>
|
|
|
+ <view class="item-card scroll-view-item_H" v-for="(item,index) in charteredList.timeSlot" :key="item.id" @click="open_popup(item,index)">
|
|
|
+ <view class="today">{{item.dateLabel}}</view>
|
|
|
+ <view class="time">最早{{item.startTime}}可订</view>
|
|
|
+ <view class="price">¥{{item.sellingPrice}}起</view>
|
|
|
</view>
|
|
|
+ <view class="not-data" v-if="charteredList.timeSlot.length<1">暂无可选时间</view>
|
|
|
</scroll-view>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -104,27 +105,26 @@
|
|
|
<zzx-icon name="venue-icon3" size="14"></zzx-icon>
|
|
|
<view class="">无固定场</view>
|
|
|
</view>
|
|
|
- <view class="item-card" v-for="item in 2">
|
|
|
- <image src="https://img.shetu66.com/2023/06/13/1686646672844195.jpg" mode=""></image>
|
|
|
+ <view class="item-card" v-for="(item,index) in detailInfo.placeInfoMsgVO" :key="item.id">
|
|
|
+ <image :src="item.cover" mode=""></image>
|
|
|
<view class="venue-info">
|
|
|
<view class="info-title">
|
|
|
- <view class="title textHidden">指定时段免费畅玩</view>
|
|
|
- <view class="sales">年售20</view>
|
|
|
+ <view class="title textHidden">{{item.name}}</view>
|
|
|
+ <view class="sales">年售{{item.sales}}</view>
|
|
|
</view>
|
|
|
- <view class="type">
|
|
|
+<!-- <view class="type">
|
|
|
篮球、足球、羽毛球
|
|
|
- </view>
|
|
|
+ </view> -->
|
|
|
<view class="price-info">
|
|
|
<view class="price">
|
|
|
- <view class="">¥58.9</view>
|
|
|
- <view class="">¥80.9</view>
|
|
|
- </view>
|
|
|
- <view class="price-btn" @click="RouterUtils.to_page('/pages/index/gymPay/index?type=1')">抢购
|
|
|
+ <view class="">¥{{item.sellingPrice}}</view>
|
|
|
+ <view class="">¥{{item.originalPrice}}</view>
|
|
|
</view>
|
|
|
+ <view class="price-btn" @click="RouterUtils.to_page(`/pages/index/gymPay/index?type=1&courseId=${item.id}`)">抢购</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="card-tips">
|
|
|
- <view class="item-tips">
|
|
|
+ <view class="item-tips" @click="buyTips(item)">
|
|
|
<text>购买须知</text>
|
|
|
<zzx-icon name="ashRight" size="10"></zzx-icon>
|
|
|
</view>
|
|
@@ -132,10 +132,10 @@
|
|
|
<text>服务保障</text>
|
|
|
<zzx-icon name="ashRight" size="10"></zzx-icon>
|
|
|
</view>
|
|
|
- <view class="item-tips">
|
|
|
+<!-- <view class="item-tips">
|
|
|
<text>用户评价</text>
|
|
|
<zzx-icon name="ashRight" size="10"></zzx-icon>
|
|
|
- </view>
|
|
|
+ </view> -->
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -146,48 +146,54 @@
|
|
|
<view class="">全平台每种类型的运动课程只可免费试听一次</view>
|
|
|
</view>
|
|
|
<view class="select-btn">
|
|
|
- <view :class="sel_btn===index?'distance':'score'" v-for="(item,index) in selectList_btn" :key="index"
|
|
|
- @click="select_btn(index)">{{item}}</view>
|
|
|
+ <view :class="sel_btn===index?'distance':'score'" v-for="(item,index) in allCategoryList" :key="item.id"
|
|
|
+ @click="selectallCategory(item,index)">{{item.name}}</view>
|
|
|
</view>
|
|
|
- <view class="venue-card" v-for="item in 2" @click="toCOurseDetail">
|
|
|
- <image src="https://img.keaitupian.cn/newupload/08/1629449018344288.jpg" mode=""></image>
|
|
|
- <view class="venue-info">
|
|
|
- <view class="info-title">
|
|
|
- <view class="title textHidden">小班体适能+篮球衔接小班体适能+篮球衔接...</view>
|
|
|
- <view class="sales">年售20</view>
|
|
|
- </view>
|
|
|
- <view class="type">
|
|
|
- 篮球、足球、羽毛球
|
|
|
- </view>
|
|
|
- <view class="price">
|
|
|
- <view class="">¥58.9</view>
|
|
|
- <view class="">¥80.9</view>
|
|
|
- </view>
|
|
|
- <view class="price-info">
|
|
|
- <view class="sale">
|
|
|
- 已售33 98%好评
|
|
|
+ <block v-if="!courseLoading">
|
|
|
+ <view class="venue-card" v-for="item in courseList" :key="item.id" @click="toCOurseDetail">
|
|
|
+ <image :src="item.cover" mode=""></image>
|
|
|
+ <view class="venue-info">
|
|
|
+ <view class="info-title">
|
|
|
+ <view class="title textHidden">{{item.name}}</view>
|
|
|
+ <view class="sales">年售{{item.salesYear}}</view>
|
|
|
</view>
|
|
|
- <view class="price-btn" @click="RouterUtils.to_page('/pages/index/courseDetail/index?type=2')">免费试听
|
|
|
+ <view class="type">
|
|
|
+ {{item.address}} {{item.km||'--'}}km
|
|
|
+ </view>
|
|
|
+ <view class="price">
|
|
|
+ <view class="">¥{{item.sellingPrice}}</view>
|
|
|
+ <view class="">¥{{item.originalPrice}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="course-count">
|
|
|
+ {{item.period}}课时 {{item.startTime}}-{{item.endTime}}
|
|
|
+ </view>
|
|
|
+ <view class="price-info">
|
|
|
+ <view class="sale">
|
|
|
+ 已售{{item.sales}} {{item.goodRate}}%好评
|
|
|
+ </view>
|
|
|
+ <view class="price-btn" @click="RouterUtils.to_page(`/pages/index/courseDetail/index?id=${item.id}&type=2`)">免费试听
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <!-- <loading/> -->
|
|
|
+ </block>
|
|
|
+ <loading v-else/>
|
|
|
+ <view class="not-data" v-if="courseList.length<1&&!courseLoading">暂无数据</view>
|
|
|
<view class="more">查看更多</view>
|
|
|
</view>
|
|
|
<view class="instructor-card" id="schedule">
|
|
|
- <view class="card-title">
|
|
|
- <view class="">教练(9)</view>
|
|
|
+ <view class="card-title" @click="RouterUtils.to_page('/pages/index/allInstructor/index')">
|
|
|
+ <view class="">教练({{detailInfo.instructorVOList.length}})</view>
|
|
|
<zzx-icon name="right" size="12"></zzx-icon>
|
|
|
</view>
|
|
|
<scroll-view class="header-swiper content" scroll-x="true" :show-scrollbar="false">
|
|
|
<view class="swiper-box">
|
|
|
- <view class="swiper-inner" v-for="item in 12">
|
|
|
+ <view class="swiper-inner" v-for="item in detailInfo.instructorVOList" :key="item.id" @click="RouterUtils.to_page(`/pages/index/instructorDetail/index?id=${item.id}`)">
|
|
|
<view class="header-img">
|
|
|
- <image src="https://img.keaitupian.cn/newupload/08/1629449018344288.jpg" mode=""></image>
|
|
|
+ <image :src="item.avatar" mode=""></image>
|
|
|
<image src="/src/static/badge.png" mode=""></image>
|
|
|
</view>
|
|
|
- <view class="instructor-name">詹姆斯</view>
|
|
|
+ <view class="instructor-name">{{item.name}}</view>
|
|
|
<view class="instructor-specialty">篮球</view>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -229,32 +235,46 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<view style="position: relative;z-index: 99999;">
|
|
|
- <selPopup ref="openPopup" />
|
|
|
+ <selPopup :listData="placedata" :itemList="selItems" :deteObj="dateIndex" @change="onchange" ref="openPopup" />
|
|
|
</view>
|
|
|
+ <uni-popup ref="placeInfoPopup" :safe-area="false" type="bottom">
|
|
|
+ <view class="buyTips-box">
|
|
|
+ <view class="buyTips-title">购买须知</view>
|
|
|
+ <view class="rich-box" v-if="buyTipsObj">
|
|
|
+ <rich-text :nodes="buyTipsObj.reminder"></rich-text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
- import { ref, onMounted, getCurrentInstance, nextTick } from 'vue';
|
|
|
+ import { ref, onMounted, getCurrentInstance, nextTick,computed } from 'vue';
|
|
|
import { RouterUtils } from '@/utils/util';
|
|
|
+ import { http } from '@/utils/http'
|
|
|
import zzxNavbar from '@/components/zzx-navbar/zzx-navbar.vue';
|
|
|
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
|
|
|
import loading from '@/components/zzx-loading/zzx-loading.vue';
|
|
|
import selPopup from './components/popup.vue';
|
|
|
const openPopup = ref(null);
|
|
|
+ const placeInfoPopup=ref()
|
|
|
const statusBarHeight = ref(0);
|
|
|
const sectionTops = ref<number[]>([]);
|
|
|
const isScrollingByTab = ref(false);
|
|
|
const scrollTimer = ref<any>(null);
|
|
|
const selectList = ref(['场地', '课程', '教练', '评价']);
|
|
|
const sel_index = ref(0);
|
|
|
- const selectList_btn = ref(['篮球', '羽毛球', '乒乓球', '网球']);
|
|
|
const sel_btn = ref(0);
|
|
|
const instance = getCurrentInstance();
|
|
|
+ onLoad((option)=>{
|
|
|
+ listId.value = option.id
|
|
|
+ })
|
|
|
onMounted(() => {
|
|
|
get_navheight()
|
|
|
nextTick(() => {
|
|
|
setTimeout(() => getSectionsTop(), 300);
|
|
|
});
|
|
|
+ get_placeInfo()
|
|
|
+ get_allCategory()
|
|
|
})
|
|
|
const get_navheight = () => {
|
|
|
const systemInfo = uni.getSystemInfoSync();
|
|
@@ -262,7 +282,10 @@
|
|
|
}
|
|
|
|
|
|
// 打开选场弹窗
|
|
|
- const open_popup = () => {
|
|
|
+ const dateIndex=ref()
|
|
|
+ const open_popup = (e,i) => {
|
|
|
+ dateIndex.value=i
|
|
|
+ get_placeInfoDetail(categoryId.value,i)
|
|
|
openPopup.value?.open()
|
|
|
}
|
|
|
|
|
@@ -354,9 +377,96 @@
|
|
|
// 拨打电话
|
|
|
const open_phone = () => {
|
|
|
uni.makePhoneCall({
|
|
|
- phoneNumber: '028-87776666' //仅为示例
|
|
|
+ phoneNumber: detailInfo.value.phone
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 详情信息
|
|
|
+ const listId = ref(0);
|
|
|
+ const detailInfo = ref({})
|
|
|
+ const bannerList = ref([])
|
|
|
+ const videoList = ref([])
|
|
|
+ const noTeachingDay=ref()
|
|
|
+ const teachingDay=ref()
|
|
|
+ const get_placeInfo = () => {
|
|
|
+ http.get('/detail/getPlaceInfo', { data: { id: listId.value }, loading: true }).then((res) => {
|
|
|
+ const startIndex = res.result.cover.indexOf('"') + 1;
|
|
|
+ const endIndex = res.result.cover.lastIndexOf('');
|
|
|
+ bannerList.value = res.result.cover.slice(startIndex, endIndex).split(',');
|
|
|
+ let videoIndex = res.result.video.indexOf('"') + 1;
|
|
|
+ let videoEndIndex = res.result.video.lastIndexOf('');
|
|
|
+ videoList.value = res.result.video.slice(videoIndex, videoEndIndex).split(',');
|
|
|
+ detailInfo.value = res.result
|
|
|
+ noTeachingDay.value=JSON.parse(res.result.noTeachingDay)
|
|
|
+ teachingDay.value=JSON.parse(res.result.teachingDay)
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 课程分类
|
|
|
+ const allCategoryList=ref([])
|
|
|
+ const categoryId=ref()
|
|
|
+ const get_allCategory=()=>{
|
|
|
+ http.get('/detail/getAllCategory', { data: { id: listId.value}}).then((res)=>{
|
|
|
+ categoryId.value=res.result[0].id
|
|
|
+ allCategoryList.value=res.result
|
|
|
+ get_courseList(categoryId.value)
|
|
|
+ get_placeInfoNoFixation(categoryId.value)
|
|
|
+ get_placeInfoDetail(categoryId.value,'')
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 课程列表
|
|
|
+ const courseList=ref([])
|
|
|
+ const courseLoading=ref(false)
|
|
|
+ const get_courseList=(categoryId)=>{
|
|
|
+ courseLoading.value=true
|
|
|
+ http.get('/detail/courseInfoVOList',{data:{categoryId:categoryId,id:listId.value}}).then((res)=>{
|
|
|
+ courseList.value=res.result
|
|
|
+ courseLoading.value=false
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 课程切换
|
|
|
+ const selectallCategory=(e,i)=>{
|
|
|
+ sel_btn.value = i
|
|
|
+ get_courseList(e.id)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 包场切换
|
|
|
+ const selChartered=ref(0)
|
|
|
+ const selectChartered=(e,i)=>{
|
|
|
+ selChartered.value = i
|
|
|
+ get_placeInfoNoFixation(e.id)
|
|
|
+ get_placeInfoDetail(e.id,'')
|
|
|
+ }
|
|
|
+
|
|
|
+ // 包场信息
|
|
|
+ const charteredList=ref()
|
|
|
+ const get_placeInfoNoFixation=(categoryId)=>{
|
|
|
+ http.get('/detail/getPlaceInfoNoFixation',{data:{categoryId:categoryId,id:listId.value},loading:true}).then((res)=>{
|
|
|
+ charteredList.value=res.result
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ const buyTipsObj=ref()
|
|
|
+ const buyTips=(e)=>{
|
|
|
+ placeInfoPopup.value.open()
|
|
|
+ buyTipsObj.value=e
|
|
|
+ }
|
|
|
+
|
|
|
+ const placedata=ref()
|
|
|
+ const selItems=ref()
|
|
|
+ const get_placeInfoDetail=(catId,dateIndex)=>{
|
|
|
+ http.get('/stadium/getPlaceInfo',{data:{siteId:listId.value ,categoryId:catId}}).then((res)=>{
|
|
|
+ placedata.value=res.result
|
|
|
+ selItems.value=res.result.stadiumConcertsVOList[dateIndex||0].concertsVOList
|
|
|
})
|
|
|
}
|
|
|
+
|
|
|
+ const onchange=(e,i)=>{
|
|
|
+ selItems.value=e.concertsVOList
|
|
|
+ dateIndex.value=i
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
@@ -366,6 +476,7 @@
|
|
|
.header-bg {
|
|
|
position: absolute;
|
|
|
width: 100%;
|
|
|
+ height: 432rpx;
|
|
|
z-index: -100;
|
|
|
}
|
|
|
|
|
@@ -415,7 +526,10 @@
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
-
|
|
|
+ .open-status {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #4DD951;
|
|
|
+ }
|
|
|
.name {
|
|
|
font-weight: 800;
|
|
|
font-size: 32rpx;
|
|
@@ -432,22 +546,13 @@
|
|
|
}
|
|
|
|
|
|
.open-time {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 20rpx;
|
|
|
margin-top: 20rpx;
|
|
|
-
|
|
|
- .open-status {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #4DD951;
|
|
|
- }
|
|
|
-
|
|
|
.time {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 20rpx;
|
|
|
font-size: 24rpx;
|
|
|
color: #AAAAAA;
|
|
|
+ &>view{
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -887,6 +992,10 @@
|
|
|
text-decoration: line-through;
|
|
|
}
|
|
|
}
|
|
|
+ .course-count{
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #AAAAAA;
|
|
|
+ }
|
|
|
|
|
|
.price-info {
|
|
|
display: flex;
|
|
@@ -1110,4 +1219,19 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .buyTips-box{
|
|
|
+ background: #F6F6F6;
|
|
|
+ border-radius: 32rpx 32rpx 0rpx 0rpx;
|
|
|
+ max-height: 1200rpx;
|
|
|
+ overflow: auto;
|
|
|
+ padding: 20rpx;
|
|
|
+ .buyTips-title{
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .rich-box{
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|