gx

src/view/education.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="module">
-
-      <div class="displayFlex">
+    <div class="displayFlex left_bg">
       <div class="flex1">
         <div class="yd_title">
           <span class="text">助乡兴趣点</span>
@@ -83,12 +82,7 @@
         </div>
         <div class="visitLog">
           <div class="visitLog_item">
-              <img
-                src="../assets/img_02.png"
-                width="48px"
-                height="51px"
-                alt=""
-              />
+            <img src="../assets/img_02.png" width="48px" height="51px" alt="" />
             <div class="visitLog_item_box">
               <h4>故居走访</h4>
               <p>走访人员：陈思思</p>
@@ -97,12 +91,7 @@
             <span class="check">点击查看</span>
           </div>
           <div class="visitLog_item">
-              <img
-                src="../assets/img_02.png"
-                width="48px"
-                height="51px"
-                alt=""
-              />
+            <img src="../assets/img_02.png" width="48px" height="51px" alt="" />
             <div class="visitLog_item_box">
               <h4>节日走访</h4>
               <p>走访人员：陈思思</p>
@@ -111,12 +100,7 @@
             <span class="check">点击查看</span>
           </div>
           <div class="visitLog_item">
-              <img
-                src="../assets/img_02.png"
-                width="48px"
-                height="51px"
-                alt=""
-              />
+            <img src="../assets/img_02.png" width="48px" height="51px" alt="" />
             <div class="visitLog_item_box">
               <h4>新年走访</h4>
               <p>走访人员：陈思思</p>
@@ -148,13 +132,11 @@
         <eBubble></eBubble>
       </div>
     </div>
-     
-  
   </div>
 </template>
 
 <script setup>
-// import eBubble from "./echarts/bubble.vue";
+import eBubble from "./echarts_education/bubble.vue";
 // import ePie from "./echarts/pie.vue";
 // import ePie2 from "./echarts/pie2.vue";
 // import eGraph from "./echarts/graph.vue";
@@ -167,7 +149,7 @@
   display: flex;
   flex-direction: column;
   // flex: 1;
-  width: 33.333333333%;
+  width: 30%;
 }
 
 .flex1 {
@@ -175,12 +157,24 @@
   // padding: 0 28px;
   box-sizing: border-box;
 }
+
 .module {
   display: flex;
   width: 100%;
   height: calc(100vh - 112px);
 }
 
+.left_bg {
+  width: 642px;
+  // height: 100%;
+  box-sizing: border-box;
+  padding-left: 50px;
+  margin-right: 28px;
+  background-image: url(@/assets/images/left_bg.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
 .yd_title {
   background-image: url(@/assets/img_04.png);
   background-repeat: no-repeat;
@@ -189,6 +183,7 @@
   width: 100%;
   height: 36px;
   position: relative;
+
   .text {
     font-size: 16px;
     font-family: SourceHanSansCN;
@@ -205,6 +200,7 @@
   flex-direction: row;
   flex-wrap: wrap;
   padding-top: 22px;
+
   .basicInformation_item {
     flex: 0 0 50%;
     padding: 0 2px;
@@ -213,10 +209,12 @@
     box-sizing: border-box;
     display: flex;
     align-items: center;
+
     .icon {
       width: 79px;
       height: 47px;
     }
+
     .right {
       margin-left: 4px;
 
@@ -226,6 +224,7 @@
         background-repeat: no-repeat;
         background-position: bottom;
         margin-bottom: 4px;
+
         span {
           font-size: 12px;
           font-weight: 400;
@@ -234,6 +233,7 @@
           margin-left: 2px;
         }
       }
+
       p {
         font-size: 16px;
         font-weight: bold;
@@ -253,12 +253,15 @@
     margin-top: 16px;
     padding: 15px 8px;
     box-sizing: border-box;
+
     img {
       display: inline-block;
       margin-right: 10px;
     }
+
     .visitLog_item_box {
       flex: auto;
+
       h4 {
         font-size: 18px;
         font-family: MicrosoftYaHei;
@@ -266,6 +269,7 @@
         color: #0096ff;
         margin-bottom: 2px;
       }
+
       p {
         font-size: 12px;
         font-family: SourceHanSansCN;
@@ -274,6 +278,7 @@
         margin-top: 6px;
       }
     }
+
     .check {
       font-size: 12px;
       font-family: SourceHanSansCN;
@@ -286,6 +291,7 @@
 
 .history {
   padding-top: 12px;
+
   p {
     margin-top: 12px;
     font-size: 12px;
@@ -301,6 +307,7 @@
   align-items: center;
   justify-content: center;
   margin: 12px 0 20px;
+
   span {
     text-align: center;
     background: rgba(0, 89, 130, 0.73);
@@ -314,9 +321,11 @@
     margin: 0 10px;
   }
 }
+
 .property {
   display: flex;
   padding: 14px 0 10px;
+
   .property_box {
     background-image: url(@/assets/img_05.png);
     background-size: 100% 100%;
@@ -325,12 +334,14 @@
     height: 91px;
     margin: 0 12px;
     text-align: center;
+
     h5 {
       font-size: 14px;
       font-weight: 400;
       color: #ffffff;
       margin: 9px 0 16px;
     }
+
     p {
       font-size: 21px;
       font-weight: bold;
@@ -338,6 +349,7 @@
     }
   }
 }
+
 .activity {
   h5 {
     font-size: 14px;
@@ -347,9 +359,11 @@
     border-bottom: 2px solid rgba(0, 164, 250, 1);
     margin-bottom: 17px;
   }
+
   .activity_content {
     margin: 0 -6px 12px;
     display: flex;
+
     .activity_box {
       width: 50%;
       display: inline-block;
@@ -357,6 +371,7 @@
       box-sizing: border-box;
       background-color: rgba(15, 28, 54, 1);
       padding: 12px 12px 19px;
+
       p {
         font-size: 14px;
         font-weight: 400;
@@ -367,26 +382,31 @@
     }
   }
 }
+
 .monitor {
   .monitor_box {
     display: flex;
     padding: 8px 0;
     border-bottom: 2px solid rgba(255, 255, 255, 0.67);
+
     img {
       width: 115px;
       height: 84px;
       margin-right: 21px;
     }
+
     .monitor_box_text {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
+
       h4 {
         font-size: 14px;
         font-weight: 400;
         color: #ffffff;
         line-height: 20px;
       }
+
       p {
         font-size: 14px;
         font-weight: 400;