deming/pageA/topick/topick.vue
2020-06-11 08:43:51 +08:00

350 lines
5.9 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<!-- login页面 -->
<view>
<view class="login">
<image class="images" src="../../static/pageA/topick.jpg"></image>
<view class="backes"></view>
<view class="content">
<view class="title">开启个性化定制</view>
<view class="title_two">你的兴趣频道</view>
</view>
<!-- 标签 -->
<view class="tab_lable">
<view :class="{'cur': rSelect.indexOf(index)!=-1}" v-for="(item,index) in tab_lables" :key="index" @click="tapClick(index)">{{item}}</view>
</view>
<!-- 提交按钮 -->
<view class="submites">{{submites}}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [{
checked: false,
disabled: false
}],
value: '',
login: '登录',
show: false,
tab_lables: ["科技", "科技", "科技", "科技", "科技", "科技", "科技", "科技", "科技", "科技"],
submites: '选好了进入首页',
rSelect:[]
};
},
methods: {
// 选中某个复选框时由checkbox时触发
checkboxChange(e) {
//console.log(e);
},
// 选中任一checkbox时由checkbox-group触发
checkboxGroupChange(e) {
// console.log(e);
},
mask_u() {
this.show = !this.show
},
// 点击切换颜色
tapClick(index) {
console.log(index)
if (this.rSelect.indexOf(index) == -1) {
console.log(index) //打印下标
this.rSelect.push(index); //选中添加到数组里
} else {
this.rSelect.splice(this.rSelect.indexOf(index), 1); //取消
}
}
}
};
</script>
<style lang="scss" scoped>
.tab_lable {
// display:flex;
// flex-wrap:wrap;
// display: -webkit-flex; /* Safari */
}
.tab_lable>view {
height: 76rpx;
background: rgba(239, 240, 244, 1);
border-radius: 35rpx;
color: #fff;
text-align: center;
line-height: 76rpx;
float: left;
margin-left: 40rpx;
margin-bottom: 50rpx;
flex: 1;
width: 200rpx;
font-weight: 400;
color: rgba(102, 102, 102, 1);
}
// 提交按钮
.submites {
width: 628rpx;
height: 98rpx;
line-height: 98rpx;
background: rgba(255, 120, 15, 1);
border-radius: 49rpx;
position: fixed;
bottom: 87rpx;
left: 0;
right: 0;
margin: auto;
font-size: 36rpx;
font-weight: bold;
color: rgba(255, 255, 255, 1);
line-height: 98rpx;
text-align: center;
}
.login {
// background: url(../../static/pageA/loginbackground.png) no-repeat!important;
.images {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
.backes {
background: rgba(255, 355, 255, 0.8);
position: fixed;
width: 100%;
height: 100%;
z-index: -1;
}
text {
z-index: 9;
color: #fff;
}
.more_Login {
overflow: hidden;
zoom: 1;
width: 630rpx;
margin: 0 auto;
}
.more_Login text {
display: inline-block;
width: 50%;
float: left;
font-size: 30rpx;
color: rgba(255, 255, 255, 1);
line-height: 36px;
margin: 97rpx 0;
}
.more_Login .other {
text-align: right;
}
}
.title {
font-size: 36rpx;
font-weight: bold;
color: #fff;
font-weight: bold;
color: rgba(51, 51, 51, 1);
font-size: 54rpx;
}
.title_two {
margin: 39rpx 0 43rpx 0;
font-size: 30rpx;
font-weight: bold;
color: rgba(51, 51, 51, 1);
}
.content {
width: 630rpx;
z-index: 99999;
margin: 0 auto;
padding-top: 130rpx;
.labales text {
font-size: 30rpx;
}
.labales {
border-bottom: 1px #fff solid;
margin-bottom: 90rpx;
}
.labales {
position: relative;
}
.identifying {
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
font-size: 30rpx;
font-weight: 500;
color: rgba(255, 120, 15, 1);
line-height: 36px;
}
}
.pact text {
font-size: 22rpx;
font-weight: 400;
color: rgba(255, 255, 255, 1);
line-height: 36px;
}
.pact_text {
font-size: 22px;
font-weight: 400;
color: rgba(129, 188, 253, 1) !important;
line-height: 36px;
}
//单选框的样式
.pact {
position: relative;
padding-left: 40rpx;
}
.u-checkbox-group {
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto;
}
.u-checkbox__icon--square {
border-radius: 50rpx !important;
width: 22rpx;
height: 22rpx;
}
.u-btn {
width: 628rpx;
height: 98rpx;
background: rgba(255, 120, 15, 1) !important;
border-radius: 49rpx;
margin: 0 auto;
font-size: 36rpx;
color: rgba(255, 255, 255, 1) !important;
line-height: 36px;
border: 1px #ff780f solid;
outline: none;
border-color: rgba(255, 120, 15, 1) !important;
}
.warp {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.rect {
width: 558rpx;
height: 300rpx;
background-color: #fff;
border-radius: 20rpx;
overflow: hidden;
zoom: 1;
position: relative;
display: flex;
flex-wrap: wrap;
display: -webkit-flex;
/* Safari */
.rect_view {
width: 100rpx;
height: 100rpx;
.image {
width: 45rpx;
height: 53rpx;
display: inline-block;
}
flex:1;
margin-top: 77rpx;
}
.rect_view:nth-child(2) image {
width: 57rpx;
height: 45rpx;
}
.rect_butoon {
width: 100%;
position: absolute;
bottom: 0;
height: 85rpx;
text-align: center;
line-height: 85rpx;
border-top: 1px #999999 solid;
}
view {
color: #666;
font-size: 24rpx;
margin-top: 30rpx;
}
}
.rect_view:nth-child(1) image,
.rect_view:nth-child(1) view {
float: right;
}
.rect_view:nth-child(1) image {
margin-right: 20rpx;
}
.rect_view:nth-child(1) {
position: relative;
margin-right: 79rpx;
}
.rect_view:nth-child(1) view {
position: absolute;
bottom: 0;
right: 0;
}
.rect_view:nth-child(2) image,
.rect_view:nth-child(2) view {
float: left;
}
.rect_view:nth-child(2) image {
margin-left: 20rpx;
}
.rect_view:nth-child(2) {
position: relative;
}
.rect_view:nth-child(2) view {
position: absolute;
bottom: 0;
left: 0;
}
// 选中的样式
.cur {
background-color: #ff5d00!important;
color: #fff!important;
}
</style>