修改地图及文物详情

src/components/EntranceIcon/index.vue

@@ -34,7 +34,7 @@ export default {
   align-items: center;
   .entrance-text {
     margin-right: 12px;
-    font-size: 14px;
+    font-size: 24px;
   }
   &:hover {
     .entrance-icon {

src/views/culturalRelic/Detail.vue

@@ -5,11 +5,11 @@
         <img src="@/assets/imgs/show/bg.png" alt="" class="main" />
       </div>
       <!-- <div class="mask"></div> -->
-      <div class="color">
+      <!-- <div class="color">
         <img src="@/assets/imgs/show/circle-bg.png" alt="" class="cb" />
         <img src="@/assets/imgs/show/river.png" alt="" class="river" />
         <img src="@/assets/imgs/show/circle.png" alt="" class="circle" />
-      </div>
+      </div> -->
     </div>
 
     <div class="wrapper wow animate__animated animate__fadeInUpBig">

src/views/home/components/CulturalRelic.vue

 <!-- -->
 <template>
   <div class="home-cr">
+    <div class="text wow animate__animated animate__fadeIn">文物</div>
     <div class="title wow animate__animated animate__fadeInUp">
       <!-- <div class="ch">每日推送</div>
       <div class="en">Daily Exhibition Push</div> -->
-      <div class="title-img">
+      <!-- <div class="title-img">
         <img src="@/assets/imgs/home-new/daily.png" alt="" />
-      </div>
+      </div> -->
       <div class="all" @click="handleToAll">
         <img src="@/assets/imgs/home-new/all.png" alt="" />
       </div>
     </div>
-    <div class="text wow animate__animated animate__fadeIn">文物</div>
+
     <div class="list wow animate__animated animate__zoomIn">
       <div
         class="list-item"
@@ -179,12 +180,12 @@ $blue: $themeColor;
     margin-bottom: 36px;
     margin-top: 40px;
     font-family: "Alibaba PuHuiTi";
-    font-size: 32px;
+    font-size: 48px;
     font-weight: bold;
   }
   .list {
     width: 100%;
-    // padding: 0 6%;
+    padding: 0 6%;
     height: 492px;
     display: flex;
     position: relative;
@@ -193,6 +194,7 @@ $blue: $themeColor;
         width: 280px;
         height: 280px;
         background-color: #a5b8d4;
+
         border-radius: 50%;
         display: flex;
         justify-content: center;
@@ -207,6 +209,8 @@ $blue: $themeColor;
         }
         &:hover {
           background-color: transparent;
+          background-image: url("@/assets/imgs/home-new/cr-bg.png");
+          background-size: contain;
         }
         & > .title {
           background-image: url("@/assets/imgs/home-new/title-bg.png");
@@ -227,7 +231,7 @@ $blue: $themeColor;
       &:nth-child(2),
       &:nth-child(3) {
         position: absolute;
-        left: 0;
+        left: 100px;
         .title {
           right: -80px;
         }
@@ -236,8 +240,9 @@ $blue: $themeColor;
         top: 0;
       }
       &:nth-child(2) {
-        top: calc(200px);
-        left: 450px;
+        top: calc(130px);
+
+        left: 570px;
       }
       &:nth-child(3) {
         top: calc(200px * 2 - 50px);
@@ -246,7 +251,7 @@ $blue: $themeColor;
       &:nth-child(5),
       &:nth-child(6) {
         position: absolute;
-        right: 0;
+        right: 100px;
         .title {
           left: -80px;
         }
@@ -255,8 +260,8 @@ $blue: $themeColor;
         top: 0;
       }
       &:nth-child(5) {
-        top: calc(240px);
-        right: 450px;
+        top: calc(220px);
+        right: 490px;
       }
       &:nth-child(6) {
         top: calc(240px * 2 - 50px);

src/views/home/components/Display.vue

@@ -125,11 +125,11 @@ export default {
 
   .title {
     color: #fff;
-    margin-top: 70px;
+    // margin-top: 10px;
     // margin-bottom: 90px;
     font-family: "Alibaba PuHuiTi";
     flex-basis: auto;
-    font-size: 32px;
+    font-size: 48px;
     font-weight: bold;
     margin-bottom: 20px;
   }

src/views/home/components/MuseumMap.vue

@@ -152,16 +152,28 @@ export default {
       });
       // 图标
       const series = seriesList.map((v) => {
+        // console.log("123", seriesList);
         return {
           type: "custom", //配置显示方式为用户自定义
           coordinateSystem: "geo",
           data: v.data,
           renderItem(params, api) {
+            console.log("params", v.data[params.dataIndex].type);
+            let type = v.data[params.dataIndex].type;
+            let url;
+            let width;
+            if (type == "红色文化博物馆") {
+              url = "ms-icon-red";
+              width = 8;
+            } else {
+              url = "ms-icon";
+              width=20
+            }
             //具体实现自定义图标的方法
             return {
               type: "image",
               style: {
-                image: require("@/assets/imgs/home-new/ms-icon.png"),
+                image: require(`@/assets/imgs/home-new/${url}.png`),
                 x: api.coord([
                   v.data[params.dataIndex].value[0],
                   v.data[params.dataIndex].value[1],
@@ -170,7 +182,7 @@ export default {
                   v.data[params.dataIndex].value[0],
                   v.data[params.dataIndex].value[1],
                 ])[1],
-                width: 20,
+                width:width
               },
             };
           },
@@ -197,7 +209,6 @@ export default {
                 faceImageUrl = `<div>
                 <div style="text-align:center;line-height:26px;color:#000;font-weight:bold">${item.name}
                 <div/>
-            
                 </div>`;
                 that.curMuseum = item;
                 return;
@@ -205,26 +216,6 @@ export default {
             });
             return faceImageUrl;
           },
-          // formatter: function (a) {
-          //   let faceImageUrl = "";
-          //   that.museumList.forEach((item) => {
-          //     if (
-          //       item.longitude &&
-          //       item.latitude &&
-          //       item.longitude == a.value[0] &&
-          //       item.latitude == a.value[1]
-          //     ) {
-          //       faceImageUrl = `<div>
-          //       <div style="text-align:center;line-height:26px;color:#000;font-weight:bold">${item.name}
-          //       <div/>
-          //       <img width="400px" src="${item.faceImagePressUrl}" />
-          //       </div>`;
-          //       that.curMuseum = item;
-          //       return;
-          //     }
-          //   });
-          //   return faceImageUrl;
-          // },
         },
         // visualMap: {
         //   min: 0,