Commit 97c1d497 authored by Nature's avatar Nature

content 定位调整

parent 03b94183
{
"name": "hls-easy-ui",
"version": "0.0.1",
"version": "0.0.2",
"description": "A Vue components project",
"author": "JingChao <jingchao.wu@hand-china.com>",
"private": false,
......
.has-footer {
bottom: 0.88rem;
padding-bottom: 1.76rem;
.scrollContent{
padding-bottom: 0.9rem;
padding-bottom: 1.76rem;
}
}
......
......@@ -4089,242 +4089,21 @@ html {
touch-action: pan-y;
}
body,
.ionic-body {
-webkit-touch-callout: none;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
text-size-adjust: none;
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
top: 0;
right: 0;
bottom: 0;
left: 0;
body{
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
color: #000;
word-wrap: break-word;
font-size: 0.28rem;
font-family: -apple-system;
font-family: "-apple-system", "Helvetica Neue", "Roboto", "Segoe UI", sans-serif;
//line-height: 40px;
text-rendering: optimizeLegibility;
-webkit-backface-visibility: hidden;
-webkit-user-drag: none;
-ms-content-zooming: none;
font-size: .32rem;
font-family: -apple-system-font,sans-serif;
-webkit-tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased;
}
body.grade-b,
body.grade-c {
text-rendering: auto;
}
.content {
position: relative;
}
.scroll-content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/*margin-top: -2px;
padding-top: 2px;
margin-bottom: -2px;*/
width: auto;
height: auto;
overflow: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
.menu .scroll-content.scroll-content-false {
z-index: 11;
}
.scroll-view {
position: relative;
display: block;
overflow: hidden;
margin-top: -1px;
}
.scroll-view.overflow-scroll {
position: relative;
}
.scroll-view.scroll-x {
overflow-x: scroll;
overflow-y: hidden;
}
.scroll-view.scroll-y {
overflow-x: hidden;
overflow-y: scroll;
}
.scroll-view.scroll-xy {
overflow-x: scroll;
overflow-y: scroll;
}
/**
* Scroll is the scroll view component available for complex and custom
* scroll view functionality.
*/
.scroll {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
text-size-adjust: none;
-webkit-transform-origin: left top;
transform-origin: left top;
}
/**
* Set ms-viewport to prevent MS "page squish" and allow fluid scrolling
* https://msdn.microsoft.com/en-us/library/ie/hh869615(v=vs.85).aspx
*/
@-ms-viewport {
width: device-width;
}
.scroll-bar {
position: absolute;
z-index: 9999;
}
.ng-animate .scroll-bar {
visibility: hidden;
}
.scroll-bar-h {
right: 0.04rem;
bottom: 0.06rem;
left: 0.04rem;
height: 0.06rem;
}
.scroll-bar-h .scroll-bar-indicator {
height: 100%;
}
.scroll-bar-v {
top: 0.04rem;
right: 0.06rem;
bottom: 0.04rem;
width: 0.06rem;
}
.scroll-bar-v .scroll-bar-indicator {
width: 100%;
}
.scroll-bar-indicator {
position: absolute;
border-radius: 0.12rem;
background: rgba(0, 0, 0, 0.3);
opacity: 1;
-webkit-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
}
.scroll-bar-indicator.scroll-bar-fade-out {
opacity: 0;
}
.platform-android .scroll-bar-indicator {
border-radius: 0;
}
.grade-b .scroll-bar-indicator,
.grade-c .scroll-bar-indicator {
background: #aaa;
}
.grade-b .scroll-bar-indicator.scroll-bar-fade-out,
.grade-c .scroll-bar-indicator.scroll-bar-fade-out {
-webkit-transition: none;
transition: none;
}
ion-infinite-scroll {
height: 1.2rem;
width: 100%;
display: block;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
}
ion-infinite-scroll .icon {
color: #666666;
font-size: 0.6rem;
color: #666666;
}
ion-infinite-scroll:not(.active) .spinner,
ion-infinite-scroll:not(.active) .icon:before {
display: none;
}
.overflow-scroll {
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
}
.overflow-scroll.pane {
overflow-x: hidden;
overflow-y: scroll;
}
.overflow-scroll .scroll {
position: static;
height: 100%;
-webkit-transform: translate3d(0, 0, 0);
}
/* If you change these, change platform.scss as well */
.has-header {
......@@ -4348,63 +4127,13 @@ ion-infinite-scroll:not(.active) .icon:before {
}
.has-footer {
bottom: 0.88rem;
padding-bottom: 0.88rem;
}
.has-subfooter {
bottom: 1.56rem;
}
.has-tabs,
.bar-footer.has-tabs {
bottom: 1rem;
}
.has-tabs.pane,
.bar-footer.has-tabs.pane {
bottom: 1rem;
height: auto;
}
.bar-subfooter.has-tabs {
bottom: 1.86rem;
}
.has-footer.has-tabs {
bottom: 1.86rem;
}
.pane {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-duration: 0;
transition-duration: 0;
z-index: 1;
}
.view {
z-index: 1;
}
.pane,
.view {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
overflow: hidden;
}
.view-container {
position: absolute;
display: block;
width: 100%;
height: 100%;
}
/**
* Typography
......
......@@ -3,8 +3,15 @@
top: auto;
bottom: 0.24rem;
}
.has-footer {
padding-bottom: 2.16rem;
.scrollContent{
padding-bottom: 2.16rem;
}
}
.has-header {
top: 1.28rem;
padding-bottom: 1.28rem;
}
.header-top {
margin-top: 1.26rem;
......
......@@ -7,8 +7,12 @@
.has-tabs {
bottom: 1.68rem;
}
.has-footer{
margin-bottom: 0.68rem;
.has-footer {
padding-bottom: 2.84rem;
.scrollContent{
padding-bottom: 2.84rem;
}
}
.public-style {
.bottom-tab{
......@@ -29,8 +33,12 @@
.has-tabs {
bottom: 1.68rem;
}
.has-footer{
margin-bottom: 0.68rem;
.has-footer {
padding-bottom: 2.84rem;
.scrollContent{
padding-bottom: 2.84rem;
}
}
.public-style {
.bottom-tab{
......
......@@ -32,6 +32,7 @@ export default {
width: 100%;
background-color: #fff;
position: fixed;
z-index: 100;
bottom: 0;
display: flex;
align-items: center;
......
......@@ -4,7 +4,7 @@
*/
<template>
<section :class="cusClass" class="content scroll-content">
<section :class="cusClass" class="content">
<slot/>
</section>
</template>
......@@ -22,8 +22,13 @@ export default {
</script>
<style lang="less">
.scroll-content {
.content {
flex: 1;
overflow: hidden;
background-color: #fafafa;
position: relative;
overflow-y: scroll;
height: 100%;
}
// iPhoneX适配
......
......@@ -23,8 +23,7 @@
<tab-item>涉诉公告</tab-item>
<tab-item>司法协助</tab-item>
</s-tab>-->
<h-content
class="has-header has-footer">
<h-content class="has-footer">
<h-button class="button-class" type="primary" @click.native="showLoading">showLoading</h-button>
<h-button class="button-class" type="primary" @click.native="hideLoading">hideLoading</h-button>
<h-button class="button-class" type="primary" @click.native="showLongTop">showLongTop</h-button>
......@@ -221,14 +220,17 @@
<h2 class="item-title">s-tab</h2>
<div class="local-region">
<s-tab :show-divider="true" @tabClick="stabClick">
<s-tab :show-divider="true" @tabClick="stabClick" :overflowX="true">
<tab-item>测试</tab-item>
<tab-item>你好</tab-item>
<tab-item>再见</tab-item>
<tab-item>按钮</tab-item>
<tab-item>按钮2</tab-item>
<tab-item>按钮3</tab-item>
<tab-item>按钮4</tab-item>
</s-tab>
<s-tab :default-active="2" position="bottom" cusClass="class" @tabClick="stabClick">
<s-tab :default-active="2" :show-divider="true" position="bottom" cusClass="class" @tabClick="stabClick" :overflowX="true">
<tab-item><img src="../assets/image/warning@2x.png" style="width: 18px"></tab-item>
<tab-item><img src="../assets/image/warning@2x.png" style="width: 18px"></tab-item>
<tab-item><img src="../assets/image/warning@2x.png" style="width: 18px"></tab-item>
......
......@@ -6,7 +6,7 @@
</div>
<div slot="center">小易</div>
</h-header>
<h-content id="home-content" class="has-header has-footer">
<h-content id="home-content">
<div v-for="item in message" class="message">
<p v-show="false" class="message-time" v-text="item.time"/>
<div v-show="!item.isFromeMe" class="message-wrap">
......@@ -154,6 +154,7 @@ export default {
.content {
background-color: #eeeeee;
//border: 1px solid red;
padding-bottom: 120px;
.message {
position: relative;
}
......
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