493 lines
13 KiB
Vue
493 lines
13 KiB
Vue
|
<template>
|
|||
|
|
<view :style="colorStyle">
|
|||
|
|
<NavBar titleText="个人主页"
|
|||
|
|
textSize="34rpx"
|
|||
|
|
:isScrolling="pageScrollStatus"
|
|||
|
|
:iconColor="pageScrollStatus ? '#333333' : '#ffffff'"
|
|||
|
|
:textColor="pageScrollStatus ? '#333333' : '#ffffff'"
|
|||
|
|
showBack
|
|||
|
|
:showEmpty="false"></NavBar>
|
|||
|
|
<!-- :style="{'height': 552 + (sysHeight * 2) + 'rpx'}" -->
|
|||
|
|
<view class="info-card w-full relative" >
|
|||
|
|
<view class="blur-bg w-full h-full abs-lt" :style="[headerStyle]"></view>
|
|||
|
|
<view class="w-full h-full content" :style="[cardStyle]">
|
|||
|
|
<view class="info">
|
|||
|
|
<view class="flex-between-center">
|
|||
|
|
<view class="flex-y-center">
|
|||
|
|
<view class="w-140 h-140 rd-50-p111- relative" :class="userInfo.vip_status ? 'svip-border' : 'white-border'">
|
|||
|
|
<image class="w-full h-full rd-50-p111- block" :src="userInfo.author_image" mode="aspectFill"></image>
|
|||
|
|
<image class="vip-badge" src="@/static/img/svip_badge.png" v-show="userInfo.vip_status"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="pl-28 text--w111-fff">
|
|||
|
|
<view class="w-260 flex-y-center flex-wrap">
|
|||
|
|
<text class="fs-32 fw-500">{{userInfo.author}}</text>
|
|||
|
|
<view class="vip flex-center" v-show="userInfo.level_name">
|
|||
|
|
<text class="iconfont icon-huiyuandengji"></text>
|
|||
|
|
V{{userInfo.level_name}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="fs-24 pt-22">ID:{{userInfo.relation_id}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex-y-center">
|
|||
|
|
<view class="w-154 h-58 rd-30rpx flex-center fs-24 text--w111-fff bg-white-01"
|
|||
|
|
v-if="userInfo.is_self" @tap="authTo('/pages/discover/discoverCreate/index')">
|
|||
|
|
<text class="iconfont icon-ic_edit fs-26"></text>
|
|||
|
|
<text class="pl-8">去发布</text>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view v-else class="w-124 h-58 rd-30rpx flex-center fs-24 text--w111-fff bg-white-01"
|
|||
|
|
@tap="followChange">
|
|||
|
|
<text v-show="!userInfo.is_follow" class="iconfont icon-ic_increase fs-24"></text>
|
|||
|
|
<text>{{userInfo.is_follow ? '已关注' : '关注'}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="w-58 h-58 rd-50-p111- ml-12 text--w111-fff bg-white-01 flex-center"
|
|||
|
|
:class="{'msg-icon': is_view == 0}" v-if="userInfo.is_self" @tap="authTo('/pages/discover/discoverMessage/index')">
|
|||
|
|
<text class="iconfont icon-ic_message2 w-32"></text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="fs-26 text--w111-fff lh-40rpx space-line user-desc mt-20">
|
|||
|
|
<text v-show="userInfo.desc">{{userInfo.desc}} </text>
|
|||
|
|
<text v-show="!userInfo.desc">此人很神秘，什么也没有留下～</text>
|
|||
|
|
<text class="iconfont icon-ic_edit fs-26" v-if="userInfo.is_self" @tap="toggleModal"></text>
|
|||
|
|
</view>
|
|||
|
|
<view class="mt-48 px-28 flex-between-center text--w111-fff">
|
|||
|
|
<view class="text-center" v-for="(item,index) in infoList" :key="index"
|
|||
|
|
@tap="userTo('/pages/discover/discoverFollow/index?type=' + index)">
|
|||
|
|
<view class="fs-30">{{item.count}}</view>
|
|||
|
|
<view class="pt-10 fs-24">{{item.name}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="h-56"></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="list-box">
|
|||
|
|
<view class="list-tab flex-between-center relative" :class="showSearch ? 'pt-28' : 'pt-42'" v-if="userInfo.is_self">
|
|||
|
|
<text v-show="!showSearch"></text>
|
|||
|
|
<view class="flex-y-center fs-34 text--w111-999 center-tabs" v-show="!showSearch">
|
|||
|
|
<view :class="{'active-tab': active == 0}" @tap="changeTab(0)">作品</view>
|
|||
|
|
<view class="ml-66" :class="{'active-tab': active == 1}" @tap="changeTab(1)">赞过</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="w-608 h-58 rd-30rpx bg--w111-f1f1f1 flex-y-center ml-12 pl-20" v-show="showSearch">
|
|||
|
|
<text class="iconfont icon-ic_search fs-30 text--w111-999"></text>
|
|||
|
|
<input type="text" v-model="params.keyword" placeholder="搜索笔记/用户/商品" @confirm="searchSubmit"
|
|||
|
|
class="flex-1 pl-14 fs-24" />
|
|||
|
|
</view>
|
|||
|
|
<text v-show="!showSearch && !params.keyword" class="iconfont icon-ic_search fs-40 pr-10" @tap="openSearch"></text>
|
|||
|
|
<text v-show="showSearch && params.keyword" class="fs-26 text--w111-999 pr-10" @tap="searchSubmit">搜索</text>
|
|||
|
|
<text v-show="showSearch && !params.keyword" class="fs-26 text--w111-999 pr-10" @tap="reset">取消</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="list-tab" v-else></view>
|
|||
|
|
<view class="pt-20 pl-20 pr-20 bg--w111-f5f5f5" v-show="contentList.length">
|
|||
|
|
<waterfallsFlow :wfList="contentList" isSelf @onFlowLike="flowLike"></waterfallsFlow>
|
|||
|
|
</view>
|
|||
|
|
<view class="px-20 bg--w111-f5f5f5" v-show="!contentList.length">
|
|||
|
|
<emptyPage title="暂无内容～"></emptyPage>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 确认框 -->
|
|||
|
|
<tui-modal :show="showModal" maskClosable custom @cancel="toggleModal">
|
|||
|
|
<view class="tui-modal-custom">
|
|||
|
|
<view class="fs-32 fw-500 lh-44rpx text-center">编辑简介</view>
|
|||
|
|
<view class="mt-24 bg--w111-f5f5f5 rd-16rpx p-30rpx h-342" @tap="openFocus">
|
|||
|
|
<textarea class="w-full fs-26"
|
|||
|
|
ref="myTextarea"
|
|||
|
|
v-model="userInfo.desc"
|
|||
|
|
auto-height
|
|||
|
|
:focus="focus"
|
|||
|
|
wrap-style="wrap"
|
|||
|
|
:always-embed="true"
|
|||
|
|
:adjust-position="true"
|
|||
|
|
cursor-spacing="85rpx"
|
|||
|
|
:maxlength="50"
|
|||
|
|
name="desc" />
|
|||
|
|
</view>
|
|||
|
|
<view class="flex-between-center mt-40">
|
|||
|
|
<view class="w-244 h-72 rd-36rpx flex-center fs-26 font-num close-btn" @tap="toggleModal">取消</view>
|
|||
|
|
<view class="w-244 h-72 rd-36rpx flex-center bg-color text--w111-fff fs-26" @tap="saveDesc">保存</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</tui-modal>
|
|||
|
|
<!-- 确认框 -->
|
|||
|
|
<tuiModal
|
|||
|
|
:show="showFollow"
|
|||
|
|
title="确认取消关注"
|
|||
|
|
:maskClosable="false"
|
|||
|
|
@click="handleClick"></tuiModal>
|
|||
|
|
<home></home>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
let sysHeight = uni.getWindowInfo().statusBarHeight;
|
|||
|
|
import colors from "@/mixins/color";
|
|||
|
|
import emptyPage from '@/components/emptyPage.vue';
|
|||
|
|
import NavBar from "@/components/NavBar.vue";
|
|||
|
|
import waterfallsFlow from "@/components/discoverWaterfall/WaterfallsFlow.vue";
|
|||
|
|
import tuiModal from "@/components/tui-modal/index.vue";
|
|||
|
|
import {
|
|||
|
|
communityListApi,
|
|||
|
|
communityUserInfoApi,
|
|||
|
|
communityUpdateDescApi,
|
|||
|
|
communitySetInsterestApi,
|
|||
|
|
communityLikeListApi
|
|||
|
|
} from "@/api/community.js"
|
|||
|
|
import {serviceRecord} from '@/api/user.js';
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
sysHeight,
|
|||
|
|
pageScrollStatus:false,
|
|||
|
|
id:0,
|
|||
|
|
params:{
|
|||
|
|
page:1,
|
|||
|
|
limit:20,
|
|||
|
|
topic_id:'', //话题
|
|||
|
|
keyword:'',
|
|||
|
|
is_interest:0, //是否关注
|
|||
|
|
relation_id:'',
|
|||
|
|
},
|
|||
|
|
infoList:[
|
|||
|
|
{name:'关注',count:'0'},
|
|||
|
|
{name:'好友',count:'0'},
|
|||
|
|
{name:'粉丝',count:'0'},
|
|||
|
|
{name:'获赞',count:'0'},
|
|||
|
|
],
|
|||
|
|
active:0,
|
|||
|
|
contentList:[],
|
|||
|
|
userInfo:{},
|
|||
|
|
showSearch:false,
|
|||
|
|
showModal:false,
|
|||
|
|
showFollow:false,
|
|||
|
|
focus:false,
|
|||
|
|
is_view: 1
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
mixins: [colors],
|
|||
|
|
components:{ emptyPage, NavBar, waterfallsFlow, tuiModal },
|
|||
|
|
computed:{
|
|||
|
|
headerStyle(){
|
|||
|
|
return {
|
|||
|
|
// 'height': 552 + (this.sysHeight * 2) + 'rpx',
|
|||
|
|
'background-image':`url(${this.userInfo.author_image})`
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
cardStyle(){
|
|||
|
|
return {
|
|||
|
|
'padding-top':40 + this.sysHeight + 'px',
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
provide() {
|
|||
|
|
return {
|
|||
|
|
flowLike: this.flowLike
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onPageScroll(object) {
|
|||
|
|
if (object.scrollTop > 130) {
|
|||
|
|
this.pageScrollStatus = true;
|
|||
|
|
} else if (object.scrollTop < 130) {
|
|||
|
|
this.pageScrollStatus = false;
|
|||
|
|
}
|
|||
|
|
uni.$emit('scroll');
|
|||
|
|
},
|
|||
|
|
onReachBottom() {
|
|||
|
|
this.getList();
|
|||
|
|
},
|
|||
|
|
onLoad(options) {
|
|||
|
|
this.id = options.id;
|
|||
|
|
this.getList();
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
this.getUserInfo();
|
|||
|
|
},
|
|||
|
|
methods:{
|
|||
|
|
openFocus(){
|
|||
|
|
this.focus = true;
|
|||
|
|
},
|
|||
|
|
changeTab(val){
|
|||
|
|
if(this.active == val) return
|
|||
|
|
this.active = val;
|
|||
|
|
this.loading = false;
|
|||
|
|
this.contentList = [];
|
|||
|
|
this.params.page = 1;
|
|||
|
|
val == 1 ? this.getLike() : this.getList()
|
|||
|
|
},
|
|||
|
|
getList(){
|
|||
|
|
if (this.loading) return;
|
|||
|
|
this.loading = true;
|
|||
|
|
this.$set(this.params,'relation_id',this.id);
|
|||
|
|
communityListApi(this.params).then(res=>{
|
|||
|
|
let list = res.data;
|
|||
|
|
let loading = list.length < this.params.limit;
|
|||
|
|
this.contentList = this.contentList.concat(list);
|
|||
|
|
this.params.page++;
|
|||
|
|
this.loading = loading;
|
|||
|
|
}).catch(err => {
|
|||
|
|
return this.$util.Tips({
|
|||
|
|
title: err
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
getLike(){
|
|||
|
|
if (this.loading) return;
|
|||
|
|
this.loading = true;
|
|||
|
|
communityLikeListApi().then(res=>{
|
|||
|
|
let list = res.data.list;
|
|||
|
|
let loading = list.length < this.params.limit;
|
|||
|
|
this.contentList = this.contentList.concat(list);
|
|||
|
|
this.params.page++;
|
|||
|
|
this.loading = loading;
|
|||
|
|
}).catch(err => {
|
|||
|
|
return this.$util.Tips({
|
|||
|
|
title: err
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
getUserInfo(){
|
|||
|
|
communityUserInfoApi(this.id).then(res=>{
|
|||
|
|
this.userInfo = res.data;
|
|||
|
|
this.infoList[0].count = res.data.follow_num;
|
|||
|
|
this.infoList[1].count = res.data.friend_count;
|
|||
|
|
this.infoList[2].count = res.data.fans_num;
|
|||
|
|
this.infoList[3].count = res.data.like_num;
|
|||
|
|
serviceRecord({page: 1,limit: 1}).then(res => {
|
|||
|
|
this.is_view = res.data.community.is_viewed;
|
|||
|
|
})
|
|||
|
|
}).catch(err => {
|
|||
|
|
return this.$util.Tips({
|
|||
|
|
title: err
|
|||
|
|
},{
|
|||
|
|
tab: 3
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
userTo(url){
|
|||
|
|
if(this.userInfo.is_self){
|
|||
|
|
if(url == '/pages/discover/discoverFollow/index?type=3') return
|
|||
|
|
this.authTo(url);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
authTo(url){
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
openSearch(){
|
|||
|
|
this.showSearch = !this.showSearch;
|
|||
|
|
if(!this.showSearch && this.params.keyword){
|
|||
|
|
this.params.keyword = '';
|
|||
|
|
this.params.page = 1;
|
|||
|
|
this.contentList = [];
|
|||
|
|
this.loading = false;
|
|||
|
|
this.getList();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
searchSubmit(){
|
|||
|
|
this.params.page = 1;
|
|||
|
|
this.contentList = [];
|
|||
|
|
this.loading = false;
|
|||
|
|
this.getList();
|
|||
|
|
},
|
|||
|
|
reset(){
|
|||
|
|
this.params.keyword = '';
|
|||
|
|
this.showSearch = false;
|
|||
|
|
// this.searchSubmit();
|
|||
|
|
},
|
|||
|
|
toggleModal(){
|
|||
|
|
this.showModal = !this.showModal;
|
|||
|
|
},
|
|||
|
|
saveDesc(){
|
|||
|
|
if(this.userInfo.desc == '') return this.$util.Tips({
|
|||
|
|
title: '请输入介绍'
|
|||
|
|
});
|
|||
|
|
communityUpdateDescApi({desc:this.userInfo.desc}).then(res=>{
|
|||
|
|
this.showModal = false;
|
|||
|
|
this.getUserInfo();
|
|||
|
|
uni.showToast({
|
|||
|
|
title:res.msg,
|
|||
|
|
icon:'none'
|
|||
|
|
})
|
|||
|
|
}).catch(err=>{
|
|||
|
|
return this.$util.Tips({
|
|||
|
|
title: err
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
followChange(){
|
|||
|
|
if(this.userInfo.is_follow == 0){
|
|||
|
|
communitySetInsterestApi(this.id,{status:1}).then(res=>{
|
|||
|
|
this.userInfo.is_follow = 1;
|
|||
|
|
return this.$util.Tips({
|
|||
|
|
title: res.msg
|
|||
|
|
});
|
|||
|
|
}).catch(err => {
|
|||
|
|
return this.$util.Tips({
|
|||
|
|
title: err
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}else{
|
|||
|
|
this.showFollow = true;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
handleClick(e){
|
|||
|
|
let index = e.index;
|
|||
|
|
let that = this;
|
|||
|
|
if(index == 1){
|
|||
|
|
communitySetInsterestApi(this.id,{status:0}).then(res=>{
|
|||
|
|
this.userInfo.is_follow = 0;
|
|||
|
|
this.showFollow = false;
|
|||
|
|
return this.$util.Tips({
|
|||
|
|
title: res.msg
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}).catch(err => {
|
|||
|
|
this.showFollow = false;
|
|||
|
|
return this.$util.Tips({
|
|||
|
|
title: err
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}else{
|
|||
|
|
this.showFollow = false;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
flowLike(data){
|
|||
|
|
let index = this.contentList.findIndex(item=> data.id == item.id);
|
|||
|
|
this.contentList[index].is_like = data.status;
|
|||
|
|
if(data.status == 1){
|
|||
|
|
this.contentList[index].like_num++;
|
|||
|
|
}else{
|
|||
|
|
this.contentList[index].like_num--;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.info-card{
|
|||
|
|
background-size: cover;
|
|||
|
|
}
|
|||
|
|
.blur-bg{
|
|||
|
|
filter: blur(50rpx);
|
|||
|
|
background-size: cover;
|
|||
|
|
}
|
|||
|
|
.content{
|
|||
|
|
position: relative; /* 设置为相对定位 */
|
|||
|
|
z-index: 2; /* 设置更高的层级以覆盖背景 */
|
|||
|
|
filter: blur(0);
|
|||
|
|
background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.1) 39%, rgba(0, 0, 0, 0.7) 100%);
|
|||
|
|
}
|
|||
|
|
.info{
|
|||
|
|
padding: 38rpx 34rpx 0 30rpx;
|
|||
|
|
}
|
|||
|
|
.bg-white-01{
|
|||
|
|
background-color:rgba(255, 255, 255, 0.1);
|
|||
|
|
}
|
|||
|
|
.bg--w111-f1f1f1{
|
|||
|
|
background-color: #f1f1f1;
|
|||
|
|
}
|
|||
|
|
.border-white{
|
|||
|
|
border: 1rpx solid #fff;
|
|||
|
|
}
|
|||
|
|
.list-box{
|
|||
|
|
position: relative;
|
|||
|
|
left: 0;
|
|||
|
|
top: -24rpx;
|
|||
|
|
border-radius: 24rpx 24rpx 0 0;
|
|||
|
|
z-index: 90;
|
|||
|
|
}
|
|||
|
|
.list-tab{
|
|||
|
|
background: linear-gradient( 180deg, #FFFFFF 0%, #F5F5F5 100%);
|
|||
|
|
padding-left: 20rpx;
|
|||
|
|
padding-right: 20rpx;
|
|||
|
|
padding-bottom: 24rpx;
|
|||
|
|
border-radius: 24rpx 24rpx 0 0;
|
|||
|
|
}
|
|||
|
|
.center-tabs{
|
|||
|
|
position: absolute;
|
|||
|
|
top: 38rpx;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
}
|
|||
|
|
.active-tab{
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #333;
|
|||
|
|
position: relative;
|
|||
|
|
&:after{
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
bottom: -14rpx;
|
|||
|
|
width: 64rpx;
|
|||
|
|
height: 5rpx;
|
|||
|
|
background: var(--view-theme);
|
|||
|
|
border-radius: 4rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.vip{
|
|||
|
|
width: 64rpx;
|
|||
|
|
height: 26rpx;
|
|||
|
|
background: #FEF0D9;
|
|||
|
|
border: 1px solid #FACC7D;
|
|||
|
|
border-radius: 50rpx;
|
|||
|
|
font-size: 18rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #DFA541;
|
|||
|
|
margin-left: 10rpx;
|
|||
|
|
.iconfont {
|
|||
|
|
font-size: 16rpx;
|
|||
|
|
margin-right: 4rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.vip-badge{
|
|||
|
|
position: absolute;
|
|||
|
|
top: -20rpx;
|
|||
|
|
right: 0;
|
|||
|
|
width: 48rpx;
|
|||
|
|
height: 46rpx;
|
|||
|
|
}
|
|||
|
|
.svip-border{
|
|||
|
|
border: 2rpx solid #F1BB0D;
|
|||
|
|
}
|
|||
|
|
.tui-modal-custom{
|
|||
|
|
height: 530rpx;
|
|||
|
|
.h-342{
|
|||
|
|
height: 342rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.white-border{
|
|||
|
|
border: 2rpx solid #FFFFFF;
|
|||
|
|
}
|
|||
|
|
.modal-btn{
|
|||
|
|
width: 244rpx;
|
|||
|
|
height: 72rpx;
|
|||
|
|
border-radius: 36rpx;
|
|||
|
|
}
|
|||
|
|
.close-btn{
|
|||
|
|
border: 1rpx solid var(--view-theme);
|
|||
|
|
}
|
|||
|
|
.confirm-btn{
|
|||
|
|
background-color: var(--view-theme);
|
|||
|
|
}
|
|||
|
|
.msg-icon{
|
|||
|
|
position: relative;
|
|||
|
|
&:after{
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
right: 8rpx;
|
|||
|
|
top: 10rpx;
|
|||
|
|
width: 12rpx;
|
|||
|
|
height: 12rpx;
|
|||
|
|
border-radius: 6rpx;
|
|||
|
|
background-color: #e93323;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.user-desc{
|
|||
|
|
max-height: 200rpx;
|
|||
|
|
overflow-y: scroll;
|
|||
|
|
}
|
|||
|
|
</style>
|