Commit 3927aa9a authored by wlxuqu's avatar wlxuqu

修改nvue样式报错

parent 82db6570
...@@ -58,7 +58,10 @@ ...@@ -58,7 +58,10 @@
} }
.nav-title { .nav-title {
/* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */
flex-direction: row;
align-items: center; align-items: center;
} }
...@@ -67,7 +70,9 @@ ...@@ -67,7 +70,9 @@
} }
.nav-title__text { .nav-title__text {
/* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */
color: $u-main-color; color: $u-main-color;
font-size: 50rpx; font-size: 50rpx;
font-weight: bold; font-weight: bold;
...@@ -75,8 +80,9 @@ ...@@ -75,8 +80,9 @@
.logo { .logo {
width: 140rpx; width: 140rpx;
flex: 0 0 140rpx; /* #ifndef APP-NVUE */
height: auto; height: auto;
/* #endif */
} }
.nav-slogan { .nav-slogan {
......
<template>
<view class="">
<u-dropdown ref="uDropdown" @open="open" @close="close">
<u-dropdown-item v-model="value1" title="距离" :options="options1" @change="change"></u-dropdown-item>
<u-dropdown-item v-model="value2" title="温度" :options="options2"></u-dropdown-item>
</u-dropdown>
</view>
</template>
<script>
export default {
data() {
return {
value1: 1,
value2: 2,
options1: [{
label: '默认排序',
value: 1,
},
{
label: '距离优先',
value: 2,
}
],
options2: [{
label: '去冰',
value: 1,
},
{
label: '加冰',
value: 2,
},
],
}
},
methods: {
open(index) {
// 展开某个下来菜单时,先关闭原来的其他菜单高亮
// 同时内部会自动给当前展开项进行高亮
this.$refs.uDropdown.highlight();
},
close(index) {
// 关闭的时候,给当前项加上高亮
// 当然,您也可以通过监听dropdown-item的@change事件进行处理
this.$refs.uDropdown.highlight(index);
},
change() {
// 更多的细节,请自行实现
}
}
}
</script>
\ No newline at end of file
<template>
<view class="wrap">
<page-nav :desc="desc" title="nav.components"></page-nav>
<view class="list-wrap">
<u-cell-group title-bg-color="rgb(243, 244, 246)" :title="getGroupTitle(item)" v-for="(item, index) in list" :key="index">
<u-cell-item :titleStyle="{fontWeight: 500}" @click="openPage(item1.path)" :title="getFieldTitle(item1)"
v-for="(item1, index1) in item.list" :key="index1">
<image slot="icon" class="u-cell-icon" :src="getIcon(item1.icon)" mode="widthFix"></image>
</u-cell-item>
</u-cell-group>
</view>
<u-gap height="70"></u-gap>
<u-tabbar :list="vuex_tabbar" :mid-button="true"></u-tabbar>
</view>
</template>
<script>
import list from "./components.config.js";
export default {
data() {
return {
list: list,
//desc: '众多组件覆盖开发过程的各个需求,组件功能丰富,多端兼容。让你快速集成,开箱即用。',
}
},
computed: {
getIcon() {
return path => {
return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
}
},
desc() {
return this.$t('components.desc');
}
},
onShow() {
uni.setNavigationBarTitle({
title: this.$t('nav.components')
});
},
created() {
},
methods: {
openPage(path) {
this.$u.route({
url: path
})
},
getGroupTitle(item) {
return this.$i18n.locale == 'zh' ? item.groupName : item.groupName_en
},
getFieldTitle(item) {
return this.$i18n.locale == 'zh' ? item.title : item.title_en
}
}
}
</script>
<style>
/* page {
background-color: rgb(240, 242, 244);
} */
</style>
<style lang="scss" scoped>
.u-cell-icon {
width: 36rpx;
height: 36rpx;
margin-right: 8rpx;
}
</style>
...@@ -163,7 +163,7 @@ ...@@ -163,7 +163,7 @@
} }
.u-action-sheet-item { .u-action-sheet-item {
display: flex; @include vue-flex;;
line-height: 1; line-height: 1;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
......
...@@ -166,7 +166,7 @@ ...@@ -166,7 +166,7 @@
@import "../../libs/css/style.components.scss"; @import "../../libs/css/style.components.scss";
.u-alert-tips { .u-alert-tips {
display: flex; @include vue-flex;
align-items: center; align-items: center;
padding: 16rpx 30rpx; padding: 16rpx 30rpx;
border-radius: 8rpx; border-radius: 8rpx;
......
...@@ -252,7 +252,7 @@ export default { ...@@ -252,7 +252,7 @@ export default {
.cropper-wrapper { .cropper-wrapper {
position: relative; position: relative;
display: flex; @include vue-flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
...@@ -262,7 +262,7 @@ export default { ...@@ -262,7 +262,7 @@ export default {
.cropper-buttons { .cropper-buttons {
width: 100vw; width: 100vw;
display: flex; @include vue-flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
......
...@@ -200,7 +200,7 @@ ...@@ -200,7 +200,7 @@
width: 32rpx; width: 32rpx;
color: #ffffff; color: #ffffff;
height: 32rpx; height: 32rpx;
display: flex; @include vue-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 100rpx; border-radius: 100rpx;
...@@ -227,7 +227,7 @@ ...@@ -227,7 +227,7 @@
width: 32rpx; width: 32rpx;
color: #ffffff; color: #ffffff;
height: 32rpx; height: 32rpx;
display: flex; @include vue-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 100rpx; border-radius: 100rpx;
......
...@@ -130,7 +130,7 @@ ...@@ -130,7 +130,7 @@
height: 80rpx; height: 80rpx;
position: fixed; position: fixed;
z-index: 9; z-index: 9;
display: flex; @include vue-flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
background-color: #E1E1E1; background-color: #E1E1E1;
...@@ -139,7 +139,7 @@ ...@@ -139,7 +139,7 @@
transition: opacity 0.4s; transition: opacity 0.4s;
&__content { &__content {
display: flex; @include vue-flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
......
...@@ -343,7 +343,7 @@ export default { ...@@ -343,7 +343,7 @@ export default {
// 避免边框某些场景可能被“裁剪”,不能设置为hidden // 避免边框某些场景可能被“裁剪”,不能设置为hidden
overflow: visible; overflow: visible;
line-height: 1; line-height: 1;
display: flex; @include vue-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
......
...@@ -502,7 +502,7 @@ ...@@ -502,7 +502,7 @@
&__text { &__text {
margin-top: 30rpx; margin-top: 30rpx;
padding: 0 60rpx; padding: 0 60rpx;
display: flex; @include vue-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
...@@ -525,7 +525,7 @@ ...@@ -525,7 +525,7 @@
} }
&__week-day { &__week-day {
display: flex; @include vue-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 6px 0; padding: 6px 0;
...@@ -539,7 +539,7 @@ ...@@ -539,7 +539,7 @@
&__content { &__content {
width: 100%; width: 100%;
display: flex; @include vue-flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: 6px 0; padding: 6px 0;
box-sizing: border-box; box-sizing: border-box;
...@@ -558,7 +558,7 @@ ...@@ -558,7 +558,7 @@
&__item { &__item {
width: 14.2857%; width: 14.2857%;
display: flex; @include vue-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 6px 0; padding: 6px 0;
...@@ -570,7 +570,7 @@ ...@@ -570,7 +570,7 @@
height: 84rpx; height: 84rpx;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: flex; @include vue-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
...@@ -619,7 +619,7 @@ ...@@ -619,7 +619,7 @@
&__bottom { &__bottom {
width: 100%; width: 100%;
display: flex; @include vue-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
......
...@@ -176,7 +176,7 @@ ...@@ -176,7 +176,7 @@
} }
.u-keyboard-grids-item { .u-keyboard-grids-item {
display: flex; @include vue-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
...@@ -208,7 +208,7 @@ ...@@ -208,7 +208,7 @@
bottom: 32rpx; bottom: 32rpx;
height: 80rpx; height: 80rpx;
background-color: rgb(185, 188, 195); background-color: rgb(185, 188, 195);
display: flex; @include vue-flex;
align-items: center; align-items: center;
border-radius: 8rpx; border-radius: 8rpx;
justify-content: center; justify-content: center;
...@@ -225,7 +225,7 @@ ...@@ -225,7 +225,7 @@
bottom: 32rpx; bottom: 32rpx;
height: 80rpx; height: 80rpx;
background-color: #ffffff; background-color: #ffffff;
display: flex; @include vue-flex;
align-items: center; align-items: center;
border-radius: 8rpx; border-radius: 8rpx;
justify-content: center; justify-content: center;
......
...@@ -65,6 +65,6 @@ ...@@ -65,6 +65,6 @@
.u-cell-item-box { .u-cell-item-box {
background-color: #FFFFFF; background-color: #FFFFFF;
flex-direction: center; flex-direction: row;
} }
</style> </style>
...@@ -214,7 +214,9 @@ export default { ...@@ -214,7 +214,9 @@ export default {
@include vue-flex; @include vue-flex;
align-items: center; align-items: center;
position: relative; position: relative;
/* #ifndef APP-NVUE */
box-sizing: border-box; box-sizing: border-box;
/* #endif */
width: 100%; width: 100%;
padding: 26rpx 32rpx; padding: 26rpx 32rpx;
font-size: 28rpx; font-size: 28rpx;
...@@ -241,21 +243,22 @@ export default { ...@@ -241,21 +243,22 @@ export default {
.u-cell__left-icon-wrap, .u-cell__left-icon-wrap,
.u-cell__right-icon-wrap { .u-cell__right-icon-wrap {
display: flex; @include vue-flex;
align-items: center; align-items: center;
height: 48rpx; height: 48rpx;
} }
.u-cell-border:after { .u-cell-border:after {
position: absolute; position: absolute;
/* #ifndef APP-NVUE */
box-sizing: border-box; box-sizing: border-box;
content: ' '; content: ' ';
pointer-events: none; pointer-events: none;
border-bottom: 1px solid $u-border-color;
/* #endif */
right: 0; right: 0;
left: 0; left: 0;
top: 0; top: 0;
border-bottom: 1px solid $u-border-color;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5); transform: scaleY(0.5);
} }
...@@ -268,13 +271,17 @@ export default { ...@@ -268,13 +271,17 @@ export default {
font-size: 26rpx; font-size: 26rpx;
line-height: 36rpx; line-height: 36rpx;
color: $u-tips-color; color: $u-tips-color;
/* #ifndef APP-NVUE */
word-wrap: break-word; word-wrap: break-word;
/* #endif */
} }
.u-cell__value { .u-cell__value {
overflow: hidden; overflow: hidden;
text-align: right; text-align: right;
/* #ifndef APP-NVUE */
vertical-align: middle; vertical-align: middle;
/* #endif */
color: $u-tips-color; color: $u-tips-color;
font-size: 26rpx; font-size: 26rpx;
} }
...@@ -285,14 +292,18 @@ export default { ...@@ -285,14 +292,18 @@ export default {
} }
.u-cell--required { .u-cell--required {
/* #ifndef APP-NVUE */
overflow: visible; overflow: visible;
display: flex; /* #endif */
@include vue-flex;
align-items: center; align-items: center;
} }
.u-cell--required:before { .u-cell--required:before {
position: absolute; position: absolute;
/* #ifndef APP-PLUS */
content: '*'; content: '*';
/* #endif */
left: 8px; left: 8px;
margin-top: 4rpx; margin-top: 4rpx;
font-size: 14px; font-size: 14px;
......
...@@ -223,7 +223,7 @@ ...@@ -223,7 +223,7 @@
color: $u-content-color; color: $u-content-color;
flex: none; flex: none;
display: -webkit-flex; display: -webkit-flex;
display: flex; @include vue-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-sizing: border-box; box-sizing: border-box;
......
...@@ -166,7 +166,7 @@ ...@@ -166,7 +166,7 @@
.u-collapse-head { .u-collapse-head {
position: relative; position: relative;
display: flex; @include vue-flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
color: $u-main-color; color: $u-main-color;
......
...@@ -193,7 +193,7 @@ export default { ...@@ -193,7 +193,7 @@ export default {
.u-notice-bar { .u-notice-bar {
width: 100%; width: 100%;
display: flex; @include vue-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-wrap: nowrap; flex-wrap: nowrap;
...@@ -204,14 +204,14 @@ export default { ...@@ -204,14 +204,14 @@ export default {
.u-swiper { .u-swiper {
font-size: 26rpx; font-size: 26rpx;
height: 32rpx; height: 32rpx;
display: flex; @include vue-flex;
align-items: center; align-items: center;
flex: 1; flex: 1;
margin-left: 12rpx; margin-left: 12rpx;
} }
.u-swiper-item { .u-swiper-item {
display: flex; @include vue-flex;
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
} }
......
...@@ -284,7 +284,7 @@ export default { ...@@ -284,7 +284,7 @@ export default {
} }
.u-countdown-item { .u-countdown-item {
display: flex; @include vue-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 2rpx; padding: 2rpx;
...@@ -300,7 +300,7 @@ export default { ...@@ -300,7 +300,7 @@ export default {
} }
.u-countdown-colon { .u-countdown-colon {
display: flex; @include vue-flex;
justify-content: center; justify-content: center;
padding: 0 5rpx; padding: 0 5rpx;
line-height: 1; line-height: 1;
......
...@@ -110,7 +110,7 @@ export default { ...@@ -110,7 +110,7 @@ export default {
width: 100%; width: 100%;
position: relative; position: relative;
text-align: center; text-align: center;
display: flex; @include vue-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
......
...@@ -173,7 +173,7 @@ ...@@ -173,7 +173,7 @@
@import "../../libs/css/style.components.scss"; @import "../../libs/css/style.components.scss";
.u-empty { .u-empty {
display: flex; @include vue-flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
...@@ -185,7 +185,7 @@ ...@@ -185,7 +185,7 @@
} }
.u-slot-wrap { .u-slot-wrap {
display: flex; @include vue-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-top: 20rpx; margin-top: 20rpx;
......
...@@ -292,7 +292,7 @@ export default { ...@@ -292,7 +292,7 @@ export default {
} }
.u-field-inner { .u-field-inner {
display: flex; @include vue-flex;
align-items: center; align-items: center;
} }
...@@ -307,7 +307,7 @@ export default { ...@@ -307,7 +307,7 @@ export default {
} }
.fild-body { .fild-body {
display: flex; @include vue-flex;
flex: 1; flex: 1;
align-items: center; align-items: center;
} }
...@@ -334,7 +334,7 @@ export default { ...@@ -334,7 +334,7 @@ export default {
flex: 1 1 130rpx; flex: 1 1 130rpx;
text-align: left; text-align: left;
position: relative; position: relative;
display: flex; @include vue-flex;
align-items: center; align-items: center;
} }
...@@ -358,7 +358,7 @@ export default { ...@@ -358,7 +358,7 @@ export default {
} }
.u-clear-icon { .u-clear-icon {
display: flex; @include vue-flex;
align-items: center; align-items: center;
} }
......
...@@ -319,7 +319,7 @@ export default { ...@@ -319,7 +319,7 @@ export default {
@import "../../libs/css/style.components.scss"; @import "../../libs/css/style.components.scss";
.u-form-item { .u-form-item {
display: flex; @include vue-flex;
// align-items: flex-start; // align-items: flex-start;
padding: 20rpx 0; padding: 20rpx 0;
font-size: 28rpx; font-size: 28rpx;
...@@ -333,16 +333,16 @@ export default { ...@@ -333,16 +333,16 @@ export default {
} }
&__body { &__body {
display: flex; @include vue-flex;
} }
&--left { &--left {
display: flex; @include vue-flex;
align-items: center; align-items: center;
&__content { &__content {
position: relative; position: relative;
display: flex; @include vue-flex;
align-items: center; align-items: center;
padding-right: 10rpx; padding-right: 10rpx;
flex: 1; flex: 1;
...@@ -360,7 +360,7 @@ export default { ...@@ -360,7 +360,7 @@ export default {
} }
&__label { &__label {
display: flex; @include vue-flex;
align-items: center; align-items: center;
flex: 1; flex: 1;
} }
...@@ -371,14 +371,14 @@ export default { ...@@ -371,14 +371,14 @@ export default {
flex: 1; flex: 1;
&__content { &__content {
display: flex; @include vue-flex;
align-items: center; align-items: center;
flex: 1; flex: 1;
&__slot { &__slot {
flex: 1; flex: 1;
/* #ifndef MP */ /* #ifndef MP */
display: flex; @include vue-flex;
align-items: center; align-items: center;
/* #endif */ /* #endif */
} }
......
...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
.u-grid-item { .u-grid-item {
box-sizing: border-box; box-sizing: border-box;
background: #fff; background: #fff;
display: flex; @include vue-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative; position: relative;
...@@ -102,7 +102,7 @@ ...@@ -102,7 +102,7 @@
.u-grid-item-box { .u-grid-item-box {
padding: 30rpx 0; padding: 30rpx 0;
display: flex; @include vue-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
......
...@@ -87,7 +87,7 @@ export default { ...@@ -87,7 +87,7 @@ export default {
/* #endif */ /* #endif */
/* #ifndef MP */ /* #ifndef MP */
display: flex; @include vue-flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
/* #endif */ /* #endif */
......
...@@ -200,7 +200,10 @@ export default { ...@@ -200,7 +200,10 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
@import "../../libs/css/style.components.scss"; @import "../../libs/css/style.components.scss";
/* #ifndef APP-NVUE */
// 目前由于nvue对定义字体时的content属性报错,所以nvue先不引入
@import '../../iconfont.css'; @import '../../iconfont.css';
/* #endif */
.u-icon { .u-icon {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
......
...@@ -251,7 +251,7 @@ export default { ...@@ -251,7 +251,7 @@ export default {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; @include vue-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: $u-bg-color; background-color: $u-bg-color;
......
...@@ -282,7 +282,7 @@ ...@@ -282,7 +282,7 @@
position: fixed; position: fixed;
top: 50%; top: 50%;
right: 0; right: 0;
display: flex; @include vue-flex;
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
transform: translateY(-50%); transform: translateY(-50%);
...@@ -308,7 +308,7 @@ ...@@ -308,7 +308,7 @@
font-size: 50rpx; font-size: 50rpx;
color: #fff; color: #fff;
background-color: rgba(0, 0, 0, 0.65); background-color: rgba(0, 0, 0, 0.65);
display: flex; @include vue-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 0; padding: 0;
......
...@@ -317,10 +317,12 @@ export default { ...@@ -317,10 +317,12 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../libs/css/style.components.scss";
.u-input { .u-input {
position: relative; position: relative;
flex: 1; flex: 1;
display: flex; @include vue-flex;
&__input { &__input {
//height: $u-form-item-height; //height: $u-form-item-height;
......
...@@ -179,7 +179,7 @@ ...@@ -179,7 +179,7 @@
} }
.u-tooltip { .u-tooltip {
display: flex; @include vue-flex;
justify-content: space-between; justify-content: space-between;
} }
......
...@@ -116,7 +116,7 @@ ...@@ -116,7 +116,7 @@
width: 0; width: 0;
height: 100%; height: 100%;
align-items: center; align-items: center;
display: flex; @include vue-flex;
justify-items: flex-end; justify-items: flex-end;
justify-content: space-around; justify-content: space-around;
font-size: 20rpx; font-size: 20rpx;
......
...@@ -159,12 +159,12 @@ ...@@ -159,12 +159,12 @@
.u-load-more-wrap { .u-load-more-wrap {
width: 100%; width: 100%;
display: flex; @include vue-flex;
justify-content: center; justify-content: center;
} }
.u-load-more-inner { .u-load-more-inner {
display: flex; @include vue-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
...@@ -172,7 +172,7 @@ ...@@ -172,7 +172,7 @@
.u-more { .u-more {
width: 60%; width: 60%;
position: relative; position: relative;
display: flex; @include vue-flex;
justify-content: center; justify-content: center;
} }
...@@ -192,7 +192,7 @@ ...@@ -192,7 +192,7 @@
} }
.u-loadmore-icon { .u-loadmore-icon {
display: flex; @include vue-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
......
...@@ -196,7 +196,7 @@ ...@@ -196,7 +196,7 @@
} }
.u-char-flex { .u-char-flex {
display: flex; @include vue-flex;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
position: relative; position: relative;
...@@ -223,7 +223,7 @@ ...@@ -223,7 +223,7 @@
font-weight: bold; font-weight: bold;
color: $u-main-color; color: $u-main-color;
line-height: 90rpx; line-height: 90rpx;
display: flex; @include vue-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
......
...@@ -266,7 +266,7 @@ ...@@ -266,7 +266,7 @@
} }
&__footer { &__footer {
display: flex; @include vue-flex;
&__button { &__button {
flex: 1; flex: 1;
......
...@@ -252,14 +252,14 @@ ...@@ -252,14 +252,14 @@
} }
.u-navbar-inner { .u-navbar-inner {
display: flex; @include vue-flex;
justify-content: space-between; justify-content: space-between;
position: relative; position: relative;
align-items: center; align-items: center;
} }
.u-back-wrap { .u-back-wrap {
display: flex; @include vue-flex;
align-items: center; align-items: center;
flex: 1; flex: 1;
flex-grow: 0; flex-grow: 0;
...@@ -272,7 +272,7 @@ ...@@ -272,7 +272,7 @@
} }
.u-navbar-content-title { .u-navbar-content-title {
display: flex; @include vue-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex: 1; flex: 1;
...@@ -296,14 +296,14 @@ ...@@ -296,14 +296,14 @@
.u-navbar-right { .u-navbar-right {
flex: 1; flex: 1;
display: flex; @include vue-flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
} }
.u-slot-content { .u-slot-content {
flex: 1; flex: 1;
display: flex; @include vue-flex;
align-items: center; align-items: center;
} }
</style> </style>
...@@ -190,7 +190,7 @@ ...@@ -190,7 +190,7 @@
.u-inner { .u-inner {
height: 100vh; height: 100vh;
display: flex; @include vue-flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
......
...@@ -227,26 +227,26 @@ export default { ...@@ -227,26 +227,26 @@ export default {
} }
.u-direction-row { .u-direction-row {
display: flex; @include vue-flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.u-left-icon { .u-left-icon {
display: flex; @include vue-flex;
align-items: center; align-items: center;
} }
.u-notice-box { .u-notice-box {
flex: 1; flex: 1;
display: flex; @include vue-flex;
overflow: hidden; overflow: hidden;
margin-left: 12rpx; margin-left: 12rpx;
} }
.u-right-icon { .u-right-icon {
margin-left: 12rpx; margin-left: 12rpx;
display: flex; @include vue-flex;
align-items: center; align-items: center;
} }
......
...@@ -315,7 +315,7 @@ ...@@ -315,7 +315,7 @@
text-align: center; text-align: center;
padding: 0; padding: 0;
margin: 0 6rpx; margin: 0 6rpx;
display: flex; @include vue-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
...@@ -323,7 +323,7 @@ ...@@ -323,7 +323,7 @@
.u-icon-plus, .u-icon-plus,
.u-icon-minus { .u-icon-minus {
width: 60rpx; width: 60rpx;
display: flex; @include vue-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
......
...@@ -128,7 +128,7 @@ ...@@ -128,7 +128,7 @@
} }
.u-keyboard-grids { .u-keyboard-grids {
display: flex; @include vue-flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
...@@ -137,7 +137,7 @@ ...@@ -137,7 +137,7 @@
text-align: center; text-align: center;
font-size: 50rpx; font-size: 50rpx;
color: #333; color: #333;
display: flex; @include vue-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 110rpx; height: 110rpx;
......
...@@ -610,7 +610,7 @@ export default { ...@@ -610,7 +610,7 @@ export default {
width: 100%; width: 100%;
height: 90rpx; height: 90rpx;
padding: 0 40rpx; padding: 0 40rpx;
display: flex; @include vue-flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
...@@ -642,7 +642,7 @@ export default { ...@@ -642,7 +642,7 @@ export default {
} }
.u-column-item { .u-column-item {
display: flex; @include vue-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 32rpx; font-size: 32rpx;
......
...@@ -388,10 +388,8 @@ export default { ...@@ -388,10 +388,8 @@ export default {
} }
.u-drawer-center { .u-drawer-center {
/* #ifndef APP-NVUE */ @include vue-flex;
display: flex;
flex-direction: column; flex-direction: column;
/* #endif */
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
......
...@@ -176,7 +176,7 @@ ...@@ -176,7 +176,7 @@
.u-radio { .u-radio {
display: -webkit-flex; display: -webkit-flex;
display: flex; @include vue-flex;
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
user-select: none; user-select: none;
...@@ -184,7 +184,7 @@ ...@@ -184,7 +184,7 @@
&__icon-wrap { &__icon-wrap {
color: $u-content-color; color: $u-content-color;
display: flex; @include vue-flex;
flex: none; flex: none;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
......
...@@ -160,12 +160,12 @@ ...@@ -160,12 +160,12 @@
position: relative; position: relative;
width: 100%; width: 100%;
padding-bottom: 26rpx; padding-bottom: 26rpx;
display: flex; @include vue-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
&__readmore-btn { &__readmore-btn {
display: flex; @include vue-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
line-height: 1; line-height: 1;
......
...@@ -217,7 +217,7 @@ export default { ...@@ -217,7 +217,7 @@ export default {
} }
.u-direction-row { .u-direction-row {
display: flex; @include vue-flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
...@@ -229,7 +229,7 @@ export default { ...@@ -229,7 +229,7 @@ export default {
.u-notice-box { .u-notice-box {
flex: 1; flex: 1;
display: flex; @include vue-flex;
overflow: hidden; overflow: hidden;
margin-left: 12rpx; margin-left: 12rpx;
} }
...@@ -245,7 +245,7 @@ export default { ...@@ -245,7 +245,7 @@ export default {
text-align: right; text-align: right;
// 这一句很重要,为了能让滚动左右连接起来 // 这一句很重要,为了能让滚动左右连接起来
padding-left: 100%; padding-left: 100%;
display: flex; @include vue-flex;
flex-wrap: nowrap; flex-wrap: nowrap;
} }
......
...@@ -69,7 +69,7 @@ ...@@ -69,7 +69,7 @@
.u-row { .u-row {
// 由于微信小程序编译后奇怪的页面结构,只能使用float布局实现,flex无法实现 // 由于微信小程序编译后奇怪的页面结构,只能使用float布局实现,flex无法实现
/* #ifndef MP-WEIXIN || MP-QQ */ /* #ifndef MP-WEIXIN || MP-QQ */
display: flex; @include vue-flex;
/* #endif */ /* #endif */
flex-wrap: wrap; flex-wrap: wrap;
} }
......
...@@ -287,20 +287,20 @@ export default { ...@@ -287,20 +287,20 @@ export default {
@import "../../libs/css/style.components.scss"; @import "../../libs/css/style.components.scss";
.u-search { .u-search {
display: flex; @include vue-flex;
align-items: center; align-items: center;
flex: 1; flex: 1;
} }
.u-content { .u-content {
display: flex; @include vue-flex;
align-items: center; align-items: center;
padding: 0 18rpx; padding: 0 18rpx;
flex: 1; flex: 1;
} }
.u-clear-icon { .u-clear-icon {
display: flex; @include vue-flex;
align-items: center; align-items: center;
} }
...@@ -315,7 +315,7 @@ export default { ...@@ -315,7 +315,7 @@ export default {
.u-close-wrap { .u-close-wrap {
width: 40rpx; width: 40rpx;
height: 100%; height: 100%;
display: flex; @include vue-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 50%; border-radius: 50%;
......
...@@ -119,7 +119,7 @@ ...@@ -119,7 +119,7 @@
@import "../../libs/css/style.components.scss"; @import "../../libs/css/style.components.scss";
.u-section { .u-section {
display: flex; @include vue-flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
width: 100%; width: 100%;
...@@ -128,7 +128,7 @@ ...@@ -128,7 +128,7 @@
position: relative; position: relative;
font-size: 28rpx; font-size: 28rpx;
padding-left: 20rpx; padding-left: 20rpx;
display: flex; @include vue-flex;
align-items: center; align-items: center;
&__icon-wrap { &__icon-wrap {
...@@ -143,7 +143,7 @@ ...@@ -143,7 +143,7 @@
&__right-info { &__right-info {
color: $u-tips-color; color: $u-tips-color;
font-size: 26rpx; font-size: 26rpx;
display: flex; @include vue-flex;
align-items: center; align-items: center;
&__icon-arrow { &__icon-arrow {
......
...@@ -386,7 +386,7 @@ export default { ...@@ -386,7 +386,7 @@ export default {
} }
&__header { &__header {
display: flex; @include vue-flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
height: 80rpx; height: 80rpx;
...@@ -404,7 +404,7 @@ export default { ...@@ -404,7 +404,7 @@ export default {
box-sizing: border-box; box-sizing: border-box;
&__item { &__item {
display: flex; @include vue-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 32rpx; font-size: 32rpx;
......
...@@ -114,7 +114,7 @@ $u-steps-item-number-width: 44rpx; ...@@ -114,7 +114,7 @@ $u-steps-item-number-width: 44rpx;
$u-steps-item-dot-width: 20rpx; $u-steps-item-dot-width: 20rpx;
.u-steps { .u-steps {
display: flex; @include vue-flex;
.u-steps__item { .u-steps__item {
flex: 1; flex: 1;
...@@ -123,13 +123,13 @@ $u-steps-item-dot-width: 20rpx; ...@@ -123,13 +123,13 @@ $u-steps-item-dot-width: 20rpx;
min-width: 100rpx; min-width: 100rpx;
font-size: 26rpx; font-size: 26rpx;
color: #8799a3; color: #8799a3;
display: flex; @include vue-flex;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
&--row { &--row {
display: flex; @include vue-flex;
flex-direction: column; flex-direction: column;
.u-steps__item__line { .u-steps__item__line {
...@@ -149,7 +149,7 @@ $u-steps-item-dot-width: 20rpx; ...@@ -149,7 +149,7 @@ $u-steps-item-dot-width: 20rpx;
} }
&--column { &--column {
display: flex; @include vue-flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
min-height: 120rpx; min-height: 120rpx;
...@@ -171,7 +171,7 @@ $u-steps-item-dot-width: 20rpx; ...@@ -171,7 +171,7 @@ $u-steps-item-dot-width: 20rpx;
} }
&__num { &__num {
display: flex; @include vue-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: $u-steps-item-number-width; width: $u-steps-item-number-width;
...@@ -184,7 +184,7 @@ $u-steps-item-dot-width: 20rpx; ...@@ -184,7 +184,7 @@ $u-steps-item-dot-width: 20rpx;
&__dot { &__dot {
width: $u-steps-item-dot-width; width: $u-steps-item-dot-width;
height: $u-steps-item-dot-width; height: $u-steps-item-dot-width;
display: flex; @include vue-flex;
border-radius: 50%; border-radius: 50%;
} }
......
...@@ -306,7 +306,7 @@ ...@@ -306,7 +306,7 @@
@import "../../libs/css/style.components.scss"; @import "../../libs/css/style.components.scss";
.u-subsection { .u-subsection {
display: flex; @include vue-flex;
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
...@@ -317,7 +317,7 @@ ...@@ -317,7 +317,7 @@
text-align: center; text-align: center;
font-size: 26rpx; font-size: 26rpx;
height: 100%; height: 100%;
display: flex; @include vue-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: $u-main-color; color: $u-main-color;
...@@ -348,7 +348,7 @@ ...@@ -348,7 +348,7 @@
.u-item-text { .u-item-text {
transition: all 0.35s; transition: all 0.35s;
color: $u-main-color; color: $u-main-color;
display: flex; @include vue-flex;
align-items: center; align-items: center;
position: relative; position: relative;
z-index: 3; z-index: 3;
......
...@@ -230,7 +230,7 @@ export default { ...@@ -230,7 +230,7 @@ export default {
} }
.u-swipe-view { .u-swipe-view {
display: flex; @include vue-flex;
height: initial; height: initial;
position: relative; position: relative;
/* 这一句很关键,覆盖默认的绝对定位 */ /* 这一句很关键,覆盖默认的绝对定位 */
......
...@@ -252,7 +252,7 @@ ...@@ -252,7 +252,7 @@
.u-swiper-indicator { .u-swiper-indicator {
padding: 0 24rpx; padding: 0 24rpx;
position: absolute; position: absolute;
display: flex; @include vue-flex;
width: 100%; width: 100%;
z-index: 1; z-index: 1;
} }
...@@ -331,7 +331,7 @@ ...@@ -331,7 +331,7 @@
} }
.u-swiper-item { .u-swiper-item {
display: flex; @include vue-flex;
overflow: hidden; overflow: hidden;
align-items: center; align-items: center;
} }
......
...@@ -123,7 +123,7 @@ ...@@ -123,7 +123,7 @@
} }
.u-switch__node { .u-switch__node {
display: flex; @include vue-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: absolute; position: absolute;
...@@ -142,7 +142,7 @@ ...@@ -142,7 +142,7 @@
} }
.u-switch__loading { .u-switch__loading {
display: flex; @include vue-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
......
...@@ -232,7 +232,9 @@ ...@@ -232,7 +232,9 @@
<style scoped lang="scss"> <style scoped lang="scss">
@import "../../libs/css/style.components.scss"; @import "../../libs/css/style.components.scss";
.u-fixed-placeholder { .u-fixed-placeholder {
/* #ifndef APP-NVUE */
box-sizing: content-box; box-sizing: content-box;
/* #endif */
} }
.u-tabbar { .u-tabbar {
...@@ -246,7 +248,9 @@ ...@@ -246,7 +248,9 @@
left: 0; left: 0;
width: 100%; width: 100%;
z-index: 998; z-index: 998;
/* #ifndef APP-NVUE */
box-sizing: content-box; box-sizing: content-box;
/* #endif */
&__circle__border { &__circle__border {
border-radius: 100%; border-radius: 100%;
...@@ -271,7 +275,7 @@ ...@@ -271,7 +275,7 @@
justify-content: center; justify-content: center;
height: 100%; height: 100%;
padding: 12rpx 0; padding: 12rpx 0;
display: flex; @include vue-flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
position: relative; position: relative;
...@@ -296,17 +300,19 @@ ...@@ -296,17 +300,19 @@
&__circle { &__circle {
position: relative; position: relative;
display: flex; @include vue-flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
z-index: 10; z-index: 10;
/* #ifndef APP-NVUE */
height: calc(100% - 1px); height: calc(100% - 1px);
/* #endif */
&__button { &__button {
width: 90rpx; width: 90rpx;
height: 90rpx; height: 90rpx;
border-radius: 100%; border-radius: 100%;
display: flex; @include vue-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
position: absolute; position: absolute;
......
...@@ -414,7 +414,7 @@ ...@@ -414,7 +414,7 @@
} }
.u-tabs-scorll-flex { .u-tabs-scorll-flex {
display: flex; @include vue-flex;
justify-content: space-between; justify-content: space-between;
} }
...@@ -454,7 +454,7 @@ ...@@ -454,7 +454,7 @@
position: absolute; position: absolute;
top: 0; top: 0;
transition-property: left, background-color; transition-property: left, background-color;
display: flex; @include vue-flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
......
...@@ -341,7 +341,7 @@ ...@@ -341,7 +341,7 @@
} }
.u-tabs-scorll-flex { .u-tabs-scorll-flex {
display: flex; @include vue-flex;
justify-content: space-between; justify-content: space-between;
} }
</style> </style>
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
@import "../../libs/css/style.components.scss"; @import "../../libs/css/style.components.scss";
.u-td { .u-td {
display: flex; @include vue-flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
justify-content: center; justify-content: center;
......
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
@import "../../libs/css/style.components.scss"; @import "../../libs/css/style.components.scss";
.u-th { .u-th {
display: flex; @include vue-flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
justify-content: center; justify-content: center;
......
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
@import "../../libs/css/style.components.scss"; @import "../../libs/css/style.components.scss";
.u-time-axis-item { .u-time-axis-item {
display: flex; @include vue-flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
position: relative; position: relative;
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
left: -40rpx; left: -40rpx;
transform-origin: 0; transform-origin: 0;
transform: translateX(-50%); transform: translateX(-50%);
display: flex; @include vue-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 1; z-index: 1;
......
...@@ -141,7 +141,7 @@ ...@@ -141,7 +141,7 @@
border-radius: 8rpx; border-radius: 8rpx;
background: #585858; background: #585858;
height: 80rpx; height: 80rpx;
display: flex; @include vue-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 28rpx; font-size: 28rpx;
...@@ -162,7 +162,7 @@ ...@@ -162,7 +162,7 @@
.u-icon { .u-icon {
margin-right: 10rpx; margin-right: 10rpx;
display: flex; @include vue-flex;
align-items: center; align-items: center;
line-height: normal; line-height: normal;
} }
......
...@@ -84,7 +84,7 @@ ...@@ -84,7 +84,7 @@
font-size: 28rpx; font-size: 28rpx;
left: 0; left: 0;
right: 0; right: 0;
display: flex; @include vue-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
opacity: 0; opacity: 0;
......
...@@ -20,6 +20,6 @@ ...@@ -20,6 +20,6 @@
@import "../../libs/css/style.components.scss"; @import "../../libs/css/style.components.scss";
.u-tr { .u-tr {
display: flex; @include vue-flex;
} }
</style> </style>
...@@ -525,7 +525,7 @@ export default { ...@@ -525,7 +525,7 @@ export default {
@import '../../libs/css/style.components.scss'; @import '../../libs/css/style.components.scss';
.u-upload { .u-upload {
display: flex; @include vue-flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
} }
...@@ -578,13 +578,13 @@ export default { ...@@ -578,13 +578,13 @@ export default {
border-radius: 100rpx; border-radius: 100rpx;
width: 44rpx; width: 44rpx;
height: 44rpx; height: 44rpx;
display: flex; @include vue-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.u-icon { .u-icon {
display: flex; @include vue-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
......
...@@ -163,13 +163,13 @@ export default { ...@@ -163,13 +163,13 @@ export default {
@import "../../libs/css/style.components.scss"; @import "../../libs/css/style.components.scss";
.u-waterfall { .u-waterfall {
display: flex; @include vue-flex;
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: flex-start;
} }
.u-column { .u-column {
display: flex; @include vue-flex;
flex: 1; flex: 1;
flex-direction: column; flex-direction: column;
height: auto; height: auto;
......
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