From 2630ecc0823606b1bc153a65d37df0478ce4e744 Mon Sep 17 00:00:00 2001
From: fdzcxy212210108 <1798154514@qq.com>
Date: Thu, 19 Dec 2024 17:58:28 +0800
Subject: [PATCH] ADD file via upload

---
 Get.vue | 376 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 376 insertions(+)
 create mode 100644 Get.vue

diff --git a/Get.vue b/Get.vue
new file mode 100644
index 0000000..c00f001
--- /dev/null
+++ b/Get.vue
@@ -0,0 +1,376 @@
+<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>
\ No newline at end of file