<template>
<view class="container">
<u-navbar back-text="返回" title="设置" :background="background" :border-bottom="borderBottom"></u-navbar>
<view class="user-section">
</view>
<view class="cover-container" :style="[{
transform: coverTransform,
transition: coverTransition
}]"
>
<image class="arc" src="/static/arc.png"></image>
<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
<uni-card :isShadow="true" mode="basic" extra="" >
<u-tabs :list="list" active-color="#2979ff" :is-scroll="true" :current="current" @change="changeTabs"></u-tabs>
<u-form-item v-if="current == '0'" label-width="240" :label-position="labelPosition" label="状态" prop="workState">
<u-subsection active-color="#01b79d" :animation="animation" slot="right" v-model="model.workState" :current="model.workState" :list="['关机', '开机']" @change="cc1"></u-subsection>
</u-form-item>
<u-form-item v-if="current == '0'" label-width="240" :label-position="labelPosition" label="选择" prop="upAndLow">
<u-subsection active-color="#01b79d" :animation="animation" slot="right" v-model="model.upAndLow" :current="model.upAndLow" :list="['上', '下']" @change="cc2"></u-subsection>
</u-form-item>
<u-form-item v-if="current == '0'" label="文字颜色" prop="currNum" label-width="240">
<u-input :border="border" placeholder="请输入当前1-10" v-model="model.currNum" type="number" value="model.currNum"></u-input>
</u-form-item>
<u-form-item v-if="current == '5'" label="模式1" prop="fanMode1" label-width="240">
<u-subsection active-color="#01b79d" :animation="animation" slot="right" v-model="model.fanMode1" :current="model.fanMode1" :list="['自动', '高速' , '低速']" @change="cf1"></u-subsection>
</u-form-item>
<u-form-item v-if="current == '5'" label="模式2" prop="fanMode2" label-width="240">
<u-subsection active-color="#01b79d" :animation="animation" slot="right" v-model="model.fanMode2" :current="model.fanMode2" :list="['自动', '高速' , '低速']" @change="cf2"></u-subsection>
</u-form-item>
<u-form-item v-if="current == '5'" label="模式3" prop="fanMode3" label-width="240">
<u-subsection active-color="#01b79d" :animation="animation" slot="right" v-model="model.fanMode3" :current="model.fanMode3" :list="['自动', '高速' , '低速']" @change="cf3"></u-subsection>
</u-form-item>
<u-form-item v-if="current == '5'" label="模式4" prop="fanMode4" label-width="240">
<u-subsection active-color="#01b79d" :animation="animation" slot="right" v-model="model.fanMode4" :current="model.fanMode4" :list="['自动', '高速' , '低速']" @change="cf4"></u-subsection>
</u-form-item>
<u-form-item v-if="current == '5'" label="模式5" prop="fanMode5" label-width="240">
<u-subsection active-color="#01b79d" :animation="animation" slot="right" v-model="model.fanMode5" :current="model.fanMode5" :list="['自动', '高速' , '低速']" @change="cf5"></u-subsection>
</u-form-item>
<u-form-item v-if="current == '5'" label="模式6" prop="fanMode6" label-width="240">
<u-subsection active-color="#01b79d" :animation="animation" slot="right" v-model="model.fanMode6" :current="model.fanMode6" :list="['自动', '高速' , '低速']" @change="cf6"></u-subsection>
</u-form-item>
<u-form-item v-if="current == '5'" label="模式7" prop="fanMode7" label-width="240">
<u-subsection active-color="#01b79d" :animation="animation" slot="right" v-model="model.fanMode7" :current="model.fanMode7" :list="['自动', '高速' , '低速']" @change="cf7"></u-subsection>
</u-form-item>
<u-form-item v-if="current == '5'" label="模式8" prop="fanMode8" label-width="240">
<u-subsection active-color="#01b79d" :animation="animation" slot="right" v-model="model.fanMode8" :current="model.fanMode8" :list="['自动', '高速' , '低速']" @change="cf8"></u-subsection>
</u-form-item>
<u-form-item v-if="current == '5'" label="模式9" prop="fanMode9" label-width="240">
<u-subsection active-color="#01b79d" :animation="animation" slot="right" v-model="model.fanMode9" :current="model.fanMode9" :list="['自动', '高速' , '低速']" @change="cf9"></u-subsection>
</u-form-item>
<u-form-item v-if="current == '5'" label="模式10" prop="fanMode10" label-width="240">
<u-subsection active-color="#01b79d" :animation="animation" slot="right" v-model="model.fanMode10" :current="model.fanMode10" :list="['自动', '高速' , '低速']" @change="cf10"></u-subsection>
</u-form-item>
<u-form-item v-if="current == '6'" label="1模式1" prop="bakingMode1" label-width="240">
<u-subsection active-color="#01b79d" :animation="animation" slot="right" :current="model.bakingMode1=='2' ? 1 : 0" :list="['选择1' , '选择2']" @change="c1"></u-subsection>
</u-form-item>
<u-form-item v-if="current == '6'" label="1模式2" prop="bakingMode2" label-width="240">
<u-subsection active-color="#01b79d" :animation="animation" slot="right" :current="model.bakingMode2=='2' ? 1 : 0" :list="['选择1' , '选择2']" @change="c2"></u-subsection>
</u-form-item>
<u-form-item v-if="current == '6'" label="1模式3" prop="bakingMode3" label-width="240">
<u-subsection active-color="#01b79d" :animation="animation" slot="right" :current="model.bakingMode3 =='2' ? 1 : 0" :list="['选择1' , '选择2']" @change="c3"></u-subsection>
</u-form-item>
<u-form-item v-if="current == '6'" label="1模式4" prop="bakingMode4" label-width="240">
<u-subsection active-color="#01b79d" :animation="animation" slot="right" :current="model.bakingMode4=='2' ? 1 : 0" :list="['选择1' , '选择2']" @change="c4"></u-subsection>
</u-form-item>
<u-form-item v-if="current == '6'" label="1模式5" prop="bakingMode5" label-width="240">
<u-subsection active-color="#01b79d" :animation="animation" slot="right" :current="model.bakingMode5=='2' ? 1 : 0" :list="['选择1' , '选择2']" @change="c5"></u-subsection>
</u-form-item>
<u-form-item v-if="current == '6'" label="1模式6" prop="bakingMode6" label-width="240">
<u-subsection active-color="#01b79d" :animation="animation" slot="right" :current="model.bakingMode6=='2' ? 1 : 0" :list="['选择1' , '选择2']" @change="c6"></u-subsection>
</u-form-item>
<u-form-item v-if="current == '6'" label="1模式7" prop="bakingMode7" label-width="240">
<u-subsection active-color="#01b79d" :animation="animation" slot="right" :current="model.bakingMode7=='2' ? 1 : 0" :list="['选择1' , '选择2']" @change="c7"></u-subsection>
</u-form-item>
<u-form-item v-if="current == '6'" label="1模式8" prop="bakingMode8" label-width="240">
<u-subsection active-color="#01b79d" :animation="animation" slot="right" :current="model.bakingMode8=='2' ? 1 : 0" :list="['选择1' , '选择2']" @change="c8"></u-subsection>
</u-form-item>
<u-form-item v-if="current == '6'" label="1模式9" prop="bakingMode9" label-width="240">
<u-subsection active-color="#01b79d" :animation="animation" slot="right" :current="model.bakingMode9=='2' ? 1 : 0" :list="['选择1' , '选择2']" @change="c9"></u-subsection>
</u-form-item>
<u-form-item v-if="current == '6'" label="1模式10" prop="bakingMode10" label-width="240">
<u-subsection active-color="#01b79d" :animation="animation" slot="right" :current="model.bakingMode10=='2' ? 1 : 0" :list="['选择1' , '选择2']" @change="c10"></u-subsection>
</u-form-item>
<u-form-item v-if="current == '7'" label="2模式" prop="manualFan" label-width="240">
<u-subsection active-color="#01b79d" :animation="animation" slot="right" v-model="model.manualFan" :current="model.manualFan" :list="['停止' ,'低速', '高速']" @change="cc3"></u-subsection>
</u-form-item>
<u-form-item v-if="current == '7'" label="2模式2" prop="manualCom1" label-width="240">
<u-subsection active-color="#01b79d" :animation="animation" slot="right" v-model="model.manualCom1" :current="model.manualCom1" :list="['停止','启动']" @change="cc4"></u-subsection>
</u-form-item>
<u-form-item v-if="current == '7'" label="2模式3" prop="manualCom2" label-width="240">
<u-subsection active-color="#01b79d" :animation="animation" slot="right" v-model="model.manualCom2" :current="model.manualCom2" :list="['停止','启动']" @change="cc5"></u-subsection>
</u-form-item>
<u-form-item v-if="current == '7'" label="2模式4" prop="manualEleHot1" label-width="240">
<u-subsection active-color="#01b79d" :animation="animation" slot="right" v-model="model.manualEleHot1" :current="model.manualEleHot1" :list="['停止','启动']" @change="cc6"></u-subsection>
</u-form-item>
<u-form-item v-if="current == '7'" label="2模式5" prop="manualEleHot2" label-width="240">
<u-subsection active-color="#01b79d" :animation="animation" slot="right" v-model="model.manualEleHot2" :current="model.manualEleHot2" :list="['停止','启动']" @change="cc7"></u-subsection>
</u-form-item>
<u-form-item v-if="current == '7'" label="2模式7" prop="manualDelWet" label-width="240">
<u-subsection active-color="#01b79d" :animation="animation" slot="right" v-model="model.manualDelWet" :current="model.manualDelWet" :list="['停止','启动']" @change="cc8"></u-subsection>
</u-form-item>
<u-form-item v-if="current == '7'" label="" prop="manualDamperGear" label-width="240">
<u-input :border="border" placeholder="" v-model="model.manualDamperGear" type="number"></u-input>
</u-form-item>
<u-button v-if="userInfo.type=='1'" @click="submit" type="warning" style="margin-top: 20upx;">保存设置</u-button>
</uni-card>
</u-form>
</view>
</view>
</template>
<script>
export default {
data() {
return {
model: {
deviceId:'',deviceCode:'',sendState:'',workState:0,upAndLow:0,currNum:'',dryTempS1:'',dryTempS2:'',dryTempS3:'',dryTempS4:'',dryTempS5:'',dryTempS6:'',dryTempS7:'',dryTempS8:'',dryTempS9:'',dryTempS10:'',wetTempS1:'',wetTempS2:'',wetTempS3:'',wetTempS4:'',wetTempS5:'',wetTempS6:'',wetTempS7:'',wetTempS8:'',wetTempS9:'',wetTempS10:'',tempRiseRate1:'',tempRiseRate2:'',tempRiseRate3:'',tempRiseRate4:'',tempRiseRate5:'',tempRiseRate6:'',tempRiseRate7:'',tempRiseRate8:'',tempRiseRate9:'',tempRiseRate10:'',stableTempTime1:'',stableTempTime2:'',stableTempTime3:'',stableTempTime4:'',stableTempTime5:'',stableTempTime6:'',stableTempTime7:'',stableTempTime8:'',stableTempTime9:'',stableTempTime10:'',fanMode1:0,fanMode2:0,fanMode3:0,fanMode4:0,fanMode5:0,fanMode6:0,fanMode7:0,fanMode8:0,fanMode9:0,fanMode10:0,bakingMode1:0,bakingMode2:0,bakingMode3:0,bakingMode4:0,bakingMode5:0,bakingMode6:0,bakingMode7:0,bakingMode8:0,bakingMode9:0,bakingMode10:0,manualFan:0,manualCom1:0,manualCom2:0,manualEleHot1:0,manualEleHot2:0,manualDelWet:0,manualDamperGear:'',updateTime:''
},
rules: {
},
coverTransform: 'translateY(0px)',
coverTransition: '0s',
border:false,
labelPosition: 'left',
animation:false,
errorType: ['message'],
list: [],
data: [
{name: '设定1'}
,{name: '设定2'}
,{name: '设定3'}
,{name: '设定4'}
,{name: '设定5'}
,{name: '设定6'}
,{name: '设定7'}
,{name: '设定8'}
],
current: 0,
borderBottom: false,
background: {
backgroundColor: '#0faeff'
}
}
},
onShow() {
},
onLoad(option) {
this.list = this.data;
},
onReady() {
this.$refs.uForm.setRules(this.rules);
},
computed: {},
methods: {
submit() {
},
navTo(url) {
if (!this.hasLogin) {
url = '/pages/public/login';
}
uni.navigateTo({
url: url,
complete: (res) => {
//console.log(res);
}
})
},
changeTabs(index) {
this.current = index;
}
}
}
</script>
<style lang='scss'>
%flex-center {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
%section {
display: flex;
justify-content: space-around;
align-content: center;
background: #fff;
border-radius: 10upx;
}
.user-section {
height: 180upx;
padding: 100upx 30upx 0;
background-color: #0faeff;
position: relative;
.bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
filter: blur(1px);
opacity: .7;
}
}
.user-info-box {
height: 180upx;
display: flex;
align-items: center;
position: relative;
z-index: 1;
.portrait {
width: 130upx;
height: 130upx;
border: 5upx solid #fff;
border-radius: 50%;
}
.username {
font-size: $font-lg + 6upx;
color: $font-color-dark;
margin-left: 20upx;
}
}
.cover-container {
background: $page-color-base;
margin-top: -150upx;
padding: 0 10upx;
position: relative;
background: #f5f5f5;
padding-bottom: 20upx;
.arc {
position: absolute;
left: 0;
top: -34upx;
width: 100%;
height: 36upx;
}
}
.tj-sction {
@extend %section;
.tj-item {
@extend %flex-center;
flex-direction: column;
height: 140upx;
font-size: $font-sm;
color: #75787d;
}
.title {
font-size: 14px;
color: $font-color-dark;
}
.num {
font-size: 12px;
color: #888;
margin-bottom: 8upx;
}
}
.tj-sction1 {
@extend %section;
.tj-item1 {
@extend %flex-center;
flex-direction: column;
height: 100upx;
font-size: $font-sm;
color: #75787d;
}
.title1 {
font-size: 13px;
color: #888;
margin: 0upx 5upx;
}
.num1 {
color: $font-color-dark;
font-size: 14px;
margin-bottom: 0upx 10upx;
}
}
.footer-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: space-between;
flex-direction: row;
}
.footer-box__item1 {
align-items: center;
padding: 2px 0;
font-size: 32upx;
color: #2C405A;
}
.footer-box__item2 {
align-items: center;
padding: 2px 0;
font-size: 32upx;
color: #2C405A;
}
.box-shadow {
box-shadow: 4upx 4upx 10upx rgba(0, 0, 0, 0.2);
}
.details-card {
height: 200upx;
width: 100%;
border: 1upx solid #999999;
border-radius: 10upx;
}
.flex {
display: flex;
}
.flex-1 {
flex: 1;
flex-direction: column;
}
+.flex-2 {
flex: 2;
}
.text-title {
font-size: 26upx;
color: #333333;
}
.text-content {
font-size: 26upx;
color: #999999;
}
input{color:#01b79d!important;}
</style>
- 发布:2020-09-30 16:09
- 更新:2020-12-03 18:17
- 阅读:910
产品分类: uniapp/H5
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: window10
HBuilderX类型: 正式
HBuilderX版本号: 2.8.13
浏览器平台: Chrome
浏览器版本: hbuilderx内置浏览器
项目创建方式: HBuilderX
示例代码:
操作步骤:
贴上代码,新增uni-app项目,导入uview-ui,查看input和tabs的变化
贴上代码,新增uni-app项目,导入uview-ui,查看input和tabs的变化
预期结果:
预期效果,input里面字体变成浅绿色,切换tabs的时候正常切换
预期效果,input里面字体变成浅绿色,切换tabs的时候正常切换
实际结果:
input颜色没有变化,tabs切换的时候有延迟,会显示上一个tabs里面的按钮
input颜色没有变化,tabs切换的时候有延迟,会显示上一个tabs里面的按钮
bug描述:
bug1: 设置css input{color:#01b79d!important;} 无效,在内置浏览器里面input里面的文字还是黑色
bug2: tabs和subsection合用的时候,subsection会显示延迟
1 个回复
DCloud_UNI_GSQ
不用内置浏览器就正常吗?