会话详情
This commit is contained in:
liuye
@@ -1,102 +0,0 @@
|
||||
<template>
|
||||
<div class="AppCommunityInfo" v-if="pageShow">
|
||||
<h2>{{ info.title }}</h2>
|
||||
<div class="info-info">
|
||||
<span>{{ info.areaName }}</span>
|
||||
<span>{{ info.createDate }}</span>
|
||||
</div>
|
||||
<image class="banner" @click="preview(banner)" v-if="banner" mode="widthFix" :src="banner"/>
|
||||
<div class="rich-content">
|
||||
<u-parse :html="info.content"></u-parse>
|
||||
</div>
|
||||
<AiEmpty v-if="!info.title"></AiEmpty>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "AppCommunityInfo",
|
||||
appName: "社区简介",
|
||||
data() {
|
||||
return {
|
||||
pageShow: false,
|
||||
info: {},
|
||||
banner: ''
|
||||
}
|
||||
},
|
||||
|
||||
onLoad(query) {
|
||||
if (query.type !== '0') {
|
||||
uni.setNavigationBarTitle({
|
||||
title: query.type == 4 ? '社区公约' : '党员阵地'
|
||||
})
|
||||
}
|
||||
|
||||
this.$loading()
|
||||
this.getInfo(query.type)
|
||||
},
|
||||
|
||||
methods: {
|
||||
getInfo(type) {
|
||||
this.$instance.post(`/app/appcountrysidetourism/queryDetailByAreaIdForWX?areaId=${uni.getStorageSync('areaId')}&type=${type}`).then(res => {
|
||||
if (res.code === 0 && res.data) {
|
||||
this.info = res.data
|
||||
this.banner = res.data.thumbUrl ? JSON.parse(res.data.thumbUrl)[0].url : ''
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.pageShow = true
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
preview(url) {
|
||||
uni.previewImage({
|
||||
urls: [url],
|
||||
current: url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppCommunityInfo {
|
||||
min-height: 100vh;
|
||||
padding: 0 32px 40px;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
|
||||
.banner {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
line-height: 1.3;
|
||||
padding: 32px 0 16px;
|
||||
font-size: 48px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.info-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
|
||||
span {
|
||||
color: #999999;
|
||||
font-size: 30px;
|
||||
|
||||
&:last-child {
|
||||
margin-left: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep.emptyWrap {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,666 +0,0 @@
|
||||
<template>
|
||||
<div class="AppPartyEnteringCommunity">
|
||||
<div class="header" :class="[isFixed ? 'header-active' : '']">
|
||||
<div class="status-bar" :style="{height: statusBarHeight + 'px'}"></div>
|
||||
<div class="nav-bar">
|
||||
<h2>进村</h2>
|
||||
</div>
|
||||
</div>
|
||||
<header>
|
||||
<image src="https://cdn.cunwuyun.cn/wechat/biaopin/custom/custom-top-bg.png"/>
|
||||
<div>
|
||||
<AiAreaPicker :selectRoot="false" ref="area" :value="areaId" :name.sync="areaName" :areaId="$areaId"
|
||||
@input="areaSelect">
|
||||
<div class="ai-area__wrapper">
|
||||
<span class="label" v-if="areaName">{{ areaName }}</span>
|
||||
<span v-else>请选择</span>
|
||||
<image src="/static/img/area-bottom.png"/>
|
||||
</div>
|
||||
</AiAreaPicker>
|
||||
<div class="welcome">欢迎进入{{ areaName }}</div>
|
||||
<div class="tag" v-if="user.homeArea === areaId">我的家乡</div>
|
||||
<div class="tag1" @click="updateUserInfo" v-if="!user.homeArea && token">设为家乡</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="card">
|
||||
<div class="card-item" hover-class="text-hover" @click="$linkTo('./AppCommunityInfo?type=0')">
|
||||
<image src="https://cdn.cunwuyun.cn/wechat/biaopin/custom/custom-banner-sqjj.png"/>
|
||||
</div>
|
||||
<div class="card-item" hover-class="text-hover" @click="$linkTo('./AppCommunityInfo?type=4')">
|
||||
<image src="https://cdn.cunwuyun.cn/wechat/biaopin/custom/custom-banner-sqgy.png"/>
|
||||
</div>
|
||||
<!-- <div class="card-item" hover-class="text-hover" @click="$linkTo('./AppCommunityInfo?type=5')">
|
||||
<image src="https://cdn.cunwuyun.cn/pingchang/dyzd.png"/>
|
||||
</div>
|
||||
<div class="card-item" hover-class="text-hover"
|
||||
@click="$linkTo('/mods/AppVillagerDiscussion/AppVillagerDiscussion')">
|
||||
<image src="https://cdn.cunwuyun.cn/pingchang/jmys.png"/>
|
||||
</div> -->
|
||||
</div>
|
||||
<!-- <div class="banner" @click="linkTo('/mods/AppCreditPoints/AppCpSupermarket', 'idNumber')">
|
||||
<image src="/static/img/jf-banner.png" class="banner"/>
|
||||
</div> -->
|
||||
<tempalte v-if="publicList.length">
|
||||
<div class="title-wrap">
|
||||
<span class="title">三务公开</span>
|
||||
<div class="right" hover-class="text-hover"
|
||||
@click="$linkTo(`/mods/AppContent/AppContent?names=三务公开&areaId=${areaId}`)">
|
||||
<span class="title-more">更多专题</span>
|
||||
<u-icon name="arrow-right" size="28" color="#999999"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-news">
|
||||
<div class="news-wrap" v-for="(item,index) in publicList" :key="index"
|
||||
@click="$linkTo('/mods/AppContent/contentDetail?id='+ item.id)">
|
||||
<div class="news-title">{{ item.title }}</div>
|
||||
<div class="news-bottom">
|
||||
<div class="tag">{{ item.categoryName }}</div>
|
||||
<div class="date">{{ item.createTime ? item.createTime.split(' ')[0] : '' }}</div>
|
||||
<div class="view">
|
||||
<em>{{ item.viewCount }}</em>
|
||||
人看过
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</tempalte>
|
||||
<div class="title-wrap" v-if="activityList.length">
|
||||
<span class="title">专题活动</span>
|
||||
<div class="right">
|
||||
<span class="title-more" @click="$linkTo('/mods/AppVillageActivity/AppVillageActivity')">更多活动</span>
|
||||
<u-icon name="arrow-right" size="28" color="#999999"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
<scroll-view :scroll-x="true" style="width: 100%" class="scroll-wrap" v-if="activityList.length">
|
||||
<div
|
||||
class="scroll-card"
|
||||
@click="$linkTo('/mods/AppVillageActivity/ActivityDetail?id=' + item.id)"
|
||||
hover-class="text-hover"
|
||||
v-for="(item, index) in activityList"
|
||||
:key="index">
|
||||
<image :src="item.url" mode="aspectFill"/>
|
||||
<div class="text">
|
||||
<span>{{ item.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty v-if="!activityList.length"></AiEmpty>
|
||||
</scroll-view>
|
||||
<!-- <div class="title-wrap">
|
||||
<span class="title">乡村相册</span>
|
||||
</div>
|
||||
<div class="album-list">
|
||||
<div
|
||||
class="album"
|
||||
v-for="(item, index) in albumList"
|
||||
hover-class="text-hover"
|
||||
:key="index"
|
||||
@click="$linkTo('/mods/AppPhotoAlbum/AppPhotoAlbum?type=' + item.type + '&name=' + item.name + '&url=' + item.coverImg)">
|
||||
<image :src="item.coverImg"/>
|
||||
<div class="total">共{{ item.total }}张</div>
|
||||
<div class="desc">{{ item.name }}</div>
|
||||
</div>
|
||||
<AiEmpty style="width: 100%" v-if="!albumList.length"></AiEmpty>
|
||||
</div> -->
|
||||
<AiLogin ref="login"/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {mapActions, mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: "AppPartyEnteringCommunity",
|
||||
appName: "社区",
|
||||
customNavigation: true,
|
||||
data() {
|
||||
return {
|
||||
isFixed: false,
|
||||
statusBarHeight: 20,
|
||||
top: 0,
|
||||
areaName: '',
|
||||
areaId: '',
|
||||
$areaId: '',
|
||||
albumList: [],
|
||||
activityList: [],
|
||||
publicList: [],
|
||||
moduleId: "",
|
||||
isInit: false
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.areaId = this.$mp.query.areaId || this.$areaId
|
||||
this.areaName = this.$mp.query.areaName || this.$areaName
|
||||
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
|
||||
this.autoLogin()
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.getName()
|
||||
this.getAlbumList()
|
||||
this.getActiveList()
|
||||
})
|
||||
uni.$on('update', () => {
|
||||
this.getAlbumList()
|
||||
})
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user', 'token'])
|
||||
},
|
||||
|
||||
onShow() {
|
||||
this.$nextTick(() => {
|
||||
this.token && this.getUserInfo('qujing')
|
||||
})
|
||||
|
||||
if (this.user.homeArea) {
|
||||
if (!this.isInit) {
|
||||
this.areaId = this.user.homeArea
|
||||
this.areaName = this.user.homeName
|
||||
uni.setStorageSync('areaId', this.user.homeArea)
|
||||
uni.setStorageSync('areaName', this.user.homeName)
|
||||
this.isInit = true
|
||||
}
|
||||
} else if (!this.isInit && !this.user.homeArea) {
|
||||
setTimeout(() => {
|
||||
this.$dialog.alert({
|
||||
content: '请选择您的家乡'
|
||||
}).then(() => {
|
||||
this.$refs.area?.handleJump()
|
||||
this.isInit = true
|
||||
})
|
||||
}, 600)
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapActions(['autoLogin', 'getUserInfo']),
|
||||
getName() {
|
||||
this.$instance.post("/app/appcontentmoduleinfo/listByNames", null, {
|
||||
params: {names: "三务公开"}
|
||||
}).then(res => {
|
||||
if (res.data && res.data.length) {
|
||||
this.moduleId = res.data[0]["id"];
|
||||
this.getPublicList();
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
updateUserInfo() {
|
||||
if (this.areaId.endsWith('000')) {
|
||||
this.$dialog.alert({
|
||||
content: '请选择村'
|
||||
}).then(() => {
|
||||
})
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
this.$instance.post("/app/appwechatuser/updateById", {
|
||||
id: this.user.id,
|
||||
homeArea: this.areaId,
|
||||
homeName: this.areaName
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.getUserInfo('qujing')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getPublicList() {
|
||||
this.$instance.post("/app/appcontentinfo/list", null, {
|
||||
params: {moduleId: this.moduleId, size: 3, areaId: this.areaId}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.publicList = res.data.records;
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
linkTo(url, type) {
|
||||
if (type) {
|
||||
if (this.token) {
|
||||
if (type === 'idNumber') {
|
||||
if (!this.user.residentId) {
|
||||
this.$linkTo('/mods/AppAuth/AppAuth')
|
||||
} else {
|
||||
this.$linkTo(url)
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.$refs.login.show()
|
||||
}
|
||||
} else {
|
||||
this.$linkTo(url)
|
||||
}
|
||||
},
|
||||
|
||||
areaSelect(v) {
|
||||
this.areaId = v
|
||||
this.isMore = false
|
||||
this.current = 0
|
||||
this.newsList = []
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.getActiveList()
|
||||
this.getAlbumList()
|
||||
this.getPublicList()
|
||||
uni.setStorageSync('areaId', this.areaId)
|
||||
uni.setStorageSync('areaName', this.areaName)
|
||||
})
|
||||
},
|
||||
|
||||
getAlbumList() {
|
||||
this.$instance.post(`/app/appvillagepicturealbum/queryAlbumMenu?areaId=${this.areaId}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.albumList = res.data.map(v => {
|
||||
return {
|
||||
...v,
|
||||
coverImg: `${this.$cdn}/dvcp/album/album${v.type}.png`
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getActiveList() {
|
||||
this.$instance.post(`/app/appvillageactivityinfo/listUp`, null, {
|
||||
params: {
|
||||
current: 1,
|
||||
size: 6,
|
||||
areaId: this.areaId
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.activityList = res.data.records.map(v => {
|
||||
return {
|
||||
...v,
|
||||
url: v.url ? JSON.parse(v.url)[0].url : ''
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: '欢迎使用数字党建平昌~',
|
||||
path: `/pages/AppPartyEnteringCommunity/AppPartyEnteringCommunity`
|
||||
}
|
||||
},
|
||||
|
||||
onPageScroll(params) {
|
||||
this.isFixed = params.scrollTop > 60;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.AppPartyEnteringCommunity {
|
||||
min-height: 100%;
|
||||
background: #F3F6F9;
|
||||
|
||||
::v-deep .emptyImg {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.header {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&.header-active {
|
||||
z-index: 1111;
|
||||
opacity: 1;
|
||||
background: #4181FF;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
position: relative;
|
||||
height: 88px;
|
||||
line-height: 88px;
|
||||
color: #fff;
|
||||
font-size: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
& > header {
|
||||
position: relative;
|
||||
height: 480px;
|
||||
box-sizing: border-box;
|
||||
padding-left: 32px;
|
||||
|
||||
& > div {
|
||||
position: relative;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.ai-area__wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 100px;
|
||||
|
||||
span {
|
||||
margin-right: 16px;
|
||||
color: #FFFFFF;
|
||||
font-size: 44px;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 16px;
|
||||
height: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
& > image {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 480px;
|
||||
}
|
||||
|
||||
.welcome {
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
line-height: 40px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
width: 120px;
|
||||
height: 44px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
color: #c0cae0;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.tag1 {
|
||||
width: 120px;
|
||||
height: 44px;
|
||||
border: 1px solid #c0cae0;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
color: #c0cae0;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
left: 32px;
|
||||
z-index: 1;
|
||||
background: #FFFFFF;
|
||||
border-radius: 32px;
|
||||
margin-top: -132px;
|
||||
box-sizing: border-box;
|
||||
padding: 28px 24px 0 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
width: 686px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.card-item {
|
||||
width: 308px;
|
||||
height: 144px;
|
||||
margin-bottom: 28px;
|
||||
|
||||
image {
|
||||
width: 308px;
|
||||
height: 144px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.banner {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 200px;
|
||||
background: linear-gradient(180deg, #FFFFFF 0%, #F3F6F9 100%);
|
||||
|
||||
image {
|
||||
display: block;
|
||||
width: 692px;
|
||||
height: 200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.title-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding: 32px 32px 24px;
|
||||
|
||||
.title {
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
font-size: 34px;
|
||||
color: #222;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.right {
|
||||
|
||||
.title-more {
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
line-height: 40px;
|
||||
color: #687DA6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.album-list {
|
||||
box-sizing: border-box;
|
||||
padding: 0 32px 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
|
||||
.album {
|
||||
position: relative;
|
||||
width: 218px;
|
||||
height: 240px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
|
||||
image {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.total {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
right: 8px;
|
||||
top: 8px;
|
||||
z-index: 2;
|
||||
width: 74px;
|
||||
height: 40px;
|
||||
background: rgba(0, 0, 0, .6);
|
||||
border-radius: 8px;
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.desc {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 12px;
|
||||
font-size: 32px;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-weight: 600;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-news {
|
||||
box-sizing: border-box;
|
||||
padding: 0 32px;
|
||||
|
||||
.news-wrap {
|
||||
height: 186px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
|
||||
border-radius: 16px;
|
||||
box-sizing: border-box;
|
||||
padding: 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.news-title {
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.news-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tag {
|
||||
width: 144px;
|
||||
height: 48px;
|
||||
background: #EEEEEE;
|
||||
border-radius: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.view {
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > em {
|
||||
color: #4181FF;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-wrap {
|
||||
box-sizing: border-box;
|
||||
padding: 0 32px;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
|
||||
.scroll-card {
|
||||
display: inline-block;
|
||||
width: 400px;
|
||||
height: 332px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
|
||||
border-radius: 16px;
|
||||
margin-right: 32px;
|
||||
font-size: 0;
|
||||
|
||||
& > image {
|
||||
width: 400px;
|
||||
height: 240px;
|
||||
border-radius: 16px 16px 0 0;
|
||||
}
|
||||
|
||||
.text {
|
||||
height: calc(100% - 240px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 0 32px;
|
||||
|
||||
& > span {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .AiArea {
|
||||
padding-top: 64px;
|
||||
height: 88px;
|
||||
|
||||
._img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.area-name {
|
||||
font-size: 44px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
@@ -23,7 +23,7 @@
|
||||
|
||||
<div class="card">
|
||||
<span class="card-left">事件来源</span>
|
||||
<span class="card-right">{{ $dict.getLabel('residentEventSource', data.eventSource) }}</span>
|
||||
<span class="card-right">{{ $dict.getLabel('residentEventSource', data.eventSource) }}<span v-if="data.sessionArchiveId" @click="toSessionDetail()">会话详情</span></span>
|
||||
</div>
|
||||
<div class="card">
|
||||
<span class="card-left">事件类型</span>
|
||||
@@ -269,6 +269,9 @@ export default {
|
||||
toEdit() {
|
||||
uni.navigateTo({url: `./Add?id=${this.id}&eventSource=${this.data.eventSource}`})
|
||||
},
|
||||
toSessionDetail() {
|
||||
uni.navigateTo({url: `./sessionDetail?sessionArchiveId=${this.data.sessionArchiveId}`})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -399,6 +402,12 @@ uni-page-body {
|
||||
.u-icon {
|
||||
margin-left: 8px;
|
||||
}
|
||||
span {
|
||||
color: #026AF2;
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
729
src/project/weiyang/AppWorkOrder/sessionDetail.vue
Normal file
729
src/project/weiyang/AppWorkOrder/sessionDetail.vue
Normal file
@@ -0,0 +1,729 @@
|
||||
<template>
|
||||
<div class="sessionDetail">
|
||||
<u-navbar back-icon-color="#000" title="会话详情" title-color="#000" title-width="300" title-size="32"
|
||||
:title-bold="true" :background="backgroundNavbar" :is-fixed="true" height="44"></u-navbar>
|
||||
<!-- <AiTopFixed>
|
||||
<div class="top-search" :style="{'top': `${statusBarHeight+44}px`}">
|
||||
<div class="left" @click="isShowDate=true">
|
||||
<div class="color-999" v-if="!dateList.length">开始时间-结束时间</div>
|
||||
<div v-else>{{dateList[0]}}至{{dateList[1]}}</div>
|
||||
<img src="https://cdn.sinoecare.com/i/2024/09/29/66f8b8a184a20.png" alt="" v-if="dateList.length" @click.stop="clearDate()">
|
||||
<div class="clear-btn" v-if="dateList.length" @click.stop="clearDate">
|
||||
<img src="https://cdn.sinoecare.com/i/2024/09/29/66f8b8a184a20.png" alt="" class="del-icon">
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<u-search v-model="keyword" :clearabled="true" placeholder="请输入关键词" :show-action="false" bg-color="#F5F5F5"
|
||||
search-icon-color="#999" color="#999" height="58" @search="getListInit" @clear="getListInit">
|
||||
</u-search>
|
||||
</div>
|
||||
</div>
|
||||
</AiTopFixed> -->
|
||||
<scroll-view :scroll-top="scrollTop" scroll-y class="scroll-Y" @scroll="scroll" v-if="list.length" :style="{height: scrollHeight+'px'}">
|
||||
<div class="conversation-list">
|
||||
<div v-for="(item, index) in list" :key="index">
|
||||
<div class="item" :class="item.userId == user.wxUserId ? 'item-right' : 'item-left'">
|
||||
|
||||
<img src="https://cdn.sinoecare.com/i/2024/09/29/66f8b8c30ffeb.png" alt="" class="fail-img" v-if="item.userId == user.wxUserId && item.isKeyword == 1">
|
||||
|
||||
<img :src="item.userAvatar" alt="" class="user-img" v-if="item.userId != user.wxUserId && item.userAvatar">
|
||||
<img src="https://cdn.sinoecare.com/i/2024/09/29/66f8b8e6da38e.png" alt="" class="user-img" v-if="item.userId != user.wxUserId && !item.userAvatar">
|
||||
|
||||
<p class="user-name">{{item.userName}}<span>{{item.msgSendTime}}</span></p>
|
||||
|
||||
<div class="content">
|
||||
<span class="cir" v-if="item.msgType == 'text'"></span>
|
||||
<p class="content-text" v-if="item.msgType == 'text'">{{item.content}}</p>
|
||||
|
||||
<div class="img-list" v-if="item.msgType == 'image'">
|
||||
<img :src="item.sdkFileUrl" alt="" @click="previewImage(item.sdkFileUrl)">
|
||||
</div>
|
||||
|
||||
<audio :src="item.sdkFileUrl" controls style="display: block;" v-if="item.msgType == 'voice'"></audio>
|
||||
|
||||
<video :src="item.sdkFileUrl" v-if="item.msgType == 'video'" />
|
||||
|
||||
<div class="file" @click="prevFile(item)" v-if="item.msgType == 'file'">
|
||||
<u-row justify="between">
|
||||
<label class="left">
|
||||
<img :src="$cdn + 'common/appendix.png'" alt="">
|
||||
<span>{{ item.sdkFileName }}</span>
|
||||
</label>
|
||||
<span>{{ item.fileSizeStr }}</span>
|
||||
</u-row>
|
||||
</div>
|
||||
|
||||
<div class="revoke-text" v-if="item.msgType == 'revoke'">{{item.userName}}撤回了一条消息</div>
|
||||
|
||||
<div class="revoke-text" v-if="item.msgType == 'disagree'">对方不同意会话存档内容，你将无法继续提供服务</div>
|
||||
|
||||
<div class="revoke-text" v-if="item.msgType == 'agree'">对方同意会话存档内容，你可以继续提供服务</div>
|
||||
|
||||
<div class="card-info" v-if="item.msgType == 'card'" @click="openUser(item.type, item.cardUserId)">
|
||||
<div class="top">
|
||||
<div class="card-left">
|
||||
<h3>{{item.cardCorpName}}</h3>
|
||||
<p>{{item.cardUserName}}</p>
|
||||
<!-- <div>{{item.cardUserId}}</div> -->
|
||||
</div>
|
||||
<div class="card-right">
|
||||
<img :src="item.cardUserAvatar" alt="" v-if="item.cardUserAvatar">
|
||||
<img src="https://cdn.sinoecare.com/i/2024/09/29/66f8b8e6da38e.png" alt="" v-else>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">个人名片</div>
|
||||
</div>
|
||||
|
||||
<img :src="item.sdkFileUrl" alt="" v-if="item.msgType == 'emotion'" :style="[{width: item.width/2+'px'}, {height: item.height/2+'px'}]">
|
||||
|
||||
<div class="map-info" v-if="item.msgType == 'location'" @click="openMap(item)">
|
||||
<map style="width: 100%; height: 100%;" :latitude="item.lat" :longitude="item.lng" :scale="item.zoom" :enable-zoom="false" :enable-scroll="false">
|
||||
<cover-view style='width:100%;height:100%'></cover-view>
|
||||
</map>
|
||||
<div class="address-text">
|
||||
<p>{{item.title}}</p>
|
||||
<p>{{item.address}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-info" v-if="item.msgType == 'weapp'" @click="openApp(item)">
|
||||
<div class="top">
|
||||
<div class="card-left">
|
||||
<h3 class="display-name">{{item.displayName}}</h3>
|
||||
<p>{{item.title}}</p>
|
||||
</div>
|
||||
<div class="card-right">
|
||||
<img src="https://cdn.sinoecare.com/i/2024/09/29/66f8b96657c28.png" alt="" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom"><img src="https://cdn.sinoecare.com/i/2024/09/29/66f8b90ed6fef.png" alt="" >小程序</div>
|
||||
</div>
|
||||
|
||||
<div class="card-info" v-if="item.msgType == 'link'" @click="openLink(item)">
|
||||
<div class="top">
|
||||
<div class="card-left">
|
||||
<p>{{item.title}}</p>
|
||||
<div>{{item.username}}</div>
|
||||
</div>
|
||||
<div class="card-right" v-if="item.imageUrl">
|
||||
<img :src="item.imageUrl" alt="" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">分享链接</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<img :src="item.userAvatar" alt="" class="user-img" v-if="item.userId == user.wxUserId">
|
||||
|
||||
<img src="https://cdn.sinoecare.com/i/2024/09/29/66f8b8c30ffeb.png" alt="" class="fail-img" v-if="item.userId != user.wxUserId && item.isKeyword == 1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</scroll-view>
|
||||
<AiEmpty v-else/>
|
||||
<u-calendar v-model="isShowDate" @change="onDateChange" mode="range"></u-calendar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState, mapActions} from "vuex";
|
||||
export default {
|
||||
name: "sessionDetail",
|
||||
customNavigation: true,
|
||||
enablePullDownRefresh: true,
|
||||
data() {
|
||||
return {
|
||||
keyword: '',
|
||||
list: [],
|
||||
params: {},
|
||||
id: '',
|
||||
isShowDate: false,
|
||||
dateList: [],
|
||||
current: null,
|
||||
preCurrent: null,
|
||||
pages: 2,
|
||||
scrollTop: 0,
|
||||
scrollHeight: '',
|
||||
preveHeight: '',
|
||||
backgroundNavbar: {
|
||||
background: 'url(https://cdn.sinoecare.com/i/2024/07/12/6690a1309c7d3.png) no-repeat',
|
||||
backgroundSize: 'cover',
|
||||
},
|
||||
statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
|
||||
sessionArchiveId: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
onLoad(option) {
|
||||
// this.sessionArchiveId = option.sessionArchiveId
|
||||
this.sessionArchiveId = '497972'
|
||||
this.$instance.post(`/app/appsessionarchiveinfo/queryDetailById?id=${this.sessionArchiveId}`).then((res) => {
|
||||
if (res?.data) {
|
||||
console.log(res)
|
||||
this.id = res.data.id
|
||||
this.toUserId = res.data.toUserId
|
||||
this.roomId = res.data.roomId
|
||||
this.type = res.data.type
|
||||
this.getListPre()
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
if(this.current > this.pages) {
|
||||
return this.$u.toast('没有更多记录')
|
||||
}
|
||||
this.current = this.current + 1
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
scroll(e) {
|
||||
console.log(e)
|
||||
if(e.detail.scrollTop == 0) {
|
||||
if(this.current > this.pages) {
|
||||
return this.$u.toast('已加载完成，没有更多数据')
|
||||
}else {
|
||||
this.current ++
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
},
|
||||
onDateChange (e) {
|
||||
this.dateList = [e.startDate, e.endDate]
|
||||
this.getListInit()
|
||||
},
|
||||
clearDate() {
|
||||
this.dateList = []
|
||||
this.getListInit()
|
||||
},
|
||||
getKeywordList() {
|
||||
this.$instance.post(`/app/appsessionarchiveinfo/listByKeywordRecord`, null, {
|
||||
params: {
|
||||
userId: this.id,
|
||||
size: 10,
|
||||
// msgType: this.msgTypeList[this.msgType].value,
|
||||
roomId: this.params.roomId,
|
||||
type: this.params.type,
|
||||
content: this.keyword,
|
||||
startTime: this.time ? this.time[0] : '',
|
||||
endTime: this.time ? this.time[1] : '',
|
||||
seq: '',
|
||||
msgId: this.params.msgId
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.current = res.data.current
|
||||
this.preCurrent = res.data.current
|
||||
res.data.records.map((item) => {
|
||||
// if(item.msgType == 'text') {
|
||||
// item.text = this.changeKeyRed(item.content, item.wordName)
|
||||
// }
|
||||
if(item.msgType == 'location') {
|
||||
item.covers = [{
|
||||
latitude: item.lat,
|
||||
longitude: item.lng,
|
||||
label: {
|
||||
content: item.address
|
||||
},
|
||||
callout: {
|
||||
content: item.title
|
||||
}
|
||||
}]
|
||||
}
|
||||
})
|
||||
this.list = res.data.records
|
||||
this.pages = res.data.pages
|
||||
|
||||
this.$nextTick(() => {
|
||||
uni.createSelectorQuery().select(".conversation-list").boundingClientRect((res) => {
|
||||
this.scrollTop = res.height - this.scrollHeight
|
||||
}).exec();
|
||||
})
|
||||
}
|
||||
this.isLoading = false
|
||||
}).catch(() => {
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
getListInit() {
|
||||
this.current = 1
|
||||
this.pages = 2
|
||||
this.list = []
|
||||
this.getList()
|
||||
},
|
||||
getList() {
|
||||
if(this.current > 1) {
|
||||
uni.createSelectorQuery().select(".conversation-list").boundingClientRect((res) => {
|
||||
this.preveHeight = res.height
|
||||
}).exec();
|
||||
}
|
||||
this.$instance.post(`/app/appsessionarchiveinfo/listForXbot`, null, {
|
||||
params: {
|
||||
userId: this.id,
|
||||
current: this.current,
|
||||
size: 10,
|
||||
// msgType: this.tabList[this.currentTabs].value,
|
||||
// msgType: 'file',
|
||||
toUserId: this.toUserId,
|
||||
roomId: this.roomId,
|
||||
type: this.type,
|
||||
content: this.keyword,
|
||||
startTime: this.dateList.length ? this.dateList[0] : '',
|
||||
endTime: this.dateList.length ? this.dateList[1] : ''
|
||||
}
|
||||
}).then(res=> {
|
||||
if(res?.data) {
|
||||
res.data.records.map((item) => {
|
||||
if(item.msgType == 'location') {
|
||||
item.covers = [{
|
||||
latitude: item.lat,
|
||||
longitude: item.lng,
|
||||
label: {
|
||||
content: item.address
|
||||
},
|
||||
callout: {
|
||||
content: item.title
|
||||
}
|
||||
}]
|
||||
}
|
||||
})
|
||||
this.list = this.current > 1 ? [ ...res.data.records, ...this.list]: res.data.records
|
||||
|
||||
this.$nextTick(() => {
|
||||
uni.createSelectorQuery().select(".conversation-list").boundingClientRect((res) => {
|
||||
if(this.current == 1) {
|
||||
this.scrollTop = res.height - this.scrollHeight
|
||||
}else {
|
||||
this.scrollTop = res.height - this.preveHeight
|
||||
}
|
||||
}).exec();
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getListPre() {
|
||||
if(this.current > 1) {
|
||||
uni.createSelectorQuery().select(".conversation-list").boundingClientRect((res) => {
|
||||
this.preveHeight = res.height
|
||||
}).exec();
|
||||
}
|
||||
this.$instance.post(`/app/appsessionarchiveinfo/list`, null, {
|
||||
params: {
|
||||
userId: this.id,
|
||||
current: this.preCurrent,
|
||||
size: 10,
|
||||
// msgType: this.tabList[this.currentTabs].value,
|
||||
toUserId: this.toUserId,
|
||||
roomId: this.roomId,
|
||||
type: this.type,
|
||||
content: this.keyword,
|
||||
startTime: this.dateList.length ? this.dateList[0] : '',
|
||||
endTime: this.dateList.length ? this.dateList[1] : ''
|
||||
}
|
||||
}).then(res=> {
|
||||
if(res?.data) {
|
||||
res.data.records.map((item) => {
|
||||
if(item.msgType == 'location') {
|
||||
item.covers = [{
|
||||
latitude: item.lat,
|
||||
longitude: item.lng,
|
||||
label: {
|
||||
content: item.address
|
||||
},
|
||||
callout: {
|
||||
content: item.title
|
||||
}
|
||||
}]
|
||||
}
|
||||
})
|
||||
this.list = [...this.list, ...res.data.records]
|
||||
|
||||
this.$nextTick(() => {
|
||||
uni.createSelectorQuery().select(".conversation-list").boundingClientRect((res) => {
|
||||
if(this.current == 1) {
|
||||
this.scrollTop = res.height - this.scrollHeight
|
||||
}else {
|
||||
this.scrollTop = res.height - this.preveHeight
|
||||
}
|
||||
}).exec();
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
changeKeyRed (str, keyWord) {
|
||||
if (str != null && keyWord != null) {
|
||||
var substr = "/" + keyWord + "/g";
|
||||
var replaceStr = str.replace(eval(substr), "<span style='color:#e6736e'>" + keyWord + "</span>")
|
||||
return replaceStr;
|
||||
} else {
|
||||
return str;
|
||||
}
|
||||
},
|
||||
previewImage(img) {
|
||||
uni.previewImage({
|
||||
urls: [img],
|
||||
current: img
|
||||
})
|
||||
},
|
||||
// ...mapActions(['previewFile', 'injectJWeixin']),
|
||||
// prevFile(file) {
|
||||
// // var fileInfo = {url: file.sdkFileUrl, name: file.sdkFileName, size: file.fileSizeStr}
|
||||
// // this.$loading()
|
||||
// // this.previewFile({ ...fileInfo }).then(()=>{
|
||||
// // this.$hideLoading()
|
||||
// // })
|
||||
// },
|
||||
prevFile(e) {
|
||||
if([".jpg",".png",".gif"].includes(e.postfix.toLowerCase())){
|
||||
uni.previewImage({
|
||||
current: e.sdkFileUrl,
|
||||
urls: [e.sdkFileUrl]
|
||||
})
|
||||
}else {
|
||||
this.previewFile({ ...e})
|
||||
}
|
||||
},
|
||||
previewFile(e) {
|
||||
if(e.postfix && ['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx'].includes(e.postfix.split('.')[1])) {
|
||||
uni.downloadFile({
|
||||
url: e.sdkFileUrl,
|
||||
success: function (res) {
|
||||
var filePath = res.tempFilePath;
|
||||
uni.openDocument({
|
||||
filePath: filePath,
|
||||
fileType: e.postfix.split('.')[1],
|
||||
showMenu: true,
|
||||
});
|
||||
}
|
||||
});
|
||||
}else {
|
||||
this.$u.toast("该文件类型不支持预览!")
|
||||
}
|
||||
|
||||
},
|
||||
openLink(row) {
|
||||
window.open(row.linkUrl);
|
||||
},
|
||||
openApp(row) {
|
||||
uni.navigateToMiniProgram({
|
||||
// appId: row.goodsJdAppid,
|
||||
// path: row.goodsJdUrl
|
||||
})
|
||||
},
|
||||
openUser(type, userid) { //缺少名片人员区分内部还是外部
|
||||
console.log(row)
|
||||
// userid && this.injectJWeixin('openUserProfile').then(() => {
|
||||
// this.wxInvoke(['openUserProfile', {type, userid}, () => 0])
|
||||
// })
|
||||
},
|
||||
openMap(row) {
|
||||
wx.openLocation({
|
||||
latitude: row.lat, // 纬度，浮点数，范围为90 ~ -90
|
||||
longitude: row.lng, // 经度，浮点数，范围为180 ~ -180。
|
||||
name: row.title, // 位置名
|
||||
address: row.address, // 地址详情说明
|
||||
scale: row.zoom, // 地图缩放级别,整形值,范围从1~28。默认为16
|
||||
fail: () => {
|
||||
location.reload()
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
if(this.preCurrent > 1) {
|
||||
this.preCurrent --
|
||||
this.getListPre()
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sessionDetail {
|
||||
height: 100%;
|
||||
::v-deep .AiTopFixed {
|
||||
.placeholder {
|
||||
.content {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
.fixed {
|
||||
margin: 0 !important;
|
||||
.content {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.top-search {
|
||||
padding: 20px 32px;
|
||||
display: flex;
|
||||
.left {
|
||||
width: 400px;
|
||||
.clear-btn {
|
||||
display: inline-block;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.del-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
div {
|
||||
display: inline-block;
|
||||
line-height: 64px;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: calc(100% - 400px);
|
||||
}
|
||||
}
|
||||
.conversation-list {
|
||||
padding: 48px 32px;
|
||||
// background-color: #EBECF0;
|
||||
.item {
|
||||
margin-bottom: 48px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
.user-name {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 24px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 22px;
|
||||
color: #666;
|
||||
padding:0 0 0 64px;
|
||||
span {
|
||||
display: inline-block;
|
||||
margin: 0 12px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 20px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.user-img {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
margin-right: 20px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.content {
|
||||
max-width: calc(100% - 144px);
|
||||
position: relative;
|
||||
margin-top: 44px;
|
||||
.cir {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
border: 10px solid transparent;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
}
|
||||
.content-text {
|
||||
display: inline-block;
|
||||
padding: 14px 54px 14px 32px;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 32px;
|
||||
color: #333;
|
||||
word-break: break-all;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.fail-img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding-top: 44px;
|
||||
margin: auto 0 auto 24px;
|
||||
}
|
||||
.img-list {
|
||||
img {
|
||||
max-width: 400px;
|
||||
margin: 0 16px 16px 0;
|
||||
}
|
||||
}
|
||||
::v-deep .uni-audio-default {
|
||||
height: 72px;
|
||||
width: 280px!important;
|
||||
min-width: 0!important;
|
||||
}
|
||||
::v-deep .uni-audio-left {
|
||||
height: 72px;
|
||||
width: 72px;
|
||||
.uni-audio-button {
|
||||
margin: 14px;
|
||||
}
|
||||
}
|
||||
::v-deep .uni-audio-right {
|
||||
height: 72px;
|
||||
margin-left: 72px;
|
||||
padding: 10px 32px 10px 0;
|
||||
}
|
||||
.revoke-text {
|
||||
line-height: 54px;
|
||||
padding: 0 24px;
|
||||
border-radius: 8px;
|
||||
background-color: #EEE;
|
||||
color: #999;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.file {
|
||||
height: 128px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #CCCCCC;
|
||||
box-sizing: border-box;
|
||||
padding: 0 16px;
|
||||
margin-bottom: 32px;
|
||||
|
||||
& > .u-row {
|
||||
height: 100%;
|
||||
|
||||
.left {
|
||||
width: 522px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > img {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
}
|
||||
|
||||
& > span {
|
||||
font-size: 32px;
|
||||
color: #333333;
|
||||
display: inline-block;
|
||||
line-height: 44px;
|
||||
text-overflow: ellipsis;
|
||||
overflow-x: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
& > span {
|
||||
font-size: 28px;
|
||||
color: #999;
|
||||
margin: -8px 0 0 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-info {
|
||||
width: 450px;
|
||||
background: #FFF;
|
||||
.top {
|
||||
padding: 16px 32px;
|
||||
display: flex;
|
||||
.card-left {
|
||||
width: calc(100% - 120px);
|
||||
h3 {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 32px;
|
||||
color: #333;
|
||||
line-height: 44px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
p {
|
||||
font-family: PingFangSC-SNaNpxibold;
|
||||
font-size: 32px;
|
||||
color: #333;
|
||||
line-height: 44px;
|
||||
}
|
||||
div {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 24px;
|
||||
color: #999;
|
||||
line-height: 34px;
|
||||
}
|
||||
.display-name {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
color: #999;
|
||||
line-height: 34px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.card-right {
|
||||
img {
|
||||
width: 84px;
|
||||
height: 84px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
padding-left: 32px;
|
||||
line-height: 48px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 22px;
|
||||
color: #999;
|
||||
border-top: 1px solid #eee;
|
||||
img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.map-info {
|
||||
width: 560px;
|
||||
height: 400px;
|
||||
.address-text {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 560px;
|
||||
background-color: rgba(0, 0, 0, .7);
|
||||
p {
|
||||
color: #fff;
|
||||
line-height: 44px;
|
||||
font-size: 24px;
|
||||
padding-left: 32px;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-left {
|
||||
.content {
|
||||
.cir {
|
||||
left: -18px;
|
||||
border-right-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-right {
|
||||
width: 100%;
|
||||
justify-content: right;
|
||||
.user-name {
|
||||
left: 0;
|
||||
right: 82px;
|
||||
text-align: right;
|
||||
}
|
||||
.user-img {
|
||||
margin: 0 0 0 20px;
|
||||
}
|
||||
.content {
|
||||
.cir {
|
||||
border-left-color: #C7E7FE;
|
||||
right: -18px;
|
||||
}
|
||||
.content-text {
|
||||
background-color: #C7E7FE;
|
||||
padding: 14px 32px 14px 54px;
|
||||
}
|
||||
.img-list {
|
||||
img {
|
||||
max-width: 400px;
|
||||
margin: 0 0 16px 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.fail-img {
|
||||
margin: auto 24px auto 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user