nsgk_mobile/src/views/sunVillage_info/index_code_rights.vue

<template>
    <div class="home_wrapper">
        <div class="head_main">
            <div class="location">

              <div class="address"><i class="icon"></i>{{deptName}}</div>

              <div class="address">{{bookName}}</div>

            </div>
            <div class="exit_btn" @click="goOut">
                <p>{{userName}}</p>
                <i class="icon"></i>
            </div>
        </div>
      <img src="../../../static/images/sunVillage_info/sunVillage_info_index_code_right_header.png" style="display:block;width:94%;margin:0 auto;" alt="">
      <div class="index_info">
            <div class="nav_box" style="margin-top: 3vh;" v-for="(item,idx) in menusList" :key="idx">
              <p class="nav_tit">{{item.modleName}}</p>
              <div class="nav_list">
                <router-link
                  v-for="(childrenItem,childrenIdx) in item.menus"
                  :key="childrenItem.id"
                  :to="{name:childrenItem.menuUrl,query:{type:'code',typeX:childrenItem.urlPara}}"
                  class="nav_item"
                  :style="`background:url(${require('@/assets/images/sunVillage_info/' + childrenItem.menuIcon)}) no-repeat center top;background-size: 50%;`"
                >
                  {{childrenItem.menuName}}
                </router-link>
              </div>
            </div>
        </div>
        <div class="footer">
          {{configValue == ""?'技术支持：公司':configValue}}
        </div>
    </div>
</template>
<script>
  import {bookInfo, nologinMenus} from "@/api/sunVillage_info/fixedAssets";
  import Cookies from "js-cookie";
  import {sysConfig} from "@/api/homesteadSurvey";
  export default {
    name: "certificateList",
    data() {
      return {
        wdqlList:[],
        qqbzList:[],
        deptIdOptions:[],
        villageVisbile:false,
        showBookList:false,
        deptName:'',
        //选中的值
        villageValue: "",
        //省市区区级list
        hcAreaInfoOption: [],
        hcAreaInfoFieldName: {
          text: "label",
          value: "value",
          children: "children",
        },
        bookName:'',
        queryParams: {
          pageNum: 1,
          pageSize: 100,
        },
        //账套列表
        bookVisbile:false,
        bookList:[],
        bookId:"",
        deptId:"",
        book:"",
        userName:"",
        menusList:[],

        configValue:''
      };
    },
    created() {
      this.deptId = Cookies.get('deptId')
      this.bookId = Cookies.get('bookId')
      if(this.bookId)
      {
        bookInfo(this.bookId).then((res) => {
          if (res.code == 200) {
            this.deptName = res.data.deptName;
            this.bookName = res.data.bookName;
          }
        });
      }
      if(Cookies.get('user')){
        this.userName = JSON.parse(Cookies.get('user')).memberName
      }

      let query = {
        identityType:2
      }
      nologinMenus(query).then((res) => {
        if (res.code == 200) {
          this.menusList = res.data;
        }
      });
      let params={
        configKey: "system.company.name"}
      sysConfig(params).then((res) => {
        if (res.code == 200) {
          this.configValue = res.rows[0].configValue;
        }
      });
    },
    methods: {
      goCode(){
        this.$router.push({path:'/sunVillage_info/login_code'})
      },
      goOut(){
        // Cookies.remove("memberName");
        // Cookies.remove("idcard");
        Cookies.remove("user");
        this.$router.push({name:'sunVillageInfoIndexCode',query:{deptId:this.deptId,bookId:this.bookId}})
      }
    },
  }
</script>
<style scoped lang="scss">
  .fixed_btn{
    position: fixed;
    right: 0;
    width: 115PX;
    bottom: 15%;
    border-top-left-radius: 115PX;
    border-bottom-left-radius: 115PX;
    box-shadow: 0px 2px 5px #ccc;
  }
