弹出个人信息弹窗

hejianhao

2025-01-08 bb7c90e502534991d81f3efe414eb7ba0c275f46

弹出个人信息弹窗

 src/component/Header.vue

@@ -2,22 +2,30 @@
    <div class="header_content">
        <div class="color1 fs--24 font-bold">{{ userInfo.companyName }}</div>
        <div class="flex a-center j-between">
            <div class="flex a-center mr--55 shrink0 pointer">
            <div @click="userInfoShow = true" class="flex a-center mr--55 shrink0 pointer">
                <div class="mr--24 fs--20 font-bold shrink0 color2">{{ userInfo.userName }}</div>
                <img src="../assets/img/bianji@2x.png" class="w--23 h--23" />
            </div>
            <img src="../assets/img/tuichu@2x.png" class="w--40 h--40 shrink0 pointer" />
            <img @click="logOutShow = true" src="../assets/img/tuichu@2x.png" class="w--40 h--40 shrink0 pointer" />
        </div>
        <el-dialog v-if="logOutShow" :visible.sync="logOutShow" :show-close="false" width="518px"
            top="51px"></el-dialog>
        <UserInfoComponent v-if="userInfoShow" v-model:show="userInfoShow" />
    </div>
</template>

<script>
import UserInfoComponent from '@/component/userInfo.vue'
export default {
    components: {},
    components: {
        UserInfoComponent
    },
    props: {},
    data() {
        return {
            userInfo: JSON.parse(localStorage.getItem('userInfo'))
            userInfo: JSON.parse(localStorage.getItem('userInfo')),
            logOutShow: false,
            userInfoShow: false
        };
    },
    computed: {},
@@ -45,4 +53,17 @@
.color2 {
    color: #EDEDF3;
}

::v-deep .el-dialog {
    border-radius: 8px;

    .el-dialog__header {
        display: none !important;
    }

    .el-dialog__body {
        padding: 0 !important;

    }
}
</style>

 src/component/userInfo.vue

@@ -28,8 +28,7 @@
                        </el-form-item>
                    </el-col>
                    <el-col :span="16"><el-form-item label="备注:" label-width="120px">
                            <div style="display: flex;align-items: center;"><el-input
                                    v-model="form.region"></el-input>
                            <div style="display: flex;align-items: center;"><el-input v-model="form.region"></el-input>
                                <img style="width: 19px;height: 21px;cursor: pointer;margin-left: 26px;"
                                    src="@/assets/delete.png" alt="">
                            </div>
@@ -95,11 +94,14 @@
    },
    watch: {
        show(val) {
            

            this.dialogVisible = val
        },
        dialogVisible(val) {
            this.$emit('update:show', val);
        },
        mounted() {
            this.dialogVisible = this.show;
        }
    }
};

 src/view/Home.vue

@@ -1,7 +1,6 @@
<template>
    <div>
        <Header />
        <UserInfo :show="true" />
        <div class="search-box">
            <div class="title-card">
                <div class="title-left">
@@ -94,12 +93,10 @@
</template>

<script>
import UserInfo from '@/component/userInfo.vue'
import Header from '@/component/Header.vue'
export default {
    name: "Home",
    components: {
        UserInfo,
        Header
    },
    data() {