|
|
<template>
|
|
|
<div class="container">
|
|
|
<div class="bg">
|
|
|
<el-row :gutter="0">
|
|
|
<el-col :span="3">
|
|
|
<img src="../img/logo1.png" style="width: 100px;
|
|
|
height: 100px; margin: 0 25px;">
|
|
|
</el-col>
|
|
|
<el-col :span="3">
|
|
|
<p class="div-p">首页</p>
|
|
|
</el-col>
|
|
|
|
|
|
<el-popover placement="bottom" :width="150" trigger="hover">
|
|
|
<template #reference>
|
|
|
<el-col :span="3">
|
|
|
<p class="div-p">快递服务</p>
|
|
|
</el-col>
|
|
|
</template>
|
|
|
<div class="funcs">收件</div><el-divider style="margin-top: 10px; margin-bottom: 10px;"/>
|
|
|
<div class="funcs">寄件</div><el-divider style="margin-top: 10px; margin-bottom: 10px;"/>
|
|
|
<div class="funcs">查询快递</div>
|
|
|
|
|
|
</el-popover>
|
|
|
<el-popover placement="bottom" :width="150" trigger="hover">
|
|
|
<template #reference>
|
|
|
<el-col :span="3">
|
|
|
<p class="div-p">可持续发展</p>
|
|
|
</el-col>
|
|
|
</template>
|
|
|
<div class="funcs">ESG</div><el-divider style="margin-top: 10px; margin-bottom: 10px;"/>
|
|
|
<div class="funcs">零碳未来</div><el-divider style="margin-top: 10px; margin-bottom: 10px;"/>
|
|
|
<div class="funcs">社会关怀</div>
|
|
|
</el-popover>
|
|
|
|
|
|
<el-popover placement="bottom" :width="150" trigger="hover">
|
|
|
<template #reference>
|
|
|
<el-col :span="3">
|
|
|
<p class="div-p">关于我们</p>
|
|
|
</el-col>
|
|
|
</template>
|
|
|
<div class="funcs">企业介绍</div><el-divider style="margin-top: 10px; margin-bottom: 10px;"/>
|
|
|
<div class="funcs">联系方式</div><el-divider style="margin-top: 10px; margin-bottom: 10px;"/>
|
|
|
<div class="funcs">开发人员</div>
|
|
|
</el-popover>
|
|
|
|
|
|
<div class="userPic">
|
|
|
<button class="inbox-btn" @click="visible = true">
|
|
|
<svg viewBox="0 0 512 512" height="16" xmlns="http://www.w3.org/2000/svg">
|
|
|
<path
|
|
|
d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"
|
|
|
></path>
|
|
|
</svg>
|
|
|
<!-- msg-count是新消息的数量 -->
|
|
|
<span class="msg-count">1</span>
|
|
|
</button>
|
|
|
<el-drawer v-model="visible" :show-close="false">
|
|
|
<template #header="{ close, titleId, titleClass }">
|
|
|
<!-- 消息头 -->
|
|
|
<h4 :id="titleId" :class="titleClass">消息列表</h4>
|
|
|
<!-- 一键已读功能按钮 -->
|
|
|
<p class="readAll" @click="clearDot">一键已读</p>
|
|
|
<!-- 关闭抽屉功能 -->
|
|
|
<el-button type="danger" @click="close">
|
|
|
<el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
|
|
|
Close
|
|
|
</el-button>
|
|
|
<div></div><br><br>
|
|
|
|
|
|
</template>
|
|
|
<!-- 卡片，数组名叫 msgList-->
|
|
|
<el-card style="max-width: 560px;margin-bottom: 10px;" v-for="(item, index) in msgList">
|
|
|
<template #header>
|
|
|
<div class="card-header">
|
|
|
<!-- 发件人 -->
|
|
|
<el-badge is-dot class="item"></el-badge><span>发件人：{{ item.senderName }}</span>
|
|
|
<!-- 删除功能 -->
|
|
|
<el-icon color="red" style="float: right; cursor: pointer;" @click="deleteMsg(index)"><Close /></el-icon>
|
|
|
</div>
|
|
|
</template>
|
|
|
<!-- 内容 -->
|
|
|
<p class="text item">{{ item.content}}</p>
|
|
|
<!-- 确认功能 -->
|
|
|
<el-button size="default" type="primary" style=" float: right; margin-bottom: 10px;" @click="confirm">确认</el-button>
|
|
|
</el-card>
|
|
|
</el-drawer>
|
|
|
</div>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<style scoped>
|
|
|
body{
|
|
|
background: #F5F7FA;
|
|
|
}
|
|
|
.container{
|
|
|
width: 125vh;
|
|
|
height: 100vh;
|
|
|
background-color: white;
|
|
|
margin: 0 auto;
|
|
|
position: relative;
|
|
|
}
|
|
|
a {
|
|
|
color: inherit; /* 使链接文本颜色继承父元素的颜色 */
|
|
|
text-decoration: none; /* 移除下划线 */
|
|
|
}
|
|
|
a:hover {
|
|
|
text-decoration: none;
|
|
|
cursor: auto;
|
|
|
}
|
|
|
|
|
|
.el-row {
|
|
|
margin-bottom: 20px;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
.el-col {
|
|
|
border-radius: 4px;
|
|
|
margin-right: 50px;
|
|
|
width: 100px;
|
|
|
height: 100px;
|
|
|
}
|
|
|
.userPic{
|
|
|
height: 90px;
|
|
|
width: 90px;
|
|
|
margin-top: 15px;
|
|
|
/* border-radius: 59px; */
|
|
|
/* background-color:#FA4B4B; */
|
|
|
}
|
|
|
.el-col:last-child{
|
|
|
margin-right: 0px;
|
|
|
}
|
|
|
.el-row:last-child {
|
|
|
margin-bottom: 0;
|
|
|
|
|
|
}
|
|
|
.inbox-btn {
|
|
|
width: 50px;
|
|
|
height: 50px;
|
|
|
border-radius: 50%;
|
|
|
border: none;
|
|
|
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.082);
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
position: relative;
|
|
|
background-color: #464646;
|
|
|
cursor: pointer;
|
|
|
transition: all 0.3s;
|
|
|
}
|
|
|
.inbox-btn svg path {
|
|
|
fill: white;
|
|
|
}
|
|
|
.inbox-btn svg {
|
|
|
height: 17px;
|
|
|
transition: all 0.3s;
|
|
|
}
|
|
|
.msg-count {
|
|
|
position: absolute;
|
|
|
top: -5px;
|
|
|
right: -5px;
|
|
|
background-color: rgb(255, 255, 255);
|
|
|
|
|
|
border-radius: 50%;
|
|
|
font-size: 0.7em;
|
|
|
color: red;
|
|
|
width: 20px;
|
|
|
height: 20px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
.inbox-btn:hover {
|
|
|
transform: scale(1.1);
|
|
|
}
|
|
|
.div-p{
|
|
|
font-size: 13px;
|
|
|
text-align: center;
|
|
|
margin-top: 20%;
|
|
|
}
|
|
|
.grid-content {
|
|
|
border-radius: 4px;
|
|
|
min-height: 36px;
|
|
|
}
|
|
|
.el-col:hover{
|
|
|
cursor: pointer;
|
|
|
border-bottom: 1px solid red;
|
|
|
color: red;
|
|
|
}
|
|
|
.funcs{
|
|
|
text-align: center;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
.funcs:hover{
|
|
|
color: red;
|
|
|
}
|
|
|
.title{
|
|
|
width: 1169px;
|
|
|
height: 150px;
|
|
|
/* background-color: aqua; */
|
|
|
text-align: center;
|
|
|
padding-top: 50px;
|
|
|
}
|
|
|
.queryArea{
|
|
|
display: flex;
|
|
|
align-items: center; /* 垂直居中对齐 */
|
|
|
margin-top: 100px;
|
|
|
margin-left: 315px;
|
|
|
}
|
|
|
.el-button, .el-button.is-round {
|
|
|
padding: 20px 20px;
|
|
|
}
|
|
|
:root{
|
|
|
--el-border-radius-base: 1px 5px 5px 1px;
|
|
|
}
|
|
|
.el-input__wrapper{
|
|
|
border-radius: 5px 0 0 5px;
|
|
|
}
|
|
|
.demo-collapse{
|
|
|
position: absolute;
|
|
|
left: 11%;
|
|
|
}
|
|
|
.item {
|
|
|
margin-top: 10px;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
/* .goodsInfo{
|
|
|
width: 1000px;
|
|
|
height: 50px;
|
|
|
border-radius: 25px;
|
|
|
background-color: #eea8b8;
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
.goodsInfo > p{
|
|
|
margin-top: 15px;
|
|
|
margin-left: 16px;
|
|
|
}
|
|
|
.goodsInfo:hover{
|
|
|
background-color: pink;
|
|
|
height: 200px;
|
|
|
} */
|
|
|
|
|
|
/* .btn {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
border-radius: 10px;
|
|
|
border: none;
|
|
|
background-color: transparent;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.btn:hover > .icon {
|
|
|
transform: scale(1.2);
|
|
|
cursor: pointer;
|
|
|
transition: .2s linear;
|
|
|
}
|
|
|
|
|
|
.btn:focus > .icon {
|
|
|
fill: #fd1853;
|
|
|
animation: grosseur .2s linear;
|
|
|
} */
|
|
|
|
|
|
/* @keyframes grosseur {
|
|
|
0% {
|
|
|
width: 50px;
|
|
|
height: 50px;
|
|
|
fill: #fd1853;
|
|
|
}
|
|
|
|
|
|
100% {
|
|
|
width: 30px;
|
|
|
height: 30px;
|
|
|
fill: #fd1853;
|
|
|
} */
|
|
|
/* } */
|
|
|
.readAll{
|
|
|
font-size: 10px;
|
|
|
margin-right: 20px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
.readAll:hover{
|
|
|
color:deepskyblue;
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
<script setup>
|
|
|
import { ref } from 'vue'
|
|
|
import { ElButton, ElDrawer} from 'element-plus'
|
|
|
import { CircleCloseFilled} from '@element-plus/icons-vue'
|
|
|
const visible = ref(false)
|
|
|
const list = ref([
|
|
|
{
|
|
|
senderName: '寄件人姓名',
|
|
|
senderAddress: '寄件地址',
|
|
|
deliveryAddress: '收件地址',
|
|
|
deliveryName: '快递员姓名',
|
|
|
|
|
|
},
|
|
|
{
|
|
|
senderName: '寄件人姓名',
|
|
|
senderAddress: '寄件地址',
|
|
|
deliveryAddress: '收件地址',
|
|
|
deliveryName: '快递员姓名',
|
|
|
|
|
|
},
|
|
|
{
|
|
|
senderName: '寄件人姓名',
|
|
|
senderAddress: '寄件地址',
|
|
|
deliveryAddress: '收件地址',
|
|
|
deliveryName: '快递员姓名',
|
|
|
|
|
|
},
|
|
|
{
|
|
|
senderName: '寄件人姓名',
|
|
|
senderAddress: '寄件地址',
|
|
|
deliveryAddress: '收件地址',
|
|
|
deliveryName: '快递员姓名',
|
|
|
|
|
|
},
|
|
|
{
|
|
|
senderName: '寄件人姓名',
|
|
|
senderAddress: '寄件地址',
|
|
|
deliveryAddress: '收件地址',
|
|
|
deliveryName: '快递员姓名',
|
|
|
|
|
|
},
|
|
|
]);
|
|
|
const msgList = ref([
|
|
|
{
|
|
|
senderName:'发送人名字',
|
|
|
content:'发送内容',
|
|
|
createTime:'发送时间',
|
|
|
},{
|
|
|
senderName:'发送人名字',
|
|
|
content:'发送内容',
|
|
|
createTime:'发送时间',
|
|
|
},{
|
|
|
senderName:'发送人名字',
|
|
|
content:'发送内容',
|
|
|
createTime:'发送时间',
|
|
|
},{
|
|
|
senderName:'发送人名字',
|
|
|
content:'发送内容',
|
|
|
createTime:'发送时间',
|
|
|
},{
|
|
|
senderName:'发送人名字',
|
|
|
content:'发送内容',
|
|
|
createTime:'发送时间',
|
|
|
},{
|
|
|
senderName:'发送人名字',
|
|
|
content:'发送内容',
|
|
|
createTime:'发送时间',
|
|
|
}
|
|
|
])
|
|
|
const clearDot = () => {
|
|
|
const badges = document.querySelectorAll('.item');
|
|
|
// 遍历每个 badge 并移除其内部的 <sup> 元素
|
|
|
badges.forEach(badge => {
|
|
|
const supElement = badge.querySelector('sup');
|
|
|
if (supElement) {
|
|
|
supElement.remove();
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
const confirm = () => {
|
|
|
// const msg = msgList._rawValue[index];
|
|
|
const supElement = document.querySelector('sup');
|
|
|
if (supElement) {
|
|
|
supElement.remove();
|
|
|
}
|
|
|
}
|
|
|
const deleteMsg = (index) => {
|
|
|
console.log(index);
|
|
|
|
|
|
}
|
|
|
</script> |
