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>
        <div class="index_info">
            <div class="title"></div>
            <div class="nav_box" style="margin-top: 6vh;">
              <p class="nav_tit">公开公示</p>
              <div class="nav_list">
                <router-link :to="{name:'sunVillageInfoListFinance',query:{type:'code'}}" class="nav_item n_1">财务公开榜</router-link>
                <router-link :to="{name:'sunVillageInfoListTourists',query:{type:'code'}}" class="nav_item n_2">零工公开榜</router-link>
                <router-link :to="{name:'sunVillageInfoListIssues',query:{type:'code'}}" class="nav_item n_3">重大事项</router-link>
              </div>
            </div>
            <div class="nav_box" style="margin-top: 3vh;">
              <p class="nav_tit">我的权利</p>
              <div class="nav_list">
                <router-link :to="{name:'sunVillageInfoListVote',query:{type:'code'}}" class="nav_item n_4">投票表决</router-link>
                <router-link :to="{name:'sunVillageInfoApplicationList',query:{type:'code'}}" class="nav_item n_6">宅基地申请</router-link>
              </div>
            </div>
        </div>
        <div class="footer">
            技术支持：北京农燊高科信息技术有限公司
        </div>
    </div>
</template>
<script>
  import { bookInfo } from "@/api/sunVillage_info/fixedAssets";
  import Cookies from "js-cookie";
  export default {
    name: "certificateList",
    data() {
      return {
        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:"",
      };
    },
    created() {
      this.deptId = Cookies.get('deptId')
      this.bookId = Cookies.get('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
      }
    },
    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{
    background: #f1f2f2;
    width: 100vw;
    min-height: 100vh;
    .head_main{
        height: 340px;
        background: url('../../assets/images/sunVillage_info/index_head.png') no-repeat;
        background-size: 100% 100%;
        position: relative;
        .location{
            height: 42px;
            line-height: 42px;
            position: absolute;
            left: 38px;
            top: 72px;
            display: flex;
            .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;
                .icon{
                    display: block;
                    width: 20px;
                    height: 26px;
                    background: url('../../assets/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;
            position: absolute;
            top: 64px;
            right: 36px;
            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: 40PX;
              width: 25%;
              &:nth-child(3){
                margin-right: 0;
              }
              &.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;
               }
            }
          }
        }
    }
    .footer{
        position: absolute;
        bottom: 5.5vh;
        width: 100%;
        font-size: 22px;
        color: #3f3d56;
        text-align: center;
    }
}
</style>