图书详情位置更改

src/assets/iconfont/demo_index.html

@@ -54,6 +54,12 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe639;</span>
+                <div class="name">位置</div>
+                <div class="code-name">&amp;#xe639;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe635;</span>
                 <div class="name">右滑</div>
@@ -162,10 +168,10 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1663843773274') format('woff2'),
-       url('iconfont.woff?t=1663843773274') format('woff'),
-       url('iconfont.ttf?t=1663843773274') format('truetype'),
-       url('iconfont.svg?t=1663843773274#iconfont') format('svg');
+  src: url('iconfont.woff2?t=1664428017869') format('woff2'),
+       url('iconfont.woff?t=1664428017869') format('woff'),
+       url('iconfont.ttf?t=1664428017869') format('truetype'),
+       url('iconfont.svg?t=1664428017869#iconfont') format('svg');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -191,6 +197,15 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont icon-weizhi"></span>
+            <div class="name">
+              位置
+            </div>
+            <div class="code-name">.icon-weizhi
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-youhua"></span>
             <div class="name">
@@ -353,6 +368,14 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-weizhi"></use>
+                </svg>
+                <div class="name">位置</div>
+                <div class="code-name">#icon-weizhi</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-youhua"></use>

src/assets/iconfont/iconfont.css

@@ -1,9 +1,9 @@
 @font-face {
   font-family: "iconfont"; /* Project id 3646564 */
-  src: url('iconfont.woff2?t=1663843773274') format('woff2'),
-       url('iconfont.woff?t=1663843773274') format('woff'),
-       url('iconfont.ttf?t=1663843773274') format('truetype'),
-       url('iconfont.svg?t=1663843773274#iconfont') format('svg');
+  src: url('iconfont.woff2?t=1664428017869') format('woff2'),
+       url('iconfont.woff?t=1664428017869') format('woff'),
+       url('iconfont.ttf?t=1664428017869') format('truetype'),
+       url('iconfont.svg?t=1664428017869#iconfont') format('svg');
 }
 
 .iconfont {
@@ -14,6 +14,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-weizhi:before {
+  content: "\e639";
+}
+
 .icon-youhua:before {
   content: "\e635";
 }

src/assets/iconfont/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "32102019",
+      "name": "位置",
+      "font_class": "weizhi",
+      "unicode": "e639",
+      "unicode_decimal": 58937
+    },
     {
       "icon_id": "31966175",
       "name": "右滑",

src/assets/iconfont/iconfont.svg

@@ -14,6 +14,8 @@
     />
       <missing-glyph />
       
+      <glyph glyph-name="weizhi" unicode="&#58937;" d="M512.9082 822.839368c194.265533-0.331794 351.701904-157.768165 352.033698-352.033698 0.497691-92.570595-35.999676-181.408505-101.446092-246.854921l-5.474605-4.562171L512.991148-24.72904 268.87353 218.476144l-5.474605 5.474605c-65.446416 65.446416-102.026731 154.284326-101.446092 246.854921-0.331794 194.099635 156.689834 351.701904 350.706521 352.033698h0.248846m0.082948 73.160632C277.997872 895.834103 87.630921 705.301256 87.796819 470.307979 87.879767 358.576266 131.842505 251.406723 210.311845 171.859052l302.596355-299.859052 301.68392 300.854435c164.818793 166.892507 163.159822 435.894694-3.815634 600.713487C731.477661 851.871365 624.474016 895.917051 512.991148 896z m0-219.398947c80.874848 0.082949 146.570109-65.529364 146.57011-146.404212s-65.529364-146.570109-146.404213-146.57011c-80.874848-0.082949-146.570109 65.529364-146.570109 146.404213v0.248845c0.497691 80.626002 65.695261 145.823572 146.321264 146.321264"  horiz-adv-x="1024" />
+      
       <glyph glyph-name="youhua" unicode="&#58933;" d="M512 384m-512 0a512 512 0 1 1 1024 0 512 512 0 1 1-1024 0ZM547.4 361l-2-2-25-25-201.8-201.8c-14.2-14.4-37.5-14.6-51.9-0.4-14.4 14.2-14.6 37.5-0.4 51.9l0.4 0.4 201.7 201.8-201.7 201.7c-14.5 14.2-14.9 37.5-0.7 52 14.2 14.5 37.5 14.9 52 0.7l0.7-0.7 201.7-201.7 24.7-24.7 2.5-2.5c12.8-14.2 12.7-35.7-0.2-49.7zM754.2 361l-2-2-25-25-201.8-201.8c-14.2-14.4-37.5-14.6-51.9-0.4-14.4 14.2-14.6 37.5-0.4 51.9l0.4 0.4 201.7 201.8-201.8 201.7c-14.5 14.2-14.9 37.5-0.7 52 14.2 14.5 37.5 14.9 52 0.7l0.7-0.7 201.7-201.7 24.7-24.7 2.5-2.5c12.8-14.2 12.8-35.7-0.1-49.7z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="zuohua" unicode="&#58936;" d="M512 384m-512 0a512 512 0 1 1 1024 0 512 512 0 1 1-1024 0ZM476.608 361l2-2 25-25 201.8-201.8c14.2-14.4 37.5-14.6 51.9-0.4 14.4 14.2 14.6 37.5 0.4 51.9l-0.4 0.4-201.8 201.8 201.8 201.7c14.2 14.5 13.9 37.8-0.7 52-14.3 13.9-37 13.9-51.3 0l-201.7-201.7-24.7-24.7-2.5-2.5c-12.8-14.2-12.7-35.7 0.2-49.7zM269.808 361l2-2 25-25 201.7-201.7c14.2-14.4 37.5-14.6 51.9-0.4 14.4 14.2 14.6 37.5 0.4 51.9l-0.4 0.4-201.6 201.7 201.8 201.7c14.2 14.5 13.9 37.8-0.7 52-14.3 13.9-37 13.9-51.3 0l-201.8-201.7-24.7-24.7-2.5-2.5c-12.7-14.2-12.7-35.7 0.2-49.7z"  horiz-adv-x="1024" />

src/views/module/bookDetails.vue

@@ -20,7 +20,27 @@
             </div>
           </div>
           <div class="book-local">
-            位置
+            <!-- <span v-if="bookData.bookPlace">所在位置：{{ bookData.bookPlace }}</span> -->
+            <!-- 待定：热门图书/新书推荐跳转到 场馆导航操作 -->
+            <!-- <span v-else>所在位置</span> -->
+            <div class="local-title">
+              所在位置
+            </div>
+            <ul class="local-list">
+              <li v-if="!bookData.places" class="local-none">
+                <!-- <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-weizhi" />
+                </svg> -->
+                <span>当前图书暂未查到位置信息</span>
+              </li>
+              <!--  -->
+              <li v-for="(item,index) in bookData.places" v-else :key="index" class="local-list-info" @click="toBookNav( bookData.barcode)">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-weizhi" />
+                </svg>
+                <span>{{ item.shelfName }}</span>
+              </li>
+            </ul>
           </div>
         </div>
       </div>
@@ -41,6 +61,10 @@ export default {
   created() {
   },
   methods: {
+    toBookNav(barcode) {
+      const linkSrc = process.env.VUE_APP_BASE_API
+      window.location.href = linkSrc + '/anchoring/goNavigation.do?libcode=1201&eqmNo=001&barcode=' + barcode
+    }
   }
 }
 </script>
@@ -131,18 +155,69 @@ export default {
       }
     }
   }
