Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
P
party-build-cloud
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
wangqinghua
party-build-cloud
Commits
841de323
Commit
841de323
authored
Apr 24, 2019
by
wangqinghua
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
style
parent
427dce27
Show whitespace changes
Inline
Side-by-side
Showing
21 changed files
with
985 additions
and
47 deletions
+985
-47
app.scss
src/app/app.scss
+8
-6
demo.css
src/assets/iconfont/demo.css
+539
-0
demo_index.html
src/assets/iconfont/demo_index.html
+239
-0
iconfont.css
src/assets/iconfont/iconfont.css
+29
-0
iconfont.eot
src/assets/iconfont/iconfont.eot
+0
-0
iconfont.js
src/assets/iconfont/iconfont.js
+2
-0
iconfont.svg
src/assets/iconfont/iconfont.svg
+35
-0
iconfont.ttf
src/assets/iconfont/iconfont.ttf
+0
-0
iconfont.woff
src/assets/iconfont/iconfont.woff
+0
-0
iconfont.woff2
src/assets/iconfont/iconfont.woff2
+0
-0
stuff-detail.html
src/pages/home-pages/stuff-detail/stuff-detail.html
+1
-1
stuff-detail.scss
src/pages/home-pages/stuff-detail/stuff-detail.scss
+1
-1
stuff-detail.ts
src/pages/home-pages/stuff-detail/stuff-detail.ts
+3
-0
discover.html
src/pages/tabs/discover/discover.html
+11
-1
discover.scss
src/pages/tabs/discover/discover.scss
+54
-0
discover.ts
src/pages/tabs/discover/discover.ts
+7
-6
home.html
src/pages/tabs/home/home.html
+1
-1
home.scss
src/pages/tabs/home/home.scss
+36
-29
home.ts
src/pages/tabs/home/home.ts
+17
-1
mine.html
src/pages/tabs/mine/mine.html
+1
-1
icon.scss
src/theme/icon.scss
+1
-0
No files found.
src/app/app.scss
View file @
841de323
@import
"../theme/icon"
;
@import
"../theme/icon"
;
@import
"../theme/style"
;
@import
"../theme/style"
;
@import
"../assets/iconfont/iconfont"
;
//html,ion-app.ios{
//html,ion-app.ios{
// font-family: "webfont",serif !important;
// font-family: "webfont",serif !important;
// font-style: normal;
// font-style: normal;
...
@@ -242,17 +243,18 @@ p {
...
@@ -242,17 +243,18 @@ p {
}
}
.toolbar-icon
{
.toolbar-icon
{
position
:
relative
;
position
:
relative
;
ion-icon
{
ion-icon
.iconfont
{
font-size
:
2
.5rem
;
font-size
:
2
.5rem
;
color
:
#ffffff
;
color
:
#ffffff
;
margin-right
:
1rem
;
margin-right
:
.5rem
;
margin-top
:
.4rem
;
}
}
.num
{
.num
{
position
:
absolute
;
position
:
absolute
;
top
:
0
px
;
top
:
1
px
;
right
:
6
px
;
right
:
4
px
;
background-color
:
#fff
;
background-color
:
#fff
;
padding
:
1px
5
px
;
padding
:
1px
3
px
;
color
:
#e12724
;
color
:
#e12724
;
font-size
:
.8rem
;
font-size
:
.8rem
;
border-radius
:
100px
;
border-radius
:
100px
;
...
@@ -273,7 +275,7 @@ p {
...
@@ -273,7 +275,7 @@ p {
top
:
20%
;
top
:
20%
;
left
:
10%
;
left
:
10%
;
width
:
80%
;
width
:
80%
;
height
:
4
8
%
;
height
:
4
5
%
;
background-color
:
#fff
;
background-color
:
#fff
;
border-radius
:
5px
;
border-radius
:
5px
;
background
:
url(../assets/imgs/home/signBgc.png)
repeat
;
background
:
url(../assets/imgs/home/signBgc.png)
repeat
;
...
...
src/assets/iconfont/demo.css
0 → 100644
View file @
841de323
/* Logo 字体 */
@font-face
{
font-family
:
"iconfont logo"
;
src
:
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834')
;
src
:
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix')
format
(
'embedded-opentype'
),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834')
format
(
'woff'
),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834')
format
(
'truetype'
),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont')
format
(
'svg'
);
}
.logo
{
font-family
:
"iconfont logo"
;
font-size
:
160px
;
font-style
:
normal
;
-webkit-font-smoothing
:
antialiased
;
-moz-osx-font-smoothing
:
grayscale
;
}
/* tabs */
.nav-tabs
{
position
:
relative
;
}
.nav-tabs
.nav-more
{
position
:
absolute
;
right
:
0
;
bottom
:
0
;
height
:
42px
;
line-height
:
42px
;
color
:
#666
;
}
#tabs
{
border-bottom
:
1px
solid
#eee
;
}
#tabs
li
{
cursor
:
pointer
;
width
:
100px
;
height
:
40px
;
line-height
:
40px
;
text-align
:
center
;
font-size
:
16px
;
border-bottom
:
2px
solid
transparent
;
position
:
relative
;
z-index
:
1
;
margin-bottom
:
-1px
;
color
:
#666
;
}
#tabs
.active
{
border-bottom-color
:
#f00
;
color
:
#222
;
}
.tab-container
.content
{
display
:
none
;
}
/* 页面布局 */
.main
{
padding
:
30px
100px
;
width
:
960px
;
margin
:
0
auto
;
}
.main
.logo
{
color
:
#333
;
text-align
:
left
;
margin-bottom
:
30px
;
line-height
:
1
;
height
:
110px
;
margin-top
:
-50px
;
overflow
:
hidden
;
*
zoom
:
1
;
}
.main
.logo
a
{
font-size
:
160px
;
color
:
#333
;
}
.helps
{
margin-top
:
40px
;
}
.helps
pre
{
padding
:
20px
;
margin
:
10px
0
;
border
:
solid
1px
#e7e1cd
;
background-color
:
#fffdef
;
overflow
:
auto
;
}
.icon_lists
{
width
:
100%
!important
;
overflow
:
hidden
;
*
zoom
:
1
;
}
.icon_lists
li
{
width
:
100px
;
margin-bottom
:
10px
;
margin-right
:
20px
;
text-align
:
center
;
list-style
:
none
!important
;
cursor
:
default
;
}
.icon_lists
li
.code-name
{
line-height
:
1.2
;
}
.icon_lists
.icon
{
display
:
block
;
height
:
100px
;
line-height
:
100px
;
font-size
:
42px
;
margin
:
10px
auto
;
color
:
#333
;
-webkit-transition
:
font-size
0.25s
linear
,
width
0.25s
linear
;
-moz-transition
:
font-size
0.25s
linear
,
width
0.25s
linear
;
transition
:
font-size
0.25s
linear
,
width
0.25s
linear
;
}
.icon_lists
.icon
:hover
{
font-size
:
100px
;
}
.icon_lists
.svg-icon
{
/* 通过设置 font-size 来改变图标大小 */
width
:
1em
;
/* 图标和文字相邻时,垂直对齐 */
vertical-align
:
-0.15em
;
/* 通过设置 color 来改变 SVG 的颜色/fill */
fill
:
currentColor
;
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
normalize.css 中也包含这行 */
overflow
:
hidden
;
}
.icon_lists
li
.name
,
.icon_lists
li
.code-name
{
color
:
#666
;
}
/* markdown 样式 */
.markdown
{
color
:
#666
;
font-size
:
14px
;
line-height
:
1.8
;
}
.highlight
{
line-height
:
1.5
;
}
.markdown
img
{
vertical-align
:
middle
;
max-width
:
100%
;
}
.markdown
h1
{
color
:
#404040
;
font-weight
:
500
;
line-height
:
40px
;
margin-bottom
:
24px
;
}
.markdown
h2
,
.markdown
h3
,
.markdown
h4
,
.markdown
h5
,
.markdown
h6
{
color
:
#404040
;
margin
:
1.6em
0
0.6em
0
;
font-weight
:
500
;
clear
:
both
;
}
.markdown
h1
{
font-size
:
28px
;
}
.markdown
h2
{
font-size
:
22px
;
}
.markdown
h3
{
font-size
:
16px
;
}
.markdown
h4
{
font-size
:
14px
;
}
.markdown
h5
{
font-size
:
12px
;
}
.markdown
h6
{
font-size
:
12px
;
}
.markdown
hr
{
height
:
1px
;
border
:
0
;
background
:
#e9e9e9
;
margin
:
16px
0
;
clear
:
both
;
}
.markdown
p
{
margin
:
1em
0
;
}
.markdown
>
p
,
.markdown
>
blockquote
,
.markdown
>
.highlight
,
.markdown
>
ol
,
.markdown
>
ul
{
width
:
80%
;
}
.markdown
ul
>
li
{
list-style
:
circle
;
}
.markdown
>
ul
li
,
.markdown
blockquote
ul
>
li
{
margin-left
:
20px
;
padding-left
:
4px
;
}
.markdown
>
ul
li
p
,
.markdown
>
ol
li
p
{
margin
:
0.6em
0
;
}
.markdown
ol
>
li
{
list-style
:
decimal
;
}
.markdown
>
ol
li
,
.markdown
blockquote
ol
>
li
{
margin-left
:
20px
;
padding-left
:
4px
;
}
.markdown
code
{
margin
:
0
3px
;
padding
:
0
5px
;
background
:
#eee
;
border-radius
:
3px
;
}
.markdown
strong
,
.markdown
b
{
font-weight
:
600
;
}
.markdown
>
table
{
border-collapse
:
collapse
;
border-spacing
:
0px
;
empty-cells
:
show
;
border
:
1px
solid
#e9e9e9
;
width
:
95%
;
margin-bottom
:
24px
;
}
.markdown
>
table
th
{
white-space
:
nowrap
;
color
:
#333
;
font-weight
:
600
;
}
.markdown
>
table
th
,
.markdown
>
table
td
{
border
:
1px
solid
#e9e9e9
;
padding
:
8px
16px
;
text-align
:
left
;
}
.markdown
>
table
th
{
background
:
#F7F7F7
;
}
.markdown
blockquote
{
font-size
:
90%
;
color
:
#999
;
border-left
:
4px
solid
#e9e9e9
;
padding-left
:
0.8em
;
margin
:
1em
0
;
}
.markdown
blockquote
p
{
margin
:
0
;
}
.markdown
.anchor
{
opacity
:
0
;
transition
:
opacity
0.3s
ease
;
margin-left
:
8px
;
}
.markdown
.waiting
{
color
:
#ccc
;
}
.markdown
h1
:hover
.anchor
,
.markdown
h2
:hover
.anchor
,
.markdown
h3
:hover
.anchor
,
.markdown
h4
:hover
.anchor
,
.markdown
h5
:hover
.anchor
,
.markdown
h6
:hover
.anchor
{
opacity
:
1
;
display
:
inline-block
;
}
.markdown
>
br
,
.markdown
>
p
>
br
{
clear
:
both
;
}
.hljs
{
display
:
block
;
background
:
white
;
padding
:
0.5em
;
color
:
#333333
;
overflow-x
:
auto
;
}
.hljs-comment
,
.hljs-meta
{
color
:
#969896
;
}
.hljs-string
,
.hljs-variable
,
.hljs-template-variable
,
.hljs-strong
,
.hljs-emphasis
,
.hljs-quote
{
color
:
#df5000
;
}
.hljs-keyword
,
.hljs-selector-tag
,
.hljs-type
{
color
:
#a71d5d
;
}
.hljs-literal
,
.hljs-symbol
,
.hljs-bullet
,
.hljs-attribute
{
color
:
#0086b3
;
}
.hljs-section
,
.hljs-name
{
color
:
#63a35c
;
}
.hljs-tag
{
color
:
#333333
;
}
.hljs-title
,
.hljs-attr
,
.hljs-selector-id
,
.hljs-selector-class
,
.hljs-selector-attr
,
.hljs-selector-pseudo
{
color
:
#795da3
;
}
.hljs-addition
{
color
:
#55a532
;
background-color
:
#eaffea
;
}
.hljs-deletion
{
color
:
#bd2c00
;
background-color
:
#ffecec
;
}
.hljs-link
{
text-decoration
:
underline
;
}
/* 代码高亮 */
/* PrismJS 1.15.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
code
[
class
*=
"language-"
],
pre
[
class
*=
"language-"
]
{
color
:
black
;
background
:
none
;
text-shadow
:
0
1px
white
;
font-family
:
Consolas
,
Monaco
,
'Andale Mono'
,
'Ubuntu Mono'
,
monospace
;
text-align
:
left
;
white-space
:
pre
;
word-spacing
:
normal
;
word-break
:
normal
;
word-wrap
:
normal
;
line-height
:
1.5
;
-moz-tab-size
:
4
;
-o-tab-size
:
4
;
tab-size
:
4
;
-webkit-hyphens
:
none
;
-moz-hyphens
:
none
;
-ms-hyphens
:
none
;
hyphens
:
none
;
}
pre
[
class
*=
"language-"
]
::-moz-selection
,
pre
[
class
*=
"language-"
]
::-moz-selection
,
code
[
class
*=
"language-"
]
::-moz-selection
,
code
[
class
*=
"language-"
]
::-moz-selection
{
text-shadow
:
none
;
background
:
#b3d4fc
;
}
pre
[
class
*=
"language-"
]
::selection
,
pre
[
class
*=
"language-"
]
::selection
,
code
[
class
*=
"language-"
]
::selection
,
code
[
class
*=
"language-"
]
::selection
{
text-shadow
:
none
;
background
:
#b3d4fc
;
}
@media
print
{
code
[
class
*=
"language-"
],
pre
[
class
*=
"language-"
]
{
text-shadow
:
none
;
}
}
/* Code blocks */
pre
[
class
*=
"language-"
]
{
padding
:
1em
;
margin
:
.5em
0
;
overflow
:
auto
;
}
:not
(
pre
)>
code
[
class
*=
"language-"
],
pre
[
class
*=
"language-"
]
{
background
:
#f5f2f0
;
}
/* Inline code */
:not
(
pre
)>
code
[
class
*=
"language-"
]
{
padding
:
.1em
;
border-radius
:
.3em
;
white-space
:
normal
;
}
.token.comment
,
.token.prolog
,
.token.doctype
,
.token.cdata
{
color
:
slategray
;
}
.token.punctuation
{
color
:
#999
;
}
.namespace
{
opacity
:
.7
;
}
.token.property
,
.token.tag
,
.token.boolean
,
.token.number
,
.token.constant
,
.token.symbol
,
.token.deleted
{
color
:
#905
;
}
.token.selector
,
.token.attr-name
,
.token.string
,
.token.char
,
.token.builtin
,
.token.inserted
{
color
:
#690
;
}
.token.operator
,
.token.entity
,
.token.url
,
.language-css
.token.string
,
.style
.token.string
{
color
:
#9a6e3a
;
background
:
hsla
(
0
,
0%
,
100%
,
.5
);
}
.token.atrule
,
.token.attr-value
,
.token.keyword
{
color
:
#07a
;
}
.token.function
,
.token.class-name
{
color
:
#DD4A68
;
}
.token.regex
,
.token.important
,
.token.variable
{
color
:
#e90
;
}
.token.important
,
.token.bold
{
font-weight
:
bold
;
}
.token.italic
{
font-style
:
italic
;
}
.token.entity
{
cursor
:
help
;
}
src/assets/iconfont/demo_index.html
0 → 100644
View file @
841de323
<!DOCTYPE html>
<html>
<head>
<meta
charset=
"utf-8"
/>
<title>
IconFont Demo
</title>
<link
rel=
"shortcut icon"
href=
"https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico"
type=
"image/x-icon"
/>
<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"
>
<script
src=
"iconfont.js"
></script>
<!-- jQuery -->
<script
src=
"https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"
></script>
<!-- 代码高亮 -->
<script
src=
"https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"
></script>
</head>
<body>
<div
class=
"main"
>
<h1
class=
"logo"
><a
href=
"https://www.iconfont.cn/"
title=
"iconfont 首页"
target=
"_blank"
>

</a></h1>
<div
class=
"nav-tabs"
>
<ul
id=
"tabs"
class=
"dib-box"
>
<li
class=
"dib active"
><span>
Unicode
</span></li>
<li
class=
"dib"
><span>
Font class
</span></li>
<li
class=
"dib"
><span>
Symbol
</span></li>
</ul>
<a
href=
"https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1159768"
target=
"_blank"
class=
"nav-more"
>
查看项目
</a>
</div>
<div
class=
"tab-container"
>
<div
class=
"content unicode"
style=
"display: block;"
>
<ul
class=
"icon_lists dib-box"
>
<li
class=
"dib"
>
<span
class=
"icon iconfont"
>

</span>
<div
class=
"name"
>
tm-email
</div>
<div
class=
"code-name"
>
&
#xe621;
</div>
</li>
<li
class=
"dib"
>
<span
class=
"icon iconfont"
>

</span>
<div
class=
"name"
>
删除
</div>
<div
class=
"code-name"
>
&
#xe612;
</div>
</li>
<li
class=
"dib"
>
<span
class=
"icon iconfont"
>

</span>
<div
class=
"name"
>
发布
</div>
<div
class=
"code-name"
>
&
#xe6ab;
</div>
</li>
</ul>
<div
class=
"article markdown"
>
<h2
id=
"unicode-"
>
Unicode 引用
</h2>
<hr>
<p>
Unicode 是字体在网页端最原始的应用方式,特点是:
</p>
<ul>
<li>
兼容性最好,支持 IE6+,及所有现代浏览器。
</li>
<li>
支持按字体的方式去动态调整图标大小,颜色等等。
</li>
<li>
但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。
</li>
</ul>
<blockquote>
<p>
注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式
</p>
</blockquote>
<p>
Unicode 使用步骤如下:
</p>
<h3
id=
"-font-face"
>
第一步:拷贝项目下面生成的
<code>
@font-face
</code></h3>
<pre><code
class=
"language-css"
>
@font-face {
font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff2') format('woff2'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
<h3
id=
"-iconfont-"
>
第二步:定义使用 iconfont 的样式
</h3>
<pre><code
class=
"language-css"
>
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</code></pre>
<h3
id=
"-"
>
第三步:挑选相应图标并获取字体编码,应用于页面
</h3>
<pre>
<code
class=
"language-html"
>
<
span class="iconfont"
>&
#x33;
<
/span
>
</code></pre>
<blockquote>
<p>
"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。
</p>
</blockquote>
</div>
</div>
<div
class=
"content font-class"
>
<ul
class=
"icon_lists dib-box"
>
<li
class=
"dib"
>
<span
class=
"icon iconfont icon-youjian"
></span>
<div
class=
"name"
>
tm-email
</div>
<div
class=
"code-name"
>
.icon-youjian
</div>
</li>
<li
class=
"dib"
>
<span
class=
"icon iconfont icon-shanchu"
></span>
<div
class=
"name"
>
删除
</div>
<div
class=
"code-name"
>
.icon-shanchu
</div>
</li>
<li
class=
"dib"
>
<span
class=
"icon iconfont icon-fabu"
></span>
<div
class=
"name"
>
发布
</div>
<div
class=
"code-name"
>
.icon-fabu
</div>
</li>
</ul>
<div
class=
"article markdown"
>
<h2
id=
"font-class-"
>
font-class 引用
</h2>
<hr>
<p>
font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。
</p>
<p>
与 Unicode 使用方式相比,具有如下特点:
</p>
<ul>
<li>
兼容性良好,支持 IE8+,及所有现代浏览器。
</li>
<li>
相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
</li>
<li>
因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。
</li>
<li>
不过因为本质上还是使用的字体,所以多色图标还是不支持的。
</li>
</ul>
<p>
使用步骤如下:
</p>
<h3
id=
"-fontclass-"
>
第一步:引入项目下面生成的 fontclass 代码:
</h3>
<pre><code
class=
"language-html"
>
<
link rel="stylesheet" href="./iconfont.css"
>
</code></pre>
<h3
id=
"-"
>
第二步:挑选相应图标并获取类名,应用于页面:
</h3>
<pre><code
class=
"language-html"
>
<
span class="iconfont icon-xxx"
><
/span
>
</code></pre>
<blockquote>
<p>
"
iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。
</p>
</blockquote>
</div>
</div>
<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-youjian"
></use>
</svg>
<div
class=
"name"
>
tm-email
</div>
<div
class=
"code-name"
>
#icon-youjian
</div>
</li>
<li
class=
"dib"
>
<svg
class=
"icon svg-icon"
aria-hidden=
"true"
>
<use
xlink:href=
"#icon-shanchu"
></use>
</svg>
<div
class=
"name"
>
删除
</div>
<div
class=
"code-name"
>
#icon-shanchu
</div>
</li>
<li
class=
"dib"
>
<svg
class=
"icon svg-icon"
aria-hidden=
"true"
>
<use
xlink:href=
"#icon-fabu"
></use>
</svg>
<div
class=
"name"
>
发布
</div>
<div
class=
"code-name"
>
#icon-fabu
</div>
</li>
</ul>
<div
class=
"article markdown"
>
<h2
id=
"symbol-"
>
Symbol 引用
</h2>
<hr>
<p>
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇
<a
href=
""
>
文章
</a>
这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:
</p>
<ul>
<li>
支持多色图标了,不再受单色限制。
</li>
<li>
通过一些技巧,支持像字体那样,通过
<code>
font-size
</code>
,
<code>
color
</code>
来调整样式。
</li>
<li>
兼容性较差,支持 IE9+,及现代浏览器。
</li>
<li>
浏览器渲染 SVG 的性能一般,还不如 png。
</li>
</ul>
<p>
使用步骤如下:
</p>
<h3
id=
"-symbol-"
>
第一步:引入项目下面生成的 symbol 代码:
</h3>
<pre><code
class=
"language-html"
>
<
script src="./iconfont.js"
><
/script
>
</code></pre>
<h3
id=
"-css-"
>
第二步:加入通用 CSS 代码(引入一次就行):
</h3>
<pre><code
class=
"language-html"
>
<
style
>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
<
/style
>
</code></pre>
<h3
id=
"-"
>
第三步:挑选相应图标并获取类名,应用于页面:
</h3>
<pre><code
class=
"language-html"
>
<
svg class="icon" aria-hidden="true"
>
<
use xlink:href="#icon-xxx"
><
/use
>
<
/svg
>
</code></pre>
</div>
</div>
</div>
</div>
<script>
$
(
document
).
ready
(
function
()
{
$
(
'.tab-container .content:first'
).
show
()
$
(
'#tabs li'
).
click
(
function
(
e
)
{
var
tabContent
=
$
(
'.tab-container .content'
)
var
index
=
$
(
this
).
index
()
if
(
$
(
this
).
hasClass
(
'active'
))
{
return
}
else
{
$
(
'#tabs li'
).
removeClass
(
'active'
)
$
(
this
).
addClass
(
'active'
)
tabContent
.
hide
().
eq
(
index
).
fadeIn
()
}
})
})
</script>
</body>
</html>
src/assets/iconfont/iconfont.css
0 → 100644
View file @
841de323
@font-face
{
font-family
:
"iconfont"
;
src
:
url('iconfont.eot?t=1556088193106')
;
/* IE9 */
src
:
url('iconfont.eot?t=1556088193106#iefix')
format
(
'embedded-opentype'
),
/* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAARoAAsAAAAACOgAAAQZAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqFKIQtATYCJAMQCwoABCAFhG0HQhuZB8gOJQnBwABggA5EPHzt93ru7r6XDaFKvgqQQsvjoyKByr5T920JlKzvVHj0gEb8+Wdz/Y2p2I1XYXSDkQtgc/kYM7LRi+j4n2Omi8SB5bfZXLKSRnsDHLcOKCLuvP3A7kCO8AT8hrHLi7xNYEDHLKyjyPh0ACv0RYF4ICK5AE5olQpSqIq2YGcRr4Camh6zzwBeej8f/8FGwCRNpq88vhUhAMG/jJ6thmr/d+U6CMAbzgy2j4x1QCHuFFovQUF0HWRAHs+xA6iqxFADDs9W/+8h/lak1fiXRxIy0dKlQwi7Fcv8MrIYJH45MAh+rdbKEF3mV4wBPgERADv7d7YazYQ6VHMMDXVsdLQGJjmTKvSW7LFgM3sn6y/fbw2N7ZvCchbsaQ8kMiE0PSNgZ4dfEBqEZbD5UN1w+yBgd4c6RjIiCemnv1thojO8yixvjNagCYvd3aut+7QnVvyyDC1sWEvriUm61uBg7ZC29lPzDG3UKxqpG86Fhgd4dsVIh2nKUK2JACMFKLm6bkbqqnbhoEn6klXWGSPLlzIBy/2kpaZMQRDqn6t37Rqmtvh6lG7HytoVWjrvL9hw5l700N9+2R6qW92xErA/XfHi/XzzYYX+Yb2VH/BoRu+w/ugHU6sQdzLXXjHp2MiLEwc/vzxdqM21TkYm/MXZ5PoRUN/dBjP6K+E2jZX6TLc6TzRg2M4Km80aYxqP9NwefHngpvdIHAsf8Gc9t2u1+9Ip1RVGzK48FxySDvfC6e7IcwpGn4Gvw2hIcKUpRgN2Un16Wh9S/Z5Yzmrg8d282LQYJU3JEyeys8e/6qotW6yvMRY9ju6Mzj6M1q13Cr8b7rR+tmTZtQCHmhqHSxJ/1zvudxYuPGsxfCqEhWGskDZ7FP14Ss/QxlDvVLAhp03NLflUspvaokzNIlYIhgEFdFf+yP4F+SHEorewgHz2a/yOJzcHnxTo+3+t2gV8ezalzuM3k4H3y2vM+xF4DRuKItB1pUhCi6v6ilNvOpwwYDjpQeeEe0PIpxvnE6rpCJI+c5BV88iCXYfGoC1oVbswYE3U/kGTKJAo/VjVBCCMWQ/JiA+QjTmLLNi70JjxFlpjAcGAkzA+cdBiiLTCKJxL4wKEV4aI+HIZYRpoLb8wFSdVEi4VF3hkDKeUogDi4uicTkThMpwaYo2ymHSlaQIhKLkUiQT34RKJHFFQ8iKcTzsKaVrh6+REFL2QI18uBVoOUXBcNJwAgqcMQoRPToZwWtO0Mt+fCkdSkeCiKurKzBgcRUk0PMKFI+cGyCiprFHdpYxXKkZyRaMReB6BIieFiIRmnMSIyiEUxdOK4PhojoQdwgq+nFAzoqnUcXq59A63wQD9tBIpcpRo9D2Sq4pEXJmGUmhP4AtVHILLUwEAAAAA')
format
(
'woff2'
),
url('iconfont.woff?t=1556088193106')
format
(
'woff'
),
url('iconfont.ttf?t=1556088193106')
format
(
'truetype'
),
/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1556088193106#iconfont')
format
(
'svg'
);
/* iOS 4.1- */
}
.iconfont
{
font-family
:
"iconfont"
!important
;
font-size
:
16px
;
font-style
:
normal
;
-webkit-font-smoothing
:
antialiased
;
-moz-osx-font-smoothing
:
grayscale
;
}
.icon-youjian
:before
{
content
:
"\e621"
;
}
.icon-shanchu
:before
{
content
:
"\e612"
;
}
.icon-fabu
:before
{
content
:
"\e6ab"
;
}
src/assets/iconfont/iconfont.eot
0 → 100644
View file @
841de323
File added
src/assets/iconfont/iconfont.js
0 → 100644
View file @
841de323
!
function
(
a
){
var
e
,
c
=
'<svg><symbol id="icon-youjian" viewBox="0 0 1024 1024"><path d="M885.727285 134.724401 137.500119 134.724401c-41.463344 0-75.17412 33.162284-75.17412 74.002434l0 451.134771c0 40.804335 33.710776 73.92978 75.17412 73.92978l748.227166 0c41.60763 0 75.172073-33.125445 75.172073-73.92978l0-451.134771C960.899358 167.885662 927.334915 134.724401 885.727285 134.724401L885.727285 134.724401 885.727285 134.724401zM867.738585 187.703009 569.345568 447.849958c-26.030863 22.833031-45.301765 34.168194-57.732889 34.168194s-31.699979-11.335163-57.769728-34.168194L155.488819 187.703009 867.738585 187.703009 867.738585 187.703009 867.738585 187.703009zM118.231263 643.334187 118.231263 235.765655l233.051847 200.969151L118.231263 643.334187 118.231263 643.334187 118.231263 643.334187zM157.425937 680.774915l233.893005-204.224288 38.317701 33.07121c22.267143 19.140942 49.725518 28.957519 81.975013 28.957519 32.431643 0 59.671031-9.816576 82.048691-28.957519l38.317701-33.07121 233.893005 204.224288L157.425937 680.774915 157.425937 680.774915 157.425937 680.774915zM904.995117 643.334187 671.978063 436.734806l233.017054-200.969151L904.995117 643.334187 904.995117 643.334187 904.995117 643.334187zM904.995117 643.334187" ></path></symbol><symbol id="icon-shanchu" viewBox="0 0 1024 1024"><path d="M386.990351 752.645802L386.990351 359.958188c0-9.866718-8.003606-17.84953-17.851285-17.84953-9.849726 0-17.850261 7.982812-17.850261 17.84953l0 392.687614c0 9.850345 8.000536 17.851577 17.850261 17.851577C378.986745 770.497379 386.990351 762.496148 386.990351 752.645802zM529.793466 752.645802L529.793466 359.958188c0-9.866718-8.003606-17.84953-17.853331-17.84953-9.846656 0-17.848215 7.982812-17.848215 17.84953l0 392.687614c0 9.850345 8.001559 17.851577 17.848215 17.851577C521.788837 770.497379 529.793466 762.496148 529.793466 752.645802zM815.393554 324.259128c-9.845632 0-17.846168 7.983835-17.846168 17.84953l0 481.935264c0 19.697621-15.987768 35.700083-35.702569 35.700083L262.038521 859.744006c-19.715825 0-35.700523-16.002462-35.700523-35.700083L226.337999 342.109682c0-9.866718-8.001559-17.84953-17.850261-17.84953-8.3014 0-15.271424 5.681396-17.26286 13.373589-0.194436-0.107447-0.396036-0.204661-0.588425-0.316202l0 486.72843c0 39.429011 31.953022 71.39812 71.401046 71.39812l499.806295 0c39.430627 0 71.401046-31.969109 71.401046-71.39812L833.244839 342.109682C833.245862 332.242963 825.244303 324.259128 815.393554 324.259128zM869.04872 199.312418L663.473431 199.312418l-65.856545-65.853847c-3.810948-3.811816-8.844798-5.641487-13.840783-5.52176-0.146339-0.00307-0.287561-0.021489-0.4339-0.021489L440.541135 127.915321c-0.128942 0-0.254814 0.016373-0.382732 0.019443-4.979612-0.105401-9.991971 1.726318-13.789616 5.523807l-65.856545 65.853847L154.93593 199.312418c-9.848702 0-17.849238 7.984858-17.849238 17.850553 0 9.849322 8.000536 17.850553 17.849238 17.850553l214.203137 0c0.225137 0 0.444133-0.025583 0.667223-0.033769 5.0799 0.190335 10.221201-1.633197 14.097644-5.508457l65.856545-65.85487 124.462669 0 65.856545 65.85487c3.875419 3.876284 9.017744 5.698792 14.09662 5.508457 0.224113 0.008186 0.44311 0.033769 0.667223 0.033769l214.202113 0c9.848702 0 17.849238-8.001231 17.849238-17.850553C886.898981 207.297276 878.897422 199.312418 869.04872 199.312418zM672.592487 752.645802L672.592487 359.958188c0-9.866718-7.998489-17.84953-17.848215-17.84953s-17.851285 7.982812-17.851285 17.84953l0 392.687614c0 9.850345 8.001559 17.851577 17.851285 17.851577S672.592487 762.496148 672.592487 752.645802z" fill="" ></path></symbol><symbol id="icon-fabu" viewBox="0 0 1024 1024"><path d="M862 105.5c10-10 26.8-10 36.8 0l53.7 53.7c10 10 10 26.8 0 36.8L495.7 652.8l-90.5-90.5L862 105.5m-45.3-45.2l-502 502 181 181 502-502c35-35 35-92.3 0-127.3L944 60.3c-35-35.1-92.3-35.1-127.3 0z" fill="" ></path><path d="M497 742c-4 4-9 7-14.8 8.5l-176.5 47.3c-12.8 3.4-26.5-0.3-35.9-9.6-9.4-9.4-13-23.1-9.6-35.9l47.3-176.5c4.7-17.6 22.8-28.1 40.5-23.4 17.6 4.7 28.1 22.8 23.4 40.5l-34.3 128.2 128.2-34.3c17.6-4.7 35.7 5.7 40.5 23.4 3 11.7-0.7 23.7-8.8 31.8zM731.315 164l45.255-45.254L939.203 281.38l-45.255 45.255z" fill="" ></path><path d="M868.6 990H155.4C69.7 990 0 920.3 0 834.6V186C0 102.2 68.2 34 152 34h458.1c17.7 0 32 14.3 32 32s-14.3 32-32 32H152c-48.5 0-88 39.5-88 88v648.6c0 50.4 41 91.4 91.4 91.4h713.2c50.4 0 91.4-41 91.4-91.4V417.1c0-17.7 14.3-32 32-32s32 14.3 32 32v417.5c0 85.7-69.7 155.4-155.4 155.4z" fill="" ></path></symbol></svg>'
,
t
=
(
e
=
document
.
getElementsByTagName
(
"script"
))[
e
.
length
-
1
].
getAttribute
(
"data-injectcss"
);
if
(
t
&&!
a
.
__iconfont__svg__cssinject__
){
a
.
__iconfont__svg__cssinject__
=!
0
;
try
{
document
.
write
(
"<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>"
)}
catch
(
e
){
console
&&
console
.
log
(
e
)}}
!
function
(
e
){
if
(
document
.
addEventListener
)
if
(
~
[
"complete"
,
"loaded"
,
"interactive"
].
indexOf
(
document
.
readyState
))
setTimeout
(
e
,
0
);
else
{
var
t
=
function
(){
document
.
removeEventListener
(
"DOMContentLoaded"
,
t
,
!
1
),
e
()};
document
.
addEventListener
(
"DOMContentLoaded"
,
t
,
!
1
)}
else
document
.
attachEvent
&&
(
c
=
e
,
n
=
a
.
document
,
l
=!
1
,
o
=
function
(){
l
||
(
l
=!
0
,
c
())},(
i
=
function
(){
try
{
n
.
documentElement
.
doScroll
(
"left"
)}
catch
(
e
){
return
void
setTimeout
(
i
,
50
)}
o
()})(),
n
.
onreadystatechange
=
function
(){
"complete"
==
n
.
readyState
&&
(
n
.
onreadystatechange
=
null
,
o
())});
var
c
,
n
,
l
,
o
,
i
}(
function
(){
var
e
,
t
;(
e
=
document
.
createElement
(
"div"
)).
innerHTML
=
c
,
c
=
null
,(
t
=
e
.
getElementsByTagName
(
"svg"
)[
0
])
&&
(
t
.
setAttribute
(
"aria-hidden"
,
"true"
),
t
.
style
.
position
=
"absolute"
,
t
.
style
.
width
=
0
,
t
.
style
.
height
=
0
,
t
.
style
.
overflow
=
"hidden"
,
function
(
e
,
t
){
t
.
firstChild
?
function
(
e
,
t
){
t
.
parentNode
.
insertBefore
(
e
,
t
)}(
e
,
t
.
firstChild
):
t
.
appendChild
(
e
)}(
t
,
document
.
body
))})}(
window
);
\ No newline at end of file
src/assets/iconfont/iconfont.svg
0 → 100644
View file @
841de323
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<!--
2013-9-30: Created.
-->
<svg>
<metadata>
Created by iconfont
</metadata>
<defs>
<font
id=
"iconfont"
horiz-adv-x=
"1024"
>
<font-face
font-family=
"iconfont"
font-weight=
"500"
font-stretch=
"normal"
units-per-em=
"1024"
ascent=
"896"
descent=
"-128"
/>
<missing-glyph
/>
<glyph
glyph-name=
"youjian"
unicode=
""
d=
"M885.727285 761.275599L137.500119 761.275599c-41.463344 0-75.17412-33.162284-75.17412-74.002434l0-451.134771c0-40.804335 33.710776-73.92978 75.17412-73.92978l748.227166 0c41.60763 0 75.172073 33.125445 75.172073 73.92978l0 451.134771C960.899358 728.114338 927.334915 761.275599 885.727285 761.275599L885.727285 761.275599 885.727285 761.275599zM867.738585 708.2969909999999L569.345568 448.150042c-26.030863-22.833031-45.301765-34.168194-57.732889-34.168194s-31.699979 11.335163-57.769728 34.168194L155.488819 708.2969909999999 867.738585 708.2969909999999 867.738585 708.2969909999999 867.738585 708.2969909999999zM118.231263 252.66581299999996L118.231263 660.234345l233.051847-200.969151L118.231263 252.66581299999996 118.231263 252.66581299999996 118.231263 252.66581299999996zM157.425937 215.22508500000004l233.893005 204.224288 38.317701-33.07121c22.267143-19.140942 49.725518-28.957519 81.975013-28.957519 32.431643 0 59.671031 9.816576 82.048691 28.957519l38.317701 33.07121 233.893005-204.224288L157.425937 215.22508500000004 157.425937 215.22508500000004 157.425937 215.22508500000004zM904.995117 252.66581299999996L671.978063 459.265194l233.017054 200.969151L904.995117 252.66581299999996 904.995117 252.66581299999996 904.995117 252.66581299999996zM904.995117 252.66581299999996"
horiz-adv-x=
"1024"
/>
<glyph
glyph-name=
"shanchu"
unicode=
""
d=
"M386.990351 143.354198L386.990351 536.041812c0 9.866718-8.003606 17.84953-17.851285 17.84953-9.849726 0-17.850261-7.982812-17.850261-17.84953l0-392.687614c0-9.850345 8.000536-17.851577 17.850261-17.851577C378.986745 125.502621 386.990351 133.503852 386.990351 143.354198zM529.793466 143.354198L529.793466 536.041812c0 9.866718-8.003606 17.84953-17.853331 17.84953-9.846656 0-17.848215-7.982812-17.848215-17.84953l0-392.687614c0-9.850345 8.001559-17.851577 17.848215-17.851577C521.788837 125.502621 529.793466 133.503852 529.793466 143.354198zM815.393554 571.740872c-9.845632 0-17.846168-7.983835-17.846168-17.84953l0-481.935264c0-19.697621-15.987768-35.700083-35.702569-35.700083L262.038521 36.255994c-19.715825 0-35.700523 16.002462-35.700523 35.700083L226.337999 553.890318c0 9.866718-8.001559 17.84953-17.850261 17.84953-8.3014 0-15.271424-5.681396-17.26286-13.373589-0.194436 0.107447-0.396036 0.204661-0.588425 0.316202l0-486.72843c0-39.429011 31.953022-71.39812 71.401046-71.39812l499.806295 0c39.430627 0 71.401046 31.969109 71.401046 71.39812L833.244839 553.890318C833.245862 563.757037 825.244303 571.740872 815.393554 571.740872zM869.04872 696.687582L663.473431 696.687582l-65.856545 65.853847c-3.810948 3.811816-8.844798 5.641487-13.840783 5.52176-0.146339 0.00307-0.287561 0.021489-0.4339 0.021489L440.541135 768.084679c-0.128942 0-0.254814-0.016373-0.382732-0.019443-4.979612 0.105401-9.991971-1.726318-13.789616-5.523807l-65.856545-65.853847L154.93593 696.687582c-9.848702 0-17.849238-7.984858-17.849238-17.850553 0-9.849322 8.000536-17.850553 17.849238-17.850553l214.203137 0c0.225137 0 0.444133 0.025583 0.667223 0.033769 5.0799-0.190335 10.221201 1.633197 14.097644 5.508457l65.856545 65.85487 124.462669 0 65.856545-65.85487c3.875419-3.876284 9.017744-5.698792 14.09662-5.508457 0.224113-0.008186 0.44311-0.033769 0.667223-0.033769l214.202113 0c9.848702 0 17.849238 8.001231 17.849238 17.850553C886.898981 688.702724 878.897422 696.687582 869.04872 696.687582zM672.592487 143.354198L672.592487 536.041812c0 9.866718-7.998489 17.84953-17.848215 17.84953s-17.851285-7.982812-17.851285-17.84953l0-392.687614c0-9.850345 8.001559-17.851577 17.851285-17.851577S672.592487 133.503852 672.592487 143.354198z"
horiz-adv-x=
"1024"
/>
<glyph
glyph-name=
"fabu"
unicode=
""
d=
"M862 790.5c10 10 26.8 10 36.8 0l53.7-53.7c10-10 10-26.8 0-36.8L495.7 243.2l-90.5 90.5L862 790.5m-45.3 45.2l-502-502 181-181 502 502c35 35 35 92.3 0 127.3L944 835.7c-35 35.1-92.3 35.1-127.3 0zM497 154c-4-4-9-7-14.8-8.5l-176.5-47.3c-12.8-3.4-26.5 0.3-35.9 9.6-9.4 9.4-13 23.1-9.6 35.9l47.3 176.5c4.7 17.6 22.8 28.1 40.5 23.4 17.6-4.7 28.1-22.8 23.4-40.5l-34.3-128.2 128.2 34.3c17.6 4.7 35.7-5.7 40.5-23.4 3-11.7-0.7-23.7-8.8-31.8zM731.315 732l45.255 45.254L939.203 614.62l-45.255-45.255zM868.6-94H155.4C69.7-94 0-24.3 0 61.4V710C0 793.8 68.2 862 152 862h458.1c17.7 0 32-14.3 32-32s-14.3-32-32-32H152c-48.5 0-88-39.5-88-88v-648.6c0-50.4 41-91.4 91.4-91.4h713.2c50.4 0 91.4 41 91.4 91.4V478.9c0 17.7 14.3 32 32 32s32-14.3 32-32v-417.5c0-85.7-69.7-155.4-155.4-155.4z"
horiz-adv-x=
"1024"
/>
</font>
</defs></svg>
src/assets/iconfont/iconfont.ttf
0 → 100644
View file @
841de323
File added
src/assets/iconfont/iconfont.woff
0 → 100644
View file @
841de323
File added
src/assets/iconfont/iconfont.woff2
0 → 100644
View file @
841de323
File added
src/pages/home-pages/stuff-detail/stuff-detail.html
View file @
841de323
...
@@ -27,7 +27,7 @@
...
@@ -27,7 +27,7 @@
</ion-col>
</ion-col>
<ion-col
col-10
>
<ion-col
col-10
>
<p
class=
"comment-info"
>
<p
class=
"comment-info"
>
发布
{{comment.username}}
</p>
</p>
<p
class=
"commnet-content"
>
<p
class=
"commnet-content"
>
{{comment.content}}
{{comment.content}}
...
...
src/pages/home-pages/stuff-detail/stuff-detail.scss
View file @
841de323
...
@@ -168,7 +168,7 @@ page-stuff-detail {
...
@@ -168,7 +168,7 @@ page-stuff-detail {
}
}
.comment-time
{
.comment-time
{
font-size
:
1
.4rem
;
font-size
:
1
.4rem
;
color
:
#
666666
;
color
:
#
888888
;
}
}
}
}
...
...
src/pages/home-pages/stuff-detail/stuff-detail.ts
View file @
841de323
...
@@ -15,6 +15,7 @@ export class StuffDetailPage {
...
@@ -15,6 +15,7 @@ export class StuffDetailPage {
stuffId
;
//文章id
stuffId
;
//文章id
content
:
string
;
//评论内容
content
:
string
;
//评论内容
userId
;
//用户id
userId
;
//用户id
username
;
//用户姓名
stuffObj
;
//文章对象
stuffObj
;
//文章对象
footerView
:
boolean
;
footerView
:
boolean
;
...
@@ -28,6 +29,7 @@ export class StuffDetailPage {
...
@@ -28,6 +29,7 @@ export class StuffDetailPage {
this
.
storage
.
get
(
'userLoginInfo'
).
then
((
value
)
=>
{
this
.
storage
.
get
(
'userLoginInfo'
).
then
((
value
)
=>
{
console
.
log
(
value
);
console
.
log
(
value
);
this
.
userId
=
value
.
userid
;
this
.
userId
=
value
.
userid
;
this
.
username
=
value
.
loginName
;
this
.
updateNum
(
1
,
1
);
this
.
updateNum
(
1
,
1
);
})
})
this
.
stuffId
=
this
.
navParams
.
get
(
'id'
);
this
.
stuffId
=
this
.
navParams
.
get
(
'id'
);
...
@@ -83,6 +85,7 @@ export class StuffDetailPage {
...
@@ -83,6 +85,7 @@ export class StuffDetailPage {
id
:
this
.
stuffId
,
id
:
this
.
stuffId
,
num
:
1
,
num
:
1
,
type
:
4
,
type
:
4
,
username
:
this
.
username
}
}
this
.
tabSer
.
updateNumByType
(
data
).
subscribe
(
this
.
tabSer
.
updateNumByType
(
data
).
subscribe
(
(
res
)
=>
{
(
res
)
=>
{
...
...
src/pages/tabs/discover/discover.html
View file @
841de323
...
@@ -5,9 +5,19 @@
...
@@ -5,9 +5,19 @@
<img
class=
"toolbar-img"
src=
"./assets/imgs/logo.png"
>
<img
class=
"toolbar-img"
src=
"./assets/imgs/logo.png"
>
</button>
</button>
</ion-buttons>
</ion-buttons>
<ion-buttons
center
class=
"search-button"
(
click
)="
goToSearch
()"
>
<ion-searchbar
class=
"toolbar-search"
placeholder=
"搜索"
></ion-searchbar>
<ion-icon
class=
"search-icon"
name=
"search"
></ion-icon>
</ion-buttons>
<ion-buttons
end
>
<button
ion-button
icon-only
(
click
)="
isSign =
true"
class=
"toolbar-signUp"
>
<ion-icon
class=
"icon-fabu iconfont"
></ion-icon>
<span
class=
"signUp-span"
>
发布
</span>
</button>
</ion-buttons>
<ion-buttons
end
>
<ion-buttons
end
>
<button
ion-button
icon-only
class=
"toolbar-icon"
>
<button
ion-button
icon-only
class=
"toolbar-icon"
>
<ion-icon
name=
"mail
"
></ion-icon>
<ion-icon
class=
"icon-youjian iconfont
"
></ion-icon>
<span
class=
"num"
>
2
</span>
<span
class=
"num"
>
2
</span>
</button>
</button>
</ion-buttons>
</ion-buttons>
...
...
src/pages/tabs/discover/discover.scss
View file @
841de323
page-discover
{
page-discover
{
.toolbar
.searchbar-ios
.searchbar-input
{
background-color
:
#e12724
;
border-bottom
:
1px
solid
#fff
;
border-radius
:
0px
;
}
.search-button
{
position
:
relative
;
.search-icon
{
position
:
absolute
;
top
:
1rem
;
left
:
1
.1rem
;
color
:
#ffffff
;
font-size
:
2rem
;
}
}
.searchbar-ios
.searchbar-search-icon
{
background-image
:
none
;
}
.
searchbar-ios
.
searchbar-input
:
:-
webkit-input-placeholder
{
color
:
#ffffff
;
}
.searchbar-ios.searchbar-left-aligned
.searchbar-input
{
padding-left
:
24px
;
}
.toolbar-signUp
{
.signUp-span
{
color
:
#fff
;
font-size
:
1
.5rem
;
padding
:
2px
5px
;
border-radius
:
4px
;
position
:
relative
;
}
.
signUp-span
:
:
after
{
content
:
''
;
position
:
absolute
;
right
:
0px
;
top
:
1px
;
height
:
15px
;
width
:
1px
;
background-color
:
#fff
;
}
ion-icon
.iconfont
{
color
:
#ffffff
;
font-size
:
1
.5rem
;
line-height
:
.1
;
margin-right
:
-.3rem
;
}
}
}
}
src/pages/tabs/discover/discover.ts
View file @
841de323
import
{
Component
}
from
'@angular/core'
;
import
{
Component
}
from
'@angular/core'
;
import
{
IonicPage
,
NavController
,
NavParams
}
from
'ionic-angular'
;
import
{
IonicPage
,
NavController
,
NavParams
}
from
'ionic-angular'
;
import
{
SearchNewPage
}
from
"../../home-pages/search-new/search-new"
;
/**
* Generated class for the DiscoverPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@
IonicPage
()
@
IonicPage
()
@
Component
({
@
Component
({
...
@@ -15,6 +10,7 @@ import { IonicPage, NavController, NavParams } from 'ionic-angular';
...
@@ -15,6 +10,7 @@ import { IonicPage, NavController, NavParams } from 'ionic-angular';
})
})
export
class
DiscoverPage
{
export
class
DiscoverPage
{
isSign
=
false
;
constructor
(
public
navCtrl
:
NavController
,
public
navParams
:
NavParams
)
{
constructor
(
public
navCtrl
:
NavController
,
public
navParams
:
NavParams
)
{
}
}
...
@@ -22,4 +18,9 @@ export class DiscoverPage {
...
@@ -22,4 +18,9 @@ export class DiscoverPage {
console
.
log
(
'ionViewDidLoad DiscoverPage'
);
console
.
log
(
'ionViewDidLoad DiscoverPage'
);
}
}
//前往搜索页面
goToSearch
(){
this
.
navCtrl
.
push
(
SearchNewPage
);
}
}
}
src/pages/tabs/home/home.html
View file @
841de323
...
@@ -16,7 +16,7 @@
...
@@ -16,7 +16,7 @@
</ion-buttons>
</ion-buttons>
<ion-buttons
end
>
<ion-buttons
end
>
<button
ion-button
icon-only
class=
"toolbar-icon"
>
<button
ion-button
icon-only
class=
"toolbar-icon"
>
<ion-icon
name=
"mail
"
></ion-icon>
<ion-icon
class=
"icon-youjian iconfont
"
></ion-icon>
<span
class=
"num"
>
2
</span>
<span
class=
"num"
>
2
</span>
</button>
</button>
</ion-buttons>
</ion-buttons>
...
...
src/pages/tabs/home/home.scss
View file @
841de323
...
@@ -3,7 +3,29 @@ page-home {
...
@@ -3,7 +3,29 @@ page-home {
width
:
100%
;
width
:
100%
;
height
:
160px
;
height
:
160px
;
}
}
.slide-image
{
width
:
100%
;
height
:
160px
;
}
.swiper-container
{
height
:
160px
;
width
:
100%
;
}
.slides-title
{
position
:
absolute
;
bottom
:
0
;
left
:
0
;
font-size
:
1
.5rem
;
color
:
#fff
;
width
:
100%
;
background-color
:
rgba
(
153
,
153
,
153
,
0
.5
);
text-align
:
left
;
padding
:
3px
15px
;
}
//头部搜索
.toolbar
.searchbar-ios
.searchbar-input
{
.toolbar
.searchbar-ios
.searchbar-input
{
background-color
:
#e12724
;
background-color
:
#e12724
;
border-bottom
:
1px
solid
#fff
;
border-bottom
:
1px
solid
#fff
;
...
@@ -30,52 +52,36 @@ page-home {
...
@@ -30,52 +52,36 @@ page-home {
color
:
#ffffff
;
color
:
#ffffff
;
}
}
.slide-image
{
.searchbar-ios.searchbar-left-aligned
.searchbar-input
{
width
:
100%
;
padding-left
:
24px
;
height
:
160px
;
}
.swiper-container
{
height
:
160px
;
width
:
100%
;
}
.slides-title
{
position
:
absolute
;
bottom
:
0
;
left
:
0
;
font-size
:
1
.5rem
;
color
:
#fff
;
width
:
100%
;
background-color
:
rgba
(
153
,
153
,
153
,
0
.5
);
text-align
:
left
;
padding
:
3px
15px
;
}
}
.toolbar-signUp
{
.toolbar-signUp
{
.signUp-span
{
.signUp-span
{
color
:
#fff
;
color
:
#fff
;
border
:
1px
solid
#fff
;
border
:
1px
solid
#fff
;
font-size
:
1
.
3
rem
;
font-size
:
1
.
2
rem
;
padding
:
2px
5px
;
padding
:
2px
5px
;
border-radius
:
4px
;
border-radius
:
4px
;
position
:
relative
;
position
:
relative
;
margin-right
:
1
rem
;
margin-right
:
.4
rem
;
}
}
.
signUp-span
:
:
after
{
.
signUp-span
:
:
after
{
content
:
''
;
content
:
''
;
position
:
absolute
;
position
:
absolute
;
right
:
-
10
px
;
right
:
-
8
px
;
top
:
-
1px
;
top
:
1px
;
height
:
1
.5rem
;
height
:
1
5px
;
width
:
1px
;
width
:
1px
;
background-color
:
#fff
;
background-color
:
#fff
;
}
}
}
ion-icon
.iconfont
{
.toolbar-search
{
color
:
#ffffff
;
color
:
#ffffff
;
font-size
:
1
.5rem
;
line-height
:
.1
;
margin-right
:
-.3rem
;
}
}
}
//中间
//中间
...
@@ -147,7 +153,8 @@ page-home {
...
@@ -147,7 +153,8 @@ page-home {
.submit-btn
{
.submit-btn
{
margin-top
:
10px
;
margin-top
:
10px
;
width
:
60%
;
width
:
50%
;
height
:
35px
;
}
}
}
}
}
}
...
...
src/pages/tabs/home/home.ts
View file @
841de323
...
@@ -58,6 +58,21 @@ export class HomePage {
...
@@ -58,6 +58,21 @@ export class HomePage {
}
}
)
)
this
.
change
(
0
);
this
.
change
(
0
);
this
.
getBanner
();
}
//获取轮播图
getBanner
(){
const
data
=
{
obj
:{
isRecommend
:
1
,
}
}
this
.
tabsSer
.
stuffPage
(
data
).
subscribe
(
(
res
)
=>
{
}
)
}
}
//所属板块类型(1党规党章,2系列讲话,3中央精神,4本市部署,5通知公告,6党建动态,7工作提示,
//所属板块类型(1党规党章,2系列讲话,3中央精神,4本市部署,5通知公告,6党建动态,7工作提示,
...
@@ -81,7 +96,7 @@ export class HomePage {
...
@@ -81,7 +96,7 @@ export class HomePage {
)
)
}
}
//签到
signUp
(){
signUp
(){
this
.
tabsSer
.
sign
().
subscribe
(
this
.
tabsSer
.
sign
().
subscribe
(
(
res
)
=>
{
(
res
)
=>
{
...
@@ -102,6 +117,7 @@ export class HomePage {
...
@@ -102,6 +117,7 @@ export class HomePage {
})
})
}
}
//前往搜索页面
goToSearch
(){
goToSearch
(){
this
.
navCtrl
.
push
(
SearchNewPage
);
this
.
navCtrl
.
push
(
SearchNewPage
);
}
}
...
...
src/pages/tabs/mine/mine.html
View file @
841de323
...
@@ -7,7 +7,7 @@
...
@@ -7,7 +7,7 @@
</ion-buttons>
</ion-buttons>
<ion-buttons
end
>
<ion-buttons
end
>
<button
ion-button
icon-only
class=
"toolbar-icon"
>
<button
ion-button
icon-only
class=
"toolbar-icon"
>
<ion-icon
name=
"mail
"
></ion-icon>
<ion-icon
class=
"icon-youjian iconfont
"
></ion-icon>
<span
class=
"num"
>
2
</span>
<span
class=
"num"
>
2
</span>
</button>
</button>
</ion-buttons>
</ion-buttons>
...
...
src/theme/icon.scss
View file @
841de323
.tab-button-text
{
.tab-button-text
{
margin-top
:
0
!
important
;
margin-top
:
0
!
important
;
}
}
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment