upp

scene/public/index.html

@@ -11,7 +11,7 @@
     <meta property="og:title" content="四维时代">
     <meta property="og:description" content="四维时代">
     <meta property="og:image:type" content="image/jpg">
-    <!-- <link rel="icon" type="image/png" sizes="32x32" href="./favicon.ico" class="keep"> -->
+    <link rel="icon" type="image/png" sizes="32x32" href="./favicon.ico" class="keep">
     <link rel="stylesheet" href="<%= VUE_APP_STATIC_DIR %>/css/oldVer/main0.css" />
     <link rel="stylesheet" href="<%= VUE_APP_STATIC_DIR %>/css/main.css?v=2.25" />
     <!-- <link rel="stylesheet" href="<%= VUE_APP_STATIC_DIR %>/CAD/cad.css?v=2.25"/> -->
@@ -25,8 +25,8 @@
         // if (number.indexOf("#") != -1) {
         //     number = number.substring(0, number.indexOf("#"));
         // }
-        var number ='1359'
-        // var number ='SG-mSXPpz8xPea'
+        //  var number ='1359'
+        var number ='SG-mSXPpz8xPea'
     </script>
 
     <script class="build keep">

scene/public/static/js/Hot.js

@@ -60,7 +60,7 @@ window.initHot = function(model){
         var r = link.substring(link.indexOf("html") + 4),
             o = "en" == manage.number("lang") ? "&lang=" + manage.number("lang") : ""; 
         -1 == r.indexOf("?") ? src = link + "?time=" + randomTime().getTime() + "&id=" + window.number + o : src = link + "&time=" + randomTime().getTime() + "&id=" + window.number + o
-        return src.replace('https://www.4dmodel.com/SuperTwo/hot_online1', 'http://192.168.20.55:8080')
+        return src.replace('https://www.4dmodel.com/SuperTwo/hot_online1', 'hot')
         // return src //打包   
        
     }

scene/public/static/js/loadCAD.js

@@ -42,9 +42,8 @@ window.grendCAD = (function grendCAD() {
         top: 20px;
         width: 180px;
         height: 180px;
-        background: rgba(81, 32, 32, 0.4);
+        background: rgba(200, 160, 99, 0.60);
         border-radius: 5px;
-        border: 2px solid #D6B970;
         pointer-events: none;
       }
 
@@ -62,9 +61,8 @@ window.grendCAD = (function grendCAD() {
           top: 10px;
           width: 120px;
           height: 120px;
-          background: rgba(81, 32, 32, 0.4);
+          background: rgba(200, 160, 99, 0.60);
           border-radius: 5px;
-          border: 2px solid #D6B970;
           }
       }
     `

scene/public/static/js/manage.js

@@ -2142,8 +2142,8 @@ function logSth(){
     漫游点数 ${panoCount} 个)`, '#FF4399', 14)
 }
 
-// window.sceneFrom = number.slice(0,3) == 'KJ-' ? 'kankan' : '' //看看or看见转来的
-window.sceneFrom = (number.length > 6 && number.slice(0,3).includes('-') || browser.urlHasValue('kankan') ) ? 'kankan' : ''  //看看or看见转来的
+window.sceneFrom = number.slice(0,3) == 'KJ-' ? 'kankan' : '' //看看or看见转来的
+// window.sceneFrom = (number.length > 6 && number.slice(0,3).includes('-') || browser.urlHasValue('kankan') ) ? 'kankan' : ''  //看看or看见转来的
 
 //兼容一代的場景
 //請求地址統一管理

scene/src/assets/style/myBase.css

@@ -17,20 +17,20 @@
   color: #fff;
 }
 #thumb-container .active .overlay {
-  color: #D6B970;
+  color: #FCDA99;
 }
 #thumb-container .active > img {
-  border: 3px solid #D6B970;
+  border: 2px solid #FCDA99;
 }
 #drawer {
