Home Explore Help
Register Sign In
chenlei
/
qjkankan_v1.1.1
forked from chenzhiguang/qjkankan_v1.1.1
1
0
Fork 0
Files
Browse Source

编辑器-热点界面更新 进行中

任一存 2 years ago
parent
a2207e3e99
commit
946d6a28d9
19 changed files with 1485 additions and 267 deletions
Split View Show Diff Stats
  1. 603 5
      packages/qjkankan-editor/public/static/lib/iconfontQJ1.1.0/demo_index.html
  2. 107 3
      packages/qjkankan-editor/public/static/lib/iconfontQJ1.1.0/iconfont.css
  3. 1 1
      packages/qjkankan-editor/public/static/lib/iconfontQJ1.1.0/iconfont.js
  4. 182 0
      packages/qjkankan-editor/public/static/lib/iconfontQJ1.1.0/iconfont.json
  5. BIN
      packages/qjkankan-editor/public/static/lib/iconfontQJ1.1.0/iconfont.ttf
  6. BIN
      packages/qjkankan-editor/public/static/lib/iconfontQJ1.1.0/iconfont.woff
  7. BIN
      packages/qjkankan-editor/public/static/lib/iconfontQJ1.1.0/iconfont.woff2
  8. 1 1
      packages/qjkankan-editor/src/Store/index.js
  9. 0 9
      packages/qjkankan-editor/src/components/rangeItem/index.vue
  10. 69 0
      packages/qjkankan-editor/src/components/shared/TabbarSwitcher.vue
  11. 73 0
      packages/qjkankan-editor/src/components/shared/TabbarSwitcherIcon.vue
  12. 12 3
      packages/qjkankan-editor/src/lang/_en.json
  13. 13 4
      packages/qjkankan-editor/src/lang/_zh.json
  14. 203 158
      packages/qjkankan-editor/src/views/hotspot/EditPanel.vue
  15. 29 83
      packages/qjkankan-editor/src/views/hotspot/HotSpotList.vue
  16. 3 0
      packages/qjkankan-editor/src/views/hotspot/hotspotIconType/custom.vue
  17. 5 0
      packages/qjkankan-editor/src/views/hotspot/hotspotIconType/personalized.vue
  18. 87 0
      packages/qjkankan-editor/src/views/hotspot/hotspotIconType/system.vue
  19. 97 0
      packages/qjkankan-editor/src/views/hotspot/hotspotTypeList.js

+ 603 - 5
packages/qjkankan-editor/public/static/lib/iconfontQJ1.1.0/demo_index.html
View File 

@@ -3,8 +3,8 @@
 
 <head>
 
   <meta charset="utf-8"/>
 
   <title>iconfont Demo</title>
 
-  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
 
-  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
 
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
 
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
 
   <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
 
   <link rel="stylesheet" href="demo.css">
 
   <link rel="stylesheet" href="iconfont.css">
 
@@ -55,6 +55,162 @@
 
           <ul class="icon_lists dib-box">
 
           
             <li class="dib">
 
+              <span class="icon iconfont">&#xe720;</span>
 
+                <div class="name">down</div>
 
+                <div class="code-name">&amp;#xe720;</div>
 
+              </li>
 
+          
+            <li class="dib">
 
+              <span class="icon iconfont">&#xe721;</span>
 
+                <div class="name">icon_graphic</div>
 
+                <div class="code-name">&amp;#xe721;</div>
 
+              </li>
 
+          
+            <li class="dib">
 
+              <span class="icon iconfont">&#xe722;</span>
 
+                <div class="name">centering</div>
 
+                <div class="code-name">&amp;#xe722;</div>
 
+              </li>
 
+          
+            <li class="dib">
 
+              <span class="icon iconfont">&#xe723;</span>
 
+                <div class="name">left</div>
 
+                <div class="code-name">&amp;#xe723;</div>
 
+              </li>
 
+          
+            <li class="dib">
 
+              <span class="icon iconfont">&#xe724;</span>
 
+                <div class="name">right</div>
 
+                <div class="code-name">&amp;#xe724;</div>
 
+              </li>
 
+          
+            <li class="dib">
 
+              <span class="icon iconfont">&#xe725;</span>
 
+                <div class="name">mobile</div>
 
+                <div class="code-name">&amp;#xe725;</div>
 
+              </li>
 
+          
+            <li class="dib">
 
+              <span class="icon iconfont">&#xe726;</span>
 
+                <div class="name">full_screen</div>
 
+                <div class="code-name">&amp;#xe726;</div>
 
+              </li>
 
+          
+            <li class="dib">
 
+              <span class="icon iconfont">&#xe727;</span>
 
+                <div class="name">text_down</div>
 
+                <div class="code-name">&amp;#xe727;</div>
 
+              </li>
 
+          
+            <li class="dib">
 
+              <span class="icon iconfont">&#xe728;</span>
 
+                <div class="name">text_right</div>
 
+                <div class="code-name">&amp;#xe728;</div>
 
+              </li>
 
+          
+            <li class="dib">
 
+              <span class="icon iconfont">&#xe729;</span>
 
+                <div class="name">up</div>
 
+                <div class="code-name">&amp;#xe729;</div>
 
+              </li>
 
+          
+            <li class="dib">
 
+              <span class="icon iconfont">&#xe72a;</span>
 
+                <div class="name">icon_pdf</div>
 
+                <div class="code-name">&amp;#xe72a;</div>
 
+              </li>
 
+          
+            <li class="dib">
 
+              <span class="icon iconfont">&#xe719;</span>
 
+                <div class="name">logo_black</div>
 
+                <div class="code-name">&amp;#xe719;</div>
 
+              </li>
 
+          
+            <li class="dib">
 
+              <span class="icon iconfont">&#xe71a;</span>
 
+                <div class="name">logo_white</div>
 
+                <div class="code-name">&amp;#xe71a;</div>
 
+              </li>
 
+          
+            <li class="dib">
 
+              <span class="icon iconfont">&#xe717;</span>
 
+                <div class="name">more</div>
 
+                <div class="code-name">&amp;#xe717;</div>
 
+              </li>
 
+          
+            <li class="dib">
 
+              <span class="icon iconfont">&#xe718;</span>
 
+                <div class="name">collect</div>
 
+                <div class="code-name">&amp;#xe718;</div>
 
+              </li>
 
+          
+            <li class="dib">
 
+              <span class="icon iconfont">&#xe715;</span>
 
+                <div class="name">checkbox-n</div>
 
+                <div class="code-name">&amp;#xe715;</div>
 
+              </li>
 
+          
+            <li class="dib">
 
+              <span class="icon iconfont">&#xe716;</span>
 
+                <div class="name">checkbox-s</div>
 
+                <div class="code-name">&amp;#xe716;</div>
 
+              </li>
 
+          
+            <li class="dib">
 
+              <span class="icon iconfont">&#xe710;</span>
 
+                <div class="name">player_volume01</div>
 
+                <div class="code-name">&amp;#xe710;</div>
 
+              </li>
 
+          
+            <li class="dib">
 
+              <span class="icon iconfont">&#xe712;</span>
 
+                <div class="name">player_volume02</div>
 
+                <div class="code-name">&amp;#xe712;</div>
 
+              </li>
 
+          
+            <li class="dib">
 
+              <span class="icon iconfont">&#xe713;</span>
 
+                <div class="name">player_volume03</div>
 
+                <div class="code-name">&amp;#xe713;</div>
 
+              </li>
 
+          
+            <li class="dib">
 
+              <span class="icon iconfont">&#xe70c;</span>
 
+                <div class="name">player_close</div>
 
+                <div class="code-name">&amp;#xe70c;</div>
 
+              </li>
 
+          
+            <li class="dib">
 
+              <span class="icon iconfont">&#xe70d;</span>
 
+                <div class="name">material_text</div>
 
+                <div class="code-name">&amp;#xe70d;</div>
 
+              </li>
 
+          
+            <li class="dib">
 
+              <span class="icon iconfont">&#xe70f;</span>
 
+                <div class="name">player_playback</div>
 
+                <div class="code-name">&amp;#xe70f;</div>
 
+              </li>
 
+          
+            <li class="dib">
 
+              <span class="icon iconfont">&#xe711;</span>
 
+                <div class="name">player_pause</div>
 
+                <div class="code-name">&amp;#xe711;</div>
 
+              </li>
 
+          
+            <li class="dib">
 
+              <span class="icon iconfont">&#xe70e;</span>
 
+                <div class="name">material_reduction</div>
 
+                <div class="code-name">&amp;#xe70e;</div>
 
+              </li>
 
+          
+            <li class="dib">
 
+              <span class="icon iconfont">&#xe70a;</span>
 
+                <div class="name">help_?</div>
 
+                <div class="code-name">&amp;#xe70a;</div>
 
+              </li>
 
+          
+            <li class="dib">
 
               <span class="icon iconfont">&#xe6f4;</span>
 
                 <div class="name">eye_on</div>
 
                 <div class="code-name">&amp;#xe6f4;</div>
 