-  .book-local{
-    border: 1px solid #3F92F6;
-    background: #D0E0F9;
-    border-radius: 52px;
-    height: 64px;
-    line-height: 64px;
+  // .book-local{
+  //   border: 1px solid #3F92F6;
+  //   background: #D0E0F9;
+  //   border-radius: 52px;
+  //   height: 64px;
+  //   line-height: 64px;
+  //   text-align: center;
+  //   font-size: 30px;
+  //   color: #333;
+  //   overflow: hidden;
+  //   white-space: nowrap;
+  //   text-overflow: ellipsis;
+  // }
+  .book-local {
+    height: 343px;
+    color: #333;
+    display: flex;
+    // border-radius: 52px;
+    // line-height: 64px;
+    // text-align: center;
+    // font-size: 30px;
+    // overflow: hidden;
+    // white-space: nowrap;
+    // text-overflow: ellipsis;
+    .local-title {
+      width: 83px;
+      height: 100%;
+      background: url("~@/assets/images/local-bg.png") no-repeat;
+      writing-mode: vertical-rl;
       text-align: center;
+      line-height: 83px;
       font-size: 30px;
-    color: #333;
+      color: #fff;
+    }
+    .local-list {
+      flex: 1;
+      border: 1px solid #3f92f6;
+      border-left: none;
+      background: #d0e0f9;
       overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+      overflow-y: auto;
+      position: relative;
+      font-size: 26px;
+      .local-list-info {
+        height: 56px;
+        line-height: 56px;
+        background-color: #fff;
+        // margin-right: 8px;
+        margin-bottom: 15px;
+        padding-left: 13px;
+        span {
+          margin-left: 19px;
+        }
+      }
+      .local-none {
+        width: 100%;
+        text-align: center;
+        position: absolute;
+        // left: 50%;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
   }
 }
 </style>