Skip to content

Commit 33356b6

Browse files
UdMLianUdMLian
committed
引入图标
1 parent 8afc15b commit 33356b6

File tree

9 files changed

+492
-25
lines changed

9 files changed

+492
-25
lines changed

‎components.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export {}
99
declare module 'vue' {
1010
export interface GlobalComponents {
1111
ElButton: typeof import('element-plus/es')['ElButton']
12+
ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
1213
HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
1314
IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
1415
IconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default']

‎index.html‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
<!DOCTYPE html>
22
<html lang="">
3-
<head>
4-
<meta charset="UTF-8">
5-
<link rel="icon" href="/favicon.ico">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Vite App</title>
8-
</head>
9-
<body>
10-
<div id="app"></div>
11-
<script type="module" src="/src/main.ts"></script>
12-
</body>
13-
</html>
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<link rel="icon" href="/favicon.ico">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Vite App</title>
9+
<link rel="stylesheet" href="//at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
10+
</head>
11+
12+
<body>
13+
<div id="app"></div>
14+
<script type="module" src="/src/main.ts"></script>
15+
</body>
16+
17+
</html>

‎src/types.d.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
declare module '*.vue' {
2+
import type { defineComponent } from 'vue'
3+
const component: typeof defineComponent
4+
export default component
5+
}

‎src/views/Layout/components/LayoutFooter.vue‎

Lines changed: 230 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,230 @@
1+
<template>
2+
<footer class="app_footer">
3+
<!-- 联系我们 -->
4+
<div class="contact">
5+
<div class="container">
6+
<dl>
7+
<dt>客户服务</dt>
8+
<dd><i class="iconfont icon-kefu"></i> 在线客服</dd>
9+
<dd><i class="iconfont icon-question"></i> 问题反馈</dd>
10+
</dl>
11+
<dl>
12+
<dt>关注我们</dt>
13+
<dd><i class="iconfont icon-weixin"></i> 公众号</dd>
14+
<dd><i class="iconfont icon-weibo"></i> 微博</dd>
15+
</dl>
16+
<dl>
17+
<dt>下载APP</dt>
18+
<dd class="qrcode"><img src="@/assets/images/qrcode.jpg" /></dd>
19+
<dd class="download">
20+
<span>扫描二维码</span>
21+
<span>立马下载APP</span>
22+
<a href="javascript:;">下载页面</a>
23+
</dd>
24+
</dl>
25+
<dl>
26+
<dt>服务热线</dt>
27+
<dd class="hotline">400-0000-000 <small>周一至周日 8:00-18:00</small></dd>
28+
</dl>
29+
</div>
30+
</div>
31+
32+
<!-- 其它 -->
33+
<div class="extra">
34+
<div class="container">
35+
<div class="slogan">
36+
<a href="javascript:;">
37+
<i class="iconfont icon-footer01"></i>
38+
<span>价格亲民</span>
39+
</a>
40+
<a href="javascript:;">
41+
<i class="iconfont icon-footer02"></i>
42+
<span>物流快捷</span>
43+
</a>
44+
<a href="javascript:;">
45+
<i class="iconfont icon-footer03"></i>
46+
<span>品质新鲜</span>
47+
</a>
48+
</div>
49+
50+
<!-- 版权信息 -->
51+
<div class="copyright">
52+
<p>
53+
<a href="javascript:;">关于我们</a>
54+
<a href="javascript:;">帮助中心</a>
55+
<a href="javascript:;">售后服务</a>
56+
<a href="javascript:;">配送与验收</a>
57+
<a href="javascript:;">商务合作</a>
58+
<a href="javascript:;">搜索推荐</a>
59+
<a href="javascript:;">友情链接</a>
60+
</p>
61+
<p>CopyRight © 小兔鲜儿</p>
62+
</div>
63+
</div>
64+
</div>
65+
</footer>
66+
</template>
67+
68+
<style scoped lang="scss">
69+
.app_footer {
70+
overflow: hidden;
71+
background-color: #f5f5f5;
72+
padding-top: 20px;
73+
74+
.contact {
75+
background: #fff;
76+
77+
.container {
78+
padding: 60px 0 40px 25px;
79+
display: flex;
80+
}
81+
82+
dl {
83+
height: 190px;
84+
text-align: center;
85+
padding: 0 72px;
86+
border-right: 1px solid #f2f2f2;
87+
color: #999;
88+
89+
&:first-child {
90+
padding-left: 0;
91+
}
92+
93+
&:last-child {
94+
border-right: none;
95+
padding-right: 0;
96+
}
97+
}
98+
99+
dt {
100+
line-height: 1;
101+
font-size: 18px;
102+
}
103+
104+
dd {
105+
margin: 36px 12px 0 0;
106+
float: left;
107+
width: 92px;
108+
height: 92px;
109+
padding-top: 10px;
110+
border: 1px solid #ededed;
111+
112+
.iconfont {
113+
font-size: 36px;
114+
display: block;
115+
color: #666;
116+
}
117+
118+
&:hover {
119+
.iconfont {
120+
color: $xtxColor;
121+
}
122+
}
123+
124+
&:last-child {
125+
margin-right: 0;
126+
}
127+
}
128+
129+
.qrcode {
130+
width: 92px;
131+
height: 92px;
132+
padding: 7px;
133+
border: 1px solid #ededed;
134+
}
135+
136+
.download {
137+
padding-top: 5px;
138+
font-size: 14px;
139+
width: auto;
140+
height: auto;
141+
border: none;
142+
143+
span {
144+
display: block;
145+
}
146+
147+
a {
148+
display: block;
149+
line-height: 1;
150+
padding: 10px 25px;
151+
margin-top: 5px;
152+
color: #fff;
153+
border-radius: 2px;
154+
background-color: $xtxColor;
155+
}
156+
}
157+
158+
.hotline {
159+
padding-top: 20px;
160+
font-size: 22px;
161+
color: #666;
162+
width: auto;
163+
height: auto;
164+
border: none;
165+
166+
small {
167+
display: block;
168+
font-size: 15px;
169+
color: #999;
170+
}
171+
}
172+
}
173+
174+
.extra {
175+
background-color: #333;
176+
}
177+
178+
.slogan {
179+
height: 178px;
180+
line-height: 58px;
181+
padding: 60px 100px;
182+
border-bottom: 1px solid #434343;
183+
display: flex;
184+
justify-content: space-between;
185+
186+
a {
187+
height: 58px;
188+
line-height: 58px;
189+
color: #fff;
190+
font-size: 28px;
191+
192+
i {
193+
font-size: 50px;
194+
vertical-align: middle;
195+
margin-right: 10px;
196+
font-weight: 100;
197+
}
198+
199+
span {
200+
vertical-align: middle;
201+
text-shadow: 0 0 1px #333;
202+
}
203+
}
204+
}
205+
206+
.copyright {
207+
height: 170px;
208+
padding-top: 40px;
209+
text-align: center;
210+
color: #999;
211+
font-size: 15px;
212+
213+
p {
214+
line-height: 1;
215+
margin-bottom: 20px;
216+
}
217+
218+
a {
219+
color: #999;
220+
line-height: 1;
221+
padding: 0 10px;
222+
border-right: 1px solid #999;
223+
224+
&:last-child {
225+
border-right: none;
226+
}
227+
}
228+
}
229+
}
230+
</style>

0 commit comments

Comments
 (0)