@@ -786,9 +942,9 @@
 
 <pre><code class="language-css"
 
 >@font-face {
 
   font-family: 'iconfont';
 
-  src: url('iconfont.woff2?t=1657783922543') format('woff2'),
 
-       url('iconfont.woff?t=1657783922543') format('woff'),
 
-       url('iconfont.ttf?t=1657783922543') format('truetype');
 
+  src: url('iconfont.woff2?t=1673001107875') format('woff2'),
 
+       url('iconfont.woff?t=1673001107875') format('woff'),
 
+       url('iconfont.ttf?t=1673001107875') format('truetype');
 
 }
 
 </code></pre>
 
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
 
@@ -815,6 +971,240 @@
 
         <ul class="icon_lists dib-box">
 
           
           <li class="dib">
 
+            <span class="icon iconfont icon-down"></span>
 
+            <div class="name">
 
+              down
 
+            </div>
 
+            <div class="code-name">.icon-down
 
+            </div>
 
+          </li>
 
+          
+          <li class="dib">
 
+            <span class="icon iconfont icon-icon_graphic"></span>
 
+            <div class="name">
 
+              icon_graphic
 
+            </div>
 
+            <div class="code-name">.icon-icon_graphic
 
+            </div>
 
+          </li>
 
+          
+          <li class="dib">
 
+            <span class="icon iconfont icon-centering"></span>
 
+            <div class="name">
 
+              centering
 
+            </div>
 
+            <div class="code-name">.icon-centering
 
+            </div>
 
+          </li>
 
+          
+          <li class="dib">
 
+            <span class="icon iconfont icon-left"></span>
 
+            <div class="name">
 
+              left
 
+            </div>
 
+            <div class="code-name">.icon-left
 
+            </div>
 
+          </li>
 
+          
+          <li class="dib">
 
+            <span class="icon iconfont icon-right"></span>
 
+            <div class="name">
 
+              right
 
+            </div>
 
+            <div class="code-name">.icon-right
 
+            </div>
 
+          </li>
 
+          
+          <li class="dib">
 
+            <span class="icon iconfont icon-mobile"></span>
 
+            <div class="name">
 
+              mobile
 
+            </div>
 
+            <div class="code-name">.icon-mobile
 
+            </div>
 
+          </li>
 
+          
+          <li class="dib">
 
+            <span class="icon iconfont icon-full_screen"></span>
 
+            <div class="name">
 
+              full_screen
 
+            </div>
 
+            <div class="code-name">.icon-full_screen
 
+            </div>
 
+          </li>
 
+          
+          <li class="dib">
 
+            <span class="icon iconfont icon-text_down"></span>
 
+            <div class="name">
 
+              text_down
 
+            </div>
 
+            <div class="code-name">.icon-text_down
 
+            </div>
 
+          </li>
 
+          
+          <li class="dib">
 
+            <span class="icon iconfont icon-text_right"></span>
 
+            <div class="name">
 
+              text_right
 
+            </div>
 
+            <div class="code-name">.icon-text_right
 
+            </div>
 
+          </li>
 
+          
+          <li class="dib">
 
+            <span class="icon iconfont icon-up"></span>
 
+            <div class="name">
 
+              up
 
+            </div>
 
+            <div class="code-name">.icon-up
 
+            </div>
 
+          </li>
 
+          
+          <li class="dib">
 
+            <span class="icon iconfont icon-icon_pdf"></span>
 
+            <div class="name">
 
+              icon_pdf
 
+            </div>
 
+            <div class="code-name">.icon-icon_pdf
 
+            </div>
 
+          </li>
 
+          
+          <li class="dib">
 
+            <span class="icon iconfont icon-logo_black"></span>
 
+            <div class="name">
 
+              logo_black
 
+            </div>
 
+            <div class="code-name">.icon-logo_black
 
+            </div>
 
+          </li>
 
+          
+          <li class="dib">
 
+            <span class="icon iconfont icon-logo_white"></span>
 
+            <div class="name">
 
+              logo_white
 
+            </div>
 
+            <div class="code-name">.icon-logo_white
 
+            </div>
 
+          </li>
 
+          
+          <li class="dib">
 
+            <span class="icon iconfont icon-more"></span>
 
+            <div class="name">
 
+              more
 
+            </div>
 
+            <div class="code-name">.icon-more
 
+            </div>
 
+          </li>
 
+          
+          <li class="dib">
 
+            <span class="icon iconfont icon-collect"></span>
 
+            <div class="name">
 
+              collect
 
+            </div>
 
+            <div class="code-name">.icon-collect
 
+            </div>
 
+          </li>
 
+          
+          <li class="dib">
 
+            <span class="icon iconfont icon-checkbox-n"></span>
 
+            <div class="name">
 
+              checkbox-n
 
+            </div>
 
+            <div class="code-name">.icon-checkbox-n
 
+            </div>
 
+          </li>
 
+          
+          <li class="dib">
 
+            <span class="icon iconfont icon-checkbox-s"></span>
 
+            <div class="name">
 
+              checkbox-s
 
+            </div>
 
+            <div class="code-name">.icon-checkbox-s
 
+            </div>
 
+          </li>
 
+          
+          <li class="dib">
 
+            <span class="icon iconfont icon-player_volume01"></span>
 
+            <div class="name">
 
+              player_volume01
 
+            </div>
 
+            <div class="code-name">.icon-player_volume01
 
+            </div>
 
+          </li>
 
+          
+          <li class="dib">
 
+            <span class="icon iconfont icon-player_volume02"></span>
 
+            <div class="name">
 
+              player_volume02
 
+            </div>
 
+            <div class="code-name">.icon-player_volume02
 
+            </div>
 
+          </li>
 
+          
+          <li class="dib">
 
+            <span class="icon iconfont icon-player_volume03"></span>
 
+            <div class="name">
 
+              player_volume03
 
+            </div>
 
+            <div class="code-name">.icon-player_volume03
 
+            </div>
 
+          </li>
 
+          
+          <li class="dib">
 
+            <span class="icon iconfont icon-player_close"></span>
 
+            <div class="name">
 
+              player_close
 
+            </div>
 
+            <div class="code-name">.icon-player_close
 
+            </div>
 
+          </li>
 
+          
+          <li class="dib">
 
+            <span class="icon iconfont icon-material_text"></span>
 
+            <div class="name">
 
+              material_text
 
+            </div>
 
+            <div class="code-name">.icon-material_text
 
+            </div>
 
+          </li>
 
+          
+          <li class="dib">
 
+            <span class="icon iconfont icon-player_playback"></span>
 
+            <div class="name">
 
+              player_playback
 
+            </div>
 
+            <div class="code-name">.icon-player_playback
 
+            </div>
 
+          </li>
 
+          
+          <li class="dib">
 
+            <span class="icon iconfont icon-player_pause"></span>
 
+            <div class="name">
 
+              player_pause
 
+            </div>
 
+            <div class="code-name">.icon-player_pause
 
+            </div>
 
+          </li>
 
+          
+          <li class="dib">
 
+            <span class="icon iconfont icon-material_reduction"></span>
 
+            <div class="name">
 
+              material_reduction
 
+            </div>
 
+            <div class="code-name">.icon-material_reduction
 
+            </div>
 
+          </li>
 
+          
+          <li class="dib">
 
+            <span class="icon iconfont icon-a-help_"></span>
 
+            <div class="name">
 
+              help_?
 
+            </div>
 
+            <div class="code-name">.icon-a-help_
 
+            </div>
 
+          </li>
 
+          
+          <li class="dib">
 
             <span class="icon iconfont icon-eye_on"></span>
 
             <div class="name">
 
               eye_on
 
@@ -1914,6 +2304,214 @@
 
           
             <li class="dib">
 
                 <svg class="icon svg-icon" aria-hidden="true">
 
+                  <use xlink:href="#icon-down"></use>
 
+                </svg>
 
+                <div class="name">down</div>
 
+                <div class="code-name">#icon-down</div>
 
+            </li>
 
+          
+            <li class="dib">
 
+                <svg class="icon svg-icon" aria-hidden="true">
 
+                  <use xlink:href="#icon-icon_graphic"></use>
 
+                </svg>
 
+                <div class="name">icon_graphic</div>
 
+                <div class="code-name">#icon-icon_graphic</div>
 
+            </li>
 
+          
+            <li class="dib">
 
+                <svg class="icon svg-icon" aria-hidden="true">
 
+                  <use xlink:href="#icon-centering"></use>
 
+                </svg>
 
+                <div class="name">centering</div>
 
+                <div class="code-name">#icon-centering</div>
 
+            </li>
 
+          
+            <li class="dib">
 
+                <svg class="icon svg-icon" aria-hidden="true">
 
+                  <use xlink:href="#icon-left"></use>
 
+                </svg>
 
+                <div class="name">left</div>
 
+                <div class="code-name">#icon-left</div>
 
+            </li>
 
+          
+            <li class="dib">
 
+                <svg class="icon svg-icon" aria-hidden="true">
 
+                  <use xlink:href="#icon-right"></use>
 
+                </svg>
 
+                <div class="name">right</div>
 
