xjc-vue/src/views/xjc-integratedmachine/components/head_component.vue

<template>
    <div class="contenter">
      <div class="head-left">
        <img  class="head-icon" src="@/assets/images/login/login-return.png" @click="backTo" alt="404">
      </div>
<!-- 等UI图更新继续画     <div>-->
      <div class="head-title">
        <div v-if="headinfo.title">{{headinfo.title}}</div>
      </div>
      <div class="head-right" v-if="!headinfo.isLogin">
        <div class="right-user">
          <img  src="@/assets/images/wakeup/user.png" @click="backTo" alt="404">
        </div>
        <el-button class="head-right-btn1" >使用说明</el-button>
        <el-button class="head-right-btn2" @click="exit">退出登录</el-button>
      </div>
<!--      </div>-->
    </div>

</template>

<script setup>

    const {proxy} = getCurrentInstance()
    const router = useRouter()
    const props = defineProps({
      headinfo: {}
    })
    function backTo() {
      if(props.headinfo.backUrlUse){
        router.push({
            path: props.headinfo.backUrl
        })
      }else {
        router.go(-1);
      }
    }

    function exit() {
        proxy.$modal.confirm('您确认退出吗').then(function () {
            router.push({
                path: '/xjc_login'
            })
        }).then(() => {
        }).catch(() => {
        })

    }


</script>

<style scoped lang='scss'>

    .contenter{
      position: absolute;
      top: 0;
      left: 0;
      width:100%;
      height: 100px;
      display: flex;
      align-items: center;
      background-color: rgba(251,252,253,0.5);
      justify-content: space-between;
      .head-left{
        width: 464px;
      }
      .head-icon{
        width: 74px;
        height: 74px;
        margin-left: 74px;
      }
      .head-title{
        width: 464px;
        //margin: ;
        text-align: center;
        font-weight: bold;
        font-size: 48px;
        color: #060606;
      }
      .head-right{
          display: flex;
          justify-content: space-around;
          align-items: center;
          width: 464px;
         .head-right-btn1{
           width: 136px;
           height: 74px;
           background: #2BC17B;
           border-radius: 10px 10px 10px 10px;
           font-weight: 400;
           font-size: 24px;
           color: #FFFFFF;
        }
        .head-right-btn2{
          width: 136px;
          height: 74px;
          background: #FB5451;
          border-radius: 10px 10px 10px 10px;
          font-weight: 400;
          font-size: 24px;
          color: #FFFFFF;
          margin-right: 48px;
        }
        .right-user{

          img{
            width: 85px;
            height: 85px;
          }
        }
      }
    }
</style>