OfficeApp/pages/oaHome/oaHome.vue
2024-01-02 13:35:52 +08:00

1115 lines
25 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="oa_home" style="oaColor">
<!-- <image class="header_bg" src="../../static/img/home/head-bg.png"></image> -->
<!-- <u-navbar @leftClick="leftClick" bgColor="rgba(0,0,0,0)"
leftIconColor=" #fff" :autoBack="false">
</u-navbar> -->
<view class="home_header" :class="!ApproveList.length > 0 ? 'home_header_no_data' : ''">
<view style="
position: absolute;
bottom: 0;
left: 0;
overflow: hidden;
border-radius: 0 0 30rpx 30rpx;
">
<hx-lottie :options="options" ref="lottie" style="
width: 100vw;
height: 440rpx;
transform: scale(1.2);
background-color: #0122c7;
" />
</view>
<!-- #ifdef APP-PLUS||H5 -->
<view style="height: var(--status-bar-height)"></view>
<view v-if="uniMP" style="height: 44px">
<u-icon name="arrow-left" color="#fff" size="20" @click="leftClick"></u-icon>
</view>
<view v-else style="height: 30rpx"></view>
<!-- <view v-if="uniMP" style="height: 44px;"></view> -->
<!-- #endif -->
<view class="my_info">
<view v-if="!$store.state.app.token" @click="login" class="mesg_box">
<view class="name">
<text class="nickname">立即登录</text>
</view>
<view class="duty"> 登录后可查看更多 </view>
</view>
<view class="head_img">
<view class="img_box">
<u--image :showLoading="true" width="131.43rpx" height="131.43rpx" class="img_box_img"
:src="myOaInfo.avatar || '../../static/img/public/avatar.png'" shape="circle"></u--image>
</view>
<text class="head_text">工作证: {{ myOaInfo.nickname }}</text>
<text class="head_text" style="flex-shrink: 0">身份: {{ myOaInfo.user_role_name }}</text>
</view>
</view>
<!-- 占位 -->
<view style="height: 150rpx"></view>
<!-- <view class="backlog" :class="!ApproveList.length > 0 ? 'backlog_no_data' : ''">
<view class="head_title flex_a_c_j_sb">
<view class="title">公告列表</view>
<view class="flex_a_c" @click="navTo('/subpkg/noticeList/noticeList')">更多
<view class="iconfont icon-you">
<uni-icons type="forward"></uni-icons>
</view>
</view>
</view>
<block v-if="ApproveList.length > 0">
<view class="backlog_item flex_a_c_j_sb" v-for="(item, index) in ApproveList.slice(0, 2)"
:key="index" @click="clickNotice(item.id)">
<view class="text">
<text class="text_time">{{
item.create_time.substring(0, 10).replace(/-/g, ".")
}}</text>
{{ item.title }}
</view>
<i class="iconfont icon-you"><uni-icons type="forward"></uni-icons></i>
</view>
</block>
<view v-else class="backlog_no flex_a_c_j_sb">
<view class="text">暂无更多消息</view>
<i class="iconfont icon-you"><uni-icons type="forward"></uni-icons></i>
</view>
</view> -->
</view>
<!-- 片区经理聊天 -->
<!-- <view class="chat" @click="navTo('/subpkg/chatMang/index')" style="margin-top: 130rpx;">
<view class="chat-l">
<u--image shape="circle" :showLoading="true" :src="managerInfo.manager_avatar" width="91rpx"
height="91rpx"></u--image>
<view class="" style="margin-left: 40rpx;">
{{managerInfo.manager_name}}
</view>
</view>
<view class="" style="display: flex;">
<view class="brange" v-if="managerInfo.msg_num">
{{managerInfo.msg_num}}
</view>
<view class="iconfont icon-you">
<uni-icons type="forward"></uni-icons>
</view>
</view>
</view> -->
<view class="my_task deposit">
<view class="">
<view class="fast_track" style="display: flex;justify-content: space-around;">
<view class="" style="display: flex;flex-direction: column;align-items: center;">
<view style=" color: #ff7c32;font-size: 30rpx;">押金</view>
<view style="text-align: center;margin-top: 20rpx; font-size: 40rpx;">{{myOaInfo.deposit}}
</view>
</view>
<view class="">
<view style=" color: #ff7c32;font-size: 30rpx;">管理户数</view>
<view style="text-align: center;margin-top: 20rpx; font-size: 40rpx;">
{{myOaInfo.user_information_count ||0}} <text style="font-size: 30rpx; margin-left: 5rpx;">
户</text>
</view>
</view>
</view>
</view>
</view>
<view class="">
<u-empty text="等待任务下发">
</u-empty>
</view>
<!-- <view class="my_task">
<view class="task_title flex_a_c_j_sb">
<view class="title" @click="leftClick">工作管理</view>
</view>
</view> -->
<!-- <view class="fast_track">
<block v-for="(item, index) in oaHomeData" :key="item.id">
<view class="track_item" @click="navTwo(item.paths, index)">
<image :src="item.icon" mode="aspectFit" style="width: 77rpx;height: 77rpx;">
</image>
<view class="title">{{ item.name }}</view>
</view>
</block>
</view> -->
<!-- <view class="my_task">
<view class="task_title flex_a_c_j_sb">
<view class="title">配送信息</view>
<view class="flex_a_c" @click="goOrderList">更多
<view class="iconfont icon-you">
<uni-icons type="forward"></uni-icons>
</view>
</view>
</view>
<view v-if="orderList.length > 0">
<globalPopup ref="globalPopup"></globalPopup>
<logistiBriefCard v-for="(item, index) in orderList" :key="index" :goodsInfo="item">
</logistiBriefCard>
<u-loadmore :status="status" />
</view>
<view v-else class="no_task">
<view class="title">暂无配送信息</view>
<view class="tips" v-if="!$store.state.app.token">登录后查看配送信息详情</view>
</view>
</view> -->
<view class="no_login" @click="login" v-if="!$store.state.app.token">
<view class="view">
<view class="text">登录里海OA,开启线上便捷办公</view>
<button class="btn">立即登录</button>
</view>
</view>
<!-- <tabbar></tabbar> -->
</view>
</template>
<script>
import logistiBriefCard from "@/components/logistiComptent/logistiCard/logistiBriefCard.vue";
import globalPopup from "@/components/GlobalPopup/GlobalPopup.vue";
import {
getList
} from "@/api/logistics.js";
import {
Toast
} from "@/libs/uniApi.js";
import {
oaHomeData
} from "@/static/server/server.js";
import {
noticeList
} from "@/api/notice.js";
import {
getAreaManagerApi
} from "@/api/bussness.js"
import {
getTradeTaskInfo
} from "@/api/newTask.js"
// import tabbar from '../components/tabbar'
import {
getIndexListAPI,
getTaskListAPI,
getMyTaskListAPI,
getApproveListAPI,
getUserIndexAPI,
} from "@/api/oaApi.js";
import {
mapState
} from 'vuex';
import bj from "@/static/animation/home.json"
import {
userInfo
} from "@/api/oaUser.js"
//#ifdef APP-PLUS
var jpushModule = uni.requireNativePlugin("JG-JPush");
// #endif
export default {
components: {
// tabbar
logistiBriefCard,
globalPopup,
},
data() {
return {
brange: 0,
options: {
data: '',
},
status: "loadmore",
page_num: 1,
flag: false,
uniMP: false,
managerInfo: {},
id: "",
is_captain: 0,
notArr: [],
orderList: [],
oaHomeData: [],
taskInfo: {},
src: "https://cdn.uviewui.com/uview/album/1.jpg",
assessData: [{
num: "0",
name: "任务",
},
{
num: "0",
name: "已完成",
},
{
num: "0",
name: "未完成",
},
{
num: "0%",
name: "完成率",
},
],
project: {},
task: {},
page: 1,
myTaskList: [],
flowState: "#47B347", // 任务状态
priority: "", // 任务紧急度
myOaInfo: {
avatar: "",
nickname: "",
mobile: "",
did_name: "",
label_name: "",
},
ApproveList: [],
showOaHomeData: false, //更新首页计算的值
chartData: {},
progress: 0,
//您可以通过修改 config-ucharts.js 文件中下标为 ['arcbar'] 的节点来配置全局默认参数,如都是默认参数,此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式,达到页面简洁的需求。
opts: {
title: {
fontSize: 16,
color: "#2fc25b"
},
subtitle: {
name: "",
fontSize: 12,
color: "#666666"
},
extra: {
arcbar: {
type: "circle",
width: 12,
backgroundColor: "#E9E9E9",
startAngle: 1.5,
endAngle: 0.25,
gap: 2
}
}
}
};
},
async onLoad() {
// console.log('asdashg')
if (uni.getStorageSync('USER_INFO')) {
let userData = JSON.parse(uni.getStorageSync('USER_INFO'))
this.initUserInfo(userData);
// console.log(545)
}
await this.$onLaunched;
this.is_captain = JSON.parse(uni.getStorageSync("USER_INFO") || '{}')?.is_captain
this.options.data = bj;
//#ifdef APP-PLUS
let that = this;
jpushModule.addNotificationListener(function(result) {
if (!that.notArr.includes(result.messageID)) {
// that.$refs.globalPopup.showPopu();
that.getOrderList();
console.log("idnex的");
that.notArr.push(result.messageID);
}
});
// #endif
},
onReachBottom() {
if (this.flag) return
let that = this
this.status = "loading"
this.page_num += 1
this.flag = true
getList({
status: this.curNow,
user_id: this.id,
keywords: this.keywords,
user_type: this.is_captain,
page_num: this.page_num
}).then(res => {
that.orderList = that.orderList.concat(res.data.data)
this.flag = false
if (!res.data.data.length) {
this.status = "nomore"
this.flag = true
}
})
},
async onShow() {
// uni.navigateTo({
// url:'/subpkg/chatMang/index'
// }
// this.getUserIndex()
// this.getIndexList()
this.getServerData();
let user_id = JSON.parse(uni.getStorageSync("USER_INFO")).id
// this.getOrderList();
// getAreaManagerApi({
// user_id
// }).then(res => {
// // console.log(res.data)
// this.managerInfo = res.data
// })
await this.$onLaunched;
if (uni.getStorageSync('uniMP')) this.uniMP = true;
userInfo().then(({
data
}) => {
this.$store.commit('setUserInfo', data);
this.initUserInfo(data);
this.$store.dispatch('initConfig');
// console.log('更新信息', data);
});
this.getApproveList();
this.initUserInfo();
this.showToask();
// this.initOaHomeDada();
//#ifdef APP-PLUS
this.noticeFn();
// #endif
// console.log(this.oaHomeData, this.oaHomeData.length==0);
if (this.oaHomeData.length == 0) {
this.$nextTick(() => {
this.$store.dispatch('initConfig');
})
}
},
computed: {
// oaHomeData() {
// const route = '/pages/oaHome/oaHome';
// let arr = [];
// this.$store.state.config?.config?.menu?.forEach((item) => {
// if (item.paths.includes(route)) {
// arr = item.children;
// }
// })
// if (arr.length >= 8) {
// arr = arr.slice(0, 7);
// let obj = this.$store.state.config?.config?.menu?.find(item => item.paths.includes(
// '/pages/moreFun/moreFun'));
// arr.push(obj);
// }
// return arr;
// },
},
watch: {
'$store.state.app.token': {
handler: function(n, o) {
userInfo().then(({
data
}) => {
// console.log(data);
this.$store.commit('setUserInfo', data);
this.initUserInfo(data);
this.$store.dispatch('initConfig');
});
}
},
'$store.state.config.config.menu': {
immediate: true,
deep: true,
handler: function(n, o) {
const route = '/pages/oaHome/oaHome';
let arr = [];
n.forEach((item) => {
if (item.paths.includes(route)) {
arr = item.children;
}
})
if (arr.length >= 7) {
arr = arr.slice(0, 3);
let obj = n.find(item => item.paths.includes(
'/pages/moreFun/moreFun'));
arr.push(obj);
}
this.oaHomeData = arr;
}
}
},
methods: {
async getServerData() {
return
let resulut = await getTradeTaskInfo()
this.taskInfo = resulut.data
//模拟从服务器获取数据时的延时
setTimeout(() => {
//模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接
let res = {
series: [{
name: "",
color: "#2fc25b",
data: resulut.data.rate
}]
};
this.chartData = JSON.parse(JSON.stringify(res));
this.progress = res.series[0].data
this.opts.title.name = ''
}, 500);
},
// 通知
noticeFn() {
jpushModule.addNotificationListener(res => {
const audioContext = uni.createInnerAudioContext()
if (res.content.includes('')) {
audioContext.src = '/static/mp3/im.wav'
audioContext.play()
uni.vibrateLong();
return
}
if (res.notificationEventType == 'notificationOpened') return
audioContext.src = '/static/mp3/order.mp3'
audioContext.play()
uni.vibrateLong();
this.getOrderList()
})
},
leftClick(e) {
console.log("发送给宿主")
uni.sendHostEvent('closeApp', e, (ret) => {
//发送消息成功回调
console.log('关闭应用' + JSON.stringify(ret));
});
},
async getOrderList() {
this.id = JSON.parse(uni.getStorageSync("USER_INFO")).id || "";
let res = await getList({
user_id: this.id,
user_type: this.is_captain
// courier_id: 167
});
this.orderList = res.data.data;
console.log("获取列表")
},
goOrderList() {
uni.navigateTo({
url: "/pages/logistics/index",
});
},
initUserInfo(data = null) {
if (data) return this.myOaInfo = data;
this.$store.state.app.userInfo ?
(this.myOaInfo = this.$store.state.app.userInfo) :
(this.myOaInfo.avatar = "");
console.log(this.myOaInfo, 24545)
},
initOaHomeDada() {
if (this.$store.state.app.userInfo.admin_id == 0) {
// 如果用户不是管理员
let arr = oaHomeData.filter((item) => !item.admin); //过滤掉管理员专属页面
this.oaHomeData = arr;
} else {
// this.oaHomeData = oaHomeData;
let arr = oaHomeData.filter((item) => !item.captain); //过滤掉普通用户专属页面
this.oaHomeData = arr;
}
if (
this.$store.state.app.userInfo?.company?.company_type_name == "平台公司"
) {
this.oaHomeData = this.oaHomeData.filter((item) => {
return item.text == "人员管理" ? false : true;
});
}
// 判断是否需要显示更多按钮
if (this.oaHomeData >= 8) {
this.oaHomeData[7] = this.oaHomeData[this.oaHomeData.length - 1];
} else {
this.oaHomeData.splice(this.oaHomeData.length - 1, 1);
}
},
async getApproveList() {
const res = await noticeList({
keyword: "",
page_no: 1,
page_size: 2,
});
this.ApproveList = res.data.lists;
},
async getIndexList() {
const {
project,
task
} = await getIndexListAPI();
console.log(task, "222");
this.assessData[0].num = project.count;
this.assessData[1].num = project.count_ok;
this.assessData[2].num = project.count_no;
this.assessData[3].num = project.count_lv + "%";
this.assessData[4].num = task.count;
this.assessData[5].num = task.count_ok;
this.assessData[6].num = task.count_no;
this.assessData[7].num = task.count_lv + "%";
this.myTaskList = task.list;
},
async getMyTask() {
let data = {
page: this.page,
limit: 10,
};
const res = getMyTaskListAPI(data);
},
naviTaskDetails(id) {
uni.navigateTo({
url: `/pages/views/task_details?id=${id}`,
});
},
navTo(url) {
if (url) {
uni.showLoading({
title: '加载中',
mask: true
});
uni.navigateTo({
url: url,
success() {
uni.hideLoading()
},
fail() {
uni.switchTab({
url: url,
success() {
uni.hideLoading()
},
fail() {
uni.hideLoading()
}
});
},
})
} else Toast('暂未开放')
},
navTwo(url, key) {
// let role_id = this.$store.state.app?.userInfo?.admin?.role_id || null;
// var arr = [3, 6];
// if (role_id && role_id[0] == 9) {
// if (arr.indexOf(key) == -1) {
// Toast("请先成立公司后开放");
// return false;
// }
// }
this.navTo(url);
},
// 点击公告
clickNotice(e) {
uni.navigateTo({
url: `/pages/oaNews/oaNews?id=${e}`,
});
},
// 判断当前是否登录,显示任务及完成率
showToask() {
if (!this.$store.state.app.token) {
this.assessData = this.assessData.map((item) => {
item.num = "*";
return item;
});
} else {
// 新增接口后要替换为接口
this.assessData = this.assessData.map((item) => {
item.num = "0";
return item;
});
}
},
login() {
uni.navigateTo({
url: "/pages/oaLogin/oaLogin",
});
},
async getUserIndex() {
const res = await getUserIndexAPI();
console.log(res, "res")
this.myOaInfo = res;
},
},
async onPullDownRefresh() {
uni.sendHostEvent('test', '测试', (ret) => {
// uni.showModal({
// title:'内容',
// content:JSON.stringify(ret)
// })
});
// await this.getOrderList();
await this.$store.dispatch('initConfig');
await this.getApproveList();
// this.getIndexList()
uni.stopPullDownRefresh();
},
};
</script>
<style lang="scss">
.oa_home {
padding-bottom: 100rpx;
}
.header_bg {
position: absolute;
width: 100%;
// z-index: -1;
}
.home_header {
position: relative;
padding: 28rpx;
// height: 607.02rpx;
// height: 480.02rpx;
width: 100%;
height: 430rpx;
background-color: red;
// background-color: $theme-oa-color;
margin-bottom: 110rpx;
background-color: $theme-oa-color;
border-radius: 0 0 30rpx 30rpx;
.head_img {
position: relative;
background-color: #ff7c32;
width: 100%;
height: 105.14rpx;
line-height: 105.14rpx;
border-radius: 35.05rpx 35.05rpx 35.05rpx 35.05rpx;
display: flex;
justify-content: space-between;
padding-right: 28rpx;
color: white;
font-size: 34rpx;
padding-left: 150rpx;
box-sizing: border-box;
.img_box {
position: absolute;
left: -10rpx;
top: -15rpx;
width: 140rpx;
height: 140rpx;
background-color: white;
border-radius: 140rpx;
.img_box_img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.head_text {
font-size: 33rpx;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
// font-we
}
.my_info {
.mesg_box {
color: #fff;
margin-left: 31.58rpx;
.nickname {
font-size: 32rpx;
font-weight: 500;
margin-right: 30rpx;
}
.duty {
margin-top: 10.53rpx;
}
}
}
.task_panel {
color: #fff;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-content: space-between;
text-align: center;
padding-bottom: 110rpx;
.task_item {
margin-top: 42.11rpx;
.plan {
width: 173.68rpx;
font-size: 38.6rpx;
margin-bottom: 21.05rpx;
}
}
}
.backlog {
position: absolute;
left: 50%;
bottom: -101.75rpx;
transform: translate(-50%);
width: 694.74rpx;
background: #ffffff;
border-radius: 12px;
padding: 28.07rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
font-size: 25rpx;
font-weight: 400;
.title {
font-size: 32rpx;
font-weight: 500;
}
&_item {
margin-top: 19.3rpx;
color: #666666;
.text {
font-size: 28.04rpx;
white-space: nowrap;
/* 禁止换行 */
overflow: hidden;
/* 溢出隐藏 */
text-overflow: ellipsis;
/* 使用省略号代表被截断的文本 */
width: 580rpx;
/* 设置元素宽度,根据需要进行调整 */
.text_time {
display: inline-block;
background-color: #ff7c32;
color: white;
padding: 5rpx 10rpx;
margin-right: 10rpx;
border-radius: 15rpx;
}
// &::before {
// content: "公告";
// display: inline-block;
// color: #ff8c1a;
// padding: 2px 8px;
// border-radius: 4px;
// border: 1px solid #ff8c1a;
// margin-right: 14.04rpx;
// }
}
}
&_no {
margin-top: 19.3rpx;
color: #666666;
.text {
font-size: 28.04rpx;
white-space: nowrap;
/* 禁止换行 */
overflow: hidden;
/* 溢出隐藏 */
text-overflow: ellipsis;
/* 使用省略号代表被截断的文本 */
width: 580rpx;
/* 设置元素宽度,根据需要进行调整 */
&::before {
content: none;
}
}
}
}
.backlog_no_data {
bottom: -70rpx;
}
}
.home_header_no_data {
margin-bottom: 93.33rpx;
}
.fast_track {
width: 694rpx;
// height: 331rpx;
display: flex;
flex-wrap: wrap;
justify-content: left;
align-content: space-between;
margin: 0 auto;
padding: 15rpx 38.6rpx;
background-color: #fff;
border-radius: 12px;
.track_item {
width: 154.39rpx;
font-size: 24.56rpx;
margin: 25rpx 0;
display: flex;
flex-direction: column;
align-items: center;
.title {
margin-top: 14.04rpx;
}
}
}
.my_task {
width: 694.74rpx;
margin: 0 auto;
// margin-top: 31.58rpx;
// background-color: #fff;
border-radius: 12px;
// padding: 28.07rpx;
.no_task {
width: 694rpx;
height: 140rpx;
padding: 28rpx;
background: #ffffff;
border-radius: 21rpx 21rpx 21rpx 21rpx;
display: flex;
flex-direction: column;
justify-content: space-evenly;
.title {
font-size: 28rpx;
font-weight: 500;
color: #000000cc;
line-height: 35rpx;
}
.tips {
font-size: 25rpx;
font-weight: 400;
color: #333333ff;
line-height: 35rpx;
}
}
.task_title {
font-size: 25rpx;
font-weight: 400;
padding: 28rpx;
.title {
font-size: 32rpx;
font-weight: 500;
}
}
.task_list {
height: 196.49rpx;
border-bottom: 1px solid #cccccc;
padding: 21.05rpx 0;
display: flex;
flex-direction: column;
justify-content: space-between;
.title {
.tag {
color: #f24848;
font-size: 24.56rpx;
padding: 0 7.02rpx;
margin-right: 14.04rpx;
background: #ffe4e4;
border-radius: 4px;
}
.tag1 {
color: #3274f9;
font-size: 24.56rpx;
padding: 0 7.02rpx;
margin-right: 14.04rpx;
background: #e4edff;
border-radius: 4px;
}
.text {
font-size: 28.07rpx;
width: 403.51rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.if_take {
font-size: 28.07rpx;
text-align: center;
line-height: 49.12rpx;
width: 115.79rpx;
height: 49.12rpx;
border-radius: 100px;
}
.take1 {
color: #47b347;
background: #dffcdf;
}
.take2 {
color: #3274f9;
background: #e4edff;
}
.take3 {
color: #999999;
background: #f5f5f5;
}
}
.describe {
font-size: 24.56rpx;
}
.task_deta {
color: #999;
font-size: 24.56rpx;
}
}
}
.deposit {
margin-top: 20rpx;
position: absolute;
top: 250rpx;
left: 50%;
transform: translateX(-50%);
.deposit-l {
width: 30rpx;
height: 200rpx;
background-color: #eee;
border-radius: 100px;
position: relative;
overflow: hidden;
}
.progress {
width: 100%;
background-color: #007bff;
position: absolute;
bottom: 0;
left: 0;
transition: height 0.5s ease-in-out;
}
.deposit-r {
width: 350rpx;
height: 300rpx;
display: flex;
flex-direction: column;
align-items: center;
}
}
.no_login {
position: fixed;
left: 0;
bottom: 0;
width: 100vw;
height: 112rpx;
/* #ifdef H5 */
height: 212rpx;
/* #endif */
background: rgba(#333333, 0.4);
border-radius: 14rpx 14rpx 0rpx 0rpx;
padding: 28rpx 28rpx;
.view {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.text {
font-size: 28rpx;
font-weight: 500;
color: #ffffff;
}
.btn {
width: 158rpx;
height: 60rpx;
background: #3274f9;
border-radius: 30rpx 30rpx 30rpx 30rpx;
font-size: 28rpx;
font-weight: 500;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
}
}
}
.chat {
margin-top: 1000px;
// margin-top: 2000rpx;
width: 694.74rpx;
margin: 0 auto;
background-color: white;
border-radius: 12px;
padding: 20rpx;
// padding-top: 10rpx;
padding-right: 24rpx;
display: flex;
justify-content: space-between;
align-items: center;
.chat-l {
display: flex;
align-items: center;
}
}
.brange {
color: white;
background-color: red;
width: 40rpx;
height: 40rpx;
border-radius: 40rpx;
font-size: 12px;
text-align: center;
lighting-color: 40rpx;
}
</style>