xuhuajiao
/
intelligent-bookshelf
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

图书详情 位置样式改变

master
x_ying 3 years ago
parent
091a447721
commit
1cb2b899d8
10 changed files with 302 additions and 100 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. 169
      src/assets/iconfont/demo_index.html
  2. 36
      src/assets/iconfont/iconfont.css
  3. 2
      src/assets/iconfont/iconfont.js
  4. 51
      src/assets/iconfont/iconfont.json
  5. 14
      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. 130
      src/views/module/bookDetails.vue

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

@ -54,6 +54,36 @@
<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>
<div class="code-name">&amp;#xe635;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe638;</span>
<div class="name">左滑</div>
<div class="code-name">&amp;#xe638;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe636;</span>
<div class="name">no.2</div>
<div class="code-name">&amp;#xe636;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe637;</span>
<div class="name">2</div>
<div class="code-name">&amp;#xe637;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe634;</span>
<div class="name">键盘</div>
@ -102,24 +132,12 @@
<div class="code-name">&amp;#xe629;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62a;</span>
<div class="name">no.2</div>
<div class="code-name">&amp;#xe62a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62b;</span>
<div class="name">no.1</div>
<div class="code-name">&amp;#xe62b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62c;</span>
<div class="name">2</div>
<div class="code-name">&amp;#xe62c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62d;</span>
<div class="name">3</div>
@ -150,10 +168,10 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1663323349029') format('woff2'),
url('iconfont.woff?t=1663323349029') format('woff'),
url('iconfont.ttf?t=1663323349029') format('truetype'),
url('iconfont.svg?t=1663323349029#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>
@ -179,6 +197,51 @@
<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">
右滑
</div>
<div class="code-name">.icon-youhua
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zuohua"></span>
<div class="name">
左滑
</div>
<div class="code-name">.icon-zuohua
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-a-no21"></span>
<div class="name">
no.2
</div>
<div class="code-name">.icon-a-no21
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-a-21"></span>
<div class="name">
2
</div>
<div class="code-name">.icon-a-21
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jianpan"></span>
<div class="name">
@ -251,15 +314,6 @@
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-a-no2"></span>
<div class="name">
no.2
</div>
<div class="code-name">.icon-a-no2
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-a-no1"></span>
<div class="name">
@ -269,15 +323,6 @@
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-a-2"></span>
<div class="name">
2
</div>
<div class="code-name">.icon-a-2
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-a-3"></span>
<div class="name">
@ -323,6 +368,46 @@
<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>
</svg>
<div class="name">右滑</div>
<div class="code-name">#icon-youhua</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zuohua"></use>
</svg>
<div class="name">左滑</div>
<div class="code-name">#icon-zuohua</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-a-no21"></use>
</svg>
<div class="name">no.2</div>
<div class="code-name">#icon-a-no21</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-a-21"></use>
</svg>
<div class="name">2</div>
<div class="code-name">#icon-a-21</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jianpan"></use>
@ -387,14 +472,6 @@
<div class="code-name">#icon-a-no3</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-a-no2"></use>
</svg>
<div class="name">no.2</div>
<div class="code-name">#icon-a-no2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-a-no1"></use>
@ -403,14 +480,6 @@
<div class="code-name">#icon-a-no1</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-a-2"></use>
</svg>
<div class="name">2</div>
<div class="code-name">#icon-a-2</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-a-3"></use>

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

@ -1,9 +1,9 @@
@font-face {
font-family: "iconfont"; /* Project id 3646564 */
src: url('iconfont.woff2?t=1663323349029') format('woff2'),
url('iconfont.woff?t=1663323349029') format('woff'),
url('iconfont.ttf?t=1663323349029') format('truetype'),
url('iconfont.svg?t=1663323349029#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,26 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-weizhi:before {
content: "\e639";
}
.icon-youhua:before {
content: "\e635";
}
.icon-zuohua:before {
content: "\e638";
}
.icon-a-no21:before {
content: "\e636";
}
.icon-a-21:before {
content: "\e637";
}
.icon-jianpan:before {
content: "\e634";
}
@ -46,18 +66,10 @@
content: "\e629";
}
.icon-a-no2:before {
content: "\e62a";
}
.icon-a-no1:before {
content: "\e62b";
}
.icon-a-2:before {
content: "\e62c";
}
.icon-a-3:before {
content: "\e62d";
}

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

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

@ -1,10 +1,45 @@
{
"id": "3646564",
"name": "智慧屏",
"name": "东西湖图书馆",
"font_family": "iconfont",
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "32102019",
"name": "位置",
"font_class": "weizhi",
"unicode": "e639",
"unicode_decimal": 58937
},
{
"icon_id": "31966175",
"name": "右滑",
"font_class": "youhua",
"unicode": "e635",
"unicode_decimal": 58933
},
{
"icon_id": "31966176",
"name": "左滑",
"font_class": "zuohua",
"unicode": "e638",
"unicode_decimal": 58936
},
{
"icon_id": "31879702",
"name": "no.2",
"font_class": "a-no21",
"unicode": "e636",
"unicode_decimal": 58934
},
{
"icon_id": "31879708",
"name": "2",
"font_class": "a-21",
"unicode": "e637",
"unicode_decimal": 58935
},
{
"icon_id": "31879044",
"name": "键盘",
@ -61,13 +96,6 @@
"unicode": "e629",
"unicode_decimal": 58921
},
{
"icon_id": "31804865",
"name": "no.2",
"font_class": "a-no2",
"unicode": "e62a",
"unicode_decimal": 58922
},
{
"icon_id": "31804866",
"name": "no.1",
@ -75,13 +103,6 @@
"unicode": "e62b",
"unicode_decimal": 58923
},
{
"icon_id": "31804867",
"name": "2",
"font_class": "a-2",
"unicode": "e62c",
"unicode_decimal": 58924
},
{
"icon_id": "31804868",
"name": "3",

14
src/assets/iconfont/iconfont.svg
File diff suppressed because it is too large
View File

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

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

@ -7,10 +7,10 @@
>
<!-- :before-close="handleClose" -->
<div class="dialog-setting">
<div class="book-details-box">
<div v-if="bookData" class="book-details-box">
<div class="book-details">
<div class="book-cover">
<img :src="bookData.srcUrl ? bookData.srcUrl : ''" :onerror="defaultImg" />
<img :src="bookData.srcUrl ? bookData.srcUrl : ''" :onerror="defaultImg">
</div>
<div class="book-desc">
<h3>{{ bookData.bookName }}</h3>
@ -20,9 +20,58 @@
</div>
</div>
<div class="book-local">
<span v-if="bookData.bookPlace">所在位置：{{ bookData.bookPlace }}</span>
<!-- <span v-if="bookData.bookPlace">所在位置：{{ bookData.bookPlace }}</span> -->
<!-- 待定：热门图书/新书推荐跳转到 场馆导航操作 -->
<span v-else>所在位置</span>
<!-- <span v-else>所在位置</span> -->
<div class="local-title" @click="test">
所在位置
</div>
<ul class="local-list">
<li>
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-weizhi" />
</svg>
<span>一楼西区......</span>
</li>
<!-- -->
<li>
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-weizhi" />
</svg>
<span>一楼西区......</span>
</li>
<li>
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-weizhi" />
</svg>
<span>一楼西区......</span>
</li>
<li>
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-weizhi" />
</svg>
<span>一楼西区......</span>
</li>
<li>
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-weizhi" />
</svg>
<span>一楼西区......</span>
</li>
<li>
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-weizhi" />
</svg>
<span>一楼西区......</span>
</li>
<li>
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-weizhi" />
</svg>
<span>一楼西区......</span>
</li>
</ul>
</div>
</div>
</div>
@ -36,24 +85,28 @@ export default {
data() {
return {
dialogVisible: false,
bookData: {},
bookData: null,
defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"'
}
},
created() {
},
methods: {
test() {
console.log(this.bookData)
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog{
position: absolute;
top: 15%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%);
transform: translate(-50%,-50%);
border-radius: 24px;
margin-top: 0 !important;
.el-dialog__body{
padding: 0 40px 40px 40px ;
}
@ -137,17 +190,58 @@ export default {
}
}
.book-local{
border: 1px solid #3F92F6;
background: #D0E0F9;
border-radius: 52px;
height: 64px;
line-height: 64px;
text-align: center;
font-size: 30px;
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;
li{
height: 56px;
line-height: 56px;
background-color: #fff;
// margin-right: 8px;
margin-bottom: 15px;
padding-left: 13px;
font-size: 26px;
span{
margin-left: 19px;
}
}
}
}
}
/**滚动条的宽度*/
::-webkit-scrollbar {
width: 8px;
height: 4px;
}
//滚动条的滑块
::-webkit-scrollbar-thumb {
background-color: #3F92F6;
border-radius: 4px;
}
</style>
Write Preview
Loading…
Cancel
Save