parent
4dacb5cb65
commit
a1496eb3e8
19 changed files with 68 additions and 1215 deletions
@ -1,475 +0,0 @@ |
|||||||
<template> |
|
||||||
|
|
||||||
<view> |
|
||||||
<view style="padding: 0px 0px;"> |
|
||||||
<view class="filter-content" v-for="(item, index) in menuList" :key="index" v-if="menuIndex == index"> |
|
||||||
<view v-if="item.isSort"> |
|
||||||
<view class="filter-content-list"> |
|
||||||
<view v-for="(detailItem,idx) in selectDetailList" :key="idx" :class="detailItem.isSelected?'filter-content-list-item-active':'filter-content-list-item-default'" |
|
||||||
:style="{'color': detailItem.isSelected?themeColor:'#666666'}" @tap="sortTap(idx,selectDetailList,item.key)"> |
|
||||||
<text>{{detailItem.title}}</text> |
|
||||||
</view> |
|
||||||
</view> |
|
||||||
</view> |
|
||||||
<view v-else> |
|
||||||
<view class="filter-content-title" v-if="item.detailTitle && item.detailTitle.length"> |
|
||||||
<text>{{item.detailTitle}}</text> |
|
||||||
</view> |
|
||||||
<view class="filter-content-detail"> |
|
||||||
<text v-for="(detailItem,idx) in selectDetailList" :key="idx" class='filter-content-detail-item-default' :style="{'background-color':detailItem.isSelected?themeColor:'#FFFFFF','color':detailItem.isSelected?'#FFFFFF':'#666666'}" |
|
||||||
@tap="itemTap(idx,selectDetailList,item.isMutiple,item.key)"> |
|
||||||
{{detailItem.title}} |
|
||||||
</text> |
|
||||||
</view> |
|
||||||
<view class="filter-content-footer"> |
|
||||||
<view class="filter-content-footer-item" style="color: #777777; background-color: #FFFFFF;" @tap="resetClick(selectDetailList,item.key)"> |
|
||||||
<text>重置</text> |
|
||||||
</view> |
|
||||||
<view class="filter-content-footer-item" :style="{'color': '#FFFFFF', 'background-color': themeColor}" @tap="sureClick"> |
|
||||||
<text>确定</text> |
|
||||||
</view> |
|
||||||
</view> |
|
||||||
</view> |
|
||||||
</view> |
|
||||||
</view> |
|
||||||
</view> |
|
||||||
|
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
export default { |
|
||||||
data() { |
|
||||||
return { |
|
||||||
selectArr: [], |
|
||||||
result: {}, |
|
||||||
menuIndex: 0, |
|
||||||
selectDetailList: [], |
|
||||||
independenceObj: {}, |
|
||||||
selectedKey: '', |
|
||||||
cacheSelectedObj: {}, |
|
||||||
defaultSelectedTitleObj: {} |
|
||||||
}; |
|
||||||
}, |
|
||||||
props: { |
|
||||||
themeColor: { |
|
||||||
type: String, |
|
||||||
default () { |
|
||||||
return '#D1372C' |
|
||||||
} |
|
||||||
}, |
|
||||||
menuList: { |
|
||||||
type: Array, |
|
||||||
default () { |
|
||||||
return [] |
|
||||||
} |
|
||||||
}, |
|
||||||
independence: { |
|
||||||
type: Boolean, |
|
||||||
default: false |
|
||||||
} |
|
||||||
}, |
|
||||||
computed: { |
|
||||||
selectedTitleObj() { |
|
||||||
let obj = {} |
|
||||||
for (let i = 0; i < this.menuList.length; i++) { |
|
||||||
let item = this.menuList[i]; |
|
||||||
obj[item.key] = item.title; |
|
||||||
} |
|
||||||
return obj; |
|
||||||
}, |
|
||||||
defaultSelectedObj() { // 保存初始状态 |
|
||||||
return this.getSelectedObj() |
|
||||||
}, |
|
||||||
selectedObj: { |
|
||||||
get() { |
|
||||||
return this.getSelectedObj() |
|
||||||
}, |
|
||||||
set(newObj) { |
|
||||||
return newObj; |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
getSelectedObj() { |
|
||||||
let obj = {} |
|
||||||
for (let i = 0; i < this.menuList.length; i++) { |
|
||||||
let item = this.menuList[i]; |
|
||||||
if (!this.independence && item.defaultSelectedIndex != null && item.defaultSelectedIndex.toString().length > 0) { // 处理并列菜单默认值 |
|
||||||
|
|
||||||
if (item.isMutiple) { |
|
||||||
obj[item.key] = []; |
|
||||||
item.detailList[0].isSelected = false; |
|
||||||
if (!Array.isArray(item.defaultSelectedIndex)) { // 如果默认值不是数组 |
|
||||||
item.defaultSelectedIndex = [item.defaultSelectedIndex]; |
|
||||||
} |
|
||||||
for (let j = 0; j < item.defaultSelectedIndex.length; j++) { // 将默认选中的值放入selectedObj |
|
||||||
item.detailList[item.defaultSelectedIndex[j]].isSelected = true; |
|
||||||
obj[item.key].push(item.detailList[item.defaultSelectedIndex[j]].value) |
|
||||||
} |
|
||||||
|
|
||||||
} else { |
|
||||||
obj[item.key] = item.detailList[item.defaultSelectedIndex].value; |
|
||||||
this.selectedTitleObj[item.key] = item.detailList[item.defaultSelectedIndex].title; |
|
||||||
this.defaultSelectedTitleObj[item.key] = item.detailList[item.defaultSelectedIndex].title; |
|
||||||
item.detailList[0].isSelected = false; |
|
||||||
item.detailList[item.defaultSelectedIndex].isSelected = true; |
|
||||||
} |
|
||||||
} else { |
|
||||||
if (item.isMutiple) { |
|
||||||
obj[item.key] = []; |
|
||||||
} else { |
|
||||||
obj[item.key] = ''; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
this.result = obj; |
|
||||||
return obj; |
|
||||||
}, |
|
||||||
// 重置所有选项,包括默认选项,并更新result |
|
||||||
resetAllSelect(callback) { |
|
||||||
let titles = []; |
|
||||||
for (let i = 0; i < this.menuList.length; i++) { |
|
||||||
this.resetSelected(this.menuList[i].detailList,this.menuList[i].key); |
|
||||||
titles[this.menuList[i].key] = this.menuList[i].title; |
|
||||||
} |
|
||||||
let obj = { |
|
||||||
'result': this.result, |
|
||||||
'titles': titles, |
|
||||||
'isReset': true |
|
||||||
} |
|
||||||
this.$emit("confirm", obj); |
|
||||||
callback(this.result); |
|
||||||
}, |
|
||||||
// 重置选项为设置的默认值,并更新result |
|
||||||
resetSelectToDefault(callback) { |
|
||||||
for (let i = 0; i < this.menuList.length; i++) { |
|
||||||
this.selectDetailList = this.menuList[i].detailList; |
|
||||||
|
|
||||||
if (this.menuList[i].defaultSelectedIndex) { |
|
||||||
if (Array.isArray(this.menuList[i].defaultSelectedIndex)) { // 把所有默认的为false的点为true |
|
||||||
for (let j = 0; j < this.menuList[i].defaultSelectedIndex.length; j++) { |
|
||||||
if (this.selectDetailList[this.menuList[i].defaultSelectedIndex[j]].isSelected == false) { |
|
||||||
this.itemTap(this.menuList[i].defaultSelectedIndex[j], this.selectDetailList, this.menuList[i].isMutiple, this |
|
||||||
.menuList[i].key) |
|
||||||
} |
|
||||||
} |
|
||||||
} else { |
|
||||||
this.itemTap(this.menuList[i].defaultSelectedIndex, this.selectDetailList, this.menuList[i].isMutiple, this.menuList[ |
|
||||||
i].key) |
|
||||||
} |
|
||||||
|
|
||||||
// 获取非默认项的下标 |
|
||||||
let unDefaultSelectedIndexArr = this.getUnDefaultSelectedIndex(this.menuList[i]) |
|
||||||
// 把所有不是默认的为true的点为false |
|
||||||
for (let j = 0; j < unDefaultSelectedIndexArr.length; j++) { |
|
||||||
if (this.selectDetailList[unDefaultSelectedIndexArr[j]].isSelected == true) { |
|
||||||
this.itemTap(unDefaultSelectedIndexArr[j], this.selectDetailList, this.menuList[i].isMutiple, this |
|
||||||
.menuList[i].key) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
this.selectedObj = this.defaultSelectedObj; |
|
||||||
this.result = this.defaultSelectedObj; |
|
||||||
let obj = { |
|
||||||
'result': this.result, |
|
||||||
'titles': this.defaultSelectedTitleObj, |
|
||||||
'isReset': true |
|
||||||
} |
|
||||||
this.$emit("confirm", obj); |
|
||||||
callback(this.result) |
|
||||||
}, |
|
||||||
getUnDefaultSelectedIndex(menuListItem) { // 获取非默认项 |
|
||||||
let tempDefault = menuListItem.defaultSelectedIndex; |
|
||||||
if (!Array.isArray(tempDefault)) { |
|
||||||
tempDefault = [tempDefault]; |
|
||||||
} |
|
||||||
// 获取所有项的下标 组成新的数组 |
|
||||||
let all = []; |
|
||||||
for (let i = 0; i < menuListItem.detailList.length; i++) { |
|
||||||
all.push(i) |
|
||||||
} |
|
||||||
// 将默认选中的数组与所有项的数组的不同值合并为一个新数组 |
|
||||||
var unDefaultSelectedIndex = tempDefault.filter(function(v) { |
|
||||||
return !(all.indexOf(v) > -1) |
|
||||||
}).concat(all.filter(function(v) { |
|
||||||
return !(tempDefault.indexOf(v) > -1) |
|
||||||
})); |
|
||||||
return unDefaultSelectedIndex; |
|
||||||
}, |
|
||||||
resetMenuList(val) { |
|
||||||
this.menuList = val; |
|
||||||
this.$emit('update:menuList', val) |
|
||||||
}, |
|
||||||
menuTabClick(index) { |
|
||||||
this.menuIndex = index; |
|
||||||
this.selectDetailList = this.menuList[index].detailList; |
|
||||||
this.selectedKey = this.menuList[index].key; |
|
||||||
// 如果是独立菜单 |
|
||||||
if (this.independence && !this.menuList[index].isSort) { |
|
||||||
if (JSON.stringify(this.independenceObj) == '{}') { |
|
||||||
this.initIndependenceObj(index); |
|
||||||
} else { |
|
||||||
for (let key in this.independenceObj) { |
|
||||||
if (key != this.selectedKey) { |
|
||||||
this.initIndependenceObj(index); |
|
||||||
this.resetSelected(this.menuList[index].detailList, this.selectedKey); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
if (this.independence && this.menuList[index].isSort) { |
|
||||||
|
|
||||||
this.independenceObj = {}; |
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
if (this.independence) { |
|
||||||
let idx = this.menuList[index].defaultSelectedIndex; |
|
||||||
if (idx != null && idx.toString().length > 0) { // 处理独立菜单默认值 |
|
||||||
if (this.menuList[index].isMutiple) { |
|
||||||
for (let i = 0; i < idx.length; i++) { |
|
||||||
if (this.menuList[index].detailList[idx[i]].isSelected == false) { |
|
||||||
this.itemTap(idx[i], this.menuList[index].detailList, true, this.selectedKey); |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
} else { |
|
||||||
if (this.menuList[index].detailList[idx].isSelected == false) { |
|
||||||
|
|
||||||
this.itemTap(idx, this.menuList[index].detailList, false, this.selectedKey); |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
// #ifdef H5 |
|
||||||
this.selectedObj = this.selectedObj; |
|
||||||
this.$forceUpdate(); |
|
||||||
// #endif |
|
||||||
}, |
|
||||||
initIndependenceObj(index) { |
|
||||||
this.independenceObj = {}; |
|
||||||
if (this.menuList[index].isMutiple) { |
|
||||||
this.independenceObj[this.selectedKey] = []; |
|
||||||
} else { |
|
||||||
this.independenceObj[this.selectedKey] = ''; |
|
||||||
} |
|
||||||
}, |
|
||||||
itemTap(index, list, isMutiple, key) { |
|
||||||
if (isMutiple == true) { |
|
||||||
list[index].isSelected = !list[index].isSelected; |
|
||||||
if (index == 0) { |
|
||||||
this.resetSelected(list, key) |
|
||||||
if (!this.independence) { |
|
||||||
this.selectedTitleObj[key] = list[index].title; |
|
||||||
} |
|
||||||
} else { |
|
||||||
list[0].isSelected = false |
|
||||||
if (list[index].isSelected) { |
|
||||||
if (this.independence) { |
|
||||||
this.independenceObj[this.selectedKey].push(list[index].value); |
|
||||||
} else { |
|
||||||
this.selectedObj[key].push(list[index].value); |
|
||||||
} |
|
||||||
} else { |
|
||||||
list[index].isSelected = false; |
|
||||||
if (this.independence) { |
|
||||||
var idx = this.independenceObj[this.selectedKey].indexOf(list[index].value); |
|
||||||
this.independenceObj[this.selectedKey].splice(idx, 1); |
|
||||||
} else { |
|
||||||
var idx = this.selectedObj[key].indexOf(list[index].value); |
|
||||||
this.selectedObj[key].splice(idx, 1); |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
if (this.independence) { |
|
||||||
this.result = this.independenceObj; |
|
||||||
} else { |
|
||||||
this.result = this.selectedObj; |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
} else { |
|
||||||
if (index == 0) { |
|
||||||
this.resetSelected(list, key) |
|
||||||
if (!this.independence) { |
|
||||||
this.selectedTitleObj[key] = list[index].title; |
|
||||||
} |
|
||||||
} else { |
|
||||||
list[0].isSelected = false |
|
||||||
if (this.independence) { |
|
||||||
this.independenceObj[this.selectedKey] = list[index].value; |
|
||||||
this.result = this.independenceObj; |
|
||||||
} else { |
|
||||||
this.selectedObj[key] = list[index].value; |
|
||||||
this.result = this.selectedObj; |
|
||||||
this.selectedTitleObj[key] = list[index].title; |
|
||||||
} |
|
||||||
|
|
||||||
for (let i = 0; i < list.length; i++) { |
|
||||||
if (index == i) { |
|
||||||
list[i].isSelected = true |
|
||||||
} else { |
|
||||||
list[i].isSelected = false |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
// #ifdef H5 |
|
||||||
this.$forceUpdate(); |
|
||||||
// #endif |
|
||||||
}, |
|
||||||
resetSelected(list, key) { |
|
||||||
if (typeof this.result[key] == 'object') { |
|
||||||
this.result[key] = []; |
|
||||||
this.selectedTitleObj[key] = list[0].title; |
|
||||||
} else { |
|
||||||
this.result[key] = ''; |
|
||||||
this.selectedTitleObj[key] = list[0].title; |
|
||||||
} |
|
||||||
for (let i = 0; i < list.length; i++) { |
|
||||||
if (i == 0) { |
|
||||||
list[i].isSelected = true; |
|
||||||
} else { |
|
||||||
list[i].isSelected = false; |
|
||||||
} |
|
||||||
} |
|
||||||
// #ifdef H5 |
|
||||||
this.$forceUpdate(); |
|
||||||
// #endif |
|
||||||
}, |
|
||||||
sortTap(index, list, key) { |
|
||||||
if (this.independence) { |
|
||||||
this.independenceObj[this.selectedKey] = list[index].value; |
|
||||||
this.result = this.independenceObj; |
|
||||||
} else { |
|
||||||
this.selectedObj[key] = list[index].value; |
|
||||||
this.result = this.selectedObj; |
|
||||||
this.selectedTitleObj[key] = list[index].title; |
|
||||||
} |
|
||||||
|
|
||||||
for (let i = 0; i < list.length; i++) { |
|
||||||
if (index == i) { |
|
||||||
list[i].isSelected = true; |
|
||||||
} else { |
|
||||||
list[i].isSelected = false; |
|
||||||
} |
|
||||||
} |
|
||||||
let obj = { |
|
||||||
'result': this.result, |
|
||||||
'titles': this.selectedTitleObj, |
|
||||||
'isReset': false |
|
||||||
} |
|
||||||
this.$emit("confirm", obj); |
|
||||||
}, |
|
||||||
sureClick() { |
|
||||||
let obj = { |
|
||||||
'result': this.result, |
|
||||||
'titles': this.selectedTitleObj, |
|
||||||
'isReset': false |
|
||||||
} |
|
||||||
this.$emit("confirm", obj); |
|
||||||
}, |
|
||||||
resetClick(list, key) { |
|
||||||
this.resetSelected(list, key) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style> |
|
||||||
.filter-content { |
|
||||||
background-color: #F6F7F8; |
|
||||||
} |
|
||||||
|
|
||||||
.filter-content-title { |
|
||||||
border-bottom: #EEEEEE 1px solid; |
|
||||||
padding: 10px 15px; |
|
||||||
font-size: 13px; |
|
||||||
color: #999999; |
|
||||||
} |
|
||||||
|
|
||||||
.filter-content-detail { |
|
||||||
padding: 5px 15px; |
|
||||||
} |
|
||||||
|
|
||||||
.filter-content-detail-item-active { |
|
||||||
background-color: #D1372C; |
|
||||||
color: #FFFFFF; |
|
||||||
padding: 5px 15px; |
|
||||||
border-radius: 20px; |
|
||||||
margin-right: 10px; |
|
||||||
margin-top: 10px; |
|
||||||
display: inline-block; |
|
||||||
font-size: 14px; |
|
||||||
} |
|
||||||
|
|
||||||
.filter-content-detail-item-default { |
|
||||||
background-color: #FFFFFF; |
|
||||||
color: #666666; |
|
||||||
padding: 5px 15px; |
|
||||||
border-radius: 20px; |
|
||||||
margin-right: 10px; |
|
||||||
margin-top: 10px; |
|
||||||
display: inline-block; |
|
||||||
font-size: 14px; |
|
||||||
} |
|
||||||
|
|
||||||
.filter-content-footer { |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
width: 100%; |
|
||||||
height: 45px; |
|
||||||
margin-top: 10px; |
|
||||||
} |
|
||||||
|
|
||||||
.filter-content-footer-item { |
|
||||||
width: 50%; |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
font-size: 16px; |
|
||||||
} |
|
||||||
|
|
||||||
.filter-content-list { |
|
||||||
|
|
||||||
padding: 5px 15px; |
|
||||||
} |
|
||||||
|
|
||||||
.filter-content-list-item-default { |
|
||||||
color: #666666; |
|
||||||
width: 100%; |
|
||||||
padding: 10px 0px; |
|
||||||
} |
|
||||||
|
|
||||||
.filter-content-list-item-default text { |
|
||||||
width: 90%; |
|
||||||
font-size: 14px; |
|
||||||
display: inline-block; |
|
||||||
} |
|
||||||
|
|
||||||
.filter-content-list-item-active { |
|
||||||
color: #D1372C; |
|
||||||
width: 100%; |
|
||||||
padding: 10px 0px; |
|
||||||
} |
|
||||||
|
|
||||||
.filter-content-list-item-active text { |
|
||||||
font-size: 14px; |
|
||||||
width: 90%; |
|
||||||
display: inline-block; |
|
||||||
} |
|
||||||
|
|
||||||
.filter-content-list-item-active:after { |
|
||||||
content: '✓'; |
|
||||||
} |
|
||||||
</style> |
|
@ -1,20 +0,0 @@ |
|||||||
@font-face { |
|
||||||
font-family: 'sl-font'; |
|
||||||
src: url('data:font/truetype;charset=utf-8;base64,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') format('truetype'); |
|
||||||
} |
|
||||||
|
|
||||||
.sl-font { |
|
||||||
font-family: "sl-font" !important; |
|
||||||
font-size: 16px; |
|
||||||
font-style: normal; |
|
||||||
-webkit-font-smoothing: antialiased; |
|
||||||
-moz-osx-font-smoothing: grayscale; |
|
||||||
} |
|
||||||
|
|
||||||
.sl-down:before { |
|
||||||
content: "\e61a"; |
|
||||||
} |
|
||||||
|
|
||||||
.sl-up:before { |
|
||||||
content: "\e61c"; |
|
||||||
} |
|
@ -1,122 +0,0 @@ |
|||||||
<template> |
|
||||||
<scroll-view scroll-y v-show="ifshow" @tap="ableClose" @touchmove.stop.prevent class="popup-layer"> |
|
||||||
<view ref="popRef" class="popup-content" @tap.stop="stopEvent" :style="_location"> |
|
||||||
<slot></slot> |
|
||||||
</view> |
|
||||||
</scroll-view> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
export default { |
|
||||||
name: 'popup-layer', |
|
||||||
props: { |
|
||||||
direction: { |
|
||||||
type: String, |
|
||||||
default: 'top', // 方向 top,bottom,left,right |
|
||||||
}, |
|
||||||
autoClose: { |
|
||||||
type: Boolean, |
|
||||||
default: true, |
|
||||||
}, |
|
||||||
isTransNav: { |
|
||||||
type: Boolean, |
|
||||||
default: false |
|
||||||
}, |
|
||||||
navHeight: { |
|
||||||
type: Number, |
|
||||||
default: 0 |
|
||||||
} |
|
||||||
}, |
|
||||||
data() { |
|
||||||
return { |
|
||||||
ifshow: false, // 是否展示, |
|
||||||
translateValue: -100, // 位移距离 |
|
||||||
timer: null, |
|
||||||
iftoggle: false, |
|
||||||
}; |
|
||||||
}, |
|
||||||
computed: { |
|
||||||
_translate() { |
|
||||||
if (this.isTransNav) { |
|
||||||
const transformObj = { |
|
||||||
'top': `transform:translateY(${-this.translateValue}%)`, |
|
||||||
'bottom': `transform:translateY(calc(${this.translateValue}% + ${this.navHeight}px))`, |
|
||||||
'left': `transform:translateX(${-this.translateValue}%)`, |
|
||||||
'right': `transform:translateX(${this.translateValue}%)` |
|
||||||
}; |
|
||||||
return transformObj[this.direction] |
|
||||||
} else { |
|
||||||
const transformObj = { |
|
||||||
'top': `transform:translateY(${-this.translateValue}%)`, |
|
||||||
'bottom': `transform:translateY(${this.translateValue}%)`, |
|
||||||
'left': `transform:translateX(${-this.translateValue}%)`, |
|
||||||
'right': `transform:translateX(${this.translateValue}%)` |
|
||||||
}; |
|
||||||
return transformObj[this.direction] |
|
||||||
} |
|
||||||
|
|
||||||
}, |
|
||||||
_location() { |
|
||||||
const positionValue = { |
|
||||||
'top': 'bottom:0px;width:100%;', |
|
||||||
'bottom': 'top:0px;width:100%;', |
|
||||||
'left': 'right:0px;height:100%;', |
|
||||||
'right': 'left:0px;height:100%;', |
|
||||||
}; |
|
||||||
return positionValue[this.direction] + this._translate; |
|
||||||
} |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
show() { |
|
||||||
let _this = this; |
|
||||||
this.ifshow = true; |
|
||||||
let _open = setTimeout(() => { |
|
||||||
this.translateValue = 0; |
|
||||||
_open = null; |
|
||||||
}, 100) |
|
||||||
let _toggle = setTimeout(() => { |
|
||||||
this.iftoggle = true; |
|
||||||
_toggle = null; |
|
||||||
}, 300); |
|
||||||
}, |
|
||||||
close() { |
|
||||||
if (this.timer !== null || !this.iftoggle) { |
|
||||||
return; |
|
||||||
} |
|
||||||
this.translateValue = -100 - this.navHeight; |
|
||||||
|
|
||||||
this.timer = setTimeout(() => { |
|
||||||
this.ifshow = false; |
|
||||||
this.timer = null; |
|
||||||
this.iftoggle = false; |
|
||||||
}, 300); |
|
||||||
this.$emit("close") |
|
||||||
}, |
|
||||||
ableClose() { |
|
||||||
if (this.autoClose) { |
|
||||||
this.close(); |
|
||||||
} |
|
||||||
}, |
|
||||||
stopEvent(event) {}, |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style> |
|
||||||
.popup-layer { |
|
||||||
position: absolute; |
|
||||||
z-index: 999999; |
|
||||||
background: rgba(0, 0, 0, .3); |
|
||||||
height: calc(100% - 50px); |
|
||||||
width: 100%; |
|
||||||
left: 0px; |
|
||||||
overflow: hidden; |
|
||||||
} |
|
||||||
|
|
||||||
.popup-content { |
|
||||||
position: absolute; |
|
||||||
z-index: 1000000; |
|
||||||
background: #FFFFFF; |
|
||||||
transition: all .3s ease; |
|
||||||
} |
|
||||||
</style> |
|
@ -1,301 +0,0 @@ |
|||||||
<template> |
|
||||||
<view class="content"> |
|
||||||
<view :style="{height: tabHeight + 1 +'px'}"> |
|
||||||
<view :class="topFixed?'select-tab-fixed-top':'select-tab'" :style="{height: tabHeight+'px'}"> |
|
||||||
<view class="select-tab-item" :style="{width: titleList.length === 1 ? 'auto' : itemWidth}" v-for="(item,index) in titleList" :key="index" @tap="showMenuClick(index)"> |
|
||||||
<text :style="{color:color}">{{item.title}}</text> |
|
||||||
<text class="arrows sl-font" :class="statusList[index].isActive?up:down"></text> |
|
||||||
</view> |
|
||||||
</view> |
|
||||||
</view> |
|
||||||
<popup-layer ref="popupRef" :direction="'bottom'" @close="close" :isTransNav="isTransNav" :navHeight="navHeight" |
|
||||||
:tabHeight="tabHeight"> |
|
||||||
<sl-filter-view :ref="'slFilterView'" :independence="independence" :themeColor="themeColor" :menuList.sync="menuListTemp" |
|
||||||
ref="slFilterView" @confirm="filterResult"></sl-filter-view> |
|
||||||
</popup-layer> |
|
||||||
</view> |
|
||||||
|
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import popupLayer from '@/components/sl-filter/popup-layer.vue'; |
|
||||||
import slFilterView from '@/components/sl-filter/filter-view.vue'; |
|
||||||
export default { |
|
||||||
components: { |
|
||||||
popupLayer, |
|
||||||
slFilterView |
|
||||||
}, |
|
||||||
props: { |
|
||||||
menuList: { |
|
||||||
type: Array, |
|
||||||
default () { |
|
||||||
return [] |
|
||||||
} |
|
||||||
}, |
|
||||||
themeColor: { |
|
||||||
type: String, |
|
||||||
default () { |
|
||||||
return '#000000' |
|
||||||
} |
|
||||||
}, |
|
||||||
color: { |
|
||||||
type: String, |
|
||||||
default () { |
|
||||||
return '#666666' |
|
||||||
} |
|
||||||
}, |
|
||||||
independence: { |
|
||||||
type: Boolean, |
|
||||||
default: false |
|
||||||
}, |
|
||||||
isTransNav: { |
|
||||||
type: Boolean, |
|
||||||
default: false |
|
||||||
}, |
|
||||||
navHeight: { |
|
||||||
type: Number, |
|
||||||
default: 0 |
|
||||||
}, |
|
||||||
topFixed: { |
|
||||||
type: Boolean, |
|
||||||
default: false |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
computed: { |
|
||||||
itemWidth() { |
|
||||||
return 'calc(100%/2)' |
|
||||||
}, |
|
||||||
menuListTemp: { |
|
||||||
get() { |
|
||||||
return this.getMenuListTemp(); |
|
||||||
}, |
|
||||||
set(newObj) { |
|
||||||
return newObj; |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
// #ifndef H5 |
|
||||||
onReady: function() { |
|
||||||
let arr = []; |
|
||||||
let titleArr = []; |
|
||||||
let r = {}; |
|
||||||
for (let i = 0; i < this.menuList.length; i++) { |
|
||||||
arr.push({ |
|
||||||
'isActive': false |
|
||||||
}); |
|
||||||
// titleArr.push({ |
|
||||||
// 'title': this.menuList[i].title, |
|
||||||
// 'key': this.menuList[i].key |
|
||||||
// }) |
|
||||||
|
|
||||||
r[this.menuList[i].key] = this.menuList[i].title; |
|
||||||
|
|
||||||
if (this.menuList[i].reflexTitle && this.menuList[i].defaultSelectedIndex > -1) { |
|
||||||
titleArr.push({ |
|
||||||
'title': this.menuList[i].detailList[this.menuList[i].defaultSelectedIndex].title, |
|
||||||
'key': this.menuList[i].key |
|
||||||
}) |
|
||||||
} else { |
|
||||||
titleArr.push({ |
|
||||||
'title': this.menuList[i].title, |
|
||||||
'key': this.menuList[i].key |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
this.statusList = arr; |
|
||||||
this.titleList = titleArr; |
|
||||||
this.tempTitleObj = r; |
|
||||||
}, |
|
||||||
// #endif |
|
||||||
|
|
||||||
// #ifdef H5 |
|
||||||
created: function() { |
|
||||||
let arr = []; |
|
||||||
let titleArr = []; |
|
||||||
let r = {}; |
|
||||||
for (let i = 0; i < this.menuList.length; i++) { |
|
||||||
arr.push({ |
|
||||||
'isActive': false |
|
||||||
}); |
|
||||||
// titleArr.push({ |
|
||||||
// 'title': this.menuList[i].title, |
|
||||||
// 'key': this.menuList[i].key |
|
||||||
// }); |
|
||||||
r[this.menuList[i].key] = this.menuList[i].title; |
|
||||||
|
|
||||||
if (this.menuList[i].reflexTitle && this.menuList[i].defaultSelectedIndex > -1) { |
|
||||||
titleArr.push({ |
|
||||||
'title': this.menuList[i].detailList[this.menuList[i].defaultSelectedIndex].title, |
|
||||||
'key': this.menuList[i].key |
|
||||||
}) |
|
||||||
} else { |
|
||||||
titleArr.push({ |
|
||||||
'title': this.menuList[i].title, |
|
||||||
'key': this.menuList[i].key |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
this.statusList = arr; |
|
||||||
this.titleList = titleArr; |
|
||||||
this.tempTitleObj = r; |
|
||||||
}, |
|
||||||
// #endif |
|
||||||
data() { |
|
||||||
return { |
|
||||||
down: 'sl-down', |
|
||||||
up: 'sl-up', |
|
||||||
tabHeight: 50, |
|
||||||
statusList: [], |
|
||||||
selectedIndex: '', |
|
||||||
titleList: [], |
|
||||||
tempTitleObj: {} |
|
||||||
}; |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
getMenuListTemp() { |
|
||||||
let arr = this.menuList; |
|
||||||
for (let i = 0; i < arr.length; i++) { |
|
||||||
let item = arr[i]; |
|
||||||
for (let j = 0; j < item.detailList.length; j++) { |
|
||||||
let d_item = item.detailList[j]; |
|
||||||
if (j == 0) { |
|
||||||
d_item.isSelected = true |
|
||||||
} else { |
|
||||||
d_item.isSelected = false |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
return arr; |
|
||||||
}, |
|
||||||
// 重置所有选项,包括默认选项,并更新result |
|
||||||
resetAllSelect(callback) { |
|
||||||
this.$refs.slFilterView.resetAllSelect(function(e){ |
|
||||||
callback(e); |
|
||||||
}); |
|
||||||
}, |
|
||||||
// 重置选项为设置的默认值,并更新result |
|
||||||
resetSelectToDefault(callback) { |
|
||||||
this.$refs.slFilterView.resetSelectToDefault(function(e){ |
|
||||||
callback(e); |
|
||||||
}); |
|
||||||
}, |
|
||||||
resetMenuList(val) { |
|
||||||
this.menuList = val; |
|
||||||
this.$emit('update:menuList', val) |
|
||||||
this.$forceUpdate(); |
|
||||||
this.$refs.slFilterView.resetMenuList(val) |
|
||||||
}, |
|
||||||
showMenuClick(index) { |
|
||||||
this.selectedIndex = index; |
|
||||||
if (this.statusList[index].isActive == true) { |
|
||||||
this.$refs.popupRef.close(); |
|
||||||
this.statusList[index].isActive = false |
|
||||||
} else { |
|
||||||
this.menuTabClick(index); |
|
||||||
this.$refs.popupRef.show() |
|
||||||
} |
|
||||||
}, |
|
||||||
menuTabClick(index) { |
|
||||||
this.$refs.slFilterView.menuTabClick(index); |
|
||||||
for (let i = 0; i < this.statusList.length; i++) { |
|
||||||
if (index == i) { |
|
||||||
this.statusList[i].isActive = true; |
|
||||||
} else { |
|
||||||
this.statusList[i].isActive = false; |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
filterResult(obj) { |
|
||||||
let val = obj.result; |
|
||||||
let titlesObj = obj.titles; |
|
||||||
// 处理选项映射到菜单title |
|
||||||
if (this.independence) { |
|
||||||
if (!this.menuList[this.selectedIndex].isMutiple || this.menuList[this.selectedIndex].isSort) { |
|
||||||
let tempTitle = ''; |
|
||||||
for (let i = 0; i < this.menuList[this.selectedIndex].detailList.length; i++) { |
|
||||||
let item = this.menuList[this.selectedIndex].detailList[i]; |
|
||||||
if (item.value == val[this.menuList[this.selectedIndex].key]) { |
|
||||||
tempTitle = item.title; |
|
||||||
} |
|
||||||
} |
|
||||||
if (this.menuList[this.selectedIndex].reflexTitle) { |
|
||||||
this.titleList[this.selectedIndex].title = tempTitle; |
|
||||||
} |
|
||||||
} |
|
||||||
} else { |
|
||||||
for (let key in titlesObj) { |
|
||||||
if (!Array.isArray(titlesObj[key])) { |
|
||||||
this.tempTitleObj[key] = titlesObj[key]; |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
for (let key in this.tempTitleObj) { |
|
||||||
for (let i = 0; i < this.titleList.length; i++) { |
|
||||||
if (this.titleList[i].key == key) { |
|
||||||
this.titleList[i].title = this.tempTitleObj[key]; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
this.$refs.popupRef.close() |
|
||||||
if (obj.isReset) { |
|
||||||
|
|
||||||
} else{ |
|
||||||
this.$emit("result", val) |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
}, |
|
||||||
close() { |
|
||||||
for (let i = 0; i < this.statusList.length; i++) { |
|
||||||
this.statusList[i].isActive = false; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style> |
|
||||||
@import 'iconfont/iconfont.css'; |
|
||||||
|
|
||||||
.select-tab { |
|
||||||
background-color: #FFFFFF; |
|
||||||
display: flex; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
.select-tab-fixed-top { |
|
||||||
border-bottom: #F7F7F7 1px solid; |
|
||||||
background-color: #FFFFFF; |
|
||||||
display: flex; |
|
||||||
width: 100%; |
|
||||||
position: fixed; |
|
||||||
/* #ifdef H5 */ |
|
||||||
top: 44px; |
|
||||||
/* #endif */ |
|
||||||
/* #ifndef H5 */ |
|
||||||
top: 0; |
|
||||||
/* #endif */ |
|
||||||
} |
|
||||||
|
|
||||||
.arrows { |
|
||||||
margin-left: 5px; |
|
||||||
} |
|
||||||
|
|
||||||
.select-tab .select-tab-item, |
|
||||||
.select-tab-fixed-top .select-tab-item { |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
|
|
||||||
.select-tab .select-tab-item text, |
|
||||||
.select-tab-fixed-top .select-tab-item text { |
|
||||||
color: #666666; |
|
||||||
font-size: 14px; |
|
||||||
} |
|
||||||
</style> |
|
@ -1,89 +0,0 @@ |
|||||||
<template> |
|
||||||
<view class="page"> |
|
||||||
<web-view :webview-styles="webviewStyles" :src="src"></web-view> |
|
||||||
</view> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
export default { |
|
||||||
data() { |
|
||||||
return { |
|
||||||
files: [ |
|
||||||
'https://huoran.oss-cn-shenzhen.aliyuncs.com/20220530/docx/1531155187057057792.docx', |
|
||||||
'https://huoran.oss-cn-shenzhen.aliyuncs.com/20220530/docx/1531156166884220928.docx', |
|
||||||
'https://huoran.oss-cn-shenzhen.aliyuncs.com/20220601/docx/1531930503312596992.docx', // 人工智能 |
|
||||||
'https://huoran.oss-cn-shenzhen.aliyuncs.com/20220601/docx/1531930756791164928.docx', // 大数据 |
|
||||||
'https://huoran.oss-cn-shenzhen.aliyuncs.com/20220601/docx/1531929864150999040.docx', // 金融科技 |
|
||||||
], |
|
||||||
src: '', |
|
||||||
webviewStyles: { |
|
||||||
progress: { |
|
||||||
color: '#FF3333' |
|
||||||
} |
|
||||||
}, |
|
||||||
} |
|
||||||
}, |
|
||||||
onShow() { |
|
||||||
const pages = getCurrentPages() |
|
||||||
const { options } = |
|
||||||
this.src = `http://view.xdocin.com/xdoc?_xdoc=${this.files[pages[pages.length - 1].options.id]}` |
|
||||||
// this.preview() |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
preview() { |
|
||||||
uni.showLoading({ |
|
||||||
title: '加载中', |
|
||||||
mask: true |
|
||||||
}) |
|
||||||
//下载文件资源到本地 |
|
||||||
uni.downloadFile({ |
|
||||||
url: this.src, |
|
||||||
success: function(res) { |
|
||||||
console.log('downloadFile ==> ',res) |
|
||||||
uni.hideLoading(); |
|
||||||
var filePath = res.tempFilePath; |
|
||||||
uni.showLoading({ |
|
||||||
title: '正在打开', |
|
||||||
mask: true |
|
||||||
}) |
|
||||||
// 新开页面打开文档,支持格式:doc, xls, ppt, pdf, docx, xlsx, pptx。 |
|
||||||
uni.openDocument({ |
|
||||||
filePath: filePath, |
|
||||||
fileType: 'docx',// 文件类型,指定文件类型打开文件,有效值 doc, xls, ppt, pdf, docx, xlsx, pptx |
|
||||||
// showMenu: true, // 允许出现分享功能 |
|
||||||
success: res => { |
|
||||||
uni.hideLoading(); |
|
||||||
console.log('打开文档成功',res); |
|
||||||
}, |
|
||||||
fail: openError => { |
|
||||||
uni.hideLoading(); |
|
||||||
console.log('fail:' + JSON.stringify(openError)); |
|
||||||
} |
|
||||||
}); |
|
||||||
}, |
|
||||||
fail: function(err) { |
|
||||||
uni.hideLoading(); |
|
||||||
console.log('fail:' + JSON.stringify(err)); |
|
||||||
} |
|
||||||
}); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style scoped lang="scss"> |
|
||||||
.page { |
|
||||||
padding: 60rpx 40rpx; |
|
||||||
background-color: #fff; |
|
||||||
} |
|
||||||
.title { |
|
||||||
margin-bottom: 30rpx; |
|
||||||
font-size: 38rpx; |
|
||||||
text-align: center; |
|
||||||
color: #333; |
|
||||||
} |
|
||||||
.content { |
|
||||||
white-space: pre-wrap; |
|
||||||
font-size: 28rpx; |
|
||||||
} |
|
||||||
</style> |
|
@ -1,170 +0,0 @@ |
|||||||
<template> |
|
||||||
<view class="page"> |
|
||||||
<view class="title">Annie 邀请你加入</view> |
|
||||||
<view class="form"> |
|
||||||
<view class="icon"> |
|
||||||
<image src="@/static/image/house.png" mode=""></image> |
|
||||||
</view> |
|
||||||
<view class="des">或然科技城市合伙人计划</view> |
|
||||||
<view class="des">加入并自动为你创建一个团队群组</view> |
|
||||||
<view class="input"> |
|
||||||
<uni-easyinput v-model="form.userName" placeholder="请填写姓名" :clearable="false" /> |
|
||||||
</view> |
|
||||||
<view class="input"> |
|
||||||
<uni-easyinput v-model="form.account" placeholder="请填写账号" :clearable="false" /> |
|
||||||
</view> |
|
||||||
<view class="input"> |
|
||||||
<uni-easyinput v-model="form.phone" placeholder="请填写你的手机号" :clearable="false" /> |
|
||||||
</view> |
|
||||||
<view class="input code-wrap"> |
|
||||||
<uni-easyinput class="code" v-model="form.code" placeholder="验证码" :clearable="false" /> |
|
||||||
<view class="send-code" @click="sendCode" :disabled="codeDisabled">{{ btnText }}</view> |
|
||||||
</view> |
|
||||||
<view class="input"> |
|
||||||
<uni-easyinput v-model="form.email" placeholder="请填写邮箱" :clearable="false" /> |
|
||||||
</view> |
|
||||||
<button class="submit" type="primary" size="10" @click="submit">立即加入</button> |
|
||||||
</view> |
|
||||||
</view> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import { savePartnerAccount } from '@/apis/modules/parner.js' |
|
||||||
export default { |
|
||||||
data() { |
|
||||||
return { |
|
||||||
form: { |
|
||||||
isTeam: 1, // 0为团队,1为成员 |
|
||||||
partnerClassificationId: 167, |
|
||||||
token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1c2VyIiwiaWF0IjoxNjUzMjcyMjMyLCJleHAiOjE2NTMzMTU0MzIsImFjY291bnRJZCI6IjEifQ.gf5myNnrLmVjUcIWfqfohWyvdPXXwr9butZo75CXk64', |
|
||||||
userName: '', |
|
||||||
account: '', |
|
||||||
phone: '', |
|
||||||
code: '', |
|
||||||
email: '' |
|
||||||
}, |
|
||||||
codeDisabled: false, |
|
||||||
phoneTimer: null, |
|
||||||
phoneOpener: '', |
|
||||||
btnText: '发送验证码', |
|
||||||
} |
|
||||||
}, |
|
||||||
onLoad() { |
|
||||||
|
|
||||||
}, |
|
||||||
methods: { |
|
||||||
// 提交 |
|
||||||
submit() { |
|
||||||
const { form } = this |
|
||||||
const { userName, phone } = form |
|
||||||
if (!userName) return this.$util.errMsg('请输入姓名!') |
|
||||||
if (!phone) return this.$util.errMsg('请输入手机号!') |
|
||||||
form.uniqueIdentification = Date.now() |
|
||||||
savePartnerAccount(this.form).then(res => { |
|
||||||
this.$util.sucMsg('加入成功') |
|
||||||
setTimeout(() => { |
|
||||||
// uni.navigateBack() |
|
||||||
}, 1500) |
|
||||||
}).catch(res => {}) |
|
||||||
}, |
|
||||||
// 验证码倒计时 |
|
||||||
phoneCountdown() { |
|
||||||
let count = 60 |
|
||||||
if (!this.phoneTimer) { |
|
||||||
this.codeDisabled = true |
|
||||||
this.phoneTimer = setInterval(() => { |
|
||||||
if (count > 0) { |
|
||||||
count-- |
|
||||||
this.btnText = `${count}秒后重试` |
|
||||||
} else { |
|
||||||
this.codeDisabled = false |
|
||||||
clearInterval(this.phoneTimer) |
|
||||||
this.phoneTimer = null |
|
||||||
this.btnText = `发送验证码` |
|
||||||
} |
|
||||||
}, 1000) |
|
||||||
} |
|
||||||
}, |
|
||||||
// 发送验证码 |
|
||||||
sendCode() { |
|
||||||
const { phone } = this.form |
|
||||||
if (!phone) return this.$util.errMsg('请填写手机号!') |
|
||||||
if (!/^1[3456789]\d{9}$/.test(phone) && !/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(phone)) return this.$util.errMsg('请填写正确的手机号!') |
|
||||||
// this.$post(this.api.sendPhoneOrEmailCode, { |
|
||||||
// platform: Setting.platformId, |
|
||||||
// phone, |
|
||||||
// types: 2 |
|
||||||
// }).then(({ message }) => { |
|
||||||
// if (message.opener) { |
|
||||||
// this.phoneCountdown() |
|
||||||
// this.phoneOpener = message.opener |
|
||||||
// } else { |
|
||||||
// util.errorMsg(message) |
|
||||||
// } |
|
||||||
// }).catch(res => {}) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style scoped lang="scss"> |
|
||||||
.page { |
|
||||||
margin: 20px; |
|
||||||
border-radius: 6px; |
|
||||||
overflow: hidden; |
|
||||||
.title { |
|
||||||
padding: 0 15px; |
|
||||||
line-height: 2.4; |
|
||||||
font-size: 16px; |
|
||||||
color: #fff; |
|
||||||
background-color: #319bf7; |
|
||||||
} |
|
||||||
} |
|
||||||
.form { |
|
||||||
padding: 20px 20px 30px; |
|
||||||
background-color: #fff; |
|
||||||
.icon { |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
width: 70px; |
|
||||||
height: 70px; |
|
||||||
margin: 20px auto; |
|
||||||
border-radius: 4px; |
|
||||||
background-color: $uni-primary; |
|
||||||
image { |
|
||||||
width: 40px; |
|
||||||
height: 40px; |
|
||||||
} |
|
||||||
} |
|
||||||
.des { |
|
||||||
margin-bottom: 10px; |
|
||||||
text-align: center; |
|
||||||
font-size: 14px; |
|
||||||
} |
|
||||||
.input { |
|
||||||
margin-bottom: 20px; |
|
||||||
} |
|
||||||
.code-wrap { |
|
||||||
display: flex; |
|
||||||
} |
|
||||||
.code { |
|
||||||
flex: 1; |
|
||||||
} |
|
||||||
.send-code { |
|
||||||
width: 100px; |
|
||||||
margin-left: 20px; |
|
||||||
text-align: center; |
|
||||||
color: #4386ff; |
|
||||||
font-size: 12px; |
|
||||||
line-height: 36px; |
|
||||||
border: 1px solid #4386ff; |
|
||||||
border-radius: 5px; |
|
||||||
} |
|
||||||
.submit { |
|
||||||
line-height: 38px; |
|
||||||
font-size: 14px; |
|
||||||
border-radius: 40px; |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
Before Width: | Height: | Size: 2.3 KiB |
Before Width: | Height: | Size: 331 B |
After Width: | Height: | Size: 1.4 KiB |
Loading…
Reference in new issue