Merge branch 'master' of http://face3d.4dage.com:7005/renyicun/YangZhouDaYunHeDaDu

src/components/CameraContent-2-2-1.vue

@@ -0,0 +1,142 @@
+
+<template>
+  <div class="camera-content-1-1">
+    <button
+      class="return"
+      @click="emit('close')"
+    />
+    <div class="content-wrap">
+      <div class="left">
+        <h2 class="one">
+          菏泽沉船
+        </h2>
+        <p class="one">
+          2010 年发现的菏泽元代沉船，向世人展示了一处完整的内河沉船遗迹。该船为木质单桅货船，船型狭长，方首，方尾，平底，共 12 个舱，主体用材为杉木。据专家研究，这艘沉船发现的位置正在元朝的黄河北支上，而黄河北支此时与会通河相接，当时凡从运河北上元大都或南下去往杭州方向的船只，在徐州到济宁段都需要经过这段河道。
+        </p>
+        <h2 class="two">
+          菏泽沉船上的瓷器
+        </h2>
+        <p class="two">
+          沉船中还出土了包括精美瓷器在内的160余件遗物，其中瓷器主要为景德镇青花与青白釉瓷器、磁州窑瓷器、龙泉窑瓷器、钧窑瓷器等，而这也是元大都内最常发现的瓷器组合。
+        </p>
+      </div>
+      <div class="right">
+        <img
+          class=""
+          src="@/assets/images/camera-content-2-1-1-img.png"
+          alt=""
+          draggable="false"
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt(1920, 970)
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const emit = defineEmits(['close'])
+
+</script>
+
+<style lang="less" scoped>
+.camera-content-1-1{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.45);
+  backdrop-filter: blur(60px);
+  >button.return{
+    position: absolute;
+    width: 58px;
+    height: 58px;
+    left: 42px;
+    top: 68px;
+    background-image: url(@/assets/images/btn-return.png);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+  >.content-wrap{
+    position: absolute;
+    left: 50%;
+    top: 54%;
+    width: 100%;
+    // width: calc(1920 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(723 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translate(-50%, -50%);
+    background-image: url(@/assets/images/camera-content-2-1-1-design-bg.png);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    >.left{
+      flex: 0 0 auto;
+      width: calc(818 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      >h2{
+        width: calc(616 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        height: calc(62 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-size: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-family: Source Han Serif SC, Source Han Serif SC;
+        font-weight: 600;
+        color: #6A3906;
+        line-height: calc(33 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        letter-spacing: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        background-image: url(@/assets/images/camera-content-1-1-3-title-bg.png);
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding-top: calc(2 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        padding-left: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        margin-bottom: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+      >p{
+        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-weight: 300;
+        color: #000000;
+        line-height: 1.5;
+        letter-spacing: calc(8 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+      >p.one{
+        margin-bottom: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+    }
+    >.right{
+      flex: 0 0 auto;
+      position: relative;
+      width: calc(818 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      >img{
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(145,129,117,0.25);
+        border: 1px solid #FFE88B;
+        padding: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+    }
+  }
+}
+</style>

src/components/CameraContent-2-2-2.vue

@@ -0,0 +1,136 @@
+
+<template>
+  <div class="camera-content-1-1">
+    <button
+      class="return"
+      @click="emit('close')"
+    />
+    <div class="content-wrap">
+      <div class="left">
+        <h2 class="one">
+          磁县漕船
+        </h2>
+        <p class="one">
+          船长108cm* 船宽28cm* 船高26cm 隔舱板、肋骨：江西小叶樟； 甲板、船壳外板：柚木、梢木； 船附件：菠萝格、龙眼木；
+        </p>
+      </div>
+      <div class="right">
+        <img
+          class=""
+          src="@/assets/images/camera-content-2-2-2-img.png"
+          alt=""
+          draggable="false"
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt(1920, 970)
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const emit = defineEmits(['close'])
+
+</script>
+
+<style lang="less" scoped>
+.camera-content-1-1{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.45);
+  backdrop-filter: blur(60px);
+  >button.return{
+    position: absolute;
+    width: 58px;
+    height: 58px;
+    left: 42px;
+    top: 68px;
+    background-image: url(@/assets/images/btn-return.png);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+  >.content-wrap{
+    position: absolute;
+    left: 50%;
+    top: 54%;
+    width: 100%;
+    // width: calc(1920 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(723 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translate(-50%, -50%);
+    background-image: url(@/assets/images/camera-content-2-1-1-design-bg.png);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    >.left{
+      flex: 0 0 auto;
+      width: calc(818 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      >h2{
+        width: calc(616 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        height: calc(62 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-size: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-family: Source Han Serif SC, Source Han Serif SC;
+        font-weight: 600;
+        color: #6A3906;
+        line-height: calc(33 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        letter-spacing: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        background-image: url(@/assets/images/camera-content-1-1-3-title-bg.png);
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding-top: calc(2 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        padding-left: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        margin-bottom: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+      >p{
+        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-weight: 300;
+        color: #000000;
+        line-height: 1.5;
+        letter-spacing: calc(8 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+      >p.one{
+        margin-bottom: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+    }
+    >.right{
+      flex: 0 0 auto;
+      position: relative;
+      width: calc(818 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      >img{
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(145,129,117,0.25);
+        border: 1px solid #FFE88B;
+        padding: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+    }
+  }
+}
+</style>

src/components/CameraContent-2-2-3.vue

@@ -0,0 +1,136 @@
+
+<template>
+  <div class="camera-content-1-1">
+    <button
+      class="return"
+      @click="emit('close')"
+    />
+    <div class="content-wrap">
+      <div class="left">
+        <h2 class="one">
+          聊城古船
+        </h2>
+        <p class="one">
+          船长126cm* 船宽23cm* 船高80 cm 隔舱板及肋骨：江西小叶樟 甲板、船壳外板：柚木、梢木 船附件：菠萝格、龙眼木
+        </p>
+      </div>
+      <div class="right">
+        <img
+          class=""
+          src="@/assets/images/camera-content-2-2-3-img.png"
+          alt=""
+          draggable="false"
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt(1920, 970)
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const emit = defineEmits(['close'])
+
+</script>
+
+<style lang="less" scoped>
+.camera-content-1-1{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.45);
+  backdrop-filter: blur(60px);
+  >button.return{
+    position: absolute;
+    width: 58px;
+    height: 58px;
+    left: 42px;
+    top: 68px;
+    background-image: url(@/assets/images/btn-return.png);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+  >.content-wrap{
+    position: absolute;
+    left: 50%;
+    top: 54%;
+    width: 100%;
+    // width: calc(1920 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(723 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translate(-50%, -50%);
+    background-image: url(@/assets/images/camera-content-2-1-1-design-bg.png);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    >.left{
+      flex: 0 0 auto;
+      width: calc(818 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      >h2{
+        width: calc(616 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        height: calc(62 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-size: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-family: Source Han Serif SC, Source Han Serif SC;
+        font-weight: 600;
+        color: #6A3906;
+        line-height: calc(33 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        letter-spacing: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        background-image: url(@/assets/images/camera-content-1-1-3-title-bg.png);
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding-top: calc(2 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        padding-left: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        margin-bottom: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+      >p{
+        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-weight: 300;
+        color: #000000;
+        line-height: 1.5;
+        letter-spacing: calc(8 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+      >p.one{
+        margin-bottom: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+    }
+    >.right{
+      flex: 0 0 auto;
+      position: relative;
+      width: calc(818 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      >img{
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(145,129,117,0.25);
+        border: 1px solid #FFE88B;
+        padding: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+    }
+  }
+}
+</style>

src/components/CameraContent-2-3-3.vue

@@ -0,0 +1,135 @@
+
+<template>
+  <div class="camera-content-1-1">
+    <button
+      class="return"
+      @click="emit('close')"
+    />
+    <div class="content-wrap">
+      <div class="left">
+        <h2 class="one">
+          元代商品贸易使用的货币
+        </h2>
+        <p class="one">
+          商品的贸易、货物的流通离不开货币。元代除了使用金银和铜钱，也曾发行纸币。从中统元年（1260）忽必烈颁行中统元宝交钞开始，元代共发行了五种纸币。其中，至元通行宝钞从至元二十四年（1287）发行，一直沿用到元代结束，是元代重要的货币。元代版图辽阔，纸币发行量大、流通范围广，河北平山县也曾出土至元通行宝钞伍佰文的铜版。
+        </p>
+      </div>
+      <div class="right">
+        <img
+          class=""
+          src="@/assets/images/camera-content-2-3-3-img.png"
+          alt=""
+          draggable="false"
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt(1920, 970)
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const emit = defineEmits(['close'])
+
+</script>
+
+<style lang="less" scoped>
+.camera-content-1-1{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.45);
+  backdrop-filter: blur(60px);
+  >button.return{
+    position: absolute;
+    width: 58px;
+    height: 58px;
+    left: 42px;
+    top: 68px;
+    background-image: url(@/assets/images/btn-return.png);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+  >.content-wrap{
+    position: absolute;
+    left: 50%;
+    top: 54%;
+    width: 100%;
+    // width: calc(1920 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(723 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translate(-50%, -50%);
+    background-image: url(@/assets/images/camera-content-2-1-1-design-bg.png);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    >.left{
+      flex: 0 0 auto;
+      width: calc(818 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      >h2{
+        width: calc(616 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        height: calc(62 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-size: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-family: Source Han Serif SC, Source Han Serif SC;
+        font-weight: 600;
+        color: #6A3906;
+        line-height: calc(33 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        letter-spacing: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        background-image: url(@/assets/images/camera-content-1-1-3-title-bg.png);
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding-top: calc(2 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        padding-left: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        margin-bottom: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+      >p{
+        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-weight: 300;
+        color: #000000;
+        line-height: 1.5;
+        letter-spacing: calc(8 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+      >p.one{
+        margin-bottom: calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+    }
+    >.right{
+      flex: 0 0 auto;
+      position: relative;
+      width: calc(818 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      background: rgba(145,129,117,0.25);
+      border: 1px solid #FFE88B;
+      padding: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      box-sizing: border-box;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      >img{
+      }
+    }
+  }
+}
+</style>

src/components/CameraContent-3-2-2.vue

@@ -24,22 +24,6 @@
           </div>
         </div>
         <div class="design-wrap-right">
-          <!-- 左右按钮 -->
-          <img
-            class="btn-left"
-            src="@/assets/images/CameraContent-3-1-3-left.png"
-            alt=""
-            :style="{opacity: currentSwitchIdx == 0 ? '0.4':'1'}"
-            @click="previous()"
-          >
-          <img
-            class="btn-right"
-            src="@/assets/images/CameraContent-3-1-3-right.png"
-            alt=""
-            :style="{opacity: currentSwitchIdx == imgLists.length - 1 ? '0.4':'1'}"
-
-            @click="next()"
-          >
           <img
             class="detail-img"
             :src="require(`@/assets/images/CameraContent-3-2-2-img-${currentSwitchIdx + 1}.png`)"