NCJOAQ/DogMovies
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成页脚，差不多得了又不是造火箭

Browse Source
This commit is contained in:
NCJOAQ
2025-11-04 16:45:21 +08:00
parent 039d10191e
commit f507c3219d
7 changed files with 192 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/assets/fonts/demo_index.html
View File

@@ -52,18 +52,42 @@
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe75e;</span>
<div class="name">我的</div>
<div class="code-name">&amp;#xe75e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61f;</span>
<div class="name">搜索</div>
<div class="code-name">&amp;#xe61f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe656;</span>
<div class="name">视频</div>
<div class="code-name">&amp;#xe656;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xeaf1;</span>
<div class="name">菜单</div>
<div class="code-name">&amp;#xeaf1;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe63e;</span>
<div class="name">票</div>
<div class="code-name">&amp;#xe63e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe8ae;</span>
<div class="name">电影</div>
<div class="code-name">&amp;#xe8ae;</div>
</li>
</ul>
<div class="article markdown">
<h2 id="unicode-">Unicode 引用</h2>
@@ -82,7 +106,7 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.ttf?t=1762238912712') format('truetype');
src: url('iconfont.ttf?t=1762243995389') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -108,6 +132,15 @@
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-wode"></span>
<div class="name">
我的
</div>
<div class="code-name">.icon-wode
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-sousuo"></span>
<div class="name">
@@ -117,6 +150,15 @@
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shipin"></span>
<div class="name">
视频
</div>
<div class="code-name">.icon-shipin
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-caidan"></span>
<div class="name">
@@ -126,6 +168,24 @@
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-piao"></span>
<div class="name">
票
</div>
<div class="code-name">.icon-piao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-dianying"></span>
<div class="name">
电影
</div>
<div class="code-name">.icon-dianying
</div>
</li>
</ul>
<div class="article markdown">
<h2 id="font-class-">font-class 引用</h2>
@@ -153,6 +213,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-wode"></use>
</svg>
<div class="name">我的</div>
<div class="code-name">#icon-wode</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-sousuo"></use>
@@ -161,6 +229,14 @@
<div class="code-name">#icon-sousuo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shipin"></use>
</svg>
<div class="name">视频</div>
<div class="code-name">#icon-shipin</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-caidan"></use>
@@ -169,6 +245,22 @@
<div class="code-name">#icon-caidan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-piao"></use>
</svg>
<div class="name">票</div>
<div class="code-name">#icon-piao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-dianying"></use>
</svg>
<div class="name">电影</div>
<div class="code-name">#icon-dianying</div>
</li>
</ul>
<div class="article markdown">
<h2 id="symbol-">Symbol 引用</h2>

18
src/assets/fonts/iconfont.css
View File

@@ -1,6 +1,6 @@
@font-face {
font-family: "iconfont"; /* Project id */
src: url('iconfont.ttf?t=1762238912712') format('truetype');
src: url('iconfont.ttf?t=1762243995389') format('truetype');
}
.iconfont {
@@ -11,11 +11,27 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-wode:before {
content: "\e75e";
}
.icon-sousuo:before {
content: "\e61f";
}
.icon-shipin:before {
content: "\e656";
}
.icon-caidan:before {
content: "\eaf1";
}
.icon-piao:before {
content: "\e63e";
}
.icon-dianying:before {
content: "\e8ae";
}

2
src/assets/fonts/iconfont.js
View File

File diff suppressed because one or more lines are too long

28
src/assets/fonts/iconfont.json
View File

@@ -5,6 +5,13 @@
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "577379",
"name": "我的",
"font_class": "wode",
"unicode": "e75e",
"unicode_decimal": 59230
},
{
"icon_id": "4942663",
"name": "搜索",
@@ -12,12 +19,33 @@
"unicode": "e61f",
"unicode_decimal": 58911
},
{
"icon_id": "4954929",
"name": "视频",
"font_class": "shipin",
"unicode": "e656",
"unicode_decimal": 58966
},
{
"icon_id": "5387521",
"name": "菜单",
"font_class": "caidan",
"unicode": "eaf1",
"unicode_decimal": 60145
},
{
"icon_id": "8692389",
"name": "票",
"font_class": "piao",
"unicode": "e63e",
"unicode_decimal": 58942
},
{
"icon_id": "11372654",
"name": "电影",
"font_class": "dianying",
"unicode": "e8ae",
"unicode_decimal": 59566
}
]
}

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

Binary file not shown.

51
src/pages/home/components/MyFooter.vue
View File

@@ -1,16 +1,63 @@
<template>
<footer>
<div class="item" @click="setIndex(0)" :style="{ 'color': footerIndex === 0 ? 'red' : '' }">
<span class="iconfont icon-dianying"></span>
<span>电影/影院</span>
</div>
<div class="item" @click="setIndex(1)" :style="{ 'color': footerIndex === 1 ? 'red' : '' }">
<span class="iconfont icon-shipin"></span>
<span>视频</span>
</div>
<div class="item" @click="setIndex(2)" :style="{ 'color': footerIndex === 2 ? 'red' : '' }">
<span class="iconfont icon-piao"></span>
<span>演出</span>
</div>
<div class="item" @click="setIndex(3)" :style="{ 'color': footerIndex === 3 ? 'red' : '' }">
<span class="iconfont icon-wode"></span>
<span>我的</span>
</div>
</footer>
</template>
<script>
export default {
data() {
return {
footerIndex: 0
}
},
methods: {
setIndex(i) {
this.footerIndex = i
}
}
}
</script>
<style scoped lang="less">
footer {
color: @font-color2;
width: 100%;
height: 48px;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid @border-color;
>.item {
width: 90px;
height: 100%;
display: flex;
flex-direction: column;
display: flex;
justify-content: space-around;
align-items: center;
>span {
font-size: 10px;
}
>.iconfont {
font-size: @iconfont;
}
}
}
</style>

5
src/pages/home/index.vue
View File

@@ -3,6 +3,7 @@
<Headera>狗眼电影</Headera>
<Nav />
<Main />
<Footer />
</home>
</template>
@@ -10,11 +11,13 @@
import Headera from "@/pages/home/components/MyHeader.vue"
import Nav from "@/pages/home/components/MyNav.vue"
import Main from '@/pages/home/components/MyMain.vue'
import Footer from "@/pages/home/components/MyFooter.vue"
export default {
components: {
Headera,
Nav,
Main
Main,
Footer
}
}
</script>