搞搞搞

src/assets/data/data.js

@@ -181,4 +181,4 @@ export const goodsData = [
     intro: "暂无简介",
     link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model.html?m=wc20",
   },
-]
+]

src/assets/style/reset.css

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

src/main.js

@@ -9,6 +9,7 @@ import Viewer from 'v-viewer'
 import Vue from 'vue'
 import VueLazyload from 'vue-lazyload'
 
+import "@/assets/style/reset.css"
 import "@/assets/style/my-reset.css"
 
 console.log(`Build time: ${process.env.VUE_APP_UPDATE_TIME}`)

src/router/index.js

@@ -4,6 +4,7 @@ import Home from '../pages/Home.vue'
 import Cover from '@/views/gui/Cover.vue'
 import RelicsList from '@/views/gui/RelicsList.vue'
 import RelicDetail from "@/views/gui/RelicDetail.vue"
+import LandmarkList from "@/views/gui/LandmarkList.vue"
 
 const originalPush = VueRouter.prototype.push
 VueRouter.prototype.push = function push (location) {
@@ -34,6 +35,11 @@ const routes = [
         name: 'RelicDetail',
         component: RelicDetail,
       },
+      {
+        path: 'landmark-list',
+        name: 'LandmarkList',
+        component: LandmarkList,
+      }
     ]
   }
 ]

src/views/gui/EntryList.vue