-  background-color: rgba(185, 12, 12, 0.8);
+  background-color: rgba(200, 160, 99, 0.8);
 }
 #drawer .darkGlass {
   background-color: transparent;
 }
 #progressBar .step.active::before,
 #progressBar .step.recent::before {
-  background-color: #D6B970;
+  background-color: #FCDA99;
 }
 #popup {
   background: none;
@@ -40,16 +40,26 @@
 }
 #cad path {
   stroke-width: 0.5;
-  fill: rgba(185, 12, 12, 0.8);
-  stroke: #d1b198;
+  fill: #f58543;
+  stroke: #FFF;
 }
 #ele1 circle {
-  fill: rgba(185, 12, 12, 0.8);
+  fill: #f58543;
   r: 1;
 }
 #share-modal {
   display: none !important;
 }
+#scroller .handle {
+  height: 4px;
+  background-color: #FCDA99;
+}
+#playHead #status {
+  background-color: rgba(200, 160, 99, 0.8);
+}
+#playHead #progressBar {
+  background-color: rgba(200, 160, 99, 0.8);
+}
 @media screen and (max-width: 1000px) {
   #drawer.open.noScroll {
     height: 118px !important;

scene/src/assets/style/myBase.less

@@ -26,17 +26,17 @@
 
   .active {
     .overlay {
-      color: #D6B970;
+      color: #FCDA99;
     }
 
     &>img {
-      border: 3px solid #D6B970;
+      border: 2px solid #FCDA99;
     }
   }
 }
 
 #drawer {
-  background-color: rgba(185, 12, 12, 0.80);
+  background-color: rgba(200, 160, 99, 0.80);
 
   .darkGlass {
     background-color: transparent;
@@ -45,7 +45,7 @@
 
 #progressBar .step.active::before,
 #progressBar .step.recent::before {
-  background-color: #D6B970;
+  background-color: #FCDA99;
 }
 
 #popup {
@@ -58,14 +58,14 @@
 
 #cad path {
   stroke-width: 0.5;
-  fill: rgba(185, 12, 12, 0.80);
+  fill: #f58543;
   // 改变地图线的颜色
-  stroke: #d1b198
+  stroke: #FFF
 }
 
 #ele1 {
   circle {
-    fill: rgba(185, 12, 12, 0.80);
+    fill: #f58543;
     r: 1;
   }
 }
@@ -73,6 +73,21 @@
 #share-modal{
   display: none !important;
 }
+// 滚动条
+#scroller{
+ .handle{
+  height: 4px;
+  background-color: #FCDA99;
+ }
+}
+
+// 自动导览进度条
+#playHead #status{
+background-color: rgba(200, 160, 99, 0.80);
+}
+#playHead #progressBar{
+  background-color: rgba(200, 160, 99, 0.80);
+}
 
 // 移动端
 @media screen and (max-width: 1000px) {

scene/src/pages/Home.vue

@@ -80,9 +80,17 @@
     </div>
 
     <!-- 左上方logo -->
-    <!-- <div class="leftTopLogo" v-show="!isMobile">
-      <img src="../assets/img/home/logo.png" alt="" />
-    </div> -->
+    <div class="leftTopLogo">
+        <img class="leftTopLogo1" src="../assets/img/home/logo.png" alt="" />
+
+      <div class="leftTopLogo2"></div>
+      <div class="leftTopLogo3">
+        <p>欢迎您的到来，您是第{{isVisNum}}位参观者！</p>
+        <p>
+          <img src="../assets/img/home/icon-liulan.png" alt="">
+          <span>{{isVisNum}}</span>浏览量</p>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -98,9 +106,8 @@ import guimsg from "@/views/gui/guimsg";
 import vError from "@/views/gui/error";
 import vrCon from "@/views/gui/vrcon";
 import vOther from "@/views/gui/other";
-import welcome from "@/components/welcome";
 
-import { addVisitAPI } from "../utils/api";
+import { getVisitAPI,addVisitAPI } from "../utils/api";
 
 export default {
   name: "Home",
@@ -122,6 +129,8 @@ export default {
     return {
       hotspots: "",
       loading: true,
+      // 访问量
+      isVisNum:0
     };
   },
 
@@ -165,13 +174,10 @@ export default {
     });
   },
   async created() {
-    window.manage.switchBgmState(true);
-    // 发送访问量
-    try {
-      await addVisitAPI();
-    } catch (e) {
-      console.log(e);
-    }
+    await addVisitAPI()
+    const res =await getVisitAPI()
+    this.isVisNum=res.data.visitSum
+    
   },
 };
 </script>