.home_wrapper{
    width: 100vw;
    min-height: 100vh;
    background: #F5F6F9 url('../../../static/images/sunVillage_info/page_bg.png') no-repeat top center;
    background-size: 100% auto;
    .head_main{
      position: relative;
      display: flex;
      align-items: self-start;
      justify-content: space-between;
      width: 94%;
      margin: 0 auto;
      padding: 2vh 0 0;
        .location{
          line-height: 42px;
          display: flex;
          flex-direction: column;
          align-items: self-start;
            .address{
              padding:0 18PX;
              background:rgba(255,255,255,0.75);
              border-radius: 42px;
              font-size: 28px;
              color: #3f3d56;
              margin-right: 12px;
              display: flex;
              align-items:center;
              margin-bottom: 10PX;
                .icon{
                  display: block;
                  width: 20px;
                  height: 26px;
                  background: url('../../../static/images/sunVillage_info/index_icon_1.png') no-repeat;
                  background-size: 100% 100%;
                  margin-right: 10PX;
                }
            }
          .user{
            .icon{
              width: 32px;
              height: 32px;
              background: url('../../assets/images/sunVillage_info/user_icon.png') no-repeat!important;
              background-size: 100% 100%;
            }
          }
        }
        .exit_btn{
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            p{
              background: #3f3d56;
              color: #ffffff;
              padding: 3PX 15PX;
              position: relative;
              right: -6PX;
              border-top-left-radius: 20PX;
              border-bottom-left-radius: 20PX;
              box-shadow: -3PX 2PX 4PX rgba(0,0,0,0.3);
            }
            .icon{
                width: 61px;
                height: 61px;
                background: url('../../assets/images/sunVillage_info/login_head_h_rights.png') no-repeat;
                background-size: 100% 100%;
                box-shadow: -3PX 2PX 4PX rgba(0,0,0,0.3);
                border-radius: 100%;
            }
        }
    }
    .index_info{
        /*padding-top: 4.1vh;*/
        .title{
            width: 521px;
            height: 52px;
            background: url('../../assets/images/sunVillage_info/index_title2_rights.png') no-repeat;
            background-size: 100% 100%;
            margin:0 auto;
        }
        .nav_box{
          margin: 0 auto;
          width: calc(100% - 60px);
          background: #ffffff;
          padding: 30px 30px 40px;
          border-radius: 15PX;
          box-shadow: 0px 2px 10px #cccccc;
          .nav_tit{
            font-size: 35px;
            margin-bottom: 15PX;
            font-weight: bold;
          }
          .nav_list{
            display: flex;
            flex-flow: wrap;
            /*justify-content: space-between;*/
            .nav_item{
              font-size: 24px;
              color: #333333;
              text-align: center;
              display: flex;
              align-items: center;
              justify-content: center;
              padding-top: 45PX;
              width: 25%;
              &:nth-child(3){
                margin-right: 0;
              }
              &:nth-child(4n+1){
                margin-top: 15PX;
              }
              &:nth-child(5n+1){
                 margin-top: 15PX;
               }
              &:nth-child(6n+1){
                 margin-top: 15PX;
               }
              &:nth-child(1){
                margin-top: 0PX;
              }
              &.n_1{
                background: url('../../assets/images/sunVillage_info/index_block_1_rights.png') no-repeat center top;
                background-size: 34.5PX;
              }
              &.n_2{
                background: url('../../assets/images/sunVillage_info/index_block_2_rights.png') no-repeat center top;
                background-size: 34.5PX;
              }
              &.n_3 {
                background: url('../../assets/images/sunVillage_info/index_block_3_rights.png') no-repeat center top;
                background-size: 34.5PX;
              }
              &.n_4 {
                background: url('../../assets/images/sunVillage_info/index_block_4_rights.png') no-repeat center top;
                background-size: 34.5PX;
              }
              &.n_5 {
                background: url('../../assets/images/sunVillage_info/index_block_5.png') no-repeat;
                background-size: 100% 100%;
              }
              &.n_6 {
                 background: url('../../assets/images/sunVillage_info/index_block_06.png') no-repeat center top;
                 background-size: 34.5PX;
               }
              &.n_66 {
                 background: url('../../assets/images/sunVillage_info/tcIcon.png') no-repeat center top;
                 background-size: 44.5PX;
               }
              &.n_77 {
                 background: url('../../assets/images/sunVillage_info/index_block_77.png') no-repeat center top;
                 background-size: 34.5PX;
               }
            }
          }
        }
    }
    .footer{
        margin-top: 15PX;
        bottom: 5.5vh;
        width: 100%;
        font-size: 22px;
        color: #3f3d56;
        text-align: center;
    }
}
</style>