添加新手指引

QJKK/src/framework/show/component/Guide.vue

@@ -0,0 +1,287 @@
+<template>
+  <div class="Guide" :class="{ show }">
+    <!-- 1 返回 -->
+    <div class="box box1" :class="{ boxAc: showId === 1 }">
+      <img src="@/assets/img/Goods/back.png" alt="" />
+      <p>返回</p>
+      <!-- 提示框 -->
+      <div class="tit">
+        <h3>
+          <span>返回</span>
+          <div class="ind">{{ showId }}/3</div>
+        </h3>
+        <div class="txt">返回倾斜摄影模型</div>
+        <div class="btnn">
+          <div :class="{ noAc: showId === 1 }" @click="showId--">
+            <i class="el-icon-arrow-left"></i>上一条
+          </div>
+          <div @click="show = false">跳过</div>
+          <div :class="{ noAc: showId === 3 }" @click="showId++">
+            下一条<i class="el-icon-arrow-right"></i>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 2 介绍 -->
+    <!-- <div class="box box2" :class="{ boxAc: showId === 2 }">
+      <div class="left">
+        &nbsp;&nbsp;
+        <img :src="require(`@/assets/img/Goods/txtMusic.png`)" alt="" />
+        &nbsp;
+        <img src="@/assets/img/Goods/Group.png" alt="" />
+      </div>
+      <div class="centen">雨花台烈士纪念馆</div>
+      <div class="right">
+        <img src="@/assets/img/Goods/Group.png" alt="" />
+        &nbsp;
+        <img :src="require(`@/assets/img/Goods/txtDown.png`)" alt="" />
+        &nbsp;&nbsp;
+      </div>
+      <div class="tit">
+        <h3>
+          <span>地拍场景信息</span>
+          <div class="ind">{{ showId }}/4</div>
+        </h3>
+        <div class="txt">查看地拍场景信息/场景音频</div>
+        <div class="btnn">
+          <div :class="{ noAc: showId === 1 }" @click="showId--">
+            <i class="el-icon-arrow-left"></i>上一条
+          </div>
+          <div @click="show = false">跳过</div>
+          <div :class="{ noAc: showId === 4 }" @click="showId++">
+            下一条<i class="el-icon-arrow-right"></i>
+          </div>
+        </div>
+      </div>
+    </div> -->
+
+    <!-- 3更多 -->
+    <div class="box box3" :class="{ boxAc: showId === 2 }">
+      <div class="row" v-for="item in rightList" :key="item.type">
+        <img :src="require(`@/assets/img/Goods/inco${item.type}.png`)" alt="" />
+        <p>
+          {{ item.name }}
+        </p>
+      </div>
+      <!-- 提示框 -->
+      <div class="tit">
+        <h3>
+          <span>更多</span>
+          <div class="ind">{{ showId }}/3</div>
+        </h3>
+        <div class="txt">可回到首页，关闭/开启声音，点赞和分享等</div>
+        <div class="btnn">
+          <div :class="{ noAc: showId === 1 }" @click="showId--">
+            <i class="el-icon-arrow-left"></i>上一条
+          </div>
+          <div @click="show = false">跳过</div>
+          <div :class="{ noAc: showId === 3 }" @click="showId++">
+            下一条<i class="el-icon-arrow-right"></i>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 4所有全景 -->
+    <div class="box box4" :class="{ boxAc: showId === 3 }">
+      <img src="@/assets/img/menu2.png" alt="" />
+            <!-- 提示框 -->
+      <div class="tit">
+        <h3>
+          <span>更多场景</span>
+          <div class="ind">{{ showId }}/3</div>
+        </h3>
+        <div class="txt">查看所有航拍全景/地拍全景</div>
+        <div class="btnn">
+          <div :class="{ noAc: showId === 1 }" @click="showId--">
+            <i class="el-icon-arrow-left"></i>上一条
+          </div>
+          <div @click="show = false">关闭</div>
+          <div :class="{ noAc: showId === 3 }" @click="showId++">
+            下一条<i class="el-icon-arrow-right"></i>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Guide",
+  components: {},
+  data() {
+    return {
+      show: true,
+      showId: 1,
+      rightList: [
+        { name: "首页", type: 1 },
+        { name: "声音", type: 2 },
+        { name: "点赞", type: 3 },
+        { name: "分享", type: 4 },
+        { name: "全屏", type: 5 },
+      ],
+    };
+  },
+  computed: {},
+  watch: {
+    show(val) {
+      if (!val) sessionStorage.setItem("YHT_QJKK_FLAG", 1);
+    },
+  },
+  methods: {},
+  created() {
+    let flag = sessionStorage.getItem("YHT_QJKK_FLAG");
+    if (flag) this.show = false;
+  },
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.Guide {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s;
+  position: absolute;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  .box {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+    .tit {
+      text-align: left;
+      z-index: 10;
+      position: absolute;
+      top: 80px;
+      left: 0;
+      width: 300px;
+      height: 180px;
+      background-image: url("../../../assets/img/Union2.png");
+      background-size: 100% 100%;
+      color: #fff;
+      padding: 12px;
+      h3 {
+        font-size: 20px;
+        color: #d8b275;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .ind {
+          color: #fff;
+          font-size: 12px;
+        }
+      }
+      .txt {
+        font-size: 14px;
+        margin: 12px 0;
+      }
+      .btnn {
+        margin-top: 24px;
+        display: flex;
+        justify-content: space-around;
+        & > div {
+          cursor: pointer;
+          font-size: 14px;
+          padding: 6px 10px;
+          border: 1px solid #d8b275;
+          border-radius: 3px;
+          i {
+            padding-top: 2px;
+          }
+        }
+        .noAc {
+          border: 1px solid #ccc;
+          color: #ccc;
+          pointer-events: none;
+        }
+      }
+    }
+  }
+
+  .box1 {
+    top: 35px;
+    left: 30px;
+    text-align: center;
+    width: 50px;
+
+    & > img {
+      width: 50px;
+    }
+  }
+  .box2 {
+    top: 35px;
+    left: 50%;
+    transform: translateX(-50%);
+    height: 36px;
+    border-radius: 18px;
+    background-color: rgba(177, 11, 11, 0.8);
+    display: flex;
+    align-items: center;
+    img {
+      vertical-align: middle;
+    }
+    .centen {
+      padding: 0 34px;
+    }
+  }
+  .box3 {
+    top: 35px;
+    right: 30px;
+    height: 60px;
+    display: flex;
+    .row {
+      position: relative;
+      width: 50px;
+      text-align: center;
+      margin-left: 18px;
+      & > img {
+        width: 50px;
+      }
+    }
+  }
+  .box4 {
+    bottom: 0px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 80px;
+    height: 40px;
+    border-radius: 40px 40px 0 0;
+    background-color: rgba(234, 229, 211, 0.9);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    & > img {
+      width: 20px;
+      height: 18px;
+    }
+    .tit{
+      padding: 0 12px 0;
+      top: -195px;
+      background-image: url("../../../assets/img/Union.png");
+    }
+  }
+
+  .boxAc {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+.show {
+  opacity: 1;
+  pointer-events: auto;
+}
+</style>

QJKK/src/framework/show/index.vue

@@ -53,10 +53,14 @@
     <!-- 关于全景介绍的盒子 -->
     <VrTxt v-show="vrTxtObj.code" :vrTxtObj='vrTxtObj' @closeBacMusic='$refs.RightIncoRef.closeBacMusic()' ref="VrTxtRef"/>
 
+    <!--  新手指引  -->
+      <Guide v-if="!MapShow"/>
+
   </div>
 </template>
 
 <script>
+import Guide from './component/Guide.vue'
 import { vrTxtInfo } from './component/vrTxt.js'
 
 import VrTxt from './component/vrTxt.vue'
@@ -82,7 +86,8 @@ export default {
     List,
     password,
     preview,
-    VrTxt
+    VrTxt,
+    Guide
   },
   computed: {
     ...mapGetters({

SWKK/src/components/Guide.vue

@@ -0,0 +1,305 @@
+<template>
+  <div class="Guide" :class="{ show }">
+    <div class="mainBox">
+      <div class="box1">
+        <!-- 左边按钮 -->
+        <div class="mainll mainrr">
+          <div
+            class="row"
+            v-for="item in leftList"
+            :key="item.id"
+            :class="{ rowAc: item.id === showId }"
+          >
+            <img
+              :src="require(`@/assets/img/LeftTop/inco${item.type}.png`)"
+              alt=""
+            />
+            <p>{{ item.name }}</p>
+            <!-- 提示框 -->
+            <div class="tit">
+              <h3>
+                <span>{{ item.name }}</span>
+                <div class="ind">{{ showId }}/8</div>
+              </h3>
+              <div class="txt">{{ item.tit }}</div>
+              <div class="btn">
+                <div :class="{ noAc: showId === 1 }" @click="showId--">
+                  <i class="el-icon-arrow-left"></i>上一条
+                </div>
+                <div @click="show = false">跳过</div>
+                <div :class="{ noAc: showId === 8 }" @click="showId++">
+                  下一条<i class="el-icon-arrow-right"></i>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- 右边按钮 -->
+        <div class="mainrr" v-show="showId === 7">
+          <!-- 提示框 -->
+          <div class="tit">
+            <h3>
+              <span>更多</span>
+              <div class="ind">{{ showId }}/8</div>
+            </h3>
+            <div class="txt">可回到首页，关闭/开启声音，点赞和分享等</div>
+            <div class="btn">
+              <div :class="{ noAc: showId === 1 }" @click="showId--">
+                <i class="el-icon-arrow-left"></i>上一条
+              </div>
+              <div @click="show = false">跳过</div>
+              <div :class="{ noAc: showId === 8 }" @click="showId++">
+                下一条<i class="el-icon-arrow-right"></i>
+              </div>
+            </div>
+          </div>
+          <div class="row" v-for="item in rightList" :key="item.id">
+            <img
+              :src="require(`@/assets/img/Goods/inco${item.type}.png`)"
+              alt=""
+            />
+            <p>{{ item.name }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 顶部楼层 -->
+    <div class="titMap" v-show="showId===8">
+      <!-- 提示框 -->
+      <div class="tit">
+        <h3>
+          <span>地图</span>
+          <div class="ind">{{ showId }}/8</div>
+        </h3>
+        <div class="txt">可切换楼层，或查看场景3D模型</div>
+        <div class="btn">
+          <div :class="{ noAc: showId === 1 }" @click="showId--">
+            <i class="el-icon-arrow-left"></i>上一条
+          </div>
+          <div @click="show = false">关闭</div>
+          <div :class="{ noAc: showId === 8 }" @click="showId++">
+            下一条<i class="el-icon-arrow-right"></i>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Guide",
+  components: {},
+  data() {
+    return {
+      show: true,
+      showId: 1,
+      leftList: [
+        { id: 1, name: "自动漫游", tit: "自动游览线上场馆", type: 1 },
+        { id: 2, name: "场景导览", tit: "查看场景内所有镜头点位", type: 2 },
+        { id: 3, name: "全景漫游", tit: "手动自主漫游", type: 3 },
+        { id: 4, name: "迷你模型", tit: "查看场景3D模型", type: 4 },
+        { id: 5, name: "顶部俯视", tit: "查看场景平面图", type: 5 },
+        { id: 6, name: "热点列表", tit: "查看场景内所有交互热点", type: 6 },
+      ],
+      rightList: [
+        { id: 7, name: "首页", type: 1 },
+        { id: 8, name: "声音", type: 2 },
+        { id: 9, name: "点赞", type: 3 },
+        { id: 10, name: "分享", type: 4 },
+        { id: 11, name: "全屏", type: 5 },
+      ],
+    };
+  },
+  computed: {},
+  watch: {
+    show(val){
+      if(!val) sessionStorage.setItem('YHT_SWKK_FLAG',1)
+    }
+  },
+  methods: {},
+  created() {
+    let flag= sessionStorage.getItem('YHT_SWKK_FLAG')
+    if(flag) this.show=false
+  },
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.Guide {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s;
+  position: absolute;
+  z-index: 20;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  .mainBox {
+    position: absolute;
+    bottom: 30px;
+    right: 0px;
+    width: 100%;
+    .box1 {
+      padding: 0 25px;
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      .mainrr {
+        display: flex;
+        position: relative;
+        .tit {
+          text-align: left;
+          z-index: 10;
+          position: absolute;
+          top: -180px;
+          left: 0;
+          width: 300px;
+          height: 180px;
+          background-image: url("../assets/img/Union.png");
+          background-size: 100% 100%;
+          color: #fff;
+          padding: 15px;
+          h3 {
+            font-size: 20px;
+            color: #d8b275;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .ind {
+              color: #fff;
+              font-size: 12px;
+            }
+          }
+          .txt {
+            font-size: 14px;
+            margin: 12px 0;
+          }
+          .btn {
+            margin-top: 24px;
+            display: flex;
+            justify-content: space-around;
+            & > div {
+              cursor: pointer;
+              font-size: 14px;
+              padding: 6px 10px;
+              border: 1px solid #d8b275;
+              border-radius: 3px;
+              i {
+                padding-top: 2px;
+              }
+            }
+            .noAc {
+              border: 1px solid #ccc;
+              color: #ccc;
+              pointer-events: none;
+            }
+          }
+        }
+
+        .row {
+          position: relative;
+          width: 50px;
+          text-align: center;
+          margin-left: 18px;
+          color: #fff;
+
+          & > img {
+            width: 50px;
+          }
+
+          p {
+            font-size: 12px;
+          }
+        }
+      }
+
+      .mainll {
+        .row {
+          opacity: 0;
+          pointer-events: none;
+          width: 80px;
+          margin-left: 0;
+        }
+        .rowAc {
+          opacity: 1;
+          pointer-events: auto;
+        }
+      }
+    }
+  }
+  .titMap {
+    z-index: 10;
+    position: absolute;
+    right: 20px;
+    top: 28px;
+    width: 184px;
+    height: 219px;
+    background-image: url("../assets/img/titMap.jpg");
+    background-size: 100% 100%;
+    border-radius: 6px;
+    .tit {
+      text-align: left;
+      z-index: 10;
+      position: absolute;
+      bottom: -180px;
+      left: -200px;
+      width: 300px;
+      height: 180px;
+      background-image: url("../assets/img/Union2.png");
+      background-size: 100% 100%;
+      color: #fff;
+      padding: 30px 15px 0;
+      h3 {
+        font-size: 20px;
+        color: #d8b275;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .ind {
+          color: #fff;
+          font-size: 12px;
+        }
+      }
+      .txt {
+        font-size: 14px;
+        margin: 12px 0;
+      }
+      .btn {
+        margin-top: 24px;
+        display: flex;
+        justify-content: space-around;
+        & > div {
+          cursor: pointer;
+          font-size: 14px;
+          padding: 6px 10px;
+          border: 1px solid #d8b275;
+          border-radius: 3px;
+          i {
+            padding-top: 2px;
+          }
+        }
+        .noAc {
+          border: 1px solid #ccc;
+          color: #ccc;
+          pointer-events: none;
+        }
+      }
+    }
+  }
+}
+.show {
+  opacity: 1;
+  pointer-events: auto;
+}
+</style>

SWKK/src/views/Home.vue

@@ -40,16 +40,20 @@
 
     <!-- 点击热点出来的界面 -->
     <Hot v-if="sonInfo" :info="sonInfo" @hotClose="hotClose" />
+
+    <!-- 新手指引页面 -->
+    <Guide />
   </div>
 </template>
 
 <script>
 import Hot from "../components/Hot.vue";
+import Guide from "../components/Guide.vue";
 import Rbottom from "../components/Rbottom.vue";
 export default {
   name: "Home",
   //import引入的组件需要注入到对象中才能使用
-  components: { Rbottom, Hot },
+  components: { Rbottom, Hot,Guide },
   data() {
     //这里存放数据
     return {

vue/src/views/Goods/components/Guide.vue

@@ -0,0 +1,409 @@
+<template>
+  <div class="Guide" :class="{ show }">
+    <!-- 左侧搜索 -->
+    <div class="leftTop">
+      <!-- 1 -->
+      <div class="model" :class="{ modelAc: showId === 1 }">
+        <div class="row1 active">
+          <div class="rowll"></div>
+          <div class="rowrr">三维展示</div>
+        </div>
+        <div class="row1">
+          <div class="rowll"></div>
+          <div class="rowrr">二维展示</div>
+        </div>
+        <!-- 提示框 -->
+        <div class="tit">
+          <h3>
+            <span>文物展示：</span>
+            <div class="ind">{{ showId }}/4</div>
+          </h3>
+          <div class="txt">查看立体三维文物/平面二维文物</div>
+          <div class="btn">
+            <div :class="{ noAc: showId === 1 }" @click="showId--">
+              <i class="el-icon-arrow-left"></i>上一条
+            </div>
+            <div @click="show = false">跳过</div>
+            <div :class="{ noAc: showId === 4 }" @click="showId++">
+              下一条<i class="el-icon-arrow-right"></i>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 2 -->
+      <div class="type" :class="{ modelAc: showId === 2 }">
+        <div class="typell">类型：</div>
+        <div class="typerr">
+          <div
+            class="row"
+            :class="{ active: index === 0 }"
+            v-for="(item, index) in genreList"
+            :key="item.bs"
+          >
+            {{ item.name }}
+          </div>
+        </div>
+        <!-- 提示框 -->
+        <div class="tit">
+          <h3>
+            <span>类别筛选：</span>
+            <div class="ind">{{ showId }}/4</div>
+          </h3>
+          <div class="txt">根据文物类型，筛选出对应文物</div>
+          <div class="btn">
+            <div :class="{ noAc: showId === 1 }" @click="showId--">
+              <i class="el-icon-arrow-left"></i>上一条
+            </div>
+            <div @click="show = false">跳过</div>
+            <div :class="{ noAc: showId === 4 }" @click="showId++">
+              下一条<i class="el-icon-arrow-right"></i>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 3 -->
+      <div class="inputSearch" :class="{ modelAc: showId === 3 }">
+        <input disabled class="searll" type="text" />
+        <div class="searrr">
+          <img src="@/assets/img/Goods/search.svg" alt="" />
+        </div>
+        <!-- 提示框 -->
+        <div class="tit">
+          <h3>
+            <span>文物搜索：</span>
+            <div class="ind">{{ showId }}/4</div>
+          </h3>
+          <div class="txt">根据文物名称，智能搜索</div>
+          <div class="btn">
+            <div :class="{ noAc: showId === 1 }" @click="showId--">
+              <i class="el-icon-arrow-left"></i>上一条
+            </div>
+            <div @click="show = false">跳过</div>
+            <div :class="{ noAc: showId === 4 }" @click="showId++">
+              下一条<i class="el-icon-arrow-right"></i>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 右侧图标 -->
+    <div class="rightTop" :class="{ modelAc: showId === 4 }">
+      <div class="row" v-for="item in rightList" :key="item.type">
+        <img :src="require(`@/assets/img/Goods/inco${item.type}.png`)" alt="" />
+        <p>
+          {{ item.name }}
+        </p>
+      </div>
+      <!-- 提示框 -->
+      <div class="tit">
+        <h3>
+          <span>更多</span>
+          <div class="ind">{{ showId }}/4</div>
+        </h3>
+        <div class="txt">可回到首页，关闭/开启声音，点赞和分享</div>
+        <div class="btn">
+          <div :class="{ noAc: showId === 1 }" @click="showId--">
+            <i class="el-icon-arrow-left"></i>上一条
+          </div>
+          <div @click="show = false">关闭</div>
+          <div :class="{ noAc: showId === 4 }" @click="showId++">
+            下一条<i class="el-icon-arrow-right"></i>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Guide",
+  components: {},
+  data() {
+    return {
+      show: true,
+      showId: 1,
+      genreList: [
+        { name: "全部", type: "all" },
+        { name: "书刊", type: "book" },
+        { name: "用具", type: "tool" },
+        { name: "服装", type: "clothing" },
+      ],
+      rightList: [
+        { name: "首页", type: 1 },
+        { name: "声音", type: 2 },
+        { name: "点赞", type: 3 },
+        { name: "分享", type: 4 },
+      ],
+    };
+  },
+  computed: {},
+  watch: {
+    show(val) {
+      if (!val) sessionStorage.setItem("YHT_GOODS_FLAG", 1);
+    },
+  },
+  methods: {},
+  created() {
+    let flag = sessionStorage.getItem("YHT_GOODS_FLAG");
+    if (flag) this.show = false;
+  },
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.Guide {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s;
+  position: absolute;
+  z-index: 20;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  .modelAc {
+    opacity: 1 !important;
+    pointer-events: auto !important;
+  }
+  .tit {
+    text-align: left;
+    z-index: 10;
+    position: absolute;
+    bottom: -220px;
+    left: -50px;
+    width: 300px;
+    height: 180px;
+    background-image: url("../../../assets/img/Union2.png");
+    background-size: 100% 100%;
+    color: #fff;
+    padding: 30px 15px 0;
+    h3 {
+      font-size: 20px;
+      color: #d8b275;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .ind {
+        color: #fff;
+        font-size: 12px;
+      }
+    }
+    .txt {
+      font-size: 14px;
+      margin: 12px 0;
+    }
+    .btn {
+      margin-top: 24px;
+      display: flex;
+      justify-content: space-around;
+      & > div {
+        cursor: pointer;
+        font-size: 14px;
+        padding: 6px 10px;
+        border: 1px solid #d8b275;
+        border-radius: 3px;
+        i {
+          padding-top: 2px;
+        }
+      }
+      .noAc {
+        border: 1px solid #ccc;
+        color: #ccc;
+        pointer-events: none;
+      }
+    }
+  }
+  .leftTop {
+    position: absolute;
+    top: 42px;
+    left: 160px;
+    height: 40px;
+    display: flex;
+
+    .model {
+      position: relative;
+      opacity: 0;
+      pointer-events: none;
+      color: #fff;
+      width: 260px;
+      height: 40px;
+      border-radius: 20px;
+      background-color: #930909;
+      display: flex;
+      justify-content: space-between;
+      padding: 0 22px;
+      margin-right: 40px;
+
+      .row1 {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 16px;
+
+        .rowll {
+          margin-right: 6px;
+          width: 24px;
+          height: 24px;
+          border-radius: 50%;
+          border: 1px solid #d8b275;
+          position: relative;
+        }
+
+        .rowrr {
+          padding-bottom: 2px;
+        }
+      }
+
+      .active {
+        color: #d8b275;
+
+        .rowll {
+          &::after {
+            content: "";
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            border-radius: 50%;
+            width: 14px;
+            height: 14px;
+            background-color: #d8b275;
+          }
+        }
+      }
+    }
+
+    .type {
+      position: relative;
+      opacity: 0;
+      pointer-events: none;
+      display: flex;
+      font-size: 16px;
+      color: #fff;
+      background-color: #930909;
+      height: 40px;
+      border-radius: 20px;
+      padding: 0 20px;
+      margin-right: 40px;
+
+      .typell {
+        width: 50px;
+        line-height: 38px;
+      }
+
+      .typerr {
+        display: flex;
+        align-items: center;
+        padding-bottom: 4px;
+
+        .row {
+          margin: 0 10px;
+        }
+
+        .active {
+          color: #d8b275;
+          position: relative;
+
+          &::after {
+            content: "";
+            position: absolute;
+            bottom: -4px;
+            left: 0;
+            width: 100%;
+            height: 2px;
+            background-color: #d8b275;
+          }
+        }
+      }
+    }
+
+    .inputSearch {
+      position: relative;
+      opacity: 0;
+      pointer-events: none;
+      display: flex;
+      font-size: 16px;
+      color: #fff;
+      width: 260px;
+      height: 40px;
+      border-radius: 20px;
+      display: flex;
+
+      .searll {
+        border-radius: 20px 0 0 20px;
+        width: 214px;
+        height: 40px;
+        border: none;
+        background-color: #fff;
+        padding: 0 10px 0 20px;
+
+        &:focus {
+          outline: none;
+        }
+      }
+
+      .searrr {
+        border-radius: 0px 20px 20px 0px;
+        background-color: #930909;
+        width: 46px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding-right: 4px;
+
+        img {
+          width: 24px;
+          height: 24px;
+        }
+      }
+    }
+  }
+  .rightTop {
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    top: 32px;
+    right: 100px;
+    height: 60px;
+    display: flex;
+
+    .row {
+      position: relative;
+      width: 50px;
+      text-align: center;
+      margin-left: 24px;
+
+      & > img {
+        width: 50px;
+      }
+
+      .likeMove {
+        color: #930909;
+        position: absolute;
+        top: 10px;
+        width: 100%;
+        text-align: center;
+      }
+    }
+
+    .active2 {
+      color: #930909;
+    }
+  }
+}
+.show {
+  opacity: 1;
+  pointer-events: auto;
+}
+</style>

vue/src/views/Goods/index.vue

@@ -84,10 +84,12 @@
         <div class="btnn" @click="copyPcTxt">复制分享链接</div>
       </div>
     </div>
+    <Guide />
   </div>
 </template>
 
 <script>
+import Guide from './components/Guide.vue'
 import { addNumAPI } from "@/utils/api";
 
 import { goodsData } from "./data";
@@ -103,7 +105,7 @@ goodsData['2D'] = goodsData['2D'].map(v => ({
 export default {
   name: "Goods",
   //import引入的组件需要注入到对象中才能使用
-  components: { Three, Tow },
+  components: { Three, Tow,Guide },
   data() {
     //这里存放数据
     return {