@@ -203,9 +209,37 @@ export default {
 .leftTopLogo {
   pointer-events: none;
   position: fixed;
-  z-index: 11000;
-  top: 30px;
-  left: 30px;
+  // z-index: 9998;
+  top: 20px;
+  left: 20px;
+  display: flex;
+  .leftTopLogo1{
+    // width: 90px;
+  }
+  .leftTopLogo2{
+    margin: 0 15px;
+    background: linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 1),rgba(255, 255, 255, 0.15));
+    width: 1px;
+    height: 40px;
+  }
+  .leftTopLogo3{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    &>p{
+      img{
+        width: 20px;
+
+      }
+      &>span{
+        font-weight: 700;
+        position: relative;
+        top: 1px;
+        display: inline-block;
+        margin: 0 10px;
+      }
+    }
+  }
 }
 
 </style>

scene/src/utils/api.js

@@ -3,7 +3,7 @@ import axios from './request'
 export const addVisitAPI = () => {
   return axios({
     method: 'get',
-    url: `show/addVisit/${1}`,
+    url: `count/saveVisit/SG-mSXPpz8xPea`,
   })
 }
 
@@ -11,6 +11,6 @@ export const addVisitAPI = () => {
 export const getVisitAPI = () => {
   return axios({
     method: 'get',
-    url: 'show/share/detail',
+    url: `count/detail/SG-mSXPpz8xPea`,
   })
 }

scene/src/utils/request.js

@@ -1,6 +1,6 @@
 import axios from 'axios'
 
-export const baseURL = process.env.NODE_ENV === "development" ? "https://leifengbwg.4dage.com" : "";
+export const baseURL = process.env.NODE_ENV === "development" ? "https://count.4dage.com" : "https://count.4dage.com";
 
 const service = axios.create({
   baseURL: baseURL + "/api/",

scene/src/views/gui/components/hotList.vue

@@ -63,8 +63,8 @@ export default {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  background-image: url("../../../assets/img/open/bg-list.png");
-  background-size: 100% 100%;
+  border-radius: 6px;
+  background-color: rgba(200, 160, 99, 0.80);
   padding: 60px 80px;
   .title {
     height: 60px;
@@ -73,7 +73,7 @@ export default {
     justify-content: space-between;
     .titleLL {
       font-size: 24px;
-      color: #d6b970;
+      color: #FCDA99;
     }
     .titleRR {
       cursor: pointer;
@@ -86,7 +86,7 @@ export default {
     overflow-y: auto;
     .txtNone {
       height: 100%;
-      color: #d6b970;
+      color: #FCDA99;
       font-size: 20px;
       display: flex;
       align-items: center;
@@ -107,15 +107,15 @@ export default {
           border-bottom: 1px solid #f0e2c0;
         }
         &:hover {
-          color: #d6b970;
+          color: #FCDA99;
         }
       }
       .active {
-        color: #d6b970;
+        color: #FCDA99;
       }
     }
     &::-webkit-scrollbar-thumb {
-      outline: 2px solid #d6b970;
+      outline: 2px solid #FCDA99;
     }
     &::-webkit-scrollbar {
       width: 2px;
@@ -148,7 +148,7 @@ export default {
           }
         }
         .active {
-          color: #d6b970 !important;
+          color: #FCDA99 !important;
         }
       }
     }

scene/src/views/gui/components/share.vue

@@ -1,78 +1,60 @@
 <template>
   <div class="share">
-    <div class="imgBox" v-if="isOk">
-      <img :src="isOk" alt="" />
-      <p>{{ isMobile ? "可长按图片保存" : "可点击鼠标右键保存图片" }}</p>
-    </div>
-    <div class="main" id="canvsBox" v-else>
-      <!-- 数字 -->
-      <div class="txt">
-        第&nbsp;&nbsp;<span>{{ num }}</span
-        >&nbsp;&nbsp;位参与者
-      </div>
-      <!-- 二维码 -->
-      <div class="code">
-        <img src="code.png" alt="" />
+    <div class="title">
+      <div class="titleLL">分享</div>
+      <div class="titleRR" @click="$emit('close')">
+        <img src="../../../assets/img/close.png" alt="" />
       </div>
     </div>
-    <!-- 加载中 -->
-    <div
-      class="logingBox"
-      v-loading="!isOk"
-      element-loading-text="生成海报中"
-      element-loading-background="rgba(0, 0, 0, 0.8)"
-    ></div>
-    <div class="close" @click="$emit('close')">
-      <img src="../../../assets/img/close.png" alt="" />
+
+    <div class="shaTxt">
+      <p>请使用手机扫描二维码或</p>
+      <p>复制分享链接</p>
+    </div>
+
+    <div class="codeBox">
+      <img src="../../../assets/img/code.png" alt="">
+    </div>
+
+    <div class="shaBtn" @click="copyPcTxt">
+      复制分享链接
     </div>
+
   </div>
 </template>
 
 <script>
-import html2canvas from "html2canvas";
-import { getVisitAPI } from "../../../utils/api";
 export default {
   components: {},
-  props: ["openInd"],
   data() {
-    return {
-      num: 0,
-      // 生成截图成功
-      isOk: "",
-    };
+    return {};
   },
   computed: {},
-  watch: {
-    openInd(val) {
-      if (val === 2) {
-        if (!this.isOk) this.toImgFu();
-      }
-    },
-  },
+  watch: {},
   methods: {
-    // 生成截图
-    toImgFu() {
-      window.setTimeout(() => {
-        const dom = document.querySelector("#canvsBox");
-        html2canvas(dom, {
-          // backgroundColor: "transparent",
-          allowTaint: true,
-          useCORS: true,
-        }).then((canvas) => {
-          const link = canvas.toDataURL("image/jpeg");
-          this.isOk = link;
-        });
-      }, 100);
+    copyPcTxt() {
+      // 存储传递过来的数据
+      let OrderNumber = window.location.href;
+      // 创建一个input 元素
+      // createElement() 方法通过指定名称创建一个元素
+      let newInput = document.createElement("input");
+      // 讲存储的数据赋值给input的value值
+      newInput.value = OrderNumber;
+      // appendChild() 方法向节点添加最后一个子节点。
+      document.body.appendChild(newInput);
+      // 选中input元素中的文本
+      // select() 方法用于选择该元素中的文本。
+      newInput.select();
+      // 执行浏览器复制命令
+      //  execCommand方法是执行一个对当前文档，当前选择或者给出范围的命令
+      document.execCommand("Copy");
+      // 清空输入框
+      newInput.remove();
+      // 下面是element的弹窗 不需要的自行删除就好
+      alert('复制链接成功!')
     },
   },
-  async created() {
-    try {
-      const res = await getVisitAPI();
-      this.num = res.data.pcsShow + res.data.pcsVisit;
-    } catch (e) {
-      console.log(e);
-    }
-  },
+  created() {},
   mounted() {},
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
@@ -83,128 +65,58 @@ export default {
   activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
-<style lang='less' scoped>
+<style lang="less" scoped>
 .share {
   position: absolute;
+  width: 350px;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  width: 542px;
-  height: 820px;
-  .imgBox {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    & > img {
-      width: 100%;
-      height: 100%;
-    }
-    & > p {
-      position: absolute;
-      bottom: 10px;
-      right: 34px;
-      bottom: 20px;
-      width: 80px;
-      font-size: 12px;
-      text-align: center;
+  border-radius: 6px;
+  background-color: rgba(200, 160, 99, 0.8);
+  padding: 20px 20px 60px;
+  .title {
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .titleLL {
+      font-size: 24px;
+      color: #fcda99;
     }
-  }
-  .logingBox {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 99;
-  }
-  .main {
-    width: 100%;
-    height: 100%;
-    background-image: url("../../../assets/img/open/bg-share.jpg");
-    background-size: 100% 100%;
-    position: relative;
-    .txt {
-      position: absolute;
-      bottom: 185px;
-      right: 30px;
-      color: #d6b970;
-      & > span {
-        font-size: 36px;
-        font-weight: 700;
-      }
-    }
-    .code {
-      position: absolute;
-      bottom: 60px;
-      right: 34px;
-      width: 80px;
-      & > img {
-        border-radius: 6px;
-        width: 80px;
-      }
+    .titleRR {
+      cursor: pointer;
     }
   }
-  .close {
-    z-index: 99;
-    position: absolute;
-    right: -40px;
-    top: 10px;
-    cursor: pointer;
+  .shaTxt{
+    font-size: 18px;
+    margin: 30px;
+    text-align: center;
   }
-}
-// 移动端
-@media screen and (max-width: 1000px) {
-  .share {
-    max-width: 500px;
-    width: 90%;
-    height: 90%;
-    .imgBox {
-      & > p {
-        font-size: 12px;
-        bottom: 10px;
-        width: 120px;
-        right: 14px;
-        text-align: right;
-      }
-    }
-    .main {
-      // background-image: url("../../../assets/img/open/bg-shareM.jpg");
-      // background-size: 100% 100%;
 
-      .txt {
-        bottom: 24%;
-        right: 14px;
-        & > span {
-          font-size: 24px;
-        }
-      }
-      .code {
-        width: 84px;
-        bottom: 30px;
-        right: 14px;
-        & > img {
-          width: 84px;
-        }
-      }
-    }
-    .close {
-      position: absolute;
-      right: -14px;
-      top: -14px;
-      cursor: pointer;
+  .codeBox{
+    border-radius: 8px;
+    overflow: hidden;
+    text-align: center;
+    width: 60%;
+    margin: 0 auto;
+    &>img{
+      width: 100%;
     }
   }
-}
-@media screen and (max-width: 370px) {
-  .share {
-    .main {
-      .txt {
-        font-size: 12px;
-        & > span {
-          font-size: 18px;
-        }
-      }
-    }
+
+  .shaBtn{
+    height: 50px;
+    width: 70%;
+    margin: 0 auto;
+    margin-top: 30px;
+    border-radius: 25px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    background-color: #F58543;
+    border: 2px solid #C8A063;
   }
 }
-</style>
+</style>

scene/src/views/gui/menu.vue

@@ -214,20 +214,6 @@
           <a>{[{ TERMS }]}</a>
         </div>
 
-        <!-- 回到pc页面（首页） -->
-        <div class="toHomeBox" @click="toHomeFu">
-          <!-- 鼠标移入的显示 -->
-          <div class="hoverTit">回到首页</div>
-          <img src="../../assets/img/toHome.png" alt="" />
-        </div>
-
-        <!-- vr -->
-        <div class="toHomeBox" @click="openVR">
-          <!-- 鼠标移入的显示 -->
-          <div class="hoverTit">VR</div>
-          <img src="../../assets/img/openVR.png" alt="" />
-        </div>
-
         <!-- 音乐 -->
         <div id="volume" class="ui-icon bgandshare wide">
           <!-- 鼠标移入的显示 -->
@@ -260,7 +246,7 @@
 
     <div class="openBox" :class="{ openBoxAc: openInd }">
       <HotList v-if="openInd === 1" @close="openInd = 0" />
-      <Share v-show="openInd === 2" @close="openInd = 0" :openInd="openInd" />
+      <Share v-if="openInd === 2" @close="openInd = 0" />
     </div>
     <!-- 手动触发导览 -->
 
@@ -272,7 +258,7 @@ import HotList from "./components/hotList.vue";
 import Share from "./components/share.vue";
 
 export default {
-  components: { HotList, Share },
+  components: { HotList,Share },
   props: {
    
   },
@@ -282,11 +268,24 @@ export default {
       musicState: false,
       // vr---热点列表---分享
       openInd: 0,
+      musicTime:-1,
     };
   },
   watch: {},
   computed: {},
-  mounted() {},
+  mounted() {
+
+    this.musicTime= setInterval(() => {
+      try {
+        this.switchBGM(true)
+        clearInterval(this.musicTime)
+      } catch (error) {
+        console.log(error);
+        
+      }
+    }, 500);
+
+  },
   methods: {
     switchBGM(flag) {
       this.musicState = flag;
@@ -304,15 +303,6 @@ export default {
         document.querySelector("#closeMusic").style.display = "none";
       }
     },
-    // 点击vr
-    openVR() {
-      window.open("https://www.720yun.com/t/acvkiwdegqb?scene_id=34882556");
-    },
-    // 点击回到首页
-    toHomeFu() {
-      this.switchBGM(false);
-      this.$emit("toHome");
-    },
   },
 };
 </script>

scene/src/views/gui/title.vue

@@ -1,77 +1,119 @@
 <template>
-  <div class="pinTop left" v-show="0">
-                <div id="model-title">
-                    <div class="title-row">
-                        <div id="title-toggle">
-                            <a>
-                                <i class="icon icon-dpad-left"></i>
-                            </a>
-                        </div>
-                        <div id="title-container-wrapper" rel="tooltip" data-placement="bottom" data-html="true">
-                            <div class="title-container  meta-toggle">
-                                <div class="co-brand">
-                                    {[{ PRESENTED_BY }]}<span class="title" id="cobrandTitle"></span>
-                                </div>
-                                <div id="title-logo">
-                                    <i></i>
-                                </div>
-                                <div id="gui-name" class="titleText"></div>
-                                <a id="more-hint"><i class="icon icon-dpad-down"></i></a>
-                                <a id="less-hint"><i class="icon icon-dpad-up"></i></a>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div id="meta-info-wrapper">
-                    <div id="meta-info" class="darkGlass">
-                        <div id="meta-description"></div>
-                        <div class="contact-info">
-                            <i class="icon icon-user pull-left"></i>
-                            &#xA0;<div id="contact-data"></div>
-                        </div>
-                        <div class="address">
-                            <i class="icon icon-pin"></i>
-                            <span id="addressTxt"></span>
-                        </div>
-                        <div id="tag-toggles" class="menu-toggles hidden">
-                            <span>{[{ MATTERTAG_CONTENT }]}</span>
-                            <div id="tag-inputs" class="menu-radios">
-                                <div id="show-tag" class="menu-radio-show">
-                                    <input id="radio-tag-show" type="radio" name="tags" value="show">
-                                    <label for="radio-tag-show">{[{ SHOW }]}</label>
-                                </div>
-                                <div id="hide-tag" class="menu-radio-hide">
-                                    <input id="radio-tag-hide" type="radio" name="tags" value="hide">
-                                    <label for="radio-tag-hide">{[{ HIDE }]}</label>
-                                </div>
-                            </div>
-                        </div>
-                        <div id="labels-toggles" class="menu-toggles hidden">
-                            <span>Labels</span>
-                            <div id="labels-inputs" class="menu-radios">
-                                <div id="show-label" class="menu-radio-show">
-                                    <input id="radio-labels-show" type="radio" name="labels" value="show">
-                                    <label for="radio-labels-show">Show</label>
-                                </div>
-                                <div id="hide-label" class="menu-radio-hide">
-                                    <input id="radio-labels-hide" type="radio" name="labels" value="hide">
-                                    <label for="radio-labels-hide">Hide</label>
-                                </div>
-                            </div>
-                        </div>
-                        <div id="share-origin" class="hidden">
-                            <hr>
-                            <div>
-                                <i class="icon icon-ext-link"></i>
-                                <div id="share-link-wrapper"></div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+  <div class="pinTop left">
+    <div id="model-title">
+      <div class="title-row">
+        <div id="title-toggle">
+          <a>
+            <i class="icon icon-dpad-left"></i>
+          </a>
+        </div>
+        <div
+          id="title-container-wrapper"
+          rel="tooltip"
+          data-placement="bottom"
+          data-html="true"
+        >
+          <div class="title-container meta-toggle">
+            <div class="co-brand">
+              {[{ PRESENTED_BY }]}<span class="title" id="cobrandTitle"></span>
             </div>
+            <div id="title-logo">
+              <i></i>
+            </div>
+            <div id="gui-name" class="titleText"></div>
+            <a id="more-hint"><i class="icon icon-dpad-down"></i></a>
+            <a id="less-hint"><i class="icon icon-dpad-up"></i></a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="meta-info-wrapper">
+      <div id="meta-info" class="darkGlass">
+        <div id="meta-description"></div>
+        <div class="contact-info">
+          <i class="icon icon-user pull-left"></i>
+          &#xA0;
+          <div id="contact-data"></div>
+        </div>
+        <div class="address">
+          <i class="icon icon-pin"></i>
+          <span id="addressTxt"></span>
+        </div>
+        <div id="tag-toggles" class="menu-toggles hidden">
+          <span>{[{ MATTERTAG_CONTENT }]}</span>
+          <div id="tag-inputs" class="menu-radios">
+            <div id="show-tag" class="menu-radio-show">
+              <input
+                id="radio-tag-show"
+                type="radio"
+                name="tags"
+                value="show"
+              />
+              <label for="radio-tag-show">{[{ SHOW }]}</label>
+            </div>
+            <div id="hide-tag" class="menu-radio-hide">
+              <input
+                id="radio-tag-hide"
+                type="radio"
+                name="tags"
+                value="hide"
+              />
+              <label for="radio-tag-hide">{[{ HIDE }]}</label>
+            </div>
+          </div>
+        </div>
+        <div id="labels-toggles" class="menu-toggles hidden">
+          <span>Labels</span>
+          <div id="labels-inputs" class="menu-radios">
+            <div id="show-label" class="menu-radio-show">
+              <input
+                id="radio-labels-show"
+                type="radio"
+                name="labels"
+                value="show"
+              />
+              <label for="radio-labels-show">Show</label>
+            </div>
+            <div id="hide-label" class="menu-radio-hide">
+              <input
+                id="radio-labels-hide"
+                type="radio"
+                name="labels"
+                value="hide"
+              />
+              <label for="radio-labels-hide">Hide</label>
+            </div>
+          </div>
+        </div>
+        <div id="share-origin" class="hidden">
+          <hr />
+          <div>
+            <i class="icon icon-ext-link"></i>
+            <div id="share-link-wrapper"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
-export default {
-  
+export default {};
+</script>
+<style lang="less" scoped>
+#model-title {
+  background: linear-gradient(
+    to right,
+    rgba(200, 160, 99, 0.2),
+    rgba(200, 160, 99, 0.8),
+    rgba(200, 160, 99, 0.2)
+  ) !important;
+}
+#meta-info{
+    background: linear-gradient(
+    to right,
+    rgba(200, 160, 99, 0.2),
+    rgba(200, 160, 99, 0.8),
+    rgba(200, 160, 99, 0.2)
+  ) 
 }
-</script>
+</style>