首页文物推荐完善

src/components/NavBar/index.vue

@@ -109,7 +109,7 @@ export default {
           path: "/virtual",
         },
         {
-          name: "布展",
+          name: "展览",
           path: "/display",
         },
         {
@@ -151,10 +151,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-a {
+.tab-item {
+  a {
     color: #fff;
     text-decoration: none;
+  }
 }
+
 .nav {
   height: 100px;
   width: 100%;
@@ -213,16 +216,24 @@ a {
 }
 
 .el-dropdown-menu {
-  background-color: transparent;
+  background-color: #fff;
+  // border: 1px solid #8a919f;
 }
 .el-dropdown-menu__item {
   background-color: transparent;
-  color: #fff;
+  // color: #fff;
+  color: #8a919f;
+  a {
+    text-decoration: none;
+    color: #8a919f;
+  }
 }
 
 .el-dropdown-menu__item:focus,
 .el-dropdown-menu__item:not(.is-disabled):hover {
-  background-color: rgba(255, 255, 255, 0.2);
-  color: #fff;
+  // background-color: rgba(255, 255, 255, 0.2);
+  // color: #fff;
+  background-color: #f8f8f8;
+  color: #8a919f;
 }
 </style>
\ No newline at end of file

src/views/display/Detail.vue

@@ -127,7 +127,7 @@
           displayDetail.exhibitionUnits.length > 0
         "
       >
-        <CustomTitle text="布展单元" />
+        <CustomTitle text="展览单元" />
         <el-row :gutter="20">
           <el-col :span="8">
             <!-- 只能单开 unique-opened -->

src/views/home/components/CulturalRelic.vue

@@ -7,33 +7,38 @@
     </div>
     <div class="text">文物</div>
     <div class="list">
+      <!-- 1231
+      <el-carousel>
+        <el-carousel-item v-for="(item,index) in length" :key="index">
+         {{item}}
+        </el-carousel-item>
+      </el-carousel> -->
       <el-carousel indicator-position="outside" :autoplay="false" arrow="never">
-        <el-carousel-item>
+        <el-carousel-item v-for="(item, index) in list" :key="index">
           <el-row :gutter="14">
-            <el-col
-              :span="6"
-              v-for="item in list1"
-              :key="item.crId"
-              class="container"
-            >
-              <img :src="item.faceImageUrl" alt="" width="100%" />
+            <el-col :span="6" v-for="i in item" :key="i.crId" class="container">
+              <img :src="i.faceImageUrl" alt="" width="100%" />
+              <div class="info" v-show='i.faceImageUrl'>
+                <div class="name">{{ i.name }}</div>
+                <div class="sourceWay">{{ i.sourceWay }}</div>
+              </div>
             </el-col>
           </el-row>
         </el-carousel-item>
-        <el-carousel-item>
-          <el-row :gutter="14">
+      </el-carousel>
+    </div>
+
+    <!-- <el-row v-if="list.length < 9 && list.length > 0" :gutter="14">
       <el-col
-              :span="6"
-              v-for="item in list2"
-              :key="item.crId"
+        :span="24 / list.length"
         class="container"
+        v-for="item in list"
+        :key="item.crId"
       >
-              <img :src="item.faceImageUrl" alt="" width="100%" />
+
+        <el-image :src="item.faceImageUrl" style="width: 100%; height: 100%" />
       </el-col>
-          </el-row>
-        </el-carousel-item>
-      </el-carousel>
-    </div>
+    </el-row>  -->
   </div>
 </template>
 
@@ -42,18 +47,44 @@ import { getRecommendCr } from "@/api/culturalRelic";
 export default {
   data() {
     return {
-      list1: [],
-      list2: [],
+      list: [],
+      length: "",
     };
   },
-  mounted() {
+  created() {
     this.loadList();
   },
+  // watch: {
+  //   list: {
+  //     handler: function (value) {
+  //       console.log(value);
+  //       this.list = value;
+  //     },
+  //     immediate: true,
+  //     deep: true,
+  //   },
+  // },
   methods: {
     async loadList() {
       let res = await getRecommendCr();
-      this.list1 = res.data.slice(0, 8);
-      this.list2 = res.data.slice(-8);
+      if (res.data.length > 8) {
+        this.length =
+          res.data.length % 8 == 0
+            ? res.data.length / 8
+            : Math.floor(res.data.length / 8) + 1;
+        for (let i = 0; i < this.length; i++) {
+          let data = [];
+          if (i == length - 1) {
+            data = res.data.slice(8 * i, res.data.length);
+          } else {
+            data = res.data.slice(8 * i, (i + 1) * 8);
+          }
+          this.$set(this.list, i, data);
+        }
+        this.$set(this, "list", this.list);
+      } else {
+        this.list = res.data;
+      }
     },
   },
 };
@@ -100,16 +131,24 @@ export default {
     height: 226px;
     margin-bottom: 40px;
     cursor: pointer;
+    position: relative;
     img {
       width: 100%;
       height: 100%;
     }
+    .info{
+      position: absolute;
+      right: 20px;
+      bottom: 10px;
+      font-family: Lisu;
+      color: #fff;
+    }
   }
 }
 ::v-deep .el-carousel__container {
   height: 492px;
 }
-.el-carousel--horizontal{
+.el-carousel--horizontal {
   overflow: hidden;
 }
 </style>

src/views/home/components/Display.vue

@@ -3,7 +3,7 @@
   <div class="home-display">
     <div class="title">展览</div>
     <transition name="el-fade-in-linear">
-      <div class="wrapper" v-show="currentItem.exhibitionId">
+      <div class="wrapper" v-show="currentItem">
         <div class="content">
           <div class="content-name">{{ currentItem.title }}</div>
           <div class="content-intro">
@@ -17,12 +17,12 @@
         <div class="pagination">
           <ul>
             <li
-              v-for="(item, index) in [1, 2, 3, 4]"
+              v-for="(item, index) in list"
               :key="index"
-              :class="currentPage == item ? 'active' : ''"
+              :class="currentItem == item ? 'active' : ''"
               @click="handleChangePage(item)"
             >
-              {{ item }}
+              {{ index + 1 }}
             </li>
           </ul>
         </div>
@@ -65,7 +65,7 @@ export default {
   data() {
     return {
       list: [],
-      currentPage: 1,
+      // currentPage: 1,
       currentItem: {},
     };
   },
@@ -79,10 +79,11 @@ export default {
       this.currentItem = this.list[0];
     },
     handleChangePage(page) {
-      this.currentPage = page;
+      debugger;
+      // this.currentPage = page;
       // debugger
-      this.currentItem = null;
-      this.currentItem = this.list[page - 1];
+      // this.currentItem = null;
+      this.currentItem = page;
     },
   },
 };

src/views/home/components/MuseumMap.vue

@@ -39,7 +39,8 @@ export default {
     };
   },
   mounted() {
-    // this.changeOptions();
+    echarts.registerMap("guizhou", guizhou);
+    this.changeOptions("guizhou");
     this.$nextTick(() => {
       this.init();
     });
@@ -66,9 +67,7 @@ export default {
         }
       });
       // 图标
-      console.log("seriesList", seriesList);
       const series = seriesList.map((v) => {
-        console.log("v", v);
         return {
           type: "custom", //配置显示方式为用户自定义
           coordinateSystem: "geo",
@@ -92,10 +91,6 @@ export default {
           },
         };
       });
-      console.log("series", series);
-      // debugger;
-      // options
-
       this.distributionOptions = {
         tooltip: {
           // 提示框组件
@@ -114,7 +109,11 @@ export default {
                 item.longitude == a.value[0] &&
                 item.latitude == a.value[1]
               ) {
-                faceImageUrl = `<img width="200px" src="${item.faceImageUrl}" />`;
+                faceImageUrl = `<div>
+                <div style="text-align:center;line-height:26px;color:#000;font-weight:bold">${item.name}
+                <div/>
+                <img width="400px" src="${item.faceImageUrl}" />
+                </div>`;
                 that.curMuseum = item;
                 return;
               }
@@ -156,42 +155,73 @@ export default {
           // ],
           label: {
             normal: {
-              //静态的时候展示样式
-              show: true, //是否显示地图省份得名称
+              show: true,
               textStyle: {
                 color: "#fff",
-                fontSize: 10,
-                fontFamily: "Arial",
               },
             },
             emphasis: {
-              // 高亮状态下的样式
-              //动态展示的样式
+              textStyle: {
                 color: "#fff",
-              shadowOffsetX: 0,
-              shadowOffsetY: 0,
-              shadowBlur: 20,
-              borderWidth: 0,
-              shadowColor: "rgba(0, 0, 0, 0.5)",
               },
             },
+          },
+
           itemStyle: {
-            // 地图区域的多边形 图形样式。
             normal: {
-              borderColor: "#fff", // 边框颜色
-              areaColor: "#2759af", //  区域颜色
-              textStyle: {
-                // 文字颜色
-                color: "#fff",
-              },
-              // shadowBlur: 10, // 图形阴影的模糊大小
-              // shadowOffsetX: 10, // 阴影水平方向上的偏移距离。
+              areaColor: "#013C62",
+              shadowColor: "#182f68",
+              shadowOffsetX: 0,
+              shadowOffsetY: 25,
+              borderColor: "#2ab8ff",
+              borderWidth: 1.5,
+              areaColor: "#12235c",
             },
             emphasis: {
-              areaColor: "#7b39e2",
-              color: "#fff",
+              areaColor: "#2AB8FF",
+              borderWidth: 0,
+              color: "green",
             },
           },
+
+          // label: {
+          //   normal: {
+          //     //静态的时候展示样式
+          //     show: true, //是否显示地图省份得名称
+          //     textStyle: {
+          //       color: "#fff",
+          //       fontSize: 10,
+          //       fontFamily: "Arial",
+          //     },
+          //   },
+          //   emphasis: {
+          //     // 高亮状态下的样式
+          //     //动态展示的样式
+          //     color: "#fff",
+          //     shadowOffsetX: 0,
+          //     shadowOffsetY: 0,
+          //     shadowBlur: 20,
+          //     borderWidth: 0,
+          //     shadowColor: "rgba(0, 0, 0, 0.5)",
+          //   },
+          // },
+          // itemStyle: {
+          //   // 地图区域的多边形 图形样式。
+          //   normal: {
+          //     borderColor: "#fff", // 边框颜色
+          //     areaColor: "#2759af", //  区域颜色
+          //     textStyle: {
+          //       // 文字颜色
+          //       color: "#fff",
+          //     },
+          //     // shadowBlur: 10, // 图形阴影的模糊大小
+          //     // shadowOffsetX: 10, // 阴影水平方向上的偏移距离。
+          //   },
+          //   emphasis: {
+          //     areaColor: "#7b39e2",
+          //     color: "#fff",
+          //   },
+          // },
         },
       };
     },
@@ -205,11 +235,30 @@ export default {
     init() {
       echarts.registerMap("guizhou", guizhou);
       this.changeOptions("guizhou");
+      let that = this;
       setTimeout(() => {
-        this.myChart = echarts.init(document.getElementById("map"));
-        this.myChart.setOption(this.distributionOptions);
+        that.myChart = echarts.init(document.getElementById("map"));
+        that.myChart.setOption(this.distributionOptions);
+        that.myChart.on("click", (params) => {
+          // console.log(params);
+          // 有标注点的地方有data
+          if (params.data && params.data.value) {
+            that.museumList.forEach((item) => {
+              if (
+                item.longitude &&
+                item.latitude &&
+                item.longitude == params.data.value[0] &&
+                item.latitude == params.data.value[1]
+              ) {
+                that.curMuseum = item;
+                return;
+              }
+            });
+          }
+          that.handleClick(that.curMuseum);
+        });
         window.onresize = () => {
-          this.myChart.resize();
+          that.myChart.resize();
         };
       }, 500);
     },
@@ -226,7 +275,7 @@ export default {
   padding: 70px 13% 114px 13%;
   .title {
     color: #333;
-    margin-bottom: 43px;
+    // margin-bottom: 43px;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -273,7 +322,7 @@ export default {
 
     .map {
       width: 900px;
-      height: 580px;
+      height: 820px;
     }
   }
 }

src/views/home/index-new.vue

@@ -49,7 +49,7 @@
         </h1>
       </div>
       <div style="background-color: #f3ecef" id="page3" class="page">
-        布展推荐
+        展览推荐
       </div>
       <div style="background-color: #607271" id="page4" class="page">
         文物推荐

src/views/home/index.vue

 <template>
   <!-- <child1 slot="skeleton" /> -->
   <div class="home">
+    <!-- <Boutique class="home-item" ref="Boutique" v-if="boutiqueShow" />
+    <Virtural class="home-item" ref="Virtural" v-if="virtualShow" />
+    <CulturalRelic class="home-item" ref="CulturalRelic" v-if="crShow" />
+    <Display class="home-item" ref="Display" v-if="displayShow" />
+    <MuseumMap class="home-item" ref="MuseumMap" v-if="mapShow" /> -->
+
     <vue-lazy-component>
-      <Boutique class="home-item" />
+      <Boutique class="home-item" ref="Boutique" />
     </vue-lazy-component>
     <vue-lazy-component>
-      <Virtural class="home-item" />
+      <Virtural class="home-item" ref="Virtural" />
     </vue-lazy-component>
     <vue-lazy-component>
-      <CulturalRelic class="home-item" />
+      <CulturalRelic class="home-item" ref="CulturalRelic" />
     </vue-lazy-component>
     <vue-lazy-component>
-      <Display class="home-item" />
+      <Display class="home-item" ref="Display" />
     </vue-lazy-component>
-
     <vue-lazy-component>
-      <MuseumMap class="home-item" />
+      <MuseumMap class="home-item" ref="MuseumMap" />
     </vue-lazy-component>
-    <!-- <Footer /> -->
   </div>
 </template>
 
 <script>
-import NavBar from "@/components/NavBar";
-import Footer from "@/components/Footer";
+// import NavBar from "@/components/NavBar";
+// import Footer from "@/components/Footer";
 import Boutique from "./components/Boutique.vue";
 import MuseumMap from "./components/MuseumMap.vue";
 import Virtural from "./components/Virtural.vue";
@@ -31,8 +35,8 @@ import Display from "./components/Display.vue";
 import CulturalRelic from "./components/CulturalRelic.vue";
 export default {
   components: {
-    NavBar,
-    Footer,
+    // NavBar,
+    // Footer,
     MuseumMap,
     Boutique,
     Virtural,
@@ -41,15 +45,40 @@ export default {
   },
   name: "Home",
   data() {
-    return {};
+    return {
+      boutiqueShow: true,
+      virtualShow: true,
+      crShow: true,
+      displayShow: true,
+      mapShow: true,
+      currentScroll:''
+    };
   },
-  methods: {
-    handleClickVitual() {
-      //暂时写死
-      window.open(
-        "https://720yun.com/t/6cvkbyf7z7w?scene_id=90524980#scene_id=90524980"
-      );
+  mounted() {
+    // window.addEventListener("scroll", this.handleScrollbox, true);
   },
+  methods: {
+  //   handleScrollbox() {
+  //     this.currentScroll = window.pageYOffset; //表示当前滚动的位置
+
+  //     if (this.currentScroll >= this.$refs.testref.offsetTop - 600) {
+  //       //当前滚动位置到达testref的时候，显示div（100作为调整用）
+  //       this.testShow = true;
+  //     }
+  //     if (this.currentScroll >= this.$refs.test2ref.offsetTop - 440) {
+  //       this.testShow2 = true;
+  //     }
+  //     if (this.currentScroll >= this.$refs.test3ref.offsetTop - 440) {
+  //       this.testShow3 = true;
+  //     }
+
+  //     if (this.currentScroll >= this.$refs.test4ref.offsetTop - 440) {
+  //       this.testShow4 = true;
+  //     }
+  //   },
+  // },
+  // beforeDestroy() {
+  //   window.removeEventListener("scroll", this.handleScrollbox, true);
   },
 };
 </script>

src/views/login/index.vue

 <!-- -->
 <template>
+  <div class="wrapper">
+    <div style="height: 100px; background-color: #2069c4; width: 100%"></div>
     <div class="login">
       <div class="title">
         <div class="text">登录</div>
         <div class="close" @click="handleCloseLogin">×</div>
       </div>
-    <el-form :model="loginForm" :label-position="labelPosition" ref="loginForm">
+      <el-form
+        :model="loginForm"
+        :label-position="labelPosition"
+        ref="loginForm"
+      >
         <el-form-item :label-width="formLabelWidth" prop="username">
           <el-input
             v-model="loginForm.username"
@@ -67,6 +73,7 @@
         >
       </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -146,6 +153,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.wrapper {
+  width: 100%;
+}
 .login {
   width: 500px;
   margin: 50px auto;