z_yu
/
intelligent-inquiry-machine
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

图书详情位置更改

master
x_ying 2 years ago
parent
53641f6d0f
commit
35da850b5d
10 changed files with 132 additions and 21 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 31
      src/assets/iconfont/demo_index.html
  2. 12
      src/assets/iconfont/iconfont.css
  3. 2
      src/assets/iconfont/iconfont.js
  4. 7
      src/assets/iconfont/iconfont.json
  5. 2
      src/assets/iconfont/iconfont.svg
  6. BIN
      src/assets/iconfont/iconfont.ttf
  7. BIN
      src/assets/iconfont/iconfont.woff
  8. BIN
      src/assets/iconfont/iconfont.woff2
  9. BIN
      src/assets/images/local-bg.png
  10. 99
      src/views/module/bookDetails.vue

31
src/assets/iconfont/demo_index.html
View File

@ -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>

12
src/assets/iconfont/iconfont.css
View File

@ -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";
}

2
src/assets/iconfont/iconfont.js
File diff suppressed because it is too large
View File

7
src/assets/iconfont/iconfont.json
View File

@ -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": "右滑",

2
src/assets/iconfont/iconfont.svg
View File

@ -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" />

BIN
src/assets/iconfont/iconfont.ttf
View File

BIN
src/assets/iconfont/iconfont.woff
View File

BIN
src/assets/iconfont/iconfont.woff2
View File

BIN
src/assets/images/local-bg.png
View File

Side by Side

After

Width: 83  |  Height: 346  |  Size: 6.5 KiB

99
src/views/module/bookDetails.vue
View File

@ -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;
text-align: center;
font-size: 30px;
// .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;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
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: #fff;
}
.local-list {
flex: 1;
border: 1px solid #3f92f6;
border-left: none;
background: #d0e0f9;
overflow: hidden;
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>
Write Preview
Loading…
Cancel
Save