893 lines
21 KiB
Vue
893 lines
21 KiB
Vue
<template>
|
|
<van-pull-refresh v-model="pull_loading" @refresh="onRefresh" success-text="刷新成功">
|
|
<van-list
|
|
v-model="loading"
|
|
:finished="finished"
|
|
finished-text=""
|
|
ref="list"
|
|
@load="onLoad"
|
|
class="msglist"
|
|
>
|
|
<div
|
|
class="msgcell"
|
|
v-for="(item, index) in list"
|
|
:key="item.gandanhome_id"
|
|
>
|
|
<div class="namebox">
|
|
<div class="left">
|
|
<div class="leftcon">
|
|
<img
|
|
v-lazy="img_host + item.patient_photo"
|
|
alt=""
|
|
class="avastar head"
|
|
@click="goPage(item.patient_uuid)"
|
|
/>
|
|
<div class="info">
|
|
<div class="name_level">
|
|
<div class="name">{{ item.patient_name }}</div>
|
|
<img
|
|
v-lazy="imgcell.url"
|
|
alt=""
|
|
class="level"
|
|
v-for="imgcell in item.tags"
|
|
:key="imgcell.url"
|
|
v-if="type != 'mypage'"
|
|
/>
|
|
<div
|
|
class="settop"
|
|
v-if="type == 'mypage'|| type =='patient'"
|
|
v-show="item.top_flag == 1"
|
|
>
|
|
<span>置顶</span>
|
|
</div>
|
|
</div>
|
|
<div class="time">{{ item.update_date | fromTimeNow }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="more"
|
|
v-if="type == 'mypage'"
|
|
@click="openMore(index, item.gandanhome_id, item.top_flag)"
|
|
>
|
|
...
|
|
</div>
|
|
</div>
|
|
<div class="title" @click="goDetail(item.gandanhome_id)">
|
|
{{ item.title }}
|
|
</div>
|
|
<!-- <div @click.stop="goDetail(item.gandanhome_id)"> -->
|
|
<clamp
|
|
:htmlContent="item.content"
|
|
:topics="item.topics"
|
|
:id="item.gandanhome_id"
|
|
></clamp>
|
|
<!-- </div> -->
|
|
<div
|
|
class="imgbox"
|
|
@click="goDetail(item.gandanhome_id)"
|
|
v-if="item.imgs.length <= 6 && item.imgs.length != 4"
|
|
>
|
|
<div class="imgrow" v-for="itemcell in transforPages(item.imgs, 3)">
|
|
<div class="imgcell" v-for="imgcell in itemcell">
|
|
<van-image
|
|
v-if="imgcell.status==1"
|
|
lazy-load
|
|
fit="cover"
|
|
radius="8px"
|
|
:src="imgcell.url"
|
|
width="110px"
|
|
height="110px"
|
|
/>
|
|
<van-image
|
|
v-else
|
|
lazy-load
|
|
fit="cover"
|
|
radius="8px"
|
|
:src="require('../assets/weigui.png')"
|
|
width="110px"
|
|
height="110px"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="imgbox" v-else-if="item.imgs.length == 4">
|
|
<div
|
|
class="imgrow tworow"
|
|
v-for="itemcell in transforPages(item.imgs, 2)"
|
|
@click="goDetail(item.gandanhome_id)"
|
|
>
|
|
<div class="imgcell" v-for="imgcell in itemcell">
|
|
<van-image
|
|
lazy-load
|
|
v-if="imgcell.status==1"
|
|
radius="8px"
|
|
:src="imgcell.url"
|
|
width="110px"
|
|
height="110px"
|
|
/>
|
|
<van-image
|
|
lazy-load
|
|
v-else
|
|
radius="8px"
|
|
:src="require('../assets/weigui.png')"
|
|
width="110px"
|
|
height="110px"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="imgbox" v-else>
|
|
<div class="swiperbox">
|
|
<van-swipe :height="142" indicator-color="#3CC7C0">
|
|
<van-swipe-item
|
|
v-for="(imgcell, index) in item.imgs"
|
|
:key="index"
|
|
|
|
@click="goDetail(item.gandanhome_id)"
|
|
>
|
|
<div class="swipebg" >
|
|
<img v-lazy="imgcell.url" alt="" class="swiperImg" v-if="imgcell.status==1"/>
|
|
<img src="../assets/weigui.png" alt="" class="swiperImg" v-else>
|
|
</div>
|
|
|
|
<!-- <img v-lazy="imgcell.url" alt="" class="swipebg" v-if="imgcell.status==1"/>
|
|
<img src="../assets/weigui.png" alt="" class="swipebg" v-else> -->
|
|
<img v-lazy="imgcell.url" alt="" class="swiperImg" v-if="imgcell.status==1"/>
|
|
<img src="../assets/weigui.png" alt="" class="swiperImg" v-else>
|
|
</van-swipe-item>
|
|
</van-swipe>
|
|
</div>
|
|
</div>
|
|
<div class="tool" @click="goDetail(item.gandanhome_id)">
|
|
<div class="address">
|
|
{{ item.ip_show == 1 ? item.ip_address_province : "" }}
|
|
</div>
|
|
<div class="zan_comment">
|
|
<div
|
|
class="zan"
|
|
@click.stop="
|
|
toggleLike(item.isLike, index, item.gandanhome_id, item.likeNum)
|
|
"
|
|
>
|
|
<img src="../assets/zan.png" alt="" v-if="item.isLike == 1" />
|
|
<img src="../assets/unzan.png" alt="" v-else />
|
|
<div class="zancount" v-if="item.likeNum >0">{{ item.likeNum }}</div>
|
|
</div>
|
|
<!-- <div class="collectbox" v-if="type=='mypage' || type=='mycollect'" @click.stop="toggleCollect(item.is_collect,index,item.gandanhome_id)">
|
|
|
|
<img src="../assets/collect.png" alt="" v-if="item.is_collect == 1"/>
|
|
<img src="../assets/uncollect.png" alt="" v-else />
|
|
</div> -->
|
|
<div class="comment">
|
|
<img src="../assets/msg_comment.png" alt="" />
|
|
<div class="zancount" v-if="item.commonNum >0">{{ item.commonNum }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="nodata" v-show="list.length == 0 ">
|
|
<div class="empty">
|
|
<img src="../assets/tie_empty.png" alt="" />
|
|
<div class="emptydesc">
|
|
{{
|
|
type == "searchBytitle"
|
|
? "暂未搜到相关帖子~"
|
|
: type == "homeFollow"
|
|
? "关注的人暂无发布哦~"
|
|
: type == "homeFriend"
|
|
? "好友暂无发布哦~"
|
|
: "暂无相关帖子~"
|
|
}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<van-popup
|
|
v-model:show="showBottom"
|
|
round
|
|
position="bottom"
|
|
:style="{ height: '236px' }"
|
|
>
|
|
<div class="dealcell" @click="toggleTop">
|
|
{{ top_flag == 0 ? "置顶" : "取消置顶" }}
|
|
</div>
|
|
<div class="dealcell" @click="goPublic">编辑</div>
|
|
<div class="dealcell" @click="confirmDel">删除</div>
|
|
<div class="ba"></div>
|
|
<div class="dealcell" @click="showBottom = false">取消</div>
|
|
</van-popup>
|
|
</van-list>
|
|
</van-pull-refresh>
|
|
</template>
|
|
|
|
<script>
|
|
import img_host from "@/utils/imgHost";
|
|
import clamp from "./clamp";
|
|
import moment from "moment";
|
|
import { Dialog } from "vant";
|
|
import { throttle } from "../utils/debounce";
|
|
import cookie from "../utils/cookie";
|
|
moment.locale("zh-cn");
|
|
export default {
|
|
components: {
|
|
clamp,
|
|
},
|
|
filters: {
|
|
fromTimeNow(val) {
|
|
return moment(val).fromNow();
|
|
},
|
|
},
|
|
mounted(){
|
|
|
|
this.$toast.allowMultiple();
|
|
},
|
|
data() {
|
|
return {
|
|
img_host: img_host,
|
|
finished: false,
|
|
loading: false,
|
|
pull_loading: false,
|
|
page: 0,
|
|
list: [],
|
|
top_flag: 0,
|
|
showBottom: false,
|
|
dealIndex: 0,
|
|
};
|
|
},
|
|
props: {
|
|
keyWord: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
patient_uuid: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
topic_id:{
|
|
type: String,
|
|
default: "",
|
|
},
|
|
api: {
|
|
type: Function,
|
|
},
|
|
},
|
|
watch: {
|
|
keyWord(newVal, oldVal) {
|
|
if (newVal) {
|
|
if(this.type == "searchBytitle"){
|
|
this.freshList();
|
|
}
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
closeBottom(){
|
|
this.showBottom = false;
|
|
},
|
|
goPage(uuid) {
|
|
let cur_uuid = cookie.readCookie("patient_uuid");
|
|
if (uuid == cur_uuid) {
|
|
this.$router.push({
|
|
path: "/mypage",
|
|
});
|
|
} else {
|
|
this.$router.push({
|
|
path: "/patientpage",
|
|
query: {
|
|
patient_uuid: uuid,
|
|
},
|
|
});
|
|
}
|
|
},
|
|
confirmDel() {
|
|
this.showBottom = false;
|
|
Dialog.confirm({
|
|
title: "温馨提示",
|
|
className: "mydialog",
|
|
message: "是否删除该帖子？",
|
|
})
|
|
.then(() => {
|
|
this.handelDelTopic();
|
|
})
|
|
.catch(() => {
|
|
// on cancel
|
|
});
|
|
},
|
|
openMore(index, gandanhome_id, top_flag) {
|
|
this.top_flag = top_flag;
|
|
this.gandanhome_id = gandanhome_id;
|
|
this.dealIndex = index;
|
|
this.showBottom = true;
|
|
},
|
|
toggleTop() {
|
|
this.top_flag == 0 ? this.handleTop() : this.handleCancelTop();
|
|
this.showBottom = false;
|
|
},
|
|
goPublic() {
|
|
this.showBottom = false;
|
|
this.$router.push({
|
|
path: "/publish",
|
|
query: {
|
|
gandanhome_id: this.gandanhome_id,
|
|
},
|
|
});
|
|
},
|
|
handelDelTopic() {
|
|
this.$api
|
|
.delTopic({
|
|
gandanhome_id: this.gandanhome_id,
|
|
})
|
|
.then((rep) => {
|
|
let result = rep.data;
|
|
if (result.code == 200) {
|
|
this.list.splice(this.dealIndex, 1);
|
|
this.$toast({
|
|
duration: 1000,
|
|
message: "删除成功",
|
|
});
|
|
} else {
|
|
this.$toast({
|
|
duration: 1000,
|
|
message: rep.data.message,
|
|
});
|
|
}
|
|
});
|
|
},
|
|
handleTop() {
|
|
this.$api
|
|
.setTop({
|
|
gandanhome_id: this.gandanhome_id,
|
|
})
|
|
.then((rep) => {
|
|
let result = rep.data;
|
|
if (result.code == 200) {
|
|
this.$set(this.list[this.dealIndex], "top_flag", 1);
|
|
this.$toast({
|
|
duration: 1000,
|
|
message: "置顶成功",
|
|
});
|
|
this.freshList();
|
|
} else {
|
|
this.$toast({
|
|
duration: 1000,
|
|
message: rep.data.message,
|
|
});
|
|
}
|
|
});
|
|
},
|
|
handleCompleteTask(id) {
|
|
this.$api
|
|
.addGrowRecord({
|
|
task_unique_id: id,
|
|
})
|
|
.then((rep) => {
|
|
var result = rep.data;
|
|
if (result.code == 200) {
|
|
if(result.data){
|
|
this.$toast({
|
|
duration: 2000,
|
|
message:'成长值+1',
|
|
});
|
|
}
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
});
|
|
},
|
|
handleCancelTop() {
|
|
this.$api
|
|
.cancelSetTop({
|
|
gandanhome_id: this.gandanhome_id,
|
|
})
|
|
.then((rep) => {
|
|
let result = rep.data;
|
|
if (result.code == 200) {
|
|
this.$set(this.list[this.dealIndex], "top_flag", 0);
|
|
this.$toast({
|
|
duration: 1000,
|
|
message: "已取消置顶",
|
|
});
|
|
this.freshList();
|
|
} else {
|
|
this.$toast({
|
|
duration: 1000,
|
|
message: rep.data.message,
|
|
});
|
|
}
|
|
});
|
|
},
|
|
onLoad() {
|
|
if (this.type == "searchBytitle") {
|
|
let str = this.keyWord.replace(/\s+/g, "");
|
|
if (str == "") {
|
|
this.page = 1;
|
|
this.list = [];
|
|
this.loading = false;
|
|
this.finished = false;
|
|
// this.$toast({
|
|
// duration: 1000,
|
|
// message: '请输入搜索内容',
|
|
// });
|
|
return false;
|
|
}
|
|
}
|
|
this.page++;
|
|
this.handleList();
|
|
},
|
|
goDetail(id) {
|
|
this.$router.push({
|
|
path: "talkDetail",
|
|
query: {
|
|
id: id,
|
|
},
|
|
});
|
|
},
|
|
onRefresh(){
|
|
this.freshList()
|
|
},
|
|
freshList: throttle(function () {
|
|
if (this.type == "searchBytitle") {
|
|
if (this.keyWord.replace(/\s+/g, "") == "") {
|
|
this.page = 1;
|
|
this.list = [];
|
|
this.loading = false;
|
|
this.finished = false;
|
|
// this.$toast({
|
|
// duration: 1000,
|
|
// message: '请输入搜索内容',
|
|
// });
|
|
return false;
|
|
}
|
|
}
|
|
this.page = 1;
|
|
this.pull_loading=false
|
|
this.list = [];
|
|
this.loading = false;
|
|
this.finished = false;
|
|
this.handleList();
|
|
}, 500),
|
|
handleList() {
|
|
let jsonData = null;
|
|
if (this.type == "searchBytitle") {
|
|
if (this.keyWord.replace(/\s+/g, "") == "") {
|
|
this.page = 1;
|
|
this.list = [];
|
|
this.loading = false;
|
|
this.finished = false;
|
|
// this.$toast({
|
|
// duration: 1000,
|
|
// message: '请输入搜索内容',
|
|
// });
|
|
return false;
|
|
}
|
|
jsonData = {
|
|
type: 1,
|
|
keyWord: this.keyWord,
|
|
page: this.page,
|
|
page_size: 10,
|
|
};
|
|
}else if(this.type =='ralationTopic'){
|
|
jsonData = {
|
|
topic_id: this.topic_id,
|
|
page: this.page,
|
|
page_size: 10,
|
|
};
|
|
} else if (this.type == "patient") {
|
|
jsonData = {
|
|
patient_uuid: this.patient_uuid,
|
|
page: this.page,
|
|
page_size: 10,
|
|
};
|
|
} else {
|
|
jsonData = {
|
|
page: this.page,
|
|
page_size: 10,
|
|
};
|
|
}
|
|
|
|
this.api(jsonData).then((rep) => {
|
|
var result = rep.data;
|
|
this.loading = false;
|
|
if (result.code == 200) {
|
|
this.list = this.list.concat(result.data.list);
|
|
if (result.data.list.length < 10) {
|
|
this.finished = true;
|
|
}
|
|
if (this.type == "homeFollow" && this.list.length > 0) {
|
|
this.$emit("getMyFollow", true);
|
|
}
|
|
} else {
|
|
this.$toast({
|
|
duration: 1000,
|
|
message: rep.data.message,
|
|
});
|
|
}
|
|
});
|
|
},
|
|
transforPages(arr, num) {
|
|
const pages = [];
|
|
arr.forEach((item, index) => {
|
|
const page = Math.floor(index / num);
|
|
if (!pages[page]) {
|
|
pages[page] = [];
|
|
}
|
|
pages[page].push(item);
|
|
});
|
|
return pages;
|
|
},
|
|
handleCancelCollect(index, gandanhome_id) {
|
|
this.$api
|
|
.cancelCollect({
|
|
gandanhome_id: gandanhome_id,
|
|
})
|
|
.then((rep) => {
|
|
let result = rep.data;
|
|
if (result.code == 200) {
|
|
this.$set(this.list[index], "is_collect", 0);
|
|
this.$toast({
|
|
duration: 1000,
|
|
message: "已取消收藏",
|
|
});
|
|
} else {
|
|
this.$toast({
|
|
duration: 1000,
|
|
message: rep.data.message,
|
|
});
|
|
}
|
|
});
|
|
},
|
|
|
|
toggleCollect(iscollect, index, gandanhome_id) {
|
|
iscollect == 0
|
|
? this.handleCollect(index, gandanhome_id)
|
|
: this.handleCancelCollect(index, gandanhome_id);
|
|
},
|
|
handleCollect(index, gandanhome_id) {
|
|
this.$api
|
|
.collect({
|
|
gandanhome_id: gandanhome_id,
|
|
})
|
|
.then((rep) => {
|
|
let result = rep.data;
|
|
if (result.code == 200) {
|
|
this.$set(this.list[index], "is_collect", 1);
|
|
this.$toast({
|
|
duration: 1000,
|
|
message: "收藏成功",
|
|
});
|
|
this.handleCompleteTask('task_add_collect')
|
|
} else {
|
|
this.$toast({
|
|
duration: 1000,
|
|
message: rep.data.message,
|
|
});
|
|
}
|
|
});
|
|
},
|
|
toggleLike(isLike, index, gandanhome_id, likeNum) {
|
|
isLike == 0
|
|
? this.handleLike(gandanhome_id, index, likeNum)
|
|
: this.handleCancelLike(gandanhome_id, index, likeNum);
|
|
},
|
|
handleCancelLike(gandanhome_id, index, likeNum) {
|
|
this.$api
|
|
.cancelLike({
|
|
gandanhome_id: gandanhome_id,
|
|
})
|
|
.then((rep) => {
|
|
let result = rep.data;
|
|
if (result.code == 200) {
|
|
this.$set(this.list[index], "isLike", 0);
|
|
this.$set(this.list[index], "likeNum", likeNum - 1);
|
|
this.$toast({
|
|
duration: 1000,
|
|
message: "已取消点赞",
|
|
});
|
|
} else {
|
|
this.$toast({
|
|
duration: 1000,
|
|
message: rep.data.message,
|
|
});
|
|
}
|
|
});
|
|
},
|
|
handleLike(gandanhome_id, index, likeNum) {
|
|
this.$api
|
|
.like({
|
|
gandanhome_id: gandanhome_id,
|
|
})
|
|
.then((rep) => {
|
|
let result = rep.data;
|
|
if (result.code == 200) {
|
|
this.$set(this.list[index], "isLike", 1);
|
|
this.$set(this.list[index], "likeNum", likeNum + 1);
|
|
this.$toast({
|
|
duration: 1000,
|
|
message: "点赞成功",
|
|
});
|
|
this.handleCompleteTask('task_add_collect')
|
|
} else {
|
|
this.$toast({
|
|
duration: 1000,
|
|
message: rep.data.message,
|
|
});
|
|
}
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.info .time {
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
.swiperbox {
|
|
margin-top: 10px;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
.swiperbox .van-swipe {
|
|
width: 100%;
|
|
}
|
|
.wraper >>> .van-swipe__indicator {
|
|
width: 9px;
|
|
height: 9px;
|
|
opacity: 1;
|
|
background-color: #fff;
|
|
}
|
|
.swiperbox>>> .van-swipe-item{
|
|
display: flex;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
.swiperImg {
|
|
margin:0 auto;
|
|
width:auto;
|
|
opacity: 1;
|
|
position: relative;
|
|
height:142px;
|
|
object-fit: contain;
|
|
}
|
|
.swipebg{
|
|
top:0;
|
|
height:142px;
|
|
position:absolute;
|
|
width: 100%;
|
|
opacity: 0.5;
|
|
object-fit: contain;
|
|
}
|
|
.swipebg .swiperImg{
|
|
width:100%;
|
|
height:auto;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.settop {
|
|
width: 35px;
|
|
height: 15px;
|
|
font-size: 12px;
|
|
text-align: center;
|
|
line-height: 15px;
|
|
margin-left: 5px;
|
|
background: linear-gradient(318deg, #3cc7c0 0%, #3cc7c0 0%, #6ef0e9 100%);
|
|
border-radius: 8px;
|
|
color: #fff;
|
|
}
|
|
.settop span {
|
|
font-size: 12px;
|
|
display: block;
|
|
transform: scale(0.8);
|
|
}
|
|
.ba {
|
|
width: 100%;
|
|
height: 8px;
|
|
background: #f3f3f3;
|
|
}
|
|
.dealcell {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 56px;
|
|
font-size: 16px;
|
|
color: rgba(0, 0, 0, 0.9);
|
|
justify-content: center;
|
|
border-bottom: 1px solid #efefef;
|
|
}
|
|
.dealcell:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.more {
|
|
font-size: 16px;
|
|
color: #000;
|
|
}
|
|
.head[lazy="error"] {
|
|
background: url("../assets/head.png") no-repeat center center;
|
|
background-size: cover;
|
|
}
|
|
.imgbox {
|
|
width: 100%;
|
|
}
|
|
.imgbox.tworow {
|
|
width: 66.66%;
|
|
}
|
|
.imgbox .imgrow {
|
|
margin-top: 10px;
|
|
display: flex;
|
|
/* justify-content: space-between; */
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.imgcell {
|
|
flex: 1;
|
|
max-width: 33.33%;
|
|
position: relative;
|
|
}
|
|
|
|
.imgbox .imgcell:nth-child(2n) {
|
|
text-align: center;
|
|
}
|
|
.imgbox .imgcell:nth-child(3n) {
|
|
text-align: right;
|
|
}
|
|
.tulist {
|
|
padding-top: 15px;
|
|
height: calc(100vh - 180px);
|
|
overflow-y: scroll;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
.tool {
|
|
margin-top: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.address {
|
|
font-size: 12px;
|
|
color: #999999;
|
|
}
|
|
.zan_comment {
|
|
min-width: 75px;
|
|
display: flex;
|
|
font-size: 14px;
|
|
color: #333333;
|
|
justify-content: space-between;
|
|
}
|
|
.zan {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.collectbox {
|
|
margin: 0 20px;
|
|
}
|
|
.zan img,
|
|
.comment img,
|
|
.collectbox img {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
.comment {
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
|
|
.msgcell {
|
|
background: #fff;
|
|
padding: 8px 15px;
|
|
border-bottom: 5px solid #f4f4f4;
|
|
}
|
|
|
|
.namebox {
|
|
width:100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.namebox .info {
|
|
display: flex;
|
|
flex: 1;
|
|
height: 40px;
|
|
justify-content: space-between;
|
|
margin-right: 10px;
|
|
margin-left: 6px;
|
|
flex-direction: column;
|
|
}
|
|
.namebox .left {
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
}
|
|
.msgcell .leftcon {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.msgcell .avastar {
|
|
width: 43px;
|
|
height: 43px;
|
|
border-radius: 50%;
|
|
}
|
|
.name_level {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.name_level .name {
|
|
white-space: nowrap;
|
|
font-size: 18px;
|
|
color: #000000;
|
|
}
|
|
|
|
.level {
|
|
margin-left: 5px;
|
|
margin-right: 4px;
|
|
height: 15px;
|
|
}
|
|
.level:first-child {
|
|
margin-left: 4px;
|
|
}
|
|
.listbox {
|
|
margin-top: 10px;
|
|
}
|
|
.listbox .cell {
|
|
margin: 0 15px;
|
|
padding: 13px 10px;
|
|
background: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 4px;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid #efefef;
|
|
}
|
|
.listbox .cell .head {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
}
|
|
.fllow {
|
|
width: 68px;
|
|
height: 25px;
|
|
display: flex;
|
|
color: #999;
|
|
font-size: 12px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #ffffff;
|
|
border-radius: 25px;
|
|
border: 1px solid #999999;
|
|
}
|
|
.listbox .cell .name {
|
|
font-size: 16px;
|
|
color: #333333;
|
|
margin-left: 24px;
|
|
}
|
|
.listbox .cell:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.listbox .cell .left {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.msglist .title {
|
|
line-height: 23px;
|
|
margin-top: 12px;
|
|
font-size: 17px;
|
|
color: #000000;
|
|
}
|
|
.msglist .msgdetail {
|
|
margin-top: 4px;
|
|
font-size: 15px;
|
|
line-height: 22px;
|
|
color: #666666;
|
|
}
|
|
.msglist .msgdetail span {
|
|
color: #3cc7c0;
|
|
}
|
|
.msglist {
|
|
background: transparent;
|
|
}
|
|
</style>
|