Double_X_Attendance_Web/src/pages/Setup/Setup.vue

<template>
    <Header />
    <div class="mainRoot">
        <div class="settings">
            <router-link to="/UpdateInfo">
                <div class="item">
                    <div class="icon">
                        <span class="iconfont">
                            <el-icon>
                                <Refresh />
                            </el-icon>
                        </span>
                    </div>
                    <div class="name">个人信息管理</div>
                    <div class="btn">
                        <span class="iconfont">
                            <el-icon><arrow-right /></el-icon>
                        </span>
                    </div>
                </div>
            </router-link>

            <router-link to="/ChangePassword">
                <div class="item">
                    <div class="icon">
                        <span class="iconfont">
                            <el-icon>
                                <Lock />
                            </el-icon>
                        </span>
                    </div>
                    <div class="name">修改密码</div>
                    <div class="btn">
                        <span class="iconfont">
                            <el-icon><arrow-right /></el-icon>
                        </span>
                    </div>
                </div>
            </router-link>

            <div class="item end" @click="onDevelopment">
                <div class="icon">
                    <span class="iconfont">
                        <el-icon>
                            <QuestionFilled />
                        </el-icon>
                    </span>
                </div>
                <div class="name">帮助与反馈</div>
                <div class="btn">
                    <span class="iconfont">
                        <el-icon><arrow-right /></el-icon>
                    </span>
                </div>
            </div>

        </div>

    </div>
</template>

<script setup>
import Header from '../../components/Header.vue'
import { useRouter } from 'vue-router';
import { App } from '../../app/app';
import { QuestionFilled } from '@element-plus/icons-vue';

let router = useRouter();

if (!App.hasUser()) {
    ElMessage({
        message: "请登录",
        type: 'warning',
    });
    router.replace({
        name: "Login"
    });
}

</script>

<style scoped>
.settings {
    width: 70%;
    margin: 0 auto;
    padding: 12px;
    background-color: #fff;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
}

.settings .item {
    display: flex;
    padding-top: 8px;
    padding-bottom: 8px;
    align-items: center;
    border-bottom: 1px solid #eee;
}

.settings .item.end {
    border-bottom: none;
}

.settings .item .icon {
    width: 30px;
    height: 30px;
    /* border: 1px solid red; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.settings .item .icon .iconfont {
    font-size: 20px;
}

.settings .item .name {
    margin-left: 12px;
    flex: 1;
}

.logoutBtn {
    height: 45px;
    background-color: #c8161d;
    border-radius: 10px;
    margin-left: 18px;
    margin-right: 18px;
    margin-bottom: 18px;
    margin-top: 20px;
    line-height: 45px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
}

@media only screen and (max-width: 768px) {
    .settings {
        margin-top: 10px;
        width: 80%;
    }

}
</style>