nsgk_mobile/src/views/sunVillage_info/index_code.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="$router.push({name:'sunVillageInfoLogin'})">
                <i class="icon"></i>
            </div>
        </div>
        <div class="index_info">
            <div class="title"></div>
            <div class="nav_list">
              <router-link :to="{name:'sunVillageInfoListFinance',query:{type:'code'}}" class="nav_item n1">
                <img src="../../assets/images/sunVillage_info/index_code_btn_1.png">
              </router-link>
              <router-link :to="{name:'sunVillageInfoListTourists',query:{type:'code'}}" class="nav_item n2">
                <img src="../../assets/images/sunVillage_info/index_code_btn_2.png">
              </router-link>

              <!--合同-->
              <router-link :to="{name:'sunVillageInfoListContract',query:{type:'code'}}" class="nav_item n1">
                <img src="../../assets/images/sunVillage_info/index_code_btn_5.png">
              </router-link>

              <router-link :to="{name:'sunVillageInfoListPhoto',query:{type:'code'}}" class="nav_item n2">
                <img src="../../assets/images/sunVillage_info/index_code_btn_4.png">
              </router-link>
              <router-link :to="{name:'sunVillageInfoListIssues',query:{type:'code'}}" class="nav_item n3">
                <img src="../../assets/images/sunVillage_info/index_code_btn_3.png">
              </router-link>
            </div>
        </div>
        <div class="footer">
            技术支持：北京农燊高科信息技术有限公司
        </div>
      <img src="../../assets/images/sunVillage_info/index_btn.png" class="fixed_btn" @click="goCode">
    </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:[],
        bookName:"",
        bookId:"",
        book:"",
      };
    },
    created() {

      bookInfo(this.$route.query.bookId).then((res) => {
        if (res.code == 200) {
          Cookies.set("bookName", res.data.bookName, {
            expires: 30,
          });
          Cookies.set("deptName", res.data.deptName, {
            expires: 30,
          });
          this.deptName = res.data.deptName;
          this.bookName = res.data.bookName;
        }
      });
      Cookies.set("bookId", this.$route.query.bookId, {
        expires: 30,
      });
      Cookies.set("deptId", this.$route.query.deptId, {
        expires: 30,
      });
    },
    methods: {
      goCode(){
        if (Cookies.get('user')){
          this.$router.push({path:'/sunVillage_info/index_code_rights'})
        }else{
          this.$router.push({path:'/sunVillage_info/login_code'})
        }
      }
    },
  }
</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;
                }
            }
        }
        .exit_btn{
            width: 61px;
            height: 61px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 64px;
            right: 36px;
            .icon{
                width: 100%;
                height: 100%;
                background: url('../../assets/images/sunVillage_info/login_head_h.png') no-repeat;
                background-size: 100% 100%;
            }
        }
    }
    .index_info{
        padding-top: 4.1vh;
        .title{
            width: 521px;
            height: 52px;
            background: url('../../assets/images/sunVillage_info/index_title2.png') no-repeat;
            background-size: 100% 100%;
            margin:0 auto;
        }
      .nav_list{
        margin-top: 6vh;
        padding:0 30px;
        display: flex;
        flex-flow: wrap;
        margin-bottom: 40PX;
        .nav_item{
          width: calc(50% - 10px);
          /*height: 180px;*/
          border-radius: 30px;
          font-size: 24px;
          color: #3f3d56;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
          img{
            width: 100%;
          }
          &.n1{
            margin-bottom: 20px;
          }
          &.n2{
            margin-left: 20px;
            margin-bottom: 20px;
          }
          &.n4{
            margin-left: 20px;
          }
          &.n_1{
            background: url('../../assets/images/sunVillage_info/index_block_01.png') no-repeat center top;
            background-size: 50%;
            /*margin-bottom: 20PX;*/
          }
          &.n_2{
            background: url('../../assets/images/sunVillage_info/index_block_02.png') no-repeat center top;
            background-size: 50%;
            /*margin-bottom: 20PX;*/
          }
          &.n_3 {
            background: url('../../assets/images/sunVillage_info/index_block_03.png') no-repeat center top;
            background-size: 50%;
            /*margin-bottom: 20PX;*/
          }
          &.n_4 {
            background: url('../../assets/images/sunVillage_info/index_block_04.png') no-repeat center top;
            background-size: 50%;
            /*margin-bottom: 20PX;*/
          }
          &.n_5 {
            background: url('../../assets/images/sunVillage_info/index_block_05.png') no-repeat center top;
            background-size: 50%;
          }
          &.n_6 {
            background: url('../../assets/images/sunVillage_info/index_block_06.png') no-repeat center top;
            background-size: 50%;
          }
          &.n_7 {
            background: url('../../assets/images/sunVillage_info/index_block_07.png') no-repeat center top;
            background-size: 50%;
          }
          &.n_8 {
            background: url('../../assets/images/sunVillage_info/index_block_08.png') no-repeat center top;
            background-size: 50%;
          }
        }
      }
    }
    .footer{
        position: absolute;
        bottom: 5.5vh;
        width: 100%;
        font-size: 22px;
        color: #3f3d56;
        text-align: center;
    }
}
</style>