.
This commit is contained in:
@@ -6,10 +6,8 @@
|
|||||||
:key="item.text"
|
:key="item.text"
|
||||||
@tap="sheep.$router.go(item.url)"
|
@tap="sheep.$router.go(item.url)"
|
||||||
>
|
>
|
||||||
<cover-view class="content-box">
|
<cover-image class="tabbar-icon" :src="sheep.$url.cdn(item.iconUrl)" />
|
||||||
<cover-image class="tabbar-icon" :src="sheep.$url.cdn(item.iconUrl)" />
|
<cover-view class="active-line" v-show="activeUrl === item.url" />
|
||||||
<cover-view class="active-line" v-show="activeUrl === item.url" />
|
|
||||||
</cover-view>
|
|
||||||
</cover-view>
|
</cover-view>
|
||||||
</cover-view>
|
</cover-view>
|
||||||
</template>
|
</template>
|
||||||
@@ -47,28 +45,25 @@
|
|||||||
background: #fff;
|
background: #fff;
|
||||||
|
|
||||||
.cover-tabbar-item {
|
.cover-tabbar-item {
|
||||||
flex: 1;
|
width: 20%;
|
||||||
|
height: 20px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
.content-box {
|
.tabbar-icon {
|
||||||
display: flex;
|
width: 16px;
|
||||||
flex-direction: column;
|
height: 16px;
|
||||||
align-items: center;
|
position: absolute;
|
||||||
position: relative;
|
left: calc(50% - 8px);
|
||||||
height: 32px;
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.tabbar-icon {
|
.active-line {
|
||||||
width: 25px;
|
width: 12px;
|
||||||
height: 25px;
|
height: 1px;
|
||||||
}
|
background: #000;
|
||||||
|
position: absolute;
|
||||||
.active-line {
|
left: calc(50% - 6px);
|
||||||
width: 20rpx;
|
bottom: 0;
|
||||||
height: 1rpx;
|
|
||||||
background: #000;
|
|
||||||
position: absolute;
|
|
||||||
left: calc(50% - 10rpx);
|
|
||||||
bottom: 0rpx;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -86,8 +86,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__slot-icon {
|
&__slot-icon {
|
||||||
width: 25px;
|
width: 16px;
|
||||||
height: 25px;
|
height: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+10
-10
@@ -199,32 +199,32 @@ const adaptTemplate = async (appTemplate, templateId) => {
|
|||||||
|
|
||||||
appTemplate.basic.tabbar.items = [
|
appTemplate.basic.tabbar.items = [
|
||||||
{
|
{
|
||||||
activeIconUrl: "https://puton.huimeimeta.com/imgs/home.png",
|
activeIconUrl: "https://puton.huimeimeta.com/imgs/Home.png",
|
||||||
iconUrl: "https://puton.huimeimeta.com/imgs/home.png",
|
iconUrl: "https://puton.huimeimeta.com/imgs/Home.png",
|
||||||
text: "首页",
|
text: "首页",
|
||||||
url: "/pages/index/index",
|
url: "/pages/index/index",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
activeIconUrl: "https://puton.huimeimeta.com/imgs/list.png",
|
activeIconUrl: "https://puton.huimeimeta.com/imgs/List.png",
|
||||||
iconUrl: "https://puton.huimeimeta.com/imgs/list.png",
|
iconUrl: "https://puton.huimeimeta.com/imgs/List.png",
|
||||||
text: "商品列表",
|
text: "商品列表",
|
||||||
url: "/pages/index/list",
|
url: "/pages/index/list",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
activeIconUrl: "https://puton.huimeimeta.com/imgs/room.png",
|
activeIconUrl: "https://puton.huimeimeta.com/imgs/Room.png",
|
||||||
iconUrl: "https://puton.huimeimeta.com/imgs/room.png",
|
iconUrl: "https://puton.huimeimeta.com/imgs/Room.png",
|
||||||
text: "试衣间",
|
text: "试衣间",
|
||||||
url: "/pages/index/room",
|
url: "/pages/index/room",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
activeIconUrl: "https://puton.huimeimeta.com/imgs/cart.png",
|
activeIconUrl: "https://puton.huimeimeta.com/imgs/Vector.png",
|
||||||
iconUrl: "https://puton.huimeimeta.com/imgs/cart.png",
|
iconUrl: "https://puton.huimeimeta.com/imgs/Vector.png",
|
||||||
text: "购物车",
|
text: "购物车",
|
||||||
url: "/pages/index/cart",
|
url: "/pages/index/cart",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
activeIconUrl: "https://puton.huimeimeta.com/imgs/my.png",
|
activeIconUrl: "https://puton.huimeimeta.com/imgs/My.png",
|
||||||
iconUrl: "https://puton.huimeimeta.com/imgs/my.png",
|
iconUrl: "https://puton.huimeimeta.com/imgs/My.png",
|
||||||
text: "我的",
|
text: "我的",
|
||||||
url: "/pages/index/user",
|
url: "/pages/index/user",
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -223,12 +223,12 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
.active-line {
|
.active-line {
|
||||||
width: 20rpx;
|
width: 12px;
|
||||||
height: 1rpx;
|
height: 1px;
|
||||||
background: #000;
|
background: #000;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: calc(50% - 10rpx);
|
left: calc(50% - 6px);
|
||||||
bottom: -5rpx;
|
bottom: 0px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user