@@ -35,29 +35,29 @@ export default {
     return {
       entryList: [
         {
-          bgImgUrl: require('@/assets/images/entries/wen-wu-ting.png'),
-          title: '文物厅',
+          bgImgUrl: require('@/assets/images/entries/wen-wu.png'),
+          title: '精品文物展厅',
           sceneCode: '1264',
         },
         {
-          bgImgUrl: require('@/assets/images/entries/shu-fa-ting.png'),
-          title: '书法厅',
+          bgImgUrl: require('@/assets/images/entries/shu-fa.png'),
+          title: '书画厅',
           sceneCode: '1264',
         },
         {
-          bgImgUrl: require('@/assets/images/entries/ge-lao-zu.png'),
-          title: '仡佬族文化厅',
+          bgImgUrl: require('@/assets/images/entries/zhu-ti.png'),
+          title: '仡佬·务川主题展厅',
           sceneCode: '1264',
         },
         {
-          bgImgUrl: require('@/assets/images/entries/30-zhou-nian.png'),
-          title: '30周年成就展',
+          bgImgUrl: require('@/assets/images/entries/wen-hua.png'),
+          title: '中国仡佬族民族文化展厅',
           sceneCode: '1264',
         },
         {
           bgImgUrl: require('@/assets/images/entries/di-biao-he-ying.png'),
           title: '地标合影',
-          routeName: 'groupPhoto',
+          routeName: 'LandmarkList',
         },
         {
           bgImgUrl: require('@/assets/images/entries/wen-wu-shang-xi.png'),

src/views/gui/LandmarkList.vue

@@ -0,0 +1,221 @@
+<template>
+  <div class="landmark-list">
+    <div class="tip">
+      <img
+        class=""
+        src="@/assets/images/item-icon.png"
+        alt=""
+        draggable="false"
+      >
+      <span>请选择一个场景</span>
+    </div>
+    <ul>
+      <li
+        v-for="(item, index) in landmarkList"
+        :key="index"
+        :class="{
+          active: selectedIdx === index,
+        }"
+        @click="onClickItem(index)"
+      >
+        <div class="img-wrap">
+          <img
+            :src="item.bgImg"
+            alt=""
+            draggable="false"
+          >
+        </div>
+        <div class="img-title">
+          {{ item.name }}
+        </div>
+      </li>
+    </ul>
+    <label
+      for="input"
+      class="next"
+      :class="{active: selectedIdx !== null}"
+    >
+      下一步
+    </label>
+    <input
+      id="input"
+      ref="input"
+      type="file"
+      accept="image/*"
+      capture="user"
+      @input="onInput"
+    >
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      landmarkList: [
+        {
+          bgImg: require(`@/assets/images/entries/shu-fa.png`),
+          name: '地标名称',
+        },
+        {
+          bgImg: require(`@/assets/images/entries/shu-fa.png`),
+          name: '地标名称',
+        },
+        {
+          bgImg: require(`@/assets/images/entries/shu-fa.png`),
+          name: '地标名称',
+        },
+        {
+          bgImg: require(`@/assets/images/entries/shu-fa.png`),
+          name: '地标名称',
+        },
+        {
+          bgImg: require(`@/assets/images/entries/shu-fa.png`),
+          name: '地标名称',
+        },
+        {
+          bgImg: require(`@/assets/images/entries/shu-fa.png`),
+          name: '地标名称',
+        },
+        {
+          bgImg: require(`@/assets/images/entries/shu-fa.png`),
+          name: '地标名称',
+        },
+        {
+          bgImg: require(`@/assets/images/entries/shu-fa.png`),
+          name: '地标名称',
+        },
+        {
+          bgImg: require(`@/assets/images/entries/shu-fa.png`),
+          name: '地标名称',
+        },
+        {
+          bgImg: require(`@/assets/images/entries/shu-fa.png`),
+          name: '地标名称',
+        },
+      ],
+      selectedIdx: null,
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    onClickItem(index) {
+      if (this.selectedIdx === index) {
+        this.selectedIdx = null
+      } else {
+        this.selectedIdx = index
+      }
+    },
+    onInput(e) {
+      console.log(e)
+      console.log(this.$refs.input.value)
+    }
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.landmark-list {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  background: #E7DDD6;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .tip {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    margin-top: 6.6vw;
+    padding-left: 4.4vw;
+    align-self: flex-start;
+    > img {
+      width: 2.5vw;
+      height: 2.5vw;
+      margin-right: 1.5vw;
+    }
+    > span {
+      font-size: 3.9vw;
+      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+      font-weight: bold;
+      color: #A33328;
+    }
+  }
+  ul {
+    flex: 1 0 1px;
+    width: 100%;
+    overflow: auto;
+    margin-top: 4.4vw;
+    padding-left: 4.4vw;
+    > li {
+      display: inline-flex;
+      flex-direction: column;
+      margin-right: 2.9vw;
+      margin-bottom: 5.3vw;
+      width: 44.1vw;
+      height: 37.3vw;
+      background: #FFFFFF;
+      box-shadow: 0 0 0.9vw 0 rgba(0, 0, 0, 0.25);
+      border-radius: 1.8vw;
+      overflow: hidden;
+      .img-wrap {
+        flex: 0 0 auto;
+        background: linear-gradient(180deg, #4E4141 0%, #B4ACAC 100%);
+        width: 100%;
+        height: 28.4vw;
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+      .img-title {
+        flex: 1 0 1px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        white-space: pre;
+        text-overflow: ellipsis;
+        font-size: 3.6vw;
+        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+        font-weight: 400;
+        color: #666666;
+      }
+      &.active {
+        outline: 0.5vw solid #A33328;
+        > .img-title {
+          color: #A33328;
+        }
+      }
+    }
+  }
+  > label.next {
+    flex: 0 0 auto;
+    width: 91.1vw;
+    height: 16vw;
+    background: #999;
+    border-radius: 8vw;
+    margin-top: 6vw;
+    margin-bottom: 6vw;
+    pointer-events: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+    font-size: 5vw;
+    &.active {
+      background: #A33328;
+      pointer-events: initial;
+    }
+  }
+  > input {
+    display: none;
+  }
+}
+</style>

src/views/gui/RelicDetail.vue

@@ -60,6 +60,8 @@ export default {
     flex: 0 0 auto;
     width: 100%;
     height: 45.8vh;
+    border-radius: 0 0 2.7vw 2.7vw;
+    overflow: hidden;
   }
   > .desc-wrapper {
     flex: 1 0 1px;
@@ -67,6 +69,7 @@ export default {
     padding-right: 4.4vw;
     display: flex;
     flex-direction: column;
+    padding-top: 6.4vw;
     > h1 {
       flex: 0 0 auto;
       font-size: 5vw;

src/views/gui/menu.vue

@@ -323,12 +323,14 @@ export default {
           width: @width;
           height: @height;
           padding: 0;
+          > img {
+            height: 100%;
+            width: 100%;
+          }
           > img.active {
             display: none;
           }
           > img.inactive {
-            height: 100%;
-            width: 100%;
             display: block;
           }
         }