+                <div class="code-name">#icon-right</div>
 
+            </li>
 
+          
+            <li class="dib">
 
+                <svg class="icon svg-icon" aria-hidden="true">
 
+                  <use xlink:href="#icon-mobile"></use>
 
+                </svg>
 
+                <div class="name">mobile</div>
 
+                <div class="code-name">#icon-mobile</div>
 
+            </li>
 
+          
+            <li class="dib">
 
+                <svg class="icon svg-icon" aria-hidden="true">
 
+                  <use xlink:href="#icon-full_screen"></use>
 
+                </svg>
 
+                <div class="name">full_screen</div>
 
+                <div class="code-name">#icon-full_screen</div>
 
+            </li>
 
+          
+            <li class="dib">
 
+                <svg class="icon svg-icon" aria-hidden="true">
 
+                  <use xlink:href="#icon-text_down"></use>
 
+                </svg>
 
+                <div class="name">text_down</div>
 
+                <div class="code-name">#icon-text_down</div>
 
+            </li>
 
+          
+            <li class="dib">
 
+                <svg class="icon svg-icon" aria-hidden="true">
 
+                  <use xlink:href="#icon-text_right"></use>
 
+                </svg>
 
+                <div class="name">text_right</div>
 
+                <div class="code-name">#icon-text_right</div>
 
+            </li>
 
+          
+            <li class="dib">
 
+                <svg class="icon svg-icon" aria-hidden="true">
 
+                  <use xlink:href="#icon-up"></use>
 
+                </svg>
 
+                <div class="name">up</div>
 
+                <div class="code-name">#icon-up</div>
 
+            </li>
 
+          
+            <li class="dib">
 
+                <svg class="icon svg-icon" aria-hidden="true">
 
+                  <use xlink:href="#icon-icon_pdf"></use>
 
+                </svg>
 
+                <div class="name">icon_pdf</div>
 
+                <div class="code-name">#icon-icon_pdf</div>
 
+            </li>
 
+          
+            <li class="dib">
 
+                <svg class="icon svg-icon" aria-hidden="true">
 
+                  <use xlink:href="#icon-logo_black"></use>
 
+                </svg>
 
+                <div class="name">logo_black</div>
 
+                <div class="code-name">#icon-logo_black</div>
 
+            </li>
 
+          
+            <li class="dib">
 
+                <svg class="icon svg-icon" aria-hidden="true">
 
+                  <use xlink:href="#icon-logo_white"></use>
 
+                </svg>
 
+                <div class="name">logo_white</div>
 
+                <div class="code-name">#icon-logo_white</div>
 
+            </li>
 
+          
+            <li class="dib">
 
+                <svg class="icon svg-icon" aria-hidden="true">
 
+                  <use xlink:href="#icon-more"></use>
 
+                </svg>
 
+                <div class="name">more</div>
 
+                <div class="code-name">#icon-more</div>
 
+            </li>
 
+          
+            <li class="dib">
 
+                <svg class="icon svg-icon" aria-hidden="true">
 
+                  <use xlink:href="#icon-collect"></use>
 
+                </svg>
 
+                <div class="name">collect</div>
 
+                <div class="code-name">#icon-collect</div>
 
+            </li>
 
+          
+            <li class="dib">
 
+                <svg class="icon svg-icon" aria-hidden="true">
 
+                  <use xlink:href="#icon-checkbox-n"></use>
 
+                </svg>
 
+                <div class="name">checkbox-n</div>
 
+                <div class="code-name">#icon-checkbox-n</div>
 
+            </li>
 
+          
+            <li class="dib">
 
+                <svg class="icon svg-icon" aria-hidden="true">
 
+                  <use xlink:href="#icon-checkbox-s"></use>
 
+                </svg>
 
+                <div class="name">checkbox-s</div>
 
+                <div class="code-name">#icon-checkbox-s</div>
 
+            </li>
 
+          
+            <li class="dib">
 
+                <svg class="icon svg-icon" aria-hidden="true">
 
+                  <use xlink:href="#icon-player_volume01"></use>
 
+                </svg>
 
+                <div class="name">player_volume01</div>
 
+                <div class="code-name">#icon-player_volume01</div>
 
+            </li>
 
+          
+            <li class="dib">
 
+                <svg class="icon svg-icon" aria-hidden="true">
 
+                  <use xlink:href="#icon-player_volume02"></use>
 
+                </svg>
 
+                <div class="name">player_volume02</div>
 
+                <div class="code-name">#icon-player_volume02</div>
 
+            </li>
 
+          
+            <li class="dib">
 
+                <svg class="icon svg-icon" aria-hidden="true">
 
+                  <use xlink:href="#icon-player_volume03"></use>
 
+                </svg>
 
+                <div class="name">player_volume03</div>
 
+                <div class="code-name">#icon-player_volume03</div>
 
+            </li>
 
+          
+            <li class="dib">
 
+                <svg class="icon svg-icon" aria-hidden="true">
 
+                  <use xlink:href="#icon-player_close"></use>
 
+                </svg>
 
+                <div class="name">player_close</div>
 
+                <div class="code-name">#icon-player_close</div>
 
+            </li>
 
+          
+            <li class="dib">
 
+                <svg class="icon svg-icon" aria-hidden="true">
 
+                  <use xlink:href="#icon-material_text"></use>
 
+                </svg>
 
+                <div class="name">material_text</div>
 
+                <div class="code-name">#icon-material_text</div>
 
+            </li>
 
+          
+            <li class="dib">
 
+                <svg class="icon svg-icon" aria-hidden="true">
 
+                  <use xlink:href="#icon-player_playback"></use>
 
+                </svg>
 
+                <div class="name">player_playback</div>
 
+                <div class="code-name">#icon-player_playback</div>
 
+            </li>
 
+          
+            <li class="dib">
 
+                <svg class="icon svg-icon" aria-hidden="true">
 
+                  <use xlink:href="#icon-player_pause"></use>
 
+                </svg>
 
+                <div class="name">player_pause</div>
 
+                <div class="code-name">#icon-player_pause</div>
 
+            </li>
 
+          
+            <li class="dib">
 
+                <svg class="icon svg-icon" aria-hidden="true">
 
+                  <use xlink:href="#icon-material_reduction"></use>
 
+                </svg>
 
+                <div class="name">material_reduction</div>
 
+                <div class="code-name">#icon-material_reduction</div>
 
+            </li>
 
+          
+            <li class="dib">
 
+                <svg class="icon svg-icon" aria-hidden="true">
 
+                  <use xlink:href="#icon-a-help_"></use>
 
+                </svg>
 
+                <div class="name">help_?</div>
 
+                <div class="code-name">#icon-a-help_</div>
 
+            </li>
 
+          
+            <li class="dib">
 
+                <svg class="icon svg-icon" aria-hidden="true">
 
                   <use xlink:href="#icon-eye_on"></use>
 
                 </svg>
 
                 <div class="name">eye_on</div>

+ 107 - 3
packages/qjkankan-editor/public/static/lib/iconfontQJ1.1.0/iconfont.css
View File 

@@ -1,8 +1,8 @@
 
 @font-face {
 
   font-family: "iconfont"; /* Project id 2947721 */
 
-  src: url('iconfont.woff2?t=1657783922543') format('woff2'),
 
-       url('iconfont.woff?t=1657783922543') format('woff'),
 
-       url('iconfont.ttf?t=1657783922543') format('truetype');
 
+  src: url('iconfont.woff2?t=1673001107875') format('woff2'),
 
+       url('iconfont.woff?t=1673001107875') format('woff'),
 
+       url('iconfont.ttf?t=1673001107875') format('truetype');
 
 }
 
 
 .iconfont {
 
@@ -13,6 +13,110 @@
 
   -moz-osx-font-smoothing: grayscale;
 
 }
 
 
+.icon-down:before {
 
+  content: "\e720";
 
+}
 
+
 
+.icon-icon_graphic:before {
 
+  content: "\e721";
 
+}
 
+
 
+.icon-centering:before {
 
+  content: "\e722";
 
+}
 
+
 
+.icon-left:before {
 
+  content: "\e723";
 
+}
 
+
 
+.icon-right:before {
 
+  content: "\e724";
 
+}
 
+
 
+.icon-mobile:before {
 
+  content: "\e725";
 
+}
 
+
 
+.icon-full_screen:before {
 
+  content: "\e726";
 
+}
 
+
 
+.icon-text_down:before {
 
+  content: "\e727";
 
+}
 
+
 
+.icon-text_right:before {
 
+  content: "\e728";
 
+}
 
+
 
+.icon-up:before {
 
+  content: "\e729";
 
+}
 
+
 
+.icon-icon_pdf:before {
 
+  content: "\e72a";
 
+}
 
+
 
+.icon-logo_black:before {
 
+  content: "\e719";
 
+}
 
+
 
+.icon-logo_white:before {
 
+  content: "\e71a";
 
+}
 
+
 
+.icon-more:before {
 
+  content: "\e717";
 
+}
 
+
 
+.icon-collect:before {
 
+  content: "\e718";
 
+}
 
+
 
