Commit b6f84ab8 authored by Nature's avatar Nature

修复tab的分割线以及底部的边线

parent 4563f9db
.has-footer { .has-footer {
padding-bottom: 0.88rem; padding-bottom: 1.6rem;
.scrollContent{ .scrollContent{
padding-bottom: 1.76rem; padding-bottom: 1.76rem;
} }
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
bottom: 1.68rem; bottom: 1.68rem;
} }
.has-footer { .has-footer {
padding-bottom: 1.56rem; padding-bottom: 2rem;
.scrollContent{ .scrollContent{
padding-bottom: 2.84rem; padding-bottom: 2.84rem;
} }
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
bottom: 1.68rem; bottom: 1.68rem;
} }
.has-footer { .has-footer {
padding-bottom: 1.56rem; padding-bottom: 2rem;
.scrollContent{ .scrollContent{
padding-bottom: 2.84rem; padding-bottom: 2.84rem;
} }
......
<template> <template>
<label <label
:class="cusClass" class="toggle toggle-positive toggle-check" :class="cusClass" class="toggle toggle-positive toggle-check"
@touchstart="checked"> @click="checked">
<input :checked="value" type="checkbox"> <input :checked="value" type="checkbox">
<div class="track"> <div class="track">
<div class="handle"/> <div class="handle"/>
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<section class="h-tab-item" @click="titleClick"> <section class="h-tab-item" @click="titleClick">
<div class="h-item"> <div class="h-item">
<slot/> <slot/>
<div class="bottom-border"/>
</div> </div>
<div v-show="showDivider" class="tab-divider"/> <div v-show="showDivider" class="tab-divider"/>
</section> </section>
...@@ -59,9 +60,11 @@ export default { ...@@ -59,9 +60,11 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative;
.h-item { .h-item {
//width: 100%; width: 100%;
min-width: 80px;
font-size: 14px; font-size: 14px;
height: 40px; height: 40px;
color: #7c828d; color: #7c828d;
...@@ -71,12 +74,19 @@ export default { ...@@ -71,12 +74,19 @@ export default {
justify-content: center; justify-content: center;
// padding: 0 3px; // padding: 0 3px;
border-bottom: 1px solid rgba(255, 255, 255, .0); /*no*/ border-bottom: 1px solid rgba(255, 255, 255, .0); /*no*/
.bottom-border{
width: 65%;
position: absolute;
bottom: 0;
}
} }
&.activated { &.activated {
.h-item { .h-item {
color: #1e8ceb; color: @headerColor;
border-bottom: 1px solid #1e8ceb; /*no*/ .bottom-border{
border-bottom: 1px solid @headerColor; /*no*/
}
} }
} }
.tab-divider { .tab-divider {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment