新增首首页简介、展馆页面

package.json

@@ -9,7 +9,11 @@
   },
   "dependencies": {
     "core-js": "^3.8.3",
+    "less": "^4.2.0",
+    "less-loader": "^12.2.0",
+    "swiper": "^11.1.0",
     "vue": "^2.6.14",
+    "vue-awesome-swiper": "^3.1.3",
     "vue-router": "^3.6.5",
     "vuex": "^3.6.2"
   },

src/main.js

@@ -2,9 +2,15 @@ import Vue from 'vue'
 import App from './App.vue'
 import store from './store' 
 import router from './router'
+import VueAwesomeSwiper from 'vue-awesome-swiper'
 
 Vue.config.productionTip = false
 
+// 引入Swiper CSS样式
+import 'swiper/swiper-bundle.css'
+
+Vue.use(VueAwesomeSwiper)
+
 new Vue({
   store,
   router,

src/views/Home/homePage.vue

@@ -1,6 +1,158 @@
 <template>
-  <div class=''>
-    主页
+  <div class='home' :class="{ 'homeOther': state !== 'home' }">
+    <div class="left-box" :style="{ 'width': state == 'product' ? '100%' : '' }">
+      <img class="gridding" src="@/assets/images/home/gridding.png" alt="">
+      <div v-show="state == 'home'" class="home-page">
+        <div class="title">
+          <div>湖南省湘西土家族苗族自治州</div>
+          <img src="@/assets/images/home/title-white.png" alt="">
+        </div>
+        <div class="explore" @click="() => { state = 'info' }">
+          开始探索
+          <img src="@/assets/images/home/nextIcon.png" alt="">
+        </div>
+      </div>
+      <!-- 左侧列表 -->
+      <div class="tabbar-list" v-show="state != 'home'">
+        <div class="title">
+          <img src="@/assets/images/home/title-green.png" alt="">
+        </div>
+        <div class="list">
+          <!-- 简介 -->
+          <div class="list-item" @click="() => { state = 'info' }">
+            <div class="content" :class="{ 'contentAc': state === 'info' }">
+              <img class="number-img"
+                :src="require(`@/assets/images/home/0${dataAll.info.id + 1}${state === 'info' ? '_Ac' : ''}.png`)"
+                alt="">
+              <div class="item-right">
+                <div class="top">{{ dataAll.info.name }}</div>
+                <div class="bottom">{{ dataAll.info.disc }}</div>
+              </div>
+            </div>
+            <div class="right" v-show="state === 'info'"></div>
+          </div>
+          <!-- 全景 -->
+          <div class="list-item" @click="() => { state = 'full', currentV = dataAll.full.content[0] }">
+            <div class="content" :class="{ 'contentAc': state === 'full' }">
+              <img class="number-img"
+                :src="require(`@/assets/images/home/0${dataAll.full.id + 1}${state === 'full' ? '_Ac' : ''}.png`)"
+                alt="">
+              <div class="item-right">
+                <div class="top">{{ dataAll.full.name }}</div>
+                <div class="bottom">{{ dataAll.full.disc }}</div>
+              </div>
+            </div>
+            <div class="right" v-show="state === 'full'"></div>
+          </div>
+          <!-- 展馆 -->
+          <div class="list-item" @click="() => { state = 'scene' }">
+            <div class="content" :class="{ 'contentAc': state === 'scene' }">
+              <img class="number-img"
+                :src="require(`@/assets/images/home/0${dataAll.scenes.id + 1}${state === 'scene' ? '_Ac' : ''}.png`)"
+                alt="">
+              <div class="item-right" @click="() => { state = 'info' }">
+                <div class="top">{{ dataAll.scenes.name }}</div>
+                <div class="bottom">{{ dataAll.scenes.disc }}</div>
+              </div>
+            </div>
+            <div class="right" v-show="state === 'scene'"></div>
+          </div>
+          <!-- 馆藏 -->
+          <div class="list-item" @click="() => { state = 'product', getCategoryType() }">
+            <div class="content" :class="{ 'contentAc': state === 'product' }">
+              <img class="number-img"
+                :src="require(`@/assets/images/home/0${dataAll.product.id + 1}${state === 'product' ? '_Ac' : ''}.png`)"
+                alt="">
+              <div class="item-right">
+                <div class="top">{{ dataAll.product.name }}</div>
+                <div class="bottom">{{ dataAll.product.disc }}</div>
+              </div>
+            </div>
+            <div class="right" v-show="state === 'product'"></div>
+          </div>
+        </div>
+      </div>
+      <!-- 列表右侧 -->
+      <div class="babar-content">
+        <!-- 简介 -->
+        <div class="info-box" v-show="state == 'info'">{{ dataAll.info.content.info }}</div>
+        <!-- 全景 -->
+        <div class="full-box" v-show="state == 'full'">
+          <div class="v-list">
+            <div class="list-item" :class="{ 'active': currentV.name == item.name }"
+              v-for="(item) in dataAll.full.content" :key="item.id" @click="() => { currentV = item }">
+              {{ item.name }}
+              <div class="bottomAc" v-show="currentV.name == item.name"></div>
+            </div>
+          </div>
+          <div class="v-full-box">
+            <div class="full-item" v-for="(item) in currentV.scenes" :key="item.name"
+              :class="{ 'hover': isShade && currentHoverName === item.name }"
+              @mousemove="() => { isShade = true, currentHoverName = item.name }"
+              @mouseleave="() => { isShade = false, currentHoverName = '' }">
+              <img :src="`${baseUrl}/images/full/${currentV.id}/${item.coverImg}`" alt="">
+              <div class="shade-box" v-show="isShade && currentHoverName === item.name">{{ item.name }}</div>
+            </div>
+          </div>
+        </div>
+        <!-- 展馆 -->
+        <div class="scene-box" v-show="state == 'scene'">
+          <div class="box-item" v-for="(item) in dataAll.scenes.content" :key="item.id">
+            <img :src="`${baseUrl}/images/scene/${item.coverImg}`" alt="">
+            <div>{{ item.name }}</div>
+          </div>
+        </div>
+        <!-- 馆藏 -->
+        <div class="product-box" v-show="state == 'product'">
+          <div class="select-box">
+            <!-- 维度筛选 -->
+            <div class="dimension-box ">
+              <div class="box-item" @click="changeDimension('3d')">
+                三维文物
+                <div class="bottomAc" v-show="curDimension == '3d'"></div>
+              </div>
+              <div class="box-item" @click="changeDimension('2d')">
+                二维文物
+                <div class="bottomAc" v-show="curDimension == '2d'"></div>
+              </div>
+              <div class="line"></div>
+
+            </div>
+            <!-- 类别选择 -->
+            <div class="category-box">
+              <div class="box-item" v-for="(item) in (curDimension == '2d' ? categoryType2D : categoryType3D)"
+                :key="item" @click="() => { curCategoryType = item, getResultProduces() }">
+                {{ item }}
+                <div class="bottomAc" v-show="curCategoryType == item"></div>
+              </div>
+            </div>
+            <!-- 搜索框 -->
+            <div class="search-box">
+
+            </div>
+          </div>
+          <div class="result-box">
+            <div class="result-item" v-for="(item) in resultProduces" :key="item.id">
+              <img :src="`${baseUrl}/images/product/${item.id}/${item.coverImg}`" alt="">
+              <div class="title">{{ item.name }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 村庄标签 -->
+    <div class="v-labels" v-show="state == 'info' || state == 'full'" v-for="(item) in dataAll.vLabels" :key="item.name"
+      :style="{ top: item.top, right: item.right }">
+      <img src="@/assets/images/home/label.png" alt="">
+      <div>{{ item.name }}</div>
+    </div>
+    <!-- 展馆标签 -->
+    <div class="v-labels" v-show="state == 'scene'" v-for="(item) in dataAll.scenes.content" :key="item.id"
+      :style="{ top: item.top, right: item.right }">
+      <img src="@/assets/images/home/label.png" alt="">
+      <div>{{ item.name }}</div>
+    </div>
+
   </div>
 </template>
 
@@ -10,19 +162,73 @@ export default {
   components: {},
   data() {
     return {
+      // home-首页，info-简介，full-全景，scene-展馆，product-馆藏
+      state: 'info',
+      // state == full 
+      currentV: {},
+      isShade: false,
+      baseUrl: 'http://localhost:8080/staticData',
+      currentHoverName: '',
+      curDimension: '3d',
+      categoryType2D: [],
+      categoryType3D: [],
+      curCategoryType: '',
+      resultProduces: []
 
     };
   },
-  computed: {},
+  computed: {
+    dataAll() {
+      return this.$store.state.dataAll
+    }
+  },
   watch: {},
   methods: {
+    getResultProduces() {
+      this.resultProduces = this.dataAll.product.content.filter((item) => {
+        if (this.curCategoryType == '全部') {
+          return item.type === this.curDimension
+        } else {
+          return item.type === this.curDimension && item.category === this.curCategoryType
+        }
+      })
+    },
+    changeDimension(dimension) {
+      this.curDimension = dimension
+      dimension == '2d' ? this.curCategoryType = this.categoryType2D[0] : this.curCategoryType = this.categoryType3D[0]
+      this.getResultProduces()
+    },
+    getCategoryType() {
+
+      // 区分出2d 和 3d
+      var product2Ds = this.dataAll.product.content.filter((item) => {
+
+        return item.type === '2d'
+      })
+
+      var product3Ds = this.dataAll.product.content.filter((item) => {
+        return item.type === '3d'
+      })
+
+      // 获取2d中所有的类别
+      this.categoryType2D = [...new Set(product2Ds.map(item => item.category))];
+      // 获取3d中所有的类别
+      this.categoryType3D = [...new Set(product3Ds.map(item => item.category))];
+
+      this.categoryType2D.unshift('全部')
+      this.categoryType3D.unshift('全部')
+
+      console.log(product2Ds, product3Ds)
+
+      this.changeDimension('3d')
 
+    }
   },
   created() {
 
   },
   mounted() {
-
+    this.getCategoryType()
   },
   beforeCreate() { }, //生命周期 - 创建之前
   beforeMount() { }, //生命周期 - 挂载之前
@@ -33,4 +239,440 @@ export default {
   activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
 }
 </script>
-<style lang='less' scoped></style>
+<style lang='less' scoped>
+::-webkit-scrollbar {
+  width: 2px;
+  /* 设置滚动条宽度 */
+  height: 10px;
+  /* 若为垂直滚动条，可设置高度 */
+  background-color: rgba(0, 0, 0, 0.1);
+  /* 设置滚动条背景颜色 */
+}
+
+/* 修改滚动条滑块（即拖动部分）的样式 */
+::-webkit-scrollbar-thumb {
+  background-color: #b9b9b9;
+  /* 设置滚动条滑块的颜色 */
+  border-radius: 5px;
+  /* 圆角效果 */
+  cursor: pointer;
+  /* 这里也可以设置滑块区域鼠标样式为手形，但这并不影响滚动条功能本身 */
+}
+
+.home {
+  width: 100%;
+  height: 100%;
+  background: url(@/assets/images/home/bg1.png);
+  background-size: 100% 100%;
+  position: relative;
+
+  * {
+    transition: all 1s ease;
+  }
+
+  .left-box {
+    width: 60%;
+    height: 100%;
+    // background: url(@/assets/images/home/greenBg.png);
+    background: #2cd1977e;
+    backdrop-filter: blur(5px);
+    background-size: cover;
+
+    .gridding {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      position: absolute;
+    }
+
+    // opacity: 0.7;
+    .home-page {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      padding: 28vh 0 25vh 10%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      .title {
+        color: white;
+
+        div {
+          font-size: 1.5em;
+          text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+        }
+
+        img {
+          width: 90%;
+        }
+      }
+
+      .explore {
+        color: white;
+        font-size: 2.52em;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+
+        img {
+          width: 40px;
+          margin-top: 5px;
+          margin-left: 10px;
+        }
+
+        // font-weight: bold;
+      }
+    }
+
+    .tabbar-list {
+      width: 20vw;
+      height: 100%;
+      background: #0a2629ab;
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      .title {
+        width: 100%;
+        height: 7vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-bottom: 1.5px solid rgba(15, 15, 15, 0.3);
+
+        img {
+          width: 85%;
+        }
+      }
+
+      .list {
+        width: 100%;
+        height: calc(100% - 7vh);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        &-item {
+          width: 100%;
+          height: 10vh;
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: 10px;
+          border-bottom: 1.5px solid rgba(15, 15, 15, 0.3);
+          cursor: pointer;
+
+          .content {
+            width: 95%;
+            display: flex;
+            justify-content: left;
+            padding-left: 15%;
+            align-items: center;
+            color: white;
+
+            img {
+              width: 4vw;
+            }
+
+            .item-right {
+
+              margin-left: 10px;
+
+              .top {
+                font-size: 1.7em;
+                margin-bottom: 2px;
+                letter-spacing: 1px;
+
+              }
+
+              .bottom {
+                font-size: 0.9em;
+                letter-spacing: 1px;
+              }
+            }
+
+          }
+
+          .contentAc {
+            background: linear-gradient(270deg, #2cd19760 0%, rgba(44, 209, 150, 0) 100%);
+            box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.6);
+
+            .item-right {
+              .top {
+                font-weight: bold;
+              }
+
+            }
+
+          }
+
+          .right {
+            width: 5px;
+            background: #2CD196;
+          }
+        }
+      }
+    }
+
+    .babar-content {
+      width: calc(100% - 20vw);
+      // width: 70%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: absolute;
+      top: 0;
+      right: 0;
+
+      .info-box {
+        color: white;
+        width: 80%;
+        max-height: 90%;
+        overflow: auto;
+        font-size: 1.2em;
+        letter-spacing: 1px;
+        line-height: 2em;
+        font-family: Source Han Sans SC, Source Han Sans SC;
+        font-weight: 500;
+        text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4);
+        white-space: pre-wrap;
+      }
+
+      .full-box {
+        width: 85%;
+        height: 60%;
+
+        .v-list {
+          width: 100%;
+          height: 30px;
+          overflow: auto;
+          display: flex;
+          justify-content: space-between;
+          color: white;
+          text-shadow: 0px 4px 6px rgba(0, 0, 0, 0.6);
+          font-weight: bold;
+          border-bottom: 1px solid #2C655D;
+
+          .list-item {
+            width: auto;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            cursor: pointer;
+
+            .bottomAc {
+              width: 100%;
+              height: 4px;
+              background: #2CD196;
+              box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
+              margin-top: 5px;
+            }
+          }
+        }
+
+        .v-full-box {
+          margin-top: 20px;
+          width: 100%;
+          max-height: calc(100% - 50px);
+          overflow: auto;
+          display: grid;
+          grid-template-columns: repeat(2, 1fr);
+          // grid-template-rows: repeat(2, minmax(auto, auto));
+          gap: 20px;
+
+          .full-item {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            position: relative;
+            width: 95%;
+            height: 95%;
+
+            img {
+              width: 100%;
+              height: 100%;
+              object-fit: fill;
+            }
+
+            .shade-box {
+              width: 100%;
+              height: 100%;
+              backdrop-filter: blur(5px);
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              text-align: center;
+              position: absolute;
+              color: white;
+              // top: 50%;
+              // left: 50%;
+              // transform: translate(-50%, -50%);
+
+            }
+          }
+
+          .hover {
+            transform: scale(1.05);
+          }
+
+        }
+
+
+      }
+
+      .scene-box {
+        width: 85%;
+        height: 60%;
+        overflow: auto;
+
+        .box-item {
+          width: 98%;
+          margin-top: 25px;
+          cursor: pointer;
+
+          img {
+            width: 100%;
+          }
+
+          div {
+            color: white;
+            margin-top: 5px;
+            font-size: 0.8em;
+          }
+        }
+      }
+
+      .product-box {
+        width: 90%;
+        height: 70%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        .select-box {
+          width: 90%;
+          display: flex;
+          border-bottom: 1px solid #2C655D;
+          color: white;
+
+          .dimension-box {
+            width: 15vw;
+            border-right: 1px;
+            display: flex;
+            justify-content: space-between;
+
+            .box-item {
+              width: auto;
+              height: 100%;
+              display: flex;
+              flex-direction: column;
+              justify-content: space-between;
+              cursor: pointer;
+
+              .bottomAc {
+                width: 100%;
+                height: 4px;
+                background: #2CD196;
+                box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
+                margin-top: 5px;
+              }
+            }
+
+            .line {
+              width: 2px;
+              height: 100%;
+              margin-left: 20px;
+              margin-right: 20px;
+              background: linear-gradient(to bottom, #ffffff98 0%, #ffffff00 100%);
+            }
+
+
+          }
+
+          .category-box {
+            display: flex;
+            max-width: 40vw;
+            overflow: auto;
+
+            .box-item {
+              width: auto;
+              height: 100%;
+              display: flex;
+              flex-direction: column;
+              justify-content: space-between;
+              cursor: pointer;
+              margin: 0 15px;
+
+              .bottomAc {
+                width: 100%;
+                height: 4px;
+                background: #2CD196;
+                box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
+                margin-top: 5px;
+              }
+            }
+          }
+
+
+
+        }
+
+        .result-box {
+          width: 100%;
+
+          .result-item {
+            width: 20vw;
+            height: 100%;
+            margin-right: 20px;
+            box-sizing: initial;
+
+            img {
+              width: 100%;
+              height: 20vh;
+              object-fit: cover;
+            }
+
+            .title {
+              color: white;
+            }
+          }
+
+        }
+      }
+    }
+  }
+
+  .v-labels {
+    width: auto;
+    height: auto;
+    position: absolute;
+    cursor: pointer;
+
+    img {
+      transform: scale(0.9);
+    }
+
+    div {
+      position: absolute;
+      top: 13%;
+      left: 50%;
+      transform: translateX(-50%);
+      text-shadow: 0px 4px 6px rgba(0, 0, 0, 0.6);
+      font-family: Source Han Sans SC, Source Han Sans SC;
+      font-weight: bold;
+      letter-spacing: 2px;
+      color: white;
+    }
+  }
+}
+
+.homeOther {
+  background: url(@/assets/images/home/bg2.png);
+  background-size: 100% 100%;
+}
+</style>