mirror of
http://36.133.248.69:3088/admin/RentWeAppFront.git
synced 2026-03-08 01:42:28 +08:00
498 lines
13 KiB
Vue
498 lines
13 KiB
Vue
|
<template>
|
|||
|
|
<view class="u-p-l-10 u-p-r-10 index">
|
|||
|
|
|
|||
|
|
<!-- 流量主-腾讯banner广告 -->
|
|||
|
|
<view>
|
|||
|
|
<!-- <ad unit-id="adunit-fcfdcc4d7095b6b1" ad-intervals="30"></ad> -->
|
|||
|
|
<!-- 轮播图 -->
|
|||
|
|
<!-- #ifndef MP-WEIXIN -->
|
|||
|
|
<!-- <u-swiper :list="swiperList" height="350"></u-swiper> -->
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<u-swiper :list="swiperList" height="350" @click="moreInfo"></u-swiper>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 房源信息导航栏 -->
|
|||
|
|
<view>
|
|||
|
|
<view class="rowClass">
|
|||
|
|
<u-row>
|
|||
|
|
<u-col span="3" text-align="center" v-for="(item,index) in navList" :key="index">
|
|||
|
|
<view class="u-padding-20" @tap="clickNav(item, index)" hover-class="hoverClass">
|
|||
|
|
<image :src="item.src" style="width: 130rpx;height: 130rpx;" mode="widthFix"></image>
|
|||
|
|
<view class="tabName">{{item.name}}</view>
|
|||
|
|
<!-- 点击后出现下划线 -->
|
|||
|
|
<view
|
|||
|
|
v-if="activeIndex === index"
|
|||
|
|
class="underline"
|
|||
|
|
:style="{ background: item.underline_color }"
|
|||
|
|
></view>
|
|||
|
|
</view>
|
|||
|
|
</u-col>
|
|||
|
|
</u-row>
|
|||
|
|
<!-- 下划线（动态颜色 + 动画滑动） -->
|
|||
|
|
<!-- <view
|
|||
|
|
class="underline"
|
|||
|
|
:style="{
|
|||
|
|
transform: `translateX(${activeIndex * 100}%)`,
|
|||
|
|
background: navList[activeIndex].underline_color
|
|||
|
|
}"
|
|||
|
|
></view> -->
|
|||
|
|
</view>
|
|||
|
|
<view class="rowClass">
|
|||
|
|
<u-row>
|
|||
|
|
<u-col span="3" text-align="center" v-for="(item,index) in gridList" :key="index">
|
|||
|
|
<view class="u-padding-20" @tap="clickGrid(item)" hover-class="hoverClass">
|
|||
|
|
<image :src="item.src" style="width: 110rpx;height: 110rpx;" mode="widthFix"></image>
|
|||
|
|
<view class="tabName">{{item.name}}</view>
|
|||
|
|
</view>
|
|||
|
|
</u-col>
|
|||
|
|
</u-row>
|
|||
|
|
</view>
|
|||
|
|
<u-gap height="10"></u-gap>
|
|||
|
|
<!-- 公告栏 -->
|
|||
|
|
<view @click="notice">
|
|||
|
|
<u-notice-bar mode="vertical" :list="noticeList" type="primary" more-icon
|
|||
|
|
bg-color="#fff" :duration="5000" border-radius="15"></u-notice-bar>
|
|||
|
|
</view>
|
|||
|
|
<!-- 搜索栏 -->
|
|||
|
|
<!-- <u-navbar :is-back="false" :fixed="false" :safeAreaInsetTop="false"> -->
|
|||
|
|
<view class="search-bar" style="display: flex;justify-content: center;align-items: center;">
|
|||
|
|
<!-- 选择地区 -->
|
|||
|
|
<view class="u-p-20 location-chose" @click="location">
|
|||
|
|
{{vuex_city==''?'选择':vuex_city}}
|
|||
|
|
<u-icon name="arrow-down-fill" class="u-p-l-10" color="#515356"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
<!-- #ifdef MP-WEIXIN -->
|
|||
|
|
<u-search placeholder="你想住在哪儿" v-model="keyword" input-align="center" :show-action="false" :clearabled="true"
|
|||
|
|
:disabled="true" style="width: 380rpx;" @click="search"></u-search>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<!-- #ifndef MP-WEIXIN -->
|
|||
|
|
<u-search placeholder="你想住在哪儿" v-model="keyword" input-align="center" :show-action="false" :clearabled="true"
|
|||
|
|
:disabled="true" style="width: 580rpx;" @click="search"></u-search>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- </u-navbar> -->
|
|||
|
|
<u-gap height="5"></u-gap>
|
|||
|
|
<u-waterfall v-model="flowList" ref="uWaterfall">
|
|||
|
|
<template v-slot:left="{leftList}">
|
|||
|
|
<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
|
|||
|
|
<u-lazy-load threshold="750" border-radius="12" :image="item.coverImgUrl" :index="index"
|
|||
|
|
@click="clickImage(item.id)"></u-lazy-load>
|
|||
|
|
<view class="item-title">{{item.name}}</view>
|
|||
|
|
<view class="item-desc">{{ item.footPrint}}㎡</view>
|
|||
|
|
<view class="item-price">¥{{item.rentFee}}</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<template v-slot:right="{rightList}">
|
|||
|
|
<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
|
|||
|
|
<u-lazy-load threshold="750" border-radius="10" :image="item.coverImgUrl" :index="index"
|
|||
|
|
@click="clickImage(item.id)"></u-lazy-load>
|
|||
|
|
<view class="item-title">{{item.name}}</view>
|
|||
|
|
<view class="item-desc">{{ item.footPrint}}㎡</view>
|
|||
|
|
<view class="item-price">¥{{item.rentFee}}</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
</u-waterfall>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="findHouseList" style="height: 80rpx;line-height: 80rpx;"></u-loadmore>
|
|||
|
|
<u-back-top :scroll-top="scrollTop" top="1000"></u-back-top>
|
|||
|
|
<u-no-network></u-no-network>
|
|||
|
|
<!-- 联系客服 -->
|
|||
|
|
<!-- <view class="buttom">
|
|||
|
|
<view class="loginType">
|
|||
|
|
<view class="wechat item">
|
|||
|
|
<view class="icon"><u-icon size="60" name="server-man" color="#999" @click="server"></u-icon></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import config from "@/common/config.js" // 全局配置文件
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
keyword:'',
|
|||
|
|
pageNum: 1,
|
|||
|
|
pageSize: 20,
|
|||
|
|
scrollTop: 0,
|
|||
|
|
houseList: [],
|
|||
|
|
activeIndex: 0, // 当前选中的索引
|
|||
|
|
swiperList: [
|
|||
|
|
{
|
|||
|
|
image: '/static/img/index/swiper/swiper3.jpg',
|
|||
|
|
title: '身无彩凤双飞翼，心有灵犀一点通'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
image: '/static/img/index/swiper/swiper.jpg',
|
|||
|
|
title: '身无彩凤双飞翼，心有灵犀一点通'
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
noticeList: ['伍家岗招租'],
|
|||
|
|
navList:[
|
|||
|
|
{name:"保租房",src:"/static/icon/保租房.png",type:"0",underline_color:"linear-gradient(to right, #ff8c00, #ffcc33)"},
|
|||
|
|
{name:"商铺",src:"/static/icon/商铺.png",type:"1",underline_color:"linear-gradient(to right, #ff8c00, #ffcc33)"},
|
|||
|
|
{name:"厂房",src:"/static/icon/厂房.png",url:"/pages/center/tips",underline_color:"linear-gradient(to right, #ff8c00, #ffcc33)"},
|
|||
|
|
{name:"停车场",src:"/static/icon/停车场.png",type:"2",underline_color:"linear-gradient(to right, #ff8c00, #ffcc33)"}
|
|||
|
|
],
|
|||
|
|
gridList:[
|
|||
|
|
{name:"看房预约",src:"/static/icon/预约看房.png",url:"pages/reserve/reserveRecords"},
|
|||
|
|
{name:"合同签约",src:"/static/icon/合同签约.png",url:"pages/center/contract"},
|
|||
|
|
{name:"退租申请",src:"/static/icon/退租申请.png",url:"pages/form/leaseCancel"}
|
|||
|
|
],
|
|||
|
|
loadStatus: 'loadmore',
|
|||
|
|
flowList: [
|
|||
|
|
{
|
|||
|
|
"id":"0001",
|
|||
|
|
"name":"测试房屋",
|
|||
|
|
"type":"0",
|
|||
|
|
"rentFee": "1400",
|
|||
|
|
"footPrint": "80",
|
|||
|
|
"coverImgUrl":"/static/img/index/swiper/swiper3.jpg"
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"id":"0002",
|
|||
|
|
"name":"测试房屋",
|
|||
|
|
"type":"0",
|
|||
|
|
"rentFee": "1400",
|
|||
|
|
"footPrint": "80",
|
|||
|
|
"coverImgUrl":"/static/img/index/swiper/swiper3.jpg"
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"id":"0003",
|
|||
|
|
"name":"测试房屋",
|
|||
|
|
"type":"0",
|
|||
|
|
"rentFee": "1400",
|
|||
|
|
"footPrint": "80",
|
|||
|
|
"coverImgUrl":"/static/img/index/swiper/swiper3.jpg"
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"id":"0001",
|
|||
|
|
"name":"测试房屋",
|
|||
|
|
"type":"0",
|
|||
|
|
"rentFee": "1400",
|
|||
|
|
"footPrint": "80",
|
|||
|
|
"coverImgUrl":"/static/img/index/swiper/swiper3.jpg"
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
uvCode: uni.getStorageSync('uvCode')
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
// 自动定位到所在的城市
|
|||
|
|
// this.checkCity();
|
|||
|
|
// 获取数据
|
|||
|
|
this.findHouseList();
|
|||
|
|
this.getNoticecList();
|
|||
|
|
// 流量统计
|
|||
|
|
this.appSysFlowInfo();
|
|||
|
|
uni.$on('findIndexHouseList', (obj) => {
|
|||
|
|
// 获取数据
|
|||
|
|
this.findHouseList(1);
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
onUnload() {
|
|||
|
|
// 移除监听事件
|
|||
|
|
uni.$off('findIndexHouseList');
|
|||
|
|
},
|
|||
|
|
onPageScroll(e) {
|
|||
|
|
this.scrollTop = e.scrollTop;
|
|||
|
|
},
|
|||
|
|
onReachBottom() {
|
|||
|
|
this.loadStatus = 'loading';
|
|||
|
|
// 获取数据
|
|||
|
|
this.findHouseList()
|
|||
|
|
},
|
|||
|
|
// 下拉刷新
|
|||
|
|
onPullDownRefresh() {
|
|||
|
|
// 获取数据
|
|||
|
|
this.findHouseList(1);
|
|||
|
|
// 关闭刷新
|
|||
|
|
uni.stopPullDownRefresh();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
checkCity(){
|
|||
|
|
// 检查是否已选择城市，如果未选择，跳转到选择城市页面
|
|||
|
|
let lifeData = uni.getStorageSync('lifeData');
|
|||
|
|
let vuex_city = lifeData.vuex_city
|
|||
|
|
// console.log(vuex_city.length);
|
|||
|
|
if(!vuex_city || vuex_city.length == 0){
|
|||
|
|
// 没有token 则跳转到登录
|
|||
|
|
return this.$u.route('/pages/location/location');
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
location(){
|
|||
|
|
this.$u.route({
|
|||
|
|
url: 'pages/location/location',
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
search(){
|
|||
|
|
this.$u.route({
|
|||
|
|
url: 'pages/search/search',
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
notice(){
|
|||
|
|
this.$u.route({
|
|||
|
|
url: 'pages/notice/notice'
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
//查找房源信息
|
|||
|
|
findHouseList(type = 0) {
|
|||
|
|
if(type == 1){
|
|||
|
|
this.pageNum = 1
|
|||
|
|
this.flowList = []
|
|||
|
|
this.$refs.uWaterfall.clear();
|
|||
|
|
}
|
|||
|
|
let url = "/api/houseApi/findHouseRoomList";
|
|||
|
|
this.$u.get(url, {
|
|||
|
|
state:1,
|
|||
|
|
villageCity:uni.getStorageSync('lifeData').vuex_city,
|
|||
|
|
pageNum: this.pageNum,
|
|||
|
|
pageSize: this.pageSize,
|
|||
|
|
orderByColumn: 'update_time,create_time',
|
|||
|
|
isAsc: 'desc'
|
|||
|
|
}).then(result => {
|
|||
|
|
const data = result.rows;
|
|||
|
|
if(this.pageNum>1 && data.length < this.pageSize){
|
|||
|
|
return this.loadStatus = 'nomore';
|
|||
|
|
}
|
|||
|
|
this.houseList = data;
|
|||
|
|
for (let i = 0; i < this.houseList.length; i++) {
|
|||
|
|
// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
|
|||
|
|
let item = this.houseList[i]
|
|||
|
|
if(!item.faceUrl.includes(config.staticUrl)){
|
|||
|
|
item.image = config.staticUrl+item.faceUrl
|
|||
|
|
}else{
|
|||
|
|
item.image = item.faceUrl
|
|||
|
|
}
|
|||
|
|
if(item.type == 0){
|
|||
|
|
item.type = '整租'
|
|||
|
|
}else if(item.type == 1){
|
|||
|
|
item.type = '合租'
|
|||
|
|
}
|
|||
|
|
if(item.roomType == 1){
|
|||
|
|
item.roomType = '主卧'
|
|||
|
|
}else if(item.roomType == 2){
|
|||
|
|
item.roomType = '次卧'
|
|||
|
|
}else{
|
|||
|
|
item.roomType = '未知'
|
|||
|
|
}
|
|||
|
|
if(this.$u.test.isEmpty(item.houseNum)){
|
|||
|
|
item.houseNum = ''
|
|||
|
|
}
|
|||
|
|
if(this.$u.test.isEmpty(item.houseHall)){
|
|||
|
|
item.houseHall = ''
|
|||
|
|
}
|
|||
|
|
if(this.$u.test.isEmpty(item.toiletNum)){
|
|||
|
|
item.toiletNum = ''
|
|||
|
|
}
|
|||
|
|
this.flowList.push(item);
|
|||
|
|
}
|
|||
|
|
++ this.pageNum
|
|||
|
|
this.loadStatus = 'loadmore';
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
clickSearch() {
|
|||
|
|
this.$u.route('/pages/search/search');
|
|||
|
|
},
|
|||
|
|
clickImage(houseId) {
|
|||
|
|
this.$u.route({
|
|||
|
|
url: '/pages/detail/assetsDetail'
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// this.$u.route({
|
|||
|
|
// url: '/pages/detail/detail',
|
|||
|
|
// params: {
|
|||
|
|
// houseId: houseId
|
|||
|
|
// }
|
|||
|
|
// })
|
|||
|
|
},
|
|||
|
|
clickNav(item,index){
|
|||
|
|
this.activeIndex = index;
|
|||
|
|
this.findHouseList(item.type);
|
|||
|
|
},
|
|||
|
|
clickGrid(item){
|
|||
|
|
console.log('跳转我的预约,url:' + item.url)
|
|||
|
|
this.$u.route({
|
|||
|
|
url: item.url
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
code(){
|
|||
|
|
this.$mytip.toast('请咨询作者')
|
|||
|
|
},
|
|||
|
|
appSysFlowInfo(){
|
|||
|
|
// 流量统计
|
|||
|
|
let uvCode = uni.getStorageSync("uvCode");
|
|||
|
|
let url = "https://sourcebyte.cn/api/flow/upFlow?type=MINI&uvCode=" + uvCode;
|
|||
|
|
uni.request({
|
|||
|
|
url: url,
|
|||
|
|
method: "POST",
|
|||
|
|
success: (res) => {
|
|||
|
|
uni.setStorageSync("uvCode", res.data.data);
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
server(){
|
|||
|
|
// window.open ('https://sourcebyte.cn')
|
|||
|
|
uni.makePhoneCall({
|
|||
|
|
phoneNumber: "18720989281",
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
getNoticecList(){
|
|||
|
|
// let url = "/api/notice/findNoticeList";
|
|||
|
|
// this.$u.get(url,{
|
|||
|
|
// pageNum:1,
|
|||
|
|
// pageSize:50,
|
|||
|
|
// orderByColumn:'create_time',
|
|||
|
|
// isAsc:'desc'
|
|||
|
|
// }).then(obj => {
|
|||
|
|
// let data = obj.rows
|
|||
|
|
// data.filter(item=>{
|
|||
|
|
// this.noticeList.push(item.noticeTitle)
|
|||
|
|
// })
|
|||
|
|
// });
|
|||
|
|
},
|
|||
|
|
moreInfo(){
|
|||
|
|
uni.navigateToMiniProgram({
|
|||
|
|
appId:'wxbca64173e772915e',// 此为开源字节appid
|
|||
|
|
path:'/pages/index/index',// 此为开源字节首页路径
|
|||
|
|
envVersion:"release",
|
|||
|
|
success: res => {
|
|||
|
|
// 打开成功
|
|||
|
|
console.log("打开成功", res);
|
|||
|
|
},
|
|||
|
|
fail: err => {
|
|||
|
|
console.log(err);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.index{
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
}
|
|||
|
|
.nomore {
|
|||
|
|
background-color: $u-bg-color;
|
|||
|
|
}
|
|||
|
|
.search-bar {
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
background-color: rgb(255, 255, 255);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
}
|
|||
|
|
.location-chose{
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
}
|
|||
|
|
.search{
|
|||
|
|
width: 70px;
|
|||
|
|
height: 44px;
|
|||
|
|
&:active{
|
|||
|
|
background-color: $u-bg-color;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.function-grid {
|
|||
|
|
margin: 0 20rpx;
|
|||
|
|
padding: 20rpx 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 下划线 */
|
|||
|
|
.underline {
|
|||
|
|
margin-top: 5rpx;
|
|||
|
|
width: 130rpx;
|
|||
|
|
height: 6rpx;
|
|||
|
|
border-radius: 5rpx;
|
|||
|
|
transition: all 0.25s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rowClass{
|
|||
|
|
border-radius: 8px;
|
|||
|
|
background-color: rgb(255, 255, 255);
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hoverClass{
|
|||
|
|
background-color: #E4E7ED;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tabName{
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: $u-main-color;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.demo-warter {
|
|||
|
|
border-radius: 8px;
|
|||
|
|
margin-top: 3px;
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
padding: 3px;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-close {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 20rpx;
|
|||
|
|
right: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-cover {
|
|||
|
|
font-size: 55rpx;
|
|||
|
|
color: $u-type-warning;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-title {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: $u-main-color;
|
|||
|
|
font-weight: bold;
|
|||
|
|
padding-top: 5rpx;
|
|||
|
|
padding-left: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-price {
|
|||
|
|
font-weight: normal;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: $u-type-warning;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-desc {
|
|||
|
|
font-weight: normal;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: $u-tips-color;
|
|||
|
|
padding-bottom: 5rpx;
|
|||
|
|
padding-left: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-tag {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: $u-tips-color;
|
|||
|
|
margin-top: 3px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.buttom {
|
|||
|
|
.loginType {
|
|||
|
|
font-size: 14px;
|
|||
|
|
position: fixed;
|
|||
|
|
right: 30rpx;
|
|||
|
|
bottom: 300rpx;
|
|||
|
|
width: 60px;
|
|||
|
|
height: 60px;
|
|||
|
|
padding: 4px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
background: #FFF;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 60px;
|
|||
|
|
border-radius: 100%;
|
|||
|
|
-webkit-box-shadow: 0px 1px 20px 0px rgba(0,0,0,0.1),inset 0px -1px 0px 0px rgba(0,0,0,0.1);
|
|||
|
|
box-shadow: 0px 1px 20px 0px rgba(0,0,0,0.1),inset 0px -1px 0px 0px rgba(0,0,0,0.1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|