Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Preliminary completion of the bottom bar
  • Loading branch information
aaLiweipeng committed May 9, 2021
1 parent 8955d53 commit 30a33b9
Show file tree
Hide file tree
Showing 5 changed files with 77 additions and 7 deletions.
63 changes: 57 additions & 6 deletions src/App.vue
@@ -1,20 +1,71 @@
<template>
<div class="docker">
<span class="docker__item">首页</span>
<span class="docker__item">购物车</span>
<span class="docker__item">订单</span>
<span class="docker__item">我的</span>
<span class="docker__item docker__item--active">
<div class="iconfont">&#xe7c7;</div>
<div class="docker_title">首页</div>
</span>
<span class="docker__item docker__item--active">
<div class="iconfont">&#xe63a;</div>
<div class="docker_title">购物车</div>
</span>
<span class="docker__item docker__item--active">
<div class="iconfont">&#xe61e;</div>
<div class="docker_title">订单</div>
</span>
<span class="docker__item docker__item--active">
<div class="iconfont">&#xe66f;</div>
<div class="docker_title">我的</div>
</span>
</div>
</template>

<style lang="scss">
.docker {
display: flex;
box-sizing: border-box;
position: absolute;
padding: 0 0.18rem; //间隔
left: 0;
bottom: 0;
width: 100%;
height: 0.49rem;
border-top: 1px solid #F10000;
background: skyblue;
border-top: 1px solid #f10000;
&__item {
//等价于 .docker__item
flex: 1;
text-align: center;
.iconfont {
margin: 0.07rem 0 0.02rem 0; //图标间隔
font-size: 0.18rem; //调整图标大小
}
&--active {
//等价于 .docker__item--active
color: skyblue;
}
}
&_title {
//等价于 .docker_title
font-size: 20px;
transform: scaleX(0.5) scaleY(0.5); //缩小一半
transform-origin: center top; //缩小中心点
}
}
// .docker__item {
// flex: 1;
// text-align: center;
// .iconfont {
// margin: 0.07rem 0 0.02rem 0; //图标间隔
// font-size: 0.18rem; //调整图标大小
// }
// }
// .docker__item--active {
// color: skyblue;
// }
// .docker_title {
// font-size: 20px;
// transform: scaleX(0.5) scaleY(0.5); //缩小一半
// transform-origin: center top; //缩小中心点
// }
</style>
2 changes: 1 addition & 1 deletion src/main.js
Expand Up @@ -3,6 +3,6 @@ import App from './App.vue'
import router from './router'
import store from './store'
import 'normalize.css'
import './style/base.scss'
import './style/index.scss'

createApp(App).use(store).use(router).mount('#app')
3 changes: 3 additions & 0 deletions src/style/base.scss
@@ -1,3 +1,6 @@
html {
font-size: 100px;
}
body {
font-size: .12rem;
}
14 changes: 14 additions & 0 deletions src/style/iconfont.css
@@ -0,0 +1,14 @@
@font-face {
font-family: "iconfont"; /* Project id 2527614 */
src: url('//at.alicdn.com/t/font_2527614_1mt4nllryg1.woff2?t=1620400867900') format('woff2'),
url('//at.alicdn.com/t/font_2527614_1mt4nllryg1.woff?t=1620400867900') format('woff'),
url('//at.alicdn.com/t/font_2527614_1mt4nllryg1.ttf?t=1620400867900') format('truetype');
}

.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
2 changes: 2 additions & 0 deletions src/style/index.scss
@@ -0,0 +1,2 @@
@import './base.scss';
@import './iconfont.css';

0 comments on commit 30a33b9

Please sign in to comment.