HS_MZAP/src/views/placeManage/placeTabletInfo.vue

<template>
  <div class="banner">
    <h2>扎实提升“三力”</h2>
    <h2>深入推进“三化”</h2>
    <h2>坚持“三个思维”</h2>
  </div>
  <div class="content">
    <div class="itemInfo">
    <h3 style="color: #40abf4">牌位信息-{{data.data.brandName}}</h3>
      <van-row justify="space-between">
        <van-col span="14">
          <van-row class="item">
            <van-col span="24">
              <van-row justify="space-between">
                <van-col span="8"> 名称： </van-col>
                <van-col span="8" style="text-align: right">{{data.data.brandName}}</van-col>
              </van-row>
            </van-col>
          </van-row>
          <van-row class="item">
            <van-col span="24">
              <van-row justify="space-between">
                <van-col span="8"> 所属场所名称： </van-col>
                <van-col span="8" style="text-align: right">{{data.siteName.name}}</van-col>
              </van-row>
            </van-col>
          </van-row>
          <van-row class="item">
            <van-col span="24">
              <van-row justify="space-between">
                <van-col span="12"> 场所联系人： </van-col>
                <van-col span="6" style="text-align: right">{{data.data.memorialTabletHolder}}</van-col>
              </van-row>
            </van-col>
          </van-row>
        </van-col>
        <van-col span="8">
          <img class="personImg" :src="data.pic[0]" alt="" />
        </van-col>
      </van-row>
      <van-row class="item">
        <van-col span="24">
          <van-row justify="space-between">
            <van-col span="10"> 联系方式： </van-col>
            <van-col span="14" style="text-align: right">
              {{data.data.memorialTabletHolderPhone}}
            </van-col>
          </van-row>
        </van-col>
      </van-row>
      <van-row class="item">
        <van-col span="24">
          <van-row justify="space-between">
            <van-col span="10"> 供奉牌位人： </van-col>
            <van-col span="14" style="text-align: right">
              {{data.data.contactInformation}}
            </van-col>
          </van-row>
        </van-col>
      </van-row>
      <van-row class="item">
        <van-col span="24">
          <van-row justify="space-between">
            <van-col span="10"> 供奉牌位人电话： </van-col>
            <van-col span="14" style="text-align: right">
             {{data.data.siteContact}}
            </van-col>
          </van-row>
        </van-col>
      </van-row>
      <van-row class="item">
        <van-col span="24">
          <van-row justify="space-between">
            <van-col span="10"> 身份证号： </van-col>
            <van-col span="14" style="text-align: right">
              {{data.data.udCard}}
            </van-col>
          </van-row>
        </van-col>
      </van-row>
      <van-row class="item">
        <van-col span="24">
          <van-row justify="space-between">
            <van-col span="10"> 籍贯： </van-col>
            <van-col span="14" style="text-align: right">
              {{data.data.currentResidence}}
            </van-col>
          </van-row>
        </van-col>
      </van-row>
      <van-row class="item">
        <van-col span="24">
          <van-row justify="space-between">
            <van-col span="10"> 现居地： </van-col>
            <van-col span="14" style="text-align: right">
              {{data.data.nativePlace}}
            </van-col>
          </van-row>
        </van-col>
      </van-row>
      <van-row class="item">
        <van-col span="24">
          <van-row justify="space-between">
            <van-col span="10"> 现居地详情： </van-col>
            <van-col span="14" style="text-align: right">
              {{data.data.currentResidenceDel}}
            </van-col>
          </van-row>
        </van-col>
      </van-row>
      <van-row class="item">
        <van-col span="24">
          <van-row justify="space-between">
            <van-col span="10"> 与供奉牌位关系： </van-col>
            <van-col span="14" style="text-align: right">
                {{data.data.relationship}}
            </van-col>
          </van-row>
        </van-col>
      </van-row>
      <van-row class="item">
        <van-col span="24">
          <van-row justify="space-between">
            <van-col span="10"> 供奉费用(元/年)： </van-col>
            <van-col span="14" style="text-align: right">
              {{data.data.sacrificeExpenses}}
            </van-col>
          </van-row>
        </van-col>
      </van-row>
      <van-row class="item">
        <van-col span="24">
          <van-row justify="space-between">
            <van-col span="10">被供奉者信息： </van-col>
            <van-col span="14" style="text-align: right">
            </van-col>
          </van-row>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'
import {onMounted, reactive} from "vue"
export default {
  setup(){
    const data = reactive({
      //牌位数据
      data:{},
      siteName:{},
      pic:[]
    })
    //数据接收
    const router = useRouter();
    onMounted(()=>{
      var item = JSON.parse(router.currentRoute.value.query.data)
      data.data = item
      data.siteName = data.data.siteName
      data.pic.push(data.data.pic.split('|'))
    })
    //返回
    const goback = () => {
      history.back();
    };
    return{
      goback,
      data
    }
  }
};
</script>

<style lang="less">
body,
html {
  margin: 0;
  padding: 0;
  background-color: #f2f2f2;
}
.van-nav-bar {
  background-color: #36a7f3;
  .van-nav-bar__title {
    color: #fff;
  }
  .van-badge__wrapper {
    color: #fff;
  }
}
.banner {
  background-color: #36a7f3;
  padding: 20px 50px 40px 50px;
  color: #fff;
  h2 {
    &:nth-child(1) {
      margin-top: 0px;
      text-align: left;
    }
    &:nth-child(2) {
      text-align: center;
    }
    &:nth-child(3) {
      text-align: right;
    }
  }
}
.content {
  position: fixed;
  width: 85%;
  top: 140px;
  left: 50%;
  padding: 20px 10px;
  transform: translateX(-50%);
  background-color: #fff;
  border-radius: 10px;
  font-size: 16px;
  height: 540px;
  overflow: auto;
  h3 {
    margin: 0;
    padding: 0;
  }
  .itemInfo{
    height: 100%;
    .item{
        padding: 15px 0;
        border-bottom: 1px solid #f2f2f2;
        .van-col{
            .van-row{
                .van-col{
                    &:nth-child(2){
                        color: #7f7f7f;
                    }
                }
            }
        }
    }
    .personImg{
        width: 100%;
        height: 100%;
    }
  }
}
</style>