update:修改样式

FrontCode2/sunshine_levy/src/views/home.css

@@ -74,15 +74,22 @@
   background: rgba(255, 255, 255, .28);
 }
 .gridImg {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+
   width: 90px;
   height: 80px;
   margin: 12px 6px;
+  padding-top: 5px;
 
-  opacity: 1;
+  border-radius: 10px;
+}
+.gridImgBg {
+  width: 38px;
+  height: 35px;
 }
-/* .gridImg:hover {
-  opacity: 1;
-} */
 .bigImg {
   width: 100%;
   height: 91px;
@@ -101,12 +108,15 @@
   background-size: 100% 41px;
 }
 .projectIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
   width: 40px;
-  height: 39px;
+  height: 40px;
+  margin-right: 10px;
 
-  vertical-align: middle;
+  border-radius: 5px 0 0;
-
-  border-radius: 5px 0 0 0;
   background: #3284cd;
 }
 .projectTitle {
@@ -126,7 +136,6 @@
   display: flex;
   align-items: center;
 
-  width: 95px;
   height: 27px;
 
   opacity: .82;
@@ -136,10 +145,11 @@
 .projectRightFont {
   font-family: PingFangSC-Semibold,
   PingFang SC;
-  font-size: 10px;
+  font-size: 12px;
-  font-weight: 600;
   line-height: 14px;
 
+  padding-right: 5px;
+
   color: #fff;
 }
 .projectRightIcon {

FrontCode2/sunshine_levy/src/views/index.vue

@@ -7,18 +7,12 @@
         </div>
         <div>
           <div class="baseInfo">
-            <van-image
+            <van-image :src="require('@/assets/img/renyuanliebiao.png')" class="baseImg" />
-              :src="require('@/assets/img/renyuanliebiao.png')"
-              class="baseImg"
-            />
             <span class="baseFont">被征收人姓名：</span>
             <span class="baseFont">{{ data.userName }}</span>
           </div>
           <div class="baseInfo">
-            <van-image
+            <van-image :src="require('@/assets/img/credentials_icon.png')" class="baseImg" />
-              :src="require('@/assets/img/credentials_icon.png')"
-              class="baseImg"
-            />
             <span class="baseFont">身份证号码：</span>
             <span class="baseFont">{{ data.idCard }}</span>
           </div>
@@ -26,28 +20,23 @@
         <!-- 三张背景图 -->
         <div>
           <div class="gridBg centerMagin">
-            <van-image
+            <div class="gridImg" style="background:#1897FB;">
-              :src="require('@/assets/img/scan.png')"
+              <van-image :src="require('@/assets/img/scan.png')" class="gridImgBg" />
-              class="gridImg"
+              <span class="baseFont" style="padding-top: 5px;">扫一扫</span>
-            />
+            </div>
-            <van-image
+            <div @click="gotoProject('pg')" class="gridImg" style="background:#F1AE4B;">
-              :src="require('@/assets/img/evaluation.png')"
+              <van-image :src="require('@/assets/img/evaluation.png')" class="gridImgBg" />
-              @click="gotoProject('pg')"
+              <span class="baseFont" style="padding-top: 5px;">查评估结果</span>
-              class="gridImg"
+            </div>
-            />
+            <div @click="gotoProject('xy')" class="gridImg" style="background:#16D7ED;">
-            <van-image
+              <van-image :src="require('@/assets/img/compensation.png')" class="gridImgBg" />
-              :src="require('@/assets/img/compensation.png')"
+              <span class="baseFont" style="padding-top: 5px;">查补偿协议</span>
-              @click="gotoProject('xy')"
+            </div>
-              class="gridImg"
-            />
           </div>
         </div>
       </div>
       <div class="centerMagin">
-        <van-image
+        <van-image :src="require('@/assets/img/government.png')" class="bigImg" />
-          :src="require('@/assets/img/government.png')"
-          class="bigImg"
-        />
       </div>
       <!-- 项目内容 -->
       <van-list>
@@ -56,19 +45,18 @@
             <!-- 图标所在行 -->
             <div class="project">
               <!-- window图标 -->
-              <div>
+              <div style="display: flex;align-items: center;">
-                <van-image
+                <div class="projectIcon">
-                  :src="require('@/assets/img/project.png')"
+                  <van-image
-                  class="projectIcon"
+                    :src="require('@/assets/img/project.png')"
-                />
+                    style="width: 25px;height: 25px;"
+                  />
+                </div>
                 <span class="projectTitle">{{ item.name }}</span>
               </div>
               <!-- 补偿协议图标 -->
               <div class="projectRight">
-                <van-image
+                <van-image :src="require('@/assets/img/menu_yhxy.png')" class="projectRightIcon" />
-                  :src="require('@/assets/img/menu_yhxy.png')"
-                  class="projectRightIcon"
-                />
                 <span class="projectRightFont">{{ item.currentState }}</span>
               </div>
             </div>
@@ -114,9 +102,11 @@
                     class="projectCenterImg"
                   />
                   <span class="projectCenterFont">征收决定号：</span>
-                  <span class="projectCenterFont" style="color: #3883f1">{{
+                  <span class="projectCenterFont" style="color: #3883f1">
+                    {{
                     item.zsjdh
-                  }}</span>
+                    }}
+                  </span>
                 </div>
               </div>
             </div>
@@ -124,10 +114,7 @@
               <!-- 分户评估结果部分 -->
               <div class="assess">
                 <div>
-                  <van-image
+                  <van-image :src="require('@/assets/img/assess_1.png')" class="assessIcon" />
-                    :src="require('@/assets/img/assess_1.png')"
-                    class="assessIcon"
-                  />
                   <span class="assessTitle">分户评估结果</span>
                 </div>
               </div>
@@ -135,39 +122,32 @@
               <van-list>
                 <div
                   :key="assess.id"
+                  @click="gotoProject('pg', item.prjId)"
                   class="assessCenter1"
                   v-for="assess in item.fhpgList"
-                  @click="gotoProject('pg', item.prjId)"
                 >
                   <div class="assessBox">
                     <span class="projectCenterFont">评估报告编号：</span>
-                    <span class="projectCenterFont">
+                    <span class="projectCenterFont">{{ assess.assessmentNo }}</span>
-                      {{ assess.assessmentNo }}
+                  </div>
+                  <div class="assessBox">
+                    <span class="projectCenterFont" style="width: 40%">被征收房屋地址：</span>
+                    <span class="projectCenterFont protocolTitle">
+                      {{
+                      assess.houseAddress
+                      }}
                     </span>
                   </div>
-                  <div class="assessBox">
-                    <span class="projectCenterFont" style="width: 40%"
-                      >被征收房屋地址：</span
-                    >
-                    <span class="projectCenterFont protocolTitle">{{
-                      assess.houseAddress
-                    }}</span>
-                  </div>
                   <div class="assessBox">
                     <span class="projectCenterFont">评估总金额：</span>
-                    <span class="projectTitle" style="color: red"
+                    <span class="projectTitle" style="color: red">¥{{ assess.countValue }}</span>
-                      >¥{{ assess.countValue }}</span
-                    >
                   </div>
                 </div>
               </van-list>
               <!-- 补偿协议部分 -->
               <div class="assess">
                 <div>
-                  <van-image
+                  <van-image :src="require('@/assets/img/assess_2.png')" class="assessIcon" />
-                    :src="require('@/assets/img/assess_2.png')"
-                    class="assessIcon"
-                  />
                   <span class="assessTitle">补偿协议</span>
                 </div>
                 <!-- <div>
@@ -178,33 +158,36 @@
               <van-list>
                 <div
                   :key="protocol.id"
+                  @click="gotoProject('xy', item.prjId)"
                   class="assessCenter2"
                   v-for="protocol in item.bcxyList"
-                  @click="gotoProject('xy', item.prjId)"
                 >
                   <div class="assessBox">
                     <span class="projectCenterFont">协议编号：</span>
                     <span class="projectCenterFont">{{ protocol.xyNo }}</span>
                   </div>
                   <div class="assessBox">
-                    <span class="projectCenterFont" style="width: 40%"
+                    <span class="projectCenterFont" style="width: 40%">被征收房屋地址：</span>
-                      >被征收房屋地址：</span
+                    <span class="projectCenterFont protocolTitle">
-                    >
+                      {{
-                    <span class="projectCenterFont protocolTitle">{{
                       protocol.houseAddress
-                    }}</span>
+                      }}
+                    </span>
                   </div>
                   <div class="assessBox">
                     <span class="projectCenterFont">补偿方式：</span>
-                    <span class="projectCenterFont">{{
+                    <span class="projectCenterFont">
+                      {{
                       protocol.switchProductionWay
-                    }}</span>
+                      }}
+                    </span>
                   </div>
                   <div class="assessBox">
                     <span class="projectCenterFont">合计补偿资金：</span>
-                    <span class="projectTitle" style="color: red"
+                    <span
-                      >¥{{ protocol.summationShouldCompensateMoney }}</span
+                      class="projectTitle"
-                    >
+                      style="color: red"
+                    >¥{{ protocol.summationShouldCompensateMoney }}</span>
                   </div>
                 </div>
               </van-list>
@@ -214,18 +197,16 @@
       </van-list>
       <!-- 征收政策背景图 -->
       <div class="centerMagin">
-        <van-image
+        <van-image :src="require('@/assets/img/expropriationPolicy.png')" class="bigImg" />
-          :src="require('@/assets/img/expropriationPolicy.png')"
-          class="bigImg"
-        />
       </div>
       <!-- 征收政策部分 -->
       <div class="centerMagin">
         <span class="projectTitle" style="color: #202020">征收政策</span>
         <div class="assessBox" style="padding-left: 5px; padding-right: 5px">
-          <span class="font11" style="color: #2c2b2b"
+          <span
-            >共{{ data.policiesRegulationsLists.totalCount }}条</span
+            class="font11"
-          >
+            style="color: #2c2b2b"
+          >共{{ data.policiesRegulationsLists.totalCount }}条</span>
         </div>
       </div>
       <div class="centerMagin" style="padding-bottom: 20px">
@@ -234,20 +215,14 @@
           <van-list>
             <div
               :key="item.id"
+              @click="pageJump(item.id)"
               class="protocolList"
               v-for="(item, i) in data.policiesRegulationsLists.list"
-              @click="pageJump(item.id)"
             >
               <!-- 非最后一行 -->
-              <div
+              <div class="protocolLine" v-if="i != data.policiesRegulationsLists.list.length - 1">
-                class="protocolLine"
-                v-if="i != data.policiesRegulationsLists.list.length - 1"
-              >
                 <div class="font14 protocolTitle">{{ item.title }}</div>
-                <div
+                <div class="assessBox" style="padding-left: 5px; padding-right: 5px">
-                  class="assessBox"
-                  style="padding-left: 5px; padding-right: 5px"
-                >
                   <div>
                     <span class="font11">发布时间：</span>
                     <span class="font11">{{ item.publicTime }}</span>
@@ -261,10 +236,7 @@
               <!-- 最后一行 -->
               <div style="padding-bottom: 10px" v-else>
                 <div class="font14 protocolTitle">{{ item.title }}</div>
-                <div
+                <div class="assessBox" style="padding-left: 5px; padding-right: 5px">
-                  class="assessBox"
-                  style="padding-left: 5px; padding-right: 5px"
-                >
                   <div>
                     <span class="font11">发布时间：</span>
                     <span class="font11">{{ item.publicTime }}</span>
@@ -284,27 +256,27 @@
 </template>
 
 <script>
-import "./home.css";
+import './home.css';
-import { apis } from "@/common/apis";
+import { apis } from '@/common/apis';
-import { mgop } from "@aligov/jssdk-mgop";
+import { mgop } from '@aligov/jssdk-mgop';
-import { SetTicket } from "@/common/util//tools";
+import { SetTicket } from '@/common/util//tools';
 export default {
-  name: "home",
+  name: 'home',
   data() {
     return {
       data: {
-        idCard: "加载中...",
+        idCard: '加载中...',
-        userName: "加载中...",
+        userName: '加载中...',
         policiesRegulationsLists: {
-          totalCount: 0
+          totalCount: 0,
-        }
+        },
       },
-      ticket: "8a1189377bdad67c017bf66039d76376-ticket"
+      ticket: '8a1189377bdad67c017bf66039d76376-ticket',
     };
   },
   async created() {
     this.onInit();
-    console.log("this", this);
+    console.log('this', this);
     this.setLocationAplus();
     SetTicket(this.$route.query.ticket || this.ticket);
   },
@@ -312,44 +284,44 @@ export default {
     // 获取数据
     onInit() {
       mgop({
-        api: "mgop.kykj.houseexpropriat.getprjlist",
+        api: 'mgop.kykj.houseexpropriat.getprjlist',
-        host: "https://mapi.zjzwfw.gov.cn/",
+        host: 'https://mapi.zjzwfw.gov.cn/',
-        dataType: "JSON",
+        dataType: 'JSON',
-        type: "POST",
+        type: 'POST',
         data: {
-          ticket: this.$route.query.ticket || this.ticket
+          ticket: this.$route.query.ticket || this.ticket,
         },
-        appKey: "es4b8zmz+2001833218+dehllx",
+        appKey: 'es4b8zmz+2001833218+dehllx',
-        onSuccess: data => {
+        onSuccess: (data) => {
-          console.log("首页数据", data);
+          console.log('首页数据', data);
           if (data.data && data.data.success == true) {
             this.data = data.data.data;
             // 埋点
             this.setZwUserAplus(this.data.idCard, this.data.userName);
           } else {
             var errorCodes = [6001, 6501];
-            // 跳转到政务系统
+            // 跳转到政务系统;
             if (errorCodes.indexOf(data.data.bizCode) > -1) {
               window.location.replace(
-                "https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode=fwzs"
+                'https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode=fwzs'
               );
-            } else console.log("用户无数据，不展示");
+            } else console.log('用户无数据，不展示');
           }
         },
-        onFail: err => {
+        onFail: (err) => {
-          console.log("用户无数据，不展示");
+          console.log('用户无数据，不展示');
-        }
+        },
       });
     },
     // 跳转项目详情
     gotoProject(type, id) {
       this.$router.push({
-        name: "projectSelect",
+        name: 'projectSelect',
         params: {
           type: type,
           ticket: this.$route.query.ticket || this.ticket,
-          prjId: id || this.data.prjList[0].prjId
+          prjId: id || this.data.prjList[0].prjId,
-        }
+        },
       });
     },
     // 加载项目数统计信息
@@ -361,68 +333,68 @@ export default {
     // 政策信息页面跳转
     pageJump(id) {
       this.$router.push({
-        name: "policyInfo",
+        name: 'policyInfo',
         params: { ticket: this.ticket, id: id },
       });
     },
     setZwUserAplus(Userid, userName) {
       // 设置用户信息埋点
       aplus_queue.push({
-        action: "aplus.setMetaInfo",
+        action: 'aplus.setMetaInfo',
-        arguments: ["_hold", "BLOCK"]
+        arguments: ['_hold', 'BLOCK'],
       });
       aplus_queue.push({
-        action: "aplus.setMetaInfo",
+        action: 'aplus.setMetaInfo',
-        arguments: ["_user_nick", userName] // this.userInfoData.username],
+        arguments: ['_user_nick', userName], // this.userInfoData.username],
       });
       aplus_queue.push({
-        action: "aplus.setMetaInfo",
+        action: 'aplus.setMetaInfo',
-        arguments: ["_user_id", Userid]
+        arguments: ['_user_id', Userid],
       });
       aplus_queue.push({
-        action: "aplus.setMetaInfo",
+        action: 'aplus.setMetaInfo',
-        arguments: ["_hold", "START"]
+        arguments: ['_hold', 'START'],
       });
     },
     setLocationAplus() {
       ZWJSBridge.onReady(() => {
-        console.log("初始化完成后，执行bridge方法");
+        console.log('初始化完成后，执行bridge方法');
         ZWJSBridge.getUserType()
           .then((result1) => {
-            console.log("getUserType():" + JSON.stringify(result1));
+            console.log('getUserType():' + JSON.stringify(result1));
-            console.log("result1.userType:" + result1.userType);
+            console.log('result1.userType:' + result1.userType);
             //经纬度
             ZWJSBridge.getLocation()
               .then((result2) => {
-                console.log("getLocation():" + JSON.stringify(result2));
+                console.log('getLocation():' + JSON.stringify(result2));
-                console.log("result2.longitude:" + result2.longitude);
+                console.log('result2.longitude:' + result2.longitude);
-                console.log("result2.latitude:" + result2.latitude);
+                console.log('result2.latitude:' + result2.latitude);
                 aplus_queue.push({
-                  action: "aplus.sendPV",
+                  action: 'aplus.sendPV',
                   arguments: [
                     {
-                      is_auto: false
+                      is_auto: false,
                     },
                     {
                       isMini: true,
-                      miniAppId: "2001833218", //'应用开发管理平台-应用 ID
+                      miniAppId: '2001833218', //'应用开发管理平台-应用 ID
-                      miniAppName: "房屋征收",
+                      miniAppName: '房屋征收',
                       long: result2.longitude,
                       lati: result2.latitude,
-                      userType: result1.userType
+                      userType: result1.userType,
-                    }
+                    },
-                  ]
+                  ],
                 });
               })
-              .catch(error => {
+              .catch((error) => {
                 console.log(error);
               });
           })
-          .catch(error => {
+          .catch((error) => {
             console.log(error);
           });
       });
-    }
+    },
-  }
+  },
 };
 </script>