+.icon-checkbox-n:before {
 
+  content: "\e715";
 
+}
 
+
 
+.icon-checkbox-s:before {
 
+  content: "\e716";
 
+}
 
+
 
+.icon-player_volume01:before {
 
+  content: "\e710";
 
+}
 
+
 
+.icon-player_volume02:before {
 
+  content: "\e712";
 
+}
 
+
 
+.icon-player_volume03:before {
 
+  content: "\e713";
 
+}
 
+
 
+.icon-player_close:before {
 
+  content: "\e70c";
 
+}
 
+
 
+.icon-material_text:before {
 
+  content: "\e70d";
 
+}
 
+
 
+.icon-player_playback:before {
 
+  content: "\e70f";
 
+}
 
+
 
+.icon-player_pause:before {
 
+  content: "\e711";
 
+}
 
+
 
+.icon-material_reduction:before {
 
+  content: "\e70e";
 
+}
 
+
 
+.icon-a-help_:before {
 
+  content: "\e70a";
 
+}
 
+
 
 .icon-eye_on:before {
 
   content: "\e6f4";
 
 }

File diff suppressed because it is too large
+ 1 - 1
packages/qjkankan-editor/public/static/lib/iconfontQJ1.1.0/iconfont.js


+ 182 - 0
packages/qjkankan-editor/public/static/lib/iconfontQJ1.1.0/iconfont.json
View File 

