修改样式

src/views/dataBoard/cpts/Tabs.vue

@@ -62,6 +62,8 @@ export default {
     line-height: 30px;
     padding-left: 11px;
     opacity: .4;
+    min-width: 185px;
+    text-align: center;
     &.cur {
       background: url("@/assets/images/overview/tab_cur.png") no-repeat;
       opacity: 1;

src/views/dataBoard/cpts/personnel/index.vue

@@ -1,43 +1,55 @@
 <template>
   <div>
-    <el-row>
+    <el-row :gutter="10">
-      <el-col :span="10">
+      <el-col :span="11">
-        <data-title title="居民档案">
+        <div class="bgImg">
+          <data-title text="居民档案">
             <div style="width: 53%; text-align: right">
               <a @click="popupShow = true">详情></a>
             </div>
           </data-title>
           <MatterDetails/>
-        <data-title title="家庭关系" />
+        </div>
+        <div class="bgImg">
+          <data-title text="家庭关系"/>
           <Family/>
+        </div>
       </el-col>
-      <el-col :span="13" :offset="1">
+      <el-col :span="13">
-        <data-title title="居民各项业务记录" />
+        <div class="bgImg">
+
+          <data-title text="居民各项业务记录"/>
           <BusinessRecords/>
-        <el-row>
+        </div>
+        <el-row :gutter="10">
           <el-col :span="12">
-            <data-title title="享受服务次数统计" />
+            <div class="bgImg">
+
+              <data-title text="享受服务次数统计"/>
               <div style="height: 12px"></div>
               <EnjoyService/>
+            </div>
           </el-col>
-          <el-col :span="11" :offset="1">
+          <el-col :span="12">
-            <data-title title="积分记录" />
+            <div class="bgImg">
+              <data-title text="积分记录"/>
               <PointsRecord/>
+            </div>
           </el-col>
         </el-row>
       </el-col>
     </el-row>
     <resi-details
-      @close="popupShow = false"
-      :resi-id="resId"
-      :popupShow="popupShow"
         v-if="popupShow"
+        :popupShow="popupShow"
+        :resi-id="resId"
+        @close="popupShow = false"
     />
   </div>
 </template>
 
 <script>
-import dataTitle from "@/views/dataBoard/renfang/visualizing/components/dataTitle.vue";
+import dataTitle from "@/views/dataBoard/satisfactionEval/components/Title/index.vue";
 import MatterDetails from "./modules/MatterDetails";
 import Family from "./modules/Family";
 import BusinessRecords from "./modules/BusinessRecords";
@@ -75,20 +87,28 @@ export default {
 };
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .sub-title {
-  background: url("@/assets/images/manyidu/icon_fk.png") no-repeat left center;
   font-size: 18px;
   font-weight: 500;
-  color: #ffffff;
   line-height: 22px;
-  padding-left: 26px;
   margin-bottom: 20px;
+  padding-left: 26px;
+  color: #ffffff;
+  background: url("@/assets/images/manyidu/icon_fk.png") no-repeat left center;
 }
+
 .breadcrumb {
   margin-bottom: 25px;
 }
+
 a:hover {
   cursor: pointer;
 }
+
+.bgImg {
+  margin-bottom: 7px;
+  background: url('@/assets/images/shuju/overview/box-bg.png') no-repeat;
+  background-size: 100% 100%;
+}
 </style>

src/views/dataBoard/cpts/personnel/modules/BusinessRecords.vue

@@ -105,8 +105,8 @@ export default {
 <style scoped lang="scss">
 .business-records {
   margin-top: 12px;
-  margin-bottom: 25px;
+  margin-bottom: 10px;
-  height: 392px;
+  height: 408px;
 }
 .table {
   /deep/ .el-table td,

src/views/dataBoard/cpts/personnel/modules/EnjoyService.vue

@@ -1,6 +1,6 @@
 <template>
-  <div className="event-statistics">
+  <div class="event-statistics">
-    <div id="enjoyServiceChart" style="height: 350px"></div>
+    <div id="enjoyServiceChart" style="height: 360px"></div>
   </div>
 </template>
 

src/views/dataBoard/cpts/personnel/modules/Family.vue

@@ -1,10 +1,12 @@
 <template>
+  <div class="family-con">
+
     <div class="family">
       <div
-      class="tag"
-      @click="cheackCrrent(item)"
           v-for="item in data"
           :key="item.id"
+          class="tag"
+          @click="cheackCrrent(item)"
       >
         <div>
           {{ item.name }}
@@ -15,7 +17,8 @@
       </div>
       <div style="padding-top: 220px; margin-left: 148px">
         <div class="user-name">{{ info.name }}</div>
-      <div class="user-gx" v-if="info.houseHolderRel">（户主）</div>
+        <div v-if="info.houseHolderRel" class="user-gx">（户主）</div>
+      </div>
     </div>
   </div>
 </template>
@@ -110,97 +113,117 @@ export default {
 };
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
+.family-con {
+  padding: 40px 0;
+}
+
 .family {
+  position: relative;
   width: 464px;
   height: 340px;
+  margin: 0 auto;
   background: url("@/assets/images/manyidu/gx_bg.png") no-repeat center;
-  position: relative;
-  margin: 40px auto;
 }
+
 .tag {
   font-size: 14px;
   font-weight: 400;
-  color: #ffffff;
   line-height: 22px;
-  padding: 18px 24px;
-  box-sizing: border-box;
   position: absolute;
-  background: url("@/assets/images/manyidu/gx_big.png") no-repeat center;
+  box-sizing: border-box;
-  background-size: 100% 100%;
   width: 180px;
   min-height: 80px;
+  padding: 18px 24px;
+  color: #ffffff;
+  background: url("@/assets/images/manyidu/gx_big.png") no-repeat center;
+  background-size: 100% 100%;
+
   &:nth-of-type(1) {
-    left: -14px;
     top: -24px;
+    left: -14px;
   }
+
   &:nth-of-type(2) {
-    right: -14px;
     top: -24px;
+    right: -14px;
   }
+
   &:nth-of-type(3) {
-    left: -24px;
     bottom: -40px;
+    left: -24px;
   }
+
   &:nth-of-type(4) {
-    right: -24px;
     top: 294px;
+    right: -24px;
   }
+
   &:nth-of-type(5) {
-    left: -94px;
     top: 58px;
+    left: -94px;
   }
+
   &:nth-of-type(6) {
-    right: -94px;
     top: 58px;
+    right: -94px;
   }
+
   &:nth-of-type(7) {
-    left: -124px;
     top: 134px;
+    left: -124px;
   }
+
   &:nth-of-type(8) {
-    right: -124px;
     top: 134px;
+    right: -124px;
   }
+
   &:nth-of-type(9) {
-    left: -104px;
     top: 214px;
+    left: -104px;
   }
+
   &:nth-of-type(10) {
-    right: -104px;
     top: 214px;
+    right: -104px;
   }
+
   &:nth-of-type(11) {
     right: 144px;
     bottom: -60px;
   }
+
   &:nth-of-type(12) {
-    right: 144px;
     top: -44px;
+    right: 144px;
   }
 }
+
 .tag:hover {
   cursor: pointer;
 }
+
 .user-name {
-  width: 174px;
-  text-align: center;
-  height: 17px;
-  font-size: 18px;
   font-family: PingFang SC;
+  font-size: 18px;
   font-weight: bold;
-  color: #ffffff;
   line-height: 22px;
+  width: 174px;
+  height: 17px;
   margin-top: -12px;
+  text-align: center;
+  color: #ffffff;
 }
+
 .user-gx {
-  width: 174px;
-  text-align: center;
-  height: 17px;
-  font-size: 16px;
   font-family: PingFang SC;
+  font-size: 16px;
   font-weight: bold;
-  color: #ffffff;
   line-height: 32px;
+  width: 174px;
+  height: 17px;
+  text-align: center;
+  color: #ffffff;
 }
 </style>

src/views/dataBoard/cpts/personnel/modules/MatterDetails.vue

@@ -1,30 +1,38 @@
-
 <template>
+  <div class="matter-details-con">
     <div class="matter-details">
       <div class="user-img">
-      <img src="@/assets/images/manyidu/dn_bg1.png" alt="" />
+        <img alt="" src="@/assets/images/manyidu/dn_bg1.png"/>
         <div class="user-name">{{ data.name }}</div>
       </div>
       <div class="tags">
         <!-- <div class="tag" v-if="data.name">{{ data.name }}</div> -->
-      <div class="tag red" v-if="data.riskyFlag == '1'">满意度风险人员</div>
+        <div v-if="data.riskyFlag == '1'" class="tag red">满意度风险人员</div>
-      <div class="tag small" v-if="data.gender">
+        <div v-if="data.gender" class="tag small">
           {{ genderArr[data.gender] }}
         </div>
-      <div :class="[data.gridName.length > 8 ? 'smallFont' : '', 'tag']" v-if="data.gridName">{{ data.gridName }}</div>
+        <div v-if="data.gridName" :class="[data.gridName.length > 8 ? 'smallFont' : '', 'tag']">{{
-      <div :class="[data.idNum.length > 8 ? 'smallFont' : '', 'tag', 'small']" v-if="data.idNum">
+            data.gridName
+          }}
+        </div>
+        <div v-if="data.idNum" :class="[data.idNum.length > 8 ? 'smallFont' : '', 'tag', 'small']">
           {{ $sensitive(data.idNum, 0, 14) }}
         </div>
-      <div :class="[data.mobile.length > 8 ? 'smallFont' : '', 'tag']" v-if="data.mobile">
+        <div v-if="data.mobile" :class="[data.mobile.length > 8 ? 'smallFont' : '', 'tag']">
           {{ $sensitive(data.mobile, 3, 7) }}
         </div>
-      <div :class="[data.householdSituation.length > 8 ? 'smallFont' : '', 'tag', 'small']" v-if="data.householdSituation">
+        <div v-if="data.householdSituation"
+             :class="[data.householdSituation.length > 8 ? 'smallFont' : '', 'tag', 'small']">
           {{ data.householdSituation }}
         </div>
-      <div :class="[data.birthday.length > 8 ? 'smallFont' : '', 'tag']" v-if="data.birthday">
+        <div v-if="data.birthday" :class="[data.birthday.length > 8 ? 'smallFont' : '', 'tag']">
           {{ data.birthday }}
         </div>
-      <div :class="[data.fullName.length > 8 ? 'smallFont' : '', 'tag']" v-if="data.fullName">{{ data.fullName }}</div>
+        <div v-if="data.fullName" :class="[data.fullName.length > 8 ? 'smallFont' : '', 'tag']">{{
+            data.fullName
+          }}
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -65,86 +73,97 @@ export default {
 };
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
+.matter-details-con {
+  padding: 12px 0 36px;
+}
 .matter-details {
+  position: relative;
   width: 607px;
   height: 372px;
+  margin: 0 auto;
   background: url("@/assets/images/manyidu/dn_bg2.png") no-repeat center bottom;
-  position: relative;
-  margin: 12px auto 60px;
 }
+
 .user-img {
   position: absolute;
-  left: calc(50% - 87px);
   top: calc(50% - 37px);
+  left: calc(50% - 87px);
 }
+
 .tag {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 16px;
   position: absolute;
-  background: url("@/assets/images/manyidu/dn_big.png") center no-repeat;
-  width: 108px;
-  height: 107px;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 14px;
-  font-weight: 400;
-  color: #ffffff;
-  line-height: 16px;
   box-sizing: border-box;
+  width: 108px;
+  height: 107px;
   padding: 24px;
   text-align: center;
   word-break: break-all;
+  color: #ffffff;
+  background: url("@/assets/images/manyidu/dn_big.png") center no-repeat;
+
   &.small {
     width: 89px;
     height: 89px;
-    background: url("@/assets/images/manyidu/dn_small.png") center no-repeat;
     padding: 16px;
+    background: url("@/assets/images/manyidu/dn_small.png") center no-repeat;
   }
+
   &.red {
-    background: url("@/assets/images/manyidu/dn_red.png") center no-repeat;
     color: #fe0000;
+    background: url("@/assets/images/manyidu/dn_red.png") center no-repeat;
   }
 
   &:nth-of-type(1) {
-    left: 42px;
     bottom: 185px;
+    left: 42px;
   }
+
   &:nth-of-type(2) {
-    left: 499px;
     bottom: 157px;
+    left: 499px;
   }
 
   &:nth-of-type(3) {
-    left: 194px;
     bottom: 245px;
+    left: 194px;
   }
+
   &:nth-of-type(4) {
-    left: 384px;
     bottom: 240px;
+    left: 384px;
   }
 
   &:nth-of-type(5) {
-    left: 0;
     bottom: 15px;
+    left: 0;
   }
 
   &:nth-of-type(6) {
-    left: 453px;
     bottom: 10px;
+    left: 453px;
   }
 }
+
 .smallFont {
   font-size: 10px;
 }
+
 .user-name {
-  width: 174px;
-  text-align: center;
-  height: 17px;
-  font-size: 18px;
   font-family: PingFang SC;
+  font-size: 18px;
   font-weight: bold;
-  color: #ffffff;
   line-height: 22px;
+  width: 174px;
+  height: 17px;
   margin-top: -12px;
+  text-align: center;
+  color: #ffffff;
 }
 </style>

src/views/dataBoard/cpts/personnel/modules/PointsRecord.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="integral">
     <!-- <div class="enjoy-service">
       <div class="enjoy-service-item" v-for="(item, index) in data">
         <div class="num">+{{ item.classificationNum }}</div>
@@ -74,4 +74,7 @@ export default {
     }
   }
 }
+.integral {
+  height: 420px;
+}
 </style>

src/views/dataBoard/overview/components/MapDialog/DemandList.vue

@@ -4,7 +4,7 @@
 
     <div v-if="type === '1'" class="table">
       <el-table v-loading="loading" :data="list" element-loading-background="rgba(0, 0, 0, 0.3)"
-                height="270px">
+                height="336px">
         <el-table-column label="需求类别" prop="categoryAllName"/>
         <el-table-column label="需求内容" prop="content"/>
         <el-table-column label="需求人" prop="reportUserName"/>
@@ -44,7 +44,7 @@
 
     <div v-if="type === '2'" class="table">
       <el-table v-loading="loading" :data="list" element-loading-background="rgba(0, 0, 0, 0.3)"
-                height="270px">
+                height="336px">
         <el-table-column label="需求类别" prop="commonServiceTypeName" show-overflow-tooltip/>
         <el-table-column label="需求标题" prop="title" show-overflow-tooltip/>
         <el-table-column label="指派服务" prop="assignFlag" width="100">

src/views/dataBoard/overview/components/jdjs.vue

@@ -208,7 +208,7 @@ export default {
             return res;
           },
         },
-        dataZoom: [
+/*        dataZoom: [
           {
             "type": "slider",
             "start": 0,
@@ -219,7 +219,7 @@ export default {
             "showDataShadow": false,
             "borderColor": "transparent"
           }
-        ],
+        ],*/
         grid: {
           top: '18%',
           left: '2%',
@@ -317,7 +317,7 @@ export default {
           {
             name: '',
             type: 'bar',
-            barWidth: 50,
+            barWidth: 40,
             barGap: '-60%',
             data: barArray,
             itemStyle: {

src/views/dataBoard/renfang/cpts/map-right.vue

@@ -38,7 +38,8 @@ export default {
 <style lang="scss" scoped>
 .map-right {
   position: absolute;
-  top: calc(50% - 184px);
+  //top: calc(50% - 184px);
+  bottom: 0;
   right: 20px;
   display: flex;
   align-items: center;

src/views/dataBoard/renfang/cpts/rkfxPieOption.js

@@ -1,4 +1,5 @@
 import * as echarts from "echarts";
+
 export function pieOption() {
     const center = ["50%", "170px"];
     return {
@@ -23,7 +24,7 @@ export function pieOption() {
                 type: "pie",
                 radius: ["50%", "80%"],
                 center: ["50%", "50%"],
-				roseType: "area",
+                // roseType: "area",
                 itemStyle: {
                     borderRadius: 1,
                 },
@@ -35,18 +36,31 @@ export function pieOption() {
                         length2: 0
                     }
                 },
+                emphasis: {
                     label: {
-					normal: {
                         show: true,
+                        fontSize: '14',
+                        fontWeight: 'normal'
+                    }
+                },
+                label: {
+                    normal: {
+                        show: false,
+                        position: "center",
                         color: "#FFFFFF",
-						formatter: '{name|{b}}\n{rate|{d}%}',
+                        formatter: '{name|{c}}\n{rate|{b}}',
                         fontSize: 14,
                         // distanceToLabelLine: -60,
                         rich: {
                             name: {
+                                fontSize: 30,
+                                fontWeight: "bold",
+                                color: "#7FCEFF",
                                 padding: [0, 0, 2, 0],
                             },
                             rate: {
+                                fontSize: 14,
+                                color: "#A3B9DA",
                                 padding: [2, 0, 0, 0],
                             }
                         }

src/views/dataBoard/renfang/index.vue

@@ -115,15 +115,8 @@
 
         <div class="m-search">
           <div class="btn" @click="searchModule.displayedCard = true">
-            <img
+            <img src="@/assets/images/renfang/search_border.png" class="border" alt="">
-                class="btn-bg"
+            <img src="@/assets/images/renfang/search_icon.png" class="icon" alt="">
-                src="~@/assets/images/shuju/renfang/index/search/btn-bg.png"
-            />
-            <img
-                class="btn-bg-hover"
-                src="~@/assets/images/shuju/renfang/index/search/btn-bg-hover.png"
-            />
-            <span>点击搜索</span>
           </div>
 
           <div v-show="searchModule.displayedCard" class="card">
@@ -828,4 +821,37 @@ export default {
 .map-bottom {
   margin: 0 17px;
 }
+.m-search {
+  top: 595px!important;
+  .btn {
+    position: relative;
+    width: 56px;
+    height: 56px;
+    margin-left: 12px;
+    .border {
+      width: 56px;
+      height: 56px;
+      animation: autobiography 2s infinite;
+      //animation-iteration-count: infinite;
+      animation-timing-function: linear;
+      position: absolute;
+      left: 0;
+      top: 0;
+    }
+    .icon {
+      width: 56px;
+      height: 56px;
+    }
+  }
+}
+
+@keyframes autobiography {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 </style>

src/views/dataBoard/satisfactionEval/components/Title/index.vue

@@ -29,7 +29,7 @@ export default {
   // width: 100%;
   height: 40px;
   background: url(@/assets/images/shuju/overview/title-bg.png) no-repeat;
-  background-size: 100% 100%;
+  background-size: auto  100%;
   padding: 8px 16px 8px 45px;
   display: flex;
   align-items: center;

src/views/dataBoard/satisfactionEval/components/Title/titleSmall.vue

@@ -1,10 +1,9 @@
-
 <template>
-    <div class="title" :class="noBg ? 'no-bg' : ''">
+  <div :class="noBg ? 'no-bg' : ''" class="title">
-      <span class="text">
+    <div class="text">
       <span class="txt">{{ text }}</span>
-      </span>
       <slot name="time"></slot>
+    </div>
     <slot name="info"></slot>
   </div>
 </template>
@@ -25,40 +24,33 @@
 };
 </script>
 
-  <style scoped lang="scss">
+<style lang="scss" scoped>
 .title {
   // width: 100%;
-    height: 30px;
-    background: url(../../../../../assets/images/shuju/overview/title-small-bg.png) no-repeat;
-    background-size: 100% 100%;
-    padding: 7px 0px 5px 34px;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  height: 30px;
+  padding: 7px 0px 5px 34px;
+  background: url(@/assets/images/shuju/overview/title-small-bg.png) no-repeat;
+  //background-size: 100% 100%;
 
   .text {
-      position: relative;
+    font-family: PingFang SC;
     font-size: 18px;
-    //   font-family: HYShuYuanHeiJ;
     font-weight: 400;
-        color: #fff;
-      .txt {
-        font-family: PingFang SC;
-        -webkit-background-clip: text;
-        // -webkit-text-fill-color: transparent;
     position: relative;
     z-index: 2;
-      }
+    color: #fff;
-  
+    -webkit-background-clip: text;
-      .text-shadow {
+    display: flex;
-        top: 4px;
+    align-items: center;
-        left: 3px;
+    .txt {
-        position: absolute;
+      margin-right: 20px;
-        color: #020f21;
-        white-space: nowrap;
     }
   }
 }
+
 .no-bg {
   background: none;
 }

src/views/dataBoard/satisfactionEval/index.vue

@@ -187,6 +187,6 @@ export default {
 }
 
 /deep/ .title {
-  padding-left: 58px;
+  //padding-left: 58px;
 }
 </style>

src/views/dataBoard/satisfactionEval/modules/PotentialPeople/index.vue

@@ -229,7 +229,7 @@ export default {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 16px 36px;
+  padding: 16px 20px;
 
   .potential-people-item {
     flex: 1;
@@ -302,7 +302,8 @@ export default {
 .number-list {
   display: flex;
   justify-content: space-between;
-  padding: 20px 15px 15px 8px;
+  width: 100%;
+  padding: 20px 0px 15px;
 
   .number-item {
     display: flex;

src/views/dataBoard/satisfactionEval/modules/TypesOfDissatisfaction/index.vue

@@ -238,7 +238,7 @@ export default {
             data: legendName,
         },
         radar: {
-          center: ["25%", "55%"],
+          center: ["35%", "55%"],
           radius: "60%",
           startAngle: 90,
           splitNumber: 5,
@@ -252,7 +252,7 @@ export default {
           },
           triggerEvent: true,
           axisLine: {
-            show: true,
+            show: false,
             lineStyle: {
               color: "transparent",
             },