@@ -6,6 +6,188 @@
 
   "description": "全景看看1.1.0",
 
   "glyphs": [
 
     {
 
+      "icon_id": "33153011",
 
+      "name": "down",
 
+      "font_class": "down",
 
+      "unicode": "e720",
 
+      "unicode_decimal": 59168
 
+    },
 
+    {
 
+      "icon_id": "33153012",
 
+      "name": "icon_graphic",
 
+      "font_class": "icon_graphic",
 
+      "unicode": "e721",
 
+      "unicode_decimal": 59169
 
+    },
 
+    {
 
+      "icon_id": "33153013",
 
+      "name": "centering",
 
+      "font_class": "centering",
 
+      "unicode": "e722",
 
+      "unicode_decimal": 59170
 
+    },
 
+    {
 
+      "icon_id": "33153014",
 
+      "name": "left",
 
+      "font_class": "left",
 
+      "unicode": "e723",
 
+      "unicode_decimal": 59171
 
+    },
 
+    {
 
+      "icon_id": "33153015",
 
+      "name": "right",
 
+      "font_class": "right",
 
+      "unicode": "e724",
 
+      "unicode_decimal": 59172
 
+    },
 
+    {
 
+      "icon_id": "33153016",
 
+      "name": "mobile",
 
+      "font_class": "mobile",
 
+      "unicode": "e725",
 
+      "unicode_decimal": 59173
 
+    },
 
+    {
 
+      "icon_id": "33153017",
 
+      "name": "full_screen",
 
+      "font_class": "full_screen",
 
+      "unicode": "e726",
 
+      "unicode_decimal": 59174
 
+    },
 
+    {
 
+      "icon_id": "33153018",
 
+      "name": "text_down",
 
+      "font_class": "text_down",
 
+      "unicode": "e727",
 
+      "unicode_decimal": 59175
 
+    },
 
+    {
 
+      "icon_id": "33153019",
 
+      "name": "text_right",
 
+      "font_class": "text_right",
 
+      "unicode": "e728",
 
+      "unicode_decimal": 59176
 
+    },
 
+    {
 
+      "icon_id": "33153020",
 
+      "name": "up",
 
+      "font_class": "up",
 
+      "unicode": "e729",
 
+      "unicode_decimal": 59177
 
+    },
 
+    {
 
+      "icon_id": "33153021",
 
+      "name": "icon_pdf",
 
+      "font_class": "icon_pdf",
 
+      "unicode": "e72a",
 
+      "unicode_decimal": 59178
 
+    },
 
+    {
 
+      "icon_id": "32366619",
 
+      "name": "logo_black",
 
+      "font_class": "logo_black",
 
+      "unicode": "e719",
 
+      "unicode_decimal": 59161
 
+    },
 
+    {
 
+      "icon_id": "32366620",
 
+      "name": "logo_white",
 
+      "font_class": "logo_white",
 
+      "unicode": "e71a",
 
+      "unicode_decimal": 59162
 
+    },
 
+    {
 
+      "icon_id": "32337115",
 
+      "name": "more",
 
+      "font_class": "more",
 
+      "unicode": "e717",
 
+      "unicode_decimal": 59159
 
+    },
 
+    {
 
+      "icon_id": "32337116",
 
+      "name": "collect",
 
+      "font_class": "collect",
 
+      "unicode": "e718",
 
+      "unicode_decimal": 59160
 
+    },
 
+    {
 
+      "icon_id": "32290078",
 
+      "name": "checkbox-n",
 
+      "font_class": "checkbox-n",
 
+      "unicode": "e715",
 
+      "unicode_decimal": 59157
 
+    },
 
+    {
 
+      "icon_id": "32290079",
 
+      "name": "checkbox-s",
 
+      "font_class": "checkbox-s",
 
+      "unicode": "e716",
 
+      "unicode_decimal": 59158
 
+    },
 
+    {
 
+      "icon_id": "32254769",
 
+      "name": "player_volume01",
 
+      "font_class": "player_volume01",
 
+      "unicode": "e710",
 
+      "unicode_decimal": 59152
 
+    },
 
+    {
 
+      "icon_id": "32254770",
 
+      "name": "player_volume02",
 
+      "font_class": "player_volume02",
 
+      "unicode": "e712",
 
+      "unicode_decimal": 59154
 
+    },
 
+    {
 
+      "icon_id": "32254771",
 
+      "name": "player_volume03",
 
+      "font_class": "player_volume03",
 
+      "unicode": "e713",
 
+      "unicode_decimal": 59155
 
+    },
 
+    {
 
+      "icon_id": "32251669",
 
+      "name": "player_close",
 
+      "font_class": "player_close",
 
+      "unicode": "e70c",
 
+      "unicode_decimal": 59148
 
+    },
 
+    {
 
+      "icon_id": "32251670",
 
+      "name": "material_text",
 
+      "font_class": "material_text",
 
+      "unicode": "e70d",
 
+      "unicode_decimal": 59149
 
+    },
 
+    {
 
+      "icon_id": "32251671",
 
+      "name": "player_playback",
 
+      "font_class": "player_playback",
 
+      "unicode": "e70f",
 
+      "unicode_decimal": 59151
 
+    },
 
+    {
 
+      "icon_id": "32251673",
 
+      "name": "player_pause",
 
+      "font_class": "player_pause",
 
+      "unicode": "e711",
 
+      "unicode_decimal": 59153
 
+    },
 
+    {
 
+      "icon_id": "32250353",
 
+      "name": "material_reduction",
 
+      "font_class": "material_reduction",
 
+      "unicode": "e70e",
 
+      "unicode_decimal": 59150
 
+    },
 
+    {
 
+      "icon_id": "32250052",
 
+      "name": "help_?",
 
+      "font_class": "a-help_",
 
+      "unicode": "e70a",
 
+      "unicode_decimal": 59146
 
+    },
 
+    {
 
       "icon_id": "30581503",
 
       "name": "eye_on",
 
       "font_class": "eye_on",

BIN
packages/qjkankan-editor/public/static/lib/iconfontQJ1.1.0/iconfont.ttf
View File


BIN
packages/qjkankan-editor/public/static/lib/iconfontQJ1.1.0/iconfont.woff
View File


BIN
packages/qjkankan-editor/public/static/lib/iconfontQJ1.1.0/iconfont.woff2
View File


+ 1 - 1
packages/qjkankan-editor/src/Store/index.js
View File 

@@ -15,7 +15,7 @@ const store = new Vuex.Store({
 
     info: '',
 
     infoSnapshotAtSave: '',
 
     showInfo: '',
 
-    hotspot: '',
 
+    hotspot: '', // 当前在新增或编辑的热点的信息
 
     backupHotSpot: '',
 
     initScene: '',
 
     tablist: [],

+ 0 - 9
packages/qjkankan-editor/src/components/rangeItem/index.vue
View File 

@@ -4,7 +4,6 @@
 
       <div class="item">
 
         <span>{{current.label}}</span>
 
         <span>
 
-          <!-- <input type="text" v-model.lazy="inputText" @blur="inputText = current.value"> -->
 
           {{current.value}}{{current.unit || 'm'}}
 
         </span>
 
       </div>
 
@@ -27,17 +26,10 @@ export default {
 
   props: ['value'],
 
   data() {
 
     return {
 
-      inputText: this.value.value,
 
-      mobile: this.$config.isMobile,
 
       current: {...this.value}
 
     }
 
   },
 
   watch: {
 
-    inputText() {
 
-      if (parseFloat(this.inputText)) {
 
-        this.current.value = parseFloat(this.inputText)
 
-      }
 
-    },
 
     'current.value': function(n, o) {
 
       // console.log(this.current.value,'this.current.value');
 
       // console.log(this.value.value,'this.value.value');
 
@@ -49,7 +41,6 @@ export default {
 
     value:{
 
       handler:function name(newVal) {
 
         this.current = {...newVal}
 
-        this.inputText = this.current.value
 
       },
 
       deep:true
 
     }

+ 69 - 0
packages/qjkankan-editor/src/components/shared/TabbarSwitcher.vue
View File 

@@ -0,0 +1,69 @@
 
+<template>

+  <div

+    class="tabbar-switcher"

+    :class="{

+      'bright-theme': !isDarkTheme,

+    }"

+  >

+    <div

+      class="tab-item"

+      :class="{

+        active: activeIdx === index,

+      }"

+      v-for="(item, index) in tabList"

+      :key="index"

+      @click="$emit('select', index)"

+    >

+      {{item}}

+    </div>

+  </div>

+</template>

+

+<script>

+export default {

+  props: {

+    isDarkTheme: {

+      type: Boolean,

+      default: true,

+    },

+    tabList: {

+      type: Array,

+      required: true,

+      // 每一项：{text, img-nomaral, img-active, tooltip}

+    },

+    activeIdx: {

+      type: Number,

+      default: 0,

+    }

+  }

+}

+</script>

+

+<style lang="less" scoped>

+.tabbar-switcher {

+  height: 36px;

+  background: #1A1B1D;

+  border-radius: 2px;

+  border: 1px solid #404040;

+  padding: 3px;

+  display: flex;

+  .tab-item {

+    flex: 1 0 1px;

+    display: flex;

+    justify-content: center;

+    align-items: center;

+    font-size: 14px;

+    color: rgb(127, 127, 127);

+    border-radius: 2px;

+    cursor: pointer;

+    &.active {

+      color: #fff;

+      background: #0076F6;

+    }

+  }

+}

+

+.tabbar-switcher.bright-theme {

+

+}

+</style>

+ 73 - 0
packages/qjkankan-editor/src/components/shared/TabbarSwitcherIcon.vue
View File 

@@ -0,0 +1,73 @@
 
+<template>

+  <div

+    class="tabbar-switcher"

+    :class="{

+      'bright-theme': !isDarkTheme,

+    }"

+  >

+

+    <div

+      class="tab-item"

+      :class="{

+        active: activeIdx === index,

+      }"

+      v-for="(item, index) in tabList"

+      :key="index"

+      @click="$emit('select', index)"

+    >

+      <i

+        class="iconfont"

+        :class="item.icon"

+        v-tooltip="item.tip"

+      />

+    </div>

+  </div>

+</template>

+

+<script>

+export default {

+  props: {

+    isDarkTheme: {

+      type: Boolean,

+      default: true,

+    },

+    tabList: {

+      type: Array,

+      required: true,

+    },

+    activeIdx: {

+      type: Number,

+      default: 0,

+    }

+  }

+}

+</script>

+

+<style lang="less" scoped>

+.tabbar-switcher {

+  height: 36px;

+  background: #1A1B1D;

+  border-radius: 2px;

+  border: 1px solid #404040;

+  padding: 3px;

+  display: flex;

+  .tab-item {

+    flex: 1 0 1px;

+    display: flex;

+    justify-content: center;

+    align-items: center;

+    font-size: 14px;

+    color: rgb(127, 127, 127);

+    border-radius: 2px;

+    cursor: pointer;

+    &.active {

+      color: #fff;

+      background: #0076F6;

+    }

+  }

+}

+

+.tabbar-switcher.bright-theme {

+

+}

+</style>

+ 12 - 3
packages/qjkankan-editor/src/lang/_en.json
View File 

@@ -834,9 +834,18 @@
 
     "select_hotspot_icon": "Select the hotspot icon",
 
     "input_hotspot_title": "Enter the hotspot title",
 
     "select_icon": "Select Icon",
 
-    "title_setting": "Title Settings",
 
-    "isshow_title": "Display the title or not",
 
-    "title_placeholder": "Enter a title with a maximum of 50 characters",
 
+    "hotspot_title": "热点标题",
 
+    "title_show_mode": "显示方式",
 
+    "show_on_hover": "鼠标悬浮",
 
+    "always_show": "一直显示",
 
+    "never_show": "不显示",
 
+    "title_position": "相对图标位置",
 
+    "title_top": "上",
 
+    "title_bottom": "下",
 
+    "title_left": "左",
 
+    "title_right": "右",
 
+    "title_custom": "自定义拖动标题",
 
+    "title_placeholder": "Enter a title with a maximum of 15 characters",
 
     "effect_settings": "Effect settings",
 
     "cancel": "Cancel",
 
     "finish": "Finish",

+ 13 - 4
packages/qjkankan-editor/src/lang/_zh.json
View File 

@@ -838,10 +838,19 @@
 
     "hotspot_icon": "热点图标",
 
     "select_hotspot_icon": "请选择热点图标",
 
     "input_hotspot_title": "请输入热点标题",
 
-    "select_icon": "选择图标",
 
-    "title_setting": "标题设置",
 
-    "isshow_title": "是否显示标题",
 
-    "title_placeholder": "请输入标题，限50字",
 
+    "select_icon": "热点图标",
 
+    "hotspot_title": "热点标题",
 
+    "title_show_mode": "显示方式",
 
+    "show_on_hover": "鼠标悬浮",
 
+    "always_show": "一直显示",
 
+    "never_show": "不显示",
 
+    "title_position": "相对图标位置",
 
+    "title_top": "上",
 
+    "title_bottom": "下",
 
+    "title_left": "左",
 
+    "title_right": "右",
 
+    "title_custom": "自定义拖动标题",
 
+    "title_placeholder": "请输入标题，限15字",
 
     "effect_settings": "效果设置",
 
     "cancel": "取消",
 
     "finish": "完成",

+ 203 - 158
packages/qjkankan-editor/src/views/hotspot/EditPanel.vue
View File 

@@ -6,57 +6,104 @@
 
     leave-active-class="animated slideOutRight speed"
 
   >
 
     <div class="hots-panel" v-show="show">
 
+
 
       <div class="ui-between header">
 
         <span>{{ editTitle }}{{ $i18n.t('hotspot.hotspot_name') }}</span>
 
         <i class="iconfont icon_close" @click="cancel"></i>
 
       </div>
 
+      
       <div class="content" ref="content">
 
+        
+        <div class="type-setting">
 
+          <div class="remark">热点类型</div>
 
+          <combox
 
+            class="combox"
 
+            :data="hotspotTypeList"
 
+            :selected-id="hotspot.hotspotType"
 
+            :bottomSpace="comboxBottomSpace"
 
+            @change="onHotSpotTypeChange"
 
+          />
 
+        </div>
 
+        
         <div class="icon-setting">
 
-          <div class="icon-setting-title">{{ $i18n.t('hotspot.hotspot_icon') }}</div>
 
           <div class="remark">{{ $i18n.t('hotspot.select_icon') }}</div>
 
-          <div class="icon-list">
 
-            <div class="margin-handler-layer">
 
-              <ul>
 
-                <li
 
-                  :class="{ active: item.id == hotspot.icontype }"
 
-                  v-for="(item, i) in hotStyle"
 
-                  @click="addhotspot(item)" :key="i"
 
-                >
 
-                  <img :src="item.thumb" alt="">
 
-                </li>
 
-              </ul>
 
-            </div>
 
-          </div>
 
+          <combox
 
+            class="combox"
 
+            :data="hotspotIconTypeList"
 
+            :selected-id="hotspot.hotspotIconType"
 
+            :bottomSpace="comboxBottomSpace"
 
+            @change="onHotspotIconTypeChange"
 
+          />
 
+          <component
 
+            class="icon-setting-component"
 
+            :is="iconSettingComponent"
 
+            ref="icon-setting-component"
 
+            @addHotspot="addhotspot"
 
+          />
 
           <div class="bars">
 
             <RangeItem :value="rang" @input="onRangeChange" />
 
           </div>
 
         </div>
 
+
 
         <div class="title-setting">
 
-          <div class="title-setting-title">{{ $i18n.t('hotspot.title_setting') }}</div>
 
-          <div class="switch-wrapper">
 
-            <span class="label">{{ $i18n.t('hotspot.isshow_title') }}</span>
 
-            <Switcher
 
-              :value="hotspot.visible"
 
-              @change="hotspot.visible = !hotspot.visible"
 
-            />
 
-          </div>
 
+          <div class="remark-highlight">{{ $i18n.t('hotspot.hotspot_title') }}</div>
 
           <div class="title-input-wrapper">
 
             <input
 
               v-model.trim="hotspot.hotspotTitle"
 
-              type="text" maxlength="50"
 
+              type="text" maxlength="15"
 
               :placeholder="$i18n.t('hotspot.title_placeholder')"
 
             />
 
-            <span class="count">{{ hotspot.hotspotTitle.length }}/50</span>
 
+            <span class="count">{{ hotspot.hotspotTitle.length }}/15</span>
 
           </div>
 
+          <div class="remark">{{ $i18n.t('hotspot.title_show_mode') }}</div>
 
+          <TabbarSwitcher
 
+            class="display-mode-selector"
 
+            :tabList="[
 
+              $i18n.t('hotspot.show_on_hover'),
 
+              $i18n.t('hotspot.always_show'),
 
+              $i18n.t('hotspot.never_show'),
 
+            ]"
 
+            :activeIdx="currentTitleDispayModeIdx"
 
+            @select="onSelectTitleDisplayMode"
 
+          />
 
+          <div class="remark">{{ $i18n.t('hotspot.title_position') }}</div>
 
+          <TabbarSwitcherIcon
 
+            class="display-mode-selector"
 
+            :tabList="[
 
+              {
 
+                icon: 'icon-up',
 
+                tip: $i18n.t('hotspot.title_top'),
 
+              },
 
+              {
 
+                icon: 'icon-down',
 
+                tip: $i18n.t('hotspot.title_bottom'),
 
+              },
 
+              {
 
+                icon: 'icon-left',
 
+                tip: $i18n.t('hotspot.title_left'),
 
+              },
 
+              {
 
+                icon: 'icon-right',
 
+                tip: $i18n.t('hotspot.title_right'),
 
+              },
 
+              {
 
+                icon: 'icon-mobile',
 
+                tip: $i18n.t('hotspot.title_custom'),
 
+              },
 
+            ]"
 
+            :activeIdx="currentTitlePositionIdx"
 
+            @select="onSelectTitlePosition"
 
+          />
 
         </div>
 
+        
         <div class="effect-setting">
 
           <div class="effect-setting-title">{{$i18n.t('hotspot.effect_settings')}}</div>
 
           <combox
 
             class="combox"
 
-            :data="hotSpotTypeList"
 
+            :data="hotspotTypeList"
 
             :selected-id="hotspot.hotspotType"
 
             :bottomSpace="comboxBottomSpace"
 
-            @change="onhotSpotTypeChange"
 
+            @change="onHotSpotTypeChange"
 
           />
 
           <component
 
             class="effect-setting-component"
 
@@ -103,6 +150,9 @@ import RangeItem from "@/components/rangeItem/index.vue";
 
 import Combox from "@/components/shared/Combox";
 
 import { mapGetters } from "vuex";
 
 import Switcher from "@/components/shared/Switcher.vue";
 
+import TabbarSwitcher from "@/components/shared/TabbarSwitcher.vue";
 
+import TabbarSwitcherIcon from "@/components/shared/TabbarSwitcherIcon.vue";
 
+import hotspotTypeList from "./hotspotTypeList.js";
 
 
 export default {
 
   props: ['show', 'data', 'editTitle'],
 
@@ -110,50 +160,30 @@ export default {
 
     RangeItem,
 
     Combox,
 
     Switcher,
 
+    TabbarSwitcher,
 
+    TabbarSwitcherIcon,
 
   },
 
   data() {
 
-    let cdn = this.$config.getStaticResource('/panoassets/images/hotspot/icon/')
 
-    let hotStyle = []
 
-
 
-    for (let i = 0; i < 12; i++) {
 
-      hotStyle[i] = {
 
-        id: 'icon' + (i + 1),
 
-        img: cdn + `img_doticon_${String(i + 1).padStart(2, '0')}.svg`,
 
-        thumb: cdn + `img_doticon_${String(i + 1).padStart(2, '0')}.svg`
 
-      }
 
-    }
 
     return {
 
-      hotSpotTypeList: [
 
+      hotspotTypeList,
 
+      hotspotIconTypeList: [
 
         {
 
-          id: 'scene',
 
-          name: this.$i18n.t('hotspot.secne')
 
+          name: '系统图标',
 
+          id: 'system',
 
         },
 
         {
 
-          id: 'link',
 
-          name: this.$i18n.t('hotspot.link')
 
+          name: '自定义图标',
 
+          id: 'custom',
 
         },
 
         {
 
-          id: 'textarea',
 
-          name: this.$i18n.t('hotspot.textarea')
 
+          name: '个性标签',
 
+          id: 'personalized',
 
         },
 
-        {
 
-          id: 'image',
 
-          name: this.$i18n.t('hotspot.image')
 
-        },
 
-        {
 
-          id: 'audio',
 
-          name: this.$i18n.t('hotspot.audio')
 
-        },
 
-        {
 
-          id: 'video',
 
-          name: this.$i18n.t('hotspot.video')
 
-        }
 
       ],
 
-      hotStyle,
 
       rang: {
 
         label: this.$i18n.t('hotspot.icon_size'),
 
         unit: this.$i18n.t('hotspot.unit'),
 
-        gradient: 0.5,
 
+        gradient: 0.1,
 
         value: 1,
 
         min: 0.5,
 
         max: 2,
 
@@ -166,9 +196,9 @@ export default {
 
     'hotspot.hotspotTitle': function () {
 
       this.$getKrpano().set('layer[tooltip_' + this.hotspot.name + '].html', this.hotspot.hotspotTitle)
 
     },
 
-    'hotspot.visible': function () {
 
-      this.$getKrpano().set('layer[tooltip_' + this.hotspot.name + '].visible', this.hotspot.visible)
 
-    },
 
+    // 'hotspot.visible': function () {
 
+    //   this.$getKrpano().set('layer[tooltip_' + this.hotspot.name + '].visible', this.hotspot.visible)
 
+    // },
 
     'hotspot.size': {
 
       immediate: true,
 
       handler: function (newVal) {
 
@@ -205,6 +235,38 @@ export default {
 
       hotspot: 'hotspot',
 
       backupHotSpot: 'backupHotSpot',
 
     }),
 
+    iconSettingComponent() {
 
+      let tmp = this.hotspot.hotspotIconType
 
+      return () => import(`./hotspotIconType/${tmp}.vue`);
 
+    },
 
+    currentTitleDispayModeIdx() {
 
+      switch (this.hotspot.titleDisplayMode) {
 
+        case 'hover':
 
+          return 0
 
+        case 'always':
 
+          return 1
 
+        case 'never':
 
+          return 2
 
+        default:
 
+          return 0
 
+      }
 
+    },
 
+    currentTitlePositionIdx() {
 
+      switch (this.hotspot.titlePosition) {
 
+        case 'top':
 
+          return 0
 
+        case 'bottom':
 
+          return 1
 
+        case 'left':
 
+          return 2
 
+        case 'right':
 
+          return 3
 
+        case 'custom':
 
+          return 4
 
+        default:
 
+          return 0
 
+      }
 
+    },
 
     effectSettingComponent() {
 
       let tmp = this.hotspot.hotspotType
 
       return () => import(`./hotspotType/${tmp}.vue`);
 
@@ -234,15 +296,14 @@ export default {
 
       this.cancel()
 
     })
 
 
-
 
-    this.$nextTick(() => {
 
+    setTimeout(() => {
 
       if (this.editTitle != '编辑' && this.editTitle != this.$i18n.t('hotspot.edit')) {
 
-        this.addhotspot(this.hotStyle[0])
 
+        this.addhotspot(this.$refs['icon-setting-component'].hotspotIconList[0])
 
         this.rang.value = window.g_hotspotCurrentScale
 
         this.onRangeChange({ value: window.g_hotspotCurrentScale })
 
       }
 
       this.comboxBottomSpace = this.$refs.content.getBoundingClientRect().bottom
 
-    })
 
+    }, 300)
 
   },
 
 
   methods: {
 
@@ -252,28 +313,78 @@ export default {
 
         someData: {}
 
       }
 
     },
 
-    onhotSpotTypeChange(data) {
 
+    onHotSpotTypeChange(data) {
 
       this.hotspot.hotspotType = data.id
 
     },
 
+    onHotspotIconTypeChange(data) {
 
+      this.hotspot.hotspotIconType = data.id
 
+    },
 
     onRangeChange(data) {
 
       console.log(data);
 
       this.rang = { ...this.rang, value: data.value }
 
       this.hotspot.size = data.value
 
       switch (data.value) {
 
         case 0.5:
 
+        case 0.6:
 
+        case 0.7:
 
           this.hotspot.fontSize = 12
 
           break;
 
-        case 1:
 
+        case 0.8:
 
+        case 0.9:
 
+        case 1.0:
 
+        case 1.1:
 
+        case 1.2:
 
           this.hotspot.fontSize = 14
 
           break;
 
+        case 1.3:
 
+        case 1.4:
 
         case 1.5:
 
+        case 1.6:
 
+        case 1.7:
 
           this.hotspot.fontSize = 17
 
           break;
 
+        case 1.8:
 
+        case 1.9:
 
         case 2:
 
           this.hotspot.fontSize = 20
 
           break;
 
         default:
 
-          console.error('unexpected range value: ', data.value);
 
+          break;
 
+      }
 
+    },
 
+    onSelectTitleDisplayMode(idx) {
 
+      switch (idx) {
 
+        case 0:
 
+          this.hotspot.titleDisplayMode = 'hover'
 
+          break;
 
+        case 1:
 
+          this.hotspot.titleDisplayMode = 'always'
 
+          break;
 
+        case 2:
 
+          this.hotspot.titleDisplayMode = 'never'
 
+          break;
 
+        default:
 
+          break;
 
+      }
 
+    },
 
+    onSelectTitlePosition(idx) {
 
+      switch (idx) {
 
+        case 0:
 
+          this.hotspot.titlePosition = 'top'
 
+          break;
 
+        case 1:
 
+          this.hotspot.titlePosition = 'bottom'
 
+          break;
 
+        case 2:
 
+          this.hotspot.titlePosition = 'left'
 
+          break;
 
+        case 3:
 
+          this.hotspot.titlePosition = 'right'
 
+          break;
 
+        case 4:
 
+          this.hotspot.titlePosition = 'custom'
 
+          break;
 
+        default:
 
           break;
 
       }
 
     },
 
@@ -304,13 +415,11 @@ export default {
 
       if (this.isAdd && (this.editTitle != '编辑' && this.editTitle != this.$i18n.t('hotspot.edit'))) {
 
         this.isAdd = false
 
         this.hotspot.img = data.img
 
-        this.hotspot.icontype = data.id
 
         this.$bus.emit('addhotspot', this.hotspot)
 
         this.$getKrpano().set('layer[tooltip_' + this.hotspot.name + '].css', `text-align:center; color:#FFFFFF;
 
           font-family:STXihei;font-size:${this.hotspot.fontSize}px;`)
 
       } else {
 
         this.hotspot.img = data.img
 
-        this.hotspot.icontype = data.id
 
         this.$getKrpano().set(`hotspot[${this.hotspot.name}].url`, data.img)
 
         this.$getKrpano().set(`hotspot[${this.hotspot.name}].hotspottitle`, this.hotspot.hotspotTitle)
 
       }
 
@@ -321,123 +430,61 @@ export default {
 
 
 <style lang="less" scoped>
 
 .hots-panel {
 
-  background: #1A1B1D;
 
+  background: #252526;
 
   z-index: 10;
 
-
 
   display: flex;
 
   flex-direction: column;
 
-
 
   .header {
 
     padding: 20px;
 
     display: flex;
 
     font-size: 18px;
 
     color: #fff;
 
     flex: 0 0 auto;
 
-
 
     .icon_close {
 
       color: rgba(255, 255, 255, 0.6);
 
       cursor: pointer;
 
     }
 
   }
 
-
 
   .content {
 
-    padding: 20px 20px 14px 20px;
 
-    background: #252526;
 
+    padding: 0 20px 14px 20px;
 
     flex: 1 0 1px;
 
     overflow: auto;
 
-
 
+    .type-setting {
 
+      .remark {
 
+        font-size: 14px;
 
+        color: #ababab;
 
+      }
 
+      .combox {
 
+        margin-top: 16px;
 
+      }
 
+    }
 
     .icon-setting {
 
       .icon-setting-title {
 
         font-size: 18px;
 
         color: #FFFFFF;
 
       }
 
-
 
       .remark {
 
         margin-top: 16px;
 
         font-size: 14px;
 
         color: #ababab;
 
       }
 
-
 
-      .icon-list {
 
+      .combox {
 
+        margin-top: 16px;
 
+      }
 
+      .icon-setting-component {
 
         margin-top: 16px;
 
-        height: 158px;
 
-        background: #1A1B1D;
 
-        border-radius: 2px;
 
-        border: 1px solid #404040;
 
-        overflow: auto;
 
-        padding: 4px;
 
-
 
-        >.margin-handler-layer {
 
-          overflow: hidden;
 
-
 
-          ul {
 
-            display: flex;
 
-            align-items: center;
 
-            flex-wrap: wrap;
 
-            margin-right: -17px;
 
-            margin-bottom: -17px;
 
-
 
-            li {
 
-              cursor: pointer;
 
-              margin-right: 17px;
 
-              margin-bottom: 17px;
 
-              width: 38px;
 
-              height: 38px;
 
-              border: solid 2px transparent;
 
-              border-radius: 4px;
 
-              display: flex;
 
-              align-items: center;
 
-              justify-content: center;
 
-              position: relative;
 
-
 
-              &::after {
 
-                position: absolute;
 
-                content: '';
 
-                height: 100%;
 
-                width: 100%;
 
-                left: 0;
 
-                right: 0;
 
-                top: 0;
 
-                bottom: 0;
 
-                background-image: url(~@/assets/images/icons/gif@2x.png);
 
-                background-size: 100% auto;
 
-                z-index: 999;
 
-                pointer-events: none;
 
-              }
 
-
 
-              &.active {
 
-                border-color: #0076f6;
 
-              }
 
-            }
 
-          }
 
-        }
 
       }
 
 
       .bars {
 
         margin-top: 16px;
 
       }
 
     }
 
-
 
     .title-setting {
 
-      margin-top: 24px;
 
-
 
-      .title-setting-title {
 
+      .remark-highlight {
 
+        margin-top: 16px;
 
         font-size: 18px;
 
         color: #FFFFFF;
 
       }
 
-
 
-      .switch-wrapper {
 
-        display: flex;
 
-        align-items: center;
 
-        justify-content: space-between;
 
-        margin-top: 18px;
 
-
 
-        .label {
 
-          color: rgba(255, 255, 255, 0.6);
 
-          font-size: 14px;
 
-        }
 
-      }
 
-
 
       >.title-input-wrapper {
 
         position: relative;
 
         border: 1px solid rgba(151, 151, 151, 0.2);
 
@@ -447,11 +494,9 @@ export default {
 
         height: 36px;
 
         width: 100%;
 
         margin-top: 18px;
 
-
 
         &:focus-within {
 
           border-color: #0076F6;
 
         }
 
-
 
         >input {
 
           border: none;
 
           background: transparent;
 
@@ -463,7 +508,6 @@ export default {
 
           letter-spacing: 1px;
 
           font-size: 14px;
 
         }
 
-
 
         >.count {
 
           position: absolute;
 
           top: 50%;
 
@@ -473,35 +517,36 @@ export default {
 
           color: rgba(255, 255, 255, 0.2);
 
         }
 
       }
 
+      .remark {
 
+        margin-top: 18px;
 
+        color: rgba(255, 255, 255, 0.6);
 
+        font-size: 14px;
 
+      }
 
+      .display-mode-selector {
 
+        margin-top: 18px;
 
+      }
 
     }
 
-
 
     .effect-setting {
 
       margin-top: 16px;
 
-
 
       .effect-setting-title {
 
         font-size: 18px;
 
         color: #FFFFFF;
 
       }
 
-
 
       .combox {
 
         margin-top: 16px;
 
       }
 
-
 
       .effect-setting-component {
 
         margin-top: 16px;
 
       }
 
     }
 
   }
 
-
 
   .footer {
 
     flex: 0 0 auto;
 
     padding: 15px;
 
     background: #252526;
 
-
 
     .deepcancel {
 
       margin-right: 10px;
 
     }
 
-
 
     .ui-button {
 
       width: 112px;
 
     }

+ 29 - 83
packages/qjkankan-editor/src/views/hotspot/HotSpotList.vue
View File 

@@ -11,7 +11,7 @@
 
         :key="index"
 
         @click="open({
 
           isAdd: true,
 
-          type: item.id,
 
+          hotspotType: item.id,
 
         })"
 
       >
 
         <img class="icon" :src="item.icon" alt="" draggable="false">
 
@@ -67,7 +67,7 @@
 
 import EditPanel from "./EditPanel"
 
 import { mapGetters } from "vuex"
 
 import browser from "@/utils/browser"
 
-
 
+import hotspotTypeList from "./hotspotTypeList.js";
 
 
 let mapFontSize = {
 
   12: 0.5,
 
@@ -80,91 +80,23 @@ export default {
 
   components: {
 
     EditPanel,
 
   },
 
-  computed: {
 
-    ...mapGetters({
 
-      currentScene: "scene/currentScene",
 
-      hotspot: 'hotspot',
 
-      info: "info",
 
-    }),
 
-  },
 
   data() {
 
     return {
 
-      hotspotTypeList: [
 
-        {
 
-          icon: require('@/assets/images/icons/hotspot-type/link.png'),
 
-          name: '切换场景',
 
-          id: 'scene',
 
-          isExperience: false,
 
-        },
 
-        {
 
-          icon: require('@/assets/images/icons/hotspot-type/link.png'),
 
-          name: '图片',
 
-          id: 'image',
 
-          isExperience: false,
 
-        },
 
-        {
 
-          icon: require('@/assets/images/icons/hotspot-type/link.png'),
 
-          name: '视频',
 
-          id: 'video',
 
-          isExperience: false,
 
-        },
 
-        {
 
-          icon: require('@/assets/images/icons/hotspot-type/link.png'),
 
-          name: '音频',
 
-          id: 'audio',
 
-          isExperience: false,
 
-        },
 
-        {
 
-          icon: require('@/assets/images/icons/hotspot-type/link.png'),
 
-          name: '链接',
 
-          id: 'link',
 
-          isExperience: false,
 
-        },
 
-        {
 
-          icon: require('@/assets/images/icons/hotspot-type/link.png'),
 
-          name: '文本',
 
-          id: 'textarea',
 
-          isExperience: false,
 
-        },
 
-        {
 
-          icon: require('@/assets/images/icons/hotspot-type/link.png'),
 
-          name: '标签',
 
-          id: 'tag',
 
-          isExperience: true,
 
-        },
 
-        {
 
-          icon: require('@/assets/images/icons/hotspot-type/link.png'),
 
-          name: '图文',
 
-          id: 'imgText',
 
-          isExperience: true,
 
-        },
 
-        {
 
-          icon: require('@/assets/images/icons/hotspot-type/link.png'),
 
-          name: '文章',
 
-          id: 'article',
 
-          isExperience: true,
 
-        },
 
-        {
 
-          icon: require('@/assets/images/icons/hotspot-type/link.png'),
 
-          name: 'PDF',
 
-          id: 'pdf',
 
-          isExperience: true,
 
-        },
 
-        {
 
-          icon: require('@/assets/images/icons/hotspot-type/link.png'),
 
-          name: '电话',
 
-          id: 'phone',
 
-          isExperience: true,
 
-        },
 
-      ],
 
+      hotspotTypeList,
 
       
-      editLink: "",
 
       showPanel: false,
 
       someData: { hotspots: [] },
 
       deleIndex: -1,
 
       editTitle: '',
 
     }
 
   },
 
+  computed: {
 
+    ...mapGetters({
 
+      currentScene: "scene/currentScene",
 
+      hotspot: 'hotspot',
 
+      info: "info",
 
+    }),
 
+  },
 
   watch: {
 
     "$route.name": function () {
 
       this.showPanel = false
 
@@ -309,12 +241,13 @@ export default {
 
           type: '',
 
           img: '',
 
           link: '',
 
-          visible: true,
 
+          titleDisplayMode: 'always',
 
+          titlePosition: 'top',
 
           ath: '',
 
           atv: '',
 
-          icontype: 'ditu',
 
           size: 1,
 
-          hotspotType: 'scene', // todo
 
+          hotspotType: data.hotspotType, // 热点类型，切换场景、图片、视频、音频、链接、文本等等
 
+          hotspotIconType: 'system', // 热点图标的类型，系统图标、自定义图标、个性标签
 
           secne: '',
 
           hyperlink: '',
 
           textarea: '',
 
@@ -324,13 +257,26 @@ export default {
 
         }
 
       } else {
 
         hotspotData = browser.CloneObject(data)
 
+        // v1.3新增了“热点图标类型”
 
+        if (!hotspotData.hotspotIconType) {
 
+          hotspotData.hotspotIconType = 'system'
 
+        }
 
+        // v1.3把visible: Boolean换成了titleDisplayMode: 'always' | 'never' | 'hover'
 
+        if (hotspotData.visible) {
 
+          hotspotData.titleDisplayMode = 'always'
 
+        } else if (hotspotData.visible === false) {
 
+          hotspotData.titleDisplayMode = 'never'
 
+        }
 
+        // v1.3新增了titlePosition: 'top' | 'bottom' | 'left' | 'right' | 'custom'
 
+        if (!hotspotData.titlePosition) {
 
+          hotspotData.titlePosition = 'top'
 
+        }
 
       }
 
 
       this.$store.commit("SetHotspot", hotspotData)
 
       this.showPanel = true
 
 
-      if (data.isAdd) {
 
-        this.editLink = hotspotData.link
 
+      if (!data.isAdd) {
 
         this.editTitle =  this.$i18n.t('hotspot.edit')
 
         window.__krfn.utils.looktohotspot(this.$getKrpano(), data.name)
 
       }

+ 3 - 0
packages/qjkankan-editor/src/views/hotspot/hotspotIconType/custom.vue
View File 

@@ -0,0 +1,3 @@
 
+<template>

+  <div>自定义图标</div>

+</template>

+ 5 - 0
packages/qjkankan-editor/src/views/hotspot/hotspotIconType/personalized.vue
View File 

@@ -0,0 +1,5 @@
 
+<template>

+  <div>

+    自定义标签

+  </div>

+</template>

+ 87 - 0
packages/qjkankan-editor/src/views/hotspot/hotspotIconType/system.vue
View File 

@@ -0,0 +1,87 @@
 
+<template>

+<div class="icon-list">

+    <div class="margin-handler-layer">

+      <ul>

+        <li

+          v-for="(item, i) in hotspotIconList"

+          @click="$emit('addHotspot', item)" :key="i"

+        >

+          <img :src="item.thumb" alt="">

+        </li>

+      </ul>

+    </div>

+  </div>

+</template>

+

+<script>

+export default {

+  data() {

+    let cdn = this.$config.getStaticResource('/panoassets/images/hotspot/icon/')

+    let hotspotIconList = []

+    for (let i = 0; i < 12; i++) {

+      hotspotIconList[i] = {

+        id: 'icon' + (i + 1),

+        img: cdn + `img_doticon_${String(i + 1).padStart(2, '0')}.svg`,

+        thumb: cdn + `img_doticon_${String(i + 1).padStart(2, '0')}.svg`

+      }

+    }

+

+    return {

+      hotspotIconList,

+    }

+  },

+}

+</script>

+

+<style lang="less" scoped>

+.icon-list {

+  margin-top: 16px;

+  height: 158px;

+  background: #1A1B1D;

+  border-radius: 2px;

+  border: 1px solid #404040;

+  overflow: auto;

+  padding: 4px;

+  >.margin-handler-layer {

+    overflow: hidden;

+    ul {

+      display: flex;

+      align-items: center;

+      flex-wrap: wrap;

+      margin-right: -17px;

+      margin-bottom: -17px;

+      li {

+        cursor: pointer;

+        margin-right: 17px;

+        margin-bottom: 17px;

+        width: 38px;

+        height: 38px;

+        border: solid 2px transparent;

+        border-radius: 4px;

+        display: flex;

+        align-items: center;

+        justify-content: center;

+        position: relative;

+        z-index: 0;

+        &::after {

+          position: absolute;

+          content: '';

+          height: 100%;

+          width: 100%;

+          left: 0;

+          right: 0;

+          top: 0;

+          bottom: 0;

+          background-image: url(~@/assets/images/icons/gif@2x.png);

+          background-size: 100% auto;

+          z-index: 999;

+          pointer-events: none;

+        }

+        &:hover {

+          border-color: #0076f6;

+        }

+      }

+    }

+  }

+}

+</style>

+ 97 - 0
packages/qjkankan-editor/src/views/hotspot/hotspotTypeList.js
View File 

@@ -0,0 +1,97 @@
 
+export default [

+  {

+    icon: require('@/assets/images/icons/hotspot-type/link.png'),

+    name: '切换场景',

+    id: 'scene',

+    isExperience: false,

+  },

+  {

+    icon: require('@/assets/images/icons/hotspot-type/link.png'),

+    name: '图片',

+    id: 'image',

+    isExperience: false,

+  },

+  {

+    icon: require('@/assets/images/icons/hotspot-type/link.png'),

+    name: '视频',

+    id: 'video',

+    isExperience: false,

+  },

+  {

+    icon: require('@/assets/images/icons/hotspot-type/link.png'),

+    name: '音频',

+    id: 'audio',

+    isExperience: false,

+  },

+  {

+    icon: require('@/assets/images/icons/hotspot-type/link.png'),

+    name: '链接',

+    id: 'link',

+    isExperience: false,

+  },

+  {

+    icon: require('@/assets/images/icons/hotspot-type/link.png'),

+    name: '文本',

+    id: 'textarea',

+    isExperience: false,

+  },

+  {

+    icon: require('@/assets/images/icons/hotspot-type/link.png'),

+    name: '标签',

+    id: 'tag',

+    isExperience: true,

+  },

+  {

+    icon: require('@/assets/images/icons/hotspot-type/link.png'),

+    name: '图文',

+    id: 'imgText',

+    isExperience: true,

+  },

+  {

+    icon: require('@/assets/images/icons/hotspot-type/link.png'),

+    name: '文章',

+    id: 'article',

+    isExperience: true,

+  },

+  {

+    icon: require('@/assets/images/icons/hotspot-type/link.png'),

+    name: 'PDF',

+    id: 'pdf',

+    isExperience: true,

+  },

+  {

+    icon: require('@/assets/images/icons/hotspot-type/link.png'),

+    name: '电话',

+    id: 'phone',

+    isExperience: true,

+  },

+]

+

+/*

+      hotSpotTypeList: [

+        {

+          id: 'scene',

+          name: this.$i18n.t('hotspot.secne')

+        },

+        {

+          id: 'link',

+          name: this.$i18n.t('hotspot.link')

+        },

+        {

+          id: 'textarea',

+          name: this.$i18n.t('hotspot.textarea')

+        },

+        {

+          id: 'image',

+          name: this.$i18n.t('hotspot.image')

+        },

+        {

+          id: 'audio',

+          name: this.$i18n.t('hotspot.audio')

+        },

+        {

+          id: 'video',

+          name: this.$i18n.t('hotspot.video')

+        }

+      ],

+*/